/* =====================================================================
   SUSTnex — Système visuel V3 (direction retenue)
   =====================================================================
   Quatre domaines de conseil indépendants et de poids égal (Stratégie,
   ESG et développement durable, PMO et management de projet, Business
   Optimization) : aucune ligne, boucle, quadrant ou flèche ne les relie
   — ce serait suggérer un ordre ou une dépendance qui n'existe pas.
   L'égalité vient d'une structure éditoriale commune (question,
   situations déclenchantes, champ d'intervention, livrables, lien) ;
   l'asymétrie de mise en page (colonnes larges/étroites en alternance)
   vient de la variation réelle du contenu, pas d'un artifice décoratif.
   La séquence (rail à puces reliées) est réservée exclusivement à la
   méthode « Notre approche », qui est, elle, réellement séquentielle.
   TagMyAsset™ et le vocabulaire du rapprochement d'actifs n'apparaissent
   pas ici : ils appartiennent au site TagMyAsset, cité en module
   secondaire uniquement.
   ===================================================================== */

@font-face{ font-family:"Archivo"; src:url("fonts/archivo-latin-600-normal.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Archivo"; src:url("fonts/archivo-latin-700-normal.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Archivo"; src:url("fonts/archivo-latin-800-normal.woff2") format("woff2"); font-weight:800; font-display:swap; }
@font-face{ font-family:"Public Sans"; src:url("fonts/public-sans-latin-400-normal.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Public Sans"; src:url("fonts/public-sans-latin-500-normal.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Public Sans"; src:url("fonts/public-sans-latin-600-normal.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight:500; font-display:swap; }

:root{
  --paper:      #F5F5F3;
  --paper-2:    #EDEDEA;
  --ink:        #22262B;
  --ink-soft:   #4B5058;
  --ink-mute:   #696B6F;
  --gold:       #8A6412;
  --gold-lt:    #D9A63C;
  --on-ink:     #EDEDEA;
  --on-ink-mute:#A6ABB2;
  --line:       #DEDEDA;
  --line-ui:    #8C8D93;
  --line-ui-ink:#6E6F73;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans:    "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --content-w: 1180px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 3px;
  --ease: cubic-bezier(.4,0,.2,1);

  /* ---------- mouvement (voir MOUVEMENT.md) ----------
     Jetons partagés par le système de mouvement. Aucune animation du
     site ne doit utiliser une durée ou un easing en dehors de ces
     valeurs — c'est ce qui garantit que le mouvement se lit comme un
     seul système plutôt que comme des effets ajoutés au cas par cas. */
  --dur-fast: 160ms;
  --dur-base: 340ms;
  --dur-slow: 450ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;} }

*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.58; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit;}
::selection{background:var(--gold); color:var(--paper);}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.nav :focus-visible, .footer :focus-visible, .final-cta :focus-visible{outline-color:var(--gold-lt);}
.wrap{max-width:var(--content-w); margin:0 auto; padding:0 var(--gutter);}

.skip-link{position:absolute; left:12px; top:-60px; z-index:100; background:var(--paper); color:var(--ink); padding:10px 16px; border:1px solid var(--ink); border-radius:var(--radius); font-size:14px; text-decoration:none; transition:top .15s var(--ease);}
.skip-link:focus{top:12px;}

/* utilitaire — contenu présent dans l'arbre d'accessibilité mais masqué
   visuellement (ex. zone de statut du plan de fonctionnement) ; ne pas
   utiliser display:none/visibility:hidden, qui retireraient l'élément
   des technologies d'assistance. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

h1,h2,h3{font-family:var(--display); font-weight:800; margin:0; color:var(--ink); letter-spacing:-.015em;}
h1{font-size:clamp(2.15rem, 3.6vw, 3.15rem); line-height:1.1;}
h2{font-size:clamp(1.5rem, 2.3vw, 2rem); line-height:1.18;}
h3{font-size:1.3rem; line-height:1.28; font-weight:700;}
p{margin:0 0 1em; max-width:62ch;}
.eyebrow{font-family:var(--sans); font-size:13px; color:var(--gold); font-weight:700; letter-spacing:.02em;}
.lede{font-size:1.04rem; color:var(--ink-soft); max-width:58ch;}

.proof{border-bottom:1px solid var(--gold); text-decoration:none;}

/* ---------- nav ---------- */
.nav{background:var(--ink); color:var(--on-ink); position:relative; z-index:30;}
.nav-row{max-width:var(--content-w); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; height:76px;}
.nav .logo{height:26px; width:auto;}
.nav-links{display:flex; gap:32px; list-style:none; margin:0; padding:0; font-size:14.5px; font-weight:500;}
.nav-links a{position:relative; text-decoration:none; color:var(--on-ink-mute); padding:6px 0; transition:color var(--dur-fast) var(--ease);}
.nav-links a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold-lt); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-fast) var(--ease-out);}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--on-ink);}
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.nav-right{display:flex; align-items:center; gap:18px;}
.nav-cta{font-size:14px; font-weight:600; color:var(--on-ink); text-decoration:none; border:1px solid var(--line-ui-ink); padding:9px 18px; border-radius:var(--radius); transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);}
.nav-cta:hover{background:var(--gold); border-color:var(--gold); color:var(--ink);}

.burger{display:none; width:40px; height:40px; border:1px solid var(--line-ui-ink); border-radius:var(--radius); background:transparent; cursor:pointer; padding:0; position:relative;}
.burger span, .burger span::before, .burger span::after{content:""; position:absolute; left:10px; right:10px; height:1.5px; background:var(--on-ink); transition:transform .2s var(--ease), opacity .2s var(--ease);}
.burger span{top:19px;}
.burger span::before{top:-7px;}
.burger span::after{top:7px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{position:fixed; inset:0; background:var(--ink); z-index:40; display:flex; flex-direction:column; padding:24px var(--gutter) 40px; transform:translateY(-100%); transition:transform .28s var(--ease);}
.mobile-nav.is-open{transform:translateY(0);}
/* Repli sans JavaScript : le bouton bascule est un vrai lien (#mobile-nav),
   la fermeture un vrai lien (#top) — :target ouvre le panneau par simple
   navigation, sans script. Avec JavaScript, main.js empêche ce comportement
   par défaut et pilote .is-open à la place (voir commentaire dans main.js) ;
   les deux mécanismes produisent le même état visuel. */
.mobile-nav:target{transform:translateY(0);}
.mobile-nav-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:48px;}
.mobile-nav .close-btn{background:transparent; border:1px solid var(--line-ui-ink); color:var(--on-ink); width:40px; height:40px; border-radius:var(--radius); font-size:20px; cursor:pointer; line-height:1;}
.mobile-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;}
.mobile-nav a{color:var(--on-ink); text-decoration:none; font-family:var(--display); font-weight:700; font-size:1.6rem; padding:14px 0; border-bottom:1px solid var(--line-ui-ink); display:block;}
body.nav-locked{overflow:hidden;}

/* ---------- boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:15px; font-weight:600; padding:13px 24px; border-radius:var(--radius); text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn-primary:hover{background:var(--gold); border-color:var(--gold); color:var(--ink);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-ui);}
.btn-ghost:hover{border-color:var(--ink); background:var(--paper-2);}

/* lien discret d'accès secondaire — un seul CTA principal par hero,
   le second accès (ex. vers les quatre domaines) reste un simple lien
   souligné au survol, jamais un second bouton de même poids visuel. */
.link-quiet{display:inline-flex; align-items:center; gap:8px; align-self:center; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line-ui); padding-bottom:2px; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);}
.link-quiet:hover, .link-quiet:focus-visible{color:var(--ink); border-color:var(--ink);}

/* ---------- hero ---------- */
.hero{padding:68px 0 60px;}
.hero-grid{max-width:640px;}
.hero-grid.home{max-width:none; display:grid; grid-template-columns:1fr 250px; gap:56px; align-items:start;}
/* Stratégie : hero plus concentré et vertical que celui de l'accueil —
   colonne principale volontairement plus étroite (528px) que .hero-main,
   sommaire latéral resserré (220px) qui reste secondaire visuellement,
   jamais aussi large que l'index à quatre entrées de l'accueil. */
.hero-grid.strat{max-width:820px; display:grid; grid-template-columns:1fr 220px; gap:40px; align-items:start;}
.hero-grid.strat .hero-main{max-width:528px;}
.hero-main{max-width:640px;}
.hero h1{margin:12px 0 20px;}
.hero .lede{margin-bottom:20px; font-size:1.1rem;}
.hero-distinct{font-size:.98rem; color:var(--ink-soft); margin-bottom:30px; max-width:58ch;}
.hero-distinct b{color:var(--ink); font-weight:700;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

/* index compact des quatre domaines : occupe l'espace latéral du hero
   avec une fonction réelle (accès direct à chaque domaine), pas une forme
   décorative. */
.hero-index{border-left:1px solid var(--line-ui); padding-left:26px; margin-top:6px;}
.hero-index-label{display:block; font-family:var(--sans); font-weight:700; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px;}
.hero-index ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.hero-index li{border-bottom:1px solid var(--line);}
.hero-index li:last-child{border-bottom:none;}
.hero-index a{display:block; padding:11px 0; font-family:var(--display); font-weight:600; font-size:.96rem; color:var(--ink); text-decoration:none; line-height:1.25;}
.hero-index a:hover{color:var(--gold);}

/* ---------- section générique ---------- */
.section{padding:64px 0;}
.section.alt{background:var(--paper-2);}
.section.divide{border-top:1px solid var(--line);}
.section-head{max-width:70ch; margin-bottom:40px;}

/* =====================================================================
   Système de mouvement — voir MOUVEMENT.md pour la fonction, le
   déclencheur, la durée et le comportement mobile de chaque animation.

   Principe (corrigé) : le contenu n'est JAMAIS masqué par défaut, dans
   aucune configuration — sans JavaScript, avec prefers-reduced-motion:
   reduce, si IntersectionObserver échoue, ou sur une capture pleine page
   qui ne déclenche pas de défilement réel. L'opacité de .reveal et de
   .reveal-stagger reste donc TOUJOURS à 1 : ce ne sont plus des règles
   d'apparition (rien à cacher), seulement un très léger décalage de
   position au repos, corrigé par un déplacement de quelques pixels quand
   .is-in est ajouté. Si ce déplacement n'a jamais lieu (JS absent,
   observer en échec, capture automatisée), le texte reste pleinement
   lisible à sa position normale — un décalage de quelques pixels non
   corrigé n'est pas un défaut visible. assets/main.js ajoute .is-in au
   défilement réel, avec un filet de sécurité qui l'ajoute de toute façon
   après un court délai si l'observer ne s'est pas déclenché. ===== */
html.js-motion .reveal{transform:translateY(10px); transition:transform var(--dur-slow) var(--ease-out);}
html.js-motion .reveal.is-in{transform:none;}

html.js-motion .reveal-stagger > *{transform:translateY(10px); transition:transform var(--dur-base) var(--ease-out);}
html.js-motion .reveal-stagger.is-in > *{transform:none;}
html.js-motion .reveal-stagger.is-in > *:nth-child(1){transition-delay:0ms;}
html.js-motion .reveal-stagger.is-in > *:nth-child(2){transition-delay:80ms;}
html.js-motion .reveal-stagger.is-in > *:nth-child(3){transition-delay:160ms;}
html.js-motion .reveal-stagger.is-in > *:nth-child(4){transition-delay:240ms;}
html.js-motion .reveal-stagger.is-in > *:nth-child(5){transition-delay:320ms;}

/* flèche de lien : déplacement de 2–4px au survol/focus, jamais au repos */
.arrow{display:inline-block; transition:transform var(--dur-fast) var(--ease-out);}
a:hover .arrow, a:focus-visible .arrow{transform:translateX(3px);}

/* ---------- quatre expertises : composition éditoriale asymétrique ----------
   Volontairement NI ligne du temps, NI boucle, NI grille de cartes
   identiques, NI quadrants/pétales/cercles reliés/flèches, NI initiale
   décorative en filigrane (testée, retirée : lisibilité faible, aucune
   fonction au-delà du rythme). L'égalité vient d'une structure éditoriale
   commune à densité comparable (question, situations, interventions,
   livrables, lien) ; l'asymétrie vient de la proportion de la colonne de
   nom (large/étroite en alternance) et de la variation réelle de contenu
   — jamais d'un ordre ou d'un lien entre les quatre blocs. */
.expertise-set{border-top:1px solid var(--ink);}
.expertise{display:grid; grid-template-columns:1fr 2.1fr; gap:40px; padding:46px 0; border-bottom:1px solid var(--line); position:relative; transition:opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);}
.expertise:hover, .expertise:focus-within{border-bottom-color:var(--gold-lt);}
/* Le survol d'un domaine ne doit jamais faire perdre en contraste les
   trois autres : le lecteur compare les quatre domaines, il ne doit pas
   avoir l'impression que certains se « désactivent ». On garde un signal
   de survol, mais réduit au strict repère visuel déjà porté par
   .expertise:hover/:focus-within ci-dessus (bordure inférieure dorée) —
   aucun assourdissement des domaines non survolés. */
.expertise.flip{grid-template-columns:2.1fr 1fr;}
.expertise.flip .expertise-mark{order:2;}
.expertise.flip .expertise-content{order:1;}
.expertise-mark{padding-top:4px;}
.expertise-mark h3{font-size:1.55rem; line-height:1.15;}
.expertise-question{font-family:var(--display); font-weight:600; font-size:1.22rem; color:var(--ink); margin-bottom:16px; max-width:44ch;}
.expertise-trigger{font-size:.88rem; color:var(--ink-mute); margin-bottom:16px; max-width:56ch;}
.expertise-trigger b{color:var(--ink-soft); font-weight:600;}
.expertise-scope.taglist{display:flex; flex-wrap:wrap; gap:8px 0; font-size:.9rem; color:var(--ink-soft); margin-bottom:16px;}
.expertise-scope.taglist span{padding-right:13px; margin-right:13px; border-right:1px solid var(--line);}
.expertise-scope.taglist span:last-child{border:none; margin:0; padding:0;}
.expertise-deliv{font-size:.88rem; color:var(--ink-mute); margin-bottom:16px; max-width:60ch;}
.expertise-deliv b{color:var(--ink-soft); font-weight:600;}
.expertise-link{display:inline-block; font-size:.92rem; font-weight:700; color:var(--gold); text-decoration:none;}
.expertise-link:hover{text-decoration:underline;}

/* ---------- méthode : ligne séquentielle, réservée à la méthode ---------- */
.method-list{border-top:1px solid var(--line-ui); position:relative;}
.method-row{display:grid; grid-template-columns:36px 140px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); position:relative;}
.method-rail{position:relative;}
.method-rail .dot{width:9px; height:9px; border-radius:50%; background:var(--gold); margin-top:6px; transition:background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);}
.method-rail .thread{position:absolute; left:4px; top:19px; bottom:-24px; width:1px; background:var(--line-ui);}
.method-row:last-child .method-rail .thread{display:none;}
/* progression animée : réservée à cette méthode (seule séquence réelle
   du système). Repos = rail neutre ; l'étape s'« allume » quand elle est
   réellement atteinte à la lecture — jamais avant, jamais en boucle.
   Seul le rail (puce + filet) anime ; le texte reste toujours pleinement
   lisible, à tout instant, avec ou sans JavaScript. */
html.js-motion .method-rail .dot{background:var(--line-ui); transform:scale(.78);}
html.js-motion .method-row.is-active .method-rail .dot{background:var(--gold); transform:scale(1);}
.method-rail .thread-fill{position:absolute; left:4px; top:19px; bottom:-24px; width:1px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform var(--dur-slow) var(--ease-out);}
.method-row:last-child .method-rail .thread-fill{display:none;}
html.js-motion .method-row.is-active .method-rail .thread-fill{transform:scaleY(1);}
.method-row .tag{font-family:var(--mono); font-size:11.5px; color:var(--gold); letter-spacing:.04em; text-transform:uppercase; padding-top:3px;}
.method-row h3{font-size:1.1rem; margin-bottom:6px;}
.method-row p{color:var(--ink-soft); font-size:.96rem; margin-bottom:0;}

/* ---------- prompt-grid (situations / questions, pages d'expertise) ---------- */
.prompt-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line-ui); border-bottom:1px solid var(--line-ui);}
.prompt{background:var(--paper); padding:24px 26px;}
.prompt-grid .prompt:nth-child(odd):last-child{grid-column:1/-1;}
.prompt h3{font-size:1rem; margin-bottom:8px;}
.prompt p{color:var(--ink-soft); font-size:.94rem; margin-bottom:0;}

/* ---------- notre approche (page dédiée) : la seule séquence légitime du
   système — les cinq étapes sont réellement successives, contrairement
   aux quatre domaines. Rail à puces reliées + détail structuré par étape. */
.approach-steps{border-top:1px solid var(--ink);}
.approach-step{display:grid; grid-template-columns:32px 160px 1fr; gap:28px; padding:44px 0; border-bottom:1px solid var(--line); position:relative;}
.approach-step:last-child{border-bottom:none;}
.approach-rail{position:relative;}
.approach-rail .dot{width:11px; height:11px; border-radius:50%; background:var(--gold); margin-top:6px;}
.approach-rail .thread{position:absolute; left:4px; top:23px; bottom:-44px; width:1px; background:var(--line-ui);}
.approach-step:last-child .approach-rail .thread{display:none;}
.approach-step .tag{font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.04em; text-transform:uppercase; padding-top:3px;}
.approach-body h3{font-size:1.4rem; margin-bottom:8px;}
.approach-body .obj{color:var(--ink-soft); font-size:1rem; margin-bottom:24px; max-width:64ch;}
.approach-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 32px;}
.approach-field .k{display:block; font-family:var(--sans); font-weight:700; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px;}
.approach-field p{color:var(--ink-soft); margin:0; font-size:.92rem;}

/* ---------- Business Optimization — trois piliers (page dédiée) ----------
   Champ d'intervention structuré en trois piliers plutôt qu'en liste
   verticale à puces (méthode déjà utilisée par les trois autres domaines) :
   trois colonnes séparées par un simple filet, sans carte, sans fond
   coloré, sans icône. */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);}
.pillar{padding:32px 32px 34px; border-left:1px solid var(--line);}
.pillar:first-child{border-left:none; padding-left:0;}
.pillar-index{display:block; font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.04em; margin-bottom:16px;}
.pillar h3{font-size:1.22rem; margin-bottom:12px; max-width:22ch;}
.pillar > p{color:var(--ink-soft); font-size:1rem; margin-bottom:20px;}
.pillar-items{list-style:none; margin:0; padding-top:16px; border-top:1px solid var(--line); font-size:.97rem; color:var(--ink-soft);}
.pillar-items li{padding:9px 0; border-bottom:1px solid var(--line);}
.pillar-items li:last-child{border-bottom:none;}

/* ---------- Business Optimization — plan de fonctionnement (page dédiée)
   ----------
   Remplace le « feuillet » à lignes abstraites (retiré : lisait comme un
   skeleton loader / composant logiciel en chargement, ne représentait
   concrètement ni processus, ni risque, ni contrôle, ni rôle, ni
   indicateur). Ici, un document de travail structuré en quatre couches
   réelles du fonctionnement d'une organisation — Décisions et
   responsabilités, Processus et interfaces, Risques et contrôles,
   Indicateurs et information de pilotage — avec des libellés métier
   courts (jamais des barres). Les quatre couches sont TOUJOURS lisibles,
   sans animation : c'est un document, pas un tableau de bord. Le
   mouvement : ce sont quatre commandes manuelles (boutons), identiques à
   toutes les largeurs d'écran et sans lien avec js-motion ou
   prefers-reduced-motion (voir main.js). Activer un temps annote, sur ce
   même document jamais recomposé : 1) une responsabilité/interface non
   formalisée, 2) une rupture de processus et le risque associé,
   3) la structuration (contrôles et responsabilités attribués),
   4) les indicateurs utiles à la décision. Chaque état doit rester
   compréhensible sur une capture statique isolée, sans lire
   MOUVEMENT.md : chaque annotation porte son propre libellé (« interface
   non formalisée », « rupture identifiée »...). L'étape 1 est active par
   défaut ; rien ne change sans action de la personne qui consulte la
   page. */
.bo-plan{border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:40px 0;}

/* Commandes : une ligne de lecture (numéro + intitulé), pas des boutons
   encadrés — le composant doit lire comme un document de conseil annoté,
   jamais comme des onglets de logiciel. Pas de fond, pas d'ombre, pas de
   coin arrondi ; l'état actif se marque uniquement par un filet or sous
   l'intitulé et un changement de graisse. La zone cliquable reste large
   (padding vertical généreux) même si le rendu visuel est fin. */
.bo-plan-controls{display:flex; flex-wrap:wrap; column-gap:32px; row-gap:6px; margin-bottom:20px; border-bottom:1px solid var(--line-ui); padding-bottom:2px;}
.bo-plan-step{
  display:inline-flex; align-items:baseline; gap:8px;
  min-height:44px; padding:11px 3px; border:none; background:none;
  font:inherit; text-align:left; color:inherit; cursor:pointer;
  border-bottom:2px solid transparent;
}
.bo-plan-step .bo-plan-idx{font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); letter-spacing:.04em;}
.bo-plan-step .bo-plan-step-title{font-size:.88rem; color:var(--ink-soft); transition:color var(--dur-base) var(--ease);}
.bo-plan-step:hover .bo-plan-step-title{color:var(--ink);}
.bo-plan-step:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.bo-plan-step[aria-pressed="true"]{border-bottom-color:var(--gold);}
.bo-plan-step[aria-pressed="true"] .bo-plan-idx{color:var(--gold);}
.bo-plan-step[aria-pressed="true"] .bo-plan-step-title{color:var(--ink); font-weight:700;}

/* Description active : une seule à la fois (aria-live), hauteur minimale
   réservée pour deux lignes afin qu'un texte plus court ou plus long ne
   déplace jamais le document en dessous (pas de saut de mise en page). */
.bo-plan-active-desc{margin:0 0 24px; font-size:.95rem; color:var(--ink-soft); line-height:1.5; min-height:3em; max-width:62ch;}

.bo-plan-doc{border:1px solid var(--line-ui); background:var(--paper-2); padding:8px 28px;}
.bo-plan-layer{padding:20px 0; border-bottom:1px solid var(--line);}
.bo-plan-layer:last-child{border-bottom:none;}
.bo-plan-layer-label{display:block; font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:12px;}
.bo-plan-items{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 14px;}
.bo-plan-item{font-size:.92rem; color:var(--ink-soft); padding:7px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.bo-plan-badge{display:none; font-size:.7rem; padding:2px 9px; border-radius:2px; line-height:1.6; white-space:nowrap;}
.bo-plan-badge.is-set{display:inline-block;}
.bo-plan-badge.is-flag{border:1px dashed var(--ink-mute); color:var(--ink-mute); font-style:italic;}
.bo-plan-badge.is-resolved{border:1px solid var(--ink-soft); color:var(--ink-soft);}
.bo-plan-badge.is-decision{border:1px solid var(--gold); color:var(--gold); font-weight:600; font-style:normal;}

.bo-plan-caption{margin-top:16px; font-size:.78rem; color:var(--ink-mute);}

@media (max-width:900px){
  .bo-plan-controls{column-gap:20px; row-gap:4px;}
  .bo-plan-active-desc{min-height:4.5em;}
  .bo-plan-doc{padding:4px 20px;}
}

/* ---------- Business Optimization : texte plus grand, section moins dense
   (page dédiée uniquement — .prompt-grid et .deliverables sont partagés
   avec les autres pages d'expertise, donc portée ici par body.page-bo). ---------- */
body.page-bo .prompt{padding:26px 28px;}
body.page-bo .prompt h3{font-size:1.06rem;}
body.page-bo .prompt p{font-size:1rem;}
body.page-bo .deliverable{padding:22px 22px;}
body.page-bo .deliverable h3{font-size:1.04rem;}
body.page-bo .deliverable .k{font-size:.82rem;}
body.page-bo .section{padding-top:56px; padding-bottom:56px;}
body.page-bo .articulation-text{font-size:1.02rem; color:var(--ink-soft); max-width:80ch; line-height:1.65;}
/* six livrables (au lieu de huit) : trois colonnes plutôt que quatre, pour
   que deux lignes pleines (3+3) remplacent la grille à quatre colonnes
   pensée pour huit cartes — plus de règle nth-child fragile, plus d'espace
   vide en fin de grille. */
body.page-bo .deliverables{grid-template-columns:repeat(3,1fr);}
body.page-bo .deliverables .deliverable{grid-column:span 1 !important;}
@media (max-width:900px){
  body.page-bo .deliverables{grid-template-columns:1fr 1fr;}
}

/* ---------- aperçu de méthode (Accueil) ----------
   Remplace l'ancienne bande photographique (retirée à la demande de
   SUSTnex — plus d'image de banque libre sur le site). Sobre : typographie
   et filets uniquement, pas de rail à puces reliées (réservé à Notre
   approche, voir plus bas), pas d'icône ni de dégradé. Reprend les cinq
   intitulés exacts d'approche.html à titre d'aperçu, pas leur détail. */
.method-preview{padding:56px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2);}
.method-preview-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:28px;}
.method-preview-head .lede{margin:0; color:var(--ink-soft);}
.method-preview-steps{list-style:none; display:flex; flex-wrap:wrap; gap:28px 40px; margin:0 0 24px; padding:0;}
.method-preview-steps li{display:flex; align-items:center; gap:10px;}
.mp-idx{font-family:var(--mono); font-size:.82rem; color:var(--gold); letter-spacing:.04em;}
.mp-label{font-family:var(--display); font-weight:700; font-size:1rem; color:var(--ink);}
@media (max-width:900px){
  .method-preview-steps{gap:14px 28px;}
}

/* ---------- chiffres clés (Cabinet) ----------
   Remplace l'ancienne photo contextuelle (retirée à la demande de
   SUSTnex). Reprend uniquement des chiffres déjà énoncés dans le
   paragraphe qui précède — aucune donnée nouvelle ou inventée. */
.cabinet-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:36px; border-top:1px solid var(--ink);}
.cabinet-stat{padding:24px 20px 4px; border-right:1px solid var(--line);}
.cabinet-stat:last-child{border-right:none;}
.cs-num{display:block; font-family:var(--display); font-weight:800; font-size:2.6rem; letter-spacing:-.02em; color:var(--ink); line-height:1;}
.cs-label{display:block; margin-top:8px; font-size:.86rem; color:var(--ink-soft); max-width:22ch;}
@media (max-width:900px){
  .cabinet-stats{grid-template-columns:1fr; border-top:none;}
  .cabinet-stat{padding:16px 0; border-right:none; border-bottom:1px solid var(--line);}
  .cabinet-stat:last-child{border-bottom:none;}
}

/* ---------- livrables (preuve sobre) ---------- */
.deliverables{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);}
.deliverable{background:var(--paper); padding:24px 22px;}
.deliverable .k{font-size:.78rem; color:var(--ink-mute); margin-bottom:8px;}
.deliverables .deliverable:nth-child(4n+1):nth-last-child(-n+3){grid-column:span 2;}
.deliverable h3{font-size:1rem; font-weight:700;}

/* ---------- le cabinet (accueil, court, uniquement du vérifié) ---------- */
.cabinet-mini{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.cabinet-mini p{color:var(--ink-soft); font-size:.98rem;}
.cabinet-facts{list-style:none; margin:0; padding:0; font-size:.94rem; color:var(--ink-soft);}
.cabinet-facts li{padding:10px 0; border-bottom:1px solid var(--line);}
.cabinet-facts li:last-child{border-bottom:none;}
.cabinet-facts b{color:var(--ink); font-weight:700;}

/* ---------- module TagMyAsset (secondaire, compact) ---------- */
.tma{border:1px solid var(--line-ui); border-radius:var(--radius); padding:26px 30px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; background:var(--paper-2);}
.tma-text{max-width:60ch;}
.tma .eyebrow{display:block; margin-bottom:6px;}
.tma p{color:var(--ink-soft); font-size:.94rem; margin-bottom:0;}
.tma-cta{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.94rem; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--gold); padding-bottom:2px; white-space:nowrap;}
.tma-note{font-size:.74rem; color:var(--ink-mute); margin-top:6px;}

/* ---------- CTA + contact ---------- */
.final-cta{background:var(--ink); color:var(--on-ink); padding:60px 0 52px;}
.final-cta h2{color:var(--paper); font-family:var(--display); max-width:26ch;}
.final-cta .lede{color:var(--on-ink-mute); margin-bottom:0; max-width:60ch;}
.final-cta .btn-primary{background:var(--paper); color:var(--ink); border-color:var(--paper);}
.final-cta .btn-primary:hover{background:var(--gold-lt); border-color:var(--gold-lt); color:var(--ink);}

.contact-section{padding:52px 0 72px;}
.contact-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:56px;}
.contact-note h3{margin-bottom:10px;}
.contact-note p{color:var(--ink-soft); font-size:.95rem;}
.contact-note .addr{margin-top:22px; font-size:.92rem; color:var(--ink-soft);}
.contact-note .addr strong{display:block; color:var(--ink); font-weight:700; margin-bottom:2px;}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px 24px;}
.field.full{grid-column:1/-1;}
.field label{display:block; font-size:.82rem; color:var(--ink-soft); margin-bottom:6px; font-weight:500;}
.field input, .field select, .field textarea{width:100%; border:none; border-bottom:1px solid var(--line-ui); background:transparent; font-family:var(--sans); font-size:.98rem; color:var(--ink); padding:9px 2px; border-radius:0; transition:border-color .16s var(--ease);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-bottom-color:var(--gold);}
.field textarea{resize:vertical; min-height:96px;}
.field .req{color:var(--gold);}
.form-actions{margin-top:26px; display:flex; align-items:center; gap:18px;}
.form-note{font-size:.82rem; color:var(--ink-mute); max-width:44ch; margin:0;}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.btn[disabled]{opacity:.6; cursor:default;}
.form-feedback{margin-top:18px; padding:14px 18px; border-radius:var(--radius); font-size:.92rem; display:none;}
.form-feedback:empty{display:none;}
.form-feedback.is-visible{display:block;}
.form-feedback.is-success{background:#EAF3EA; border:1px solid #3E7B3E; color:#245024;}
.form-feedback.is-error{background:#F8EAEA; border:1px solid #A23B3B; color:#7A2323;}
.form-feedback:focus{outline:2px solid var(--gold); outline-offset:3px;}

/* ---------- footer ---------- */
.footer{background:var(--ink); color:var(--on-ink-mute); padding:52px 0 26px; border-top:1px solid var(--line-ui-ink);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:44px;}
.footer .logo{height:24px; margin-bottom:16px;}
.footer p{color:var(--on-ink-mute); font-size:.9rem; max-width:34ch;}
.footer h4{font-family:var(--sans); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-ink); margin-bottom:16px; font-weight:700;}
.footer ul{list-style:none; margin:0; padding:0;}
.footer li{margin-bottom:10px;}
.footer a{color:var(--on-ink-mute); text-decoration:none; font-size:.92rem;}
.footer a:hover{color:var(--on-ink); border-bottom:1px solid var(--gold-lt);}
.footer-base{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:20px; border-top:1px solid var(--line-ui-ink); font-size:.82rem; color:var(--on-ink-mute);}

/* =====================================================================
   Différenciation Stratégie / ESG / PMO — round 10 (direction statique,
   validée après retrait de la parenté « composant à onglets » du round
   précédent : plus de rangée de commandes, plus d'état actif basculé
   par bouton, plus de filets/repères numérotés utilisés comme habillage
   commun aux trois pages). Chaque page garde le système de marque
   (palette, typographies, grille, boutons, mouvement sobre) mais reçoit
   son propre rythme et son propre composant métier, entièrement
   statique — aucune des trois ne dépend de JavaScript pour être
   comprise, et aucune ne réutilise .method-list (réservée à Notre
   approche) ni .prompt-grid pour son contenu structurant. Business
   Optimization et .bo-plan ne sont pas concernés. ===================== */

/* Deux utilitaires typographiques neutres, partagés par les trois pages
   pour leur contenu courant (situations, livrables reformulés en liste,
   articulation) — ce ne sont pas des « composants métier » et ne
   remplacent donc pas la règle ci-dessus. */
.plain-list{list-style:none; margin:0; padding:0;}
.plain-list li{padding:12px 0; border-bottom:1px solid var(--line);}
.plain-list li:last-child{border-bottom:none;}
.plain-list h3{font-size:1rem; margin-bottom:4px;}
.plain-list p{color:var(--ink-soft); font-size:.92rem; margin:0; max-width:64ch;}
.central-q{font-family:var(--display); font-style:italic; font-weight:600; color:var(--ink-soft); font-size:1.1rem; max-width:58ch; margin-top:16px;}

/* ---------- Stratégie : colonne étroite, mouvements numérotés (01–05).
   La numérotation est le repère visuel principal de la page — jamais un
   rail à puces reliées (réservé à Notre approche), jamais une frise. */
body.page-strategie .section{padding:60px 0;}
body.page-strategie .wrap.narrow{max-width:760px;}
.strat-movement{display:grid; grid-template-columns:96px 1fr; gap:32px; align-items:start;}
.strat-movement-idx{font-family:var(--mono); font-size:.82rem; color:var(--gold); letter-spacing:.04em; padding-top:6px;}
.strat-movement-idx b{display:block; font-family:var(--display); font-size:2.1rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1;}
.strat-movement h2{margin-bottom:14px;}
.strat-movement p{color:var(--ink-soft); max-width:60ch;}

/* Sommaire du hero : ancres internes vers les cinq mouvements, rendues
   comme la table des matières d'un mémorandum (numérotation + filets),
   jamais comme une barre de navigation secondaire — pas de fond, pas de
   bouton, pas d'état survolé agressif. */
.strat-sommaire{border-left:1px solid var(--line-ui); padding-left:20px;}
.strat-sommaire-label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:10px;}
.strat-sommaire ol{list-style:none; margin:0; padding:0; counter-reset:strat-s;}
.strat-sommaire li{counter-increment:strat-s; border-bottom:1px solid var(--line);}
.strat-sommaire li:last-child{border-bottom:none;}
.strat-sommaire a{display:flex; gap:10px; padding:9px 0; font-family:var(--display); font-weight:600; font-size:.86rem; color:var(--ink); text-decoration:none; line-height:1.3;}
.strat-sommaire a::before{content:counter(strat-s,decimal-leading-zero); font-family:var(--mono); font-weight:400; font-size:.76rem; color:var(--gold); flex:none;}
.strat-sommaire a:hover, .strat-sommaire a:focus-visible{color:var(--gold);}

/* Cadre de décision stratégique : document fixe à cinq lignes, toujours
   entièrement lisible (aucune ligne masquée, aucune donnée fictive).
   Volontairement PAS un arbre de décision, PAS une matrice 2×2, PAS une
   frise, PAS un diagramme à flèches. */
.strat-frame-wrap{display:grid; grid-template-columns:1fr 230px; gap:36px; align-items:start;}
.strat-frame{border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);}
.strat-frame-row{display:grid; grid-template-columns:230px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--line);}
.strat-frame-row:last-child{border-bottom:none;}
.strat-frame-row h3{font-size:1rem; margin-bottom:0;}
.strat-frame-row p{color:var(--ink-soft); font-size:.95rem; margin:0; max-width:56ch;}

/* Marginalia — quatre notes de lecture, ENTIÈREMENT STATIQUES : aucun
   bouton, aucun état actif, aucune dépendance à JavaScript. Elles ne
   remplacent aucune barre d'onglets : elles vivent en marge du document,
   toutes visibles à la fois, comme des annotations de lecture plutôt
   que comme une commande. Typographie volontairement secondaire (plus
   petite, plus pâle) pour rester une annotation, pas un second niveau
   de contenu principal. */
.strat-marginalia{border-left:1px solid var(--line-ui); padding-left:22px;}
.strat-marginalia-label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:16px;}
.strat-marginalia-item{margin-bottom:20px;}
.strat-marginalia-item:last-child{margin-bottom:0;}
.strat-marginalia-item .lbl{display:block; font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}
.strat-marginalia-item p{margin:0; font-size:.82rem; line-height:1.5; color:var(--ink-soft);}

/* ---------- ESG : trois ensembles éditoriaux de rythme inégal plutôt
   que sept sections mécaniques de même poids. ---------- */
body.page-esg .section{padding:50px 0;}
.esg-movement{display:grid; grid-template-columns:1fr 260px; gap:40px; align-items:start;}
.esg-movement-notes{border-left:1px solid var(--line-ui); padding-left:24px;}
.esg-movement-notes .k{display:block; font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px;}
.esg-movement-notes p{font-size:.88rem; color:var(--ink-soft); margin-bottom:16px;}
.esg-movement-notes p:last-child{margin-bottom:0;}
.esg-ensemble-head{margin-bottom:22px;}
.esg-ensemble-head .k{font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-bottom:6px;}
.esg-dims{margin:22px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px;}
.esg-dims li{font-family:var(--mono); font-size:11px; color:var(--ink-mute); letter-spacing:.02em;}
.esg-dims li::before{content:"·"; color:var(--gold); margin-right:6px;}

/* Dossier ESG — remplace définitivement le stepper à six maillons.
   Un dossier générique et méthodologique (jamais un cas client simulé,
   jamais de donnée fictive) qui réunit simultanément les six éléments
   qui font passer un enjeu matériel d'un constat à un résultat pilotable.
   Entièrement statique, compréhensible sans JavaScript. */
.esg-dossier{background:var(--paper-2); border:1px solid var(--line-ui); padding:30px 34px; box-shadow:7px 7px 0 -3px var(--paper), 7px 7px 0 -2px var(--line-ui);}
.esg-dossier-head{font-family:var(--display); font-weight:700; font-size:1.08rem; margin-bottom:6px;}
.esg-dossier-sub{color:var(--ink-mute); font-size:.84rem; margin-bottom:20px; max-width:64ch;}
.esg-dossier-field{display:grid; grid-template-columns:230px 1fr; gap:24px; padding:15px 0; border-bottom:1px solid var(--line);}
.esg-dossier-field:last-child{border-bottom:none;}
.esg-dossier-field .k{font-family:var(--sans); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-mute);}
.esg-dossier-field .v{color:var(--ink-soft); font-size:.92rem;}
.esg-dossier-caption{margin:18px 4px 0; font-size:.84rem; color:var(--ink-mute); font-style:italic; max-width:70ch;}

/* ---------- PMO : deux échelles toujours visibles, spatialement
   asymétriques (le portefeuille arbitre et consolide ; le projet
   exécute et fait remonter l'information — ce ne sont pas deux
   colonnes équivalentes). Aucune bascule, aucun bouton : les trois
   regards (Direction / PMO / Chef de projet) sont des annotations de
   rôle imprimées à même chaque ligne. ---------- */
body.page-pmo .section{padding:56px 0;}
.pmo-band{padding:32px 0;}
.pmo-band.portfolio{background:var(--paper-2); border-top:1px solid var(--line-ui); border-bottom:1px solid var(--line);}
.pmo-band.project{background:var(--paper);}
.pmo-band-label{font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px; display:block;}
.pmo-band-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 28px; list-style:none; margin:0; padding:0;}
.pmo-band-list li{padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink-soft);}
.pmo-band-list li h3{font-size:1rem; margin-bottom:4px;}

.pmo-scale{border-top:1px solid var(--ink);}
.pmo-scale-zone{padding:26px 0;}
.pmo-scale-zone.portfolio{max-width:100%; border-bottom:1px solid var(--line);}
.pmo-scale-zone.project{max-width:78%; margin-left:12%; padding-top:22px;}
.pmo-scale-zone .zl{display:block; font-family:var(--mono); letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px;}
.pmo-scale-zone.portfolio .zl{font-size:11.5px; font-weight:700; color:var(--ink);}
.pmo-scale-zone.project .zl{font-size:10px; font-weight:600; color:var(--ink-mute);}
.pmo-scale-items{list-style:none; margin:0; padding:0;}
.pmo-scale-items li{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.92rem; flex-wrap:wrap;}
.pmo-scale-items li:last-child{border-bottom:none;}
.pmo-scale-zone.portfolio .pmo-scale-items li{padding-left:14px; position:relative;}
.pmo-scale-zone.portfolio .pmo-scale-items li::before{content:""; position:absolute; left:0; top:14px; width:6px; height:6px; border-radius:50%; background:var(--gold);}
.pmo-scale-zone.project .pmo-scale-items li{padding-left:14px; border-left:2px solid var(--line-ui); color:var(--ink-soft);}
.pmo-scale-items .role{font-style:italic; font-size:.76rem; color:var(--ink-mute); white-space:nowrap;}
.pmo-scale-seam{border-top:1px dashed var(--line-ui); margin:4px 0 0; padding-top:10px;}
.pmo-scale-seam p{font-size:.8rem; color:var(--ink-mute); font-style:italic; margin:0; max-width:70ch;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{display:none;}
  .burger{display:block;}
  .hero-grid.home{grid-template-columns:1fr;}
  .hero-index{border-left:none; padding-left:0; margin-top:8px; padding-top:22px; border-top:1px solid var(--line-ui);}
  .hero-grid.strat{grid-template-columns:1fr; max-width:none;}
  .hero-grid.strat .hero-main{max-width:none;}
  .expertise, .expertise.flip{grid-template-columns:1fr; gap:16px;}
  .expertise.flip .expertise-mark{order:1; text-align:left;}
  .expertise.flip .expertise-content{order:2;}
  .method-row{grid-template-columns:24px 100px 1fr; gap:14px;}
  .approach-step{grid-template-columns:24px 1fr; gap:14px;}
  .approach-step .tag{grid-column:2; margin-top:-4px;}
  .approach-body{grid-column:1/-1;}
  .approach-grid{grid-template-columns:1fr;}
  .deliverables{grid-template-columns:1fr 1fr;}
  .pillars{grid-template-columns:1fr;}
  .pillar{border-left:none; padding-left:0; padding-right:0; border-top:1px solid var(--line); padding-top:28px;}
  .pillar:first-child{border-top:none; padding-top:0;}
  .prompt-grid{grid-template-columns:1fr;}
  .cabinet-mini{grid-template-columns:1fr; gap:24px;}
  .tma{flex-direction:column; align-items:flex-start;}
  .contact-grid{grid-template-columns:1fr; gap:36px;}
  .field-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:32px;}
  .footer-base{flex-direction:column;}

  /* Différenciation Stratégie / ESG / PMO — même largeur de composition
     que le reste du site sous 900px : les grilles à colonne fixe des
     composants statiques (cadre + marginalia, sommaire, dossier ESG,
     double échelle PMO) repassent à une seule colonne, comme
     .prompt-grid/.deliverables ci-dessus. Aucune adaptation de contenu
     n'est faite ici — seule la mise en page se réajuste ; les
     marginalia/annotations sont repositionnées sous leur bloc principal
     plutôt qu'à côté, pour rester lisibles sans défilement horizontal. */
  .strat-movement{grid-template-columns:1fr; gap:10px;}
  .strat-movement-idx{padding-top:0;}
  .strat-sommaire{border-left:none; padding-left:0; border-top:1px solid var(--line-ui); padding-top:18px; margin-top:18px;}
  .strat-frame-wrap{grid-template-columns:1fr; gap:24px;}
  .strat-frame-row{grid-template-columns:1fr; gap:6px; padding:18px 0;}
  .strat-marginalia{border-left:none; padding-left:0; border-top:1px solid var(--line-ui); padding-top:20px; margin-top:8px;}
  .esg-movement{grid-template-columns:1fr; gap:22px;}
  .esg-movement-notes{border-left:none; padding-left:0; border-top:1px solid var(--line-ui); padding-top:16px;}
  .esg-dossier{padding:24px 20px;}
  .esg-dossier-field{grid-template-columns:1fr; gap:4px; padding:14px 0;}
  .pmo-scale-zone.project{max-width:100%; margin-left:0; padding-left:16px; border-left:2px solid var(--line-ui);}
  .pmo-scale-items li{flex-direction:column; align-items:flex-start; gap:2px;}
}