/* ===========================================================================
   BASE COMMUNE AUX CINQ EXPLORATIONS
   ---------------------------------------------------------------------------
   Ne contient que ce qui ne doit PAS varier d'une direction a l'autre : la
   mecanique des composants partages (bouton, champ, accordeon, panneau de
   l'agent) et les garde-fous d'accessibilite. Toute la personnalite vit dans
   `skins/<variante>.css`, qui redefinit librement les variables ci-dessous.

   CONTRAT DE VARIABLES (pilote par tweaks.js) : chaque peau DOIT declarer
   --display --sans --scale --tracking --measure --accent --r --page --rhythm
   --reveal --speed. Une peau qui en oublie une rend le curseur correspondant
   sans effet.
   =========================================================================== */

:root {
  --display: 'Geist', system-ui, sans-serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --scale: 1;
  --tracking: -0.025em;
  --measure: 62ch;
  --accent: #0E6E5E;
  --r: 3px;
  --page: 1180px;
  --rhythm: 96px;
  --reveal: 14px;
  --speed: 600ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: calc(17px * var(--scale));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 24px; }
section { padding: var(--rhythm) 0; }
@media (max-width: 768px) {
  :root { --rhythm: 64px; }
  body { font-size: calc(16px * var(--scale)); }
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-wrap: balance;
}
h1 { font-size: calc(clamp(31px, 4.1vw, 45px) * var(--scale)); line-height: 1.08; }
h2 { font-size: calc(clamp(26px, 3.6vw, 38px) * var(--scale)); line-height: 1.14; }
h3 { font-size: calc(19px * var(--scale)); letter-spacing: -0.012em; }
p { margin: 0 0 18px; max-width: var(--measure); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.lede { font-size: calc(clamp(18px, 2vw, 21px) * var(--scale)); max-width: 52ch; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------- boutons : forme unique, contraste verifie ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--r); border: 1px solid transparent;
  font-family: var(--sans); font-size: calc(15px * var(--scale)); font-weight: 500;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform 120ms, background calc(var(--speed) * .3),
              border-color calc(var(--speed) * .3);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ------------------------------- navigation ------------------------------- */
header.nav { position: sticky; top: 0; z-index: 50; height: 68px; }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { font-family: var(--display); font-weight: 600; text-decoration: none;
         font-size: calc(17px * var(--scale)); letter-spacing: -0.02em; }
.brand span { color: var(--accent); }
.nav nav { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.nav nav a:not(.btn) { text-decoration: none; font-size: calc(14.5px * var(--scale));
                       transition: color calc(var(--speed) * .3); }
.nav nav .btn { padding: 10px 18px; font-size: calc(14.5px * var(--scale)); }
@media (max-width: 820px) { .nav nav a:not(.btn) { display: none; } }

/* ------------------------- panneau de l'agent vocal ------------------------ */
.agent { border-radius: var(--r); padding: 26px 24px 22px; }
.agent .hook { font-family: var(--display); font-size: calc(20px * var(--scale));
               font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
.agent .sub { font-size: calc(14.5px * var(--scale)); margin: 0 0 20px; max-width: 38ch; }
.agent .btn { width: 100%; }
.agent .note { font-family: var(--mono); font-size: calc(11.5px * var(--scale));
               text-align: center; margin: 12px 0 0; }
.agent .live { margin-top: 18px; padding-top: 16px; max-height: 190px;
               overflow-y: auto; font-size: calc(14.5px * var(--scale)); line-height: 1.5; }
.agent .live:empty { display: none; }
.agent .live p { margin: 0 0 10px; max-width: none; }
.agent .live .who { font-family: var(--mono); font-size: calc(10.5px * var(--scale));
                    letter-spacing: .12em; text-transform: uppercase; display: block; }

/* ----------------------------------- faq ---------------------------------- */
.faq summary { cursor: pointer; padding: 20px 34px 20px 0;
               font-size: calc(16.5px * var(--scale)); font-weight: 500;
               list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 19px;
                      font-family: var(--mono); font-size: calc(18px * var(--scale)); }
.faq details[open] summary::after { content: "-"; }
.faq .a { padding: 0 40px 22px 0; }
.faq .a p { font-size: calc(15.5px * var(--scale)); margin: 0; }

/* --------------------------------- formulaire ------------------------------ */
form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: calc(13.5px * var(--scale)); font-weight: 500; }
.field input, .field textarea {
  font-family: var(--sans); font-size: calc(15.5px * var(--scale));
  border-radius: var(--r); padding: 12px 13px; width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formnote { font-size: calc(13.5px * var(--scale)); margin: 0; }

/* ----------------------------------- pied ---------------------------------- */
footer { padding: 34px 0 44px; }
footer .wrap { display: flex; gap: 20px; justify-content: space-between;
               flex-wrap: wrap; font-family: var(--mono);
               font-size: calc(12.5px * var(--scale)); }
footer a { text-decoration: none; }

/* ---------------------------------- listes --------------------------------- */
.fit ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.fit li { font-size: calc(15.5px * var(--scale)); padding-left: 26px;
          position: relative; line-height: 1.5; }
.fit li::before { position: absolute; left: 0; top: 0; font-family: var(--mono);
                  font-size: calc(14px * var(--scale)); }
.fit .yes li::before { content: "+"; color: var(--accent); }
.fit h3 { margin-bottom: 18px; }

/* --------------------------------- mouvement -------------------------------
   Obligatoire des qu'il y a du mouvement, et c'est un critere qu'on facture
   aux clients : on ne peut pas ne pas le tenir sur notre propre site. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(var(--reveal));
            transition: opacity var(--speed) cubic-bezier(.16, 1, .3, 1),
                        transform var(--speed) cubic-bezier(.16, 1, .3, 1); }
  .reveal.in { opacity: 1; transform: none; }
}


/* LEDGER - registre
   Index colle a gauche qui suit le defilement, filets fins, chiffres alignes.
   Reference : la mise en page d'un releve, d'un carnet de chantier. L'artisan
   lit ce genre de document tous les jours ; la page emprunte sa grammaire.

   DEUX THEMES depuis le passage en production (09/08). La phase d'exploration
   verrouillait le clair pour ne comparer qu'une chose a la fois ; ce n'etait
   pas tenable en ligne, ou la prod avait deja un mode sombre. Le hero ne
   bascule pas, il est sombre dans les deux cas : c'est une image de crepuscule. */

:root {
  --display: 'Geist', system-ui, sans-serif;
  --sans: 'Geist', system-ui, sans-serif;
  --scale: 1;
  --tracking: -0.022em;
  --measure: 66ch;
  --accent: #14509E;
  --r: 2px;
  --page: 1240px;
  --rhythm: 88px;
  --reveal: 10px;
  --speed: 520ms;

  --paper: #FCFCFB;
  --surface: #FFFFFF;
  --ink: #14171A;
  --ink-2: #575F63;
  --ink-3: #8B9296;
  --line: #DDE1E3;
  --hair: #ECEFF0;
  --accent-ink: #FFFFFF;
  /* Le bloc renverse (la garantie) est le seul aplat a contre-courant de la
     page. Le nommer plutot que de le coder en dur est ce qui permet au mode
     sombre d'exister : en sombre il devient un aplat CLAIR, et les couleurs de
     texte doivent suivre. Ecrit en #ffffff fixe, il rendait du blanc sur blanc. */
  --invert-bg: #14171A;
  --invert-ink: #FCFCFB;
}

/* ---------------------------------------------------------------------------
   MODE SOMBRE. La production en avait un, l'exploration l'avait perdu en
   verrouillant un theme unique. Le rendre est une condition de mise en ligne,
   pas un supplement : le client type lit sur un telephone en fin de journee,
   souvent en mode sombre, et une page blanche pleine lumiere a ce moment-la
   est exactement le genre de detail qui fait fermer l'onglet.

   Le hero ne bouge PAS : il est deja sombre dans les deux modes, puisqu'il est
   pose sur une image de crepuscule. Seul le corps de la page bascule.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1113;
    --surface: #14191B;
    --ink: #E9EDEC;
    --ink-2: #97A1A0;
    --ink-3: #6C7775;
    --line: #262D2E;
    --hair: #1C2223;
    /* Le bleu de la version claire est trop dense sur fond sombre : il ne se
       detache plus. On le remonte, et le texte du bouton passe en fonce. */
    --accent: #6BA8FF;
    --accent-ink: #08131F;
    --invert-bg: #E9EDEC;
    --invert-ink: #14171A;
  }
}

body { background: var(--paper); color: var(--ink); }
h2 { padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 22px; }
.lede { color: var(--ink-2); }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }

/* ===========================================================================
   LE HERO : une image monumentale, un titre, et la demo.
   L'image et l'echelle du titre viennent de la video (19:15). Ce qui vient
   d'Achille (09/08) : la demo vocale ne descend PAS plus bas, elle prend la
   place des deux boutons et devient l'objet principal de l'ecran. Le hero ne
   raconte plus le produit, il le fait essayer.
   =========================================================================== */
.hero { position: relative; min-height: 100dvh; padding: 0;
        display: grid; align-content: start; isolation: isolate;
        background: #0B0D10; }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%;
                                   height: 100%; object-fit: cover; }
/* Voile haut : le ciel de l'image est deja sombre, mais il s'eclaircit vers
   l'horizon. Sans ce degrade, le bas du paragraphe passe sous le seuil AA des
   que la fenetre est courte et que le texte descend dans la lueur. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, #08090Bd9 0%, #08090B8c 34%, transparent 62%); }

.hero header.nav { position: relative; z-index: 3; background: transparent;
                   border-bottom: 1px solid #ffffff26; }
.hero .brand { color: #fff; }
.hero .nav nav a:not(.btn) { color: #ffffffb8; }
.hero .nav nav a:not(.btn):hover { color: #fff; }
.hero .nav .btn-ghost, .hero .cta .btn-ghost { border-color: #ffffff5c; color: #fff;
                                               background: #ffffff14; }
.hero .nav .btn-ghost:hover, .hero .cta .btn-ghost:hover { border-color: #fff;
                                                           background: #ffffff24; }

.hero .over { position: relative; z-index: 2; max-width: var(--page);
              margin: 0 auto; padding: clamp(40px, 7vh, 84px) 24px 48px;
              width: 100%; color: #fff; }
.hero h1 { color: #fff; border: 0; padding: 0; max-width: 15ch;
           font-size: calc(clamp(34px, 5.4vw, 66px) * var(--scale));
           line-height: 1.03; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; color: #FFC9A6; }
.hero .lede { color: #ffffffc4; margin: 22px 0 30px; max-width: 44ch; }
@media (max-width: 700px) { .hero { min-height: auto; } }

/* ===========================================================================
   LA CONSOLE DE DEMO : l'element principal de la page.
   Elle ne se pose pas a cote du discours, elle le remplace. Un visiteur qui
   PARLE a l'assistant en dix secondes a compris le produit ; aucun paragraphe
   ne fait ce travail aussi vite. La forme suit : surface propre posee sur
   l'image, action primaire large, transcription qui s'ouvre sur place.
   =========================================================================== */
.hero .agent {
  max-width: 660px; padding: 26px 26px 22px; margin: 0;
  border: 1px solid #ffffff2e; border-radius: 10px;
  background: #0A0C0Fa6;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 24px 70px #00000059, inset 0 1px 0 #ffffff1f;
}
/* Le flou est un confort, pas une bequille : si le navigateur le refuse, le
   fond doit rester assez opaque pour que le texte tienne le contraste. */
@supports not (backdrop-filter: blur(4px)) { .hero .agent { background: #0A0C0Fee; } }
@media (prefers-reduced-transparency: reduce) {
  .hero .agent { background: #0A0C0Ff2; backdrop-filter: none; }
}

.hero .agent .hook { color: #fff; margin: 0 0 18px;
                     font-size: calc(21px * var(--scale)); letter-spacing: -0.02em; }
.hero .agent .controls { display: flex; gap: 12px; flex-wrap: wrap;
                         align-items: center; }

/* --- l'action primaire : blanche, donc la plus contrastee de l'ecran ----- */
.btn-call { position: relative; background: #fff; color: #12161A;
            font-weight: 600; font-size: calc(16px * var(--scale));
            padding: 15px 26px; min-width: 250px; border-radius: 999px; }
.btn-call:hover { background: #FFE8DC; }
.btn-call::before { content: ""; width: 9px; height: 9px; border-radius: 50%;
                    background: #C2410C; flex: none; }
.hero .agent .btn-ghost { border-radius: 999px; padding: 15px 22px; }

/* Etat en direct : une pastille qui bat. C'est la SEULE animation en boucle de
   la page, et elle est motivee : elle dit que le micro est ouvert. Rien
   d'autre ne le dirait sans une phrase de plus. */
.hero .agent[data-state="live"] .btn-call::before { background: #E5484D; }
@media (prefers-reduced-motion: no-preference) {
  .hero .agent[data-state="live"] .btn-call::before { animation: battement 1.5s ease-in-out infinite; }
  .hero .agent[data-state="connecting"] .btn-call::before { animation: battement .7s linear infinite; }
}
@keyframes battement { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.hero .agent[data-state="live"] { border-color: #E5484D5c; }

.hero .agent .note { color: #ffffff8f; text-align: left; margin: 14px 0 0;
                     font-size: calc(12px * var(--scale)); }

/* --- la transcription s'ouvre SUR PLACE ---------------------------------- */
.hero .agent .live { border-top: 1px solid #ffffff26; margin-top: 18px;
                     padding-top: 16px; max-height: 34vh;
                     font-size: calc(15.5px * var(--scale)); color: #fff; }
.hero .agent .live .who { color: #ffffff96; margin-bottom: 2px; }
.hero .agent .live .them .who { color: #FFB48A; }
.hero .agent .live p { margin: 0 0 14px; }

/* --- la charpente : index colle + colonne unique ------------------------- */
.shell { max-width: var(--page); margin: 0 auto; padding: 0 24px;
         display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 64px; }
.index { position: sticky; top: 92px; align-self: start; display: grid; gap: 10px;
         padding-top: 88px; border-right: 0; }
.index a { text-decoration: none; color: var(--ink-3); font-family: var(--mono);
           font-size: calc(12px * var(--scale)); letter-spacing: .04em;
           padding-bottom: 6px; border-bottom: 1px solid var(--hair);
           transition: color var(--speed); }
.index a:hover { color: var(--accent); }
.col { min-width: 0; }
.col .wrap { max-width: none; padding: 0; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; gap: 0; }
  .index { display: none; }
}

/* --- la bande d'arithmetique : des lignes, pas des cartes ---------------- */
.band { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.band .row { display: grid; grid-template-columns: 200px minmax(0, 1fr);
             gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--hair);
             align-items: baseline; }
.band .row:last-child { border-bottom: 0; }
.band .fig { font-size: calc(34px * var(--scale)); font-weight: 600;
             color: var(--accent); letter-spacing: -0.03em; }
.band p { margin: 0; color: var(--ink-2); font-size: calc(15.5px * var(--scale)); }
@media (max-width: 700px) { .band .row { grid-template-columns: 1fr; gap: 6px; } }

/* --- piliers : grille asymetrique, le premier occupe deux rangees -------- */
.pillars { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0 44px;
           margin-top: 36px; }
.pillars article { padding: 26px 0; border-top: 1px solid var(--line); }
.pillars article:first-child { grid-row: span 2; border-top: 2px solid var(--accent); }
.pillars article:first-child h3 { color: var(--accent); }
.pillars h3 { margin-bottom: 9px; }
.pillars p { font-size: calc(15px * var(--scale)); color: var(--ink-2); margin: 0; }
@media (max-width: 820px) {
  .pillars { grid-template-columns: 1fr; }
  .pillars article:first-child { grid-row: auto; }
}

/* --- la garantie : renversee, c'est le seul aplat sombre de la page ------
   Elle doit saigner sur toute la largeur alors qu'elle vit dans la colonne de
   lecture. La methode evidente, `margin: 0 -100vw` + `padding-inline: 100vw`,
   FONCTIONNE A L'OEIL ET CASSE LA PAGE : l'element deborde reellement de 100vw
   a droite, le document devient defilable horizontalement, et sur telephone on
   decouvre en glissant une bande de la couleur du bloc, presque noire. Signale
   par Achille le 09/08 sur la production.

   `box-shadow` avec un etalement de 100vw peint la meme bande SANS jamais
   participer a la mise en page ni au defilement : une ombre ne cree pas de
   debordement. `clip-path` recadre en haut et en bas (0) tout en laissant
   passer l'horizontale (-100vw), sinon l'etalement recouvrirait les sections
   voisines. */
.promise { background: var(--invert-bg); color: var(--invert-ink); padding: 72px 0;
           box-shadow: 0 0 0 100vw var(--invert-bg);
           clip-path: inset(0 -100vw); }
.promise h2 { color: var(--invert-ink);
              border-bottom-color: color-mix(in srgb, var(--invert-ink) 22%, transparent); }
.promise p { color: color-mix(in srgb, var(--invert-ink) 74%, transparent); }
.promise .fine { font-family: var(--mono); font-size: calc(12.5px * var(--scale));
                 color: color-mix(in srgb, var(--invert-ink) 48%, transparent);
                 margin-top: 20px; }

/* --- demarrage : liste numerotee, la numerotation PORTE le contenu ------- */
.steps ol { list-style: none; counter-reset: s; padding: 0; margin: 30px 0 0;
            display: grid; gap: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 64px 1fr;
            gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--hair); }
.steps li::before { content: counter(s, decimal-leading-zero);
                    font-family: var(--mono); font-size: calc(26px * var(--scale));
                    color: var(--line); line-height: 1; }
.steps p { margin: 6px 0 0; color: var(--ink-2); font-size: calc(15px * var(--scale)); }

/* --- pour qui / pas pour qui -------------------------------------------- */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 30px; }
.fit li { color: var(--ink-2); }
.fit .no li::before { content: "x"; color: var(--ink-3); }
@media (max-width: 820px) { .fit { grid-template-columns: 1fr; gap: 34px; } }

/* --- faq, formulaire ------------------------------------------------------ */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary::after, .faq .a p { color: var(--ink-2); }

.contact form { max-width: 560px; }
.field input, .field textarea { background: var(--surface); border: 1px solid var(--line);
                                color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.formnote { color: var(--ink-2); }

footer { border-top: 1px solid var(--ink); color: var(--ink-3); }
footer .wrap { max-width: var(--page); }
footer a:hover { color: var(--ink); }


/* La base impose `.agent .btn { width: 100% }` pour le panneau encadre des
   autres variantes. Dans le hero les deux actions vivent cote a cote : on
   rend la largeur au contenu, sinon le bouton primaire mange toute la ligne
   et rejette le lien secondaire en dessous. */
.hero .agent .btn { width: auto; }

/* L'invite du fondateur. Elle porte la conviction, donc elle doit se lire
   comme une voix, pas comme une legende : un cran sous l'accroche, mais bien
   au-dessus de la mention micro. La marge basse la rattache au bouton plutot
   qu'a l'accroche, parce que c'est du bouton qu'elle parle. */
.hero .agent .hook { margin-bottom: 10px; }
.hero .agent .invite { color: #ffffffcf; margin: 0 0 22px; max-width: 48ch;
                       font-size: calc(15.5px * var(--scale)); line-height: 1.55; }