/* Cockpilot, the site. Light by default (day sky), dark on demand (night sky). Big, simple calls to action. The app
   window itself is styled by /site/appli.css. Fonts are self-hosted, nothing is loaded from a third party. */

@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/schibsted-grotesk.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }

:root {
  --fond: #eef2f6;
  --fond-appli: #f6f3ee;
  --surface: rgba(255, 255, 255, 0.84);
  --surface-pleine: #ffffff;
  --bord: rgba(20, 24, 30, 0.09);
  --texte: #15171a;
  --doux: #5a6068;
  --tres-doux: #8a9098;
  --cta-fond: #15171a;
  --cta-texte: #ffffff;
  --accent: #2c5d94;
  --vert: #2e7d51;
  --ambre: #9a6b15;
  --rouge: #b8463c;
  --barre: #dde3ea;
  --ombre: 0 24px 60px -24px rgba(20, 30, 50, 0.35);
  --ciel: url('/ciel/aube-hd.webp');
  --police: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}
:root[data-theme='dark'] {
  --fond: #0f0e0c;
  --fond-appli: #131210;
  --surface: rgba(24, 22, 20, 0.78);
  --surface-pleine: #1b1917;
  --bord: rgba(255, 255, 255, 0.09);
  --texte: #ede8e1;
  --doux: #a39a92;
  --tres-doux: #6f675f;
  --cta-fond: #ede8e1;
  --cta-texte: #12110f;
  --accent: #8db4de;
  --vert: #6fbf8e;
  --ambre: #d9a14a;
  --rouge: #e0776b;
  --barre: #2a2622;
  --ombre: 0 30px 80px -24px rgba(0, 0, 0, 0.7);
  --ciel: url('/ciel/nuit-hd.webp');
  color-scheme: dark;
}
@media (max-width: 900px) {
  :root { --ciel: url('/ciel/aube-hd-1600.webp'); }
  :root[data-theme='dark'] { --ciel: url('/ciel/nuit-hd-1600.webp'); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color 600ms; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.03em; text-wrap: balance; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vert { color: var(--vert); }
.ambre { color: var(--ambre); }
.rouge { color: var(--rouge); }
.lecteur-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- header */
.entete {
  position: fixed; inset: 14px 14px auto; z-index: 30; height: 60px;
  display: flex; align-items: center; gap: 28px; padding: 0 10px 0 18px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 18px;
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--ombre);
}
.marque { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
/* The drawn name (outils/nom.py): its letters take the text's colour, its two o are the windshield's panes. */
.nom { display: block; flex: none; height: 1.1em; width: auto; aspect-ratio: 495 / 95; color: var(--texte); }
/* The living mark (site/marque.js): the windshield's clouds and the name's bank together by --roulis (the name half as
   much, its two panes being far apart), and each letter rises in turn when the mark comes in. */
.signe { display: block; flex: none; width: 28px; height: 28px; }
.pied .signe { width: 22px; height: 22px; }
.marque-vivante .horizon { transform-box: view-box; }
.signe-vivant .horizon { transform: rotate(calc(-8deg + var(--roulis, 0deg))); }
.nom-vivant .horizon { transform: rotate(calc(-1.9deg + var(--roulis, 0deg) * 0.5)); }
.marque-vivante.entree .lettre { animation: lettre-entre 760ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 36ms) backwards; }
@keyframes lettre-entre { from { opacity: 0; transform: translateY(30px); } }
.marque-vivante.attend .lettre { opacity: 0; }
.nav { display: flex; gap: 24px; font-size: 14.5px; color: var(--doux); }
.nav a, .entete .lien, .entete .cta { white-space: nowrap; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--texte); }
/* Seven pages in the header: on a narrower computer they sit closer, and below that the header's Sign in goes (it is
   in the page and in the footer), as on a phone. */
@media (max-width: 1240px) { .nav { gap: 16px; font-size: 14px; } }
@media (max-width: 1080px) { .entete .lien { display: none; } }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lien { font-size: 15px; font-weight: 500; color: var(--doux); display: inline-flex; align-items: center; gap: 6px; }
.lien:hover { color: var(--texte); }
.theme { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--bord); background: transparent; color: var(--texte); display: grid; place-items: center; cursor: pointer; }
.theme .nuit { display: none; }
:root[data-theme='dark'] .theme .jour { display: none; }
:root[data-theme='dark'] .theme .nuit { display: block; }
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--cta-fond); color: var(--cta-texte);
  font: 600 15.5px/1 var(--police); letter-spacing: -0.01em;
  transition: transform 160ms var(--courbe), box-shadow 160ms;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45); }
.cta-geant { height: 62px; padding: 0 34px; font-size: 18.5px; }
.lien-fleche { font-size: 17px; }
.cta:focus-visible, .lien:focus-visible, .theme:focus-visible, .nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- the opening */
/* The loading screen has the colour of the cloud the cockpit comes out of. The windshield opens (its blinds lift), the
   aircraft climbs out of the clouds as the cockpit loads (the horizon comes down to its place in the mark, rolling
   gently), then the view dives through the central pane into the cockpit. */
.chargement { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background-color: #eef3f8; transition: background-color 820ms cubic-bezier(0.4, 0, 0.2, 1) 360ms, visibility 0s 1250ms; }
:root[data-theme='dark'] .chargement { background-color: #0e1218; }
/* At night the windshield shows the night the cockpit is flying in. */
:root[data-theme='dark'] .chargement-vitres { background: #1c2940; }
:root[data-theme='dark'] .chargement-roulis { background: #4f5869; }
.chargement-signe { display: grid; justify-items: center; gap: 22px; }
.chargement-pare-brise { position: relative; z-index: 1; width: 76px; height: 76px; border-radius: 17.8px; background: #151413; animation: chargement-tuile 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards; transition: transform 1100ms cubic-bezier(0.7, 0, 0.16, 1), opacity 380ms linear 700ms; }
.chargement-vitres { position: absolute; inset: 0; overflow: hidden; background: #86afd9; }
.chargement-montee { position: absolute; left: -76px; width: 228px; height: 160px; transform: translateY(calc((1 - var(--progres, 0)) * -31px)); transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1); }
.chargement-roulis { position: absolute; inset: 0; background: #e9e3d8; transform-origin: 50% 0; animation: chargement-roulis 3.4s ease-in-out infinite alternate; }
.chargement-store { position: absolute; inset: 0; background: #151413; animation: chargement-store 820ms cubic-bezier(0.7, 0, 0.2, 1) calc(240ms + var(--n) * 110ms) forwards; }
.chargement-nom { height: 22px; animation: chargement-nom 900ms cubic-bezier(0.16, 1, 0.3, 1) 520ms backwards; transition: opacity 160ms linear, transform 320ms ease-in; }
@keyframes chargement-tuile { from { opacity: 0; transform: scale(0.86); } }
@keyframes chargement-store { to { transform: scaleY(0); } }
@keyframes chargement-roulis { from { transform: rotate(-11deg); } to { transform: rotate(-5deg); } }
@keyframes chargement-nom { from { opacity: 0; transform: translateY(8px); } }
.chargement.fini { background-color: rgb(238 243 248 / 0); visibility: hidden; pointer-events: none; }
:root[data-theme='dark'] .chargement.fini { background-color: rgb(14 18 24 / 0); }
.chargement.fini .chargement-pare-brise { transform: scale(46); opacity: 0; }
.chargement.fini .chargement-nom { opacity: 0; transform: translateY(-6px); }

.mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mot > span { display: inline-block; transform: translateY(108%); transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 70ms + 450ms); }
.scene-prete .mot > span { transform: none; }
.calque-accueil .accueil-droite { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--courbe) 1200ms, transform 1100ms var(--courbe) 1200ms; }
.scene-prete .calque-accueil .accueil-droite { opacity: 1; transform: none; }
body:has(.chargement) .entete { opacity: 0; transform: translateY(-10px); transition: opacity 800ms var(--courbe) 900ms, transform 900ms var(--courbe) 900ms; }
.scene-prete body .entete { opacity: 1; transform: none; }

/* A thin line at the bottom of the first screen, a dot running down it: keep scrolling. */
.indice-defiler { position: absolute; z-index: 5; left: 50%; bottom: 26px; width: 1px; height: 46px; background: color-mix(in srgb, var(--texte) 22%, transparent); opacity: 0; transition: opacity 800ms 2400ms; overflow: hidden; }
.indice-defiler i { position: absolute; left: -1px; top: -8px; width: 3px; height: 8px; border-radius: 2px; background: var(--texte); animation: defile 1.8s cubic-bezier(0.6, 0, 0.4, 1) infinite; }
.intro-finie .indice-defiler { opacity: 1; }
.intro-finie .indice-defiler.loin { opacity: 0; transition: opacity 300ms; }
.indice-defiler.loin i { animation: none; }
@keyframes defile { to { transform: translateY(60px); } }
/* Whatever is out of sight does not move: a hidden panel's animations are paused (they would still be computed). */
.calque.eteint i { animation-play-state: paused; }

/* ---------------------------------------------------------------- the cockpit tour */
/* One stage for the whole tour: the cockpit, the dive into the board, then the app pulled back out of it. pilote.js
   sets the section's height from the length of each part. */
.vol { position: relative; height: 1010vh; }
.scene3d { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--fond); }
#toile { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1200ms var(--courbe); }
.scene-prete #toile { opacity: 1; }
.voile { position: absolute; inset: 0 0 auto 0; z-index: 1; height: 52%; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--fond) 55%, transparent), transparent); }
.fondu { position: absolute; inset: 0; z-index: 6; background: var(--fond-appli); opacity: 0; pointer-events: none; }
/* A lens vignette on the cockpit, as in a photograph. */
.vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 95% at 50% 45%, transparent 58%, rgba(10, 14, 20, 0.22) 100%); }

.calque { position: absolute; z-index: 5; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.calque-accueil { inset: clamp(104px, 15vh, 150px) 0 auto 0; padding: 0 clamp(20px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.calque-accueil h1 { font-size: clamp(42px, 5.6vw, 84px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 680; }
.accueil-droite { display: grid; gap: 26px; padding-bottom: 6px; }
.accueil-droite p { font-size: 18px; line-height: 1.55; color: var(--doux); max-width: 44ch; }
.actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.carte-calque {
  top: 50%; width: min(440px, calc(100% - 40px)); translate: 0 -50%;
  padding: 26px 26px 24px; display: grid; gap: 18px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 22px;
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--ombre);
}
.a-droite { right: clamp(20px, 5vw, 80px); }
.a-gauche { left: clamp(20px, 5vw, 80px); }
.carte-calque h2 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; }
.fil { display: grid; gap: 10px; }
.vocal-calque { justify-self: end; display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--surface-pleine); border: 1px solid var(--bord); }
.vocal-calque .ic { color: var(--accent); width: 16px; height: 16px; }
.onde-calque { display: flex; align-items: center; gap: 2px; height: 18px; }
.onde-calque i { width: 2.5px; height: 12px; border-radius: 2px; background: var(--doux); animation: onde2 900ms ease-in-out infinite alternate; }
.onde-calque i:nth-child(3n) { height: 16px; animation-delay: -300ms; }
@keyframes onde2 { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }
.dit-calque { justify-self: end; text-align: right; font-size: 15px; }
.outil-calque { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--doux); flex-wrap: wrap; }
.outil-calque b { color: var(--accent); font-weight: 500; }
.ok { width: 15px; height: 15px; color: var(--vert); }
.compris-calque { font-size: 14.5px; color: var(--doux); }
.compris-calque strong { color: var(--texte); font-weight: 500; }
.registre { list-style: none; margin: 0; padding: 0; display: grid; }
.registre li { display: grid; grid-template-columns: 24px 56px 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--bord); font-size: 14.5px; }
.registre li:first-child { border-top: 0; }
.registre-contacts li, .registre-projets li { grid-template-columns: minmax(0, 1fr) auto auto; }
.registre li > span:first-child:not(.perso) { display: grid; gap: 2px; }
.registre small { font-size: 12.5px; color: var(--tres-doux); }
.registre .mono { font-size: 13px; color: var(--doux); }
.etat { font-size: 13px; color: var(--tres-doux); white-space: nowrap; }
.etat.vert { color: var(--vert); }
.etat.ambre { color: var(--ambre); }
.etat.rouge { color: var(--rouge); }
.barre { height: 6px; border-radius: 3px; background: var(--barre); overflow: hidden; }
.barre b { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--accent); border-radius: 3px; }
.grand-chiffre { font-size: 15px; color: var(--doux); display: flex; align-items: baseline; gap: 10px; }
.grand-chiffre .mono { font-size: 44px; font-weight: 500; color: var(--texte); letter-spacing: -0.04em; }
.perso { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11px/1 var(--police); color: #12110f; }
.perso.r { background: #c9c1b7; }
.perso.f { background: #8db4de; }

/* ---------------------------------------------------------------- /pricing/: the team's size lights the windshield */
.tarifs { max-width: 1320px; margin: 0 auto; padding: 64px clamp(20px, 4vw, 56px) 0; display: grid; gap: 20px; }
.tarifs-simulateur { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 52px); border: 1px solid var(--bord); border-radius: 28px; background: var(--surface-pleine); }
.tarifs-visuel { display: grid; place-items: center; }
.tarifs-visuel .tarifs-pare-brise { width: min(100%, 300px); height: auto; filter: drop-shadow(0 30px 50px rgba(10, 20, 40, 0.22)); }
.tarifs-eteinte { fill: #24272c; }
:root[data-theme='dark'] .tarifs-pare-brise { border-radius: 23.4%; box-shadow: 0 0 0 1px rgba(237, 232, 225, 0.1); }
.tarifs-allumee { opacity: 0; transition: opacity 520ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.tarifs-vitre.allumee .tarifs-allumee { opacity: 1; }
.tarifs-pare-brise .horizon { transform-box: view-box; transform: rotate(-8deg); }
.tarifs-reglage { display: grid; gap: 22px; }
.tarifs-reglage h2 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -0.04em; }
.tarifs-curseur { display: grid; gap: 14px; }
.tarifs-taille { font-size: clamp(54px, 6vw, 84px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.tarifs-taille::after { content: ' ' attr(data-unite); font-size: 0.3em; font-weight: 500; letter-spacing: -0.01em; color: var(--doux); }
.tarifs-curseur input { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.tarifs-curseur input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--texte) var(--avance, 10%), color-mix(in srgb, var(--texte) 12%, transparent) var(--avance, 10%)); }
.tarifs-curseur input::-moz-range-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--texte) 12%, transparent); }
.tarifs-curseur input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--texte); }
.tarifs-curseur input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--surface-pleine); border: 2px solid var(--texte); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.4); transition: transform 160ms; }
.tarifs-curseur input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-pleine); border: 2px solid var(--texte); }
.tarifs-curseur input:active::-webkit-slider-thumb { transform: scale(1.12); }
.tarifs-curseur input:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
.tarifs-resultat { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--bord); }
.tarifs-plan { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.tarifs-prix { font-size: clamp(40px, 4.4vw, 60px); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.tarifs-prix small, .tarif-prix small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--doux); margin-left: 8px; }
.tarifs-comparaison { color: var(--doux); font-size: 15.5px; }
.tarifs-periode { display: inline-flex; justify-self: start; padding: 4px; border: 1px solid var(--bord); border-radius: 999px; background: var(--fond); }
.tarifs-periode button { border: 0; background: none; padding: 9px 16px; border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--doux); cursor: pointer; transition: background 200ms, color 200ms; }
.tarifs-periode button[aria-pressed='true'] { background: var(--surface-pleine); color: var(--texte); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.25); }
.tarifs-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tarif { display: grid; gap: 14px; align-content: start; padding: 28px; border: 1px solid var(--bord); border-radius: 24px; background: var(--surface-pleine); transition: border-color 300ms, box-shadow 300ms, transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.tarif.conseille { border-color: var(--texte); box-shadow: 0 30px 60px -36px rgba(10, 20, 40, 0.45); transform: translateY(-4px); }
.tarif-tete { display: flex; align-items: center; gap: 14px; }
.tarif-tete .tarifs-pare-brise { width: 46px; height: 46px; flex: none; border-radius: 11px; }
.tarif-tete h3 { font-size: 24px; letter-spacing: -0.03em; }
.tarif-pour { color: var(--doux); font-size: 14.5px; }
.tarif-prix { display: flex; align-items: baseline; font-size: 46px; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.tarif-devise { font-size: 0.6em; margin-right: 2px; }
.tarif-facture { color: var(--doux); font-size: 14px; margin-top: -8px; }
.tarif-texte { color: var(--doux); font-size: 15.5px; line-height: 1.5; min-height: 4.5em; }
.tarif .cta { justify-self: start; }
.tarif-montant + .tarif-devise { margin: 0 0 0 0.12em; }
.tarif-credits { padding-top: 14px; border-top: 1px solid var(--bord); color: var(--doux); font-size: 15px; }
.tarif-credits strong { color: var(--texte); font-weight: 600; }
.tarifs[data-periode='an'] .si-mois, .tarifs[data-periode='mois'] .si-an { display: none; }
/* Solo for life's full price, struck through beside its launch price. */
.tarif-barre { font-size: 0.46em; font-weight: 500; letter-spacing: -0.02em; color: var(--doux); margin-right: 12px; text-decoration-thickness: 1.5px; }
/* The three plans line up row by row (name, price, billing, text, credits, button), whatever wraps in one of them. */
.tarifs-plans .tarif { grid-row: span 6; grid-template-rows: subgrid; }
.tarifs-notes { color: var(--doux); font-size: 14.5px; text-align: center; }
.packs { display: grid; gap: 16px; }
.packs h3 { font-size: 22px; letter-spacing: -0.03em; }
.packs-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pack { display: grid; gap: 2px; padding: 22px 24px; border: 1px solid var(--bord); border-radius: 20px; background: var(--surface-pleine); }
.pack-prix { display: flex; align-items: baseline; font-size: 40px; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pack small { color: var(--doux); font-size: 14px; }
.packs-note { color: var(--doux); font-size: 15.5px; max-width: 60ch; }
.case code { font: 500 0.9em/1.4 var(--mono); color: var(--texte); overflow-wrap: anywhere; }
.faq { display: grid; max-width: 860px; }
.faq-ligne { border-top: 1px solid var(--bord); }
.faq-ligne:last-child { border-bottom: 1px solid var(--bord); }
.faq-ligne summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; cursor: pointer; list-style: none; }
.faq-ligne summary::-webkit-details-marker { display: none; }
.faq-ligne summary::after { content: ''; width: 10px; height: 10px; border-right: 2px solid var(--doux); border-bottom: 2px solid var(--doux); transform: rotate(45deg) translate(-3px, -3px); transition: transform 260ms; flex: none; }
.faq-ligne[open] summary::after { transform: rotate(225deg); }
.faq-ligne p { padding: 0 0 22px; color: var(--doux); font-size: 16.5px; max-width: 70ch; }
@media (max-width: 900px) {
  .tarifs-simulateur { grid-template-columns: 1fr; }
  .tarifs-visuel .tarifs-pare-brise { width: 180px; }
  .tarifs-plans { grid-template-columns: 1fr; }
  .tarif.conseille { transform: none; }
}
@media (max-width: 560px) {
  .packs-grille { gap: 8px; }
  .pack { padding: 16px; }
  .pack-prix { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .tarifs-allumee, .tarif { transition: none; } }
/* A link to a section's title (/pricing/#titre-claude) stops below the fixed header. */
.titre-section[id] { scroll-margin-top: 110px; }

/* ---------------------------------------------------------------- /download/ and /telecharger/ (outils/telecharger.py) */
.applis { max-width: 1320px; margin: 0 auto; padding: 64px clamp(20px, 4vw, 56px) 0; display: grid; gap: 16px; }
.appli { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 22px clamp(28px, 5vw, 72px); align-items: start; padding: 28px; border: 1px solid var(--bord); border-radius: 24px; background: var(--surface-pleine); scroll-margin-top: 100px; }
.appli-texte, .appli-prendre, .appli-suite { display: grid; gap: 14px; align-content: start; min-width: 0; }
.appli-tete { display: flex; align-items: center; gap: 14px; }
.appli-icone { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--bord); background: var(--fond); color: var(--texte); }
.appli-icone .ic { width: 22px; height: 22px; }
.appli-tete h2 { font-size: 24px; letter-spacing: -0.03em; }
.appli-texte p { color: var(--doux); font-size: 15.5px; line-height: 1.5; max-width: 58ch; }
.appli-texte .appli-note, .appli-note { color: var(--tres-doux); font-size: 14.5px; }
.code.commandes { white-space: pre-wrap; overflow-wrap: anywhere; }
.commandes .commande { display: block; padding-left: 2ch; text-indent: -2ch; }
.appli-prendre > .cta, .appli-prendre > .lien { justify-self: start; }
.appli .cta { gap: 9px; }
.cta-contour { background: transparent; color: var(--texte); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texte) 22%, transparent); }
.cta-contour:hover { box-shadow: inset 0 0 0 1px var(--texte); }
.appli-bientot { justify-self: start; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--bord); background: var(--fond); color: var(--doux); font: 500 15.5px/1 var(--police); letter-spacing: -0.01em; }
.fichier { display: grid; gap: 6px; justify-items: start; }
.fichier + .fichier { margin-top: 10px; }
.fichier .cta { margin-bottom: 4px; }
.fichier-nom { color: var(--doux); font-size: 13px; }
.fichier-empreinte { color: var(--tres-doux); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.fichier-empreinte code { font: inherit; color: var(--doux); }
.applis-claude { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 20px 28px; border: 1px solid var(--bord); border-radius: 20px; color: var(--doux); font-size: 15.5px; }
.applis-claude > .ic { color: var(--accent); }
/* On a phone, one column: what it is, how to get it, then the steps after the download. */
@media (max-width: 900px) {
  .appli { grid-template-columns: 1fr; gap: 14px; }
  .appli-texte { display: contents; }
  .appli-prendre { order: 1; margin-top: 6px; }
  .appli-suite { order: 2; margin-top: 8px; }
  .applis-claude { grid-template-columns: 18px minmax(0, 1fr); align-items: start; }
  .applis-claude > .ic { margin-top: 3px; }
  .applis-claude > .lien { grid-column: 2; }
}
@media (max-width: 560px) {
  .appli { padding: 22px; }
  .applis-claude { padding: 18px 22px; }
}

/* ---------------------------------------------------------------- the app tour: the board pulls back out of the display */
.visite-ciel { position: absolute; inset: -4%; z-index: 7; background: var(--ciel) center 62% / cover no-repeat; transform: scale(1.12); visibility: hidden; will-change: transform; }
.visite-ciel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in srgb, var(--fond) 70%, transparent) 0%, transparent 46%); }
.visite-textes { position: absolute; z-index: 9; left: clamp(20px, 3.5vw, 56px); top: 50%; translate: 0 -50%; width: min(320px, 22vw); }
.etape { position: absolute; inset: auto 0 auto 0; top: 0; translate: 0 -50%; display: grid; gap: 16px; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 500ms var(--courbe), transform 650ms var(--courbe), visibility 0s 500ms; }
.etape.active { opacity: 1; visibility: visible; transform: none; transition: opacity 500ms var(--courbe), transform 650ms var(--courbe), visibility 0s; }
.etape h2 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -0.045em; }
.etape p { font-size: 17px; color: var(--doux); }
.visite-fenetre {
  position: absolute; z-index: 8; left: 0; top: 0; width: 1100px; height: 680px;
  transform-origin: 0 0; overflow: hidden; border-radius: 18px;
  opacity: 0; visibility: hidden;
}
/* The window's shadow is a layer of its own: only its opacity changes as the window backs away, nothing is repainted. */
.visite-ombre { position: absolute; z-index: 8; left: 0; top: 0; transform-origin: 0 0; border-radius: 18px; box-shadow: 0 50px 120px -40px rgba(10, 20, 40, 0.55); opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
.points-etapes { position: absolute; z-index: 9; right: clamp(6px, 1.4vw, 20px); top: 50%; translate: 0 -50%; display: grid; opacity: 0; visibility: hidden; }
.points-etapes button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.points-etapes button:focus-visible { outline: 2px solid var(--texte); outline-offset: 1px; }
.points-etapes i { width: 6px; height: 6px; border-radius: 50%; background: var(--doux); opacity: 0.35; transition: opacity 300ms, transform 300ms; }
.points-etapes button:hover i { opacity: 0.7; }
.points-etapes button.actif i { opacity: 1; transform: scale(1.4); background: var(--texte); }
/* Wider than 1920 px, the texts keep the places they have at 1920, centred: only the cockpit and the sky go on to the
   edges (pilote.js does the same for the app window). */
@media (min-width: 1921px) {
  .calque-accueil { max-width: 1920px; margin-inline: auto; }
  .a-droite { right: calc(50vw - 880px); }
  .a-gauche { left: calc(50vw - 880px); }
  .visite-textes { left: calc(50vw - 904px); }
  .points-etapes { right: calc(50vw - 940px); }
}

/* Going from one page of the site to another: a short cross-fade, where the browser can. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---------------------------------------------------------------- sections */
.section { max-width: 1320px; margin: 0 auto; padding: clamp(110px, 16vh, 190px) clamp(20px, 4vw, 56px) 0; }
.bloc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.bloc-texte { display: grid; gap: 22px; }
.bloc-texte h2 { font-size: clamp(34px, 4vw, 60px); line-height: 1.02; letter-spacing: -0.045em; }
.bloc-texte p { font-size: 18px; color: var(--doux); max-width: 46ch; }
.puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puces li { font: 12.5px/1 var(--mono); color: var(--doux); padding: 9px 11px; border-radius: 9px; border: 1px solid var(--bord); background: var(--surface-pleine); }

.terminal { border-radius: 16px; overflow: hidden; background: #0d0c0b; border: 1px solid #2a2622; box-shadow: var(--ombre); color: #ede8e1; }
.terminal-barre { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid #221f1c; }
.terminal-barre i { width: 10px; height: 10px; border-radius: 50%; background: #2f2a26; }
.terminal-barre span { margin-left: 10px; font: 12px/1 var(--mono); color: #6b635c; }
.terminal pre { margin: 0; padding: 20px 22px 24px; min-height: 340px; font: 14px/1.75 var(--mono); white-space: pre-wrap; }
.terminal .p { color: #6b635c; }
.terminal .a { color: #8db4de; }
.terminal .v { color: #6fbf8e; }
.terminal .curseur { display: inline-block; width: 8px; height: 17px; background: #8db4de; vertical-align: -3px; animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }

.securite { border: 1px solid var(--bord); border-radius: 20px; background: var(--surface-pleine); overflow: hidden; box-shadow: var(--ombre); }
.securite-ligne { display: flex; align-items: center; gap: 14px; padding: 20px 22px; font-size: 16px; border-top: 1px solid var(--bord); }
.securite-ligne:first-child { border-top: 0; }
.securite-ligne .ic { color: var(--doux); }
.securite-ligne > :nth-child(3) { margin-left: auto; }
.code-totp { font-size: 22px; letter-spacing: 0.06em; white-space: nowrap; }
.anneau { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--reste, 1) * 360deg), var(--barre) 0); }

.final { position: relative; margin-top: clamp(110px, 16vh, 190px); min-height: 88vh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.final::before { content: ''; position: absolute; inset: 0; background: var(--ciel) center 60% / cover no-repeat; }
/* The loops (site/ciel-anime.js), dawn by day and night in the night theme, over the still sky each starts from: a loop fades in once it plays. */
.final-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: 0; transition: opacity 1.2s ease-out; pointer-events: none; }
.final-video.joue { opacity: 1; }
:root:not([data-theme='dark']) .final-video[data-ciel-anime='nuit'], :root[data-theme='dark'] .final-video[data-ciel-anime='jour'] { display: none; }
@media (prefers-reduced-motion: reduce) { .final-video { display: none; } }
.final::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--fond), transparent 30%, transparent 70%, var(--fond)); }
.final-contenu { position: relative; z-index: 1; display: grid; gap: 30px; justify-items: center; padding: 0 20px; }
.final-marque { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); font-size: clamp(56px, 9vw, 140px); line-height: 1; letter-spacing: -0.05em; font-weight: 720; }
.final-marque .signe { width: 0.62em; height: 0.62em; }
.final-marque .nom { height: 0.86em; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.final .actions { justify-content: center; }
.final .lien { color: var(--texte); }

.pied { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px clamp(20px, 4vw, 56px) 40px; border-top: 1px solid var(--bord); font-size: 14px; color: var(--doux); max-width: 1320px; margin: 0 auto; }
.pied-liens { display: flex; gap: 22px; flex-wrap: wrap; }
.pied-liens a:hover { color: var(--texte); }

/* ---------------------------------------------------------------- inner pages */
.page-tete { max-width: 1320px; margin: 0 auto; padding: 172px clamp(20px, 4vw, 56px) 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.page-tete h1 { font-size: clamp(44px, 6vw, 92px); line-height: 0.96; letter-spacing: -0.05em; }
.page-tete-droite { display: grid; gap: 26px; padding-bottom: 6px; }
.page-tete-droite p { font-size: 18px; color: var(--doux); max-width: 46ch; }
.titre-section { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -0.045em; max-width: 22ch; }
.entete-section { display: grid; gap: 14px; margin-bottom: 34px; }
.entete-section p { font-size: 18px; color: var(--doux); max-width: 60ch; }

/* /how-it-works/: six steps, each with the real thing beside it. The step's number sits in the title, a small round
   plate like the app's counters. */
.marche-n { display: inline-grid; place-items: center; width: 1.08em; height: 1.08em; margin-right: 0.32em; border-radius: 50%; vertical-align: 0.12em;
  font-size: 0.5em; font-weight: 600; letter-spacing: 0; color: var(--accent); background: var(--surface-pleine); border: 1px solid var(--bord); box-shadow: var(--ombre); }
.marche-etape { padding-top: clamp(84px, 12vh, 140px); }
.marche-etape .entete-section { margin-bottom: 0; }
.marche-etape .entete-section h2 { font-size: clamp(34px, 4vw, 60px); line-height: 1.02; letter-spacing: -0.045em; }
.marche-etape .bloc-texte .faits { margin-top: 4px; }
.marche-etape .bloc-texte .faits li { font-size: 16px; }
.marche-formulaire { display: grid; gap: 18px; padding: 28px 28px 30px; border: 1px solid var(--bord); border-radius: 20px; background: var(--surface-pleine); box-shadow: var(--ombre); }
.marche-champ { display: flex; align-items: center; height: 48px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--bord); background: var(--fond); color: var(--texte); font-size: 16px; min-width: 0; overflow: hidden; white-space: nowrap; }
.marche-adresse { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.marche-adresse .mono { font-size: 15px; }
.marche-domaine { color: var(--doux); }
.marche-libre { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--vert); }
.marche-libre .ic { width: 15px; height: 15px; }
.marche-formules { display: flex; flex-wrap: wrap; gap: 8px; }
.marche-formules span { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--bord); font-size: 14.5px; color: var(--doux); }
.marche-formules .actif { border-color: var(--texte); color: var(--texte); font-weight: 500; }
.marche-plateformes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bord); border-radius: 20px; background: var(--surface-pleine); box-shadow: var(--ombre); overflow: hidden; }
.marche-plateformes li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 18px; padding: 18px 22px; border-top: 1px solid var(--bord); font-size: 15.5px; color: var(--doux); }
.marche-plateformes li:first-child { border-top: 0; }
.marche-plateformes strong { color: var(--texte); font-weight: 600; }
.marche-suite { padding-top: 40px; }
.marche-trois .faits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
kbd { display: inline-block; min-width: 1.7em; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--bord); border-bottom-width: 2px; background: var(--surface-pleine);
  font: 500 0.86em/1.5 var(--mono); color: var(--texte); text-align: center; }

.vitrine { max-width: 1320px; margin: 72px auto 0; padding: 0 clamp(12px, 3vw, 56px); }
.vitrine-ciel { position: relative; display: grid; justify-items: center; gap: 20px; border-radius: 28px; overflow: hidden; padding: clamp(18px, 4vw, 56px) clamp(10px, 4vw, 64px) clamp(22px, 5vw, 72px); background: var(--ciel) center 60% / cover no-repeat; }
.onglets { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--surface-pleine) 72%, transparent); border: 1px solid var(--bord); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.onglets button { font: 500 14.5px/1 var(--police); color: var(--doux); background: transparent; border: 0; padding: 10px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.onglets button:hover { color: var(--texte); }
.onglets button[aria-selected='true'] { background: var(--surface-pleine); color: var(--texte); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.onglets button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vitrine-fenetre { width: 100%; max-width: 1288px; height: 676px; border-radius: 16px; overflow: hidden; box-shadow: 0 50px 120px -40px rgba(10, 20, 40, 0.55); }

.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case { padding: 28px 28px 30px; border: 1px solid var(--bord); border-radius: 20px; background: var(--surface-pleine); display: grid; gap: 12px; align-content: start; }
.case h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; letter-spacing: -0.03em; }
.case h3 .ic { color: var(--accent); }
.case p { font-size: 16.5px; color: var(--doux); }

.saisie { border: 1px solid var(--bord); border-radius: 20px; background: var(--surface-pleine); padding: 28px 28px 30px; box-shadow: var(--ombre); display: grid; gap: 22px; }
.saisie-tete { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--doux); }
.saisie-tete .ic { color: var(--accent); }
.saisie-ligne { display: flex; flex-wrap: wrap; gap: 14px 10px; align-items: flex-start; font: 500 17px/1.3 var(--mono); }
.jeton { display: inline-grid; gap: 7px; justify-items: start; }
.jeton code { font: inherit; padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); white-space: nowrap; }
.jeton.texte code { background: transparent; color: var(--texte); padding-left: 0; padding-right: 0; white-space: normal; }
.jeton small { font: 12.5px/1 var(--police); color: var(--tres-doux); }
.saisie-resultat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--bord); font-size: 15px; color: var(--doux); }
.saisie-resultat strong { color: var(--texte); font-weight: 500; }

.outils { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.outils li { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--bord); border-radius: 14px; background: var(--surface-pleine); }
.outils code { font: 500 13.5px/1.3 var(--mono); color: var(--texte); }
.outils span { font-size: 14.5px; color: var(--doux); }
.outils .ecrit code { color: var(--accent); }
.legende-outils { display: flex; gap: 18px; font-size: 13.5px; color: var(--doux); margin-top: 16px; }
.legende-outils span { display: inline-flex; align-items: center; gap: 8px; }
.legende-outils i { width: 9px; height: 9px; border-radius: 3px; background: var(--texte); }
.legende-outils .ecrit i { background: var(--accent); }

.faits { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.faits li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; font-size: 16.5px; color: var(--doux); }
.faits li strong { color: var(--texte); font-weight: 500; }
.faits .ic { color: var(--accent); margin-top: 3px; }
.code { font: 13.5px/1.75 var(--mono); background: #0d0c0b; color: #ede8e1; border-radius: 14px; padding: 18px 20px; overflow-x: auto; border: 1px solid #2a2622; margin: 0; white-space: pre; }
.code .p { color: #6b635c; }
.code .a { color: #8db4de; }
.pile-code { display: grid; gap: 12px; min-width: 0; }
.pile-code small { font-size: 13.5px; color: var(--doux); }

/* ---------------------------------------------------------------- /docs/ */
.docs-page-tete { padding-bottom: 8px; }
.docs { max-width: 1320px; margin: 64px auto 0; padding: 0 clamp(20px, 4vw, 56px); display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.docs-nav { position: sticky; top: 104px; align-self: start; display: grid; gap: 2px; font-size: 14.5px; max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.docs-nav a { padding: 7px 12px; border-radius: 9px; color: var(--doux); border-left: 2px solid transparent; }
.docs-nav a:hover { color: var(--texte); }
.docs-nav a.actif { color: var(--texte); background: var(--surface-pleine); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.docs-corps { min-width: 0; max-width: 880px; }
.docs-section { padding-top: 26px; margin-bottom: 64px; scroll-margin-top: 90px; }
.docs-section > h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -0.04em; margin-bottom: 18px; }
.docs-section h3 { font-size: 19px; letter-spacing: -0.02em; margin: 34px 0 12px; }
.docs-section p { font-size: 16.5px; color: var(--doux); margin: 0 0 14px; max-width: 70ch; }
.docs-section p strong, .docs-liste strong { color: var(--texte); font-weight: 500; }
.docs-section a { color: var(--accent); }
.docs-section code { font: 13.5px/1.4 var(--mono); padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--texte) 7%, transparent); color: var(--texte); white-space: nowrap; }
.docs-section pre.code { margin: 0 0 16px; font-size: 13.5px; white-space: pre; }
.docs-section pre.code code { padding: 0; background: none; color: inherit; }
.docs-note { padding: 13px 16px; border-radius: 12px; border: 1px solid var(--bord); background: var(--surface-pleine); font-size: 15px !important; }
.docs-liste { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 10px; color: var(--doux); font-size: 16px; max-width: 72ch; }
.docs-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.docs-table th, .docs-table td { text-align: left; vertical-align: top; padding: 11px 12px; border-top: 1px solid var(--bord); color: var(--doux); }
.docs-table thead th { border-top: 0; font: 500 12.5px/1 var(--mono); color: var(--tres-doux); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 4px; }
.docs-table tbody th { color: var(--texte); font-weight: 500; white-space: nowrap; width: 1%; }
.docs-table td:first-child code, .docs-table th code { white-space: nowrap; }
.docs-table code.type { color: var(--doux); background: none; padding: 0; }
.docs-table .requis { display: inline-block; margin-left: 8px; font: 500 11px/1 var(--mono); color: var(--ambre); }
.docs-table .defaut { display: block; margin-top: 4px; font-size: 13px; color: var(--tres-doux); }
.docs-exemples { display: flex; flex-wrap: wrap; gap: 6px; }
.docs-syntaxe td:nth-child(2) { width: 52%; }
.docs-outils { display: grid; gap: 8px; margin-bottom: 18px; }
.docs-outil, .docs-route { border: 1px solid var(--bord); border-radius: 14px; background: var(--surface-pleine); overflow: hidden; scroll-margin-top: 90px; }
.docs-outil summary, .docs-route summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 16px; }
.docs-outil summary::-webkit-details-marker, .docs-route summary::-webkit-details-marker { display: none; }
.docs-outil summary:hover, .docs-route summary:hover { background: color-mix(in srgb, var(--texte) 3%, transparent); }
.docs-outil summary code, .docs-route summary code { background: none; padding: 0; font-weight: 500; }
.docs-outil summary .resume, .docs-route summary .resume { font-size: 14px; color: var(--tres-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-outil summary .resume code, .docs-route summary .resume code { font-weight: 400; color: var(--tres-doux); }
.docs-outil[open] summary .resume, .docs-route[open] summary .resume { visibility: hidden; }
.docs-outil-corps { padding: 2px 16px 16px; border-top: 1px solid var(--bord); }
.docs-outil-corps > p:first-child { margin-top: 14px; }
.docs-retour { font-size: 15px !important; }
.docs-vide { font-size: 14.5px !important; color: var(--tres-doux) !important; }
.badge { font: 500 11.5px/1 var(--mono); padding: 5px 7px; border-radius: 6px; }
.badge.lecture { color: var(--doux); background: color-mix(in srgb, var(--texte) 7%, transparent); }
.badge.ecriture { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.methode { font: 600 11.5px/1 var(--mono); padding: 5px 7px; border-radius: 6px; min-width: 52px; text-align: center; }
.methode.get { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.methode.post { color: var(--vert); background: color-mix(in srgb, var(--vert) 13%, transparent); }
.methode.patch { color: var(--ambre); background: color-mix(in srgb, var(--ambre) 14%, transparent); }
.methode.delete { color: var(--rouge); background: color-mix(in srgb, var(--rouge) 12%, transparent); }
@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; margin-top: 36px; }
  .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; max-height: none; overflow: visible; }
  .docs-nav a { border: 1px solid var(--bord); background: var(--surface-pleine); }
  .docs-table { display: block; overflow-x: auto; }
  .docs-outil summary, .docs-route summary { grid-template-columns: auto auto; }
  .docs-outil summary .resume, .docs-route summary .resume { grid-column: 1 / -1; white-space: normal; }
  .docs-outil[open] summary .resume, .docs-route[open] summary .resume { display: none; }
}

/* ---------------------------------------------------------------- the film */
.lien-film { font: 500 17px/1 var(--police); border: 0; background: none; padding: 0; cursor: pointer; gap: 12px; color: var(--texte); }
.rond-lecture { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--bord); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 200ms var(--courbe); }
.rond-lecture .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; margin-left: 2px; }
.lien-film:hover .rond-lecture { transform: scale(1.08); }
.lien-film:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 999px; }
.acces-modale { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--bord); border-radius: 24px; background: var(--surface-pleine); color: var(--texte); box-shadow: 0 40px 120px -30px rgba(10, 20, 40, 0.5); overflow: auto; }
.acces-modale::backdrop { background: rgba(12, 14, 18, 0.5); backdrop-filter: blur(6px); }
/* Its parts are switched with the hidden attribute, which their display would otherwise override. */
.acces-modale [hidden] { display: none !important; }
.acces-modale[open] { animation: acces-entre 420ms var(--courbe); }
@keyframes acces-entre { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
/* The dawn over the clouds at the top, fading into the card. */
.acces-ciel { position: absolute; inset: 0 0 auto; height: 150px; background: linear-gradient(to bottom, transparent 30%, var(--surface-pleine)), url('/ciel/aube-hd-1600.webp') center 58% / cover no-repeat; pointer-events: none; }
:root[data-theme='dark'] .acces-ciel { background: linear-gradient(to bottom, transparent 30%, var(--surface-pleine)), url('/ciel/nuit-hd-1600.webp') center 55% / cover no-repeat; }
.acces-tete { position: relative; display: grid; gap: 18px; padding: 30px 30px 6px; }
.acces-tete h2 { margin: 0; font-size: 28px; line-height: 1.08; letter-spacing: -0.025em; }
.acces-cadran { width: 58px; height: 58px; border-radius: 15px; box-shadow: 0 10px 30px -10px rgba(10, 20, 40, 0.45); }
/* The horizon follows the form: banked hard at first, it comes back to the logo's own bank once the request is sent. */
.acces-horizon { transform-box: view-box; transform-origin: 32px 32.5px; transform: rotate(var(--inclinaison, -32deg)); transition: transform 900ms cubic-bezier(0.34, 1.5, 0.64, 1); }
.acces-formulaire, .acces-merci { position: relative; display: grid; gap: 16px; padding: 18px 30px 8px; }
.acces-champ { display: grid; gap: 7px; min-width: 0; }
.acces-champ label { font-size: 13.5px; font-weight: 500; color: var(--doux); }
.acces-champ input { width: 100%; height: 48px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--bord); background: var(--fond); color: var(--texte); font: inherit; font-size: 16px; transition: border-color 200ms, box-shadow 200ms; }
.acces-champ input::placeholder { color: var(--tres-doux); }
.acces-champ input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.acces-champ input[aria-invalid='true'] { border-color: var(--rouge); }
.acces-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acces-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.acces-envoyer { width: 100%; height: 54px; margin-top: 4px; font-size: 16.5px; }
.acces-envoyer[disabled] { opacity: 0.7; cursor: progress; }
.acces-erreur { margin: 0; font-size: 14px; color: var(--rouge); }
.acces-merci p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--doux); }
.acces-merci strong { color: var(--texte); font-weight: 600; overflow-wrap: anywhere; }
.acces-autre { margin: 0; padding: 14px 30px 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; color: var(--doux); }
.acces-adresse { font-family: var(--mono); font-size: 13.5px; color: var(--texte); user-select: all; overflow-wrap: anywhere; }
.acces-modale .lien { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--accent); }
.acces-modale .lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.acces-fermer { position: absolute; z-index: 1; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--bord); background: color-mix(in srgb, var(--surface-pleine) 70%, transparent); backdrop-filter: blur(8px); color: var(--texte); display: grid; place-items: center; cursor: pointer; }
/* The narrowest phones keep the sign and the call to action: the name would push it out. */
@media (max-width: 359px) { .entete .marque .nom { display: none; } }
@media (max-width: 480px) { .acces-deux { grid-template-columns: 1fr; } .acces-tete, .acces-formulaire, .acces-merci { padding-inline: 22px; } .acces-autre { padding-inline: 22px; } }
@media (prefers-reduced-motion: reduce) { .acces-modale[open] { animation: none; } .acces-horizon { transition: none; } }
.film-modale { width: min(1280px, 92vw); max-height: 92vh; padding: 0; border: 0; border-radius: 18px; background: #0d0c0b; overflow: hidden; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.6); }
.film-modale::backdrop { background: rgba(12, 14, 18, 0.72); backdrop-filter: blur(6px); }
.film-modale video { display: block; width: 100%; height: auto; max-height: 92vh; background: #0d0c0b; }
.film-fermer { position: absolute; z-index: 1; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(13, 12, 11, 0.6); color: #ede8e1; display: grid; place-items: center; cursor: pointer; }
@media (max-aspect-ratio: 4/5) { .film-modale { width: min(440px, 92vw); } }
/* On a phone the button is just the round play button, on the same line as the call to action. */
@media (max-width: 600px) { .texte-film { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .actions { flex-wrap: nowrap; } }

/* ---------------------------------------------------------------- the voice */
/* The voice that presents the tour (site/voix.js): one small control per step. Left, on or off (bars move while it
   speaks); right, the language, which opens the two choices. It hangs under its step's text, out of the flow: no block
   of the page changes size or place because of it. */
.voix { position: absolute; z-index: 2; left: 0; top: calc(100% + 14px); display: inline-flex; align-items: center; width: max-content; height: 36px; border-radius: 999px; border: 1px solid var(--bord); background: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--doux); transition: color 200ms; }
.voix:empty { display: none; }
.accueil-droite, .bloc-texte { position: relative; }
.voix.active { color: var(--texte); }
.voix button { position: relative; height: 100%; border: 0; background: none; color: inherit; font: 500 13.5px/1 var(--police); cursor: pointer; }
/* A finger gets a taller target than the pill shows. */
.voix > button::after { content: ''; position: absolute; inset: -5px 0; }
.voix-son { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 13px; border-radius: 999px 0 0 999px; }
.voix-son .ic { width: 16px; height: 16px; }
.voix .voix-choix { padding: 0 13px 0 11px; border-left: 1px solid var(--bord); border-radius: 0 999px 999px 0; font: 500 11.5px/1 var(--mono); letter-spacing: 0.04em; }
.voix button:hover { color: var(--texte); }
.voix button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.voix-allumee, .voix-onde, .voix.active .voix-eteinte { display: none; }
.voix.active .voix-allumee { display: block; }
.voix.active.parle .voix-allumee { display: none; }
.voix.active.parle .voix-onde { display: flex; }
.voix-onde { align-items: center; justify-content: center; gap: 2px; width: 16px; height: 16px; }
.voix-onde i { width: 2.5px; height: 12px; border-radius: 2px; background: currentColor; animation: onde2 620ms ease-in-out infinite alternate; }
.voix-onde i:nth-child(2) { height: 15px; animation-delay: -310ms; }
.voix-onde i:nth-child(3) { animation-delay: -140ms; }
.voix-menu { position: absolute; z-index: 3; top: calc(100% + 8px); left: 0; display: grid; gap: 6px; padding: 6px; border-radius: 16px; border: 1px solid var(--bord); background: var(--surface-pleine); box-shadow: var(--ombre); }
.voix-menu[hidden] { display: none; }
.voix.vers-le-haut .voix-menu { top: auto; bottom: calc(100% + 8px); }
.voix-groupe { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border-radius: 11px; background: var(--fond); }
.voix .voix-groupe button { height: 30px; padding: 0 14px; border-radius: 9px; font-size: 13px; color: var(--doux); white-space: nowrap; }
.voix .voix-groupe button[aria-pressed='true'] { background: var(--surface-pleine); color: var(--texte); box-shadow: 0 1px 2px rgba(20, 30, 50, 0.12); }
.film .voix, .sans-webgl .voix { display: none !important; }
@media (prefers-reduced-motion: reduce) { .voix-onde i { animation: none; } }

/* ---------------------------------------------------------------- reveal on scroll */
.revele { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--courbe), transform 1100ms var(--courbe); }
.revele.visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px) {
  .nav, .entete .lien { display: none; }
  .calque-accueil, .bloc, .page-tete { grid-template-columns: 1fr; gap: 22px; }
  .grille, .outils { grid-template-columns: 1fr; }
  .marche-trois .faits { grid-template-columns: 1fr; gap: 18px; }
  .marche-plateformes li { grid-template-columns: 1fr; gap: 4px; }
  .onglets button { padding: 9px 11px; font-size: 13.5px; }
  .vitrine-fenetre { height: 620px; }
  .carte-calque { top: auto; bottom: 20px; left: 50%; right: auto; translate: -50% 0; }
  .visite-textes { left: 20px; right: 20px; width: auto; top: auto; bottom: 22px; translate: none; height: 150px; }
  .etape { top: auto; bottom: 0; translate: none; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--bord); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .etape h2 { font-size: 26px; }
  .etape p { font-size: 15px; }
  .carte-calque .voix, .etape .voix { top: auto; left: auto; right: 0; bottom: calc(100% + 10px); }
  .carte-calque .voix-menu, .etape .voix-menu { left: auto; right: 0; }
  .bloc-texte .voix { position: relative; top: auto; }
  .points-etapes { display: none; }
  .page-tete { padding-top: 130px; }
  .code-totp { font-size: 18px; }
  .securite-ligne { padding: 16px 16px; gap: 12px; font-size: 15px; }
}
@media (max-width: 600px) {
  .entete { inset: 10px 10px auto; gap: 12px; }
  .entete .cta { height: 40px; padding: 0 16px; font-size: 14.5px; white-space: nowrap; }
  .entete .marque .nom { height: 0.92em; }
  .cta-geant { height: 58px; padding: 0 28px; font-size: 17.5px; }
  .calque-accueil h1 { font-size: 40px; }
  .pied { flex-direction: column; align-items: flex-start; }
  /* Held upright, the camera sees the cockpit's ceiling above the windshield: the sky's haze covers it behind the title. */
  .voile { height: 64%; background: linear-gradient(to bottom, #8fb6dd 0%, #97bce0 30%, rgba(151, 188, 224, 0) 100%); }
  :root[data-theme='dark'] .voile { background: linear-gradient(to bottom, #0b0d12 0%, #0b0d12 30%, rgba(11, 13, 18, 0) 100%); }
}

/* The film (?film): only the tour, no header, no hints, no scrollbar. */
.film .entete, .film .chargement, .film .indice-defiler, .film .points-etapes { display: none !important; }
.film { scrollbar-width: none; }

.sans-webgl .vol { height: auto; }
.sans-webgl .scene3d { position: relative; height: auto; display: grid; gap: 24px; padding: 110px 20px 40px; }
.sans-webgl .calque { position: relative; inset: auto; top: auto; translate: none; transform: none; opacity: 1; visibility: visible; width: auto; }
.sans-webgl #toile, .sans-webgl .voile, .sans-webgl .indice-defiler, .sans-webgl .fondu, .sans-webgl .vignette, .sans-webgl .visite-ombre, .sans-webgl .visite-ciel, .sans-webgl .visite-textes, .sans-webgl .points-etapes { display: none; }
.sans-webgl .visite-fenetre { position: relative; width: 100% !important; height: 640px !important; transform: none !important; opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .mot > span, .calque-accueil .accueil-droite, body .entete { transition: none !important; transform: none !important; opacity: 1 !important; }
  .indice-defiler i { animation: none !important; }
  .chargement-pare-brise, .chargement-nom, .chargement-roulis, .marque-vivante .lettre { animation: none !important; }
  .chargement-store { animation: none !important; transform: scaleY(0); }
  .chargement { transition: background-color 400ms linear, visibility 0s 400ms; }
  .chargement-montee { transition: none; }
  .chargement.fini .chargement-pare-brise { transform: none; transition: opacity 300ms linear; }
  .onde-calque i, .terminal .curseur { animation: none !important; }
  .revele { opacity: 1; transform: none; transition: none; }
  .etape { transition: none; }
}

/* The live trial at the end of the home page (site/essai.js): a sample board and a call button, in the same white
   card as the security block. The button breathes with the microphone's level while it listens. */
.essai-carte { border: 1px solid var(--bord); border-radius: 20px; background: var(--surface-pleine); box-shadow: var(--ombre); overflow: hidden; }
.essai-appel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; padding: 24px 24px 22px; }
.essai-bouton {
  position: relative; isolation: isolate; display: grid; place-items: center; align-content: center; gap: 6px;
  width: 104px; height: 104px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--cta-fond); color: var(--cta-texte); font: 600 13px/1 var(--police); letter-spacing: -0.01em;
  transition: transform 200ms var(--courbe);
}
.essai-bouton .ic { width: 22px; height: 22px; }
.essai-bouton:hover { transform: scale(1.03); }
.essai-bouton:active { transform: scale(0.97); }
.essai-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.essai-halo {
  position: absolute; inset: -10px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  opacity: 0; scale: 0.9; transition: opacity 240ms ease-out, scale 120ms linear;
}
.essai[data-etat='ecoute'] .essai-halo { opacity: 1; scale: calc(0.92 + var(--niveau, 0) * 0.5); }
.essai[data-etat='reflexion'] .essai-halo { opacity: 1; animation: essai-souffle 1.6s ease-in-out infinite; }
.essai[data-etat='parole'] .essai-halo { opacity: 1; scale: 1.08; background: color-mix(in srgb, var(--vert) 24%, transparent); }
@keyframes essai-souffle { 0%, 100% { scale: 0.95; opacity: 0.5; } 50% { scale: 1.16; opacity: 1; } }
.essai-fil { display: grid; gap: 6px; min-width: 0; min-height: 104px; align-content: center; }
.essai-fil p { margin: 0; overflow-wrap: anywhere; }
.essai-fil p:empty { display: none; }
.essai-etat { font-size: 15px; font-weight: 600; color: var(--texte); }
.essai[data-etat='erreur'] .essai-etat { color: var(--rouge); font-weight: 500; }
.essai-entendu { font-size: 15px; color: var(--doux); }
.essai-entendu::before { content: '“'; }
.essai-entendu::after { content: '”'; }
.essai-reponse { font-size: 16px; line-height: 1.45; color: var(--texte); }
.essai-reste, .essai .essai-limites { font-size: 13px; color: var(--tres-doux); }
.essai-tableau { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bord); counter-reset: tache; }
.essai-tableau:empty { display: none; }
.essai-tableau li { display: flex; align-items: baseline; gap: 14px; padding: 15px 24px; font-size: 16px; border-top: 1px solid var(--bord); counter-increment: tache; }
.essai-tableau li:first-child { border-top: 0; }
.essai-tableau li::before { content: counter(tache); width: 1.2em; font: 13px/1 var(--mono); color: var(--tres-doux); }
.essai-tableau li small { margin-left: auto; font: 13px/1 var(--mono); color: var(--doux); white-space: nowrap; }
.essai-tableau li.fait span { text-decoration: line-through; color: var(--tres-doux); }
.essai-tableau li.change { animation: essai-change 1.4s var(--courbe); }
@keyframes essai-change { from { background: color-mix(in srgb, var(--accent) 14%, transparent); } }
.essai-fin { margin: 0; padding: 16px 24px 20px; border-top: 1px solid var(--bord); font-size: 15px; color: var(--doux); }
.essai-fin a { color: var(--texte); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .essai-appel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .essai-fil { min-height: 0; justify-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .essai-halo, .essai-bouton { transition: none; }
  .essai[data-etat='reflexion'] .essai-halo, .essai-tableau li.change { animation: none; }
}