/* Pages secondaires du site : chargée APRÈS landing.css, dont elle reprend les jetons du
   design system (--fg, --primary, --rule, --shadow-hard-*…), la barre, les boutons et les
   polices. Écrite à la main : l'import de la landing ne la touche pas.
   - .legal : les mentions légales, écrites à la main.
   - .page  : les pages dédiées produites par tools/generer-pages.py (ADR-0004).
   Les noms de classes ne recoupent pas ceux de la landing (.rv, .sec, .fil y existent). */

.nav a.brand{text-decoration:none}

/* ═══ Mentions légales ═══════════════════════════════════════════════════ */

.legal{padding:48px 0 64px;border-bottom:2px solid var(--ink)}
.legal .wrap{display:block;max-width:760px}
.legal h1{font-size:clamp(30px,3.4vw,44px);margin-bottom:8px}
.legal h2{font-size:21px;margin:36px 0 10px}
.legal p,.legal li{color:var(--fg-2);max-width:68ch}
.legal p{margin:0 0 12px}
.legal ul{margin:0;padding-left:20px}
.legal li{margin:4px 0}
.legal b{color:var(--fg)}
.legal a{font-size:inherit;color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--primary-hover)}

/* ═══ Pages dédiées : teinte du domaine ═══════════════════════════════════ */
/* Teintes du DS (oklch .82 .1 h) ; on en tire une version pâle (fonds) et une foncée
   (texte et traits sur crème, contraste AA). */

.page{--h:150}
.t-sales{--h:205}.t-rh{--h:40}.t-marketing{--h:330}.t-produit{--h:262}.t-dev{--h:160}.t-data{--h:120}
.page,.teinte{--acc:oklch(.82 .1 var(--h));--acc-pale:oklch(.955 .03 var(--h));--acc-fonce:oklch(.42 .095 var(--h))}
.t-jungle{--acc:var(--jungle-300);--acc-pale:var(--jungle-50);--acc-fonce:var(--jungle-800)}

.page main{display:block}
.page h3{font-size:17px;line-height:1.3;color:var(--fg)}
.page em{font-style:normal}

.evitement{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--cream);padding:8px 14px;border-radius:var(--radius);font-weight:700;text-decoration:none}
.evitement:focus{top:12px}

.page .ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ─── Barre : menu « Agents » ─── */
.nav-pages{align-items:center}
.nav-pages a{text-decoration:none}
.menu{position:relative;display:flex;align-items:center;height:62px}
.menu>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.menu-liste{position:absolute;top:56px;left:-14px;min-width:250px;margin:0;padding:8px;list-style:none;background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard-md);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.menu:hover .menu-liste,.menu:focus-within .menu-liste{opacity:1;visibility:visible;transform:none}
.nav .menu-liste a{display:block;padding:9px 12px;border-radius:3px;font-size:14px;color:var(--fg)}
.nav .menu-liste a:hover,.nav .menu-liste a[aria-current]{background:var(--acc-pale);color:var(--acc-fonce)}

/* ─── Libellés ─── */
.surtitre{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13.5px;font-weight:700;color:var(--acc-fonce);letter-spacing:.01em}
.surtitre::before{content:"";width:11px;height:11px;flex:none;background:var(--acc);border:2px solid var(--ink);border-radius:2px;transform:rotate(45deg)}
.intro{margin-top:14px;font-size:17px;line-height:1.6;color:var(--fg-2);max-width:62ch}

/* ═══ Hero ═══════════════════════════════════════════════════════════════ */

.ph{position:relative;overflow:hidden;padding:26px 0 0;border-bottom:2px solid var(--ink)}
.ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 11px,color-mix(in oklab,var(--ink) 5%,transparent) 11px 12px);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%);mask-image:linear-gradient(90deg,transparent 30%,#000 75%);pointer-events:none}
.ph .wrap{position:relative}

.ariane ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--fg-3)}
.ariane li+li::before{content:"/";margin-right:6px;color:var(--rule)}
.ariane a{color:var(--fg-3);text-decoration:none}
.ariane a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.ariane [aria-current]{color:var(--fg-2);font-weight:600}

.ph-grille{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;padding:28px 0 36px}
.ph h1{font-size:clamp(36px,4.1vw,58px);line-height:1.04;letter-spacing:-.015em}
.ph h1 em{background:linear-gradient(var(--acc),var(--acc)) no-repeat 0 90%/100% 34%;animation:surligne 1s .5s var(--ease) both;padding:0 .04em}
@keyframes surligne{from{background-size:0 34%}}
.chapo{margin:22px 0 0;font-size:18.5px;line-height:1.6;color:var(--fg-2);max-width:56ch}
.ph-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.ph-texte>*{animation:monte .8s var(--ease) both}
.ph-texte>:nth-child(2){animation-delay:.06s}
.ph-texte>:nth-child(3){animation-delay:.12s}
.ph-texte>:nth-child(4){animation-delay:.18s}
@keyframes monte{from{opacity:0;transform:translateY(18px)}}

.ph-visuel{position:relative;margin:0;aspect-ratio:3/2.15;display:grid;place-items:center}
.ph-disque{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;background:var(--acc-pale);border:2px solid var(--ink);box-shadow:var(--shadow-hard-lg);animation:disque 1.1s var(--ease) both}
.ph-disque::after{content:"";position:absolute;inset:7%;border-radius:50%;border:2px dashed color-mix(in oklab,var(--acc-fonce) 55%,transparent);animation:tourne 60s linear infinite}
@keyframes disque{from{transform:scale(.55) rotate(-25deg);opacity:0}}
@keyframes tourne{to{transform:rotate(360deg)}}
.ph-visuel img{position:relative;width:118%;max-width:none;height:auto;margin:0 -9%;animation:illus 1.1s .15s var(--ease) both}
@keyframes illus{from{opacity:0;transform:translateY(28px) scale(.96)}}

.bulle{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;padding:9px 13px;background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard-md);font-size:13px;line-height:1.3;color:var(--fg);white-space:nowrap;animation:bulle .7s var(--ease) both,flotte 6s ease-in-out infinite}
.bulle b{font-size:11.5px;font-weight:700;color:var(--acc-fonce)}
.bulle-1{top:6%;left:-2%;animation-delay:.7s,1.4s}
.bulle-2{top:42%;right:-3%;animation-delay:.9s,2.4s}
.bulle-3{bottom:5%;left:8%;animation-delay:1.1s,.8s}
.bulle-3 b::before{content:"✓ ";color:var(--success)}
@keyframes bulle{from{opacity:0;transform:translateY(10px) scale(.9)}}
@keyframes flotte{50%{translate:0 -7px}}

.faits{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 -2px;padding:0;list-style:none;background:var(--card);border:2px solid var(--ink);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0}
.faits li{display:flex;align-items:baseline;gap:12px;padding:18px 22px;animation:monte .8s var(--ease) both}
.faits li+li{border-left:2px solid var(--ink)}
.faits li:nth-child(1){animation-delay:.35s}.faits li:nth-child(2){animation-delay:.42s}
.faits li:nth-child(3){animation-delay:.49s}.faits li:nth-child(4){animation-delay:.56s}
.faits b{font-family:var(--font-serif);font-size:40px;line-height:1;color:var(--acc-fonce)}
.faits span{font-size:13.5px;line-height:1.35;color:var(--fg-2)}

/* ═══ Blocs ══════════════════════════════════════════════════════════════ */

.bloc{padding:96px 0;border-bottom:1px solid var(--rule)}
.bloc-tete{max-width:760px;margin-bottom:44px}

/* Apparitions : visibles sans script ; pages.js pose .js puis .vu à l'entrée dans l'écran. */
.js .ap{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .ap.vu{opacity:1;transform:none}

/* ─── Cartes ─── */
.cartes{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.cartes-3{grid-template-columns:repeat(3,1fr)}
.carte{position:relative;padding:26px 24px 24px;background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard-md);transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .7s var(--ease)}
.carte:hover{transform:translate(-2px,-3px);box-shadow:var(--shadow-hard-lg)}
.js .carte.ap:nth-child(2){transition-delay:.08s}
.js .carte.ap:nth-child(3){transition-delay:.16s}
.carte h3{margin:18px 0 8px}
.carte p{color:var(--fg-2);font-size:15px}
.carte-num{position:absolute;top:16px;right:20px;font-family:var(--font-serif);font-size:44px;line-height:1;color:color-mix(in oklab,var(--acc-fonce) 22%,transparent)}
.carte-ico{display:inline-grid;place-items:center;width:44px;height:44px;background:var(--acc-pale);border:2px solid var(--ink);border-radius:var(--radius);color:var(--acc-fonce)}
.etiquette{font-size:12px;font-weight:700;color:var(--acc-fonce)}
.carte-comp h3{margin-top:8px}
.carte-comp::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:8px;background:var(--acc);border:2px solid var(--ink);border-radius:var(--radius) var(--radius) 0 0}

/* ─── Déroulé : frise qui se remplit au défilement ─── */
.deroule{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.deroule-tete{position:sticky;top:110px;margin:0}
.frise{position:relative;margin:0;padding:0 0 0 76px;list-style:none;--p:1}
.frise::before,.frise::after{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px}
.frise::before{background:repeating-linear-gradient(var(--rule) 0 6px,transparent 6px 12px)}
.frise::after{background:var(--acc-fonce);transform-origin:top;transform:scaleY(var(--p));transition:transform .15s linear}
.etape{position:relative;padding:0 0 46px}
.etape:last-child{padding-bottom:0}
.etape-num{position:absolute;left:-76px;top:0;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--cream);border:2px solid var(--ink);font-family:var(--font-serif);font-size:21px;font-weight:700;transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.etape.actif .etape-num,html:not(.js) .etape-num{background:var(--acc);box-shadow:var(--shadow-hard-sm)}
.etape.actif .etape-num{transform:scale(1.08)}
.etape-corps{padding:22px 24px;background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard-sm);transition:box-shadow .35s var(--ease),opacity .7s var(--ease),transform .7s var(--ease)}
.etape.actif .etape-corps{box-shadow:var(--shadow-hard-md)}
.etape-rang{font-size:12.5px;font-weight:700;color:var(--fg-3)}
.etape h3{margin:4px 0 8px;font-size:19px}
.etape-corps>p:not(.etape-rang):not(.puce-livrable){color:var(--fg-2);font-size:15px}
.puce-livrable{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 11px 6px 9px;background:var(--acc-pale);border:1.5px solid var(--ink);border-radius:var(--radius);font-size:13px;font-weight:700;color:var(--acc-fonce)}
.puce-livrable .ico{width:16px;height:16px}

/* ─── Livrables : feuilles éventaillées et tamponnées ─── */
.feuilles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:0;padding:12px 0 0;list-style:none}
.feuille{--r:-2.2deg;position:relative;display:flex;flex-direction:column;min-height:250px;padding:0 0 20px;background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard-md);transform:rotate(var(--r));transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .7s var(--ease)}
.feuille:nth-child(2){--r:1.6deg}.feuille:nth-child(3){--r:-1deg}.feuille:nth-child(4){--r:2.4deg}
.feuille:hover{transform:rotate(0) translateY(-6px);box-shadow:var(--shadow-hard-lg)}
.js .feuille.ap{transform:translateY(46px) rotate(0)}
.js .feuille.ap.vu{transform:rotate(var(--r))}
.js .feuille.ap.vu:hover{transform:rotate(0) translateY(-6px)}
.js .feuille.ap:nth-child(2){transition-delay:.1s}.js .feuille.ap:nth-child(3){transition-delay:.2s}.js .feuille.ap:nth-child(4){transition-delay:.3s}
.feuille-tete{display:flex;align-items:center;gap:9px;padding:13px 16px;background:var(--acc);border-bottom:2px solid var(--ink);font-weight:700;font-size:15px}
.feuille-lignes{height:92px;margin:18px 18px 4px;background:linear-gradient(var(--fg) 0 0) no-repeat 0 0/58% 7px,repeating-linear-gradient(transparent 0 15px,var(--border) 15px 17px) 0 18px/100% calc(100% - 18px) no-repeat;opacity:.9}
.feuille p{padding:0 18px;font-size:14px;color:var(--fg-2)}
.tampon{position:absolute;right:12px;bottom:-16px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:var(--cream);border:2px solid var(--acc-fonce);border-radius:var(--radius);color:var(--acc-fonce);font-size:12px;font-weight:700;transform:rotate(-7deg)}
.tampon .ico{width:16px;height:16px}
.js .feuille.ap .tampon{opacity:0;transform:rotate(-7deg) scale(1.9);transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
.js .feuille.ap.vu .tampon{opacity:1;transform:rotate(-7deg) scale(1);transition-delay:.75s}
.js .feuille.ap.vu:nth-child(2) .tampon{transition-delay:.9s}
.js .feuille.ap.vu:nth-child(3) .tampon{transition-delay:1.05s}
.js .feuille.ap.vu:nth-child(4) .tampon{transition-delay:1.2s}

/* ─── Garde-fous ─── */
.panneau{position:relative;padding:52px 52px 48px;background:var(--acc-pale);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard-lg);overflow:hidden}
.panneau::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:2px solid var(--ink);background:repeating-linear-gradient(135deg,transparent 0 8px,color-mix(in oklab,var(--acc-fonce) 22%,transparent) 8px 9px)}
.panneau .bloc-tete{position:relative;z-index:1;margin-bottom:32px}
.jamais{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;margin:0;padding:0;list-style:none}
.jamais li{display:flex;gap:16px;align-items:flex-start}
.jamais .ico{width:30px;height:30px;padding:4px;margin-top:1px;background:var(--card);border:2px solid var(--ink);border-radius:50%;color:var(--destructive)}
.jamais h3{margin-bottom:4px}
.jamais p{color:var(--fg-2);font-size:15px}
.js .jamais li.ap:nth-child(2){transition-delay:.08s}.js .jamais li.ap:nth-child(3){transition-delay:.16s}.js .jamais li.ap:nth-child(4){transition-delay:.24s}

/* ─── Comparaison ─── */
.compare{border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard-lg);background:var(--card);overflow:hidden}
.compare table{width:100%;border-collapse:collapse;font-size:15.5px}
.compare thead th,.compare thead td{padding:18px 22px;text-align:left;border-bottom:2px solid var(--ink);font-size:14px;font-weight:700;color:var(--fg-2)}
.compare thead th.c-agent{color:var(--ink);background:var(--acc)}
.compare tbody th{width:28%;padding:16px 22px;text-align:left;font-weight:700;color:var(--fg)}
.compare tbody td{padding:16px 22px}
.compare tbody tr+tr>*{border-top:1px solid var(--border)}
.compare td.c-agent{background:var(--acc-pale);font-weight:600;color:var(--fg)}
.compare .c-seul{color:var(--fg-3)}
.compare td{vertical-align:top}
.compare td .ico{width:18px;height:18px;margin:0 10px -3px 0}
.compare .c-seul .ico{color:var(--rule)}
.compare .c-agent .ico{color:var(--acc-fonce);stroke-width:2.6}
.js .compare tr.ap{transform:none;transition:opacity .5s var(--ease)}
.js .compare tr.ap .c-agent .ico path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .5s .25s var(--ease)}
.js .compare tr.ap.vu .c-agent .ico path{stroke-dashoffset:0}

/* ─── Grille d'agents (page /agents) : chaque carte porte la teinte de son domaine ─── */
.agents-grille{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:0;padding:0;list-style:none}
.carte-agent>a{display:flex;flex-direction:column;height:100%;background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard-md);text-decoration:none;color:var(--fg);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.carte-agent>a:hover{transform:translate(-2px,-3px);box-shadow:var(--shadow-hard-lg)}
.js .agents-grille .carte-agent.ap:nth-child(2n){transition-delay:.1s}
.carte-agent-visuel{position:relative;display:block;padding:18px 18px 0;background:var(--acc-pale);border-bottom:2px solid var(--ink);overflow:hidden}
.carte-agent-visuel::before{content:"";position:absolute;left:50%;top:58%;width:62%;aspect-ratio:1;border-radius:50%;background:var(--acc);border:2px solid var(--ink);transform:translate(-50%,-50%)}
.carte-agent-visuel img{position:relative;display:block;width:86%;height:auto;margin:0 auto -6px;transition:transform .5s var(--ease)}
.carte-agent>a:hover .carte-agent-visuel img{transform:translateY(-6px) rotate(-1.5deg)}
.carte-agent-corps{display:flex;flex-direction:column;flex:1;padding:24px 26px 24px}
.carte-agent h3{margin:6px 0 8px;font-family:var(--font-serif);font-size:25px;line-height:1.15}
.carte-agent p{color:var(--fg-2)}
.carte-agent ul{display:flex;flex-direction:column;gap:6px;margin:16px 0 0;padding:0;list-style:none;font-size:14.5px;color:var(--fg-2)}
.carte-agent li{display:flex;gap:8px;align-items:flex-start}
.carte-agent li .ico{width:17px;height:17px;margin-top:2px;color:var(--acc-fonce);stroke-width:2.6}
.carte-agent .lien-action{padding-top:18px}
.carte-agent>a:hover .lien-action .ico{transform:translateX(5px)}

/* ─── Outils compatibles (page /compatibilite) ─── */
.outils{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:0;list-style:none}
.outil{padding:24px 22px;background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard-md);transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .7s var(--ease)}
.outil:hover{transform:translate(-2px,-3px);box-shadow:var(--shadow-hard-lg)}
.js .outil.ap:nth-child(2){transition-delay:.08s}.js .outil.ap:nth-child(3){transition-delay:.16s}.js .outil.ap:nth-child(4){transition-delay:.24s}
.outil-tete{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.outil-tete img{width:48px;height:48px;padding:6px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--card)}
.outil-tete h3{font-size:18px}
.outil-editeur{font-size:13px;color:var(--fg-3)}
.outil ul{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none;font-size:14.5px;color:var(--fg-2)}
.outil ul li::before{content:"";display:inline-block;width:7px;height:7px;margin:0 9px 1px 0;background:var(--acc);border:1.5px solid var(--ink);border-radius:50%}
.outil-note{margin-top:14px;font-size:13px;color:var(--fg-3)}

/* ─── Liens vers les autres pages ─── */
.bloc-liens{padding:72px 0}
.liens-cartes{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:0;padding:0;list-style:none}
.lien-carte{display:flex;flex-direction:column;gap:8px;height:100%;padding:28px 28px 24px;background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard-md);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.lien-carte:hover{transform:translate(-2px,-3px);box-shadow:var(--shadow-hard-lg);background:var(--acc-pale)}
.lien-carte h3{font-family:var(--font-serif);font-size:23px}
.lien-carte p{color:var(--fg-2)}
.lien-action{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;font-weight:700;color:var(--acc-fonce)}
.lien-action .ico{transition:transform .25s var(--ease)}
.lien-carte:hover .lien-action .ico{transform:translateX(5px)}

/* ─── FAQ ─── */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faq-tete{position:sticky;top:110px;margin:0}
.faq-liste{display:flex;flex-direction:column;gap:12px;interpolate-size:allow-keywords}
.faq details{background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);transition:box-shadow .25s var(--ease),opacity .7s var(--ease),transform .7s var(--ease)}
.faq details[open]{box-shadow:var(--shadow-hard-md)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:16.5px}
.faq summary .ico{width:30px;height:30px;padding:5px;flex:none;border:2px solid var(--ink);border-radius:50%;background:var(--acc-pale);transition:transform .3s var(--ease),background .3s}
.faq details[open] summary .ico{transform:rotate(45deg);background:var(--acc)}
.faq summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}
.faq details::details-content{height:0;overflow:clip;transition:height .35s var(--ease),content-visibility .35s allow-discrete}
.faq details[open]::details-content{height:auto}
.reponse{padding:0 20px 20px}
.reponse p{color:var(--fg-2);max-width:66ch}

/* ─── Appel final ─── */
.bloc-cta{border-bottom:0;padding:88px 0 96px}
.final{position:relative;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;padding:64px 56px 56px;background:var(--encre);color:var(--cream);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:6px 6px 0 var(--acc)}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(color-mix(in oklab,var(--jungle-400) 45%,transparent) 1.2px,transparent 1.6px) 0 0/22px 22px;-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 90%);mask-image:linear-gradient(100deg,transparent 35%,#000 90%);animation:derive 40s linear infinite}
@keyframes derive{to{background-position:220px 110px}}
.final-texte{position:relative;max-width:660px}
.final h2{color:var(--cream);font-size:clamp(28px,3.2vw,42px)}
.final p{margin-top:16px;font-size:17.5px;color:color-mix(in oklab,var(--cream) 82%,transparent)}
.final-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn-lg.btn-acces{height:48px;padding:0 20px;font-size:16px}
.final .btn-acces:hover{box-shadow:3px 3px 0 var(--acc)}
.btn-final{background:transparent;color:var(--cream);border-color:var(--cream);height:48px;padding:0 20px;font-size:16px}
.btn-final:hover{background:color-mix(in oklab,var(--cream) 10%,transparent);box-shadow:3px 3px 0 var(--acc)}
.final-visuel{position:relative;margin:0;display:grid;place-items:center}
.final-visuel::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:var(--cream);border:2px solid var(--cream);box-shadow:6px 6px 0 var(--acc)}
.final-visuel img{position:relative;width:100%;height:auto}
.js .final.ap .final-visuel img{transform:translateY(30px) rotate(-3deg);opacity:0;transition:transform .9s .25s var(--ease),opacity .9s .25s var(--ease)}
.js .final.ap.vu .final-visuel img{transform:none;opacity:1}
.final-signature{position:relative;margin-top:40px;font-size:13px;font-weight:600;color:var(--jungle-300)}

/* ═══ Pied de page ═══════════════════════════════════════════════════════ */

.pied{padding:56px 0 48px;border-top:2px solid var(--ink)}
.pied .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.pied-marque img{height:24px;width:auto;display:block}
.pied-marque p{margin-top:14px;max-width:34ch;font-size:14px;color:var(--fg-2)}
.pied-marque .mono{margin-top:18px}
.pied-titre{margin-bottom:12px;font-size:13px;font-weight:700;color:var(--fg)}
.pied-col ul{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.pied-col a{font-size:14px;color:var(--fg-2);text-decoration:none}
.pied-col a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}

/* ═══ Écrans moyens et petits ════════════════════════════════════════════ */

@media (max-width:1140px){
  .feuilles{grid-template-columns:1fr 1fr;gap:34px 28px}
  .outils{grid-template-columns:1fr 1fr}
  .pied .wrap{grid-template-columns:1fr 1fr 1fr}
  .pied-marque{grid-column:1/-1}
}
@media (max-width:900px){
  .ph-grille{grid-template-columns:1fr;gap:12px;padding-bottom:28px}
  .ph-visuel{max-width:560px;width:100%;justify-self:center}
  .faits{grid-template-columns:1fr 1fr}
  .faits li:nth-child(3){border-left:0}
  .faits li:nth-child(n+3){border-top:2px solid var(--ink)}
  .bloc{padding:72px 0}
  .cartes-3,.jamais,.liens-cartes,.agents-grille{grid-template-columns:1fr}
  .deroule,.faq{grid-template-columns:1fr;gap:8px}
  .deroule-tete,.faq-tete{position:static;margin-bottom:32px}
  .panneau{padding:36px 28px}
  .final{grid-template-columns:1fr;padding:44px 30px 40px}
  .final-visuel{max-width:420px;justify-self:center}
}
@media (max-width:620px){
  .ph h1{font-size:clamp(32px,9vw,40px)}
  .chapo{font-size:17px}
  .bulle{font-size:12px;padding:7px 10px}
  .bulle-1{left:0}.bulle-2{right:0}
  .faits li{flex-direction:column;gap:4px;padding:14px 16px}
  .faits b{font-size:32px}
  .feuilles,.outils{grid-template-columns:1fr}
  .panneau::after{width:130px;height:130px;right:-56px;top:-56px}
  .panneau .bloc-tete{padding-right:48px}
  .frise{padding-left:60px}
  .frise::before,.frise::after{left:19px}
  .etape-num{left:-60px;width:40px;height:40px;font-size:18px}
  .etape-corps{padding:18px}
  .compare thead{display:none}
  .compare tbody tr{display:grid;grid-template-columns:1fr}
  .compare tbody th{width:auto;padding:16px 18px 6px}
  .compare tbody td{padding:8px 18px}
  .compare tbody td.c-agent{padding-bottom:14px}
  .compare tbody td::before{content:attr(data-col);display:block;margin-bottom:2px;font-size:12px;font-weight:700;color:var(--fg-3)}
  .compare tbody td.c-agent::before{color:var(--acc-fonce)}
  .compare tbody tr+tr>*{border-top:0}
  .compare tbody tr+tr{border-top:1px solid var(--border)}
  .pied .wrap{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .js .ap,.js .feuille.ap,.js .feuille.ap .tampon{opacity:1;transform:none}
  .js .feuille.ap.vu{transform:rotate(var(--r))}
  .js .compare tr.ap .c-agent .ico path{stroke-dashoffset:0}
}