/* ═══════════════════════════════════════════════════════════════════════════════════════
   Cabestian — styles de l'accueil
   ───────────────────────────────────────────────────────────────────────────────────────
   Ces 521 lignes vivaient en dur dans index.html. Sorties telles quelles, à l'octet près,
   pour une raison précise : les outils d'édition visuelle (DevTools Workspaces) savent
   sauvegarder un FICHIER css, pas un bloc <style> écrit dans la page. Maxime peut donc
   cliquer sur un élément, régler sa position, et enregistrer dans ce fichier.

   Chargé exactement là où était le bloc, après fonts.css et nav.css : la cascade est
   identique. Deux petits blocs restent dans index.html (le volume 3D et la section
   architecte, 96 lignes) : ils sont au milieu du corps de page, les déplacer changerait
   leur ordre de cascade.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --navy:#06121A; --azurite:#1B2B41; --stalactite:#F7F6F4;
  --soft-titanium:#CFD0D4; --cashmere:#A5B8D0; --ruby:#63001F;
  --grad:linear-gradient(90deg,#9B1B3A 0%,#C0455E 42%,#A5B8D0 100%);
  /* Rayures retirées (Maxime, 31/07) : le repeating-linear-gradient avait une période
     de 1,5 px, en dessous de ce qu'un écran peut résoudre. Résultat, un moiré de traits
     verticaux irréguliers qui changeait selon le zoom et la densité de l'écran. Le
     dégradé seul donne la même profondeur, sans l'artefact. */
  --alu-ruby:linear-gradient(180deg,#8A0F35 0%,#63001F 52%,#4A0014 100%);
  --alu-inset:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.4);
  --glass-dark-bg:rgba(27,43,65,.45); --glass-blur:blur(26px) saturate(150%);
  --fd:'Archivo',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,monospace;
  /* GOUTTIÈRE UNIQUE du site (22/07). Avant : 6vw, 7vw et 8vw se mélangeaient d'une
     section à l'autre (86 / 101 / 115 px à 1440), donc les blocs se décalaient
     latéralement au scroll. Toute marge horizontale de section passe désormais par
     --gut. Bornée pour ne pas coller au bord en mobile ni exploser en très large. */
  --gut:clamp(22px,7vw,132px);
  /* Échelle typographique (_echelle-typo.md, arbitrage du 03/08) : neuf paliers, posés
     sur champ.css/article.css, complétés ici (22/09) — l'accueil restait au brut. */
  --t-micro:11px;
  --t-petit:13px;
  --t-base:16px;
  --t-large:clamp(17px,1.4vw,20px);
  --t-lead:clamp(20px,2vw,25px);
  --t-t3:clamp(24px,2.6vw,32px);
  --t-t2:clamp(29px,3.2vw,40px);
  --t-t1:clamp(34px,4.4vw,52px);
  --t-hero:clamp(40px,5.6vw,68px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--navy)}
body{font-family:var(--fd);-webkit-font-smoothing:antialiased;color:var(--stalactite);background:var(--navy);min-height:100vh}
body.locked{overflow:hidden;height:100vh}

/* calque de fond (canvas 2D) : vidéo hero + dégradés sections, DERRIÈRE le texte */
#glbg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
/* #gl (barre liquid-glass, canvas WebGL) → défini dans _shared/nav.css */
/* nav : la pill démarre MASQUÉE sur la home (révélée au 1er scroll via showBar → window.__glassBarY),
   à l'inverse de champs.html où elle reste toujours visible. Override page-spécifique de _shared/nav.css
   (.nav{opacity:1}), même logique que #glbg ci-dessus. Sans ce rappel de l'état d'origine, en
   DEV_SKIP_LOADER (skipToHome ne joue pas reset()), la CSS partagée laisserait la pill visible au hero. */
.nav{opacity:0}

/* ===================== HERO (1re section, transparente : le canvas transparaît) ===================== */
.hero{position:relative;z-index:1;height:100vh;overflow:hidden}
.copy{position:absolute;z-index:4;left:var(--gut);top:50%;transform:translateY(-50%);max-width:920px}
h1 .line>span{white-space:nowrap}

/* ===================== NAV : verre WebGL + pill → module partagé _shared/nav.css ===================== */
.eyebrow{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.22em;text-transform:uppercase;color:var(--cashmere);margin-bottom:24px;display:flex;align-items:center;gap:14px;opacity:0}
.eyebrow::before{content:'';width:34px;height:2px;background:var(--grad)}
h1{font-weight:600;font-size:var(--t-hero);line-height:1.04;letter-spacing:-.02em}
/* Jambages (audit 23/09, B1) : .16em sous la ligne ne contenait pas le p, le q, le j
   d'Archivo, rognés à la fois par l'overflow du masque et par le clip du canvas, qui se
   cale sur cette même boîte. .34em en bas, compensés par la marge : rien ne bouge. */
h1 .line{display:block;overflow:hidden;padding:.16em 0 .34em;margin:-.16em 0 -.34em}
h1 .line>span{display:block;transform:translateY(130%)}
h1 .accent{display:inline;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.lead{margin-top:26px;font-size:var(--t-base);line-height:1.6;color:var(--soft-titanium);max-width:470px;opacity:0}
.actions{margin-top:36px;display:flex;align-items:center;gap:22px;opacity:0}
.btn{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.12em;text-transform:uppercase;padding:15px 26px;border-radius:10px;background:var(--alu-ruby);color:var(--stalactite);box-shadow:var(--alu-inset);border:none;cursor:pointer}
.ghost{font-size:var(--t-petit);color:var(--cashmere);text-decoration:none;border-bottom:1px solid rgba(165,184,208,.35);padding-bottom:3px}
/* Press-feedback : tout élément pressable réagit à l'appui (Emil : « les boutons doivent répondre à l'appui ») */
.btn,.nav .cta,.ghost,.replay{transition:transform .16s cubic-bezier(.16,1,.3,1),color .2s ease,background .2s ease}
.btn:active,.nav .cta:active,.ghost:active,.replay:active{transform:scale(.97)}

/* ===================== SECTIONS (alternance dark/light) ===================== */
.sec{position:relative;z-index:2;min-height:100vh;padding:16vh var(--gut);display:flex;flex-direction:column;justify-content:center}
.sec h2,.sec .s-eyebrow{overflow:visible}
/* Le visuel (fond + texte) est rendu dans le canvas pour être réfracté ; le DOM reste en place mais
   TRANSPARENT — toujours sélectionnable et cliquable, parfaitement aligné sous le texte peint (le canvas trace ses rects). */
.sec-dark{color:var(--stalactite)}
.sec-light{color:#06121A}
/* -webkit-text-fill-color seul → le glyphe DOM devient invisible MAIS `color` (lue par le canvas) reste la vraie couleur */
.copy .eyebrow,.copy h1,.copy .lead,.copy .ghost,
.sec .s-eyebrow,.sec h2,.sec .s-lead{-webkit-text-fill-color:transparent!important}
.copy h1 .accent,.sec h2 .accent{background:none!important;-webkit-text-fill-color:transparent!important}
.copy .btn,.sec .btn{color:transparent!important;background:transparent!important;box-shadow:none!important}
.copy ::selection,.sec ::selection{background:rgba(122,31,46,.24)}
.copy ::-moz-selection,.sec ::-moz-selection{background:rgba(122,31,46,.24)}
.sec .s-eyebrow{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.22em;text-transform:uppercase;margin-bottom:24px;display:flex;align-items:center;gap:14px}
.sec-dark .s-eyebrow{color:var(--cashmere)} .sec-light .s-eyebrow{color:var(--ruby)}
.sec .s-eyebrow::before{content:'';width:34px;height:2px;background:var(--grad)}
.sec h2{font-weight:600;font-size:var(--t-t1);line-height:1.05;letter-spacing:-.02em;max-width:15ch}
.sec h2 .line{display:block;padding:.16em 0 .34em;margin:-.16em 0 -.34em}
.sec h2 .accent{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.sec .s-lead{margin-top:26px;font-size:var(--t-base);line-height:1.6;max-width:48ch}
.sec-dark .s-lead{color:var(--soft-titanium)} .sec-light .s-lead{color:#3A4654}
.sec .s-actions{margin-top:38px;display:flex;align-items:center;gap:22px}
/* liste (leviers Services, piliers Méthode) : DOM en place pour layout/sélection, peint dans le canvas (séparateurs inclus) */
.sec .s-list{margin-top:42px;display:flex;flex-direction:column;max-width:42ch}
.sec .s-list:empty{display:none}
.sec .s-li{display:flex;align-items:flex-start;gap:22px;padding:18px 2px}
.sec .s-li .n{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.1em;width:2.4em;flex:none;line-height:1.3}
.sec-dark .s-li .n{color:var(--cashmere)} .sec-light .s-li .n{color:var(--ruby)}
.sec .s-li .body{display:flex;flex-direction:column;gap:6px}
.sec .s-li .t{font-size:var(--t-base);font-weight:500;line-height:1.3}
.sec-dark .s-li .t{color:var(--stalactite)} .sec-light .s-li .t{color:#06121A}
.sec .s-li .d{font-size:var(--t-base);line-height:1.5;max-width:32ch}
.sec-dark .s-li .d{color:var(--soft-titanium)} .sec-light .s-li .d{color:#3A4654}
.sec .s-li .n,.sec .s-li .t,.sec .s-li .d{-webkit-text-fill-color:transparent!important}
/* illustrations animées par levier (esprit prod V2, recolorées palette V4) — DOM visible (SVG), à droite de la ligne */
.sec .s-li .s-anim{margin-left:auto;align-self:center;flex:none;width:84px;height:84px}
.sec .s-li .s-anim:empty{display:none}
.s-anim svg{width:100%;height:100%;overflow:visible;display:block}
.s-anim .a-ring{stroke:rgba(207,208,212,.22);fill:none}
.s-anim .a-ring2{stroke:rgba(207,208,212,.12);fill:none}
.s-anim .a-tick{stroke:rgba(165,184,208,.55)}
.s-anim .a-hand{stroke:rgba(207,208,212,.72)}
.s-anim .a-acc{stroke:#C0455E}
.s-anim .a-accf{fill:#C0455E;stroke:none}
.sec-light .s-anim .a-ring{stroke:rgba(6,18,26,.16)}
.sec-light .s-anim .a-ring2{stroke:rgba(6,18,26,.10)}
.sec-light .s-anim .a-tick{stroke:rgba(99,0,31,.5)}
.sec-light .s-anim .a-hand{stroke:rgba(6,18,26,.6)}
.s-anim .a-sec{transform-origin:160px 160px;animation:aSpin 8s linear infinite}
@keyframes aSpin{to{transform:rotate(360deg)}}
.s-anim .a-pulse{transform-origin:160px 160px;opacity:0;animation:aPulse 3s ease-out infinite}
@keyframes aPulse{0%{opacity:.6;transform:scale(.55)}80%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.s-anim .a-sec,.s-anim .a-pulse{animation:none}}
.sec-light .ghost{color:var(--ruby);border-color:rgba(99,0,31,.35)}
/* ===================== Prestations : scroll horizontal épinglé (panneaux DOM nets, fond réfracté) ===================== */
.sec-hscroll{padding:0;display:block;min-height:auto}
.sec-hscroll .hs-intro{padding:5vh var(--gut) 0}
/* section DOM-visible (pas peinte dans le canvas) : annuler la transparence du texte */
.sec-hscroll .s-eyebrow,.sec-hscroll h2,.sec-hscroll .s-lead,.sec-hscroll .hp-num{-webkit-text-fill-color:currentColor!important}
.sec-hscroll .hp-title,.sec-hscroll .hp-body{-webkit-text-fill-color:transparent!important}
.sec-hscroll h2 .accent{-webkit-text-fill-color:transparent!important;background:var(--grad)!important;-webkit-background-clip:text!important;background-clip:text!important}
.sec-hscroll .hs-intro .s-lead{color:var(--soft-titanium);margin-top:18px;max-width:46ch}
.hs-pin{height:100vh;overflow:hidden;position:relative}
.hs-track{display:flex;height:100vh;width:max-content;will-change:transform}
.hs-panel{flex:none;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:flex-start;
  padding:15vh max(var(--gut),calc((100vw - 1180px)/2)) 0;position:relative;border-right:1px solid rgba(207,208,212,.09)}
.hs-panel .hp-bignum{position:absolute;top:50%;right:var(--gut);transform:translateY(-50%);
  font-weight:700;font-size:clamp(12rem,23vw,25rem);line-height:.8;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(207,208,212,.09);user-select:none;pointer-events:none;z-index:0}
.hs-panel .hp-num{font-family:var(--fm);font-size:var(--t-petit);color:var(--cashmere);
  display:flex;align-items:center;gap:14px;margin-bottom:22px;position:relative;z-index:1}
.hs-panel .hp-num::before{content:'';width:34px;height:2px;background:var(--grad)}
.hs-panel .hp-title{font-weight:600;font-size:var(--t-hero);line-height:1.05;letter-spacing:-.025em;
  color:var(--stalactite);max-width:16ch;margin-bottom:1.4rem;position:relative;z-index:1}
.hs-panel .hp-body{font-size:var(--t-base);line-height:1.62;color:var(--soft-titanium);max-width:44ch;position:relative;z-index:1}
/* hscroll en fond clair : texte sombre */
.sec-hscroll.sec-light .hp-num{color:#8595A8}
.sec-hscroll.sec-light .hp-title{color:#06121A}
.sec-hscroll.sec-light .hp-body{color:#3A4452}
.sec-hscroll.sec-light .hp-bignum{-webkit-text-stroke-color:rgba(6,18,26,.07)}
.hs-progress{position:absolute;bottom:7vh;left:max(var(--gut),calc((100vw - 1180px)/2));right:max(var(--gut),calc((100vw - 1180px)/2));
  display:flex;align-items:center;gap:1.1rem;z-index:3;font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.18em;color:var(--soft-titanium)}
.hs-progress__bar{flex:1;height:1px;background:rgba(207,208,212,.18);position:relative}
.hs-progress__fill{position:absolute;left:0;top:0;height:100%;background:var(--grad);width:0;transition:width .12s linear}
/* révélation façon Apple : cascade eyebrow → titre → corps, easing expo, parallaxe du grand numéro */
.hs-panel .hp-num,.hs-panel .hp-title,.hs-panel .hp-body{opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.hs-panel .hp-bignum{opacity:0;transform:translate(48px,-50%);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.hs-panel.is-visible .hp-num{opacity:1;transform:none;transition-delay:.04s}
.hs-panel.is-visible .hp-title{opacity:1;transform:none;transition-delay:.11s}
.hs-panel.is-visible .hp-body{opacity:1;transform:none;transition-delay:.19s}
.hs-panel.is-visible .hp-bignum{opacity:1;transform:translate(0,-50%)}
@media (prefers-reduced-motion:reduce){
  .hs-panel .hp-num,.hs-panel .hp-title,.hs-panel .hp-body{opacity:1!important;transform:none!important;transition:none!important}
  .hs-panel .hp-bignum{opacity:1!important;transform:translateY(-50%)!important;transition:none!important}
}
@media (max-width:760px){
  .sec-hscroll .hs-intro{padding:12vh var(--gut) 2vh}
  .hs-pin{height:auto;overflow:visible}
  .hs-track{flex-direction:column;height:auto;width:auto;transform:none!important}
  .hs-panel{width:auto;height:auto;min-height:auto;padding:7vh var(--gut);border-right:0;border-top:1px solid rgba(207,208,212,.09);overflow:hidden}
  .hs-panel .hp-bignum{font-size:7rem;right:var(--gut)}
  .hs-progress{display:none}
}
/* reveal au scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
/* === Archétype A : reveal éditorial — les lignes du titre montent depuis un masque, en cascade, à l'entrée de la section (DOM + canvas) === */
.sec h2 .line{overflow:hidden}
.sec h2 .line>span{display:block;transform:translateY(115%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.sec.in-view h2 .line>span{transform:translateY(0)}
.sec h2 .line:nth-child(2)>span{transition-delay:.07s}
.sec h2 .line:nth-child(3)>span{transition-delay:.14s}
.sec h2 .line:nth-child(4)>span{transition-delay:.21s}
/* === Section explicative : texte révélé mot à mot au scroll === */
.sec-explainer{min-height:var(--ex-h,240vh)!important;display:block!important;padding:0!important}
.ex-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 var(--gut);z-index:2}
/* Mobile (audit 23/09, M6) : à 34 px le texte faisait 795 px de haut dans un écran de 844 ;
   centré, sa première ligne passait sous la barre vitrée. Place réservée à la barre et corps
   ramené à 31 px : le paragraphe tient entier sous elle. */
@media (max-width:600px){.ex-sticky{padding-top:64px}.ex-sticky .ex-big{font-size:31px}}
.ex-big{font-weight:500;font-size:var(--t-t1);line-height:1.3;letter-spacing:-.018em;text-align:left;color:#2E2B27}
/* reveal façon espaciolanube : par CARACTÈRE, opacité continue (bande de transition ~18 chars) */
.ex-big .word{display:inline-block;white-space:nowrap;position:relative}
.ex-big .ch{display:inline-block;opacity:0;-webkit-text-fill-color:transparent}
/* Le cœur accentué : les LETTRES seules, jamais la ponctuation collée.
   Avant, l'accent portait sur le mot entier et « mémoire, » emportait sa
   virgule en rubis. */
.ex-big .core{display:inline-block;position:relative;color:#C0455E;cursor:pointer}
.ex-big .core:focus-visible{outline:2px solid #C0455E;outline-offset:5px;border-radius:2px}
/* Au survol d'un mot, le reste de la phrase recule. */
.ex-big.focusing .word{transition:opacity .34s cubic-bezier(.16,1,.3,1)}
.ex-big.focusing .word:not(.is-target){opacity:.20}
/* La trame de points : le mot se dissout, le nom du produit se recompose.
   Le canvas DÉBORDE de la boîte du mot, donc le paragraphe ne bouge pas d'un
   pixel (vérifié : 51 mots au même endroit au repos et pendant la morphose). */
.ex-big .core .dots{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .13s linear}
.ex-big .core.on .dots{opacity:1}
.ex-big .core .letters{transition:opacity .13s linear}
.ex-big .core.on .letters{opacity:0}
/* === Substitution en points, générique (module _shared/dotmorph.js) ===
   Vaut partout où un mot en cache un autre. Le canvas déborde de la boîte du
   mot au lieu de la redimensionner : aucun reflow pendant la morphose. */
.dm{position:relative;display:inline-block;cursor:pointer}
.dm .dots{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .13s linear}
.dm.on .dots{opacity:1}
.dm .letters{transition:opacity .13s linear}
.dm.on .letters{opacity:0}
.dm:focus-visible{outline:2px solid #C0455E;outline-offset:4px;border-radius:2px}
/* Le mot révélé déborde très largement de sa ligne et recouvrait ses voisins.
   Pendant le survol, la colonne recule : seul le mot visé reste net. */
.dm-groupe a{transition:opacity .28s cubic-bezier(.16,1,.3,1)}
.dm-groupe.dm-actif a:not(.on){opacity:.16}

/* Emplacement réservé sous le paragraphe : hauteur fixe, donc aucun reflow.
   Posé sous le mot, il recouvrait la ligne suivante (mesuré). */
.ex-desc{margin-top:clamp(26px,3.4vh,44px);height:16px;position:relative;pointer-events:none;font-family:var(--fm);font-size:var(--t-micro);font-weight:500;color:var(--navy);white-space:nowrap;opacity:0;transform:translateY(7px);transition:opacity .28s ease,transform .34s cubic-bezier(.16,1,.3,1)}
.ex-desc.show{opacity:1;transform:translateY(0)}
.ex-desc em{font-style:normal;color:#C0455E;margin:0 .55em}
@media (prefers-reduced-motion:reduce){.ex-big .ch{opacity:1!important;filter:none!important;transform:none!important}}
/* === Pour qui : animation typographique — segment qui se remplace === */
.sec-pourqui{display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;padding:16vh var(--gut)!important}
.pq-eyebrow{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.24em;text-transform:uppercase;color:var(--ruby);display:flex;align-items:center;gap:14px;margin-bottom:24px}
.pq-eyebrow::before{content:"";width:32px;height:1px;background:var(--grad)}
.pq-title{font-weight:500;font-size:var(--t-t1);letter-spacing:-.022em;line-height:1.1;max-width:18ch;color:var(--navy)}
/* phrase-pourquoi : traitement SECONDAIRE, sobre (taille lead, ton discret) — explique le mécanisme */
.pq-why{margin-top:22px;font-size:var(--t-base);line-height:1.6;max-width:52ch;color:#3c4c60}
.sec-pourqui .pq-eyebrow,.sec-pourqui .pq-title,.sec-pourqui .pq-why,.sec-pourqui .pq-actor-t,.sec-pourqui .pq-actor-n{-webkit-text-fill-color:currentColor!important}
.pq-acc{color:#C0455E!important;-webkit-text-fill-color:#C0455E!important;background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important}
/* Pour qui : les 3 acteurs, présentation simple (remplace l'animation typographique) */
.pq-actors{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:48px;border-top:1px solid rgba(6,18,26,.12);padding-top:34px;max-width:760px}
.pq-actor{display:flex;align-items:baseline;gap:12px}
.pq-actor-n{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.14em;color:var(--ruby)}
.pq-actor-t{font-family:var(--fd);font-weight:500;font-size:var(--t-large);letter-spacing:-.01em;color:var(--navy)}
/* === animation ligne typographique : élément FOCAL (grand), aéré sous la phrase-pourquoi === */
.pq-anim{margin-top:48px;overflow:hidden}
.pq-anim-line{
  font-family:var(--fd);font-weight:500;
  font-size:var(--t-t1);
  letter-spacing:-.022em;line-height:1.2;
  color:var(--stalactite);-webkit-text-fill-color:currentColor!important;
  display:flex;align-items:baseline;flex-wrap:wrap
}
/* espace unique entre le préfixe « Pour » et le segment (un seul .3em, pas de nœud-texte) */
.pq-prefix{white-space:nowrap;margin-right:.3em;-webkit-text-fill-color:currentColor!important}
/* clip container : masque le segment entrant/sortant */
.pq-seg-clip{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:baseline;
  /* hauteur fixe = évite le layout shift quand les segments changent */
  min-height:1.25em
}
/* segment générique (rôle cyclé ou résolution finale) — texte en blanc cassé (stalactite) */
.pq-seg{
  display:block;white-space:nowrap;
  color:var(--stalactite);-webkit-text-fill-color:currentColor!important
}
/* résolution : le segment reste en blanc, l'accent ruby ne porte QUE sur le mot .pq-acc à l'intérieur */
.pq-seg-final .pq-acc{
  color:transparent;
  -webkit-text-fill-color:transparent!important;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text
}
/* point final après résolution : collé au segment (pas d'espace avant) */
.pq-period{-webkit-text-fill-color:currentColor!important}
/* prefers-reduced-motion : aucun mouvement, état final direct */
@media (prefers-reduced-motion:reduce){
  .pq-seg,.pq-period{opacity:1!important;transform:none!important}
}
/* === Socle : bande dark, 3 ingrédients côte à côte (DOM pur, pas peint canvas) === */
.sec-socle{padding:18vh var(--gut)!important;min-height:auto!important;display:flex!important;flex-direction:column;justify-content:center}
.sec-socle .so-eyebrow,.sec-socle .so-title,.sec-socle .so-ct,.sec-socle .so-cd{-webkit-text-fill-color:currentColor!important}
/* m1 (audit 23/09) : centré, le bloc démarrait à ~200 px à 1440 contre ~100 px pour le hero,
   « La méthode » et « Pour qui ». Il se cale à gauche sur la même gouttière. */
.so-wrap{max-width:1040px;margin:0;width:100%}
.so-eyebrow{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.22em;text-transform:uppercase;color:var(--cashmere);display:flex;align-items:center;gap:14px;margin-bottom:2.2rem}
.so-eyebrow::before{content:'';width:34px;height:2px;background:var(--grad)}
.so-lead{max-width:58ch;margin:1.5rem 0 5.8rem;font-size:var(--t-base);line-height:1.62;color:var(--soft-titanium)}
.so-title{font-family:var(--fd);font-weight:500;font-size:var(--t-t2);line-height:1.22;letter-spacing:-.018em;color:var(--stalactite);margin:0;max-width:24ch}
.so-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4.4rem}
.so-col{display:flex;flex-direction:column;align-items:flex-start}
.so-anim{width:120px;height:120px;margin-bottom:1.8rem}
/* Les dessins occupent le centre de leur boîte de 120 (x ≥ 26) : le pictogramme paraissait
   décalé d'environ 25 px à droite de son titre. On recale la boîte sur le trait (m1). */
.so-anim,.so-media{margin-left:-26px}
.so-anim-bricks{margin-left:-36px}   /* les briques commencent à x=36 */
.so-media .so-anim{margin-left:0}   /* la couche repos du slot média est déjà recalée par .so-media */
.so-anim svg{width:100%;height:100%;overflow:visible;display:block}
.so-ct{font-family:var(--fd);font-weight:500;font-size:var(--t-base);letter-spacing:-.01em;color:var(--stalactite);margin-bottom:.7rem}
.so-cd{font-size:var(--t-base);line-height:1.55;color:var(--soft-titanium);margin:0;max-width:34ch}
/* — traits & noeuds : palette V4, strokes fins comme .s-anim — */
.so-edge{stroke:rgba(207,208,212,.22);stroke-width:1.4;fill:none;stroke-linecap:round}
.so-node{fill:var(--cashmere)}
.so-brick{fill:none;stroke:rgba(207,208,212,.28);stroke-width:1.4}
.so-brick.b1{stroke:#C0455E;stroke-opacity:.9}
.so-frame{fill:none;stroke:rgba(207,208,212,.26);stroke-width:1.4}
.so-dot{fill:var(--cashmere)}
/* — Col 1 : réseau qui se relie. Traits se tracent lentement, noeuds respirent en décalé — */
.so-edge{stroke-dasharray:90;stroke-dashoffset:90;animation:soDraw 9s cubic-bezier(.4,0,.2,1) infinite}
.so-edge.e2{animation-delay:.5s}.so-edge.e3{animation-delay:1s}.so-edge.e4{animation-delay:1.5s}.so-edge.e5{animation-delay:2s}
@keyframes soDraw{0%{stroke-dashoffset:90}28%,72%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.so-node{animation:soBreathe 6s ease-in-out infinite}
.so-node.n2{animation-delay:.8s}.so-node.n3{animation-delay:1.6s}.so-node.n4{animation-delay:2.4s}.so-node.n5{animation-delay:3.2s}
@keyframes soBreathe{0%,100%{opacity:.45}50%{opacity:1}}
/* — Col 2 : briques qui s’assemblent. Montée douce, décalée, retour lent — */
.so-brick{transform-box:fill-box;transform-origin:center}
.so-brick.b2{animation:soStack 7s cubic-bezier(.4,0,.2,1) infinite}
.so-brick.b3{animation:soStack 7s cubic-bezier(.4,0,.2,1) infinite;animation-delay:.6s}
@keyframes soStack{0%{transform:translateY(10px);opacity:0}26%,74%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}
/* — Col 3 : hub fermé, points qui pulsent doucement à l'intérieur. Rien ne sort — */
.so-dot{transform-box:fill-box;transform-origin:center;animation:soPulse 5.5s ease-in-out infinite}
.so-dot.d2{animation-delay:1.1s}.so-dot.d3{animation-delay:2.2s}.so-dot.d4{animation-delay:3.3s}
@keyframes soPulse{0%,100%{transform:scale(.7);opacity:.4}50%{transform:scale(1);opacity:1}}
/* === Slot média réutilisable (.so-media) + déploiement au survol ===
   Contrat : boîte 120x120 contenant 2 couches superposées.
   .so-media__rest = état de repos (anim géométrique, lisible sans survol).
   .so-media__hover = scène détaillée au survol (ou, phase 2, une <video> qui remplace le SVG).
   Au survol de .so-col--media : crossfade repos -> survol. La scène survol joue sa séquence.
   Progressive enhancement : sans hover (tactile) l'état repos suffit ; aucune dépendance JS. */
.so-media{position:relative;width:120px;height:120px;margin-bottom:1.8rem}
.so-media__rest,.so-media__hover{position:absolute;inset:0;width:100%;height:100%}
.so-media__rest svg,.so-media__hover svg{width:100%;height:100%;overflow:visible;display:block}
.so-media__rest{opacity:1;transition:opacity .55s cubic-bezier(.16,1,.3,1)}
.so-media__hover{opacity:0;transition:opacity .55s cubic-bezier(.16,1,.3,1)}
.so-col--media:hover .so-media__rest{opacity:0}
.so-col--media:hover .so-media__hover{opacity:1}
/* scène document : repos = état stable (doc + lignes tracés, marqueurs masqués), prête au crossfade */
.so-doc{fill:rgba(207,208,212,.04);stroke:rgba(207,208,212,.30);stroke-width:1.4}
.so-line{stroke:rgba(207,208,212,.28);stroke-width:2;stroke-linecap:round}
.so-mark{fill:#C0455E;fill-opacity:.92;transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.5)}
/* déploiement au survol : le doc « monte » légèrement, les marqueurs surgissent un par un (rôle/date/montant) */
.so-col--media:hover .so-scene-doc .so-doc{animation:soDocIn .5s cubic-bezier(.16,1,.3,1) both}
.so-col--media:hover .so-scene-doc .so-line{animation:soLineIn .5s cubic-bezier(.16,1,.3,1) both}
.so-col--media:hover .so-scene-doc .so-line.l2{animation-delay:.06s}
.so-col--media:hover .so-scene-doc .so-line.l3{animation-delay:.12s}
.so-col--media:hover .so-scene-doc .so-line.l4{animation-delay:.18s}
.so-col--media:hover .so-scene-doc .so-line.l5{animation-delay:.24s}
.so-col--media:hover .so-scene-doc .so-mark{animation:soMarkIn .42s cubic-bezier(.34,1.4,.5,1) both}
.so-col--media:hover .so-scene-doc .so-mark.m1{animation-delay:.42s}
.so-col--media:hover .so-scene-doc .so-mark.m2{animation-delay:.66s}
.so-col--media:hover .so-scene-doc .so-mark.m3{animation-delay:.90s}
.so-col--media:hover .so-scene-doc .so-mark.m4{animation-delay:1.14s}
@keyframes soDocIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes soLineIn{0%{opacity:0}100%{opacity:1}}
@keyframes soMarkIn{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .so-edge{stroke-dashoffset:0!important;animation:none!important}
  .so-node,.so-brick,.so-dot{animation:none!important;opacity:1!important;transform:none!important}
  /* survol sans déploiement animé : crossfade neutralisé, marqueurs déjà visibles (état final stable) */
  .so-media__rest,.so-media__hover{transition:none!important}
  .so-col--media:hover .so-scene-doc .so-doc,.so-col--media:hover .so-scene-doc .so-line,.so-col--media:hover .so-scene-doc .so-mark{animation:none!important}
  .so-mark{opacity:1;transform:none}
}
@media (max-width:760px){.so-grid{grid-template-columns:1fr;gap:3rem}.so-lead{margin-bottom:3rem}.sec-socle{padding:11vh var(--gut)!important}}
/* === Cartes prestations (remplace le scroll horizontal) === */
.sec-cards{display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;padding:15vh var(--gut)!important}
.sec-cards .cd-eyebrow,.sec-cards .cd-title,.sec-cards .cd-tag,.sec-cards .cd-h,.sec-cards .cd-b,.sec-cards .cd-num{-webkit-text-fill-color:currentColor!important}
.cd-eyebrow{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.24em;text-transform:uppercase;color:var(--cashmere);display:flex;align-items:center;gap:14px;margin-bottom:22px}
.cd-eyebrow::before{content:"";width:32px;height:1px;background:var(--grad)}
.cd-title{font-weight:600;font-size:var(--t-t1);letter-spacing:-.02em;line-height:1.08;color:var(--stalactite)}
.cd-acc{color:transparent;-webkit-text-fill-color:transparent!important;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.cd-grid{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;width:100%}
@media(max-width:860px){.cd-grid{grid-template-columns:1fr;gap:18px;margin-top:44px}}
.cd-card{border:1px solid rgba(165,184,208,.16);border-radius:16px;padding:28px 26px 32px;background:rgba(165,184,208,.03);transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,background .35s}
@media (hover:hover) and (pointer:fine){.cd-card:hover{transform:translateY(-4px);border-color:rgba(192,69,94,.4);background:rgba(165,184,208,.05)}}
.cd-num{font-family:var(--fm);font-size:var(--t-petit);color:#C0455E}
.cd-tag{font-family:var(--fm);font-size:var(--t-micro);color:#8595A8;margin-top:18px}
.cd-h{font-weight:600;font-size:var(--t-lead);letter-spacing:-.01em;color:var(--stalactite);margin-top:10px}
.cd-b{margin-top:14px;color:var(--soft-titanium);font-size:var(--t-base);line-height:1.55}
/* === Footer === */
/* === Footer minimal (remix dark) === */
.site-footer{position:relative;z-index:2;background:#08141D}
.sf-frame{position:relative;max-width:960px;margin:0 auto;border-left:1px solid rgba(200,214,228,.12);border-right:1px solid rgba(200,214,228,.12);background:radial-gradient(40% 80% at 30% 0%, rgba(192,69,94,.10), transparent 70%)}
.sf-rule{height:1px;width:100%;background:rgba(200,214,228,.12)}
.sf-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;padding:46px 36px}
.sf-brand{grid-column:span 4;display:flex;flex-direction:column;gap:22px}
.sf-mark{display:block;width:max-content}
.sf-mark img{height:26px;width:auto;display:block}
.sf-tagline{font-family:var(--fm);font-size:var(--t-petit);line-height:1.6;color:#8C99A8;max-width:30ch;letter-spacing:.01em}
.sf-socials{display:flex;gap:10px;margin-top:2px}
.sf-socials a{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(200,214,228,.12);border-radius:8px;color:#E4E9EF;transition:background .2s,color .2s,border-color .2s}
.sf-socials a:hover{background:#C0455E;color:#fff;border-color:#C0455E}
.sf-socials svg{width:16px;height:16px;display:block}
.sf-col{grid-column:span 3}
@media(min-width:720px){.sf-col{grid-column:span 1}
  /* m2 (audit 23/09) : dans une colonne de 128 px, « Champs d'actions » passait sur deux
     lignes et « Cabestian » sur une, les deux listes démarraient à 10 px d'écart. Les deux
     colonnes de liens prennent la largeur de leur contenu, intitulés sur une ligne. */
  .sf-grid{grid-template-columns:repeat(4,minmax(0,1fr)) auto auto;column-gap:40px}
  .sf-k{white-space:nowrap}
  /* Le pied est un flex en colonne : sans largeur imposée, le cadre (margin:auto) se
     réduisait à la largeur intrinsèque de la grille, désormais plus étroite. */
  .site-footer .sf-frame{width:100%}
  /* Au survol, le nom en points (« Chronos », 60 px) déborde sur la colonne voisine et
     recouvrait « Contact » : la voisine recule avec les autres liens du groupe. */
  .site-footer.is-in .sf-grid:has(.dm-actif) > .sf-col:not(.dm-actif){opacity:.16;transition:opacity .28s cubic-bezier(.16,1,.3,1)}}
@media(max-width:719px){.sf-brand{grid-column:1/-1}}
.sf-k{display:block;font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:#8C99A8;margin-bottom:14px}
.sf-col a{display:block;width:max-content;font-family:var(--fd);font-size:var(--t-base);color:#E4E9EF;text-decoration:none;padding:5px 0;cursor:pointer;transition:color .2s}
.sf-col a:hover{color:#C0455E}
.sf-copy{padding:16px 36px 26px;text-align:center}
.sf-copy p{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.08em;color:#8C99A8;font-weight:400}
.sf-copy a{color:#8C99A8;text-decoration:none}
.sf-copy a:hover{color:#C0455E}
.sf-dotk{color:#C0455E}

/* ===================== LOADER ===================== */
.loader{position:fixed;inset:0;z-index:10;overflow:hidden}
/* deux panneaux plein écran, contenu IDENTIQUE clippé : la bulle s'ouvre le long du raccord */
/* Fond d'ouverture : le BLANC DU SITE, pas le crème d'origine (demande Maxime
   2026-08-13). Ce sont les valeurs relevées au pixel sur le canvas #glbg qui
   peint les sections claires : #E3E8F1 en haut, #DEE4EE en bas. Le crème
   précédent (#FCFCFB → #E8E7E1) était chaud et ne se retrouvait nulle part
   ailleurs sur le site. Le logo reste en encre, le fond étant clair. */
.panel{position:absolute;inset:0;overflow:hidden;will-change:transform,clip-path;
  background:radial-gradient(70% 60% at 50% 42%, #EAEEF5 0%, #E3E8F1 58%, #DCE2EC 100%)}
.panel::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;opacity:.05}
/* au repos : raccord PLAT (encoche fermée) → aucune ligne visible. L'encoche s'ouvre au reveal. */
.panel-top   {clip-path:polygon(0% 0%,100% 0%,100% 50%,84% 50%,74% 50%,62% 50%,50% 50%,38% 50%,26% 50%,16% 50%,0% 50%)}
.panel-bottom{clip-path:polygon(0% 50%,16% 50%,26% 50%,38% 50%,50% 50%,62% 50%,74% 50%,84% 50%,100% 50%,100% 100%,0% 100%)}
.stage{position:absolute;inset:0}
/* halo couleur fond : efface les lignes autour du logo (les courbes ne rentrent pas dans le texte) */
.halo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:840px;height:360px;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center, #EAEEF5 0%, #EAEEF5 42%, rgba(234,238,245,0) 76%)}
/* logo centré ; il s'élève et se dissout AVANT toute ouverture (rien ne le recouvre jamais) */
.brand{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;z-index:3}

/* fuite de lumière à travers l'ouverture (entre hero et panneaux) */
.lightleak{position:fixed;left:0;right:0;top:50%;height:46vh;transform:translateY(-50%);z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(55% 70% at 50% 50%, rgba(183,204,227,.50) 0%, rgba(165,184,208,.18) 42%, rgba(165,184,208,0) 72%)}
/* liseré signature qui épouse le bord de la bulle */
.seamline{position:fixed;inset:0;width:100%;height:100%;z-index:11;pointer-events:none;opacity:0}
.seamline path{fill:none;stroke:url(#sig);stroke-width:1.6px;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(165,184,208,.65))}
/* Wordmark de marque, en petit : le tracé vectoriel se suffit, rien autour. Les courbes
   ambiantes qui l'entouraient sont retirées (Maxime 28/07 : « ça fait cheap, ça n'utilise
   pas le loader qu'on a fait »). Un seul objet à l'écran, centré, sur le fond crème. */
/* scopé au loader : `.wm` est DÉJÀ le wordmark de la barre de nav (injecté par
   _shared/nav.js) — une règle nue sur .wm lui imposait notre largeur. */
.loader .wm-logo{display:block;margin:0 auto;width:clamp(190px,22vw,300px);height:auto;overflow:visible}

/* Bouton « Rejouer » : OUTIL DE DEV uniquement (relancer l'intro sans recharger).
   Masqué par défaut → invisible en production. Il n'apparaît que sur un hôte local
   ou avec ?dev=1 (classe .devtools posée au boot). Il mordait par ailleurs sur la
   légende hero de la zone modes (coin bas-droit), ce que ce masquage règle aussi. */
.replay{display:none;position:fixed;z-index:20;right:20px;bottom:20px;font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft-titanium);background:rgba(6,18,26,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(165,184,208,.2);padding:10px 16px;border-radius:9px;cursor:pointer}
body.devtools .replay{display:block}
.replay:hover{color:var(--stalactite)}
/* ===================== Traceur de souris (anneau + point, suivi GSAP) ===================== */
#cursor{position:fixed;top:-12px;left:-12px;width:24px;height:24px;border:1px solid rgba(192,69,94,.42);border-radius:50%;pointer-events:none;z-index:9998;will-change:transform;transition:width .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1),background .28s,opacity .3s,border-color .3s;opacity:0}
#cursor.on{width:42px;height:42px;background:rgba(192,69,94,.05);border-color:rgba(192,69,94,.5)}
#cursorDot{position:fixed;top:-2px;left:-2px;width:4px;height:4px;background:rgba(192,69,94,.8);border-radius:50%;pointer-events:none;z-index:9999;will-change:transform;opacity:0}
#cursor.hide,#cursorDot.hide{opacity:0!important}
@media (hover:none){#cursor,#cursorDot{display:none}}
/* ===================== Grain (texture film, élégance) ===================== */
.grain{position:fixed;inset:-60%;width:220%;height:220%;z-index:9000;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,3%)}}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}
/* ===================== Section CONTACT : wizard (DOM interactif, pas peint dans le canvas) ===================== */
.sec-contact{position:relative;overflow:hidden;align-items:flex-start}
.sec-contact .s-eyebrow,.sec-contact h2,.sec-contact .s-lead{-webkit-text-fill-color:currentColor!important}
/* Titre du modal : mot crème neutre (fond navy #0B1B27) + trait ruby SVG (initAccentTraits). Dégradé écarté par Maxime retiré. */
.sec-contact h2 .accent{color:#F7F6F4!important;-webkit-text-fill-color:#F7F6F4!important;background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important}
/* Confirmation du wizard : simple emphase ruby, sans trait (pas un titre), dégradé retiré. */
.sec-contact .cw-done .accent{color:#C0455E!important;-webkit-text-fill-color:#C0455E!important;background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important}
.cw-wm{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-weight:600;font-size:clamp(8rem,26vw,24rem);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(165,184,208,.06);white-space:nowrap;pointer-events:none;user-select:none;z-index:0;will-change:transform}
.sec-contact .cw-inner{position:relative;z-index:1;max-width:640px;width:100%}
.cw{margin-top:46px;max-width:520px}
.cw-prog{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.cw-count{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.16em;color:var(--soft-titanium);min-width:54px}
.cw-bar{flex:1;height:1px;background:rgba(165,184,208,.18);position:relative}
.cw-fill{position:absolute;left:0;top:0;height:100%;background:var(--grad);width:33%;transition:width .5s cubic-bezier(.16,1,.3,1)}
.cw-step{display:none}
.cw-step.show{display:block}
.cw-step.anim{animation:cwin .5s cubic-bezier(.16,1,.3,1)}
@keyframes cwin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cw-q{font-size:var(--t-lead);font-weight:500;letter-spacing:-.01em;margin-bottom:24px;color:var(--stalactite)}
.cw-back{background:none;border:none;color:var(--soft-titanium);font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.06em;cursor:pointer;margin-bottom:18px;padding:0;transition:color .2s}
.cw-back:hover{color:var(--stalactite)}
.cw-opts{display:flex;flex-direction:column}
.cw-opt{display:flex;align-items:center;gap:18px;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:19px 4px;border-top:1px solid rgba(165,184,208,.14);color:var(--stalactite);font-family:var(--fd);font-size:var(--t-large);font-weight:500;transition:padding-left .3s cubic-bezier(.16,1,.3,1),color .2s}
.cw-opt:last-child{border-bottom:1px solid rgba(165,184,208,.14)}
.cw-opt:hover{padding-left:14px}
/* #E06A85 et non #C0455E : 13 px sur #0B1B27, le rubis ne tenait que 3,6:1 (audit 23/09, M16). */
.cw-opt .cw-on{font-family:var(--fm);font-size:var(--t-petit);color:#E06A85}
.cw-opt .cw-oh{margin-left:auto;font-family:var(--fm);font-size:var(--t-micro);color:#8595A8;transition:color .2s}
.cw-opt:hover .cw-oh{color:var(--cashmere)}
.cw-ta,.cw-in{width:100%;background:rgba(165,184,208,.05);border:1px solid rgba(165,184,208,.16);border-radius:12px;color:var(--stalactite);font-family:var(--fd);font-size:var(--t-base);padding:15px 16px;outline:none;transition:border-color .25s,background .25s}
.cw-ta{min-height:120px;resize:none;line-height:1.5}
.cw-ta:focus,.cw-in:focus{border-color:rgba(192,69,94,.55);background:rgba(165,184,208,.07)}
.cw-ta::placeholder,.cw-in::placeholder{color:#8595A8}
.cw-fields{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
/* Libellés réels des champs (audit 23/09, M12) : discrets, au-dessus du champ. */
.cw-field{display:flex;flex-direction:column;gap:7px}
.cw-lbl{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.04em;color:#A5B4C6}
.cw-in[aria-invalid="true"]{border-color:#E0A34A;background:rgba(224,163,74,.06)}
.cw-q:focus,.cw-done:focus{outline:none}
.cw-cal{margin:6px 0 22px;border:1px dashed rgba(165,184,208,.22);border-radius:14px;padding:18px}
.cw-cal-lbl{font-family:var(--fm);font-size:var(--t-micro);color:#8595A8;margin-bottom:14px}
.cw-slots{display:flex;flex-wrap:wrap;gap:8px}
.cw-slot{font-family:var(--fm);font-size:var(--t-petit);color:var(--cashmere);border:1px solid rgba(165,184,208,.2);border-radius:999px;padding:9px 14px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.cw-slot:hover,.cw-slot.sel{border-color:#C0455E;color:var(--stalactite);background:rgba(192,69,94,.1)}
.cw-next,.cw-book{margin-top:24px;font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.08em;text-transform:uppercase;color:var(--stalactite);background:var(--alu-ruby);box-shadow:var(--alu-inset);border:none;border-radius:999px;padding:15px 28px;cursor:pointer;transition:transform .2s,box-shadow .3s}
.cw-next:hover,.cw-book:hover{transform:translateY(-1px)}
.cw-calnote{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.04em;color:#8595A8;margin:4px 0 2px;max-width:none;line-height:1.5}
/* Champ piege : hors du flux plutot que display:none, que certains robots savent lire. */
.cw-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.cw-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
/* Les deux boutons finaux n'étaient pas alignés (audit 23/09, M12) : .cw-book héritait de la
   marge haute de .cw-next (24 px) dans une rangée centrée, et mesurait 47 px contre 45.
   La marge passe à la rangée, et les deux boutons prennent la même hauteur. */
.cw-actions .cw-book{margin-top:0}
.cw-actions .cw-book,.cw-actions .cw-send{min-height:47px;box-sizing:border-box}
.cw-send{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.06em;color:var(--cashmere);background:none;border:1px solid rgba(165,184,208,.28);border-radius:999px;padding:13px 20px;cursor:pointer;transition:border-color .2s,color .2s,opacity .2s}
.cw-send:hover:not(:disabled){border-color:#C0455E;color:var(--stalactite)}
.cw-send:disabled{opacity:.55;cursor:default}
.cw-msg{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.04em;margin-top:12px;min-height:1.3em;color:#8595A8;max-width:44ch;line-height:1.5}
.cw-msg.err{color:#E0A34A}
.cw-escapes{margin-top:30px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cw-just{font-size:var(--t-base);color:var(--cashmere);text-decoration:none;border-bottom:1px solid rgba(165,184,208,.35);padding-bottom:3px;transition:color .2s,border-color .2s}
.cw-just:hover{color:var(--stalactite);border-color:var(--stalactite)}
.cw-done{font-size:var(--t-large);font-weight:500;color:var(--stalactite)}
/* === Wizard en MODAL (popup déclenché par le bouton Contact) === */
.cw-modal{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:4vh 4vw}
.cw-modal.open{display:flex}
.cw-modal::before{content:"";position:absolute;inset:0;background:rgba(4,10,16,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cw-dialog{position:relative;z-index:1;width:min(640px,100%);max-height:90vh;overflow-y:auto;overflow-x:hidden;background:#0B1B27;border:1px solid rgba(165,184,208,.14);border-radius:20px;padding:46px 42px;box-shadow:0 30px 90px rgba(0,0,0,.6);animation:cwModalIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes cwModalIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
.cw-dialog .cw{margin-top:32px}
/* En-tête de la modale (audit 23/09, m8). La modale n'est pas une .sec : son surtitre, son
   titre et son chapeau ne recevaient aucun des styles de section et s'enchaînaient collés,
   le surtitre en corps de texte. On leur rend le surtitre du site et de l'air entre eux. */
.cw-dialog .s-eyebrow{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.22em;text-transform:uppercase;color:var(--cashmere);display:flex;align-items:center;gap:14px;margin-bottom:14px}
.cw-dialog .s-eyebrow::before{content:'';width:34px;height:2px;background:var(--grad)}
.cw-dialog h2{line-height:1.12;letter-spacing:-.02em}
.cw-dialog .s-lead{margin-top:12px;color:var(--soft-titanium)}
.cw-x{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--soft-titanium);font-size:var(--t-base);line-height:1;cursor:pointer;padding:9px;border-radius:50%;transition:color .2s,background .2s;z-index:2}
.cw-x:hover{color:var(--stalactite);background:rgba(165,184,208,.08)}
.cw-cal-embed{min-height:540px;margin-top:24px;width:100%}
.cw-cal-embed iframe{border-radius:12px;width:100%!important}
/* ===================== Section À PROPOS : typo + grue en épure (DOM visible) ===================== */
.sec-about{align-items:flex-start;justify-content:center}
.sec-about .ab-text{max-width:880px}
.sec-about .s-eyebrow,.sec-about h2,.sec-about .s-lead,.sec-about .ab-row{-webkit-text-fill-color:currentColor!important}
.sec-about h2 .accent{-webkit-text-fill-color:transparent!important;background:var(--grad)!important;-webkit-background-clip:text!important;background-clip:text!important}
.sec-about h2{font-weight:600;font-size:var(--t-t1);letter-spacing:-.02em;line-height:1.08}
.sec-about .ab-text .s-lead{margin-top:26px;color:#CFD0D4;max-width:46ch;font-size:var(--t-base)}
.ab-triple{margin-top:30px}
.ab-row{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid rgba(165,184,208,.14)}
.ab-row:last-child{border-bottom:1px solid rgba(165,184,208,.14)}
.ab-n{font-family:var(--fm);font-size:var(--t-petit);color:#C0455E;min-width:2em}
.ab-t{font-size:var(--t-base);font-weight:500}
.ab-d{margin-left:auto;font-family:var(--fm);font-size:var(--t-micro);color:#8595A8}
.ab-stage{justify-self:center}
.cr{width:min(420px,42vw);height:auto;overflow:visible;display:block}
.cr .ln{fill:none;stroke:var(--cashmere);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.cr.draw .ln{animation:crdraw 1.1s cubic-bezier(.16,1,.3,1) forwards}
.cr .ln.r{stroke:#C0455E}
.cr .load{opacity:0;transform-box:fill-box;transform-origin:center}
.cr.draw .load{animation:crpop .5s cubic-bezier(.16,1,.3,1) 1.1s forwards}
@keyframes crdraw{to{stroke-dashoffset:0}}
@keyframes crpop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cr.draw .ln:nth-of-type(1){animation-delay:0s}
.cr.draw .ln:nth-of-type(2){animation-delay:.15s}
.cr.draw .ln:nth-of-type(3){animation-delay:.45s}
.cr.draw .ln:nth-of-type(4){animation-delay:.7s}
.cr.draw .ln:nth-of-type(5){animation-delay:.7s}
.cr.draw .ln:nth-of-type(6){animation-delay:.9s}
.cr.draw .ln:nth-of-type(7){animation-delay:.9s}
.cr.draw .ln:nth-of-type(8){animation-delay:1.05s}
.cr-cap{margin-top:18px;text-align:center;font-family:var(--fm);font-size:var(--t-micro);color:#8595A8}
@media(max-width:900px){.sec-about{grid-template-columns:1fr!important;gap:7vh}.cr{width:min(360px,70vw)}}

/* ===================== MOBILE : nav épurée (logo + langue + Contact), liens repliés ===================== */
@media (max-width:600px){
  /* nav mobile (logo + langue + Contact) → _shared/nav.css */
  /* titre hero : assez petit pour que la ligne la plus longue tienne sans déborder (nowrap gardé) */
  h1{font-size:clamp(1.35rem,6.4vw,2.1rem)}
  .copy{left:var(--gut);max-width:88vw}
  /* kicker hero : 46 caractères en mono, il doit tenir sur UNE ligne. À .1em il débordait
     sous 384px (iPhone SE, 8, 12/13 mini, Galaxy) : le tiret décrochait sur sa propre ligne.
     On resserre la lettre plutôt que de couper le texte. flex-wrap reste en filet de
     sécurité : mieux vaut deux lignes qu'un débordement horizontal. */
  .hero .eyebrow{font-size:9.5px;letter-spacing:.06em;gap:10px;flex-wrap:wrap}
  .hero .eyebrow::before{width:22px}
}
/* Sous 376px (Galaxy à 360, et les écrans étroits en général) la ligne ne tient plus
   même resserrée : un cran de plus, mesuré jusqu'à 320px. */
@media(max-width:376px){
  .hero .eyebrow{font-size:8.4px;letter-spacing:.03em;gap:8px}
}
/* ===================== Accessibilité : mouvement réduit ===================== */
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none!important;opacity:1!important;transform:none!important}
  .sec h2 .line>span{transform:none!important;transition:none!important}
}

/* ============================================================================
 * CHAMPS D'ACTIONS — liste en lignes, reprise de V5 (composition C3).
 * Motif : une ligne par champ, nom à gauche, outil à droite, un filet entre chaque,
 * et l'inversion au survol. Version CLAIRE, la section étant en sec-light.
 * ========================================================================== */

.sec-champs{ padding: clamp(90px,12vh,150px) 0; }
.ca-wrap{ max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.ca-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  color:#5A6B7D;
}
.ca-eyebrow::before{ content:''; width:34px; height:2px; flex:none; background:#9E2242; }
.ca-title{
  margin:18px 0 0; max-width:18ch;
  font-size:var(--t-t2); font-weight:600; letter-spacing:-.024em; line-height:1.08;
  color:#0B1B27;
}
.ca-rows{ margin-top:44px; border-top:1px solid rgba(11,27,39,.16); }
.ca-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; /* numéros 01-03 retirés (Maxime, 24/09) */
  align-items:center; gap:24px;
  padding:26px clamp(16px,2vw,28px);
  border-bottom:1px solid rgba(11,27,39,.16);
  text-decoration:none; color:inherit;
  transition:background .18s ease, color .18s ease, padding-left .18s ease;
}
.ca-row:hover{ background:#0B1B27; color:#F7F6F4; padding-left:clamp(24px,3vw,40px); }
.ca-n{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:var(--t-petit); letter-spacing:.14em; color:#9E2242; }
.ca-row:hover .ca-n{ color:#E06A85; } /* rangée inversée (fond sombre) : 4,5:1 au moins (audit 23/09, M16) */
.ca-name{ font-size:var(--t-large); font-weight:600; letter-spacing:-.016em; color:#0B1B27; }
.ca-row:hover .ca-name{ color:#F7F6F4; }
.ca-tag{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--t-micro); color:#516276; white-space:nowrap; /* #5A6B7D : 4,1 à 4,4:1 sur le dégradé clair ; #516276 : 4,6 au pire (audit 23/09, M16) */
}
.ca-row:hover .ca-tag{ color:#B8C8DC; }
.ca-go{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:var(--t-base); color:rgba(11,27,39,.35); }
.ca-row:hover .ca-go{ color:#F7F6F4; }

@media (max-width:760px){
  .ca-row{ grid-template-columns:minmax(0,1fr); gap:10px 16px; }
  /* m3 (audit 23/09) : en nowrap, « Tenir planning, courrier et décisions » sortait du filet
     (379 px pour 363) à 390 px. La ligne se replie dans sa colonne. */
  .ca-tag{ grid-column:1; white-space:normal; line-height:1.5; }
  .ca-go{ display:none; }
}

/* ============================================================================
 * FOOTER — bande pixelisée en fond (essai du 13/08)
 * La vidéo source n'est jamais affichée : elle alimente le canvas, qui la rend en
 * gros pixels teintés dans les bleus. Le contenu du footer passe par-dessus, avec
 * un voile pour que le texte tienne.
 * ========================================================================== */

.site-footer{ overflow:hidden; }
/* La pill quitte l'écran sur le footer : pas de fondu, elle SORT par le haut.
   Rien en CSS ici, tout passe par GSAP dans index.html, parce que le verre de
   la pill est peint dans un canvas plein écran (#gl) qui ne peut pas glisser :
   c'est __glassBarY qui déplace la barre de verre, en même temps que la nav. */
.sf-px-wrap{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.sf-px-src{ position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; }
.sf-px{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  image-rendering:pixelated; -ms-interpolation-mode:nearest-neighbor;
  opacity:1;
}
.sf-px-wrap::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,20,29,.72) 0%, rgba(8,20,29,.24) 26%, rgba(8,20,29,.14) 58%, rgba(8,20,29,.62) 100%),
    linear-gradient(90deg, rgba(8,20,29,.82) 0%, rgba(8,20,29,.40) 42%, rgba(8,20,29,.06) 100%);
}
.site-footer .sf-frame{ position:relative; z-index:1; }

/* Le footer gagne en hauteur : la bande a besoin d'air pour qu'on lise la flèche
   de la grue, et le contenu se pose en bas plutôt que d'être centré dans un ruban. */
.site-footer{ min-height:clamp(820px,100vh,1180px); display:flex; flex-direction:column; justify-content:flex-end; }
/* Le cadre du footer portait un halo bordeaux à 10 % en haut à gauche
   (radial-gradient d'origine) : sur la bande pixelisée bleue, il virait au violet
   et cassait la teinte. Il est remplacé par un voile encre, sans couleur, dont le
   seul rôle est de garantir la lisibilité du texte au-dessus de l'image. */
.site-footer .sf-frame{
  background:linear-gradient(180deg, rgba(8,20,29,.58) 0%, rgba(8,20,29,.80) 55%, rgba(8,20,29,.90) 100%);
}

/* Apparition du texte à l'entrée du footer : montée de 14 px et opacité, en cascade
   par colonne. Sobre, dans le même geste que le reste du site. */
.site-footer .sf-grid > *,
.site-footer .sf-bottom{
  opacity:0; transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.site-footer.is-in .sf-grid > *{ opacity:1; transform:none; }
.site-footer.is-in .sf-grid > *:nth-child(1){ transition-delay:.02s }
.site-footer.is-in .sf-grid > *:nth-child(2){ transition-delay:.12s }
.site-footer.is-in .sf-grid > *:nth-child(3){ transition-delay:.20s }
.site-footer.is-in .sf-grid > *:nth-child(4){ transition-delay:.28s }
.site-footer.is-in .sf-bottom{ opacity:1; transform:none; transition-delay:.38s }

@media (prefers-reduced-motion:reduce){
  .site-footer .sf-grid > *,
  .site-footer .sf-bottom{ opacity:1; transform:none; transition:none; }
}

/* ===================== Cibles tactiles (audit 23/09, M17) =====================
   Zone active portée à 44 px au moins par un ::after transparent en retrait négatif :
   le dessin ne bouge pas d'un pixel, seule la surface qui reçoit le doigt grandit.
   Liens empilés du pied de page (27 px de pas) : 44 px chevaucheraient le voisin et
   rendraient la cible ambiguë ; ils restent à 27 px, au-dessus du minimum AA de 24 px. */
.cw-x::after,.cw-back::after,.cw-just::after,.sf-socials a::after,.sf-mark::after{content:'';position:absolute}
.cw-back,.cw-just,.sf-socials a,.sf-mark{position:relative}
.cw-x::after{inset:-7px -7px}                 /* 30×34 → 44×48 */
.cw-back::after{inset:-14px -6px}             /* 68×17 → 80×45 */
.cw-just::after{inset:-3px 0}                 /* 38 → 44 */
.sf-socials a::after{inset:-5px}              /* 34×34 → 44×44, sans chevaucher (écart 10 px) */
.sf-mark::after{inset:-9px -4px}              /* 26 → 44 */

/* === La suite : Cabestian OS et ses trois applications en gel 3D (06/10) ===
   Section hors .sec : le fond et le texte sont du DOM (les .sec sont peintes dans le canvas de la page). */
/* z-index 6 : la fiche épinglée (z 4) et le suiveur (z 3) du showcase sont fixed et restent visibles tant que leur zone n'est pas passée ; la suite doit les recouvrir à son entrée */
.suite{position:relative;z-index:6;background:linear-gradient(180deg,#EAEEF5 0%,#D8DFEA 100%);color:#06121A;padding:15vh var(--gut) 11vh}
.suite-wrap{max-width:1180px;margin:0 auto}
.suite-eyebrow{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.24em;text-transform:uppercase;color:var(--ruby);display:flex;align-items:center;gap:14px;margin:0 0 24px}
.suite-eyebrow::before{content:"";width:32px;height:1px;background:var(--grad)}
.suite h2{font-family:var(--fd);font-weight:600;font-size:var(--t-t1);letter-spacing:-.02em;line-height:1.06;color:var(--navy);max-width:18ch;margin:0}
.suite-lead{margin:24px 0 0;max-width:56ch;font-size:var(--t-base);line-height:1.62;color:#3c4c60}
.gel{position:relative;width:100%;height:clamp(250px,33vw,420px);margin-top:7vh;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;outline-offset:8px}
.gel:active{cursor:grabbing}
.gel canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gel-noms{position:absolute;inset:0;pointer-events:none;font:600 clamp(12px,1.05vw,15px) var(--fd);letter-spacing:.01em;color:#6b7686}
.gel-noms span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;transition:color .3s}
.gel-noms .on{color:#06121A}
.gel.gel-sans-webgl{height:auto}
@media (max-width:760px){.gel{height:clamp(190px,46vw,280px)}}

/* === Portail vers « Pour qui » : le mot est une fenêtre dans le papier, la caméra entre dans le Q === */
.portail{position:relative;z-index:6;background:linear-gradient(180deg,#D8DFEA 0%,#EAEEF5 100%);color:#06121A;--pt-h:100svh;--pt-long:2.6}
.pt-viewport{position:absolute;inset:0 auto auto 0;height:100vh;height:100svh;width:0;pointer-events:none;visibility:hidden}
.pt-pin{position:relative;height:var(--pt-h);overflow:clip;isolation:isolate}
.pt-field{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden}
.portail[data-pt-ready] .pt-field{opacity:1}
.pt-field i{position:absolute;inset:0;transform:scale(var(--pt-zoom,1));background:#0B1826}
.portail::after{content:\"\";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.24;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px 220px}
.pt-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pt-glyph{font-family:'InterBlack',var(--fd);font-weight:900;font-size:100px;font-kerning:none;font-variant-ligatures:none;letter-spacing:-3px}
.pt-indice{position:absolute;left:var(--gut);right:var(--gut);bottom:9%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.2em;text-transform:uppercase;color:#3c4c60;opacity:var(--pt-indice,1)}
.pt-indice a{color:inherit;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid rgba(60,76,96,.4)}
.pt-indice a:focus-visible{outline:2px solid #06121A;outline-offset:5px}
.pt-content{position:relative;box-sizing:border-box;min-height:var(--pt-h);padding:clamp(40px,10vh,120px) var(--gut);display:grid;align-content:center;color:#F7F6F4;background:#0B1826}
.pt-texte{max-width:860px}
.pt-ey{font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.24em;text-transform:uppercase;color:#A5B8D0;display:flex;align-items:center;gap:14px;margin:0 0 24px}
.pt-ey::before{content:"";width:32px;height:1px;background:var(--grad)}
.pt-ti{font-family:var(--fd);font-weight:500;font-size:var(--t-t1);letter-spacing:-.022em;line-height:1.1;max-width:18ch;margin:0;color:#F7F6F4}
.pt-ti .pq-acc{color:#E0788D!important;-webkit-text-fill-color:#E0788D!important}
.pt-why{margin:22px 0 0;font-size:var(--t-base);line-height:1.6;max-width:52ch;color:#CFD0D4}
.portail[data-pt-motion=on] .pt-pin{position:sticky;top:0}
.portail[data-pt-motion=on] .pt-content{margin-top:calc((var(--pt-long) - 1)*var(--pt-h));background:transparent;opacity:var(--pt-reveal,0);pointer-events:none}
.portail[data-pt-motion=on][data-pt-entre=true] .pt-content{pointer-events:auto}
.portail[data-pt-motion=on] .pt-content:focus-within{opacity:1;pointer-events:auto}
.portail[data-pt-motion=off] .pt-indice span{display:none}
/* Les trois rôles du projet : titre et phrase côte à côte, puis trois cartes pleine largeur (07/10) */
.pt-texte{max-width:1240px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(24px,5vw,80px);align-items:end}
.pt-texte .pt-ey{grid-column:1/-1}
.pt-texte .pt-ti{max-width:14ch}
.pt-texte .pt-why{margin:0;max-width:44ch;padding-bottom:.4em}
.pt-cartes{grid-column:1/-1;list-style:none;margin:clamp(32px,6vh,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.pt-carte{display:flex;flex-direction:column;gap:14px;box-sizing:border-box;padding:clamp(22px,2.4vw,34px);border:1px solid rgba(165,184,208,.24);border-radius:6px;background:rgba(255,255,255,.035);transition:border-color .35s,background .35s}
.pt-carte:hover{border-color:rgba(224,120,141,.6);background:rgba(255,255,255,.06)}
.pt-nom{font-family:var(--fd);font-weight:600;font-size:var(--t-large);letter-spacing:-.016em;line-height:1.15;color:#F7F6F4}
.pt-tag{font-size:var(--t-base);line-height:1.5;color:#B7C4D6}
@media (max-width:760px){.pt-texte{grid-template-columns:minmax(0,1fr);row-gap:18px}.pt-cartes{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.pt-carte{transition:none}}
@media (prefers-reduced-motion:reduce){.portail .pt-pin{position:relative!important}.portail .pt-content{margin-top:0!important;opacity:1!important;min-height:0;padding-block:64px}.pt-indice span{display:none}}

/* === Portail « Conseil et déploiement » (07/10) : CABESTIAN OS en grand, la caméra entre dans le O, on voit les briques du moteur === */
.pt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pt-ey2{position:absolute;left:var(--gut);top:clamp(70px,11%,130px);margin:0;font-family:var(--fm);font-size:var(--t-petit);letter-spacing:.24em;text-transform:uppercase;color:var(--ruby);display:flex;align-items:center;gap:14px;opacity:var(--pt-indice,1)}
.pt-ey2::before{content:"";width:32px;height:1px;background:var(--grad)}
.pt-front{margin-top:20px}
.pt-head{position:absolute;left:var(--gut);right:var(--gut);top:calc(clamp(70px,11%,130px) + 36px);opacity:var(--pt-indice,1);pointer-events:var(--pt-front-hit,auto)}
.pt-lead{margin:0;max-width:58ch;font-size:clamp(20px,2.2vw,32px);line-height:1.22;font-weight:600;letter-spacing:-.01em;color:var(--navy);text-wrap:balance}
.pt-cta{margin:0}
.pt-bt-a{fill:#A5B8D0}
.pt-btn{-webkit-text-fill-color:currentColor!important;color:var(--navy)!important;background:transparent!important;border:1px solid rgba(6,18,26,.4);box-shadow:none!important;backdrop-filter:none!important}
.pt-btn:hover{background:rgba(6,18,26,.07)!important;border-color:rgba(6,18,26,.7)}
.pt-marks{pointer-events:none}
.pt-indice{bottom:clamp(14px,3.5%,40px);justify-content:flex-start;gap:2.2rem}
/* la pile de briques est un SVG dans le fond, dessiné dans l'espace de la lettre d'entrée (voir portail.js) */
.pt-bsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform:scale(var(--pt-zoom,1))}
.pt-bt{font-family:var(--fm);letter-spacing:.04em;fill:#F7F6F4}
.pt-bt-d{fill:#A5B8D0}
.pt-source{list-style:none}
/* dernier zoom : les cartes arrivent du fond, légèrement agrandies, et se posent */
.portail[data-pt-motion=on] .pt-texte{transform:scale(calc(.9 + .1*var(--pt-texte,0)));transform-origin:50% 50%}
.portail[data-pt-motion=on] .pt-content{opacity:var(--pt-texte,0)}
@media (max-width:760px){.pt-head{top:112px}.pt-lead{font-size:21px}.pt-ey2{top:76px}.pt-indice{bottom:84px}}