/* PRIMOE — maquette « LPAS » v6 : une seule famille (General Sans), ouverture A (vidéo) par défaut, B, C, D en maquette,
   cinq panneaux d'expertise qui glissent et s'arrêtent sur chaque carte (section Méthode retirée),
   puis des sections éditoriales. Le texte reste immobile pendant la lecture. */
@font-face{font-family:"General Sans";src:url("fonts/lpas-generalsans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("fonts/lpas-generalsans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("fonts/lpas-generalsans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* repli métrique (Arial recalé sur General Sans : largeurs, ascendante, descendante) : pas de décalage quand la police arrive */
@font-face{font-family:"General Sans repli";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Roboto");font-weight:400;
  size-adjust:101%;ascent-override:100%;descent-override:23.8%;line-gap-override:9.9%}
@font-face{font-family:"General Sans repli";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Roboto");font-weight:500 600;
  size-adjust:103.5%;ascent-override:97.6%;descent-override:23.2%;line-gap-override:9.7%}

:root{
  --paper:#fbfbfa;
  --stone:#efeeea;          /* béton clair */
  --navy:#16354e;
  --deep:#0f2438;
  --ink:#1c222b;
  --mute:#4a5361;           /* 7,6:1 sur --paper */
  --bronze:#9c7a3c;
  --line:rgba(22,53,78,.16);
  --line2:rgba(22,53,78,.32);
  --f:"General Sans","General Sans repli",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(20px,3.5vw,50px);
  --sec:clamp(80px,11vh,136px);
  --eo:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%;
  scrollbar-color:color-mix(in srgb,var(--navy) 70%,transparent) var(--stone)}
body{font-family:var(--f);font-size:1.125rem;line-height:1.6;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:clip;font-kerning:normal}
body.menuopen{overflow:hidden}
::selection{background:var(--navy);color:#fff}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
p{text-wrap:pretty}
h1,h2,h3{font-weight:500;letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
.wrap{margin:0 auto;width:100%;max-width:1440px;padding:0 var(--gut)}
.nb{white-space:nowrap}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
main:focus{outline:none}
section[id]{scroll-margin-top:0}
.skip{position:fixed;top:12px;left:12px;z-index:300;background:var(--paper);color:var(--navy);padding:12px 18px;font-weight:500;
  text-decoration:none;border-radius:6px;transform:translateY(-200%)}
.skip:focus{transform:none}
.ico{width:1em;height:1em;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tag{font-size:1.0625rem;line-height:1.3;color:#fff;background:rgba(15,36,56,.82);padding:3px 9px;border-radius:4px}

/* ================= en-tête : deux pastilles sombres, lisibles sur tout fond ================= */
.top{position:fixed;inset:0 0 auto;z-index:120;pointer-events:none}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:22px}
.top a,.top button{pointer-events:auto}
.brand{font-size:1.375rem;font-weight:600;letter-spacing:-.03em;padding:0 18px}
.burger .bars{display:grid;gap:6px;width:22px}
.burger .bars i{display:block;height:1.5px;background:currentColor}
.top :focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--deep)}
@media(max-width:620px){.top .wrap{padding-top:14px}}

/* menu (dialogue) */
.mmenu{position:fixed;inset:0;z-index:200;background:var(--deep);color:#fff;display:flex;flex-direction:column;
  padding:96px var(--gut) 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s ease-out,visibility 0s linear .25s}
body.menuopen .mmenu{opacity:1;visibility:visible;transition:opacity .25s ease-out}
.mmenu nav{display:flex;flex-direction:column;max-width:900px}
.mmenu a.mlink{display:flex;justify-content:space-between;align-items:center;font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:500;letter-spacing:-.025em;line-height:1.15;
  color:#fff;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.mmenu a.mlink:hover{text-decoration:underline;text-decoration-thickness:2px}
.mmenu .mclose{position:absolute;top:22px;right:var(--gut);background:rgba(255,255,255,.1)}
.mmenu :focus-visible{outline-color:#fff}
@media(max-width:620px){.mmenu .mclose{top:14px}}
@media(prefers-reduced-motion:reduce){.mmenu,body.menuopen .mmenu{transition:none}}

/* ================= boutons ================= */

/* ================= OUVERTURE (trois propositions) =================
   Même HTML pour les trois : seul l'attribut data-hero (a par défaut) change la mise en scène. */
.stage{position:relative;background:var(--deep)}
.pin{position:relative}
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);color:#fff;
  min-height:640px;min-height:max(640px,100svh);display:flex;flex-direction:column}
.hero-in{position:static;flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);
  padding-top:112px;padding-bottom:clamp(28px,5vh,56px)}
.hero-camera{position:absolute;inset:0;width:100%;height:100%}
.hero-camera picture,.hero-camera img{position:absolute;inset:0;width:100%;height:100%}
.hero-camera{z-index:-2;transform-origin:68% 45%;overflow:hidden}
.hero-camera img{object-fit:cover;object-position:60% center}
.hero-xp,.reel-pause{display:none}
.hero-offer,.hero-loc{font-size:1.0625rem;font-weight:500;line-height:1.4}
.hero h1{letter-spacing:-.034em}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.hero .down{display:inline-flex;align-items:center;gap:14px;min-height:44px;color:inherit;text-decoration:none;font-size:1.0625rem;font-weight:500}
.hero .down:hover span:first-child{text-decoration:underline}
.hero :focus-visible{outline-color:currentColor}
@media(prefers-reduced-motion:reduce){.hero-camera{transform:none!important}}

/* ---------- A : image plein cadre, composition éditoriale asymétrique ---------- */
.hero h1{grid-column:1/span 8;grid-row:2;align-self:end;font-weight:400;font-size:clamp(2.75rem,5.6vw,5.75rem);line-height:1;max-width:14ch}
.hero-offer{grid-column:10/-1;grid-row:2;align-self:end;max-width:26ch;color:#e4e9ee;padding-bottom:6px}
.hero-act{grid-column:1/-1;grid-row:3;margin-top:clamp(26px,4.4vh,44px)}
.hero-in::after{content:"";grid-column:1/-1;grid-row:4;align-self:start;border-top:1px solid rgba(255,255,255,.3);margin-top:clamp(22px,3.6vh,36px)}
.hero-loc{grid-column:1/span 4;grid-row:4;align-self:center;margin-top:clamp(22px,3.6vh,36px)}
.hero-tag{grid-column:5/span 4;grid-row:4;justify-self:start;align-self:center;margin-top:clamp(22px,3.6vh,36px)}
.hero .down{grid-column:9/-1;grid-row:4;justify-self:end;margin-top:clamp(22px,3.6vh,36px)}
.hero-in{grid-template-rows:1fr auto auto auto}
.hero-offer,.hero-loc,.hero-tag,.hero .down,.hero h1,.hero-act{position:relative}

/* ---------- A v5 : composition affinée, entrée (filet + rideau), transition de matière (WebGL), sortie vers la séquence ----------
   Tout est réservé à data-hero="a" : B, C et D ne changent pas. */
/* mobile et tablette en portrait : vidéo verticale 4:5 (Panthéon au centre du cadre) */
[data-hero="a"] .hero-camera picture{display:none}
[data-hero="a"].a-img .hero-camera picture{display:block}
.hero-camera canvas.hero-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.hero-camera.gl-on canvas.hero-gl{opacity:1}
/* sans WebGL : un grain fixe, très léger, masque la douceur de la vidéo 720p agrandie */
[data-hero="a"]:not(.a-img) .hero-camera:not(.gl-on)::after{content:"";position:absolute;inset:0;opacity:.04;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-lift{position:absolute;left:0;right:0;bottom:0;z-index:0;height:1px;background:rgba(255,255,255,.6);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
/* légende : la vidéo n'est pas une opération PRIMOE ; en repli (images IA), « Visuel illustratif » */
.hero-vbtn{margin-left:14px;min-height:44px;padding:0 2px;border:0;background:none;color:#fff;font:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:4px}
.hero-vbtn:hover{text-decoration-color:#fff}
.hero-vbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* voile : sombre là où se lit le texte (bas et gauche), l'image respire en haut et à droite */
[data-hero="a"] .hero h1{grid-column:1/span 9;font-size:clamp(2.6rem,4.9vw,4.6rem);line-height:.98;letter-spacing:-.038em;max-width:13.6em;text-wrap:wrap} /* accents (Î, é) non rognés, sans changer la mise en page */
[data-hero="a"] .hero-offer{grid-column:10/-1;color:rgba(255,255,255,.86);max-width:24ch;padding-bottom:.55em}
[data-hero="a"] .hero-act{margin-top:clamp(30px,5vh,52px)}
[data-hero="a"] .hero-in::after{border-top-color:rgba(255,255,255,.26);transform:scaleX(var(--rule,1));transform-origin:0 50%}
[data-hero="a"] .hero-loc{color:rgba(255,255,255,.9)}
/* légende : discrète, sans pastille ; le bouton Pause de la vidéo la suit */
[data-hero="a"] .hero-tag{display:flex;align-items:center;background:none;padding:0;border-radius:0;font-size:1rem;letter-spacing:.005em;color:rgba(255,255,255,.84)}
[data-hero="a"] .hero-vbtn{min-width:48px}
/* sortie (bureau, mode horizontal) : --sq va de 0 à 1 sur les premiers 60 % du glissement de la première carte */
html.hz[data-hero="a"] .hero-camera{clip-path:inset(calc(var(--sq,0) * 9%) calc(var(--sq,0) * 5%) calc(var(--sq,0) * 9%) calc(var(--sq,0) * 5%));
  transform:scale(calc(1 - var(--sq,0) * .02))}
html.hz[data-hero="a"] .hero h1{opacity:calc(1 - var(--sq,0));translate:0 calc(var(--sq,0) * -5vh)}
html.hz[data-hero="a"] :is(.hero-offer,.hero-act,.hero-loc,.hero-tag,.down){opacity:calc(1 - var(--sq,0) * 1.6)}
html.hz[data-hero="a"] .hero-in::after{opacity:calc(1 - var(--sq,0) * 1.6)}
/* avant l'entrée (script chargé) : rien ne clignote ; repli d'affichage au bout de 2,2 s si le script échoue */
@keyframes a-show{to{visibility:visible;clip-path:inset(0% 0% 0% 0%)}}
@media(prefers-reduced-motion:no-preference){
  html.js[data-hero="a"]:not(.a-ready) :is(.hero-offer,.hero-act,.hero-loc,.hero-tag,.hero .down){visibility:hidden;animation:a-show 0s 2.2s forwards}
  html.js[data-hero="a"]:not(.a-ready) .hero-camera{clip-path:inset(100% 0% 0% 0%);animation:a-show 0s 2.2s forwards}
}
/* le titre n'attend sa révélation (masque, lpas-home.js) que sur bureau : écran > 760 px ET pointeur fin.
   Mobile et tablette tactile : aucun état initial masqué, le titre est peint au premier rendu (LCP) ;
   le rideau (.hero-camera, z-index -2) passe dessous et ne le recouvre jamais. */
@media(prefers-reduced-motion:no-preference) and (min-width:761px) and (pointer:fine){
  html.js[data-hero="a"]:not(.a-ready) .hero h1{visibility:hidden;animation:a-show 0s 2.2s forwards}
}
@media(min-width:761px) and (max-width:900px){
  [data-hero="a"] .hero-in{grid-template-rows:1fr auto auto auto auto}
  [data-hero="a"] .hero h1{grid-column:1/-1}
  [data-hero="a"] .hero-offer{grid-column:1/span 8;grid-row:3;margin-top:22px;padding:0;max-width:34ch}
  [data-hero="a"] .hero-act{grid-row:4}
  [data-hero="a"] .hero-in::after,[data-hero="a"] .hero-loc,[data-hero="a"] .hero-tag,[data-hero="a"] .hero .down{grid-row:5}
}
@media(max-width:760px){
  /* vidéo verticale : le Panthéon occupe le tiers haut du cadre ; le texte, plus compact, reste dans les deux tiers bas */
  [data-hero="a"] .hero h1{font-size:clamp(2rem,8.4vw,2.6rem);line-height:1.02;max-width:none}
  [data-hero="a"] .hero-offer{padding:0;margin-top:16px}
  [data-hero="a"] .hero-act{margin-top:22px}
}

/* ---------- B : écran typographique sur béton clair, image en fenêtre ---------- */
[data-hero="b"] .hero{background:var(--stone);color:var(--navy)}
[data-hero="b"] .hero-in::after{display:none}
[data-hero="b"] .hero-in{grid-template-rows:auto 1fr auto;row-gap:clamp(18px,3vh,32px)}
[data-hero="b"] .hero-offer{grid-column:1/span 5;grid-row:1;align-self:start;color:var(--ink);padding:0}
[data-hero="b"] .hero-loc{grid-column:6/span 3;grid-row:1;align-self:start;margin:0;color:var(--mute)}
[data-hero="b"] .hero h1{grid-column:1/span 9;grid-row:2;align-self:center;font-size:clamp(3rem,min(6.1vw,10.4vh),7rem);line-height:.98;max-width:none;color:var(--navy);letter-spacing:-.04em}
[data-hero="b"] .hero-camera{position:relative;inset:auto;grid-column:10/-1;grid-row:1/span 2;z-index:0;align-self:stretch;min-height:320px;
  border-radius:4px;background:#d8d6d0}
[data-hero="b"] .hero-camera img{object-position:62% center}
[data-hero="b"] .hero-camera{transform:none!important} /* la fenêtre ne grandit pas : seule l'image bouge dedans */
[data-hero="b"] .hero-act{grid-column:1/span 6;grid-row:3;margin:0;align-self:end}
[data-hero="b"] .hero-xp{display:flex;grid-column:7/-1;grid-row:3;align-self:end;flex-wrap:wrap;justify-content:flex-end;gap:6px 22px;list-style:none;
  font-size:1.0625rem;font-weight:500;color:var(--mute);padding-bottom:12px}
[data-hero="b"] .hero-xp li{position:relative;padding-bottom:6px;transition:color .5s}
[data-hero="b"] .hero-xp li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--eo)}
[data-hero="b"] .hero-xp li.on{color:var(--navy)}
[data-hero="b"] .hero-xp li.on::after{transform:scaleX(1)}
[data-hero="b"] .hero .down{display:none}
[data-hero="b"] .hero-tag{grid-column:10/-1;grid-row:2;align-self:end;justify-self:start;margin:0 0 12px 12px;z-index:1}

/* ---------- C : écran partagé, opérations réelles qui défilent lentement ---------- */
[data-hero="c"] .hero{background:var(--deep)}
[data-hero="c"] .hero-camera,[data-hero="c"] .hero-tag{display:none}
[data-hero="c"] .hero-in{grid-template-rows:auto 1fr auto auto;row-gap:0}
[data-hero="c"] .hero-in::after{grid-column:1/span 6}
[data-hero="c"] .hero-offer{grid-column:1/span 5;grid-row:1;align-self:start;color:#e4e9ee;padding:0;max-width:30ch}
[data-hero="c"] .hero h1{grid-column:1/span 6;grid-row:2;align-self:center;font-weight:400;font-size:clamp(2.6rem,min(4.5vw,8.4vh),5rem);line-height:1.01;max-width:none;padding-right:clamp(8px,2vw,40px)}
[data-hero="c"] .hero-act{grid-column:1/span 6;grid-row:3}
[data-hero="c"] .hero-loc{grid-column:1/span 3}
[data-hero="c"] .hero .down{grid-column:4/span 3}
.reel-track{display:grid;gap:clamp(10px,1vw,16px);will-change:transform}
.reel-track figure{margin:0;position:relative;border-radius:3px;overflow:hidden;background:#1b3550}
.reel-track img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.reel-track figure:nth-child(2) img{aspect-ratio:1/1}
[data-hero="c"] .reel-pause{display:inline-flex;position:absolute;z-index:2;right:calc(var(--gut) + 4px);bottom:clamp(20px,4vh,40px);align-items:center;min-height:44px;padding:0 16px;
  border:0;border-radius:6px;background:rgba(15,36,56,.9);color:#fff;font:500 1.0625rem/1 var(--f);cursor:pointer}
[data-hero="c"] .reel-pause:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){[data-hero="c"] .reel-pause{display:none}}

/* mobile : les trois ouvertures s'empilent, sans mouvement lourd */
@media(max-width:900px){
  .hero-offer{grid-column:7/-1}
  [data-hero="b"] .hero h1{grid-column:1/-1}
  [data-hero="b"] .hero-camera{grid-column:1/-1;grid-row:3;aspect-ratio:4/3;min-height:0}
  [data-hero="b"] .hero-tag{grid-column:1/-1;grid-row:3;align-self:end;margin:0 0 12px 12px}
  [data-hero="b"] .hero-in{grid-template-rows:auto auto auto auto auto}
  [data-hero="b"] .hero-act{grid-row:4;grid-column:1/-1}
  [data-hero="b"] .hero-xp{grid-row:5;grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:760px){
  .hero-in{grid-template-columns:minmax(0,1fr);padding-top:96px;row-gap:0}
  .hero-in>*,.hero-in::after,[data-hero="c"] .hero-in::after{grid-column:1/-1!important}
  .hero h1{font-size:clamp(2.4rem,10.4vw,3.1rem);max-width:none;grid-row:2}
  .hero-offer{grid-row:3;margin-top:22px;max-width:34ch}
  .hero-act{grid-row:4;margin-top:24px}
  .hero-in::after{grid-row:5}
  .hero-loc{grid-row:5}
  .hero-tag{grid-row:6;margin-top:12px!important}
  .hero .down{display:none}
  .hero-camera img{object-position:center}
  [data-hero="b"] .hero-in{grid-template-rows:none}
  [data-hero="b"] .hero-offer{grid-row:1;margin:0}
  [data-hero="b"] .hero-loc{grid-row:2;margin-top:4px}
  [data-hero="b"] .hero h1{grid-row:3;font-size:clamp(2.6rem,11.2vw,3.4rem);margin-top:22px}
  [data-hero="b"] .hero-camera{grid-row:4;margin-top:26px}
  [data-hero="b"] .hero-tag{grid-row:4;margin-top:0!important}
  [data-hero="b"] .hero-act{grid-row:5;margin-top:24px}
  [data-hero="b"] .hero-xp{grid-row:6;margin-top:18px;justify-content:flex-start;gap:6px 16px}
  [data-hero="c"] .hero-in{grid-template-rows:none}
  [data-hero="c"] .hero-offer{grid-row:1}
  [data-hero="c"] .hero h1{grid-row:2;margin-top:22px}
  [data-hero="c"] .hero-act{grid-row:3}
  [data-hero="c"] .hero-in::after,[data-hero="c"] .hero-loc{grid-row:5}
  [data-hero="c"] .reel-pause{position:relative;right:auto;bottom:auto;grid-row:6;justify-self:start;margin-top:14px}
}

/* sélecteur de maquette (à retirer en production) : l'ouverture lui laisse sa place en bas à gauche */
/* il se place sous l'en-tête, dans la zone libre de l'ouverture, et part avec elle au défilement : il ne masque jamais une carte ni un texte */
.hero-switch{position:absolute;left:var(--gut);top:84px;z-index:110;display:flex;align-items:center;gap:2px;padding:4px 4px 4px 12px;border-radius:8px;
  background:rgba(15,36,56,.94);color:#fff;font:500 1.0625rem/1 var(--f);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.hero-switch[hidden]{display:none}
.hero-switch span{margin-right:6px}
.hero-switch button{min-width:44px;min-height:44px;border:0;border-radius:5px;background:transparent;color:#fff;font:inherit;cursor:pointer}
.hero-switch button:hover{background:rgba(255,255,255,.12)}
.hero-switch button[aria-pressed="true"]{background:#fff;color:var(--navy)}
.hero-switch :focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- D : le nom construit, la phrase, les opérations réelles (ouverture par défaut) ----------
   Le nom est un lettrage dessiné (SVG, traits de 20/100 de la hauteur, comme des poteaux et des poutres).
   La section sort de la séquence épinglée : elle défile normalement, puis la séquence des expertises arrive par en dessous. */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
.hero-name,.hero-rule,.hero-nav{display:none}
[data-hero="d"] .hero{background:var(--paper);color:var(--navy);min-height:0}
/* le nom occupe toute la largeur utile, y compris au-delà de 1440 px (l'en-tête suit le même cadre) */
[data-hero="d"] .hero .wrap,[data-hero="d"] .top .wrap{max-width:none}
html.hz[data-hero="d"] .hero{position:relative;inset:auto}
[data-hero="d"] .hero-camera,[data-hero="d"] .hero-offer,[data-hero="d"] .hero-tag,
[data-hero="d"] .hero .down,[data-hero="d"] .hero-in::after{display:none}
[data-hero="d"] .hero-in{grid-template-rows:auto auto auto auto;padding-top:clamp(92px,11vh,104px);padding-bottom:clamp(64px,10vh,120px)}
[data-hero="d"] .hero-name{display:block;grid-column:1/-1;grid-row:1;width:100%;height:auto;fill:currentColor;color:var(--navy)}
[data-hero="d"] .hero-rule{display:block;grid-column:1/-1;grid-row:2;align-self:start;height:1px;background:var(--navy);margin-top:clamp(14px,1.5vw,22px)}
[data-hero="d"] .hero-nav{display:block;grid-column:1/span 9;grid-row:2;margin-top:clamp(18px,1.8vw,26px)}
.hero-nav ul{list-style:none;display:flex;flex-wrap:wrap}
.hero-nav li+li::before{content:"·" / "";padding:0 .55em;color:var(--mute)}
.hero-nav li{display:flex;align-items:center}
.hero-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-size:1.0625rem;font-weight:500;line-height:1.2;color:var(--navy);text-decoration:none}
.hero-nav a:hover{text-decoration:underline}
[data-hero="d"] .hero-loc{grid-column:10/-1;grid-row:2;justify-self:end;align-self:start;margin-top:clamp(18px,1.8vw,26px);
  line-height:44px;color:var(--mute);text-align:right}
[data-hero="d"] .hero h1{grid-column:5/-1;grid-row:3;align-self:start;margin-top:clamp(44px,8vh,96px);max-width:19ch;
  font-weight:500;font-size:clamp(2.4rem,3.2vw + .7rem,4.6rem);line-height:1.02;letter-spacing:-.036em;color:var(--navy)}
[data-hero="d"] .hero-it{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-style:italic;font-weight:380;letter-spacing:-.012em;font-size:1.06em}
[data-hero="d"] .hero-act{grid-column:1/span 4;grid-row:3;align-self:end;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 4px}
.ops{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(30px,4.4vh,48px)}
.op{grid-column:span 3;min-width:0}
.op-1{grid-column:span 6}
.op a{display:block;color:var(--navy);text-decoration:none}
.op-f{display:block;position:relative;overflow:hidden;height:clamp(240px,24vw,440px);background:#d8d6d0}
.op-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.1s var(--eo)}
.op a:hover .op-f img{scale:1.045}
.op-c{display:block;margin-top:14px;font-size:clamp(1.125rem,1.15vw + .2rem,1.375rem);font-weight:500;line-height:1.25;letter-spacing:-.015em}
.op a:hover .op-c{text-decoration:underline;text-decoration-thickness:1.5px}
.op-m{display:block;margin-top:3px;font-size:1.0625rem;line-height:1.4;color:var(--mute)}
.op a:focus-visible{outline:2px solid var(--navy);outline-offset:5px}
.ops-all{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:clamp(26px,4vh,44px);font-weight:500;color:var(--navy);
  text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:.3em}
.ops-all:hover{text-decoration-color:currentColor}
[data-hero="d"] #realisations{display:none} /* même six images, mêmes légendes : la mosaïque de l'ouverture la remplace */
@media(prefers-reduced-motion:reduce){.op-f img{transition:none}}
/* avant la construction du nom (script chargé) : rien ne clignote ; repli d'affichage au bout de 2,5 s si le script échoue */
@keyframes d-show{to{visibility:visible}}
@media(prefers-reduced-motion:no-preference){
  html.js[data-hero="d"]:not(.d-ready) .hero-name,html.js[data-hero="d"]:not(.d-ready) .op-f{visibility:hidden;animation:d-show 0s 2.5s forwards}
}
@media(max-width:1100px){
  [data-hero="d"] .hero h1{grid-column:4/-1}
  [data-hero="d"] .hero-act{grid-column:1/span 3}
}
@media(max-width:980px){
  [data-hero="d"] .hero-nav{grid-column:1/-1}
  [data-hero="d"] .hero-loc{grid-row:3;grid-column:1/-1;justify-self:start;margin-top:0;text-align:left}
  [data-hero="d"] .hero h1{grid-row:4;grid-column:1/-1;margin-top:clamp(28px,5vh,56px)}
  [data-hero="d"] .hero-act{grid-row:5;grid-column:1/-1;flex-direction:row;align-items:center;gap:14px 30px;margin-top:28px}
}
@media(max-width:760px){
  [data-hero="d"] .hero-in{grid-template-rows:none;padding-top:76px}
  [data-hero="d"] .hero h1{font-size:clamp(2.15rem,9.6vw,2.9rem);max-width:none;margin-top:26px}
  [data-hero="d"] .hero-act{flex-direction:column;align-items:stretch;gap:6px;margin-top:24px}
  .ops{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:26px}
  .op,.op-1{grid-column:span 1}
  .op-1{grid-column:1/-1}
  .op-f{height:auto;aspect-ratio:4/5}
  .op-1 .op-f{aspect-ratio:3/2}
  .op-c{margin-top:10px}
  .hero-nav ul{column-gap:18px}
  .hero-nav li+li::before{content:none}
}

/* ---------- panneaux d'expertise ----------
   Une grille interne commune aux cinq cartes : les mêmes lignes portent le titre (boîte de deux lignes, calée en bas),
   la phrase (boîte de trois lignes, calée en haut), la mention et les sous-missions, quelle que soit la longueur du texte.
   Rendu par défaut = empilé (sans JS, mobile, tablette en portrait, mouvement réduit) ; le mode horizontal suit plus bas. */
.xp{background:var(--deep)}
.track{display:grid}
.pnl{--pad:clamp(20px,5.2vw,40px);--t:clamp(2.125rem,7.4vw,3rem);position:relative;display:flex;flex-direction:column;background:var(--bg);color:var(--fg)}
/* image : même étalonnage pour les cinq (légère désaturation, contraste tenu), fondu bas dans la couleur du bloc */
.pnl-img{position:relative;margin:0;overflow:hidden;aspect-ratio:4/3;background:color-mix(in srgb,var(--bg) 72%,#000)}
.pnl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.04) brightness(.98)}
.pnl-img::after{content:"";position:absolute;inset:auto 0 0;height:38%;pointer-events:none;
  background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 88%,transparent) 0,color-mix(in srgb,var(--bg) 52%,transparent) 34%,color-mix(in srgb,var(--bg) 0%,transparent))}
/* légende : texte simple, dans la couleur du bloc, posé sur le fondu (plus de pastille) */
.pnl-body{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"m n" "t plus" "d d" "links links";
  column-gap:20px;padding:22px var(--pad) clamp(34px,6vw,48px)}
.pnl-m{grid-area:m;align-self:start;font-size:1.0625rem;font-weight:500;line-height:1.35;opacity:.9}
.pnl-t{grid-area:t;align-self:end;margin-top:clamp(18px,4vw,28px);font-size:var(--t);font-weight:500;line-height:1.02;letter-spacing:-.032em;text-wrap:balance}
.pnl-t .pl{padding-bottom:.08em;margin-bottom:-.08em} /* masque de l'entrée : jambages et accents non rognés */
.pnl-d{grid-area:d;margin-top:14px;font-size:1.0625rem;line-height:1.55;max-width:46ch;text-wrap:pretty}
/* sous-missions : liste à filets, chevrons alignés sur une même colonne */
.pnl-links{grid-area:links;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:28px;margin-top:clamp(24px,5vw,34px);
  border-top:1px solid color-mix(in srgb,var(--fg) 30%,transparent)}
.pnl-links li{display:flex}
.pnl-links a{position:relative;flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:10px 0;
  font-size:1.0625rem;font-weight:500;line-height:1.3;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--fg) 30%,transparent)}
.pnl-links a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--fg);
  transform:scaleX(0);transform-origin:right center;transition:transform .55s var(--eo)}
.pnl-links a:hover::after,.pnl-links a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.pnl-links a .ico{width:15px;height:15px;stroke-width:1.5;opacity:.8;transition:transform .45s var(--eo),opacity .3s}
.pnl-links a:hover .ico,.pnl-links a:focus-visible .ico{transform:translateX(5px);opacity:1}
/* bouton « + » : cercle fin, croix fine, remplissage au survol */
.pnl-plus{grid-area:plus;align-self:end;justify-self:end;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;margin-bottom:.1em;
  border:1px solid color-mix(in srgb,var(--fg) 55%,transparent);color:var(--fg);transition:background .35s var(--eo),color .35s var(--eo),border-color .35s}
.pnl-plus .ico{width:18px;height:18px;stroke-width:1.3;transition:transform .6s var(--eo)}
.pnl-plus:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pnl-plus:hover .ico,.pnl-plus:focus-visible .ico{transform:rotate(90deg)}
.pnl :focus-visible{outline:2px solid var(--fg);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.pnl-links a::after,.pnl-links a .ico,.pnl-plus,.pnl-plus .ico{transition:none}}
/* tablette en portrait et petits écrans larges : image plus panoramique, sous-missions sur deux colonnes */
@media(min-width:600px){
  .pnl-img{aspect-ratio:16/10}
  .pnl-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pnl-body{padding-top:26px}
}
html.mo .pnl-img img{top:-8%;height:116%}
/* empilé sur grand écran (mouvement réduit, fenêtre basse) : image et bloc côte à côte plutôt qu'une image de 900 px de haut */
@media(min-width:1000px){
  html:not(.hz) .pnl{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  html:not(.hz) .pnl-img{aspect-ratio:auto;min-height:min(72vh,620px)}
  html:not(.hz) .pnl-img::after{display:none}
  html:not(.hz) .pnl-body{align-content:end;padding:40px clamp(28px,3vw,48px)}
}

/* introduction de la séquence : titre, chapô, sommaire des cinq expertises, indice de défilement (horizontal seulement) */
.intro{background:var(--stone);color:var(--navy);padding:var(--sec) var(--gut) clamp(40px,7vh,64px);display:flex;flex-direction:column;justify-content:flex-end}
.intro h2{font-size:clamp(2.25rem,6vw,3.5rem);max-width:13ch}
.intro p{margin-top:20px;font-size:1.1875rem;line-height:1.55;color:var(--mute);max-width:34ch}
.intro-toc{list-style:none;max-width:560px;margin-top:clamp(26px,4vh,40px);border-top:1px solid var(--line)}
.intro-toc a{display:flex;align-items:center;min-height:46px;border-bottom:1px solid var(--line);font-size:1.0625rem;font-weight:500;color:var(--navy);text-decoration:none}
.intro-toc a:hover{text-decoration:underline;text-underline-offset:.25em}

/* ---------- mode horizontal (piloté par GSAP ScrollTrigger) ---------- */
html.hz .pin{position:sticky;top:0;height:100vh;overflow:clip}
html.hz .hero{position:absolute;inset:0;min-height:0;transform-origin:30% 60%}
html.hz .dim{position:absolute;inset:0;background:#08141f;opacity:0;pointer-events:none;z-index:1}
html.hz .xp{position:absolute;inset:0;background:none;pointer-events:none;z-index:2}
html.hz .track{display:flex;height:100%;width:max-content;pointer-events:auto;will-change:transform;transform:translate3d(100vw,0,0)}
html.hz .intro{width:clamp(400px,32vw,500px);height:100%;padding:0 clamp(28px,3vw,48px) var(--pb);--pb:clamp(30px,5vh,48px)}
html.hz .intro h2{font-size:clamp(2.2rem,min(3.4vw,6.2vh),3.25rem)}
html.hz .intro p{font-size:1.125rem}
html.hz .intro-toc a{min-height:44px}
@media(max-height:780px){html.hz .intro-toc{display:none}}
/* carte : la largeur suit l'écran, le bloc couleur prend sa hauteur naturelle (identique pour les cinq), l'image prend le reste */
html.hz .pnl{--pad:clamp(26px,2.5vw,40px);--t:clamp(2.125rem,min(3.3vw,5.6vh),3.25rem);width:clamp(660px,56vw,880px);height:100%}
html.hz .pnl-img{aspect-ratio:auto;flex:1 1 auto;min-height:0}
html.hz .pnl-img img{left:-8%;width:116%;max-width:none;will-change:transform}
html.hz .pnl-body{flex:0 0 auto;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  grid-template-areas:"links links" "t plus" "d m";column-gap:clamp(24px,3vw,44px);
  padding:clamp(18px,2.6vh,26px) var(--pad) clamp(24px,4vh,38px)}
html.hz .pnl-links{margin:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;column-gap:clamp(20px,2vw,28px);border-top:0}
html.hz .pnl-links a{min-height:clamp(44px,6vh,52px)}
html.hz .pnl-t{margin-top:clamp(20px,4.2vh,40px);min-height:2.04em;display:flex;flex-direction:column;justify-content:flex-end}
html.hz .pnl-d{margin-top:clamp(10px,1.6vh,14px);min-height:4.65em;max-width:44ch}
html.hz .pnl-m{grid-area:m;align-self:start;margin-top:clamp(10px,1.6vh,14px);text-align:right;max-width:19ch}
/* titre sur une seule ligne quand il le permet : la boîte reste de deux lignes, la dernière ligne garde la même ligne de base */
/* relief : la carte calée passe légèrement devant (ombre douce sur son bord gauche) ; les autres images s'éteignent un peu */
html.hz .pnl{z-index:0;transition:box-shadow .7s var(--eo)}
html.hz .pnl.is-on{z-index:1;box-shadow:-28px 0 56px -28px rgba(4,12,20,.55)}
html.hz .pnl-img img{transition:filter .7s var(--eo)}
html.hz .pnl:not(.is-on) .pnl-img img{filter:saturate(.7) contrast(1.02) brightness(.9)}
.dim{display:none}
html.hz .dim{display:block}
@media(prefers-reduced-motion:reduce){html.hz .pnl,html.hz .pnl-img img{transition:none}}

/* compteur qui roule + barre de progression de la séquence */
.hud{display:none}
html.hz .hud{position:absolute;z-index:5;top:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;
  min-height:46px;padding:0 18px;border-radius:6px;background:rgba(15,36,56,.9);color:#fff;font:500 1.0625rem/1 var(--f);
  font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hud-roll{display:block;will-change:transform}
.hud-roll i{display:block;height:1.25em;line-height:1.25em;font-style:normal;text-align:right}
.hud-bar{display:block;margin-left:12px;width:clamp(80px,9vw,140px);height:2px;background:rgba(255,255,255,.28);overflow:hidden}
.hud-bar i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left center}
@media(max-width:1180px){html.hz .hud{left:auto;right:var(--gut);transform:none;top:82px}}

/* ================= SECTIONS SUIVANTES ================= */
.sec{padding:var(--sec) 0}

/* ---------- réalisations : bento ---------- */
.re{background:var(--stone)}
.mosa{list-style:none;display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(200px,16.5vw,290px);
  grid-template-areas:"a a b c" "a a b d" "e f f d"}
.mcell:nth-child(1){grid-area:a}.mcell:nth-child(2){grid-area:b}.mcell:nth-child(3){grid-area:c}
.mcell:nth-child(4){grid-area:d}.mcell:nth-child(5){grid-area:e}.mcell:nth-child(6){grid-area:f}
@media(max-width:980px){.mosa{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:230px;grid-template-areas:"a a" "b c" "b d" "e d" "f f"}}
@media(max-width:560px){.mosa{grid-template-columns:1fr;grid-auto-rows:280px;grid-template-areas:"a" "b" "c" "d" "e" "f"}}
.mcell{position:relative;overflow:hidden;border-radius:4px;background:#d8d6d0}
.mcell a{position:absolute;inset:0;display:block;color:#fff;text-decoration:none}
.mcell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.1s var(--eo)}
.mcell a:hover img{scale:1.045}
.mcell .ct{font-weight:500;letter-spacing:-.015em;font-size:clamp(1.2rem,1.5vw,1.4rem);line-height:1.2;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;justify-self:start;padding-bottom:2px;transition:background-size .55s var(--eo)}
.mcell a:hover .ct,.mcell a:focus-visible .ct{background-size:100% 1.5px}
.mcell .st{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:8px;font-size:1.0625rem;font-weight:500;line-height:1.3;
  background:var(--paper);color:var(--navy);border-radius:4px;padding:4px 11px 4px 10px}
.st::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--navy)}
.mcell a:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.mcell img,.mcell .ct{transition:none}}

/* ---------- outils : le cadre d'application se redresse (arrêt de défilement) ---------- */
.sys,.fin{position:relative;isolation:isolate;--cx:0px;--cr:0px}
.sys::before,.fin::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:inset(0 var(--cx) 0 var(--cx) round var(--cr))}
.sys{background:var(--stone);color:#fff;overflow-x:clip}
.sys::before{background:var(--deep)}
.sys h2{font-size:clamp(2.2rem,3.9vw,3.5rem);color:#fff;max-width:16ch}
.sys .txt p{font-size:1.1875rem;line-height:1.65;max-width:52ch;color:#dfe5eb}
.sys .txt p+p{margin-top:18px}
.shot{margin:0;border:1px solid rgba(255,255,255,.16);border-radius:10px;overflow:hidden;background:#16314a;transform-origin:50% 0;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.65),0 2px 0 rgba(255,255,255,.04) inset}
.shot .bar{display:flex;gap:7px;align-items:center;height:40px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.shot .bar span{margin-left:14px;font-size:1.0625rem;color:#c3cdd7}
.app-side{display:flex;flex-direction:column;gap:4px;padding:18px 14px;border-right:1px solid rgba(255,255,255,.1)}
.app-side span{padding:11px 12px;border-radius:5px;font-size:1.0625rem;font-weight:500;color:#c3cdd7;transition:background .4s,color .4s}
.app-side .on{background:rgba(255,255,255,.1);color:#fff}
@media(max-width:760px){
  .app-side{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:10px}
  .app-side span{padding:8px 10px}
}
.feats{list-style:none;display:grid;gap:24px 40px}
@media(min-width:760px) and (max-width:1099px){.feats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feats li{border-top:1px solid rgba(255,255,255,.24);padding-top:18px}
.feats h3{font-size:clamp(1.375rem,1.7vw,1.625rem);letter-spacing:-.02em;color:#fff}
.feats p{margin-top:8px;font-size:1.0625rem;line-height:1.55;color:#dfe5eb;max-width:36ch}
.sys :focus-visible{outline-color:#fff}
@media(min-width:1100px) and (min-height:860px){
  html.sys-pin .sys{padding:0}
  html.sys-pin .sys .txt p{font-size:1.125rem}
  html.sys-pin .feats li{transition:border-color .4s}
  html.sys-pin .feats li.on{border-top-color:#fff}
}

/* ---------- article + journal : une double page éditoriale ---------- */

/* la parution : titre en très grand, colonne de métadonnées */
.pr{padding-bottom:clamp(56px,8vh,96px)}
.par-mast{grid-column:1/span 3;grid-row:1;display:grid;gap:6px;align-content:start;font-size:1.0625rem;color:var(--mute)}
.par-mast b{font-size:clamp(1.9rem,2.6vw,2.5rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.par-title{grid-column:4/span 9;grid-row:1;font-size:clamp(2.3rem,4.4vw,4.5rem);font-weight:400;line-height:1.03;letter-spacing:-.035em;color:var(--navy);
  text-indent:-.42em;max-width:19ch}
.par-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em;text-decoration-color:transparent;transition:text-decoration-color .4s}
.par-side{grid-column:4/span 9;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end;
  padding-top:22px;border-top:1px solid var(--line)}
@media(max-width:900px){
  .par-mast,.par-title,.par-side{grid-column:1;grid-row:auto}
  .par-mast{display:flex;align-items:baseline;gap:14px}
  .par-side{grid-template-columns:1fr;justify-items:start}
  .par-title{text-indent:0}
}
/* la citation du fondateur, intégrée à la double page */
.quote{margin:clamp(56px,9vh,96px) 0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:24px;
  padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--line)}
.quote blockquote{grid-column:4/span 9;grid-row:1;font-weight:400;letter-spacing:-.025em;font-size:clamp(1.75rem,2.9vw,2.75rem);line-height:1.18;color:var(--ink);
  max-width:30ch;text-wrap:pretty}
.quote .w{display:inline}
@media(max-width:900px){.quote{grid-template-columns:1fr}.quote blockquote{grid-column:1;grid-row:auto}}
@media(prefers-reduced-motion:reduce){.par-title{transition:none}}

/* le journal : liste éditoriale (le bloc est généré : seul le CSS le met en page) */
.jgrid{border-bottom:1px solid var(--line)}
.jcard{position:relative;display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,5fr) minmax(0,3.4fr) minmax(0,2.3fr);
  grid-template-areas:"k t p f" "k t go f";column-gap:clamp(16px,2.2vw,36px);align-items:start;
  padding:clamp(22px,3vh,32px) 0;border-top:1px solid var(--line);color:inherit;text-decoration:none;isolation:isolate}
.jcard::before{content:"";position:absolute;inset:0 calc(var(--gut) * -.5);z-index:-1;background:var(--stone);opacity:0;transition:opacity .35s}
.jcard:hover::before{opacity:1}
.jcard .in{display:contents}
.jcard .k{grid-area:k;font-size:1.0625rem;font-weight:500;color:var(--mute);padding-top:.35em}
.jcard h3{grid-area:t;font-size:clamp(1.4rem,1.9vw,1.875rem);font-weight:500;line-height:1.16;letter-spacing:-.022em;color:var(--navy);max-width:24ch;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;text-decoration-color:transparent;transition:text-decoration-color .35s}
.jcard:hover h3,.jcard:focus-visible h3{text-decoration-color:currentColor}
.jcard p{grid-area:p;font-size:1.0625rem;line-height:1.55;color:var(--ink);max-width:44ch;padding-top:.3em}
.jcard .go{grid-area:go;align-self:end;margin-top:14px;font-weight:500;font-size:1.0625rem;color:var(--navy)}
.jcard .go span{display:inline-block;transition:transform .45s var(--eo)}
.jcard:hover .go span{transform:translateX(5px)}
.jcard figure{grid-area:f;margin:0;overflow:hidden;border-radius:3px;background:#d8d6d0;aspect-ratio:4/3}
.jcard img{width:100%;height:100%;object-fit:cover;transition:scale 1.1s var(--eo),filter .5s}
.jcard:not(:hover) img{filter:saturate(.75)}
.jcard:hover img{scale:1.06}
.jcard:focus-visible{outline-offset:4px}
@media(max-width:900px){
  .jcard{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"f f" "k k" "t t" "p p" "go go";row-gap:10px}
  .jcard figure{aspect-ratio:16/9;margin-bottom:8px}
  .jcard::before{display:none}
}
@media(prefers-reduced-motion:reduce){.jcard img,.jcard h3,.jcard .go span,.jcard::before{transition:none}}

/* ---------- contact + pied : un seul bloc, dense ---------- */
.fin{background:var(--paper);color:#fff;padding:clamp(72px,10vh,112px) 0 clamp(36px,5vh,52px)}
.fin::before{background:var(--navy)}
.fin h2{font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.15;letter-spacing:-.022em}
.fin :focus-visible{outline-color:#fff}
.fl{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;font-size:1.0625rem;color:rgba(255,255,255,.85)}
.fl a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.fl a:hover{color:#fff;text-decoration:underline}

/* ---------- v8 : SEO / GEO (affiche AVIF, engagements, intitulé de l'article, questions fréquentes, identité) ---------- */
/* affiche de la vidéo : même cadrage que la vidéo ; la vidéo reste transparente tant qu'elle n'a pas d'image */
.hero-camera picture.hero-poster{display:none}
[data-hero="a"] .hero-camera picture.hero-poster{display:block}
[data-hero="a"].a-img .hero-camera picture.hero-poster{display:none}
.hero-camera .hero-poster img{object-position:55% 50%}
@media(orientation:portrait) and (max-width:1100px){.hero-camera .hero-poster img{object-position:50% 50%}}
/* engagements, dans la carte d'introduction de la séquence */
/* « Article » : intitulé court visible, au-dessus d'un titre explicite */
/* questions fréquentes : liste éditoriale, réponses dépliables (le texte est dans le HTML) */
.faq{padding-top:clamp(40px,6vh,72px)}
.faq-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);margin-top:clamp(28px,4vh,44px)}
.qa-a{padding:0 64px 28px 0}
.qa-a p{font-size:1.125rem;line-height:1.6;color:var(--ink);max-width:62ch}
.qa-a a{color:var(--navy);font-weight:500;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.2em}
.qa-a a:hover{text-decoration-color:var(--navy)}
@media(max-width:900px){.qa-a{padding-right:0}}
/* identité, en fin de page */

/* =====================================================================================
   v10 — LA DESCENTE
   Fil conducteur : l'ouverture montre Paris d'en haut ; la page descend jusqu'au seuil du contact.
   Une cote de niveau (symbole des coupes d'architecte : triangle posé sur un trait) suit le défilement.
   ===================================================================================== */
.lvl{display:block;width:44px;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5}
.lvl path:last-child{fill:currentColor;stroke:none}

/* ---------- l'interlude : la vue de l'ouverture, la caméra plonge vers les toits ---------- */
.desc{position:relative;background:var(--deep);color:#fff}
.desc-pin{position:relative;height:100svh;min-height:560px;overflow:hidden;display:grid;place-items:center}
html.dsc .desc{height:280vh}
html.dsc .desc-pin{position:sticky;top:0}
.desc-img{position:absolute;inset:0;overflow:hidden}
.desc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 50%;transform-origin:56% 62%;will-change:transform}
.desc-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,28,44,.55),rgba(11,28,44,.35) 40%,rgba(11,28,44,.7));}
html.dsc .desc-veil::after{content:"";position:absolute;inset:0;background:var(--stone);opacity:var(--to-stone,0)}
.desc-n{display:flex;align-items:flex-end;gap:clamp(12px,1.4vw,22px);color:#fff;will-change:transform}
.desc-n .lvl{width:clamp(56px,7vw,112px);margin-bottom:.03em}
.desc-v{font-size:clamp(4rem,13vw,12.5rem);font-weight:500;line-height:.8;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
html.dsc .desc-l-b{opacity:0}

/* ---------- la cote qui accompagne la page (bureau) ---------- */
.alti{position:fixed;z-index:110;right:var(--gut);bottom:clamp(18px,3vh,28px);display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:end;column-gap:12px;
  min-height:58px;padding:9px 16px 9px 14px;border-radius:6px;background:rgba(15,36,56,.9);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  pointer-events:none;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s var(--eo),transform .45s var(--eo),visibility 0s linear .45s}
.alti.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--eo),transform .45s var(--eo)}
.alti .lvl{grid-column:1;grid-row:1/span 2;align-self:center;width:26px}
.alti-v{grid-column:2;grid-row:1;font-size:1.25rem;font-weight:500;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.alti-l{grid-column:2;grid-row:2;font-size:.9375rem;font-weight:500;line-height:1.25;color:rgba(255,255,255,.82);white-space:nowrap}
@media(max-width:899px){.alti{display:none}}

/* ---------- en-tête : s'efface en descendant, revient dès qu'on remonte ---------- */
.top{transition:transform .5s var(--eo)}
html.top-off .top{transform:translateY(-130%)}
@media(prefers-reduced-motion:reduce){.top{transition:none}}

/* ---------- réalisations : les colonnes du bento glissent à des vitesses différentes (étages) ---------- */
.re{position:relative}

/* ---------- outils : l'interface reproduite, à hauteur d'œil ---------- */
.app-side button{padding:11px 12px;border:0;border-radius:5px;background:none;text-align:left;font:500 1.0625rem/1.3 var(--f);color:#c3cdd7;cursor:pointer;
  transition:background .4s,color .4s}
.app-side button:hover{color:#fff}
.app-side button.on{background:rgba(255,255,255,.1);color:#fff}
.app-side button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
@media(max-width:760px){
  .app-side button{padding:8px 10px}
}

/* ---------- presse : une coupure, à sa juste taille ---------- */
.par-title{font-size:clamp(2rem,3.4vw,3.4rem);max-width:22ch}

/* ---------- questions : changement de fond, la lecture respire après le journal ---------- */
.faq{background:var(--stone);padding-bottom:var(--sec)}

/* ---------- contact : le seuil (±0,00), la cote se pose sur le trait de la rue ---------- */
.seuil{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:end;column-gap:14px;margin-bottom:clamp(48px,8vh,88px);color:#fff}
.seuil .lvl{width:clamp(36px,3.4vw,50px);grid-row:1;grid-column:1;margin-bottom:-1px}
.seuil-v{grid-column:2;font-size:clamp(2.6rem,5.4vw,5rem);font-weight:500;line-height:.8;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.seuil-l{grid-column:3;justify-self:end;font-size:1.0625rem;font-weight:500;color:rgba(255,255,255,.86);padding-bottom:4px;text-align:right}
.seuil-line{grid-column:1/-1;grid-row:2;display:block;height:1.5px;background:#fff;margin-top:12px;transform-origin:0 50%}
@media(max-width:620px){.seuil{grid-template-columns:auto 1fr}.seuil-l{grid-column:1/-1;grid-row:3;justify-self:start;text-align:left;margin-top:12px}}

/* PRIMOE — pages parcours (Développement, Ingénierie) : sections propres, sur la base de lpas-home.css */

/* ---------- le besoin (vos enjeux) : grandes lignes, filets fins ---------- */

/* ---------- notre réponse : trois faits, sur béton ---------- */

/* ---------- déroulé : une ligne d'étapes, reliées par un trait ---------- */
.etapes{list-style:none;margin-top:clamp(36px,5vh,56px);display:grid;gap:0;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--navy)}
.etapes li{position:relative;padding:22px clamp(14px,1.6vw,26px) 0 0}
.etapes li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--navy)}
.etapes li:last-child::before{background:var(--navy)}
.etapes b{display:block;font-weight:500;font-size:1.25rem;letter-spacing:-.015em;color:var(--navy)}
.etapes span{display:block;margin-top:8px;font-size:1.0625rem;line-height:1.5;color:var(--ink)}
.etapes a{color:var(--navy);font-weight:500}
@media(max-width:980px){
  .etapes{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--navy);margin-left:6px}
  .etapes li{padding:0 0 26px 24px}
  .etapes li::before{top:4px;left:-7px}
}

/* ---------- situations : grandes lignes cliquables ---------- */

/* ---------- deux opérations, grand format ---------- */

/* ---------- projets disponibles : bande marine ---------- */

/* ---------- passerelle vers l'autre parcours ---------- */
.pass{background:var(--paper);padding:0 0 var(--sec)}
.pass a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:clamp(28px,4vh,44px) 0;
  border-top:2px solid var(--navy);border-bottom:1px solid var(--line);color:var(--navy);text-decoration:none}
.pass .k{display:block;font-size:1.0625rem;font-weight:500;color:var(--mute)}
.pass .t{display:block;margin-top:8px;font-size:clamp(2rem,4.4vw,4rem);font-weight:500;line-height:1;letter-spacing:-.04em}
.pass .s{display:block;margin-top:12px;font-size:1.125rem;color:var(--ink);max-width:56ch}
.pass a:hover .t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.pass a:focus-visible{outline:2px solid var(--navy);outline-offset:6px}

/* ---------- guides du parcours (liste du journal) ---------- */

/* =====================================================================================
   ACCUEIL : les deux parcours (remplacent les cinq cartes)
   Deux moitiés d'écran ; au survol ou au focus, la moitié choisie s'élargit et l'autre s'efface un peu.
   ===================================================================================== */
.dp{display:flex;gap:clamp(8px,.8vw,14px);padding:0 var(--gut);max-width:calc(1440px + 2 * var(--gut));margin:0 auto;height:clamp(520px,82vh,860px)}
.dp-side{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:4px;color:#fff;text-decoration:none;isolation:isolate;
  transition:flex-grow .9s var(--eo)}
.dp-side::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(11,28,44,.94) 0,rgba(11,28,44,.72) 34%,rgba(11,28,44,.18) 70%,rgba(11,28,44,.32));transition:background-color .9s}
.dp-side:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:899px){
  .dp{flex-direction:column;height:auto}
  .dp-side{min-height:min(78svh,620px)}
}
@media(prefers-reduced-motion:reduce){.dp-side{transition:none}}
/* encart : les projets disponibles, une seule ligne */

/* =====================================================================================
   SCISSION v2 : plein écran bord à bord, frontière pilotée par le curseur (--l = part de gauche)
   ===================================================================================== */
.dp{position:relative;display:flex;gap:0;padding:0;max-width:none;margin:0;height:max(620px,100svh);overflow:hidden;--l:.5}
.dp-side{border-radius:0;transition:none}
.dp-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dp-vid{opacity:0;transition:opacity 1s ease}
.dp-side::after{background:linear-gradient(0deg,rgba(11,28,44,.92) 0,rgba(11,28,44,.6) 38%,rgba(11,28,44,.12) 72%,rgba(11,28,44,.28))}
/* le texte garde sa largeur pendant que la moitié s'ouvre ou se referme : rien ne se recompose */
/* travelling lent sur Roissy */
@media(prefers-reduced-motion:no-preference){
  @keyframes dp-pan{from{transform:scale(1.04) translate3d(-1.2%,0,0)}to{transform:scale(1.12) translate3d(1.2%,-1%,0)}}
}
/* bureau : le côté visé s'ouvre, ses missions arrivent une à une ; l'autre s'assombrit */
.dp-live.dp-in .dp-side:not(.is-on) .dp-vid{filter:brightness(.55) saturate(.55)}
.dp-live .dp-side:focus-visible{outline:3px solid #fff;outline-offset:-6px}
/* pastille « Entrer » qui accompagne le curseur */
.dp-cur{position:absolute;z-index:4;top:0;left:0;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;
  background:#fff;color:var(--navy);font-weight:500;font-size:1.0625rem;pointer-events:none;opacity:0;transition:opacity .35s var(--eo);will-change:transform}
.dp-live.dp-in .dp-cur{opacity:1}
.dp:not(.dp-live) .dp-cur{display:none}
/* mobile, tablette, sans souris : deux blocs empilés, tout est visible */
@media(max-width:899px){
  .dp{flex-direction:column;height:auto}
  .dp-side{min-height:min(84svh,680px)}
}

/* ---------- pointeur de la scission : un anneau fin, une flèche ---------- */
.dp-cur{width:56px;height:56px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.75);font-size:0}
.dp-cur .ico{width:20px;height:20px;stroke-width:1.4}
.dp-live.dp-in .dp-cur{opacity:.9}

/* ---------- encart Projets disponibles : trois temps sur une ligne ---------- */

/* =====================================================================================
   RÉALISATIONS : index d'opérations
   ===================================================================================== */
/* mobile / tablette : la liste porte sa propre vignette, pas d'image collante */

/* =====================================================================================
   RÉALISATIONS (bento) : la section naît dans le bleu de la scission et s'éclaircit au défilement
   (--rbg / --rfg pilotés par GSAP ; sans script ou en mouvement réduit : béton et marine directement)
   ===================================================================================== */
.re-x{--rbg:var(--stone);--rfg:#16354e;background:var(--rbg);padding-top:clamp(56px,9vh,104px)}
/* parallaxe des images dans leur case : l'image déborde un peu pour pouvoir glisser */
.re-x .mcell img{top:-7%;height:114%;translate:0 var(--py,0%)}
@media(prefers-reduced-motion:reduce){.re-x .mcell img{top:0;height:100%;translate:none}}
/* v2 : un panneau béton naît dans le bleu et s'élargit jusqu'aux bords (pas de couleur intermédiaire) */
.re-x{--rfg:#16354e;background:var(--deep);position:relative;isolation:isolate;--ct:0px;--cx:0px;--cr:0px}
.re-x::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--stone);clip-path:inset(var(--ct) var(--cx) 0 var(--cx) round var(--cr))}

/* =====================================================================================
   ENTRÉE DE LA SCISSION : la vidéo de l'ouverture continue en plein cadre puis se resserre à gauche (--e : 1 → 0)
   ===================================================================================== */
.dp::before{content:"";position:absolute;inset:0 0 auto;height:42%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,28,44,.72),rgba(11,28,44,0))}
@media(max-width:899px){.dp::before{display:none}}

/* =====================================================================================
   TRANSITION ENTRE PAGES (View Transitions) : la moitié choisie devient l'ouverture du parcours
   ===================================================================================== */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.8s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s}
html.vt-in .hero-camera{clip-path:none!important;animation:none!important;visibility:visible!important}
html.vt-in .hero h1,html.vt-in :is(.hero-offer,.hero-act,.hero-loc,.hero-tag,.hero .down){visibility:visible!important;animation:none!important}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* =====================================================================================
   JOURNAL (accueil) : bande marine qui naît du papier ; trois grandes cartes à image
   ===================================================================================== */

/* =====================================================================================
   QUESTIONS (accueil) : deux colonnes, le titre reste à gauche pendant la lecture
   ===================================================================================== */

/* =====================================================================================
   PROJETS DISPONIBLES : le dossier d'actif et ses trois niveaux d'accès
   ===================================================================================== */
.pj-lv{list-style:none;margin-top:clamp(24px,4vh,36px);border-top:1px solid rgba(255,255,255,.2)}
.pj-lv li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;padding:14px 0 14px 22px;border-bottom:1px solid rgba(255,255,255,.14);position:relative;
  color:rgba(255,255,255,.5);transition:color .5s var(--eo)}
.pj-lv li::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;transition:background .5s,border-color .5s}
.pj-lv b{font-weight:500;font-size:1.1875rem}
.pj-lv span{font-size:1rem;grid-column:1 / -1}
.pj-lv li.is-on{color:#fff}
.pj-lv li.is-on::before{background:#c4a26e;border-color:#c4a26e}
.pj-doc{position:relative;margin:0;border-radius:8px;overflow:hidden;background:#13304a;border:1px solid rgba(255,255,255,.14);box-shadow:0 60px 100px -50px rgba(0,0,0,.7)}
.pj-state{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:#fff}
.pj-state::before{content:"";width:8px;height:8px;border-radius:50%;background:#7fb58f;transition:background .5s}
.pj-lock-t{font-weight:500;font-size:1.0625rem;padding:6px 12px;border-radius:4px;background:rgba(15,36,56,.75)}
@media(prefers-reduced-motion:reduce){.pj-lv li{transition:none}}

/* =====================================================================================
   ARTICLE : la parution posée sur un chantier PRIMOE
   ===================================================================================== */
.pr2-band{position:relative;isolation:isolate;overflow:hidden;min-height:max(640px,100svh);display:flex;align-items:center;color:#fff}
.pr2-bg{position:absolute;inset:-8% 0;z-index:-2}
.pr2-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;will-change:transform}
.pr2-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,28,44,.78),rgba(11,28,44,.35) 60%,rgba(11,28,44,.55))}
.pr2-page{display:grid;gap:18px;max-width:min(720px,100%);padding:clamp(28px,3.6vw,52px);border-radius:4px;background:var(--paper);color:var(--ink);text-decoration:none;
  box-shadow:0 70px 120px -60px rgba(0,0,0,.75);transform-origin:50% 100%;will-change:transform}
.pr2-page:focus-visible{outline:3px solid #fff;outline-offset:6px}

/* =====================================================================================
   QUESTIONS : « Posez votre question »
   ===================================================================================== */
.faq2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.faq2-chips button{min-height:44px;padding:0 16px;border:1.5px solid var(--line2);border-radius:6px;background:transparent;color:var(--navy);font:500 1rem/1 var(--f);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.faq2-chips button:hover{border-color:var(--navy)}
.faq2-chips button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.faq2-chips button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.faq2-list{border-top:1px solid var(--line2)}
.qa2{border-bottom:1px solid var(--line)}
.qa2[hidden]{display:none}
.qa2 summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;list-style:none;color:var(--navy)}
.qa2 summary::-webkit-details-marker{display:none}
.qa2 h3{font-size:clamp(1.3rem,1.9vw,1.75rem);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.qa2 .qa-a{padding:0 64px 26px 0}
.qa2 .qa-a p{font-size:1.125rem;line-height:1.6;color:var(--ink);max-width:62ch}
.qa2 .qa-a a{color:var(--navy);font-weight:500}
.qa2 summary:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.qa2 mark{background:rgba(196,162,110,.4);color:inherit;border-radius:2px;padding:0 1px}
.faq2-none{padding:24px 0;font-size:1.125rem;color:var(--ink)}
@media(max-width:700px){.qa2 .qa-a{padding-right:0}}
/* v13b : tout tient dans un écran pendant l épinglage */
.pj-lv{margin-top:22px}
.pj-lv li{padding:10px 0 10px 22px}
.pj-lv li::before{top:18px}

/* =====================================================================================
   v14 — PROJETS (accueil) : encart à deux portes, exploitant / investisseur
   ===================================================================================== */

/* citation du fondateur : bande papier courte (le Journal naît ensuite du papier) */

/* carte Presse dans le Journal : typographique, distincte des cartes photo */
/* jonctions entre sections marine : pas de liseré clair dû aux arrondis de hauteur */
.re-x,.sys{box-shadow:0 -1px 0 var(--deep),0 1px 0 var(--deep)}
/* v14b : le dossier S OUVRE à mesure que le niveau d accès monte (public → NDA → qualifié) */
.pass + .pass{margin-top:calc(var(--sec) * -1)}
.pass + .pass a{border-top-width:1px}

/* =====================================================================================
   TRIPTYQUE : trois volets (--w1, --w2, --w3 pilotés par le script ; égaux sans script)
   ===================================================================================== */
.dp{--w1:.3334;--w2:.3333;--w3:.3333;--b1:.3334;--b2:.6667}
/* le texte garde sa largeur pendant que les volets s'ouvrent et se referment */
/* sans souris ni script : trois volets égaux */
/* transitions vers les pages parcours */

/* =====================================================================================
   TRIPTYQUE : le nom du parcours est la signature du volet (une couleur par parcours)
   laiton = Développement · acier = Ingénierie · terre cuite = Valorisation
   ===================================================================================== */
:root{--acc-dev:#c9a46a;--acc-ing:#9cc2e0;--acc-val:#d8906a}
/* filet de couleur en haut du volet : un quart au repos, toute la largeur au survol */
.dp-side::before{content:"";position:absolute;z-index:2;top:0;left:0;right:0;height:5px;background:var(--acc);
  transform:scaleX(.22);transform-origin:left;transition:transform .9s var(--eo)}
.dp-side.is-on::before,.dp-side:focus-visible::before{transform:scaleX(1)}
@media(max-width:899px){.dp-side::before{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.dp-side::before{transition:none}}
/* signatures alignées : le bloc de texte part d une même hauteur dans les trois volets */
.dp-side::before{content:none}

/* =====================================================================================
   TRIPTYQUE v3 : pas d'épinglage ; les volets s'ouvrent comme des volets de façade
   ===================================================================================== */
.dp{--e:0!important}
/* état de départ (posé par le script, seulement si le mouvement est autorisé) */
/* ouverture : bureau = les trois volets en cascade ; mobile = chaque volet à son arrivée */
/* cascade : volet 1, puis 2, puis 3 ; dans chaque volet : image, puis nom, puis texte */
/* une fois ouverts, le survol répond sans délai */
/* le titre ne recouvre plus les traits : bande sombre en haut, un peu plus dense */
.dp::before{height:38%;background:linear-gradient(180deg,rgba(11,28,44,.82),rgba(11,28,44,0))}

/* =====================================================================================
   SYSTÈME (06/11) — une seule grammaire pour toute la landing
   En-tête de section · un arrondi (4 px) · deux actions (bouton plein, lien souligné) · couleurs des parcours en repère
   ===================================================================================== */
:root{--r:4px;--h2:clamp(2.2rem,3.4vw,3.25rem)}
/* en-tête de section : sur-titre, titre ; à droite, texte et lien */
.sh{display:grid;gap:18px 56px;margin-bottom:clamp(36px,6vh,64px)}
@media(min-width:980px){.sh{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}}
.sh-k{margin-bottom:12px;font-size:1.0625rem;font-weight:500;line-height:1.3;color:var(--mute)}
.sh h2{font-size:var(--h2);font-weight:500;line-height:1.04;letter-spacing:-.03em;max-width:18ch;margin:0}
.sh-d,.sh-d p{font-size:1.125rem;line-height:1.6;color:var(--ink);max-width:48ch}
.sh-d p+p{margin-top:14px}
.sh-a{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:6px;font-weight:500;font-size:1.0625rem;color:var(--navy);
  text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.3em}
.sh-a .ico{transition:transform .45s var(--eo)}
.sh-a:hover{text-decoration-color:currentColor}
.sh-a:hover .ico{transform:translateX(5px)}
.sh-r .sh-a{display:flex;width:max-content}
/* fonds clairs : titre marine ; fonds sombres : blanc */
.re-x .sh h2{color:var(--navy)}
.sys .sh h2,.fin .sh h2{color:#fff}
.sys .sh-k,.fin .sh-k{color:rgba(255,255,255,.74)}
.sys .sh-d p,.fin .sh-d{color:#dfe5eb}
.fin .sh-a{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
/* anciennes mises en forme neutralisées */
.sys .txt{display:none}
.fin h2{font-size:var(--h2)}
.fin .sh{margin-bottom:clamp(20px,3vh,32px)}
/* un seul arrondi */
.shot,.mcell,.faq2-chips button,.pj-doc,.st{border-radius:var(--r)}
/* rythme vertical identique pour toutes les sections */
.re-x,.sys:not(.sys-pin-on),.fin{padding-top:var(--sec);padding-bottom:var(--sec)}
html.sys-pin .sys{padding:0}
/* l'effet de panneau ne reste qu'au passage triptyque → réalisations ; ailleurs, changement de fond franc */
.sys::before,.fin::before{clip-path:none!important}
/* couleurs des parcours en repère : catégories du Journal, filtres de la FAQ */
.k-ing::before,.k-dev::before,.k-val::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;vertical-align:.08em;background:var(--acc-ing)}
.k-dev::before{background:var(--acc-dev)}
.k-val::before{background:var(--acc-val)}
.faq2-chips button[aria-pressed="true"]::before{background:#fff}
/* ouverture allégée (06/11) : titre + un bouton ; pas de barre du bas ; Pause accessible au clavier seulement */
[data-hero="a"] .hero-in::after{display:none}
.hero-tag{position:absolute!important;left:var(--gut);bottom:24px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hero-tag:focus-within{width:auto;height:auto;overflow:visible;clip-path:none}
[data-hero="a"] .hero-act{margin-top:clamp(28px,4.5vh,44px)}
[data-hero="a"] .hero-in{padding-bottom:clamp(56px,10vh,110px)}
/* triptyque sans titre affiché : traits sur toute la hauteur, bande sombre réduite */
.dp::before{height:22%}

/* =====================================================================================
   RÉALISATIONS : plan d'ouverture — Roissy en plein cadre se resserre jusqu'à sa case
   ===================================================================================== */
.re-x .wrap{position:relative}
.mosa-intro{display:none}
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .mosa-intro{display:block;position:absolute;z-index:4;overflow:hidden;pointer-events:none;will-change:left,top,width,height}
  .mosa-intro img{position:absolute;left:0;width:100%;top:-7%;height:114%;object-fit:cover}
  .mosa-intro::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,36,56,0) 55%,rgba(15,36,56,.55));opacity:var(--io,1)}
}

/* =====================================================================================
   PUBLICATIONS : mise en page magazine — l'article à la une en grand, les autres en liste
   ===================================================================================== */
/* la une */
/* la liste : vignette à gauche, texte à droite, filets */

/* =====================================================================================
   QUESTIONS : « Une question ? » — la recherche devient le titre de la section
   ===================================================================================== */
.faq2-chips{margin-top:20px}
.faq2-chips button{border-color:rgba(255,255,255,.3);color:#fff}
.faq2-chips button:hover{border-color:#fff}
.faq2-chips button[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff}
.faq2-chips button[aria-pressed="true"]::before{background:var(--deep)}
/* questions : grandes lignes, un repère de couleur par parcours */
.faq2-list{border-top:1px solid rgba(255,255,255,.22)}
.qa2{border-bottom:1px solid rgba(255,255,255,.14);--acc:rgba(255,255,255,.5)}
.qa2 summary{position:relative;padding:28px 0 28px 30px;color:#fff}
.qa2 summary::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--acc);transition:transform .4s var(--eo)}
.qa2 h3{font-size:clamp(1.4rem,2.2vw,2.1rem);letter-spacing:-.025em}
.qa2 summary:hover h3{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;text-decoration-color:var(--acc)}
.qa2[open] summary::before{transform:scale(1.5)}
.qa2 .qa-a{padding:0 64px 30px 30px}
.qa2 .qa-a p{color:#dfe5eb;font-size:1.1875rem}
.qa2 .qa-a a{color:#fff;text-decoration-color:var(--acc)}
.qa2 summary:focus-visible{outline-color:#fff}
.qa2 mark{background:color-mix(in srgb,var(--acc) 55%,transparent);color:#fff}
@keyframes qa-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qa2:not([hidden]){animation:qa-in .45s var(--eo) both}
.faq2-none{color:#dfe5eb}
.faq2-none a{color:#fff}
@media(prefers-reduced-motion:reduce){.qa2:not([hidden]){animation:none}}
.re-x .mcell:first-child img{translate:none}

/* =====================================================================================
   PUBLICATIONS v3 — « la preuve par l'écrit » : deux compteurs, puis un rail de cartes qu'on fait glisser
   ===================================================================================== */
/* le rail */
/* flèches du rail */

/* =====================================================================================
   FAQ v3 — « la question à la une » : sommaire à gauche, la question choisie en très grand à droite
   ===================================================================================== */
@media(min-width:1000px){
  @keyframes st-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}

/* =====================================================================================
   « L'INDEX » — Publications et FAQ partagent la grammaire du triptyque : la ligne, le filet, la couleur du parcours
   (concept : Drive REFONTE-2026-11/PROMPT-PUBLICATIONS-FAQ.md)
   ===================================================================================== */
.pi{list-style:none;margin:0;padding:0;counter-reset:none}
.pi-row{position:relative;--acc:var(--navy)}
.pi-row[data-p="ing"]{--acc:#6f9cc0}
.pi-row[data-p="dev"]{--acc:var(--bronze)}
.pi-row[data-p="val"]{--acc:#c57a52}
/* filet de tête : tracé à l'entrée, rempli de la couleur du parcours au survol */
.pi-row::before,.pi-row::after{content:"";position:absolute;left:0;right:0;top:0;transform-origin:left;pointer-events:none}
.pi-row::before{height:1px;background:var(--line2);transform:scaleX(var(--d,1))}
.pi-row::after{height:3px;top:-1px;background:var(--acc);transform:scaleX(0);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.pi > .pi-row:last-child{border-bottom:1px solid var(--line2)}
.pi-row a{display:grid;grid-template-columns:72px 190px minmax(0,1fr) 210px 56px;align-items:center;gap:0 24px;padding:clamp(22px,3.2vh,34px) 0;color:var(--navy);text-decoration:none}
.pi-m{display:flex;flex-direction:column;gap:4px;font-size:.9375rem;color:var(--mute)}
.pi-m time{color:var(--ink)}
.pi-img{display:none}
/* survol (souris) : la ligne visée avance, les autres s'effacent */
@media(hover:hover) and (min-width:900px){
  .pi .pi-row{transition:opacity .45s cubic-bezier(.16,1,.3,1)}
  .pi:hover .pi-row:not(:hover){opacity:.3}
  .pi-row:hover::after,.pi-row:focus-within::after{transform:scaleX(1)}
}
.pi-row a:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
/* vignette qui suit le pointeur (bureau) */
.pi-prev{position:absolute;left:0;top:0;z-index:6;width:clamp(260px,24vw,380px);aspect-ratio:3/2;pointer-events:none;overflow:hidden;border-radius:var(--r);
  clip-path:inset(100% 0 0 0);transition:clip-path .55s cubic-bezier(.16,1,.3,1);will-change:transform;background:var(--navy)}
.pi-prev.on{clip-path:inset(0 0 0 0)}
.pi-prev > *{position:absolute;inset:0}
.pi-prev img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.pi-prev.on img{transform:scale(1)}
@media(max-width:899px),(hover:none){.pi-prev{display:none}}
/* entrée au défilement (seulement si le script tourne) */
.pi-js .pi-row{--d:0}
.pi-js .pi-row > a > *:not(.pi-img){opacity:0;transform:translateY(28px)}
.pi-js .pi-row.in{--d:1}
.pi-js .pi-row::before{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.pi-js .pi-row > a > *{transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.pi-js .pi-row.in > a > *:not(.pi-img){opacity:1;transform:none}
.pi-js .pi-row.in > a > .pi-m{transition-delay:.2s}
/* mobile : vignette carrée à gauche, texte à droite */
@media(max-width:899px){
  .pi-row a{grid-template-columns:88px minmax(0,1fr);grid-template-areas:"img k" "img t" "img m";gap:6px 16px;align-items:start;padding:20px 0}.pi-m{grid-area:m;flex-direction:row;flex-wrap:wrap;gap:4px 12px;font-size:.875rem}
  .pi-img{display:block;grid-area:img;width:88px;aspect-ratio:1;border-radius:var(--r);overflow:hidden;position:relative}
  .pi-img img{width:100%;height:100%;object-fit:cover}
}
@media(prefers-reduced-motion:reduce){.pi-js .pi-row{--d:1}.pi-js .pi-row > a > *{opacity:1!important;transform:none!important;transition:none}}

/* ----- FAQ : le même index, qui s'ouvre ----- */
.faq2-list{counter-reset:qa;border-top:0}
@media(hover:hover) and (min-width:900px){.faq2-list:hover .qa2:not(:hover):not([open]) h3{opacity:.55}}
.pi-row.done > a > *{transition-delay:0s!important}
@media(min-width:900px){.pi-prev{width:clamp(220px,17vw,270px)}}

/* =====================================================================================
   CONCEPT 4 « LA PILE » — Publications : des plans plein cadre qui se posent les uns sur les autres
   (même vocabulaire que le plan d'ouverture des Réalisations ; position:sticky, aucun épinglage)
   ===================================================================================== */
.pile{list-style:none;margin:clamp(8px,2vh,24px) 0 0;padding:0}
.pile-c{position:sticky;top:calc(92px + var(--i) * 18px);height:min(78vh,740px);margin-bottom:7vh;--acc:#fff}
.pile-c:last-child{margin-bottom:0}
.pile-c[data-p="dev"]{--acc:var(--acc-dev)}.pile-c[data-p="ing"]{--acc:var(--acc-ing)}.pile-c[data-p="val"]{--acc:var(--acc-val)}
.pile-in{position:relative;display:block;height:100%;overflow:hidden;border-radius:var(--r);background:var(--deep);color:#fff;text-decoration:none;
  transform-origin:50% 0;box-shadow:0 -1px 0 rgba(255,255,255,.06),0 -24px 60px -30px rgba(15,36,56,.5)}
.pile-in::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,36,56,.35) 0%,rgba(15,36,56,0) 28%,rgba(15,36,56,.2) 50%,rgba(15,36,56,.88) 100%)}
.pile-in::before{content:"";position:absolute;inset:0;z-index:4;background:#0a1826;opacity:var(--sh,0);pointer-events:none}
.pile-n{font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums;color:#fff}
.pile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;font-size:1rem;color:rgba(255,255,255,.86)}
.pile-t{margin:0;font-size:clamp(2.2rem,4.7vw,4.9rem);font-weight:500;line-height:1.02;letter-spacing:-.045em;color:#fff;max-width:19ch;text-wrap:balance}
.pile-t .ln{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.pile-go{justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px;border:1.5px solid rgba(255,255,255,.6);border-radius:var(--r);
  font-weight:500;color:#fff;transition:background .4s,color .4s,border-color .4s}
.pile-in:hover .pile-go,.pile-in:focus-visible .pile-go{background:#fff;border-color:#fff;color:var(--navy)}
.pile-in:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
/* la presse : la une du magazine */
.pile-all{margin:clamp(28px,5vh,48px) 0 0;text-align:right}
.pile-all a{display:inline-flex;align-items:center;gap:10px;font-size:1.125rem;font-weight:500;color:var(--navy);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:.3em}
.pile-all a:hover{text-decoration-color:var(--navy)}
@media(max-width:760px){
  .pile-c{top:calc(78px + var(--i) * 10px);height:72vh;margin-bottom:5vh}
  .pile-t{font-size:clamp(1.75rem,8vw,2.4rem)}
  .pile-meta{font-size:.875rem;gap:4px 14px}
  .pile-all{text-align:left}
}
@media(prefers-reduced-motion:reduce){.pile-c{position:relative;top:auto}}

/* =====================================================================================
   FAQ « une question à la fois » — la question en très grand, la réponse en regard ; on avance de l'une à l'autre
   ===================================================================================== */
.fq{display:none}
@media(min-width:1000px){
  .fq-bar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:0 28px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.2)}
  .fq-n{font-size:1rem;font-weight:500;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
  .fq-n b{font-weight:500;color:#fff}
  .fq-k{display:inline-flex;align-items:center;gap:10px;font-size:1rem;font-weight:500;color:#fff;min-width:15ch}
  .fq-k::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--acc,#fff);transition:background .5s}
  .fq-seg{display:flex;gap:6px}
  .fq-seg button{flex:1;height:28px;padding:0;border:0;background:none;cursor:pointer;position:relative}
  .fq-seg button::before,.fq-seg button::after{content:"";position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px}
  .fq-seg button::before{background:rgba(255,255,255,.18)}
  .fq-seg button::after{background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .fq-seg button[aria-current="true"]::after{transform:scaleX(1)}
  .fq-seg button:hover::before{background:rgba(255,255,255,.4)}
  .fq-seg button:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .fq-nav{display:flex;gap:10px}
  .fq-nav button{display:grid;place-items:center;width:56px;height:56px;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;background:none;color:#fff;cursor:pointer;
    transition:background .35s,color .35s,border-color .35s}
  .fq-nav button:hover{background:#fff;border-color:#fff;color:var(--deep)}
  .fq-nav button:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .fq-prev .ico{transform:rotate(180deg)}
  .fq-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 clamp(40px,5vw,96px);align-items:end;min-height:clamp(380px,52vh,520px);padding-top:clamp(36px,6vh,64px)}
  .fq-q{margin:0;font-size:clamp(2.8rem,5.2vw,5.4rem);font-weight:500;line-height:1;letter-spacing:-.05em;color:#fff;text-wrap:balance;align-self:start}
  .fq-q .ln{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
  .fq-a{padding-bottom:6px}
  .fq-a p{margin:0;font-size:clamp(1.125rem,1.3vw,1.25rem);line-height:1.62;color:#dfe5eb}
  .fq-a a{color:#fff;font-weight:500;text-decoration:underline;text-decoration-color:var(--acc,#fff);text-underline-offset:.25em}
  .fq-hint{margin:22px 0 0;font-size:.875rem;color:rgba(255,255,255,.55)}
}
.pile-in::after{background:linear-gradient(180deg,rgba(15,36,56,.4) 0%,rgba(15,36,56,0) 20%,rgba(15,36,56,.3) 42%,rgba(15,36,56,.92) 100%),linear-gradient(90deg,rgba(15,36,56,.5),rgba(15,36,56,0) 62%)}
@media(min-width:1000px){
  .fq-body{min-height:clamp(320px,44vh,460px);padding-top:clamp(28px,5vh,52px)}
}
/* onglets de la pile : un par parcours, dans l'ordre du triptyque */
.pile-tab{position:relative;display:inline-flex;align-items:baseline;gap:8px;padding:14px 0 18px;border:0;background:none;cursor:pointer;
  font:500 clamp(1.25rem,1.9vw,1.75rem)/1.1 var(--f);letter-spacing:-.025em;color:var(--mute);transition:color .35s}
.pile-tab .pt-n{font-size:.9375rem;letter-spacing:0;font-variant-numeric:tabular-nums}
.pile-tab::before{content:"";align-self:center;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:2px}
.pile-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pile-tab[data-p="dev"]{--c:var(--bronze)}.pile-tab[data-p="ing"]{--c:#6f9cc0}.pile-tab[data-p="val"]{--c:#c57a52}.pile-tab[data-p="press"]{--c:var(--navy)}
.pile-tab:hover,.pile-tab[aria-pressed="true"]{color:var(--navy)}
.pile-tab[aria-pressed="true"]::after{transform:scaleX(1)}
.pile-tab:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.pile-c[hidden]{display:none}
@media(max-width:760px){.pile-tab{flex:none;font-size:1.125rem}}

/* =====================================================================================
   VARIANTE « MOSAÏQUE » des Publications (page index-lpas-mosaique.html) — la mosaïque se recompose par parcours
   ===================================================================================== */
.mz{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(210px,27vh,290px);gap:clamp(10px,1vw,16px)}
.mz-c{position:relative;min-width:0;--acc:#fff}
.mz-c[hidden]{display:none}
.mz-c[data-p="dev"]{--acc:var(--acc-dev)}.mz-c[data-p="ing"]{--acc:var(--acc-ing)}.mz-c[data-p="val"]{--acc:var(--acc-val)}
/* tuile « voir les 10 » et presse : aplats, pas d'image */
@media(max-width:760px){
  .mz{grid-template-columns:1fr;grid-auto-rows:auto}
  .mz-c{grid-area:auto!important;aspect-ratio:4/3}
  .mz-c.is-big{aspect-ratio:4/5}
}
.mz-c{clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.77,0,.18,1) calc(var(--k,0) * 90ms)}
.mz-c img{transition:transform 1.4s cubic-bezier(.16,1,.3,1) calc(var(--k,0) * 90ms)}
.mz-c.mz-hide{clip-path:inset(100% 0 0 0);transition:none}
.mz-c.mz-hide img{transform:scale(1.3);transition:none}
.mz-c.mz-out{clip-path:inset(0 0 100% 0);transition:clip-path .45s cubic-bezier(.55,0,1,.45) calc(var(--k,0) * 40ms)}

/* =====================================================================================
   VARIANTE « LA UNE ET LE SOMMAIRE » (index-lpas-sommaire.html) — toute l'étendue visible, sans clic
   ===================================================================================== */
.sm-sec [data-p="dev"]{--acc:var(--bronze)}.sm-sec [data-p="ing"]{--acc:#6f9cc0}.sm-sec [data-p="val"]{--acc:#c57a52}
/* la une */
/* le sommaire : trois colonnes aux couleurs du triptyque, Ingénierie sur deux */
.sm-i{border-bottom:1px solid var(--line)}
.sm-i a{position:relative;display:grid;gap:8px;padding:18px 0 18px;color:var(--navy);text-decoration:none}
.sm-i a::before{content:"";position:absolute;left:0;top:26px;width:8px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.sm-i a:hover::before{transform:scaleX(1)}}
.sm-i a:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.sm-press{display:grid;gap:14px;margin-top:16px;padding:22px;border-radius:var(--r);background:var(--navy);color:#fff;text-decoration:none;transition:background .4s}
.sm-press:hover{background:var(--deep)}
/* entrée : le filet de chaque colonne se trace, puis les titres montent en cascade */
.sm-js .sm-col{--d:0}.sm-js .sm-col.in{--d:1}
.sm-js .sm-i,.sm-js .sm-press{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--k,0) * 55ms + 200ms)}
.sm-js .sm-col.in .sm-i,.sm-js .sm-col.in .sm-press{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.sm-js .sm-col{--d:1}.sm-js .sm-i,.sm-js .sm-press{opacity:1;transform:none;transition:none}}

/* LA UNE QUI DÉFILE — un guide par parcours, puis la presse ; progression aux couleurs des parcours, pause au survol */
.su{position:relative;display:block;height:clamp(420px,62vh,600px);overflow:hidden;border-radius:var(--r);background:var(--deep)}
.su::after{display:none}
.su-s{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s cubic-bezier(.16,1,.3,1),visibility 0s .9s}
.su-s.is-on{opacity:1;visibility:visible;transition:opacity .9s cubic-bezier(.16,1,.3,1),visibility 0s}
.su-s[data-p="dev"]{--acc:var(--acc-dev)}.su-s[data-p="ing"]{--acc:var(--acc-ing)}.su-s[data-p="val"]{--acc:var(--acc-val)}.su-s[data-p="press"]{--acc:#fff}
/* entrée du texte à chaque diapositive */
/* commandes : segments de progression + pause */
.su-seg{flex:1;height:32px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.su-seg i,.su-seg::after{position:absolute;left:0;right:0;top:14px;height:4px;border-radius:2px}
.su-seg i{background:rgba(255,255,255,.28)}
.su-seg::after{content:"";background:var(--c,#fff);transform:scaleX(0);transform-origin:left}
.su-seg[data-p="dev"]{--c:var(--acc-dev)}.su-seg[data-p="ing"]{--c:var(--acc-ing)}.su-seg[data-p="val"]{--c:var(--acc-val)}
.su-seg.done::after{transform:scaleX(1)}
.su-seg[aria-current="true"]::after{animation:su-fill var(--dur,2s) linear forwards}
.su.paused .su-seg[aria-current="true"]::after{animation-play-state:paused}
@keyframes su-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.su-seg:focus-visible,.su-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
.su-pause{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-left:8px;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;background:none;color:#fff;cursor:pointer;transition:background .3s,color .3s}
.su-pause:hover{background:#fff;color:var(--navy)}
.su-pause[aria-pressed="true"] svg path{d:path("M8 5l11 7-11 7z");fill:currentColor;stroke:none}
@media(prefers-reduced-motion:reduce){.su-seg[aria-current="true"]::after{animation:none;transform:scaleX(1)}}
.su.offscreen .su-seg[aria-current="true"]::after{animation-play-state:paused}
.su-s,.su-s.is-on{transition-duration:.6s}
.su-s,.su-s.is-on{transition-duration:.35s}

/* FAQ EN SOMMAIRE — mêmes colonnes que les Publications, sur fond marine ; chaque question s'ouvre sur place */
.fs-sec [data-p="dev"]{--acc:var(--acc-dev)}.fs-sec [data-p="ing"]{--acc:var(--acc-ing)}.fs-sec [data-p="val"]{--acc:var(--acc-val)}.fs-sec [data-p="all"]{--acc:#fff}
.fs-sec .qa2::before{background:rgba(255,255,255,.14)}
.fs-sec .qa2:first-child::before{display:none}
.fs-sec .qa2:last-child{border-bottom:0}
.fs-sec .qa2 summary{grid-template-columns:minmax(0,1fr) 40px;gap:0 14px;padding:20px 0}
.fs-sec .qa2 summary::before{display:none}
.fs-sec .qa2 h3{font-size:clamp(1.125rem,1.35vw,1.3125rem);line-height:1.3;letter-spacing:-.01em;max-width:none}
.fs-sec .qa2 summary:hover h3{transform:translateX(10px)}
.fs-sec .qa2 .qa-a{padding:0}
.fs-sec .qa2 .qa-a p{margin:0;max-width:none;padding:0 0 24px;font-size:1.0625rem;line-height:1.6}
.fs-sec .qa2::after{height:2px;top:-1px}
html{overflow-x:clip}

/* =====================================================================================
   CONTACT « PAR OÙ COMMENCER ? » — trois portes aux couleurs des parcours, puis la ligne directe ; fond clair
   ===================================================================================== */
section.ct{background:var(--paper)!important;color:var(--ink)}
section.ct::before,section.ct::after{display:none!important}
.ct .sh h2{color:var(--navy)}.ct .sh-k{color:var(--mute)}.ct .sh-d{color:var(--ink)}
.ct [data-p="dev"]{--acc:var(--bronze)}.ct [data-p="ing"]{--acc:#6f9cc0}.ct [data-p="val"]{--acc:#c57a52}

/* =====================================================================================
   CONTACT « LE DERNIER PLAN » — la ville du héros s'ouvre de la marge au plein cadre ; une phrase, deux gestes
   ===================================================================================== */
.end{position:relative;min-height:min(100vh,980px);display:grid;align-items:end;background:var(--deep);color:#fff;overflow:hidden;isolation:isolate}
.end-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--vs,1))}
.end .sh-k{color:rgba(255,255,255,.8)}
.end-t{margin:12px 0 0;font-size:clamp(3.2rem,9vw,9.5rem);font-weight:500;line-height:.94;letter-spacing:-.055em;color:#fff;max-width:11ch}
.end-t .ln{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.end-b{display:inline-flex;align-items:center;gap:18px;min-height:72px;padding:0 30px;border-radius:999px;text-decoration:none;font-weight:500;
  transition:background .4s,color .4s,border-color .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.end-b:focus-visible{outline:2px solid #fff;outline-offset:4px}
.end-adr{display:flex;flex-wrap:wrap;gap:6px 28px;margin:clamp(48px,9vh,96px) 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.25);font-size:1rem;color:rgba(255,255,255,.8)}
/* le pied de page prolonge le plan : même fond, identité en note */
@media(max-width:760px){.end{min-height:92vh}.end-b{width:100%;justify-content:space-between;min-height:64px;padding:0 22px}.end-t{font-size:clamp(2.8rem,14vw,4rem)}}

/* =====================================================================================
   PIED DE PAGE — plan du site par parcours, identité courte, barre légale ; prolonge « le dernier plan »
   ===================================================================================== */

/* =====================================================================================
   LONGUEUR (06/11) : Outils sans épinglage ; sur mobile, triptyque, réalisations et sommaire resserrés
   ===================================================================================== */
.feats li{cursor:pointer}
@media(max-width:980px){
  .su{height:min(64vh,460px)}
}
@media(max-width:760px){
  /* triptyque : trois volets d'un tiers d'écran au lieu de trois écrans */
  .dp-side{height:max(300px,38svh)!important;min-height:0!important}
  /* réalisations : deux colonnes */
  .re-x .mosa{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:190px!important;gap:8px!important}
  .re-x .mcell{grid-column:auto!important;grid-row:auto!important;height:auto!important}

  .re-x .mcell b{font-size:.9375rem}
  .re-x .mcell small{font-size:.75rem}
}
@media(max-width:760px){
  .re-x .mosa{grid-template-rows:repeat(3,190px)!important;grid-template-areas:none!important;height:auto!important}
  .re-x .mcell{aspect-ratio:auto!important;min-height:0!important}
  .sys .txt p+p{display:none}
  .sys .feats{display:none}
}
@media(max-width:760px){.sec{padding-top:clamp(64px,10vh,88px);padding-bottom:clamp(64px,10vh,88px)}}
@media(max-width:760px){
  .re-x .mcell{position:relative;overflow:hidden;transform:none!important}
  .re-x .mcell > a{position:absolute;inset:0;display:block}
  .re-x .mcell img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover;transform:none!important;top:0!important}
  .re-x .mcell .ct{font-size:.875rem!important;line-height:1.2;background:none!important;color:#fff!important}
  .re-x .mcell .st{font-size:.6875rem;top:8px;left:8px;padding:3px 8px}
}

/* =====================================================================================
   AUDIT (06/11) — FAQ sur fond clair (alternance), un seul style de bouton, flèche du héros vers le bas
   ===================================================================================== */
/* FAQ claire : sombre (Outils) · clair (Publications, papier) · clair (FAQ, pierre) · sombre (le dernier plan) */
.fs-sec .sh-k{color:var(--mute)}
.fs-sec h2{color:var(--navy)!important}
.fs-sec [data-p="dev"]{--acc:var(--bronze)}.fs-sec [data-p="ing"]{--acc:#6f9cc0}.fs-sec [data-p="val"]{--acc:#c57a52}.fs-sec [data-p="all"]{--acc:var(--navy)}
.fs-sec .qa2 summary{color:var(--navy)}
.fs-sec .qa2 h3{color:var(--navy)!important;opacity:1!important}
.fs-sec .qa2::before{background:var(--line2)}
.fs-sec .qa2 .qa-a p{color:var(--ink)}
.fs-sec .qa2 .qa-a a{color:var(--navy);text-decoration-color:var(--acc)}
.fs-sec .qa2 summary:focus-visible{outline-color:var(--navy)}
.fs-sec .qa2 mark{background:color-mix(in srgb,var(--acc) 35%,transparent);color:var(--navy)}
.fs-sec .faq2-none,.fs-sec .faq2-none a{color:var(--navy)}
@media(hover:hover) and (min-width:900px){.fs-sec .faq2-list:hover .qa2:not(:hover):not([open]) h3{opacity:.55!important}}
/* boutons : un seul dessin (rectangle à angles doux), le cercle reste réservé aux flèches seules */
.end-b{border-radius:var(--r)}
.dp-vid.on{opacity:1}

/* =====================================================================================
   TRIPTYQUE « UN SEUL PLAN » (06/11) : une même vidéo derrière les trois volets, vue à travers trois fenêtres ;
   le volet survolé s'éclaire, les autres restent en retrait
   ===================================================================================== */

/* =====================================================================================
   PLAN CONTINU (06/11) : la vidéo du héros reste fixe à l'écran ; le triptyque, transparent, se pose dessus.
   Les sections suivantes (fonds pleins) la recouvrent. Mouvement réduit : la vidéo reste dans le héros.
   ===================================================================================== */
@media(prefers-reduced-motion:no-preference){
  html:has(.dp-cont) .hero .hero-camera{position:fixed;inset:0;width:100%;height:100lvh}
  html:has(.dp-cont) #parcours,html:has(.dp-cont) .dp-cont{background:transparent!important}
  .dp-cont::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(11,28,44,.94) 0,rgba(11,28,44,.55) 18%,rgba(11,28,44,.18) 48%,rgba(11,28,44,.5) 100%);pointer-events:none}
}
@media(prefers-reduced-motion:no-preference){
  /* raccord : l'ombre du héros et celle du triptyque se rejoignent au même niveau (0,72), sans bande sombre */
  .dp-cont::before{background:linear-gradient(180deg,rgba(11,28,44,.72) 0,rgba(11,28,44,.42) 22%,rgba(11,28,44,.16) 50%,rgba(11,28,44,.5) 100%)!important}
}
html:has(.dp-cont) #parcours{padding:0!important}

/* =====================================================================================
   CONTACT LISIBLE (06/11) : voile franc, plus de cadre animé ni de titre découpé ; la vidéo du héros est masquée après le triptyque
   ===================================================================================== */
.end-vid{transform:none!important;filter:saturate(.85)}
.end-t .ln,.end-t{transform:none!important;opacity:1!important}
.end-b,.end-adr{transform:none!important;opacity:1!important}
.end-t{text-shadow:0 2px 30px rgba(8,20,31,.45)}
.end .sh-k{color:#fff}
.end-adr{color:#fff}
html.cam-off .hero .hero-camera{visibility:hidden}

/* relecture mobile (06/11) */
@media(max-width:760px){
  .re-x .mcell{clip-path:none!important}
  .re-x .mcell img{clip-path:none!important}
  html:has(.dp-cont) .dp-cont::before{background:linear-gradient(180deg,rgba(11,28,44,.78) 0,rgba(11,28,44,.5) 14%,rgba(11,28,44,.3) 40%,rgba(11,28,44,.55) 100%)!important}
}

/* =====================================================================================
   PAGES DE PARCOURS (06/11) — même système que la landing : couleur du parcours, sections courtes, aucune image de remplissage
   ===================================================================================== */
.pp [data-p="dev"]{--c:var(--bronze)}
.pp[data-p="ing"]{--a2:#6f9cc0}.pp[data-p="dev"]{--a2:var(--bronze)}.pp[data-p="val"]{--a2:#c57a52}
.pp-sec{padding:clamp(72px,11vh,128px) 0;background:var(--paper);color:var(--ink)}
.pp-sec .sh h2{color:var(--navy)}
/* missions : quatre blocs typographiques, filet à la couleur du parcours */
/* situations : lignes */
/* méthode : trois engagements sur fond marine */
/* opérations : deux grandes photos réelles */
/* guides : le sommaire de la landing */
/* FAQ et autres parcours */

/* 10/11 : trois opérations sur une ligne (page Développement) */

/* 10/11 : colonnes des situations alignées d’une ligne à l’autre */

/* 10/11 : page Valorisation — « Pour qui » sur papier, pour casser la suite de fonds marine (héros → dossier) */

/* 10/11 : mention discrète (la pastille a été refusée) */
.pj-doc{margin-bottom:26px}

/* 10/11 : mobile — le bouton de mission passe sous la situation (libellés longs : Transformation, Programme) */

/* 10/11 : arrêt sur le triptyque — repère discret en bas de l'écran pendant l'épinglage */
.dp-stop{position:absolute;z-index:6;left:50%;bottom:clamp(18px,3vh,32px);transform:translate(-50%,8px);display:grid;justify-items:center;gap:10px;margin:0;
  font-size:.9375rem;font-weight:500;letter-spacing:.01em;color:#fff;opacity:0;pointer-events:none;transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1);text-shadow:0 1px 12px rgba(8,20,31,.5)}
.dp-stop.on{opacity:1;transform:translate(-50%,0)}
.dp-stop i{display:block;width:120px;height:2px;background:rgba(255,255,255,.28);overflow:hidden}
.dp-stop b{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}

/* 10/11 : Réalisations — titre en grand (« trop petit », Alain) */
.re-x .sh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px}
.re-x .sh-l{flex:1 1 640px;max-width:none}
.re-x .sh-r{flex:0 0 auto}
.re-x .sh h2{font-size:clamp(2.5rem,5.6vw,5.75rem);line-height:.98;letter-spacing:-.045em;max-width:17ch;font-weight:500}

/* 10/11 : voile haut du triptyque fondu jusqu’à zéro (il s’arrêtait net à 198 px : cassure visible) */
.dp::before{background:linear-gradient(180deg,rgba(11,28,44,.6),rgba(11,28,44,0))!important}

/* ================= 10/11 : OUTILS — la chaîne de l'application de chantier ================= */
.oc-sec{background:var(--deep);color:#fff}
.oc-sec .sh h2{color:#fff;font-size:clamp(2rem,3.6vw,3.5rem);max-width:18ch}
.oc-sec .sh-k{color:#9cc2e0}.oc-sec .sh-d,.oc-sec .sh-d p{color:#dfe5eb}
.oc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,72px);align-items:center;margin-top:clamp(32px,5vh,56px)}
.oc-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.oc-step{position:relative;display:grid;gap:6px;width:100%;text-align:left;appearance:none;background:none;border:0;border-top:1px solid rgba(255,255,255,.16);
  padding:clamp(16px,2.4vh,24px) 0 clamp(18px,2.6vh,26px);color:rgba(255,255,255,.55);font:inherit;cursor:pointer;transition:color .4s}
.oc-step b{font-size:clamp(1.3rem,1.8vw,1.65rem);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.oc-step span{font-size:1rem;line-height:1.5;max-width:40ch}
.oc-step i{position:absolute;left:0;top:-1px;height:2px;width:100%;background:#9cc2e0;transform-origin:0 50%;transform:scaleX(0)}
.oc-step.on{color:#fff}
.oc-step.on i{transform:scaleX(var(--p,1))}
.oc-step:hover{color:#fff}
.oc-step:focus-visible{outline:2px solid #fff;outline-offset:4px}
.oc-stage{margin:0;display:grid;justify-items:center;gap:12px}
.oc-dev{position:relative;width:100%;max-width:780px;aspect-ratio:16/10;background:#f6f7f8;color:#16354e;border-radius:10px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);
  transition:max-width .8s cubic-bezier(.16,1,.3,1),aspect-ratio .8s cubic-bezier(.16,1,.3,1),border-radius .8s}
.oc-dev[data-k="0"]{max-width:290px;aspect-ratio:9/16.8;border-radius:34px;box-shadow:0 30px 80px -30px rgba(0,0,0,.55),0 0 0 9px #0b1520,0 0 0 10px rgba(255,255,255,.12)}
.oc-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#e9edf0;border-bottom:1px solid #dce2e7;font-size:.8125rem;color:#5d6874;transition:opacity .4s}
.oc-bar i{width:9px;height:9px;border-radius:50%;background:#c9d1d8}
.oc-bar span{margin-left:8px}
.oc-dev[data-k="0"] .oc-bar{opacity:0;height:22px}
.oc-scr{position:absolute;inset:36px 0 0}
.oc-dev[data-k="0"] .oc-scr{inset:22px 0 0}
.oc-pane{position:absolute;inset:0;padding:clamp(16px,2.2vw,28px);opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none;overflow:hidden}
.oc-pane.on{opacity:1;transform:none;transition-delay:.25s;pointer-events:auto}
/* téléphone */
.oc-ph-top{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:1.0625rem;margin-bottom:12px}
.oc-ph-top em{font-style:normal;font-size:.8125rem;font-weight:500;padding:3px 8px;border-radius:3px;background:#16354e;color:#fff}
.oc-ph-img{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3}
.oc-ph-img img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.oc-pin{position:absolute;left:62%;top:58%;width:22px;height:22px;margin:-11px;border-radius:50%;border:3px solid #fff;background:#c57a52;box-shadow:0 0 0 6px rgba(197,122,82,.35)}
.oc-ph-f{margin:12px 0 0;display:grid;gap:8px}
.oc-ph-f div{display:grid;gap:1px}
.oc-ph-f dt{font-size:.75rem;color:#5d6874}
.oc-ph-f dd{margin:0;font-size:.9375rem;font-weight:500;line-height:1.35}
.oc-ph-btn{position:absolute;left:clamp(16px,2.2vw,28px);right:clamp(16px,2.2vw,28px);bottom:18px;display:grid;place-items:center;min-height:44px;border-radius:8px;background:#16354e;color:#fff;font-size:.9375rem;font-weight:500}
/* écran */
.oc-w-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding-bottom:14px;border-bottom:1px solid #dce2e7}
.oc-w-h b{font-size:1.25rem;font-weight:600}
.oc-w-h span{font-size:.9375rem;color:#5d6874}
.oc-chip{margin-left:auto;font-style:normal;font-size:.8125rem;font-weight:500;padding:3px 10px;border-radius:3px;background:#e4e8ec;color:#16354e}
.oc-chip.ok{background:#dcefe3;color:#1d6b3c}
.oc-cr{list-style:none;margin:0;padding:0}
.oc-cr li{display:grid;grid-template-columns:3.2rem 1fr auto;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid #e3e7eb;font-size:.9375rem}
.oc-cr li span{font-weight:600;color:#5d6874}
.oc-cr li p{margin:0;line-height:1.45}
.oc-cr li p i{font-style:normal;font-size:.8125rem;color:#a85f3a;margin-left:6px}
.oc-cr li em{font-style:normal;font-size:.8125rem;color:#5d6874;white-space:nowrap}
.oc-cr .oc-new{background:linear-gradient(90deg,rgba(197,122,82,.12),rgba(197,122,82,0));box-shadow:inset 3px 0 0 #c57a52;padding-left:10px;margin-left:-10px}
.oc-dif{list-style:none;margin:0;padding:0}
.oc-dif li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #e3e7eb;font-size:.9375rem}
.oc-dif b{font-weight:500}
.oc-dif em{font-style:normal;font-size:.8125rem;color:#5d6874}
.oc-dif em.ok{color:#1d6b3c;font-weight:500}
.oc-f{position:absolute;left:clamp(16px,2.2vw,28px);bottom:16px;margin:0;font-size:.875rem;color:#5d6874}
.oc-tl{list-style:none;margin:18px 0 0;padding:0 0 0 22px;border-left:2px solid #dce2e7;display:grid;gap:18px}
.oc-tl li{position:relative;display:grid;grid-template-columns:5rem 1fr;gap:2px 14px}
.oc-tl li::before{content:"";position:absolute;left:-29px;top:5px;width:12px;height:12px;border-radius:50%;background:#16354e;box-shadow:0 0 0 4px #f6f7f8}
.oc-tl li:last-child::before{background:#1d6b3c}
.oc-tl time{grid-row:1/3;font-size:.875rem;color:#5d6874;padding-top:1px}
.oc-tl b{font-weight:600;font-size:1rem}
.oc-tl span{font-size:.875rem;color:#5d6874}
.oc-pane.on .oc-new,.oc-pane.on .oc-dif li,.oc-pane.on .oc-tl li{animation:ocIn .6s cubic-bezier(.16,1,.3,1) both}
.oc-pane.on .oc-dif li:nth-child(2),.oc-pane.on .oc-tl li:nth-child(2){animation-delay:.42s}
.oc-pane.on .oc-dif li:nth-child(3),.oc-pane.on .oc-tl li:nth-child(3){animation-delay:.54s}
.oc-pane.on .oc-dif li:nth-child(4){animation-delay:.66s}.oc-pane.on .oc-dif li:nth-child(5){animation-delay:.78s}
.oc-pane.on .oc-new,.oc-pane.on .oc-dif li:first-child,.oc-pane.on .oc-tl li:first-child{animation-delay:.3s}
@keyframes ocIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:899px){
  .oc{grid-template-columns:1fr}
  .oc-dev{aspect-ratio:4/5}
  .oc-dev[data-k="0"]{max-width:300px}
  .oc-cr li{grid-template-columns:2.6rem 1fr}.oc-cr li em{grid-column:2}
  .oc-step{padding:14px 0 16px}
}
@media(prefers-reduced-motion:reduce){.oc-dev,.oc-pane,.oc-step i{transition:none}.oc-pane.on *{animation:none!important}}


/* =====================================================================
   ACCUEIL ALIGNÉ SUR LES PARCOURS (10/11/2026) : palette M4 + numéros du cycle
   ===================================================================== */
:root{--acc-dev:#E9D8C2;--acc-ing:#CADDF2;--acc-val:#F1D2CF}


/* =====================================================================
   ACCUEIL ALLÉGÉ (10/11/2026) : bloc « Comment nous suivons votre opération », presse seule, renvoi des questions
   ===================================================================== */
.org{background:#F6EFE3;color:#0F2438}
.org .sh-k{color:#664610}

/* réalisations à 4 opérations (accueil allégé) : une grande, une haute, deux petites, sur deux rangées */
@media(min-width:981px){.mosa:has(> .mcell:nth-child(4):last-child){grid-template-areas:"a a b c" "a a b d"}}
@media(min-width:561px) and (max-width:980px){.mosa:has(> .mcell:nth-child(4):last-child){grid-template-areas:"a a" "b c" "b d"}}
@media(max-width:760px){.re-x .mosa:has(> .mcell:nth-child(4):last-child){grid-template-rows:repeat(2,190px)!important}}


/* =====================================================================
   ACCUEIL — LE BAS DE PAGE MET LES WATTS (10/11/2026)
   organisation marine + « 3 » géant · publications chiffres géants · presse en grand sur argile · questions sur brume
   ===================================================================== */
/* organisation */
/* publications : les chiffres en grand */
/* presse : la citation en très grand, sur un bandeau argile pleine largeur */
/* questions : fond brume, questions en grand */
.fs-sec{background:#CADDF2}
.fs-sec .sh-k{color:#285077}
.fs-sec .qa2 summary h3{font-size:clamp(1.25rem,1.8vw,1.9rem);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.fs-sec .qa2{border-top:1.5px solid #0F2438}

/* questions sur brume : une règle plus ancienne fixait le fond de .faq2 */
section#questions.fs-sec{background:#CADDF2}

/* transitions du bas de l'accueil (assets/landing-watts.js) : volets et filets tracés ; sans JS, tout reste visible */

/* 10/11, retours d'Alain : pas de rose sur l'accueil (la presse passe en sable) ; pas de bande blanche entre la presse et les questions */

/* PRIMOE — pièces maîtresses des pages de parcours (10/11/2026)
   Ingénierie : planning des missions (.gp) · Développement : scénarios d'un actif (.sc) */

/* ================= INGÉNIERIE : « Qui intervient, et quand. » ================= */
.gp-sec{background:var(--paper)}
.gp{--lab:clamp(190px,19vw,270px);position:relative;margin-top:clamp(28px,4vh,48px)}
.gp-ph{padding:0 0 12px 12px;font-size:.9375rem;font-weight:500;color:var(--mute,#5d6874);border-left:1px solid rgba(22,53,78,.12);transition:color .4s}
.gp-ph.on{color:var(--navy)}
.gp-row{display:grid;grid-template-columns:var(--lab) 1fr;align-items:stretch;border-bottom:1px solid rgba(22,53,78,.14)}
.gp-bar,.gp-arret{position:absolute;top:50%;height:clamp(14px,1.7vh,18px);transform:translateY(-50%);
  left:calc(var(--a) / var(--n) * 100%);width:calc((var(--b) - var(--a)) / var(--n) * 100%)}
.gp-bar{border-radius:2px;background:rgba(22,53,78,.16);transition:background .45s}
.gp-bar::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--navy);transform-origin:0 50%;transform:scaleX(var(--f,1))}
.gp-arret{background:repeating-linear-gradient(-45deg,rgba(197,122,82,.55) 0 2px,transparent 2px 7px);border-radius:2px}
.gp-arret em{position:absolute;bottom:calc(100% + 6px);left:0;font-style:normal;font-size:.8125rem;font-weight:500;color:#a85f3a;white-space:nowrap}
.gp-cap ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gp-cap li{font-size:1.0625rem;line-height:1.5;color:var(--ink)}
.gp-cap li b{font-weight:600;color:var(--navy)}

/* bureau animé : le curseur avance, une seule légende à la fois, alignée sous le planning */
.gp-live .gp-row:not(.on) .gp-bar::after{background:rgba(22,53,78,.38)}
.gp-live .gp-cap{position:absolute;inset:0 auto auto 0;max-width:62ch;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.gp-live .gp-cap.on{opacity:1;transform:none}
.gp-live .gp-stick{min-height:100svh;display:flex;align-items:center}
.gp-live .gp-stick>.wrap{width:100%}

@media(max-width:899px){
  .gp{--lab:0px}
  .gp-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.gp-bar,.gp-cap{transition:none}}

/* ================= DÉVELOPPEMENT : « Un actif, plusieurs avenirs. » ================= */
.sc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,56px);margin-top:clamp(28px,4vh,48px);align-items:start}
.sc-fig{position:relative;margin:0;border-radius:4px;overflow:hidden;aspect-ratio:4/5;background:#0b1c2c}
.sc-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .8s}
.sc-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,28,44,0) 55%,rgba(11,28,44,.85))}
.sc-fig b{font-weight:500;color:#fff}
.sc-tab{appearance:none;border:1.5px solid rgba(255,255,255,.28);background:none;color:#fff;font:inherit;font-weight:500;font-size:1rem;min-height:44px;padding:0 18px;border-radius:var(--r,4px);cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.sc-tab:hover{border-color:#d9bd8e}
.sc-tab[aria-selected="true"]{background:#c9a46a;border-color:#c9a46a;color:#1c1913}
.sc-tab:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sc-pane[hidden]{display:none}
.sc-row-in{animation:scIn .55s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes scIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:899px){.sc{grid-template-columns:1fr}.sc-fig{aspect-ratio:16/10}}
@media(prefers-reduced-motion:reduce){.sc-row-in{animation:none}.sc-fig img{transition:none}}

/* mobile : chaque critère sur deux lignes (libellé + fiabilité, puis texte) */


/* =====================================================================
   10/11 (v2) — retours d'Alain : missions en mouvement, méthode limpide, bas de page refait
   ===================================================================== */

/* ---------- Développement : missions en défilement horizontal ---------- */
.hz-sec{background:var(--paper);padding:var(--sec,clamp(72px,11vh,128px)) 0;overflow:hidden}
.hz-view{overflow:hidden}
.hz-track{display:flex;gap:clamp(16px,1.6vw,28px);padding:0 var(--gut,clamp(20px,3.5vw,50px));width:max-content}
.hz-p{flex:0 0 min(78vw,1080px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,2.6vw,44px);align-items:stretch;
  background:#fff;border:1px solid rgba(22,53,78,.12);border-radius:6px;padding:clamp(14px,1.4vw,20px);min-height:clamp(380px,56vh,560px)}
.hz-f{position:relative;margin:0;border-radius:4px;overflow:hidden;background:#dfe4e8}
.hz-f img{position:absolute;inset:0;width:112%;max-width:none;height:100%;left:-6%;object-fit:cover;transform:translateX(var(--px,0))}
.hz-t{font-size:clamp(2.4rem,5vw,4.75rem);font-weight:500;letter-spacing:-.045em;line-height:.95;margin:0 0 18px}
.hz-prog{margin-top:clamp(20px,3vh,32px)}
.hz-prog i{display:block;height:2px;background:rgba(22,53,78,.12)}
.hz-prog b{display:block;height:100%;background:var(--navy);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.hz-live .hz-pin{height:100svh;display:flex;flex-direction:column;justify-content:center}
.hz-live{padding:0}
@media(max-width:899px){
  .hz-track{flex-direction:column;width:auto}
  .hz-p{flex-basis:auto;grid-template-columns:1fr;min-height:0}
  .hz-f{aspect-ratio:16/10}
  .hz-prog{display:none}
}

/* ---------- Développement : tableau comparatif des usages ---------- */
.mx{width:100%;border-collapse:collapse;table-layout:fixed}
.mx thead th{text-align:left;vertical-align:bottom;padding:0 18px 18px;border-bottom:2px solid #c9a46a}
.mx thead th b{display:block;font-size:clamp(1.4rem,2.2vw,2.1rem);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.mx thead th span{display:block;margin-top:6px;font-size:.9375rem;color:rgba(255,255,255,.7)}
.mx-pre thead th{opacity:0;transform:translateY(10px)}
.mx-in thead th{opacity:1;transform:none;transition:opacity .6s,transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--r,0) * 90ms + 240ms)}
.mx-in thead th{transition-delay:calc(var(--c,0) * 90ms)}
@media(max-width:899px){
  .mx{min-width:760px}
}
@media(prefers-reduced-motion:reduce){.mx-pre thead th{opacity:1;transform:none}}

/* ---------- Questions et guides : une seule section resserrée ---------- */
.qg-sec{background:#fff;padding:clamp(64px,10vh,112px) 0}
.qg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,112px);align-items:start}
.qg-h{color:var(--navy);font-size:clamp(2rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.04em;margin:8px 0 clamp(20px,3vh,32px)}
.pq{border-top:1px solid rgba(22,53,78,.16)}
.pq:last-child{border-bottom:1px solid rgba(22,53,78,.16)}
.pq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;list-style:none;color:var(--navy)}
.pq summary::-webkit-details-marker{display:none}
.pq h3{font-size:clamp(1.15rem,1.5vw,1.375rem);font-weight:500;letter-spacing:-.015em;line-height:1.25;margin:0}
.pq-i{position:relative;flex:none;width:36px;height:36px;border:1.5px solid rgba(22,53,78,.3);border-radius:50%;transition:transform .45s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
.pq-i::before,.pq-i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px -6px;background:currentColor}
.pq-i::after{transform:rotate(90deg)}
.pq[open] .pq-i{transform:rotate(45deg);background:var(--navy);border-color:var(--navy);color:#fff}
.pq summary:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pq summary:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.pq-a{padding:0 56px 22px 0}
.pq-a p{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--ink);max-width:62ch}
.pq-a a{color:var(--navy);font-weight:500}
.pg{position:sticky;top:110px;border-top:3px solid var(--acc,#16354e);padding-top:20px}
.pg-h{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;color:var(--navy);margin:0 0 8px}
.pg-l{list-style:none;margin:0 0 20px;padding:0}
.pg-l a{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid rgba(22,53,78,.12);text-decoration:none}
.pg-t{font-size:1rem;font-weight:500;line-height:1.35;color:var(--navy);transition:color .3s}
.pg-m{font-size:.8125rem;color:#5d6874}
.pg-l a:hover .pg-t{text-decoration:underline;text-underline-offset:3px}
@media(max-width:899px){.qg{grid-template-columns:1fr}.pg{position:static}.pq-a{padding-right:0}}

/* ---------- Les autres parcours : deux volets en image (écho du triptyque) ---------- */


/* =====================================================================
   10/11 (v3) — méthodes « claires, visuelles, qui poussent à décider »
   ===================================================================== */

/* ---------- Développement : trois usages comparés, une recommandation ---------- */
/* état final : la recommandation tranche */

/* ---------- Ingénierie : 3 chantiers au maximum, une semaine type ---------- */
.im-sec{background:var(--deep);color:#fff}
.im{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:center}
.sw{border:1px solid rgba(255,255,255,.16);border-radius:6px;overflow:hidden;background:rgba(255,255,255,.02)}
.sw-h{display:grid;grid-template-columns:minmax(120px,1.3fr) repeat(5,minmax(0,1fr))}
.sw-h span{padding:12px 10px;font-size:.8125rem;color:rgba(255,255,255,.6);border-left:1px solid rgba(255,255,255,.1)}
.sw-h span:first-child{border-left:0}
.sw-c{position:relative;border-left:1px solid rgba(255,255,255,.1);padding:8px 6px;display:flex;align-items:center}
.sw-c em{display:block;width:100%;font-style:normal;font-size:.75rem;font-weight:600;line-height:1.2;padding:8px;border-radius:4px;
  transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--o) * 180ms + 300ms)}
.sw-r{background:transparent;border:1.5px dashed rgba(156,194,224,.7);color:#cfe1ef}
.im-pre .sw-c em{opacity:0;transform:translateY(8px) scale(.96)}
@media(max-width:899px){.im{grid-template-columns:1fr}.sw-h{grid-template-columns:92px repeat(5,minmax(0,1fr))}.sw-c em{font-size:.625rem;padding:6px 4px}}
@media(prefers-reduced-motion:reduce){.im-pre .sw-c em{opacity:1;transform:none}.sw-c em{transition:none}}

/* jauges : couleur selon le niveau (plus de segments = plus lourd) ; titre sur deux lignes */


/* ---------- 10/11 (v4) Développement : « De votre actif à une décision. » — couches qui s'empilent ---------- */
.sk-sec{background:var(--deep);color:#fff;overflow:hidden}
.sk-steps{list-style:none;margin:clamp(20px,3vh,32px) 0 0;padding:0;display:grid}
.sk-s{position:relative;display:grid;gap:4px;padding:14px 0 14px 22px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);transition:color .5s}
.sk-s::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);transition:background .4s,border-color .4s,transform .5s}
.sk-s b{font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:500;letter-spacing:-.02em;color:inherit}
.sk-s span{font-size:.9375rem;line-height:1.45;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s cubic-bezier(.16,1,.3,1),opacity .5s}
.sk-s.on{color:#fff}
.sk-s.on::before{background:#c9a46a;border-color:#c9a46a;transform:scale(1.25)}
.sk-s.cur span{max-height:5em;opacity:.85}
/* la scène en perspective */
.sk-stage{position:relative;height:clamp(420px,66vh,620px);perspective:1800px;display:grid;place-items:center}
.sk-p{position:absolute;inset:0;border-radius:6px;transform-style:preserve-3d;overflow:hidden;
  transform:translateZ(calc(var(--i) * 56px + 520px));opacity:0;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .6s,box-shadow .8s}
.sk-p.on{transform:translateZ(calc(var(--i) * 56px));opacity:1}
.sk-p b{position:absolute;left:12px;bottom:10px;font-size:.8125rem;font-weight:600;letter-spacing:.02em;padding:3px 8px;border-radius:3px;background:rgba(11,28,44,.8);color:#fff}
/* bureau animé : la section s'épingle, chaque palier pose une couche */
.sk-live .sk-pin{min-height:100svh;display:flex;align-items:center}
.sk-live .sk-pin>.wrap{width:100%}
.sk-live{padding:0}
/* sans animation (mobile, mouvement réduit) : tout est posé, tout le texte visible */
.sk-sec:not(.sk-live) .sk-p{opacity:1;transform:translateZ(calc(var(--i) * 56px))}
.sk-sec:not(.sk-live) .sk-s{color:#fff}
.sk-sec:not(.sk-live) .sk-s span{max-height:none;opacity:.85}
@media(max-width:899px){.sk-stage{height:340px}}
@media(prefers-reduced-motion:reduce){.sk-p,.sk-s span{transition:none}}

/* ---------- 10/11 (v2) Ingénierie : la semaine se joue ---------- */
.sw-c[data-d]{transition:background .4s}
.sw.play .sw-c.today{background:rgba(156,194,224,.1)}
.sw-h span.today{color:#fff;font-weight:600}
.sw-r{position:relative}
.sw-r::before{content:"";position:absolute;right:100%;top:50%;width:calc(12px + 6px);height:1.5px;background:#9cc2e0;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s .15s}
.im-pre .sw-c em{opacity:0;transform:translateY(8px) scale(.96)}
.sw.play .sw-c em{transition-delay:0s}
.sw.play .sw-c em.on{opacity:1;transform:none}
.sw.play .sw-r.on::before{transform:scaleX(1)}


/* ---------- 10/11 (v5) Ingénierie : « Pourquoi nous confier votre chantier. » ---------- */
.df-sec{background:var(--paper)}
.df-r{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(22px,3.4vh,34px) 0;border-top:1px solid rgba(22,53,78,.16)}
.df-r:last-child{border-bottom:1px solid rgba(22,53,78,.16)}
/* animation : le constat se barre, la réponse glisse */
@media(max-width:899px){.df-r{grid-template-columns:1fr}.df-r{gap:12px}}

/* la semaine type devient la preuve du premier point */
.im-sec{padding-top:clamp(56px,8vh,96px)}

/* ---------- 10/11 (v5) Développement : lisibilité de la pile ---------- */
.sk-p{transform:translateZ(calc(var(--i) * 84px + 560px))}
.sk-p.on{transform:translateZ(calc(var(--i) * 84px))}
.sk-sec:not(.sk-live) .sk-p{transform:translateZ(calc(var(--i) * 84px))}
.sk-p b{display:none}
.sk-live .sk-p.on:not(.cur){opacity:.42}
.sk-live .sk-p.on.cur{opacity:1}
.sk-live[data-s="4"] .sk-p.on{opacity:.9}
.sk-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:14px;justify-content:center;text-align:center;pointer-events:none}
.sk-cap span{font-size:clamp(2.4rem,3.6vw,3.4rem);font-weight:500;line-height:1;color:#c9a46a;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sk-cap b{font-size:clamp(1.3rem,1.9vw,1.75rem);font-weight:500;letter-spacing:-.025em;color:#fff}
.sk-sec:not(.sk-live) .sk-cap{display:none}
.sk-stage{height:clamp(460px,72vh,680px)}


/* ---------- 10/11 (v6) finitions ---------- */
/* Ingénierie : sans rature — point terre cuite, trait qui relie le constat à la réponse */

/* Développement : numéros, fil de progression, couche en cours soulevée, repères, points d'avancement */
.sk-steps{position:relative}
.sk-s{padding-left:44px}
.sk-s::before{display:none}
.sk-no{position:absolute;left:0;top:13px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);
  font-style:normal;font-size:.875rem;font-weight:600;color:rgba(255,255,255,.6);transition:background .4s,border-color .4s,color .4s}
.sk-s.on .sk-no{border-color:#c9a46a;color:#c9a46a}
.sk-s.cur .sk-no{background:#c9a46a;color:#1c1913}
.sk-live .sk-steps::before{content:"";position:absolute;left:13.5px;top:var(--s0,27px);bottom:24px;width:1.5px;background:rgba(255,255,255,.12)}
.sk-live .sk-steps::after{content:"";position:absolute;left:13.5px;top:var(--s0,27px);width:1.5px;height:calc((100% - 44px) * var(--sp,0));background:#c9a46a;transition:height .6s cubic-bezier(.16,1,.3,1)}
.sk-s{position:relative;z-index:1}
.sk-live .sk-p.on.cur{transform:translateZ(calc(var(--i) * 84px + 26px));box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.sk-p em{position:absolute;font-style:normal;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:#cfe1ef;white-space:nowrap}
.sk-dots{display:flex;gap:6px;justify-content:center;margin-top:14px}
.sk-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .4s,transform .4s}
.sk-dots i.on{background:#c9a46a}
.sk-dots i.cur{transform:scale(1.4)}
.sk-cap{flex-wrap:wrap;bottom:-6px}
.sk-cap .sk-dots{flex-basis:100%}

/* v6b : fil mesuré d'une pastille à l'autre (JS), pastilles opaques, bouton sans place réservée, barres allégées */
.sk-no{background:var(--deep)}
.sk-live .sk-steps::before{bottom:auto;height:var(--sl,0px)}
.sk-live .sk-steps::after{height:var(--sg,0px)}


/* ---------- 10/11 (v7) Développement : une image, quatre lectures (sticky graphic) ---------- */
.ia-sec{background:var(--deep);color:#fff;overflow:hidden}
.ia-rail{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.ia-rail li{position:relative;font-size:1rem;font-weight:500;color:rgba(255,255,255,.4);padding-bottom:8px;transition:color .4s}
.ia-rail li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#c9a46a;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.ia-rail li.on{color:rgba(255,255,255,.75)}
.ia-rail li.cur{color:#fff}
.ia-rail li.cur::after{transform:scaleX(1)}
.ia-fig{margin:0}
.ia-img{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#0b1c2c;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s,filter .8s}
.ia-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ia-img::after{content:"";position:absolute;inset:0;background:rgba(11,28,44,.38);pointer-events:none}
.ia-l{position:absolute;z-index:2;transform:translate(-50%,-100%);margin-top:-8px;padding:4px 9px;border-radius:3px;background:rgba(11,28,44,.88);color:#fff;font-size:.8125rem;font-weight:500;white-space:nowrap}
.ia-chif{position:absolute;z-index:3;right:3%;bottom:5%;list-style:none;margin:0;padding:12px 14px;border-radius:6px;background:rgba(11,28,44,.92);border:1px solid rgba(201,164,106,.5);display:grid;gap:7px;font-size:.8125rem}
.ia-chif li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.ia-chif b{font-weight:600;color:#fff}
.ia-chif span{display:flex;gap:5px}
.ia-chif i{font-style:normal;padding:2px 7px;border-radius:3px;background:rgba(201,164,106,.18);color:#f0dfbd}

/* bureau animé : épinglé, une étape par palier ; les couches passées restent, atténuées */
.ia-live .ia-pin{min-height:100svh;display:flex;align-items:center}
.ia-live .ia-pin>.wrap{width:100%}
.ia-live{padding:0}
.ia-live .ia-t{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.ia-live .ia-t.on{opacity:1;transform:none;transition-delay:.15s;pointer-events:auto}
.ia-live .ia-g path{stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1),opacity .6s,fill-opacity .8s}
.ia-live .ia-g.on path{stroke-dashoffset:0}
.ia-live .ia-g.past{opacity:.32;transition:opacity .6s}
.ia-live .ia-l,.ia-live .ia-chif{opacity:0;transition:opacity .5s .7s}
.ia-live .ia-l.on,.ia-live .ia-chif.on{opacity:1}
.ia-live .ia-l.past{opacity:.35;transition-delay:0s}
.ia-live[data-s="4"] .ia-img{transform:scale(.94);opacity:.5;filter:saturate(.6)}
@media(max-width:899px){.ia-fig{order:-1}
  .ia-l{font-size:.6875rem;padding:3px 6px}
  .ia-chif{position:static;margin-top:10px}
  .ia-img{overflow:visible}
}
@media(prefers-reduced-motion:reduce){.ia-t,.ia-g path,.ia-l,.ia-img{transition:none!important}}


/* ---------- 10/11 (v8) Ingénierie : le registre — question · règle · preuve ---------- */
.rg-sec{background:var(--paper)}
.rg-r{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(20px,3vw,56px)}
.rg-r{position:relative;align-items:center;padding:clamp(26px,4vh,40px) 0}
.rg-r::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(22,53,78,.18);transform-origin:0 50%}
.rg-r:last-child{border-bottom:1px solid rgba(22,53,78,.18)}
/* 1. trois chantiers */
/* 2. compte rendu */
/* 3. l'application */
/* 4. faits */
/* 5. reprise */
/* mouvement : le trait se trace, la règle monte, la preuve glisse (une fois) */
.rg-pre .rg-r::before{transform:scaleX(0);transition:transform 1s cubic-bezier(.65,0,.35,1)}
.rg-pre .rg-r.in::before{transform:scaleX(1)}
@keyframes rgIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@media(max-width:899px){.rg-r{grid-template-columns:1fr}.rg-r{gap:12px}}
@media(prefers-reduced-motion:reduce){.rg-r::before{transition:none!important}}

/* v7b : image « immeuble de bureaux » (choix d'Alain) — repère vertical des niveaux, panneau du chiffrage à gauche */
.ia-chif{right:auto;left:3%}
/* v7c : étiquettes des étapes passées masquées (seuls les tracés restent, atténués) */
.ia-live .ia-l.past{opacity:0}

/* v7d : Budget · Calendrier · Montage au premier plan (l'encart est retiré, demande d'Alain) */
.ia-big{position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;padding:0 4%;
  background:linear-gradient(90deg,rgba(11,28,44,.86),rgba(11,28,44,.7));pointer-events:none}
.ia-big p{margin:0;display:grid;gap:10px;justify-items:center;text-align:center;padding:0 6%}
.ia-big p+p{border-left:1px solid rgba(201,164,106,.45)}
.ia-big b{font-size:clamp(2rem,4.2vw,4.4rem);font-weight:500;letter-spacing:-.045em;line-height:1;color:#fff}
.ia-big span{font-size:clamp(.875rem,1.1vw,1.0625rem);color:#e9d6b2;max-width:18ch}
.ia-live .ia-big{opacity:0;transition:opacity .6s}
.ia-live .ia-big b,.ia-live .ia-big span{opacity:0;transform:translateY(22px)}
.ia-live .ia-big.on{opacity:1}
.ia-live .ia-big.on b,.ia-live .ia-big.on span{opacity:1;transform:none;transition:opacity .7s,transform 1s cubic-bezier(.16,1,.3,1)}
.ia-live .ia-big.on p:nth-child(1) b{transition-delay:.25s}.ia-live .ia-big.on p:nth-child(1) span{transition-delay:.4s}
.ia-live .ia-big.on p:nth-child(2) b{transition-delay:.45s}.ia-live .ia-big.on p:nth-child(2) span{transition-delay:.6s}
.ia-live .ia-big.on p:nth-child(3) b{transition-delay:.65s}.ia-live .ia-big.on p:nth-child(3) span{transition-delay:.8s}
.ia-live[data-s="4"] .ia-big{opacity:0}
.ia-sec:not(.ia-live) .ia-big{position:static;background:none;padding:18px 0 0;grid-template-columns:repeat(3,minmax(0,1fr))}
.ia-sec:not(.ia-live) .ia-img{overflow:visible;aspect-ratio:auto}
.ia-sec:not(.ia-live) .ia-img>img{position:relative}
.ia-sec:not(.ia-live) .ia-img>img{aspect-ratio:16/9;display:block;height:auto}
.ia-sec:not(.ia-live) .ia-img::after{inset:0 0 auto 0;aspect-ratio:16/9;height:auto}
@media(max-width:899px){.ia-big b{font-size:1.5rem}.ia-big span{font-size:.8125rem}}
.ia-big b{font-size:clamp(1.8rem,3.1vw,3.3rem)}
.ia-big p{padding:0 4%}

/* v8 : méthode Développement en PLEIN ÉCRAN (« plus cinématique, full screen », Alain) — bureau animé seulement.
   L'image couvre l'écran comme object-fit:cover (scène 16:9 centrée) : annotations et étiquettes restent calées sur l'image. */
.ia-live .ia-pin{position:relative;height:100svh;min-height:0;display:block;overflow:hidden;background:#0b1c2c}
.ia-live .ia-pin>.wrap{position:static;height:100%;display:block}
.ia-live .ia-fig{position:absolute;inset:0;z-index:0;margin:0}
.ia-live .ia-img{position:absolute;left:50%;top:50%;width:max(100vw,calc(100svh * 16 / 9));height:auto;aspect-ratio:16/9;border-radius:0;
  transform:translate(-50%,-50%) scale(var(--z,1));transition:opacity .8s,filter .8s}
.ia-live .ia-img::after{background:rgba(11,28,44,.18)}
.ia-live .ia-fig::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,28,44,.92) 0%,rgba(11,28,44,.55) 30%,rgba(11,28,44,0) 55%),linear-gradient(180deg,rgba(11,28,44,.8) 0%,rgba(11,28,44,0) 26%)}
.ia-live .ia-l{font-size:.9375rem;padding:5px 11px}
.ia-live .ia-big{padding-left:38%;background:linear-gradient(90deg,rgba(11,28,44,0) 30%,rgba(11,28,44,.78) 45%)}
.ia-live .ia-big b{font-size:clamp(2.2rem,3.6vw,4rem)}
.ia-live[data-s="4"] .ia-img{transform:translate(-50%,-50%) scale(var(--z,1));opacity:.35;filter:saturate(.5)}

/* v8b : dégradé haut plus long (rail lisible sur les fenêtres claires) */
.ia-live .ia-fig::after{background:linear-gradient(90deg,rgba(11,28,44,.92) 0%,rgba(11,28,44,.55) 30%,rgba(11,28,44,0) 55%),linear-gradient(180deg,rgba(11,28,44,.85) 0%,rgba(11,28,44,.5) 22%,rgba(11,28,44,0) 38%)}
.ia-live .ia-rail li{text-shadow:0 1px 10px rgba(11,28,44,.8)}

/* v9 : plein écran abandonné (« trop grand, illisible », Alain). Recherche : côte à côte = format de référence (The Pudding /
   Scrollama) ; le texte en surimpression nuit à la lecture. → Grand panneau image sur toute la hauteur, jusqu'au bord droit,
   recadré sur l'immeuble (cover ancré à droite, container queries) ; colonne de texte propre à gauche ; aucun texte sur l'image. */
.ia-live .ia-pin{position:relative;height:100svh;min-height:0;display:block;overflow:hidden;background:var(--deep)}
.ia-live .ia-pin>.wrap{position:relative;height:100%;display:block}
.ia-live .ia-fig{position:absolute;z-index:0;margin:0;top:clamp(84px,11vh,112px);bottom:clamp(24px,4vh,44px);right:calc((100vw - 100%) / -2);
  left:calc(min(30%, 420px) + clamp(32px,4vw,64px));overflow:hidden;border-radius:8px 0 0 8px;container-type:size}
.ia-live .ia-fig::after{content:none}
.ia-live .ia-img{position:absolute;right:0;top:50%;left:auto;width:max(100cqw,calc(100cqh * 16 / 9));height:auto;aspect-ratio:16/9;border-radius:0;
  transform:translateY(-50%) scale(var(--z,1));transform-origin:100% 50%;transition:opacity .8s,filter .8s}
.ia-live[data-s="4"] .ia-img{transform:translateY(-50%) scale(var(--z,1));opacity:.35;filter:saturate(.5)}
.ia-live .ia-img::after{background:rgba(11,28,44,.22)}
.ia-live .ia-rail{display:grid;gap:2px;margin-top:clamp(18px,3vh,30px)}
.ia-live .ia-rail li{padding:6px 0 6px 16px;font-size:1rem;text-shadow:none}
.ia-live .ia-rail li::after{left:0;right:auto;top:50%;bottom:auto;width:8px;height:2px;transform:scaleX(0) translateY(-50%)}
.ia-live .ia-rail li.cur::after{transform:scaleX(1) translateY(-50%)}
.ia-live .ia-l{font-size:.9375rem;padding:5px 11px}
.ia-live .ia-big{padding-left:4%;background:rgba(11,28,44,.8)}
.ia-live .ia-big b{font-size:clamp(1.9rem,3vw,3.2rem)}
/* v9b : bandeau Budget·Calendrier·Montage calé sur la partie VISIBLE du panneau (unités de conteneur) */
.ia-live .ia-big{inset:0 0 0 auto;width:100cqw;padding:0 3%}

/* ================= v10 : l'image comme un DESSIN D'ARCHITECTE (Alain : « les encarts, c'est pas très joli ») =================
   Photo en bichromie, traits blancs fins, repères en cercle, texte posé sur la queue des lignes de rappel (aucun pavé),
   usages en hachures de plan ; le trait se dessine puis le texte se dévoile derrière un masque. */
.ia-img img{filter:grayscale(.55) contrast(1.08) brightness(.78)}
.ia-img::after{background:linear-gradient(180deg,rgba(11,28,44,.35),rgba(11,28,44,.15) 40%,rgba(11,28,44,.4))!important}
/* étiquettes : plus de fond, le texte se pose sur le trait */
.ia-l{background:none!important;border:0;padding:0 0 7px 2px!important;margin:0!important;transform:translate(0,-100%)!important;
  font-size:clamp(.8125rem,1vw,.9375rem)!important;font-weight:500;letter-spacing:.01em;color:#fff;text-shadow:0 1px 10px rgba(11,28,44,.85),0 0 2px rgba(11,28,44,.6)}
.ia-l>span{display:inline-block}
/* mouvement : le texte se dévoile derrière un masque après le trait */
.ia-live .ia-l{opacity:1!important;transition:none}
.ia-live .ia-l>span{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.65,0,.35,1) .75s}
.ia-live .ia-l.on>span{clip-path:inset(0 0 0 0)}
.ia-live .ia-l.past>span{clip-path:inset(0 100% 0 0);transition-delay:0s;transition-duration:.4s}
/* v10b : une couche non encore atteinte est invisible (flèches de cote comprises) */
.ia-live .ia-g:not(.on){opacity:0}
.ia-live .ia-g.on{opacity:1;transition:opacity .3s}
.ia-live .ia-g.past{opacity:.3}

/* ================= v11 : BLUEPRINT (Alain : « essaye en blueprint ») =================
   Photo virée au bleu de tirage (niveaux de gris × bleu en multiplication), quadrillage fin + quadrillage majeur,
   tout le trait en blanc, lettrage technique en petites capitales, usages en hachures blanches, cartouche de planche.
   Comparaison : ?plan=photo affiche l'ancienne version. */
.ia-bp .ia-img{background:#0c3a76}
.ia-bp .ia-img img{filter:grayscale(1) contrast(1.35) brightness(1.08)!important}
.ia-bp .ia-img::after{background:linear-gradient(180deg,#0f4a94,#0b3a78)!important;mix-blend-mode:multiply;opacity:.95}
.ia-bp .ia-l{text-transform:uppercase;letter-spacing:.12em;font-size:clamp(.6875rem,.85vw,.8125rem)!important;font-weight:600;text-shadow:none}
.ia-bp .ia-big{background:rgba(12,58,118,.86)!important}
.ia-bp .ia-big b{text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.5rem,2.4vw,2.6rem)!important}
.ia-bp .ia-big span{color:#d6e6fb;text-transform:none}
.ia-bp .ia-big p+p{border-left-color:rgba(255,255,255,.5)}
/* cartouche de planche */
.ia-cart{display:none}
.ia-bp .ia-cart{display:grid;position:absolute;z-index:6;right:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,24px);grid-template-columns:auto auto;
  border:1.4px solid #fff;background:#0c3a76;color:#fff;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ia-cart span{padding:7px 10px;border-right:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7)}
.ia-cart span:nth-child(2n){border-right:0}
.ia-cart span:nth-last-child(-n+2){border-bottom:0}
.ia-cart b{font-weight:700}
.ia-sec:not(.ia-live) .ia-fig{position:relative}


/* =====================================================================
   PAGE DÉVELOPPEMENT — refonte complète (10/11/2026, après 40 références)
   ===================================================================== */
/* ---------- 1. Ouverture ---------- */
@keyframes dvDraw{to{stroke-dashoffset:0}}
@keyframes dvUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes dvFig{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}

/* ---------- 2. Ce que vous possédez ---------- */
.as-sec{background:var(--paper)}
.as{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4vw,80px);align-items:start}
.as-r{position:relative;border-top:1px solid rgba(22,53,78,.16)}
.as-r::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:#c9a46a;transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.as-r.on::before{transform:scaleX(1)}
.as-b{display:grid;gap:8px;width:100%;text-align:left;background:none;border:0;padding:clamp(20px,3.6vh,34px) 0;font:inherit;cursor:pointer;color:inherit}
.as-b:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.as-i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s,transform 1.4s cubic-bezier(.16,1,.3,1)}
.as-i.on{opacity:1;transform:none}
.as-trace{position:absolute;inset:12%;border:1.5px dashed rgba(255,255,255,.9);border-radius:2px;pointer-events:none;clip-path:inset(0 100% 100% 0)}
.as-trace.go{animation:asTrace 1.1s cubic-bezier(.65,0,.35,1) forwards}
@keyframes asTrace{0%{clip-path:inset(0 100% 100% 0)}50%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0)}}
@media(max-width:899px){.as{grid-template-columns:1fr}}

/* ---------- 4. Ce que vous recevez ---------- */
.lv-sec{background:var(--deep);color:#fff}
.lv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,80px);align-items:center}
.lv-l .sh-k{color:#d9bd8e}
.lv-l h2{color:#fff;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.04em;margin:6px 0 0}
.lv-i{margin:16px 0 0;color:#dfe5eb;font-size:1.0625rem;line-height:1.55;max-width:44ch}
.lv-p{list-style:none;margin:clamp(22px,3.4vh,34px) 0 0;padding:0;counter-reset:lv}
.lv-p li{display:grid;gap:3px;padding:12px 0 12px 34px;border-top:1px solid rgba(255,255,255,.14);position:relative}
.lv-p li::before{counter-increment:lv;content:counter(lv);position:absolute;left:0;top:13px;width:22px;height:22px;border-radius:50%;border:1.4px solid #c9a46a;color:#e9d6b2;font-size:.75rem;font-weight:600;display:grid;place-items:center}
.lv-p b{font-weight:500;font-size:1.0625rem}.lv-p span{font-size:.9375rem;color:rgba(255,255,255,.7)}
.lv-stage{position:relative;height:clamp(380px,56vh,520px);perspective:1400px}
.lv-stack{position:absolute;left:50%;top:50%;width:0;height:0}
.lv-f{position:absolute;left:calc(clamp(220px,19vw,280px) / -2);top:calc(clamp(290px,25vw,370px) / -2);width:clamp(220px,19vw,280px);aspect-ratio:21/29.7;padding:18px 18px 14px;border-radius:3px;
  background:#f5f2ea;color:#16354e;box-shadow:0 20px 50px -20px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:9px;
  transform:translate(calc(var(--i) * 3px),calc(var(--i) * -3px)) rotate(calc(var(--i) * 1.2deg - 2.4deg));transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 70ms)}
.lv-fh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-bottom:8px;border-bottom:1.5px solid #16354e}
.lv-fh b{font-size:.9375rem;font-weight:600;line-height:1.2}.lv-fh em{font-style:normal;font-size:.6875rem;color:#5d6874}
.lv-f i{display:block;height:7px;border-radius:2px;background:rgba(22,53,78,.12)}
.lv-f i.s{width:62%}
.lv-ff{margin-top:auto;font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:#5d6874}
.lv-in .lv-f:nth-child(1){transform:translate(-260px,30px) rotate(-12deg)}
.lv-in .lv-f:nth-child(2){transform:translate(-130px,6px) rotate(-6deg)}
.lv-in .lv-f:nth-child(3){transform:translate(0,-6px) rotate(0)}
.lv-in .lv-f:nth-child(4){transform:translate(130px,6px) rotate(6deg)}
.lv-in .lv-f:nth-child(5){transform:translate(260px,30px) rotate(12deg)}
.lv-f:nth-child(5){background:#fff;box-shadow:0 0 0 2px #c9a46a,0 24px 60px -20px rgba(0,0,0,.7)}
.lv-non{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:18px 48px;padding:clamp(24px,3.6vh,36px) 0 0;border-top:1px solid rgba(201,164,106,.5)}
.lv-non h3{margin:0;font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:500;letter-spacing:-.035em;line-height:1.05;color:#fff}
.lv-non p{margin:0;font-size:1.125rem;line-height:1.6;color:#dfe5eb;max-width:60ch}
@media(max-width:899px){.lv,.lv-non{grid-template-columns:1fr}.lv-stage{height:360px}
  .lv-in .lv-f:nth-child(1){transform:translate(-120px,20px) rotate(-10deg)}.lv-in .lv-f:nth-child(2){transform:translate(-60px,6px) rotate(-5deg)}
  .lv-in .lv-f:nth-child(4){transform:translate(60px,6px) rotate(5deg)}.lv-in .lv-f:nth-child(5){transform:translate(120px,20px) rotate(10deg)}}
@media(prefers-reduced-motion:reduce){.lv-f{transition:none}}

/* ---------- 5. Comment on avance ---------- */
.gt-sec{background:#fff}
.gt-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,6vh,64px)}
.gt-head h2{color:var(--navy);font-size:clamp(2.2rem,4.2vw,4rem);line-height:1;letter-spacing:-.04em;max-width:15ch}
.gt-head .sh-d{color:var(--ink);max-width:46ch}
.gt-l{position:relative;list-style:none;margin:0;padding:0 0 0 clamp(48px,6vw,88px)}
.gt-line{position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:rgba(22,53,78,.12)}
.gt-line i{display:block;width:100%;height:100%;background:#c9a46a;transform-origin:50% 0;transform:scaleY(var(--gp,1))}
.gt-r{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:16px 48px;padding:clamp(26px,4.4vh,44px) 0;border-top:1px solid rgba(22,53,78,.12)}
.gt-r:first-child{border-top:0;padding-top:0}
.gt-node{position:absolute;left:calc(clamp(48px,6vw,88px) * -1 + 8px);top:clamp(30px,4.8vh,48px);width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid rgba(22,53,78,.3);transition:background .4s,border-color .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.gt-r:first-child .gt-node{top:4px}
.gt-r.on .gt-node{background:#c9a46a;border-color:#c9a46a;transform:scale(1.15)}
.gt-t{margin:0;font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:500;letter-spacing:-.035em;line-height:1.05;color:var(--navy)}
.gt-d{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 32px}
.gt-d dt{font-size:.8125rem;font-weight:600;color:#5d6874;margin-bottom:6px}
.gt-d dd{margin:0;font-size:1rem;line-height:1.5;color:var(--ink)}
.gt-dec dd{font-weight:600;color:var(--navy);font-size:1.0625rem}
.gt-dec a{color:var(--navy);display:inline-flex;align-items:center;gap:8px}
@media(max-width:899px){.gt-head,.gt-r,.gt-d{grid-template-columns:1fr}}

/* ---------- 6. Opérations ---------- */
.op-sec{background:var(--stone)}
.op-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(24px,4vh,40px)}
.op-head h2{color:var(--navy);font-size:clamp(2rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.04em}
.op-l{list-style:none;margin:0;padding:0;border-bottom:1px solid rgba(22,53,78,.18)}
.op-r a{display:grid;grid-template-columns:clamp(110px,12vw,180px) minmax(0,4fr) minmax(0,4fr) auto 48px;gap:24px;align-items:center;padding:16px 0;border-top:1px solid rgba(22,53,78,.18);color:var(--navy);text-decoration:none}
.op-i{display:block;aspect-ratio:4/3;border-radius:4px;overflow:hidden}
.op-i img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.op-n{font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.op-s{font-size:1rem;color:var(--ink)}
.op-st{font-size:.8125rem;font-weight:600;padding:5px 10px;border:1.5px solid rgba(22,53,78,.3);border-radius:3px}
.op-go{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid rgba(22,53,78,.3);border-radius:50%;transition:background .35s,color .35s,transform .5s cubic-bezier(.16,1,.3,1)}
.op-r a:hover .op-i img{transform:scale(1.06)}
.op-r a:hover .op-go{background:var(--navy);color:#fff;transform:rotate(-45deg)}
@media(max-width:899px){.op-r a{grid-template-columns:96px minmax(0,1fr);gap:6px 16px}.op-s,.op-st{grid-column:2}.op-go{display:none}.op-st{justify-self:start}}
/* éventail resserré (la 5e feuille touchait le bord) */
@media(min-width:900px){.lv-in .lv-f:nth-child(1){transform:translate(-210px,26px) rotate(-10deg)}.lv-in .lv-f:nth-child(2){transform:translate(-105px,6px) rotate(-5deg)}.lv-in .lv-f:nth-child(4){transform:translate(105px,6px) rotate(5deg)}.lv-in .lv-f:nth-child(5){transform:translate(210px,26px) rotate(10deg)}}
@media(max-width:899px){.ia-sec:not(.ia-live) .ia-l:not(.ia-z){display:none}}

/* 10/11 : aucun quadrillage (« je déteste », Alain) */


/* =====================================================================
   PAGE DÉVELOPPEMENT — PLANCHE INFINIE, palette M4 « sable et brume » (10/11/2026)
   Développement = sable #E9D8C2 ; encre = marine de la marque ; aucun quadrillage.
   ===================================================================== */
.pf-sec{--sb:#E9D8C2;--ink:#0F2438;--kick:#664610;--soft:#1E3A52;background:var(--sb);color:var(--ink)}
.pf-pin{position:relative}
.pf{display:flex;flex-direction:column}
.pf-z{position:relative;padding:clamp(64px,10vh,110px) var(--gut,clamp(20px,3.5vw,50px));border-bottom:1px dashed rgba(15,36,56,.35)}
.pf-k{margin:0 0 14px;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--kick)}
.pf-z h2{margin:0;font-size:clamp(2.6rem,6.4vw,6.8rem);font-weight:500;letter-spacing:-.055em;line-height:.9;max-width:10ch;color:var(--ink)}
.pf-cote,.pf-ticks{display:none}
/* bureau : la planche s'épingle et se déroule à l'horizontale */
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .pf-live .pf-pin{height:100svh;overflow:hidden}
  .pf-live .pf{position:absolute;inset:0 auto 0 0;height:100%;flex-direction:row;align-items:stretch}
  .pf-live .pf-z{flex:0 0 auto;height:100%;display:flex;flex-direction:column;justify-content:center;border-bottom:0;border-right:1px dashed rgba(15,36,56,.35);
    padding:clamp(100px,14vh,140px) clamp(40px,5vw,90px) clamp(110px,16vh,150px)}
  .pf-live .pf-cote{display:block;position:absolute;left:0;bottom:clamp(54px,8vh,80px);height:2px;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}
  .pf-live .pf-ticks{display:block;position:absolute;left:0;right:0;bottom:clamp(44px,7vh,70px);height:22px;pointer-events:none}
  .pf-ticks i{position:absolute;bottom:0;width:1.5px;height:22px;background:var(--ink)}
  .pf-ticks em{position:absolute;bottom:28px;transform:translateX(-50%);font-style:normal;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
}

/* ouverture : l'immeuble en calque sable, trait marine (plus de bleu de tirage, plus de quadrillage) */


/* =====================================================================
   PAGE DÉVELOPPEMENT — v2 : héros « couverture d'étude » + reste de la page au langage de la planche (M4 sable + marine)
   papier sable clair #F6EFE3 · sable #E9D8C2 · encre marine #0F2438 · laiton foncé #664610 ; filets pointillés, petites capitales
   ===================================================================== */

/* ---------- le reste de la page Développement au langage de la planche ---------- */
.pp[data-p="dev"] .sh-k{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#664610}
.pp[data-p="dev"] .lv-sec .sh-k{color:#E6C48F}
/* Ce que vous recevez : marine plein (marque), pièces en calque sable */
.pp[data-p="dev"] .lv-f{background:#F3EADB;border:1px solid rgba(15,36,56,.5);box-shadow:0 22px 50px -24px rgba(0,0,0,.7)}
.pp[data-p="dev"] .lv-f:nth-child(5){background:#F6EFE3;box-shadow:0 0 0 2px #E9D8C2,0 24px 60px -20px rgba(0,0,0,.75)}
.pp[data-p="dev"] .lv-fh{border-bottom:1.5px solid #0F2438}
.pp[data-p="dev"] .lv-fh b{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}
.pp[data-p="dev"] .lv-f i{background:rgba(15,36,56,.14)}
.pp[data-p="dev"] .lv-p li{border-top:1px dashed rgba(255,255,255,.28)}
.pp[data-p="dev"] .lv-p li::before{border-color:#E9D8C2;color:#E9D8C2}
.pp[data-p="dev"] .lv-non{border-top:1px dashed rgba(233,216,194,.6)}
/* Comment on avance : papier sable, fil = cote marine à graduations */
.pp[data-p="dev"] .gt-sec{background:#F6EFE3}
.pp[data-p="dev"] .gt-line{background:rgba(15,36,56,.15);width:1.5px}
.pp[data-p="dev"] .gt-line i{background:#0F2438}
.pp[data-p="dev"] .gt-node{background:#F6EFE3;border:1.5px solid #0F2438;border-radius:50%}
.pp[data-p="dev"] .gt-r.on .gt-node{background:#0F2438;border-color:#0F2438}
.pp[data-p="dev"] .gt-r{border-top:1px dashed rgba(15,36,56,.3)}
.pp[data-p="dev"] .gt-d dt{text-transform:uppercase;letter-spacing:.14em;font-size:.6875rem;color:#664610}
.pp[data-p="dev"] .gt-dec dd{color:#0F2438}
/* Opérations : sable, photos en calque qui reprennent leurs couleurs au survol */
.pp[data-p="dev"] .op-sec{background:#E9D8C2}
.pp[data-p="dev"] .op-l{border-bottom:1px dashed rgba(15,36,56,.4)}
.pp[data-p="dev"] .op-r a{border-top:1px dashed rgba(15,36,56,.4)}
.pp[data-p="dev"] .op-i{border:1px solid #0F2438;border-radius:0}
.pp[data-p="dev"] .op-i img{filter:grayscale(1) contrast(.85) brightness(1.15) sepia(.25);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .8s}
.pp[data-p="dev"] .op-r a:hover .op-i img{filter:none}
.pp[data-p="dev"] .op-st{border-radius:0;border-color:#0F2438;text-transform:uppercase;letter-spacing:.12em;font-size:.6875rem}
/* Questions et guides : papier, filets pointillés */
.pp[data-p="dev"] .qg-sec{background:#FBF7F0}
.pp[data-p="dev"] .pq{border-top:1px dashed rgba(15,36,56,.35)}
.pp[data-p="dev"] .pq:last-child{border-bottom:1px dashed rgba(15,36,56,.35)}
.pp[data-p="dev"] .pg{border-top:2px solid #0F2438}
.pp[data-p="dev"] .pg-l a{border-bottom:1px dashed rgba(15,36,56,.3)}
.pp[data-p="dev"] .lv-fh b{white-space:normal;font-size:.6875rem;letter-spacing:.06em;line-height:1.25}


/* =====================================================================
   SYSTÈME D'IDENTITÉ DES PARCOURS (10/11/2026) — même gabarit, une couleur par parcours (palette M4)
   ===================================================================== */
[data-p="dev"]:is(.pf-sec,.pp){--pa:#F6EFE3;--sb:#E9D8C2;--kick:#664610;--kick2:#E6C48F}
[data-p="ing"]:is(.pf-sec,.pp){--pa:#EEF3F9;--sb:#CADDF2;--kick:#285077;--kick2:#9CC2E0}
[data-p="val"]:is(.pf-sec,.pp){--pa:#F9EDEB;--sb:#F1D2CF;--kick:#733A36;--kick2:#EDB2A6}
.pf-sec{background:var(--sb)}
.pf-k{color:var(--kick)}
/* les règles écrites pour Développement valent pour les trois parcours */
.pp[data-p] .sh-k{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--kick)}
.pp[data-p] .lv-sec .sh-k{color:var(--kick2)}
.pp[data-p] .lv-f{background:var(--pa);border:1px solid rgba(15,36,56,.5);box-shadow:0 22px 50px -24px rgba(0,0,0,.7)}
.pp[data-p] .lv-f:nth-child(5){background:#fff;box-shadow:0 0 0 2px var(--sb),0 24px 60px -20px rgba(0,0,0,.75)}
.pp[data-p] .lv-fh{border-bottom:1.5px solid #0F2438}
.pp[data-p] .lv-fh b{white-space:normal;text-transform:uppercase;letter-spacing:.06em;font-size:.6875rem;line-height:1.25}
.pp[data-p] .lv-f i{background:rgba(15,36,56,.14)}
.pp[data-p] .lv-p li{border-top:1px dashed rgba(255,255,255,.28)}
.pp[data-p] .lv-p li::before{border-color:var(--sb);color:var(--sb)}
.pp[data-p] .lv-non{border-top:1px dashed color-mix(in srgb,var(--sb) 60%,transparent)}
.pp[data-p] .gt-sec{background:var(--pa)}
.pp[data-p] .gt-line{background:rgba(15,36,56,.15);width:1.5px}
.pp[data-p] .gt-line i{background:#0F2438}
.pp[data-p] .gt-node{background:var(--pa);border:1.5px solid #0F2438;border-radius:50%}
.pp[data-p] .gt-r.on .gt-node{background:#0F2438;border-color:#0F2438}
.pp[data-p] .gt-r{border-top:1px dashed rgba(15,36,56,.3)}
.pp[data-p] .gt-r:first-child{border-top:0}
.pp[data-p] .gt-d dt{text-transform:uppercase;letter-spacing:.14em;font-size:.6875rem;color:var(--kick)}
.pp[data-p] .gt-dec dd{color:#0F2438}
.pp[data-p] .op-sec{background:var(--sb)}
.pp[data-p] .op-l{border-bottom:1px dashed rgba(15,36,56,.4)}
.pp[data-p] .op-r a{border-top:1px dashed rgba(15,36,56,.4)}
.pp[data-p] .op-i{border:1px solid #0F2438;border-radius:0}
.pp[data-p] .op-i img{filter:grayscale(1) contrast(.85) brightness(1.15);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .8s}
.pp[data-p] .op-r a:hover .op-i img{filter:none}
.pp[data-p] .op-st{border-radius:0;border-color:#0F2438;text-transform:uppercase;letter-spacing:.12em;font-size:.6875rem}
.pp[data-p] .qg-sec{background:color-mix(in srgb,var(--pa) 45%,#fff)}
.pp[data-p] .pq{border-top:1px dashed rgba(15,36,56,.35)}
.pp[data-p] .pq:last-child{border-bottom:1px dashed rgba(15,36,56,.35)}
.pp[data-p] .pg{border-top:2px solid #0F2438}
.pp[data-p] .pg-l a{border-bottom:1px dashed rgba(15,36,56,.3)}
/* zone « dessin » de la planche : le Gantt d'Ingénierie au trait marine */
.pf-gantt{--n:6;min-width:min(62vw,820px);border-top:1.5px solid #0F2438;border-bottom:1.5px solid #0F2438}
.pg-h,.pg-r{display:grid;grid-template-columns:110px 1fr;align-items:center}
.pg-h{grid-template-columns:110px repeat(6,minmax(0,1fr));font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#0F2438;padding:10px 0;border-bottom:1px dashed rgba(15,36,56,.4)}
.pg-h span+span{padding-left:8px;border-left:1px dashed rgba(15,36,56,.3)}
.pg-r{padding:16px 0;border-bottom:1px dashed rgba(15,36,56,.25)}
.pg-r:last-child{border-bottom:0}
.pg-r b{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;color:#0F2438}
.pg-t{position:relative;height:16px}
.pg-t i{position:absolute;top:0;bottom:0;left:calc(var(--a) / 6 * 100%);width:calc((var(--b) - var(--a)) / 6 * 100%);background:#0F2438}
.pg-t i.x{background:repeating-linear-gradient(-45deg,#0F2438 0 2px,transparent 2px 7px);opacity:.7}
@media(max-width:899px){.pf-gantt{min-width:0}.pg-h,.pg-r{grid-template-columns:70px 1fr}.pg-h{grid-template-columns:70px repeat(6,minmax(0,1fr));font-size:.5rem;letter-spacing:.04em}}


/* =====================================================================
   HÉROS 360 DES PARCOURS (10/11/2026, variante B validée par Alain)
   photo du métier plein cadre · texte sur voile marine · barre du cycle PRIMOE en pied
   ===================================================================== */
.h3{--ink:#0F2438;--g:clamp(20px,3.5vw,50px);--ease:cubic-bezier(.77,0,.18,1);--out:cubic-bezier(.16,1,.3,1);position:relative;height:100svh;min-height:720px;display:grid;grid-template-rows:1fr auto;background:var(--ink);overflow:hidden;color:#fff}
.h3[data-p="dev"]{--sb:#E9D8C2;--kick:#664610}
.h3[data-p="ing"]{--sb:#CADDF2;--kick:#285077}
.h3[data-p="val"]{--sb:#F1D2CF;--kick:#733A36}
.h3-ph{position:relative;min-height:0;overflow:hidden}
.h3-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.h3-ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,36,56,.55) 0,rgba(15,36,56,0) 22%,rgba(15,36,56,0) 62%,rgba(15,36,56,.35) 100%)}
.h3-ph::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,36,56,.86) 0,rgba(15,36,56,.62) 34%,rgba(15,36,56,0) 66%)}
.h3-cap{position:absolute;z-index:2;right:var(--g);bottom:22px;display:flex;align-items:center;gap:12px;font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.h3-cap::before{content:"";width:40px;height:1px;background:currentColor;opacity:.7}
.h3-t{position:absolute;z-index:3;left:var(--g);bottom:calc(var(--cyc,128px) + clamp(40px,7vh,72px));width:min(46vw,700px);display:grid;gap:clamp(18px,2.6vh,28px)}
.h3-k{margin:0;display:flex;align-items:center;gap:14px;font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sb)}
.h3-k b{font-size:.8125rem;letter-spacing:.06em;color:#fff}
.h3-k em{flex:0 0 36px;height:1px;background:var(--sb);opacity:.7}
.h3 h1{margin:0;font-size:clamp(2.7rem,4.6vw,5.4rem);font-weight:500;letter-spacing:-.055em;line-height:.94;color:#fff;text-wrap:balance}
.h3-ch{margin:0;font-size:clamp(1rem,1.05vw,1.0625rem);line-height:1.62;color:rgba(255,255,255,.86);max-width:46ch}
.h3-act{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-top:4px}
.h3-btn{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 26px;border-radius:2px;background:var(--sb);color:var(--ink);font-weight:500;text-decoration:none;white-space:nowrap;transition:background .3s}
.h3-btn:hover{background:#fff}
.h3-lk{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;white-space:nowrap}
.h3 .ico{width:1em;height:1em}
/* la barre du cycle */
.h3-btn:focus-visible,.h3-lk:focus-visible{outline:2px solid var(--sb);outline-offset:3px}
/* entrées réglées (CSS seul : rien ne dépend du JavaScript) */
@media(prefers-reduced-motion:no-preference){
  @keyframes h3Zoom{from{transform:scale(1.09)}to{transform:none}}
  @keyframes h3Up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes h3Prog{from{width:0}}
  @keyframes h3Fade{from{opacity:0}}
  .h3-ph img{animation:h3Zoom 2.6s cubic-bezier(.2,.7,.2,1) both}
  .h3-t>*{animation:h3Up 1s var(--out) both}
  .h3-t>:nth-child(1){animation-delay:.35s}.h3-t>:nth-child(2){animation-delay:.45s}.h3-t>:nth-child(3){animation-delay:.55s}.h3-t>:nth-child(4){animation-delay:.65s}
  .h3-cap{animation:h3Fade 1s 1s both}
}
/* téléphone : photo en tête, texte sur fond marine, cycle empilé */
@media(max-width:899px){
  .h3{height:auto;min-height:0;grid-template-rows:auto auto auto}
  .h3-ph{height:52svh;min-height:300px}
  .h3-ph::after{background:linear-gradient(0deg,rgba(15,36,56,1) 0,rgba(15,36,56,0) 45%)}
  .h3-cap{display:none}
  .h3-t{position:relative;left:auto;bottom:auto;width:auto;padding:4px var(--g) 40px;margin-top:-56px}
  .h3 h1{font-size:clamp(2.3rem,9.4vw,3.4rem)}
}


/* =====================================================================
   PLANCHE HORIZONTALE v2 (10/11/2026) — contraste et rythme
   ouverture (couleur) → photo plein cadre → marine → (dessin) → grands mots → blanc + photo → conclusion marine
   ===================================================================== */
.pf2{--ink:#0F2438;--g:clamp(20px,3.5vw,50px);background:var(--ink)}
.pf2[data-p="dev"]{--sb:#E9D8C2;--pa:#F6EFE3;--kick:#664610}
.pf2[data-p="ing"]{--sb:#CADDF2;--pa:#EEF3F9;--kick:#285077}
.pf2[data-p="val"]{--sb:#F1D2CF;--pa:#F9EDEB;--kick:#733A36}
.pf2 .pf-z{border:0!important;padding:clamp(56px,9vh,96px) var(--g);position:relative;overflow:hidden}
.pf2 .pf-k{margin:0 0 18px;font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--kick)}
.pf2 h2,.pf2 h3{margin:0;font-weight:500;letter-spacing:-.05em;line-height:.96;text-wrap:balance}
.pf2 .z-lead{margin:22px 0 0;font-size:clamp(1rem,1.15vw,1.1875rem);line-height:1.55;max-width:42ch;color:#2A4459}
.pf2 .z-no{position:absolute;font-weight:400;letter-spacing:-.07em;line-height:.8;pointer-events:none}
.pf2 .z-dl{margin:clamp(24px,4vh,40px) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,40px)}
.pf2 .z-dl div{padding-top:14px;border-top:1px solid currentColor}
.pf2 .z-dl dt{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;opacity:.7}
.pf2 .z-dl dd{margin:0;font-size:clamp(1rem,1.15vw,1.1875rem);line-height:1.45;font-weight:500;letter-spacing:-.01em}
.pf2 .z-img{margin:0;position:relative;overflow:hidden}
.pf2 .z-img img{display:block;width:100%;height:100%;object-fit:cover}

/* 1 · ouverture : la couleur du parcours, le titre énorme, le sommaire */
.pf2 .z-ouv{background:var(--sb);color:var(--ink);display:flex;flex-direction:column;justify-content:center}
.pf2 .z-ouv h2{font-size:clamp(3rem,7vw,8.4rem);max-width:11ch;line-height:.9}
.pf2 .z-toc{list-style:none;margin:clamp(28px,5vh,52px) 0 0;padding:0;display:flex;gap:0;border-top:1.5px solid var(--ink)}
.pf2 .z-toc li{flex:1;display:grid;gap:6px;padding:14px 16px 0 0}
.pf2 .z-toc b{font-size:1.75rem;font-weight:400;letter-spacing:-.05em;line-height:1}
.pf2 .z-toc span{font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
/* 2 · photo plein cadre : l'image en grand, une bande marine pour le texte */
.pf2 .z-photo{padding:0;background:var(--ink);color:#fff;display:grid;grid-template-rows:1fr auto}
.pf2 .z-photo .z-img{min-height:52vh}
.pf2 .z-photo .z-no{left:var(--g);top:clamp(28px,5vh,56px);font-size:clamp(7rem,15vw,15rem);color:#fff;mix-blend-mode:overlay;opacity:.9}
.pf2 .z-strip{position:relative;padding:clamp(26px,4vh,40px) var(--g) clamp(30px,5vh,48px);background:var(--ink)}
.pf2 .z-strip .pf-k{color:var(--sb)}
.pf2 .z-strip h3{font-size:clamp(1.9rem,3vw,3.2rem);max-width:22ch}
.pf2 .z-strip .z-dl{margin-top:22px}
/* 3 · panneau marine : le chiffre géant dans la couleur, la question en blanc */
.pf2 .z-dark{background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.pf2 .z-dark .z-no{right:calc(var(--g) * -.4);top:clamp(10px,3vh,40px);font-size:clamp(14rem,30vw,30rem);color:var(--sb);opacity:.95}
.pf2 .z-dark .z-body{position:relative;max-width:44rem}
.pf2 .z-dark .pf-k{color:var(--sb)}
.pf2 .z-dark h3{font-size:clamp(2.4rem,4.4vw,5rem);max-width:14ch}
/* 4 · panneau blanc + photo : respiration */
.pf2 .z-split{background:#fff;color:var(--ink);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0;padding:0}
.pf2 .z-split .z-body{position:relative;padding:clamp(56px,9vh,96px) var(--g);display:flex;flex-direction:column;justify-content:center}
.pf2 .z-split .z-no{position:static;display:block;font-size:clamp(5rem,9vw,9rem);color:var(--sb);margin-bottom:12px;-webkit-text-stroke:1.5px var(--ink)}
.pf2 .z-split h3{font-size:clamp(2.2rem,3.6vw,4.2rem);max-width:14ch}
.pf2 .z-split .z-img{min-height:360px}
/* 5 · grands mots : la couleur, les mots en très grand */
.pf2 .z-mots{background:var(--sb);color:var(--ink);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.pf2 .z-mots h3{font-size:clamp(2.2rem,3.4vw,4rem);max-width:12ch}
.pf2 .z-big p{margin:0;display:flex;align-items:baseline;gap:22px;padding:clamp(10px,1.6vh,18px) 0;border-top:1.5px solid var(--ink)}
.pf2 .z-big p:last-child{border-bottom:1.5px solid var(--ink)}
.pf2 .z-big b{font-size:clamp(3rem,6.4vw,7.4rem);font-weight:500;letter-spacing:-.06em;line-height:.9}
.pf2 .z-big span{font-size:clamp(.9375rem,1vw,1.0625rem);color:#2A4459;max-width:20ch}
/* dessin (Ingénierie) : le Gantt sur papier clair */
.pf2 .z-dessin{background:var(--pa);color:var(--ink);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.pf2 .z-dessin h3{font-size:clamp(2.2rem,3.4vw,4rem);max-width:12ch}
/* 6 · conclusion marine : la phrase forte et l'action */
.pf2 .z-fin{background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center}
.pf2 .z-fin .pf-k{color:var(--sb)}
.pf2 .z-fin h3{font-size:clamp(2.8rem,5.6vw,6.6rem);max-width:12ch;line-height:.92}
.pf2 .z-fin .z-lead{color:rgba(255,255,255,.8)}
.pf2 .z-cta{margin-top:clamp(28px,4.4vh,44px);align-self:flex-start;display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 26px;border-radius:2px;background:var(--sb);color:var(--ink);font-weight:500;text-decoration:none}
.pf2 .z-cta:hover{background:#fff}
.pf2 .z-cta .ico{width:1em;height:1em}

/* bureau : la planche se déroule ; chaque panneau a sa largeur, la hauteur est celle de l'écran */
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .pf2.pf-live .pf-z{height:100%;flex:0 0 auto}
  .pf2.pf-live .z-ouv{width:min(78vw,1180px)}
  .pf2.pf-live .z-photo{width:100vw}
  .pf2.pf-live .z-photo .z-img{min-height:0}
  .pf2.pf-live .z-dark{width:min(66vw,980px)}
  .pf2.pf-live .z-split{width:min(96vw,1420px)}
  .pf2.pf-live .z-split .z-img{min-height:0;height:100%}
  .pf2.pf-live .z-mots{width:min(92vw,1360px)}
  .pf2.pf-live .z-dessin{width:min(100vw,1480px);display:grid}
  .pf2.pf-live .z-fin{width:min(70vw,1040px)}
  /* le fil d'avancement : lisible sur clair comme sur sombre */
  .pf2.pf-live .pf-cote{background:#fff;mix-blend-mode:difference;height:2px;bottom:28px}
  .pf2.pf-live .pf-ticks{bottom:22px;mix-blend-mode:difference}
  .pf2.pf-live .pf-ticks i{background:#fff;height:14px}
  .pf2.pf-live .pf-ticks em{color:#fff;bottom:20px}
}
/* téléphone / sans animation : panneaux empilés */
@media(max-width:899px){
  .pf2 .z-mots,.pf2 .z-dessin,.pf2 .z-split{grid-template-columns:1fr}
  .pf2 .z-dl{grid-template-columns:1fr}
  .pf2 .z-toc{flex-wrap:wrap}.pf2 .z-toc li{flex:0 0 50%;padding-bottom:12px}
  .pf2 .z-photo .z-img{min-height:56vw}
  .pf2 .z-dark .z-no{font-size:14rem;top:-10px}
  .pf2 .z-split .z-img{min-height:56vw;order:-1}
}

/* le fil d’avancement : la ligne seule (les noms chevauchaient le texte) */
@media(min-width:900px){.pf2.pf-live .pf-ticks em{display:none}.pf2.pf-live .pf-ticks i{height:10px}}

/* correctifs : grilles pleine largeur (un centrage hérité de la v1 rétrécissait la photo) ; chiffre du panneau marine sur téléphone */
.pf2 .z-photo{grid-template-columns:100%;justify-content:stretch}
.pf2 .z-split,.pf2 .z-mots,.pf2 .z-dessin{justify-content:stretch}
@media(max-width:899px){.pf2 .z-dark .z-no{position:static;display:block;font-size:7.5rem;margin-bottom:8px}}
/* Réalisations à une seule opération (13/11/2026) : grande vignette, bloc resserré */
.op-sec.op-1{padding-bottom:clamp(56px,8vh,88px)}
@media(min-width:900px){.op-1 .op-r a{grid-template-columns:clamp(260px,30vw,460px) minmax(0,3fr) minmax(0,4fr) auto 48px;gap:36px;padding:28px 0}.op-1 .op-i{aspect-ratio:16/10}}

/* PRIMOE — héros « 15c » (validé le 12/11/2026) : image ou vidéo plein cadre en couleurs réelles, titre à gauche,
   et à droite un panneau marine translucide portant les rangées (les trois métiers sur l'accueil, les missions sur un parcours).
   Chargé après lpas-home.css et parcours.css. Sans JS et en mouvement réduit : tout est visible, rien ne bouge. */

.h15{--c:#fff;list-style:none;margin:0;padding:0}

/* une rangée = un lien entier */
.h15-row{position:relative;display:grid;align-items:center;color:#fff;text-decoration:none;
  border-top:1px solid rgba(255,255,255,.28);transition:background-color .35s ease,color .35s ease}
.h15-row:first-of-type{border-top:0}
.h15-row::before{content:"";position:absolute;left:-1px;top:50%;width:6px;height:52%;translate:0 -50%;background:var(--c);transition:background-color .35s ease}
.h15-row.d{--c:#E9D8C2}.h15-row.i{--c:#CADDF2}.h15-row.v{--c:#F1D2CF}
.h15-n{display:block;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.82}
.h15-nm{display:block;margin-top:.3rem;font-weight:500;letter-spacing:-.028em;line-height:1.06;color:var(--c);
  font-size:clamp(1.55rem,2.2vw,2.35rem);transition:color .35s ease}
.h15-go{font-size:1.25rem;line-height:1;transition:translate .35s cubic-bezier(.16,1,.3,1)}
.h15-row:hover,.h15-row:focus-visible{background:var(--c);color:#0F2438;outline:0}
.h15-row:hover::before,.h15-row:focus-visible::before{background:#0F2438}
.h15-row:hover .h15-nm,.h15-row:focus-visible .h15-nm{color:#0F2438}
.h15-row:hover .h15-go,.h15-row:focus-visible .h15-go{translate:6px 0}
.h15-row:focus-visible{box-shadow:inset 0 0 0 3px #0F2438}

/* texte de gauche */

/* images des métiers, montrées au survol d'une rangée (au-dessus de la vidéo, sous le voile) */

/* ---------- bureau : panneau à droite ---------- */
@media (min-width:1100px){
  .h15{position:absolute;top:0;right:0;bottom:0;width:41.5%;z-index:1;display:grid;grid-auto-rows:1fr;padding-top:92px;
    background:rgba(15,36,56,.5);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
    border-left:1px solid rgba(255,255,255,.3)}
  .h15::before{content:"";position:absolute;left:0;right:0;top:91px;border-top:1px solid rgba(255,255,255,.28)}
  .h15-row{grid-template-columns:minmax(0,11fr) minmax(0,10fr) 24px;column-gap:clamp(16px,1.8vw,30px);padding:0 clamp(18px,2.2vw,36px) 0 clamp(26px,2.8vw,44px)}
  .h15.mis .h15-row{grid-template-columns:minmax(0,12fr) minmax(0,10fr) 24px}
  .h15-p{font-size:.9375rem;line-height:1.4;opacity:.92;margin:0}
  /* le texte reste dans la partie gauche */
}

/* ---------- téléphone et tablette : le titre sur l'image, puis les rangées empilées sur marine ---------- */
@media (max-width:1099.98px){
  .h15{position:relative;display:block;background:#0F2438}
  .h15-row{grid-template-columns:minmax(0,1fr) 24px;row-gap:14px;padding:26px var(--gut,20px) 26px calc(var(--gut,20px) + 14px);align-items:start}
  .h15-row::before{left:var(--gut,20px);top:26px;bottom:26px;height:auto;width:4px;translate:none}
  .h15-row .h15-p{grid-column:1;grid-row:2}
  .h15-row .h15-go{grid-column:2;grid-row:1;align-self:center}
  .h15-nm{font-size:1.9rem}
  .h15-p{font-size:.9375rem;line-height:1.45;opacity:.92;margin:0}
}

/* ---------- entrée : le panneau puis les rangées, une seule fois ---------- */
@media (prefers-reduced-motion:no-preference) and (min-width:1100px){
  html.js .h15{animation:h15pan .9s cubic-bezier(.16,1,.3,1) .55s both}
  html.js .h15-row>*{animation:h15row .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(1s + var(--i,0) * .12s)}
  @keyframes h15pan{from{opacity:0;translate:36px 0}to{opacity:1;translate:0 0}}
  @keyframes h15row{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
}

/* ---------- pages parcours : les rangées portent les missions ---------- */
.h3-15 .h15-row{--c:var(--sb)}
.h15.mis .h15-nm{font-size:clamp(1.25rem,1.6vw,1.65rem);color:#fff}
.h15.mis .h15-n{color:var(--c);opacity:1}
.h15.mis .h15-row:hover .h15-n,.h15.mis .h15-row:focus-visible .h15-n,
.h15.mis .h15-row:hover .h15-nm,.h15.mis .h15-row:focus-visible .h15-nm{color:#0F2438}
.h15-cyc{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.8125rem;letter-spacing:.03em}
.h15-cyc a{color:rgba(255,255,255,.62);text-decoration:none;padding-bottom:5px;border-bottom:2px solid transparent;transition:color .3s}
.h15-cyc a:hover{color:#fff}
.h15-cyc a.on{color:var(--sb);font-weight:600;border-bottom-color:var(--sb)}
@media (min-width:1100px){
  .h3.h3-15{grid-template-rows:1fr}
  .h3-15 .h15{z-index:4}
  .h3-15 .h3-t{bottom:clamp(40px,7vh,72px);width:min(45vw,680px)}
  .h3-15 h1{font-size:clamp(2.4rem,3.9vw,4.4rem);line-height:.98}
  .h3-15 .h3-cap{display:none}
  /* Ingénierie : les deux personnages restent à droite du titre (image agrandie depuis le bord gauche, titre sur trois lignes) */
  .h3-15[data-p="ing"] .h3-ph img{width:128%;height:128%;top:-16%;left:0;max-width:none}
  .h3-15[data-p="ing"] .h3-t{width:min(33vw,520px)}
  .h3-15 .h3-ph::after{background:linear-gradient(90deg,rgba(15,36,56,.9) 0,rgba(15,36,56,.72) 34%,rgba(15,36,56,.3) 58%,rgba(15,36,56,.3))}
}
@media (min-width:900px) and (max-width:1099.98px){
  /* tablette paysage : le héros garde sa hauteur d'écran, les rangées passent dessous */
  .h3.h3-15{height:auto;grid-template-rows:minmax(640px,100svh) auto}
  .h3-15 .h3-ph{grid-row:1;grid-column:1}
  .h3-15 .h3-t{position:relative;grid-row:1;grid-column:1;align-self:end;left:auto;bottom:auto;margin:0 var(--g) 48px;width:min(70vw,700px)}
}