/* ====== TOKENS ======
     Palette validee 2026-08-06 : rupture avec le dark-AI-site des versions
     precedentes -- la page est majoritairement claire (ivoire), le sombre
     (pin) est reserve au hero, aux tarifs et au CTA final (moments de
     decision/contraste). Accent utilise avec parcimonie : jamais en aplat
     de fond de section. */
  :root{
    --ivoire:#F7F5EF; --carte:#FFFFFF;
    --encre:#0E1512; --encre-2:#4B564F;
    --pin:#123B2A; --pin-2:#1A4736; --pin-ligne:rgba(247,245,239,.14);
    --sur-pin:#F7F5EF;
    /* .78 (pas .62) : verifie ~7,6:1 sur --pin, marge confortable au-dessus
       du seuil AA 4,5:1 pour texte normal (audit 2026-08-06). */
    --sur-pin-2:rgba(247,245,239,.78);
    --accent:#2FE08A; --accent-encre:#0E1512;
    --accent-8:rgba(47,224,138,.08); --accent-halo:rgba(47,224,138,.35);
    --pierre:#D9D4C8;
    --footer:#0A2419;
    --r:14px;
    --disp:'Fraunces',Georgia,serif; --body:'Work Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);color:var(--encre);background:var(--ivoire);line-height:1.6;font-size:16px;overflow-x:hidden}
  a{color:inherit}
  .wrap{max-width:1200px;margin:0 auto;padding:0 28px}
  h1,h2,h3{font-family:var(--disp);line-height:1.1;letter-spacing:-.02em;font-weight:700}
  h2{font-size:clamp(32px,4.2vw,52px);margin-bottom:12px}
  .kicker{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--encre-2);display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
  .kicker::before,.kicker::after{content:"";width:22px;height:1px;background:currentColor;opacity:.5}
  .sombre .kicker{color:var(--sur-pin-2)}
  section{padding:clamp(40px,6vw,64px) 0}
  .filet{border-top:1px solid var(--pierre)}
  .sombre .filet{border-top-color:var(--pin-ligne)}

  /* Grain -- fonds sombres uniquement, opacite ~3%, pas de requete HTTP
     supplementaire (SVG inline en data-URI) */
  .grain{position:relative}
  .grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.03;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* ====== HEADER MINIMAL (logo seul, non cliquable, aucune navigation) ====== */
  .lp-header{background:var(--pin);padding:20px 0}
  .lp-header .wrap{display:flex;align-items:center;justify-content:center}
  .lp-logo{display:flex;align-items:center;gap:10px;color:var(--sur-pin);font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em}
  .lp-logo svg{width:26px;height:26px;flex-shrink:0}
  .lp-logo .signal{color:var(--accent)}

  /* ====== CTA (repete, identique partout) ====== */
  .lp-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:17px;padding:16px 34px;border-radius:12px;text-decoration:none;background:var(--accent);color:var(--accent-encre);border:0;cursor:pointer}
  /* .lp-btn-halo n'existe pas dans le HTML : cree et anime par JS
     uniquement (public/js/landing.js), jamais pre-rendu invisible en CSS. */
  .lp-btn-halo{position:absolute;inset:-6px;border-radius:16px;background:var(--accent-halo);filter:blur(16px);z-index:-1;pointer-events:none}
  .lp-cta-wrap{text-align:center}
  .lp-cta-wrap .lp-btn{margin-bottom:10px}
  .lp-cta-note{font-size:13px;color:var(--encre-2)}
  .sombre .lp-cta-note{color:var(--sur-pin-2)}

  /* ====== HERO (texte + demo integree, 2 colonnes desktop) ====== */
  .lp-hero{background:var(--pin);color:var(--sur-pin);padding-top:48px}
  .lp-hero .wrap{position:relative;max-width:1200px}
  .lp-hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;padding-bottom:44px}
  @media(max-width:900px){.lp-hero-grid{grid-template-columns:1fr;gap:32px;padding-bottom:36px}}
  .lp-hero .kicker{justify-content:flex-start}
  .lp-hero .kicker::after{display:none}
  .lp-hero h1{font-size:clamp(38px,5vw,76px);font-weight:800;margin-bottom:18px;max-width:640px}
  .lp-hero .lead{font-size:18px;color:var(--sur-pin-2);max-width:520px;margin-bottom:28px;font-family:var(--body)}
  .lp-hero h1 .glow-txt{color:var(--accent)}
  .lp-hero-text .lp-cta-wrap{text-align:left}
  /* opacity retiree ici (2026-08-06) : cumulee avec l'alpha deja present
     dans --sur-pin-2, le contraste tombait a ~3,45:1 sur fond --pin, sous
     le seuil AA (4,5:1 texte normal). --sur-pin-2 seul suffit desormais. */
  .lp-hero-disclaimer-small{font-size:11.5px;color:var(--sur-pin-2);margin-top:12px;max-width:420px}

  .lp-hero-proof{display:flex;justify-content:center}
  @media(max-width:900px){.lp-hero-proof{justify-content:flex-start}}

  /* ====== TRUST BAR ====== */
  .lp-trust{background:var(--pin-2);border-top:1px solid var(--pin-ligne);border-bottom:1px solid var(--pin-ligne);padding:14px 0;text-align:center}
  .lp-trust p{color:var(--sur-pin-2);font-size:14px;font-family:var(--body)}
  .lp-trust b{color:var(--accent);font-weight:600}

  /* ====== BANDE TECHNOLOGIE (agent-hermes uniquement) ======
     Typographique, discrete : simple ligne mono, jamais un bandeau qui
     capte l'attention comme .lp-trust juste au-dessus. */
  .lp-techbar{background:var(--ivoire);padding:11px 0;text-align:center;border-bottom:1px solid var(--pierre)}
  .lp-techbar p{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);letter-spacing:.02em}
  .lp-techbar a{color:var(--encre-2);text-decoration:underline;text-underline-offset:2px}
  .lp-techbar a:hover{color:var(--pin)}

  /* ====== MOCKUP DE CONVERSATION (demo vivante, integree au hero) ======
     Hauteur reservee explicitement (min-height) pour un CLS stable, que le
     JS charge ou non : les 6 messages sont toujours dans le flux (jamais
     display:none), seule leur opacite est pilotee par JS au runtime. */
  /* height fixe (pas min-height) -- identique que le JS charge ou non,
     donc aucun risque de CLS. Le fil ancre en bas (voir .chat-body) clippe
     proprement dans ce meme espace, seed + messages confondus. */
  .chat-card{position:relative;width:min(560px,100%);height:300px;background:rgba(16,50,42,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(247,245,239,.16);border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.4);overflow:hidden;display:flex;flex-direction:column}
  .chat-top{display:flex;align-items:center;gap:10px;padding:15px 19px;border-bottom:1px solid var(--pin-ligne);font-size:13.5px;color:var(--sur-pin);font-family:var(--body)}
  .chat-top .st{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(47,224,138,.18)}
  .chat-top span small{display:block;color:var(--accent);font-size:11px;font-family:var(--mono)}
  /* flex + justify-content:flex-end : le fil se packe toujours en bas.
     Etat de repos (sans JS) = seed + tous les messages sont visibles ;
     si l'ensemble deborde de la hauteur fixe, overflow:hidden clippe
     naturellement le haut -- jamais de JS requis pour ce comportement.
     Le masque en degrade adoucit ce bord (fondu, comme un vrai fil) que
     le JS soit actif ou non. Cote JS (landing.js) : seuls les messages
     ajoutes par la sequence sont masques puis rejoues un par un ; les
     messages "seed" restent visibles sans interruption. */
  .chat-body{position:relative;padding:20px 19px 22px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;flex:1;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 34px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 34px)}
  .msg{max-width:86%;padding:12px 16px;border-radius:14px;font-size:14.5px;line-height:1.45;font-family:var(--body)}
  .msg.moi{margin-left:auto;background:var(--accent);color:var(--accent-encre);border-bottom-right-radius:4px}
  .msg.lui{background:rgba(247,245,239,.1);color:var(--sur-pin);border-bottom-left-radius:4px}
  .msg.lui b{color:var(--accent);font-weight:600}
  .msg.divider{max-width:100%;margin:2px auto;padding:0;background:none;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sur-pin-2)}
  /* position:absolute : l'indicateur "en train d'ecrire" ne doit jamais
     ajouter de hauteur au flux du document (0 impact CLS), il se
     superpose au message a venir, deja reserve dans la grille. */
  .chat-typing{position:absolute;display:flex;gap:4px;padding:12px 16px;background:rgba(247,245,239,.1);border-radius:14px;border-bottom-left-radius:4px;width:fit-content}
  .chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--sur-pin-2)}
  .chat-cursor{display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:middle;margin-left:2px}

  /* ====== BENEFICES (3, jamais plus) ====== */
  .lp-benefits{background:var(--ivoire)}
  .lp-benefits .kicker,.lp-benefits h2{text-align:center}
  .lp-benefits h2{max-width:20ch;margin-left:auto;margin-right:auto}
  .lp-benefits .sub{text-align:center;color:var(--encre-2);font-size:15.5px;max-width:540px;margin:0 auto 36px;font-family:var(--body)}
  .lp-b-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:760px){.lp-b-grid{grid-template-columns:1fr}}
  .lp-b{padding:26px;border:1px solid var(--pierre);border-radius:var(--r);background:var(--carte)}
  .lp-b .ic{width:26px;height:26px;display:block;margin-bottom:14px;color:var(--pin)}
  .lp-b .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .lp-b h3{font-size:clamp(19px,2vw,24px);margin-bottom:8px}
  .lp-b p{font-size:14.5px;color:var(--encre-2);font-family:var(--body)}

  /* ====== MINI-COMPARATIF (agent-hermes uniquement) ====== */
  .lp-comp{background:var(--ivoire)}
  .lp-comp .kicker,.lp-comp h2{text-align:center}
  .lp-comp h2{max-width:20ch;margin-left:auto;margin-right:auto}
  .lp-comp-table{width:100%;border-collapse:collapse;margin-top:32px;font-size:14.5px;font-family:var(--body)}
  .lp-comp-table th,.lp-comp-table td{padding:16px 14px;text-align:left;border-bottom:1px solid var(--pierre);vertical-align:top}
  .lp-comp-table thead th{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--encre)}
  .lp-comp-table thead th:first-child{visibility:hidden}
  .lp-comp-table th[scope="row"]{font-weight:600;color:var(--encre);width:32%}
  .lp-comp-table .self{color:var(--encre-2)}
  .lp-comp-table td.managed{position:relative;color:var(--encre);font-weight:500}
  .lp-comp-table td.managed .tick{display:inline-flex;width:15px;height:15px;margin-right:7px;vertical-align:-2px;color:var(--pin)}
  .lp-comp-table td.managed .tick svg{width:100%;height:100%}
  .lp-comp-table td.managed .tick path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  @media(max-width:600px){.lp-comp-table{font-size:13px}.lp-comp-table th,.lp-comp-table td{padding:12px 8px}}

  /* ====== CAS D'USAGE — layout sticky asymetrique, aucun JS de scroll ======
     Colonne gauche 40% (2fr) sticky sur desktop ; colonne droite 60% (3fr),
     5 mini-dialogues empiles, separes par un filet 1px, jamais par du vide.
     Etat de repos = tout deja visible (voir contrainte "aucun etat initial
     en CSS" -- seul le JS de reveal, generique, pose l'etat pre-animation). */
  .lp-usecases{background:var(--ivoire)}
  .lp-uc-layout{display:grid;grid-template-columns:2fr 3fr;gap:56px;align-items:start}
  @media(max-width:900px){.lp-uc-layout{grid-template-columns:1fr;gap:32px}}

  .lp-uc-side{position:sticky;top:96px}
  @media(max-width:900px){.lp-uc-side{position:static}}
  .lp-uc-side .kicker,.lp-uc-side h2{text-align:left;justify-content:flex-start}
  .lp-uc-side .kicker::after{display:none}
  .lp-uc-context{font-size:15.5px;color:var(--encre-2);font-family:var(--body);margin-top:6px}
  .lp-uc-cta-link{display:inline-block;margin-top:20px;font-family:var(--body);font-weight:600;font-size:15px;color:var(--pin);text-decoration:underline;text-underline-offset:3px}
  .lp-uc-cta-link:hover{color:var(--accent)}

  .lp-uc-list{display:flex;flex-direction:column}
  .lp-uc-item{padding:26px 0}
  .lp-uc-item:first-child{padding-top:0}
  .lp-uc-item + .lp-uc-item{border-top:1px solid var(--pierre)}
  .lp-uc-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-2);margin-bottom:14px}

  /* Mini version du composant chat du hero : memes bulles (.msg .moi/.lui),
     meme typo mono, meme bordure -- portee sur fond --pin en miniature
     puisque .msg est concue pour ce fond (voir .chat-card plus haut). */
  .chat-mini{background:var(--pin);border:1px solid rgba(247,245,239,.16);border-radius:14px;padding:18px 20px;display:grid;gap:10px;max-width:520px}
  .chat-mini .msg{font-size:14px}

  /* ====== TARIFS (fond sombre, moment de decision) ====== */
  #lp-tarifs{background:var(--pin);color:var(--sur-pin)}
  #lp-tarifs .kicker,#lp-tarifs h2{text-align:center}
  #lp-tarifs h2{max-width:20ch;margin-left:auto;margin-right:auto}
  .lp-routine-def{text-align:center;font-size:13.5px;color:var(--sur-pin-2);max-width:580px;margin:0 auto;font-family:var(--body)}
  .lp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;align-items:stretch}
  @media(max-width:760px){.lp-plans{grid-template-columns:1fr}}
  .lp-plan{border-radius:var(--r);padding:26px;background:var(--pin-2);border:1px solid var(--pin-ligne);text-align:center;display:flex;flex-direction:column}
  .lp-plan.reco{background:var(--carte);color:var(--encre);box-shadow:0 24px 60px rgba(0,0,0,.35);position:relative}
  .lp-plan .badge{display:inline-block;background:var(--accent);color:var(--accent-encre);font-family:var(--mono);font-size:11px;font-weight:600;padding:5px 12px;border-radius:99px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
  .lp-plan h3{font-size:19px;margin-bottom:4px}
  .lp-plan .prix{font-family:var(--disp);font-weight:700;font-size:34px;margin:8px 0 18px}
  .lp-plan .prix small{font-size:13px;font-weight:500;opacity:.75;font-family:var(--body)}
  .lp-plan ul{list-style:none;text-align:left;display:grid;gap:10px;font-size:13.5px;margin-bottom:4px;font-family:var(--body)}
  .lp-plan li{display:flex;gap:9px;align-items:flex-start}
  .lp-plan li .c{color:var(--accent);font-family:var(--mono);flex-shrink:0}
  .lp-plan.reco li .c{color:var(--pin)}
  .lp-plan li.diff{font-weight:600;margin-top:2px}
  .lp-plan-cta{margin-top:auto;display:block;text-align:center;font-family:var(--body);font-weight:600;font-size:14px;padding:12px 18px;border-radius:12px;border:1px solid var(--pin-ligne);color:var(--sur-pin);text-decoration:none;transition:background .15s,border-color .15s}
  .lp-plan-cta:hover{background:rgba(247,245,239,.06);border-color:rgba(247,245,239,.3)}
  .lp-plan.reco .lp-plan-cta{background:var(--pin);color:var(--sur-pin);border-color:var(--pin)}
  .lp-plan.reco .lp-plan-cta:hover{background:var(--pin-2)}

  /* ====== GARANTIE ====== */
  .lp-garantie{margin:30px auto 0;padding:15px 24px;background:rgba(247,245,239,.08);border:1px solid var(--accent-halo);border-radius:12px;font-size:15px;text-align:center;max-width:440px;font-family:var(--body)}
  .lp-garantie b{color:var(--accent)}

  /* ====== FAQ COURTE ======
     Base = <details>/<summary> natif : fonctionne integralement sans JS
     (premiere question ouverte via l'attribut `open`, le reste au clic
     navigateur standard). Le JS n'ameliore que la transition (hauteur
     animee au lieu du saut natif) -- jamais une condition d'affichage. */
  .lp-faq{background:var(--ivoire)}
  .lp-faq .kicker,.lp-faq h2{text-align:center}
  .lp-faq h2{max-width:20ch;margin-left:auto;margin-right:auto}
  .lp-faq-list{max-width:680px;margin:32px auto 0}
  .lp-faq-list details{background:var(--carte);border:1px solid var(--pierre);border-radius:14px;margin-bottom:10px;padding:19px 24px}
  .lp-faq-list details[open]{border-color:var(--pin)}
  .lp-faq-list summary{font-family:var(--disp);font-weight:700;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
  .lp-faq-list summary::-webkit-details-marker{display:none}
  .lp-faq-list summary::after{content:"+";font-family:var(--mono);color:var(--pin);font-size:20px;flex-shrink:0}
  .lp-faq-list details[open] summary::after{content:"–"}
  .lp-faq-list details p{margin-top:12px;font-size:14.5px;color:var(--encre-2);font-family:var(--body)}
  /* Etat "ameliore" par JS : le contenu passe dans un wrapper mesurable
     pour l'animation de hauteur ; tant que .js-faq-ready n'est pas posee
     par le script, le <details> natif regit tout seul l'affichage. */
  .js-faq-ready .lp-faq-list summary::after{transition:transform .35s}
  .js-faq-ready .lp-faq-list details[open] summary::after{transform:rotate(180deg)}

  /* ====== CTA FINAL ====== */
  .lp-final{background:var(--pin);color:var(--sur-pin);text-align:center}
  .lp-final h2{max-width:20ch;margin:0 auto 16px}
  .lp-final .lead{color:var(--sur-pin-2);max-width:500px;margin:0 auto 30px;font-size:15.5px;font-family:var(--body)}

  /* ====== FOOTER MINIMAL ====== */
  /* .62 (pas .42) : audit axe-core 2026-08-06, .42 donnait 3,74:1 sur
     --footer (fond tres sombre), sous le seuil AA. */
  .lp-footer{background:var(--footer);color:rgba(247,245,239,.62);font-size:12.5px;padding:24px 0;text-align:center;font-family:var(--body)}
  .lp-footer a{color:rgba(247,245,239,.8);text-decoration:underline}

  /* ====== ACCESSIBILITE ====== */
  .lp-btn:focus-visible,.lp-faq-q:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ====== HERMES HEBERGE (BYOK, 2026-08-10) — additions specifiques ====== */
.lp-who{background:var(--carte)}
.lp-who .kicker,.lp-who h2{text-align:center}
.lp-who-lines{max-width:640px;margin:34px auto 0;display:flex;flex-direction:column;gap:18px}
.lp-who-lines p{font-family:var(--disp);font-size:clamp(19px,2.4vw,24px);font-weight:600;line-height:1.4;color:var(--encre);text-align:center}
.lp-who-upsell{max-width:520px;margin:36px auto 0;text-align:center;padding:18px 22px;border:1px solid var(--pierre);border-radius:var(--r);font-size:14.5px;color:var(--encre-2)}
.lp-who-upsell a{color:var(--pin);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.lp-comp-table td.byok{position:relative;color:var(--pin);font-weight:600;background:var(--accent-8)}
.lp-comp-table thead th.byok-h{color:var(--pin)}

.lp-incl{background:var(--ivoire)}
.lp-incl-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
@media(max-width:760px){.lp-incl-grid{grid-template-columns:1fr}}
.lp-incl-col{border-radius:var(--r);padding:26px 28px;background:var(--carte);border:1px solid var(--pierre)}
.lp-incl-col h3{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.lp-incl-col.yes h3{color:var(--pin)}
.lp-incl-col.no h3{color:var(--encre-2)}
.lp-incl-col ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14.5px;line-height:1.55}
.lp-incl-col li{display:flex;gap:10px;align-items:flex-start}
.lp-incl-col.yes li span.m{color:var(--pin);font-family:var(--mono);flex-shrink:0}
.lp-incl-col.no li span.m{color:var(--encre-2);opacity:.6;font-family:var(--mono);flex-shrink:0}
.lp-incl-col.no li{color:var(--encre-2)}