/* Feuille commune des pages de vente (landing /mcp, /api-fiscale), sortie de public/mcp.html le 14/11/2026 :
   une seule charte pour les deux pages. */
/* ===== Landing IFG, refonte du 12/11/2026 : une seule feuille, écrite de zéro =====
   Grille : une largeur (1200), une marge, un espace entre sections, un espace entre tête et contenu.
   Échelle : titre de page, titre de section, chapô, texte, petit. Deux voix : Source Sans 3, et Source Serif 4
   en italique doré pour la fin d'un titre. Un seul cadre pour ce qui montre le produit, une seule carte. */
:root{
  --ink:#050A14; --ink-2:#0A1120; --bande:#070D19;
  --text:#F6F4EE; --text-2:#C9CED8; --text-dim:#A4ADBC; --text-dimmer:#77829A;
  --gold:#C5A572; --gold-bright:#E5C58E; --gold-line:rgba(197,165,114,.42);
  --cadre:#262C3B; --rule:rgba(255,255,255,.055); --rule-strong:rgba(255,255,255,.12);
  --sans:"Source Sans 3",-apple-system,system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"Source Code Pro",ui-monospace,Menlo,monospace;
  --c-claude:#D97757; --c-perplexity:#20B8CD; --c-mistral:#FA520F;
  --t-page:clamp(40px,5.6vw,76px);
  --t-section:clamp(30px,3.7vw,48px);
  --t-chapo:clamp(18px,1.5vw,21px);
  --t-carte:clamp(19px,1.6vw,22px);
  --t-texte:17px;
  --t-petit:14.5px;
  --large:1200px;
  --marge:clamp(20px,5vw,48px);
  --bloc:clamp(80px,10vw,144px);
  --tete:clamp(36px,4.4vw,60px);
  --rayon:16px;
  --type-label:11px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%;font-optical-sizing:auto;text-rendering:optimizeLegibility}
body{background:var(--ink);color:var(--text);font-family:var(--sans);font-size:var(--t-texte);line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px;border-radius:4px}
.wrap{width:100%;max-width:calc(var(--large) + 2 * var(--marge));margin:0 auto;padding:0 var(--marge)}
.ifg-mark{display:inline-block;width:1.62em;height:.92em;vertical-align:-.04em}

/* Titres : le début en gras blanc, la fin en italique doré, à la même hauteur d'œil. */
h1,h2{font-weight:600;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:var(--t-page);line-height:1.02}
h2{font-size:var(--t-section);line-height:1.08}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold);letter-spacing:-.014em;font-size:1.03em}
h3{font-size:var(--t-carte);font-weight:600;line-height:1.25;letter-spacing:-.015em}
.chapo{margin-top:20px;max-width:36em;font-size:var(--t-chapo);line-height:1.5;color:var(--text-dim);text-wrap:pretty}

/* Bouton : un seul, le même partout. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border:1px solid var(--gold);border-radius:10px;background:var(--gold);color:var(--ink);font-size:16px;font-weight:600;line-height:1.2;white-space:nowrap;transition:background .2s,border-color .2s}
.btn:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
.lien{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;color:var(--text);border-bottom:1px solid var(--cadre);padding:4px 0;transition:border-color .2s,color .2s}
.lien:hover{border-color:var(--gold);color:var(--gold-bright)}

/* En-tête */
header{position:fixed;inset:0 0 auto 0;z-index:100;padding:18px 0;border-bottom:1px solid transparent;transition:background .3s,padding .3s,border-color .3s}
header.scrolled{padding:12px 0;background:rgba(5,10,20,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--rule)}
.nav{display:flex;align-items:center;gap:32px}
.brand{flex:none}
.nav-liens{display:flex;gap:30px;margin-left:16px;font-size:15px;color:var(--text-dim)}
.nav-liens a{padding:6px 0;transition:color .15s}
.nav-liens a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:22px;margin-left:auto}
.sign-in{font-size:15px;font-weight:500;color:var(--text-2)}
.sign-in:hover{color:var(--text)}
header .btn{min-height:42px;padding:10px 18px;font-size:14.5px}

/* Haut de page : ce qu'on vend, le bouton, puis le produit. */
.hero{position:relative;padding:clamp(128px,17vh,176px) 0 0}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:760px;background:radial-gradient(60% 50% at 78% 8%,rgba(197,165,114,.10),transparent 70%);pointer-events:none}
.hero .wrap{position:relative}
.hero-lede{margin-top:clamp(22px,2.4vw,30px);max-width:33em;font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--text-2);text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(28px,3vw,38px)}
.hero-note{margin-top:18px;font-size:var(--t-petit);color:var(--text-dim)}
.hero-note b{font-weight:600;color:var(--text-2)}
.hero-avec{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:clamp(30px,3.4vw,44px);font-size:var(--t-petit);color:var(--text-dim)}
.logos{display:inline-flex;align-items:center;gap:16px}
.logos svg{width:22px;height:22px}

/* Le cadre du produit : le même pour chaque capture et pour le film. */
.cadre{margin-top:var(--tete);border:1px solid var(--cadre);border-radius:var(--rayon);overflow:hidden;background:#03060d;box-shadow:0 60px 120px -60px rgba(0,0,0,.95)}
.cadre img,.cadre video{width:100%;height:auto}
.hero .cadre{margin-top:clamp(44px,5vw,72px)}

/* Les éditeurs officiels, à la place d'un mur de logos. */
.editeurs{margin-top:clamp(28px,3vw,40px);display:flex;flex-wrap:wrap;gap:8px 26px;font-size:var(--t-petit);color:var(--text-dimmer)}
.editeurs span:first-child{color:var(--text-dim)}

/* Sections : un seul espace, une tête puis le contenu. */
section{padding-top:var(--bloc)}
.bande{margin-top:var(--bloc);padding:var(--bloc) 0;background:var(--bande)}
.bande + section{padding-top:var(--bloc)}
.bande.final{margin-top:var(--bloc)}
.contenu{margin-top:var(--tete)}

/* Cartes : trois par rangée, un intertitre et une phrase. */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.carte{padding:clamp(24px,2.6vw,32px);border:1px solid var(--cadre);border-radius:var(--rayon);background:var(--ink-2)}
.carte p{margin-top:12px;color:var(--text-dim);line-height:1.55;text-wrap:pretty}
.preuve{margin-top:28px;font-size:var(--t-petit);color:var(--text-dim)}
.preuve a,.note a,.faq-item p a,.points a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Points : trois colonnes sans cadre, sous une capture. */
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(28px,4vw,56px);margin-top:clamp(32px,3.6vw,48px)}
.points p{margin-top:10px;color:var(--text-dim);text-wrap:pretty}
.points .mot{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,2.4vw,32px);line-height:1.1;letter-spacing:-.012em;color:var(--gold)}

/* Étapes */
.etapes{counter-reset:etape}
.etapes li{counter-increment:etape}
.etapes li::before{content:counter(etape);display:block;margin-bottom:14px;font-family:var(--serif);font-style:italic;font-size:clamp(34px,3vw,42px);line-height:1;color:var(--gold)}

/* Carte de couverture (les classes sont celles du script de la carte) */
.coverage-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.coverage-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:var(--t-petit);color:var(--text-dim)}
.coverage-legend li{display:flex;align-items:center;gap:8px}
.coverage-legend li[hidden]{display:none}
.coverage-legend i{width:12px;height:12px;border-radius:3px}
.coverage-legend .is-native{background:var(--gold-bright)}
.coverage-legend .is-eu{background:#607697}
.coverage-legend .is-treaty{background:#3B4658;box-shadow:inset 0 0 0 1px rgba(170,176,190,.45)}
.coverage-legend:not(:has(li:not([hidden]) ~ li:not([hidden]))){display:none}
.coverage-views{display:flex;gap:6px;padding:4px;border:1px solid var(--cadre);border-radius:999px}
.coverage-view{appearance:none;border:0;background:none;padding:8px 16px;border-radius:999px;font-size:var(--t-petit);font-weight:500;color:var(--text-dim);cursor:pointer;transition:color .15s,background .15s}
.coverage-view:hover{color:var(--text)}
.coverage-view[aria-pressed="true"]{background:rgba(197,165,114,.16);color:var(--gold-bright)}
.coverage-touch-hint{display:none}
.coverage-map-wrap{position:relative;margin-top:var(--tete)}
.coverage-map{width:100%;height:auto;overflow:visible}
@media(min-width:901px){.coverage-map{width:auto;max-width:100%;height:min(70vh,640px);aspect-ratio:960/760;margin:0 auto}.coverage-map.is-world{width:100%;height:auto;max-height:min(70vh,640px);aspect-ratio:960/500}}
.coverage-country{fill:#0D1524;stroke:rgba(66,79,101,.28);stroke-width:.45;vector-effect:non-scaling-stroke;transition:fill .18s ease,stroke .18s ease}
.coverage-country.is-native,.coverage-country.is-fr{fill:var(--gold-bright);stroke:#0B1220;stroke-width:.9}
.coverage-country.is-eu{fill:#607697;stroke:rgba(229,197,142,.5)}
.coverage-country.is-treaty{fill:#3B4658;stroke:rgba(170,176,190,.45)}
.coverage-country:hover,.coverage-country:focus{fill:#E5C58E;stroke:#FFF0CF;stroke-width:1.15;outline:none;cursor:help}
.coverage-country.is-native:hover,.coverage-country.is-native:focus,.coverage-country.is-fr:hover,.coverage-country.is-fr:focus{fill:#F3D79F}
.coverage-map-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:30px;text-align:center;color:var(--text-dim)}
.coverage-map-error[hidden],.coverage-tooltip[hidden],.coverage-tooltip-lede[hidden]{display:none}
.coverage-tooltip{position:absolute;z-index:4;width:min(300px,calc(100vw - 48px));padding:22px 24px 20px;background:rgba(8,12,22,.96);border:1px solid var(--cadre);border-radius:14px;box-shadow:0 20px 64px rgba(0,0,0,.4);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.coverage-tooltip.is-visible{opacity:1;transform:none}
.coverage-tooltip-title{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.15;color:var(--gold-bright)}
.coverage-tooltip-status{margin-top:6px;font-size:13px;line-height:1.45;color:var(--text-dim)}
.coverage-tooltip-lede{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.coverage-tooltip-list{margin-top:14px}
.coverage-tooltip-list:empty{display:none}
.coverage-tooltip-item{padding-top:4px;font-size:14px;line-height:1.5;color:var(--text-2)}
.coverage-tooltip-item.is-off{color:var(--text-dimmer)}
.coverage-tooltip-date{margin-top:14px;font-size:12.5px;line-height:1.45;color:var(--text-dimmer)}

/* Confidentialité */
.note{margin-top:28px;max-width:46em;font-size:var(--t-petit);line-height:1.6;color:var(--text-dim)}

/* Tarif : trois formules côte à côte, le prix affiché. */
.formules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.formule{display:flex;flex-direction:column;padding:clamp(26px,2.8vw,36px);border:1px solid var(--cadre);border-radius:20px;background:var(--ink-2)}
.formule.est-choisie{border-color:var(--gold-line);background:linear-gradient(180deg,rgba(197,165,114,.07),rgba(197,165,114,0) 46%),var(--ink-2)}
.formule-pour{margin-top:8px;min-height:3.1em;color:var(--text-dim)}
.prix{display:flex;align-items:baseline;gap:10px;margin-top:22px}
.prix b{font-size:clamp(44px,4.4vw,56px);font-weight:600;line-height:1;letter-spacing:-.04em}
.prix span{font-size:var(--t-petit);color:var(--text-dim)}
.formule-essai{margin-top:10px;font-size:var(--t-petit);color:var(--text-2)}
.formule ul{margin:24px 0 30px;display:grid;gap:11px}
.formule li{position:relative;padding-left:24px;line-height:1.45;color:var(--text-2)}
.formule li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.formule .btn,.formule .btn-2{margin-top:auto;width:100%}
.btn-2{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border:1px solid var(--cadre);border-radius:10px;font-size:16px;font-weight:600;color:var(--text);transition:border-color .2s,color .2s}
.btn-2:hover{border-color:var(--gold);color:var(--gold-bright)}

/* Questions : le titre à gauche, les questions à droite. */
.faq-inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,6vw,96px);align-items:start}
.faq-inner h2{position:sticky;top:112px}
.faq-item{border-bottom:1px solid var(--rule-strong)}
.faq-item summary{display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-size:clamp(18px,1.5vw,20px);font-weight:500;line-height:1.35;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;font-size:24px;font-weight:300;line-height:1;color:var(--gold);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item:first-child summary{padding-top:4px}
.faq-item p{max-width:40em;padding-bottom:26px;line-height:1.65;color:var(--text-dim)}

/* Dernier appel */
.final{text-align:center}
.final h2{margin:0 auto}
.final .hero-cta{justify-content:center}

/* Pied */
footer{padding:clamp(48px,6vw,72px) 0 clamp(36px,4vw,56px);border-top:1px solid var(--rule)}
.pied{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,6vw,96px)}
.pied-marque img{height:26px;width:auto}
.pied-marque ul{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-size:var(--t-petit);color:var(--text-dim)}
.pied-marque p{margin-top:14px;font-size:var(--t-petit);color:var(--text-dimmer)}
.pied-liens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.pied-liens h3{font-size:var(--t-petit);font-weight:600;letter-spacing:0}
.pied-liens ul{margin-top:14px;display:grid;gap:9px;font-size:15.5px;color:var(--text-dim)}
.pied a:hover{color:var(--text)}

/* Apparition douce au défilement (jamais sans script, jamais si le visiteur refuse le mouvement). */
.anime .voir{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.anime .voir.vu{opacity:1;transform:none}

/* Tablette */
@media (max-width:980px){
  .nav-liens{display:none}
  .cartes,.points,.formules{grid-template-columns:1fr;gap:16px}
  .points{gap:26px}
  .formule-pour{min-height:0}
  .faq-inner,.pied{grid-template-columns:1fr}
  .faq-inner h2{position:static}
}
/* Téléphone */
@media (max-width:620px){
  header,header.scrolled{padding:10px 0;background:rgba(5,10,20,.94);border-bottom-color:var(--rule)}
  .sign-in{display:none}
  .hero{padding-top:112px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:16px}
  .hero-cta .btn{width:100%}
  .hero-cta .lien{align-self:flex-start}
  h2 em{display:block}
  .cadre{border-radius:12px}
  .cadre.haut img{max-height:560px;object-fit:cover;object-position:top}
  .coverage-hover-hint{display:none}
  .coverage-touch-hint{display:block}
  .coverage-tooltip{position:relative;left:auto!important;top:auto!important;width:100%;margin-top:14px;pointer-events:auto}
  .pied-liens{grid-template-columns:1fr 1fr}
  .final .hero-cta{align-items:stretch}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn .arrow,.anime .voir{transition:none}}

/* Le produit en schéma : trois rangs, le texte à gauche, la donnée réelle à droite. */
.rangs{display:grid;gap:20px;counter-reset:rang}
.rang{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(24px,3vw,40px);border:1px solid var(--cadre);border-radius:var(--rayon);background:var(--ink-2);counter-increment:rang}
.rang-texte::before{content:counter(rang);display:block;margin-bottom:12px;font-family:var(--serif);font-style:italic;font-size:clamp(30px,2.6vw,38px);line-height:1;color:var(--gold)}
.rang-texte p{margin-top:12px;color:var(--text-dim);text-wrap:pretty}
.schema{padding:clamp(20px,2.4vw,28px);border:1px solid var(--cadre);border-radius:14px;background:var(--ink)}
.schema-ref{font-weight:600;font-size:18px}
.schema-ref span{margin-left:8px;font-weight:400;font-size:var(--t-petit);color:var(--text-dim)}
.schema-pied{margin-top:18px;font-size:var(--t-petit);color:var(--text-dim)}
.frise{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:6px;margin-top:18px}
.frise-version{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;border-top:3px solid var(--cadre);background:rgba(255,255,255,.025);border-radius:0 0 10px 10px;color:var(--text-dim)}
.frise-version b{font-weight:600;font-size:18px;line-height:1.25;color:var(--text-2)}
.frise-dates{font-size:var(--t-petit)}
.frise-version.est-retenue{border-top-color:var(--gold);background:rgba(197,165,114,.08)}
.frise-version.est-retenue b{color:var(--text)}
.frise-fait{align-self:flex-start;margin-top:8px;padding:5px 12px;border:1px solid var(--gold-line);border-radius:999px;font-size:var(--t-petit);color:var(--gold-bright)}
.liens{margin-top:14px}
.liens li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:11px 0;border-top:1px solid var(--rule);color:var(--text-2)}
.liens li:first-child{border-top:0}
.liens b{flex:none;font-weight:600;font-size:18px;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.citation{margin-top:16px;padding-left:16px;border-left:2px solid var(--cadre);font-family:var(--serif);font-size:17px;line-height:1.65;color:var(--text-2)}
.citation mark{background:none;color:var(--text);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1.5px;text-underline-offset:4px}
@media (max-width:980px){.rang{grid-template-columns:1fr}}
@media (max-width:620px){.frise{grid-template-columns:1fr}}

/* ===== Troisième passe (12/11) : têtes centrées, scènes teintées, volets à capture rognée, onglets ===== */
:root{--t-page:clamp(42px,6.4vw,88px);--t-section:clamp(32px,4.2vw,56px);--bloc:clamp(96px,11vw,168px)}
.tete{max-width:900px;margin:0 auto;text-align:center}
.tete .chapo,.tete .hero-lede{margin-left:auto;margin-right:auto}
.tete .hero-cta{justify-content:center}
.hero{padding-top:clamp(136px,19vh,200px)}
.hero::before{height:900px;background:radial-gradient(50% 46% at 50% 0%,rgba(197,165,114,.13),transparent 72%)}
.hero-lede{max-width:34em}
/* La scène : le produit posé sur une matière, comme un objet. */
.scene{margin-top:clamp(48px,5.6vw,80px);padding:clamp(14px,3.4vw,56px) clamp(14px,3.4vw,56px) 0;border:1px solid var(--cadre);border-radius:28px;overflow:hidden;background:
  radial-gradient(70% 90% at 12% 0%,rgba(197,165,114,.22),transparent 60%),
  radial-gradient(60% 80% at 100% 100%,rgba(96,118,151,.26),transparent 62%),
  linear-gradient(180deg,#0C1424,#070C17)}
.scene .cadre{margin-top:0;border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -10px 80px -20px rgba(0,0,0,.8)}
.editeurs{justify-content:center;margin-top:clamp(32px,3.6vw,48px)}
.editeurs span:first-child{flex-basis:100%;text-align:center;margin-bottom:4px}
.editeurs span:not(:first-child){font-size:clamp(15px,1.3vw,18px);font-weight:500;color:var(--text-dim);letter-spacing:-.005em}
.editeurs{gap:10px clamp(22px,3vw,44px)}

/* Deux volets : un titre, une phrase, un lien, et le vrai écran qui sort du bas. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.volet{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,3.4vw,48px) clamp(28px,3.4vw,48px) 0;border:1px solid var(--cadre);border-radius:24px;overflow:hidden;background:radial-gradient(90% 70% at 0% 0%,rgba(197,165,114,.16),transparent 62%),linear-gradient(180deg,#0C1424,#080D18)}
.volet + .volet{background:radial-gradient(90% 70% at 100% 0%,rgba(96,118,151,.24),transparent 62%),linear-gradient(180deg,#0C1424,#080D18)}
.volet h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.025em}
.volet p{margin-top:14px;max-width:30em;font-size:clamp(17px,1.35vw,19px);color:var(--text-2);text-wrap:pretty}
.volet .lien{margin-top:22px}
.rogne{align-self:stretch;margin-top:clamp(28px,3vw,40px);aspect-ratio:100/52;overflow:hidden;border:1px solid var(--cadre);border-bottom:0;border-radius:14px 14px 0 0;background:#03060d;box-shadow:0 -10px 60px -20px rgba(0,0,0,.8)}
.rogne img{max-width:none;height:auto}
.rogne-controle img{width:174%;margin:-59.3% 0 0 -56.5%}
.rogne-chat img{width:178%;margin:-10% 0 0 -39%}
.rogne-chat{position:relative;flex:1 0 auto}
.chat-barre{position:absolute;left:0;right:0;bottom:0;aspect-ratio:100/26;pointer-events:none}
.chat-barre::before{content:"";position:absolute;inset:0 0 auto;height:42%;background:linear-gradient(rgba(6,10,21,0),#060A15)}
.chat-barre span{position:absolute;left:0;right:0;bottom:0;height:59%;overflow:hidden;background:#060A15}
.rogne-chat .chat-barre img{position:absolute;left:-39%;bottom:0;width:178%;margin:0 0 -1.5%}

/* Onglets : la liste à gauche, la donnée de l'exemple à droite. */
.onglets{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,64px);align-items:start}
.onglet{display:contents}
.onglet-tete{grid-column:1;display:block;width:100%;padding:24px 0;border:0;border-top:1px solid var(--rule-strong);background:none;text-align:left;cursor:pointer}
.onglet:first-child .onglet-tete{border-top:0;padding-top:0}
.onglet-tete h3{font-size:clamp(20px,1.9vw,26px);color:var(--text-dim);transition:color .2s}
.onglet-tete:hover h3{color:var(--text)}
.onglet-tete p{display:none;margin-top:12px;color:var(--text-dim);text-wrap:pretty}
.onglet.est-ouvert .onglet-tete h3{color:var(--text)}
.onglet.est-ouvert .onglet-tete p{display:block}
.onglet-vue{grid-column:2;grid-row:1 / span 3;display:none;align-self:stretch;place-items:center;min-height:400px;padding:clamp(20px,3.4vw,56px);border:1px solid var(--cadre);border-radius:24px;background:radial-gradient(80% 80% at 100% 0%,rgba(197,165,114,.18),transparent 60%),linear-gradient(180deg,#0C1424,#080D18)}
.onglet.est-ouvert .onglet-vue{display:grid}
.onglet-vue .schema{width:100%;max-width:560px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.centre{text-align:center;margin-left:auto;margin-right:auto;max-width:52em}
.bande .tete + .points,.bande h2 + .points{margin-top:var(--tete)}
.bande h2,section > .wrap > h2{max-width:900px;margin-left:auto;margin-right:auto;text-align:center}
section > .wrap > .chapo{margin-left:auto;margin-right:auto;text-align:center}
.bande .points{text-align:left}
.note{margin-left:auto;margin-right:auto;text-align:center}
.coverage-tete{flex-direction:column;align-items:center;text-align:center;gap:24px}
.coverage-tete .chapo{margin-left:auto;margin-right:auto}
.coverage-legend{justify-content:center}
.hero-avec{justify-content:center}
.faq-inner h2{max-width:none;margin:0;text-align:left}
@media (max-width:980px){
  .duo{grid-template-columns:1fr}
  .onglets{display:block}
  .onglet{display:block}
  .onglet-tete{padding:26px 0 0;border-top:0;cursor:default}
  .onglet:first-child .onglet-tete{padding-top:0}
  .onglet-tete h3{color:var(--text)}
  .onglet-tete p{display:block}
  .onglet-vue{display:grid;min-height:0;margin-top:18px;border-radius:18px}
}
@media (max-width:620px){
  .tete{text-align:left}
  .tete .hero-cta{justify-content:flex-start}
  .bande h2,section > .wrap > h2,section > .wrap > .chapo,.note,.centre{text-align:left}
  .coverage-tete{align-items:flex-start;text-align:left}
  .editeurs{justify-content:flex-start}.editeurs span:first-child{text-align:left}
  .scene{border-radius:18px}.volet{border-radius:18px}
}

/* Jamais un cadre dans un cadre (Aitor, 12/11 : la bordure épaisse autour du film, « immonde »). */
.scene{padding:0;border:0;border-radius:0;overflow:visible;background:none}
.scene .cadre{border:1px solid var(--cadre);border-radius:var(--rayon);box-shadow:0 0 0 1px rgba(197,165,114,.06),0 60px 140px -50px rgba(197,165,114,.22),0 60px 120px -60px rgba(0,0,0,.95)}
.onglet-vue .schema{border:0;background:none;box-shadow:none;padding:0}
.rogne{border:0;box-shadow:0 -14px 60px -18px rgba(0,0,0,.85)}
@media (max-width:620px){.scene .cadre{border-radius:12px}}

/* Quatrième passe (12/11) : pas de film ; les deux accès sont le visuel du haut de page. */
.suite{padding-top:clamp(48px,5.6vw,80px)}
.volet .logos{margin-top:16px;gap:18px}
.volet .logos svg{width:26px;height:26px}
.rogne{aspect-ratio:100/54;border-radius:12px 12px 0 0}
.rogne-clair{background:#fff}
.rogne-clair img{width:100%;height:100%;object-fit:cover;object-position:left top}
.suite .editeurs{margin-top:clamp(40px,4.6vw,64px)}
.rogne-clair img{width:118%;height:auto;max-width:none;object-fit:initial;margin:-1.5% 0 0 -9%}

/* Cinquième passe (12/11) : aucun reflet, des aplats ; fonctionnement replié ; le fonds en strates. */
.hero::before{display:none}
.volet,.volet + .volet,.onglet-vue{background:var(--ink-2)}
.scene .cadre{box-shadow:none}
.rogne{box-shadow:none}
.officiel{margin-top:14px!important;font-size:var(--t-petit)!important;font-weight:600;color:var(--gold-bright)!important}
.fonctionnement{align-self:stretch;margin-top:18px}
.fonctionnement summary{display:inline-flex;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid var(--cadre);font-size:16px;font-weight:500;cursor:pointer;list-style:none;transition:border-color .2s,color .2s}
.fonctionnement summary::-webkit-details-marker{display:none}
.fonctionnement summary::after{content:"+";font-size:20px;font-weight:300;line-height:1;color:var(--gold);transition:transform .2s}
.fonctionnement[open] summary::after{transform:rotate(45deg)}
.fonctionnement summary:hover{border-color:var(--gold);color:var(--gold-bright)}
.fonctionnement ol{margin-top:18px;display:grid;gap:12px;counter-reset:pas;max-width:34em}
.fonctionnement li{position:relative;padding-left:34px;color:var(--text-2);line-height:1.5;counter-increment:pas}
.fonctionnement li::before{content:counter(pas);position:absolute;left:0;top:-.08em;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold)}
.film{margin-top:18px}
.film-revoir{position:relative;display:block;width:100%;padding:0;border:1px solid var(--rule-strong);border-radius:14px;overflow:hidden;background:#050A14;cursor:pointer}
.film-revoir img{display:block;width:100%;height:auto;opacity:.82;transition:opacity .2s}
.film-revoir:hover img,.film-revoir:focus-visible img{opacity:1}
.film-revoir::after{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:1px solid var(--gold-line);background:rgba(5,10,20,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l8.5-5.5z' fill='%23C5A572'/%3E%3C/svg%3E") 54% 50%/26px no-repeat}
@media (max-width:640px){.film-revoir{max-width:220px}}
.film-ecran{position:fixed;inset:0;margin:auto;height:fit-content;padding:0;border:0;background:transparent;overflow:visible;max-width:none;max-height:none;width:min(92vw,calc(84vh*16/9),1440px)}
.film-ecran.vertical{width:min(92vw,calc(84vh*9/16))}
.film-ecran::backdrop{background:rgba(5,10,20,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.film-ecran video{display:block;width:100%;height:auto;border-radius:14px;background:#050A14;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.film-fermer{position:absolute;right:0;bottom:calc(100% + 10px);width:40px;height:40px;padding:0;border:1px solid var(--rule-strong);border-radius:50%;background:rgba(5,10,20,.6);color:var(--text);font-size:22px;line-height:1;cursor:pointer}
.film-fermer:hover,.film-fermer:focus-visible{border-color:var(--gold-line);color:var(--gold-bright)}
.fonctionnement a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.strates{max-width:1040px;margin-left:auto;margin-right:auto}
.strate{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,64px);align-items:baseline;padding:clamp(24px,2.8vw,36px) 0;border-top:1px solid var(--rule-strong)}
.strate:first-child{border-top:0;padding-top:0}
.strate dt{font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.8vw,38px);line-height:1.1;letter-spacing:-.012em;color:var(--gold)}
.strate dd p{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--text);text-wrap:pretty}
.strate dd .strate-detail{margin-top:10px;font-size:var(--t-texte);color:var(--text-dim)}
@media (max-width:760px){.strate{grid-template-columns:1fr;gap:10px}}

/* Sixième passe (12/11) : le motif qu'Aitor aime (« le défilement avec le truc qui reste, hyper classe ») devient
   celui de la page : le titre reste à gauche, le contenu défile à droite, séparé par un filet. Plus de panneau. */
.cote{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.cote-titre{position:sticky;top:112px}
.cote-titre h2{max-width:none;margin:0;text-align:left}
.cote-titre .chapo{margin-left:0;text-align:left}
.cote-liste > li{padding:clamp(24px,2.6vw,34px) 0;border-bottom:1px solid var(--rule-strong)}
.cote-liste > li:first-child{padding-top:6px}
.cote-liste h3{font-size:clamp(20px,1.8vw,24px)}
.cote-liste p{margin-top:10px;max-width:38em;color:var(--text-dim);line-height:1.6;text-wrap:pretty}
.cote-liste .detail{font-size:var(--t-petit)}
.faq-list .faq-item:first-child summary{padding-top:6px}
/* La donnée de l'exemple, posée dans le texte, sans cadre. */
.versions{margin-top:20px;display:grid;gap:14px}
.versions > div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6px 24px;padding-left:16px;border-left:2px solid var(--cadre);color:var(--text-dim)}
.versions dt{font-size:var(--t-petit);line-height:1.6}
.versions dd{font-size:18px;line-height:1.35}
.versions .est-retenue{border-left-color:var(--gold)}
.versions .est-retenue dd{color:var(--text);font-weight:600}
.versions dd em{display:block;margin-top:4px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:var(--gold)}
.comptes{margin-top:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.comptes b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,3.4vw,46px);line-height:1;color:var(--gold)}
.comptes span{display:block;margin-top:8px;font-size:var(--t-petit);line-height:1.4;color:var(--text-dim)}
.cote-liste .citation{margin-top:20px;max-width:38em}
.citation footer{margin:12px 0 0;padding:0;border:0;font-family:var(--sans);font-size:var(--t-petit);color:var(--text-dim)}
@media (max-width:1100px){.versions > div{grid-template-columns:1fr}.comptes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cote{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px}.cote-titre h2{font-size:28px}.cote-titre .chapo{font-size:16px}.cote-titre{top:92px}}
@media (max-width:600px){
  .cote{grid-template-columns:1fr;gap:28px}
  .cote-titre{position:static}
  .cote-titre h2{font-size:var(--t-section)}
}

/* Septième passe (12/11), d'après la charte : fond du site partout, cadre fin, aucun panneau bleuté ; tout intertitre
   est en italique doré à empattements, tout grand titre en deux voix ; le titre fixe ne sert qu'à la FAQ. */
:root{--ink-2:#050A14;--bande:#050A14}
.volet,.volet + .volet,.formule,.formule.est-choisie{background:var(--ink)}
.formule.est-choisie{border-color:var(--gold-line)}
.volet h3{font-size:clamp(30px,3.2vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.volet h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold);letter-spacing:-.014em;font-size:1.03em}
h3.mot,.mot{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,2.4vw,32px);line-height:1.1;letter-spacing:-.012em;color:var(--gold)}
.trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(32px,5vw,72px)}
.quatre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px clamp(24px,3vw,48px);margin-top:var(--tete)}
.trois p,.quatre p{margin-top:12px;color:var(--text-dim);line-height:1.6;text-wrap:pretty}
.trois .detail,.quatre .detail{font-size:var(--t-petit)}
.trois .versions > div{grid-template-columns:1fr}
.trois .comptes{grid-template-columns:repeat(2,minmax(0,1fr))}
.trois .citation{margin-top:20px}
#confidentialite{padding-bottom:0}
@media (max-width:900px){.trois{grid-template-columns:1fr;gap:44px;max-width:560px;margin-left:auto;margin-right:auto}.quatre{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.quatre{grid-template-columns:1fr}}

/* Huitième passe (12/11) : le cas avant et après IFG ; le droit en couches qui s'empilent au défilement, IFG au-dessus. */











.preuves{margin-top:clamp(40px,5vw,72px);max-width:1000px;margin-left:auto;margin-right:auto}
.preuves mark{background:none;color:var(--text);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1.5px;text-underline-offset:4px}
.couches{max-width:880px;margin-left:auto;margin-right:auto;padding-bottom:clamp(40px,8vh,96px)}
.couche{position:sticky;top:calc(96px + var(--i) * 52px);min-height:240px;margin-bottom:28px;padding:14px clamp(22px,3vw,40px) clamp(24px,3vw,36px);border:1px solid var(--cadre);border-radius:20px;background:var(--ink);box-shadow:0 -18px 40px -18px rgba(0,0,0,.9)}
.couche h3{line-height:24px;font-size:clamp(22px,2.2vw,28px)}
.couche p{margin-top:22px;max-width:34em;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.couche-ifg{border-color:var(--gold);margin-bottom:0}
.couche-ifg h3{font-size:clamp(22px,2.2vw,28px);font-weight:600;color:var(--text)}
.couche-ifg h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold)}
.couche-ifg p{color:var(--text)}
@media (max-width:700px){.couche{top:calc(84px + var(--i) * 46px);min-height:260px}}

/* Neuvième passe (12/11), d'après le défilement de legora.com : une scène fixe où les couches du droit viennent se
   poser en plaques l'une sur l'autre, la liste à gauche ouvrant celle en cours ; IFG coiffe la pile. Sans reflet :
   des plaques au fond du site, cernées d'un filet. */
.pile{--pas:34px;--cote:min(320px,32vw,38vh);padding-top:var(--bloc)}
.pile-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center}
.pile-texte h2{text-align:left;margin:0;max-width:none}
.pile-liste{margin-top:clamp(28px,3.4vw,44px);display:grid;gap:14px}
.pile-liste h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.15;color:var(--gold)}
.pile-liste p{margin-top:8px;max-width:30em;color:var(--text-2);line-height:1.55;text-wrap:pretty}
.pile-vue{display:grid;place-items:center;min-height:calc(var(--cote) * 2.4)}
.pile-3d{position:relative;width:var(--cote);height:var(--cote);margin-top:calc(var(--pas) * 5);transform:rotateX(58deg) rotateZ(45deg);transform-style:preserve-3d}









/* Animée : la section donne la course, la scène reste à l'écran. */
.pile-animee{padding-top:0}
.pile-animee .pile-scene{position:sticky;top:0;height:100vh;display:grid;align-items:center;padding-top:64px}
.pile-animee .pile-liste h3{color:var(--text-dimmer);font-size:clamp(18px,1.6vw,22px);transition:color .25s,font-size .25s}
.pile-animee .pile-liste p{display:none}
.pile-animee .pile-liste li.est-posee h3{color:var(--text-dim)}
.pile-animee .pile-liste li.est-active h3{color:var(--gold);font-size:clamp(24px,2.3vw,32px)}
.pile-animee .pile-liste li.est-active p{display:block}

@media (max-width:760px){
  .pile{--pas:22px;--cote:min(200px,50vw,24vh)}
  .pile-grille{grid-template-columns:1fr;gap:8px}
  .pile-vue{order:-1;min-height:calc(var(--cote) * 2.3)}
  .pile-texte h2{font-size:26px}
  .pile-liste{margin-top:14px}
  .pile-animee .pile-liste li:not(.est-active){display:none}
  .pile-animee .pile-liste{min-height:9.5em}
}
/* Plaques plus présentes : une face pleine, deux filets d'épaisseur, des libellés lisibles. */
.pile{--pas:40px;--cote:min(380px,33vw,42vh)}









@media (max-width:760px){.pile{--pas:24px;--cote:min(210px,52vw,25vh)}}

/* Dixième passe (12/11) : la pile plus grande ; le vrai logo sur la dernière plaque ; à la fin, les couches se
   resserrent en un seul bloc cerné d'or. */
.pile{--pas:40px;--ep:12.5px;--cote:min(460px,40vw,46vh)}









.pile-grille{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
@media (max-width:760px){.pile{--pas:26px;--cote:min(270px,64vw,30vh)}.pile-grille{grid-template-columns:1fr}}

/* Onzième passe (12/11) : « Ce que votre IA reçoit » sans exemple de loi : un schéma (vous, votre IA, IFG et ce qui
   circule entre les trois), puis daté, relié, vérifié. La liste des couches n'affiche plus qu'une couche à la fois. */
.tete .chapo{margin-top:clamp(18px,2vw,26px);max-width:34em;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.circuit{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;gap:clamp(18px,2.6vw,40px);max-width:1120px;margin-left:auto;margin-right:auto}
.poste{display:grid;justify-items:center;gap:14px;text-align:center}
.poste-nom{font-family:var(--serif);font-style:italic;font-size:clamp(28px,2.8vw,40px);line-height:1;color:var(--gold);white-space:nowrap}
.poste .logos{gap:14px}
.poste-ifg{width:clamp(96px,9vw,132px);height:auto;color:var(--text);overflow:visible}
.trajet{display:grid;gap:26px;min-width:0}
.trajet p{position:relative;font-size:clamp(15px,1.25vw,17.5px);line-height:1.35;color:var(--text-2);text-align:center;text-wrap:balance}
.trajet p::before{content:"";position:absolute;left:0;right:0;height:1px;background:var(--gold);opacity:.75}
.trajet p::after{content:"";position:absolute;width:8px;height:8px;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold)}
.trajet .aller{padding-bottom:16px}
.trajet .aller::before{bottom:0}
.trajet .aller::after{right:0;bottom:-4px;transform:rotate(45deg)}
.trajet .retour{padding-top:16px}
.trajet .retour::before{top:0}
.trajet .retour::after{left:0;top:-4px;transform:rotate(-135deg)}
.preuves{margin-top:clamp(56px,6.4vw,96px);max-width:1120px}
.preuves p{color:var(--text-2);font-size:clamp(16.5px,1.3vw,18.5px)}
@media (max-width:820px){
  .circuit{grid-template-columns:1fr;justify-items:center;gap:22px}
  .trajet{grid-template-columns:1fr 1fr;gap:28px;width:min(100%,360px);min-height:120px;align-items:center}
  .trajet p{padding:0 0 0 18px;text-align:left}
  .trajet .retour{padding:0 18px 0 0;text-align:right}
  .trajet p::before{left:0;right:auto;top:-18px;bottom:-18px;width:1px;height:auto}
  .trajet .retour::before{left:auto;right:0;top:-18px;bottom:-18px}
  .trajet .aller::after{left:-4px;right:auto;bottom:-18px;transform:rotate(135deg)}
  .trajet .retour::after{left:auto;right:-4px;top:-18px;transform:rotate(-45deg)}
}
.pile-animee .pile-liste{display:grid;gap:0;min-height:11.5em;align-content:start}
.pile-animee .pile-liste li{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.pile-animee .pile-liste li.est-active{opacity:1;visibility:visible}
.pile-animee .pile-liste h3,.pile-animee .pile-liste li.est-active h3{color:var(--gold);font-size:clamp(30px,3vw,44px);line-height:1.1}
.pile-animee .pile-liste p{display:block;margin-top:16px;max-width:24em;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--text)}
.pile-avance{display:flex;gap:8px;margin-top:clamp(20px,2.4vw,32px)}
.pile-avance i{width:34px;height:2px;border-radius:2px;background:var(--cadre);transition:background-color .3s}
.pile-avance i.fait{background:var(--gold)}
/* 14/11 (Aitor : « les titres sont là deux fois ») : le nom de la couche reste sur la plaque seule ; à gauche, pour les lecteurs d'écran seulement. */
.pile-animee .pile-liste h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pile-animee .pile-liste p{margin-top:0}
.pile-animee .pile-liste{min-height:7em}
@media (max-width:760px){
  .pile-animee .pile-liste{min-height:8.6em}
  .pile-animee .pile-liste li:not(.est-active){display:block}
  .pile-animee .pile-liste h3,.pile-animee .pile-liste li.est-active h3{font-size:25px}
  .pile-animee .pile-liste p{font-size:16.5px;margin-top:8px}
  .pile-avance{margin-top:10px}.pile-avance i{width:22px}
}

/* Douzième passe (12/11) : la pile tournée dans l'autre sens (le texte monte, comme on lit) ; le nom de la couche en
   grand sur sa plaque. */
.pile-3d{transform:rotateX(56deg) rotateZ(-45deg)}



.pile-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:760px){.pile-grille{grid-template-columns:1fr}}

/* Treizième passe (12/11) : la pile dans son sens d'origine ; des plaques en volume (une épaisseur pleine, deux flancs
   de tons différents, aucun reflet), des lignes de texte gravées sur la face ; le logo centré ; à la fin les épaisseurs
   se touchent : un seul bloc. */
.pile{--ep:17px;--face:#0A0F19;--flanc-g:#262D3D;--flanc-d:#151A26;--arete:#5E667A}
.pile-3d{transform:rotateX(58deg) rotateZ(45deg)}








.est-fusionnee{--flanc-g:#3B321F;--flanc-d:#231E14;--arete:var(--gold)}


/* Quatorzième passe (12/11) : les plaques refaites en dalles : une face posée sur dix tranches qui font l'épaisseur
   (deux flancs de tons différents, aucun reflet). Les règles « .plaque » plus haut ne servent plus. */
.dalle{position:absolute;inset:0;transform:translateZ(calc(var(--i) * var(--pas)));transform-style:preserve-3d;--a:1}
.pile-animee .dalle{--a:0}
.dalle > *{opacity:var(--a)}
.dalle-ep{position:absolute;inset:0;border-radius:24px;background:linear-gradient(to top right,var(--flanc-g) 50%,var(--flanc-d) 50%);transform:translateZ(calc(var(--k) * var(--ep) / -10))}
.dalle-face{position:absolute;inset:0;display:grid;place-items:center;border:1.5px solid var(--arete);border-radius:24px;background:var(--face);transition:border-color .3s}
.dalle.est-active .dalle-face,.dalle-ifg .dalle-face{border-color:var(--gold-bright)}
.dalle-face span{font-family:var(--serif);font-style:italic;font-weight:500;font-size:calc(var(--cote) * .115);line-height:1.05;color:var(--gold-bright);text-align:center;max-width:86%;text-wrap:balance;transition:opacity .2s}
.dalle.est-couverte .dalle-face span{opacity:0}
.dalle-face::before{content:"";position:absolute;inset:auto 13% 12% 13%;height:17%;background:
  linear-gradient(rgba(246,244,238,.13),rgba(246,244,238,.13)) 0 0/100% 2px,
  linear-gradient(rgba(246,244,238,.13),rgba(246,244,238,.13)) 0 33.3%/84% 2px,
  linear-gradient(rgba(246,244,238,.13),rgba(246,244,238,.13)) 0 66.6%/93% 2px,
  linear-gradient(rgba(246,244,238,.13),rgba(246,244,238,.13)) 0 100%/52% 2px;background-repeat:no-repeat}
.dalle-ifg .dalle-face::before{content:none}
.dalle-logo{width:62%;height:auto;color:var(--text);overflow:visible}

/* Quinzième passe (12/11) : le logo IFG en relief sur la dernière dalle (treize tranches empilées : flancs sombres,
   dessus blanc, point doré). Sur téléphone la scène tient dans l'écran. */
.relief{position:absolute;inset:0;margin:auto;width:62%;height:auto;overflow:visible;font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:22px;fill:#8F8A7E;color:var(--text);transform:translateZ(calc(var(--k) * var(--cote) * .0034))}
.relief circle{fill:#8B7245}
.relief-dessus{fill:currentColor}
@media (max-width:760px){
  .pile{--pas:24px;--cote:min(230px,58vw,27vh)}
  .pile-vue{min-height:calc(var(--cote) * 1.5)}
  .pile-3d{margin-top:calc(var(--pas) * 3.6)}
}
.pile-animee .pile-liste li{transition:opacity .12s,visibility .12s}
.pile-animee .pile-liste li.est-active{transition:opacity .3s .12s,visibility 0s .12s}

/* Seizième passe (12/11) : le relief du logo refusé (« chiasse » : flancs beige-gris épais, point en cylindre).
   Relief fin, flancs graphite presque du ton de la face, point doré à peine levé : le logo reste net. */
.relief{fill:#1C222D;transform:translateZ(calc(var(--k) * var(--cote) * .00075))}
.relief circle{fill:#5C4A2C}
.relief-dessus{fill:currentColor}
.relief-dessus circle{fill:#C5A572}

/* Dix-septième passe (12/11) : le schéma refusé en largeur moyenne (flèches éparpillées, « ça aussi ?? »).
   Les trois postes restent sur une ligne à toute largeur, reliés par un filet ; sous 821 px les échanges ne sont plus
   écrits sur les filets mais en quatre étapes numérotées dessous. */
.circuit-etapes{display:none}
@media (max-width:820px){
  .circuit{grid-template-columns:auto minmax(16px,1fr) auto minmax(16px,1fr) auto;justify-items:stretch;gap:clamp(10px,3vw,22px)}
  .trajet{display:block;position:relative;width:auto;min-height:0;height:1px;background:var(--gold);opacity:.7}
  .trajet p{display:none}
  .trajet::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);transform:rotate(45deg)}
  .poste-nom{font-size:clamp(20px,4.6vw,30px)}
  .poste .logos{gap:clamp(6px,1.6vw,12px)}
  .poste .logos svg{width:clamp(14px,3.4vw,20px);height:clamp(14px,3.4vw,20px)}
  .poste-ifg{width:clamp(54px,12vw,84px)}
  .circuit-etapes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,4vw,36px);max-width:640px;margin:clamp(30px,5vw,44px) auto 0;counter-reset:none}
  .circuit-etapes li{display:grid;grid-template-columns:28px 1fr;align-items:baseline;padding:16px 0;border-top:1px solid var(--rule-strong);color:var(--text-2);font-size:17px;line-height:1.45;text-wrap:pretty}
  .circuit-etapes b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;color:var(--gold)}
}
@media (max-width:560px){.circuit-etapes{grid-template-columns:1fr}}

/* Dix-huitième passe (12/11) : le logo gardé mais « trop 3D » : une épaisseur légère seulement ; les noms des couches
   sur les plaques en ivoire, plus en doré (« les titres tout dorés, non »). */
.relief{transform:translateZ(calc(var(--k) * var(--cote) * .00028));fill:#2A303B}
.relief circle{fill:#7A6440}
.dalle-face span{color:var(--text);font-weight:400}

/* Dix-neuvième passe (12/11) : le schéma vous, votre IA, IFG refusé (« je comprends pas du tout »). La section dit
   simplement ce que l'IA reçoit pour chaque texte : six lignes, le mot en italique doré à gauche, la phrase à droite,
   filets fins comme la FAQ. */
.recoit{max-width:960px;margin-left:auto;margin-right:auto;border-bottom:1px solid var(--rule-strong)}
.recoit > div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(16px,4vw,56px);align-items:baseline;padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--rule-strong)}
.recoit dt{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.3vw,32px);line-height:1.15;color:var(--gold)}
.recoit dd{margin:0;font-size:clamp(17px,1.4vw,19.5px);line-height:1.55;color:var(--text-2);text-wrap:pretty}
@media (max-width:640px){.recoit > div{grid-template-columns:1fr;gap:6px}}

/* Vingtième passe (12/11) : « que du doré, non : doré et blanc » : les intitulés de la liste et de la pile en deux
   voix, comme les grands titres (début en blanc sans empattement, fin en italique doré). */
.recoit dt,.pile-animee .pile-liste h3,.pile-animee .pile-liste li.est-active h3,.pile-liste h3{font-family:var(--sans);font-style:normal;font-weight:600;color:var(--text);letter-spacing:-.01em}
.recoit dt{font-size:clamp(22px,2vw,28px)}
.recoit dt em,.pile-liste h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold);letter-spacing:0}

/* Vingt et unième passe (12/11) : les deux voix sur chaque intitulé « c'est lourd ». Le doré reste au titre de la
   section ; les intitulés passent en italique à empattements ivoire, sans gras : léger, et plus tout doré. */
.recoit dt,.recoit dt em,.pile-liste h3,.pile-liste h3 em,.pile-animee .pile-liste h3,.pile-animee .pile-liste li.est-active h3{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--text);letter-spacing:0}
.recoit dt{font-size:clamp(23px,2.1vw,29px)}
.recoit dd{color:var(--text-dim)}

/* Vingt-deuxième passe (12/11) : le flanc du point doré se lisait comme un second point (« deux points sur le I ») :
   le point reste à plat, seules les lettres ont de l'épaisseur. */
.relief:not(.relief-dessus) circle{display:none}

/* Vingt-troisième passe (12/11) : la pile « trop petite, trop jouet » : dalles fines (épaisseur divisée par deux),
   angles serrés, flancs presque du ton de la face, filet fin ; la pile reste à côté du texte jusqu'à 601 px pour
   garder sa taille quand la fenêtre est basse. */
.pile{--flanc-g:#1A1F29;--flanc-d:#11151D;--arete:#4A5266}
.dalle-ep,.dalle-face{border-radius:12px}
.dalle-face{border-width:1px}
@media (min-width:601px) and (max-width:760px){
  .pile{--pas:30px;--cote:min(300px,42vw,44vh)}
  .pile-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px}
  .pile-vue{order:0;min-height:calc(var(--cote) * 2.2)}
  .pile-3d{margin-top:calc(var(--pas) * 5)}
  .pile-texte h2{font-size:clamp(26px,4.4vw,34px)}
  .pile-animee .pile-liste h3,.pile-animee .pile-liste li.est-active h3{font-size:24px}
  .pile-animee .pile-liste p{font-size:16px}
}
@media (max-width:600px){.pile{--pas:26px;--cote:min(260px,62vw,30vh)}}

/* Vingt-quatrième passe (12/11) : le bloc final « trop bas » : la pile se recentre à mesure qu'elle se resserre (la
   marge suit la hauteur réelle de la pile, posée par le script). */
.pile-animee .pile-3d{margin-top:var(--h3d,calc(var(--pas) * 5))}

/* 14/11 (Aitor : « au dernier, ça doit zoomer, se mettre au centre, avec le titre dessus : Tout cela, c’est IFG ») :
   dès que la dernière plaque se pose, pendant que la pile se soude, le texte s’efface, le bloc IFG glisse au centre et grandit, le titre se pose au-dessus. */
.pile-animee{height:calc(100vh + 7.45 * 78vh)}
/* Le texte de la pile s’efface pendant que le titre final arrive : il y a toujours un texte à l’écran (14/11 : rien à lire
   entre z = 0,62 et 0,9). */
.pile-animee .pile-texte{opacity:calc(1 - var(--z,0) * 1.6)}
.pile-animee .pile-liste li:last-child{display:none}
.pile-animee .pile-vue{transform:translate(calc(var(--dx,0px) * var(--z,0)),calc(var(--dy,0px) * var(--z,0))) scale(calc(1 + .32 * var(--z,0)));will-change:transform}
.pile-final{position:absolute;left:0;right:0;top:calc(64px + 9vh);margin:0;text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(38px,4.6vw,66px);line-height:1.1;color:var(--text);opacity:calc(min(1, (var(--z,0) - .3) * 2) * var(--place,1));transform:translateY(calc((1 - var(--z,0)) * 18px + var(--leve,0px)));pointer-events:none}
.pile-final em{color:var(--gold)}

/* Vingt-cinquième passe (12/11) : sous la réponse ChatGPT, le vrai encart de contrôle IFG (page de la carte servie
   par check_sources, remplie avec le résultat réel de la question) : l'image entière, sans rognage. */
.rogne-clair{aspect-ratio:auto;border-radius:12px 12px 0 0}
.rogne-clair img,.rogne-clair img[src*="controle"]{display:block;width:100%;height:auto;margin:0;object-fit:initial}
.volet .officiel + .officiel{margin-top:8px}

/* passe 26 (12/11) : l'annuel sous le prix, une ligne discrète, « 2 mois offerts » en italique doré. */
.formule-an{margin-top:8px;font-size:var(--t-petit);color:var(--text-dim)}
.formule-an em{font-family:var(--serif);font-style:italic;color:var(--gold)}

/* Vingt-septième passe (12/11) : « pas assez aéré, le tout ». Plus d'air entre les sections, sous les titres et dans les
   formules (deux ou trois points chacune). Le logo de la pile « chelou » : son épaisseur se lisait comme une ombre grise
   détachée ; les tranches prennent le ton de la lettre, assombri vers le bas, et restent fines : un relief, pas une ombre. */
:root{--bloc:clamp(120px,14vw,216px);--tete:clamp(56px,6vw,96px)}
.bande{padding:clamp(120px,14vw,216px) 0}
h2 + .chapo,.tete .chapo{margin-top:clamp(24px,2.4vw,32px)}
.trois{gap:56px clamp(48px,6vw,104px)}
.trois p{margin-top:16px;line-height:1.7}
.formules{gap:clamp(20px,2.4vw,32px)}
.formule{padding:clamp(34px,3.6vw,52px)}
.formule-pour{margin-top:14px;min-height:3.2em}
@media (max-width:900px){.formule-pour{min-height:0}}
.prix{margin-top:clamp(36px,3.6vw,48px)}
.formule-an{margin-top:12px}
.formule ul{margin:clamp(32px,3.4vw,44px) 0 clamp(40px,4vw,56px);gap:16px}
.recoit > div{padding:clamp(26px,3vw,40px) 0}
.relief:not(.relief-dessus){display:none}
.relief-dessus{filter:drop-shadow(0 1.4px 0 #A9A499) drop-shadow(0 1.4px 0 #5E5D5C) drop-shadow(0 4px 5px rgba(0,0,0,.6))}
.relief-dessus{fill:currentColor}

/* Vingt-huitième passe (12/11) : « 0 € pour 7 jours, en avant » : une pastille dorée au-dessus du prix des deux formules
   d'essai ; le cabinet, sur devis, n'en a pas (sa phrase prend la même hauteur pour garder les prix alignés). */
.formule-essai{align-self:flex-start;margin-top:clamp(22px,2.2vw,28px);padding:7px 14px;border:1px solid var(--gold-line);border-radius:999px;background:rgba(197,165,114,.1);font-size:var(--t-petit);color:var(--text)}
.formule-essai b{font-weight:600;color:var(--gold-bright)}
.formule-essai + .prix{margin-top:clamp(18px,1.8vw,24px)}
.formule:not(:has(.formule-essai)) .prix{margin-top:calc(clamp(22px,2.2vw,28px) + 2.4em + clamp(18px,1.8vw,24px))}
@media (max-width:900px){.formule:not(:has(.formule-essai)) .prix{margin-top:clamp(36px,3.6vw,48px)}}

/* Vingt-neuvième passe (12/11) : l'essai à la place du prix : « 0 € pendant 7 jours » en grand, le prix en petit dessous.
   La pastille de la passe précédente part. */
.formule-essai{display:none}
.formule .prix,.formule:not(:has(.formule-essai)) .prix{margin-top:clamp(36px,3.6vw,48px)}
.formule-puis{margin-top:14px;font-size:clamp(17px,1.3vw,19px);color:var(--text)}
.formule-puis + .formule-an{margin-top:6px}

/* Trentième passe (12/11) : « 0 € » en or, comme dans la pastille d'avant. */
.prix-essai b{color:var(--gold-bright)}

/* Trente-et-unième passe (12/11) : titres des formules en deux voix, comme la charte : gras blanc, puis italique doré. */
.formule-titre{font-size:clamp(26px,2.4vw,32px);font-weight:600;line-height:1.1;letter-spacing:-.025em;color:var(--text)}
.formule-titre em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold);letter-spacing:-.012em;font-size:1.04em}

/* Trente-deuxième passe (12/11) : un seul titre par formule ; deux lignes réservées pour garder les prix alignés. */
.formule-titre{min-height:2.2em;text-wrap:balance}
@media (max-width:900px){.formule-titre{min-height:0}}
.formule-titre em{display:block}

/* Trente-cinquième passe (12/11) : « les chiffres, leur police n'est plus la même » : le prix prend la voix des
   chiffres de la page (.comptes : Source Serif 4 italique), « 0 € » en or, « Sur devis » en ivoire. */
.prix b{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;font-size:clamp(50px,5vw,64px)}
.prix-essai b{color:var(--gold-bright)}

/* Trente-septième passe (12/11) : « encore trop serré, trop collé en haut, entre les sections » :
   le titre descend, le texte du haut respire, les volets s'éloignent du haut, chaque section prend plus d'air. */
:root{--bloc:clamp(150px,17vw,260px);--tete:clamp(72px,7.5vw,120px)}
.hero{padding-top:clamp(190px,25vh,290px)}
.hero-lede{margin-top:clamp(34px,3.4vw,48px)}
.hero-cta{margin-top:clamp(46px,4.6vw,64px)}
.hero-note{margin-top:26px}
#acces.suite{padding-top:clamp(170px,18vw,280px)}
@media (max-width:900px){:root{--bloc:120px;--tete:56px}.hero{padding-top:150px}#acces.suite{padding-top:120px}}

/* Trente-huitième passe (12/11) : « trop collé vers le haut » : l’en-tête descend, le haut de page se centre dans le premier écran. */
@media (min-width:901px){header{padding:30px 0}header.scrolled{padding:14px 0}.hero{min-height:100vh;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:120px 0 16px}#acces.suite{padding-top:clamp(90px,9vw,150px)}}
/* 13/11 : « trop collé sur le haut » en fenêtre étroite : le haut de page se centre aussi dans le premier écran. */
@media (max-width:900px){.hero{min-height:100vh;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:96px 0 24px}}

/* 14/11 (Aitor : « la bulle autour de Dans votre IA et Dans notre chat, ça sert à rien, c’est horrible ») : les deux volets sans cadre ni fond, posés sur la page. */
.volet,.volet + .volet{border:0;border-radius:0;background:none;padding:0;overflow:visible}

/* 14/11 (Aitor : « une carte avec le nom de l’article et le début, et à côté, quand on défile, une branche qui arrive et le relie à des JP, une autre à d’autres… et qui montre qu’il est modifié, arrivé en bas ») : l’article et ses renvois, reliés en défilant. Données lues dans IFG le 14/11/2026. */
.arbre-grille{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,120px);margin-top:clamp(48px,5vw,72px)}
.arbre-traits{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.arbre-traits path{fill:none;stroke:var(--gold-line);stroke-width:1.25}
.arbre-traits path.on{stroke:var(--gold)}
.arbre-carte-col{position:relative}
.arbre-carte{position:sticky;top:calc(50vh - 170px);padding:clamp(26px,2.6vw,36px);border:1px solid var(--gold-line);border-radius:20px;background:var(--ink)}
.arbre-carte h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,2.6vw,36px);line-height:1.1;color:var(--gold-bright)}
.arbre-statut{margin-top:10px;font-size:15px;color:var(--text-2)}
.arbre-texte{margin-top:18px;font-family:var(--serif);font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--text);text-wrap:pretty}
.arbre-lien{display:inline-block;margin-top:16px;font-size:15px;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-line)}
.arbre-lien:hover{color:var(--gold-bright)}
.arbre-branches{list-style:none;margin:0;padding:12vh 0 18vh;display:flex;flex-direction:column;gap:26vh}
.arbre-noeud{position:relative;padding-left:4px;opacity:.18;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.arbre-noeud.on{opacity:1;transform:none}
.arbre-noeud h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(24px,2.1vw,30px);line-height:1.15;color:var(--text)}
.arbre-ref{margin-top:8px;font-weight:600;color:var(--text)}
.arbre-noeud p:not(.arbre-ref){margin-top:6px;max-width:30em;color:var(--text-2);text-wrap:pretty}
.arbre-modif h3{color:var(--gold-bright)}
@media (max-width:900px){
  .arbre-grille{grid-template-columns:1fr;gap:0}
  .arbre-carte{position:relative;top:auto}
  .arbre-branches{padding:40px 0 0 34px;gap:44px}
}
@media (prefers-reduced-motion:reduce){.arbre-noeud{opacity:1;transform:none;transition:none}}
/* 14/11 (Aitor : « on doit mettre notre nombre de sources ») : ce que le MCP sert, compté au tableau central
   (docs/recensement.md, 14/11 : 1 988 274 textes, 5 065 527 articles, 6 198 942 versions servis), jamais le Store entier.
   L’écran ChatGPT garde son blanc ; ses liens ne sont plus bleus (« le bleu fait bizarre ») ; la carte IFG actuelle, pliée. */
.hero-chiffres{margin-top:clamp(40px,4.4vw,64px);text-align:center;font-size:15px;line-height:1.4;color:var(--text-2)}
.hero-chiffres b{display:block;margin-bottom:6px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,3.6vw,50px);line-height:1.05;color:var(--gold-bright)}
/* 14/11 (Aitor : « pas assez stylisé, pas assez impressionnant, on ne voit qu'un exemple » ; « ça doit remplacer
   Ce que votre IA reçoit, sinon ça se répète ») : chaque branche dit son nombre réel dans IFG et quelques vrais titres ;
   la carte compte les textes reliés à mesure qu'on défile. */
.arbre-sur{font-size:13px;letter-spacing:0;color:var(--text-dim);margin-bottom:10px}
.arbre-compte{margin-top:26px;padding-top:20px;border-top:1px solid var(--gold-line);display:flex;align-items:baseline;gap:12px;color:var(--text-2);font-size:15px}
.arbre-total{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(44px,4.4vw,64px);line-height:1;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.arbre-nb{margin-top:6px;display:flex;align-items:baseline;gap:12px;color:var(--text-2);font-size:16px}
.arbre-nb b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(40px,3.8vw,56px);line-height:1;color:var(--gold)}
.arbre-noeud h3{font-size:clamp(20px,1.7vw,24px);color:var(--text)}
.arbre-liste{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;max-width:34em}
.arbre-liste li{display:grid;gap:2px;padding:12px 16px;border:1px solid var(--cadre);border-radius:12px;background:rgba(255,255,255,.02);color:var(--text-2);font-size:15px;line-height:1.45}
.arbre-liste span{font-weight:600;color:var(--text)}
.arbre-noeud .arbre-plus{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--gold)}
.arbre-modif .arbre-nb b{color:var(--gold-bright)}
.arbre-branches{gap:22vh}
@media (max-width:900px){.arbre-branches{gap:56px}.arbre-carte .arbre-texte{font-size:16px}}
/* 14/11 (Aitor : « ça doit zoomer sur celui qui arrive ») : la branche au centre de l'écran s'agrandit et prend
   toute la lumière, son trait s'épaissit ; celles déjà passées restent visibles, en retrait. */
.arbre-noeud{transform-origin:0 50%;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.arbre-noeud.on{opacity:.38;transform:scale(.97)}
.arbre-noeud.on.actif{opacity:1;transform:scale(1.06)}
.arbre-traits path{transition:stroke-dashoffset .9s ease,stroke-width .5s ease,stroke .5s ease}
.arbre-traits path.on{stroke:var(--gold-line)}
.arbre-traits path.actif{stroke:var(--gold-bright);stroke-width:2.25}
@media (max-width:900px){.arbre-noeud.on.actif{transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.arbre-noeud.on,.arbre-noeud.on.actif{opacity:1;transform:none}}
.arbre-nb-mot{flex-wrap:wrap}
.arbre-nb-mot b{font-size:clamp(28px,2.5vw,38px);white-space:nowrap}
/* 14/11 (Aitor : « pour chaque pays, en fonction d'où l'utilisateur consulte » ; « travaille l'animation, c'est trop
   collé ») : la ligne des pays ; les traits partent de points étalés sur le bord de la carte (plus de gerbe serrée) ;
   branches plus espacées ; zoom plus doux. */
.arbre-branches{gap:34vh;padding:18vh 0 24vh}
.arbre-noeud{transition:opacity .8s ease,transform .9s cubic-bezier(.22,.8,.24,1)}
.arbre-noeud.on{opacity:.32;transform:scale(.98)}
.arbre-noeud.on.actif{opacity:1;transform:scale(1.035)}
.arbre-traits path{stroke-width:1;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1),stroke-width .6s ease,stroke .6s ease,opacity .6s ease}
.arbre-traits path.on{stroke:var(--gold-line);opacity:.55}
.arbre-traits path.actif{stroke:var(--gold-bright);stroke-width:1.75;opacity:1}
@media (max-width:900px){.arbre-branches{gap:72px;padding:48px 0 0 34px}.arbre-noeud.on{opacity:.5;transform:none}.arbre-noeud.on.actif{opacity:1;transform:none}}
/* L’article en code annoté : la carte reste à l’écran ; au défilement, chaque renvoi arrive dans la marge, relié à la carte
   par un trait ; citation soulignée. Le renvoi apparaît dès qu’il entre à l’écran, sans délai (Aitor, 14/11 : « ça s’affiche
   trop tard, on n’a pas le temps de lire ») : lisible sur deux fois plus de défilement. */
.annote .arbre-branches{display:none}
.annote .arbre-grille{align-items:start}
.annote .arbre-carte-col{align-self:stretch}
.annote .arbre-carte{position:sticky;top:calc(50vh - 250px)}
.souligne{background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0% 1px;padding-bottom:2px;transition:background-size 3.2s cubic-bezier(.4,0,.2,1) .2s}
.souligne-on .souligne{background-size:100% 1px}
.arbre-marge{text-align:left;--ecart:clamp(48px,7vw,120px);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7vh;padding:12vh 0 28vh}
.renvoi{position:relative;padding:2px 0 2px 22px;border-left:1px solid transparent;transition:border-color .5s ease}
.renvoi > details,.renvoi > .renvoi-tete{opacity:0;transform:translateX(10px);transition:opacity .45s ease-out,transform .7s cubic-bezier(.2,.7,.2,1)}
.renvoi.vu{border-left-color:var(--gold-line)}
.renvoi.vu > details,.renvoi.vu > .renvoi-tete{opacity:1;transform:none}
.renvoi summary{display:block;list-style:none;cursor:pointer}
.renvoi summary::-webkit-details-marker{display:none}
.renvoi-tete b,.renvoi summary b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(17px,1.4vw,19px);line-height:1.28;color:var(--text);transition:color .3s}
.renvoi-tete span,.renvoi summary span{display:block;margin-top:1px;font-size:13.5px;color:var(--text-dim)}
.renvoi summary:hover b,.renvoi details[open] b,.renvoi.actif summary b{color:var(--gold-bright)}
.renvoi.actif .renvoi-tete b{color:var(--gold-bright)}
.renvoi-corps{margin:8px 0 10px;font-size:15px}
.renvoi .renvoi-corps > p{margin:0 0 6px;max-width:34em;font-size:15px;line-height:1.55;color:var(--text-2)}
.renvoi-corps .arbre-liste{margin-top:10px;gap:8px}
.renvoi-corps .arbre-liste li{padding:9px 13px;font-size:14px}
.renvoi .renvoi-corps .arbre-plus{margin-top:8px;font-family:var(--serif);font-style:italic;color:var(--gold)}
@media (max-width:900px){.annote .arbre-grille{gap:32px}.renvoi{margin-left:0!important}.annote .arbre-carte{position:relative;top:auto}.annote .arbre-traits{display:none}.arbre-marge{gap:14px;padding:0}.renvoi.vu:not(.actif) > details{opacity:1}}


/* Le volume servi (14/11, Aitor : « les lois doivent rentrer dedans », « une continuité avec la section d'avant ») :
   en sortant du haut de page, de vraies fiches (relevées sur /mcp/versions) montent du bas en courbe et entrent dans
   le nombre de versions servies, qui s'allume à chaque entrée ; blanc gras puis italique doré. */
.compte{position:relative}
.compte-scene{display:grid;place-items:center;padding:var(--bloc) 0 0}
.compte-fiches{display:none}
.compte-anime{height:260vh;margin-top:-30vh}
.compte-anime .compte-scene{position:sticky;top:0;height:100vh;padding:0;overflow:hidden}
.compte-anime .compte-fiches{display:block;position:absolute;inset:0;pointer-events:none}
.fiche{position:absolute;left:50%;top:50%;width:260px;margin:-46px 0 0 -130px;padding:16px 18px;border:1px solid var(--gold-line);border-radius:14px;background:var(--ink-2);opacity:0;will-change:transform,opacity;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.fiche span{display:block;font-size:13px;color:var(--text-dim)}
.fiche b{display:block;margin-top:4px;font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.25;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fiche i{display:block;margin-top:6px;font-style:normal;font-size:14px;color:var(--gold)}
.compte-titre{position:relative;z-index:2;margin:0;max-width:none;text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,3.8vw,56px);line-height:1.1;color:var(--gold)}
.compte-titre b{display:block;margin-bottom:clamp(8px,1vw,14px);font-family:var(--sans);font-style:normal;font-weight:700;font-size:clamp(64px,11.5vw,176px);line-height:1;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;transition:color .5s,text-shadow .5s}
.compte-titre .roue{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.compte-titre .rouleau{display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.compte-titre .rouleau span{display:block;height:1em;line-height:1}
.compte-titre .compte-sep{display:inline-block;width:.24em}
@media (max-width:760px){.fiche{width:200px;margin:-42px 0 0 -100px;padding:12px 14px}.fiche b{font-size:15px}}
.compte-titre .roue,.compte-titre .compte-sep{max-width:1em;transition:opacity .3s,max-width .3s}
.compte-titre .muet{opacity:0;max-width:0}
/* 14/11 (Aitor : « l'article doit sortir du chiffre », « une page en motion, une suite qui construit la page ») : sur grand
   écran, le titre de l'article passe à droite de la carte ; la colonne de la carte remonte sous la scène du volume, si bien
   que la carte est déjà collée à mi-écran quand elle sort du chiffre, et y reste. */
.compte-titre{transform-origin:50% 50%}
.arbre .arbre-grille > .tete{text-align:left}
.arbre .arbre-grille > .tete h2,.arbre .arbre-grille > .tete .chapo{margin-left:0;text-align:left}
@media (min-width:901px){
  .annote .arbre-grille{grid-template-rows:auto 1fr}
  .annote .arbre-grille > .tete{grid-column:2;grid-row:1}
  .annote .arbre-carte-col{grid-column:1;grid-row:1 / span 2;margin-top:calc(-140vh - 280px)}
  .annote .arbre-marge{grid-column:2;grid-row:2}
  .annote .arbre-carte{will-change:transform,opacity}
  #volume{position:relative;z-index:0}
  #produit{position:relative;z-index:1;padding-top:0}
  #produit .arbre-grille{margin-top:0}
}

/* Le globe de couverture (14/11, Aitor : « la map c'est pas terrible ») : collé à l'écran, il tourne au défilement des
   États-Unis vers l'Europe ; pays servis en or, partenaires conventionnels de la France teintés ; titre bicolore. */
.globe{height:320vh;padding-top:0}
.globe-scene{position:sticky;top:0;height:100vh;display:grid;align-items:center;overflow:hidden}
.globe-scene > .globe-vue{position:absolute;inset:0;height:100%;-webkit-mask-image:radial-gradient(ellipse 72% 100% at 66% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 72% 100% at 66% 50%,#000 45%,transparent 100%)}
.globe-texte{position:relative;z-index:2}
.globe-grille{position:relative;z-index:2;pointer-events:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;height:100%}
.globe-texte h2{text-align:left;margin:0;max-width:none;font-size:clamp(40px,5vw,76px);line-height:1.02}
.globe-texte h2 b{font-weight:700;color:var(--text)}
.globe-texte h2 em{display:block}
.globe-texte .chapo{margin:clamp(18px,2vw,28px) 0 0;text-align:left;max-width:26em}
.globe-texte .chapo b{font-weight:600;color:var(--text)}
.globe-vue{position:relative;height:min(92vh,900px);align-self:center}
.globe-toile{display:block;width:100%;height:100%;cursor:default}
.globe-etiquettes{position:absolute;inset:0;pointer-events:none}
.globe-etiquette{position:absolute;left:0;top:0;opacity:0;transition:opacity .25s;will-change:transform,opacity}
.globe-etiquette i{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 8px 1px rgba(229,197,142,.45)}
.globe-etiquette span{position:absolute;left:12px;top:-20px;white-space:nowrap;padding:6px 11px;border-radius:8px;background:rgba(5,10,20,.8);box-shadow:0 8px 24px rgba(5,10,20,.35)}
.globe-etiquette.gauche span{left:auto;right:12px}
.globe-etiquette b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;line-height:1.2;color:var(--text)}
.globe-etiquette em{display:block;font-style:normal;font-size:12px;color:var(--gold)}
.globe-bulle{position:absolute;left:0;top:0;pointer-events:none;padding:10px 14px;border-radius:10px;background:rgba(5,10,20,.9);box-shadow:0 10px 30px rgba(5,10,20,.4);max-width:280px}
.globe-bulle b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:var(--text)}
.globe-bulle span{display:block;margin-top:2px;font-size:13px;color:var(--text-dim)}
@media (max-width:900px){
  .globe{height:260vh}
  .globe-grille{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:center;padding-top:72px}
  .globe-texte h2{font-size:clamp(32px,8vw,44px)}
  .globe-scene > .globe-vue{-webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 62%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 90% 60% at 50% 62%,#000 60%,transparent 100%)}
  .globe-grille{align-content:start}
  .globe-etiquette span{padding:4px 8px}.globe-etiquette b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.globe{height:auto}.globe-scene{position:relative;height:auto;padding:var(--bloc) 0}}
.globe-texte{pointer-events:auto}
.globe-etapes{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;display:grid}
.globe-etapes li{grid-area:1/1;font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.6vw,38px);line-height:1.1;color:var(--gold-bright);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s}
.globe-etapes li.actif{opacity:1;transform:none}

/* L'enchaînement (14/11, Aitor : « chaque section doit venir de la précédente », « une page en motion qui vit ») : posé
   par public/js/landing-enchainement.js (classe enchaine), jamais sans mouvement autorisé. Les réponses des deux volets
   se couchent dans la première couche du fonds ; le globe naît du bloc IFG, par-dessus la fin de la pile ; la
   confidentialité, les formules puis les questions glissent chacune sur la précédente, qui recule et s'assombrit. */
.relais-clone{position:fixed;margin:0;z-index:30;pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity;overflow:hidden}
.enchaine #couverture{position:relative;z-index:2;margin-top:-200vh;height:787vh}
/* Le globe naît du point du « i » sans que la pile bouge (Aitor, 14/11 : « on ne doit pas zoomer dessus ») : la section du
   fonds garde sa scène collée un écran de plus (--queue, en écrans, lu par le script de la pile, qui finit de poser le bloc
   avant), et le globe, remonté d'autant, naît pendant cet écran. */
.enchaine .pile-animee{--queue:1;height:calc(200vh + 7.45 * 78vh)}
/* 14/11 soir (Aitor, sur le logo posé : « le scroll est trop dur ») : chaque couche et chaque niveau tiennent 0,78 écran ;
   le bloc fini ne retient plus le lecteur 0,7 écran sans rien montrer (0,2), la boule part dès le premier cran, et la
   scène rattrape le défilement (150 ms) au lieu de le suivre au pixel. Avant :
   chaque couche de la pile et chaque niveau du globe tiennent 0,85 écran de défilement (Aitor, 14/11 : « le scroll passe
   trop facilement ») : un lancer au pavé tactile (800 px) en passait un et demi à près de trois, il en passe un. Le
   téléphone a la même course. */
.enchaine #confidentialite{margin-top:-100vh}
.enchaine #confidentialite,.enchaine #offre{position:sticky;top:var(--colle,0px)}
.enchaine #confidentialite,.enchaine #offre,.enchaine #faq{display:flow-root;background:var(--ink);border-radius:32px 32px 0 0;box-shadow:0 -30px 60px -28px rgba(0,0,0,.75)}
.enchaine #confidentialite{z-index:3}
.enchaine #offre{z-index:4}
.enchaine #faq{position:relative;z-index:5;padding-bottom:var(--bloc)}
/* Confidentialité puis Tarif : chaque carte remplit l'écran et y reste posée une demi-page avant que la suivante la couvre
   (Aitor, 14/11, capture de Confidentialité : le titre restait seul en haut, les colonnes déjà sous le tarif). Plus basse
   que l'écran et sans marge en bas, la carte de Confidentialité voyait le tarif entrer dès qu'elle se posait ; son ombre
   mangeait la dernière ligne. La marge de tenue passe sous la carte collée, qui couvre l'écran : rien n'y paraît. */
.enchaine #confidentialite,.enchaine #offre{min-height:100vh;margin-bottom:50vh}
.enchaine #confidentialite{display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:48px}
.enchaine .bande.final{position:relative;z-index:6;margin-top:0}
.couvrable{transform-origin:50% 0;will-change:transform}
.couvrable > .voile{position:absolute;inset:0;z-index:10;border-radius:inherit;background:#02050B;opacity:0;pointer-events:none;will-change:opacity}
/* La scène de la pile est une couche à part : elle s'efface sous le globe naissant sans être redessinée. */
.enchaine .pile-animee .pile-scene{will-change:opacity}
@media (max-width:900px){
  .enchaine #confidentialite,.enchaine #offre,.enchaine #faq{border-radius:22px 22px 0 0}
}
/* Téléphone : aucune carte ne sort du chiffre ; la scène du volume se décolle dès les fiches entrées (plus d'écran vide). */
@media (max-width:900px){.compte-anime{height:215vh}}
/* Téléphone et fenêtre étroite, comme à l'ordinateur (Aitor, 14/11 : « sur le téléphone ça doit être comme sur
   l'ordinateur, au millimètre près ») : la carte de l'article sort du chiffre et se colle en haut de l'écran ; le titre,
   puis les renvois montent dessous, reliés à la carte par un filet ; la carte cède ensuite sa place à « Dans votre IA ».
   La carte, le titre et les renvois partagent la même case de la grille ; --carte-h (hauteur de la carte) est posé par
   landing-enchainement.js. Le titre entre par le bas quand la carte a fini de sortir du chiffre. Sur un écran bas
   (téléphone tenu à l'horizontale), la carte prendrait tout l'écran : l'article y reste une liste. */
@media (max-width:900px) and (min-height:560px){
  .enchaine #volume{position:relative;z-index:0}
  .enchaine #produit{position:relative;z-index:1;padding-top:0;margin-top:calc(-13vh - var(--carte-h,340px) - 32px)}
  .enchaine #produit .arbre-grille{margin-top:0}
  .enchaine .annote .arbre-grille{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:0}
  .enchaine .annote .arbre-carte-col{grid-column:1;grid-row:1 / span 2;align-self:stretch;position:relative;z-index:2;pointer-events:none;margin-top:calc(-135vh + var(--carte-h,340px) + 100px)}
  /* 14/11/2026, mesuré à 375×812 : la carte se collait à 76 px sous un en-tête de 63 px, et les renvois reparaissaient
     dans les 13 px entre les deux ; le titre n'entrait à l'écran que 293 px de défilement après le collage (35vh + 8),
     d'où un demi-écran vide sous la carte. La carte se colle sous l'en-tête, le titre entre 20vh plus tôt, quand le
     nombre a fini de s'effacer. */
  .enchaine .annote .arbre-carte{position:sticky;top:64px;pointer-events:auto;will-change:transform,opacity;box-shadow:0 18px 30px -12px rgba(0,0,0,.85)}
  .enchaine .annote .arbre-grille > .tete{grid-column:1;grid-row:1;padding-top:calc(var(--carte-h,340px) + 32px - 20vh)}
  .enchaine .annote .arbre-marge{grid-column:1;grid-row:2;padding:28px 0 14vh 22px}
  .enchaine .annote .arbre-traits{display:block}
}
/* Fluidité au téléphone : l'en-tête, déjà presque opaque, n'y floute plus ce qui passe dessous (flou recalculé à chaque
   image). */
@media (max-width:900px){header.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(5,10,20)}}
/* Le bloc, agrandi et recentré à la fin de la pile, reste coupé aux bords de sa section (sans cesser d'être collé à
   l'écran) : il n'étend la page ni en largeur ni en hauteur. */
.enchaine #fonds{overflow:clip}
/* Écran bas (téléphone à l'horizontale, 14/11) : le bloc final, plus petit et posé plus bas, laisse sa place au titre
   « Tout cela, c'est IFG », qui le chevauchait. Partout, ce titre ne paraît qu'une fois le bloc arrivé (règle de
   .pile-final) : pendant la glissade, la pointe du bloc touchait « c'est » à l'ordinateur. */
@media (max-height:560px){
  .pile{--cote:min(240px,28vh)}
  .pile-final{top:calc(64px + 2vh)}
}
/* La citation de la carte n'est plus soulignée (14/11) : cinq traits dorés entre ses lignes, que le lecteur prenait pour des
   liens ; la règle d'Aitor sur le chat vaut ici aussi, aucun trait entre deux lignes de texte. */
.annote .souligne{background:none;padding-bottom:0}
/* Aitor, 14/11 : « la phrase doit être plus grosse que la carte au début et la carte plus grosse ensuite », « elle est trop
   collée en haut ». À l'ordinateur, le titre de l'article en grand ; la carte collée au milieu de l'écran, jamais à moins de
   96 px du haut ; sa taille suit le défilement (public/js/landing-enchainement.js, « grandir »). */
/* Aitor, 14/11 (capture des renvois en quinconce, quatre filets de longueurs inégales) : « ça aussi c'est mal fait, cherche
   un truc mieux ». À l'ordinateur, les renvois se rangent sur un seul rail vertical ; la carte n'a plus qu'un filet, vers le
   renvoi qu'on lit, marqué sur le rail ; les autres s'estompent ; chaque famille (jurisprudence, doctrine…) ouvre un groupe. */
@media (min-width:901px){
  .annote .arbre-marge{padding:0;margin:12vh 0 28vh;border-left:1px solid rgba(197,165,114,.28)}
  .annote .renvoi{padding-left:30px;border-left:0}
  .annote .renvoi::before{content:"";position:absolute;left:-2px;top:1px;bottom:1px;width:3px;border-radius:2px;background:var(--gold-bright);opacity:0;transform:scaleY(.4);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
  .annote .renvoi.actif::before{opacity:1;transform:none}
  .annote .renvoi-famille:not(:first-child){margin-top:5vh}
  .annote .renvoi.vu > details,.annote .renvoi.vu > .renvoi-tete{opacity:.6;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
  .annote .renvoi.vu.actif > details,.annote .renvoi.vu.actif > .renvoi-tete{opacity:1;transform:translateX(6px)}
  .annote .renvoi.vu:hover > details,.annote .renvoi.vu > details[open]{opacity:1}
  /* Un filet ne se voit que pour le renvoi lu : sans cela, chaque filet se montrait le temps de son fondu. */
  .annote .arbre-traits path{opacity:0}
  .annote .arbre-traits path.actif{opacity:1}
}
@media (min-width:901px){
  .annote .arbre-grille > .tete h2{font-size:clamp(48px,5.6vw,92px);line-height:1.02}
  .annote .arbre-carte{top:max(96px,calc((100vh - var(--carte-h,400px)) / 2))}
}
/* Les deux volets se posent (Aitor, 14/11 soir, capture des volets : « ça scroll trop facile ici ») : à l'ordinateur, quand ils
   tiennent dans l'écran, ils y restent collés --tenue-volets de défilement (posé par landing-enchainement.js, « tenir »)
   avant que leurs réponses se couchent dans le fonds ; avant, ils ne s'arrêtaient jamais. */
@media (min-width:901px){
  .enchaine #acces::after{content:"";display:block;height:var(--tenue-volets,0px)}
  .enchaine #acces > .wrap{position:sticky;top:var(--haut-volets,96px)}
}

/* Haut de page (Aitor, 14/11 soir : « ça me fait rien quand j’arrive dessus, ça m’évoque rien, 0 sentiment ») : sous le titre
   agrandi, la Terre se lève, ses terres et en or les pays servis (hero-horizon.js), le même globe que celui qui clôt la page.
   La sphère, sa lueur et le fondu sont ici, visibles sans script ; les lignes du haut montent l’une après l’autre. */
.hero .wrap{z-index:1}
.hero .tete{max-width:1000px;width:100%}
.hero h1{font-size:clamp(38px,min(5.4vw,8.6vh),80px);line-height:1.05;letter-spacing:-.022em}
.hero .hero-lede{margin-top:clamp(20px,2.6vh,30px);max-width:37em;font-size:clamp(17px,1.4vw,20px);line-height:1.55}
.hero .hero-cta{margin-top:clamp(26px,3.6vh,42px)}
.hero .hero-note{margin-top:18px}
.hero{justify-content:flex-start;padding-bottom:0}
.horizon{position:relative;flex:none;height:clamp(160px,25vh,250px);pointer-events:none;will-change:transform,opacity}
.horizon-terre{position:absolute;inset:0;clip-path:inset(-220px 0 0 0);--R:clamp(620px,80vw,1500px)}
/* 14/11, Aitor sur la Terre du haut de page : « ça fait cheap, le reflet » : plus de halo doré ni de bord bleuté ; une sphère presque noire, un liseré d'or d'un pixel qui s'efface vers les côtés. */
.horizon-terre i{position:absolute;left:50%;top:16px;width:calc(2 * var(--R));height:calc(2 * var(--R));margin-left:calc(-1 * var(--R));box-sizing:border-box;border-radius:50%;background:#070C18}
.horizon-terre i::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(197,165,114,.26);-webkit-mask-image:linear-gradient(90deg,transparent 24%,#000 44%,#000 56%,transparent 76%);mask-image:linear-gradient(90deg,transparent 24%,#000 44%,#000 56%,transparent 76%)}
.horizon-terre canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.horizon.pret canvas{opacity:1}
.horizon-terre::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,10,20,0) 52%,#050A14 99%)}
/* Le texte se pose au milieu de l'espace entre le menu et l'horizon (Aitor, 14/11 : « c'est trop haut et pas classe ») :
   titre moins gros, de l'air au-dessus, jamais collé au menu ; il suit aussi la hauteur de l'écran. */
@media (min-width:901px){.hero{padding-top:100px}.hero .wrap{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;width:100%;box-sizing:border-box}}
@media (max-width:900px){.hero{padding-bottom:0}.horizon{flex:1 1 150px;height:auto;min-height:150px;margin-top:36px}}
@media (prefers-reduced-motion:no-preference){
  @keyframes hero-monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes horizon-leve{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
  .hero h1,.hero .hero-lede,.hero .hero-cta,.hero .hero-note{animation:hero-monte 1s cubic-bezier(.2,.8,.2,1) both}
  .hero h1 em{display:inline-block;animation:hero-monte 1s cubic-bezier(.2,.8,.2,1) .14s both}
  .hero .hero-lede{animation-delay:.22s}
  .hero .hero-cta{animation-delay:.34s}
  .hero .hero-note{animation-delay:.44s}
  .horizon-terre{animation:horizon-leve 2s cubic-bezier(.16,.8,.2,1) .2s both}
}