/* ==========================================================================
   /nos-interventions/ — les trois modes d'intervention
   Feuille DÉDIÉE : aucune règle ne doit fuir sur les 43 autres pages.
   Tout est préfixé .mi- (vérifié libre dans les 8 feuilles avant écriture).

   Le propos du contenu : les trois modes se distinguent par le DEGRÉ DE
   TRANSFERT de responsabilité — « vous gardez la maîtrise » → « nous faisons
   avec vous » → « une responsabilité assumée ». La composition le rend visible
   par un escalier dont chaque marche s'enfonce, et par la chute de chaque mode
   posée À CHEVAL sur le mode suivant : la responsabilité passe la frontière.

   Rétention : 0. Rien n'est épinglé ; tout est piloté par la traversée du
   viewport (recette 2 du skill), état par défaut = état final lisible.
   ========================================================================== */

.mi-page{ --mi-pad: clamp(72px, 9vw, 150px); }

/* ---------- HERO — typographique, sans image : cette page n'est pas une
     expertise, et le bandeau photo est la signature des pages qui le sont. --- */
.mi-hero{
  position:relative; overflow:hidden;
  background:#0B1420;
  padding:calc(var(--mi-pad) + 46px) 0 var(--mi-pad);
}
.mi-hero .fwrap{ position:relative; z-index:1 }
.mi-hero .fwrap > *{ max-width:min(100%, 62ch) }
.mi-hero h1{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(2.6rem, 7.4vw, 6.4rem); line-height:.94; letter-spacing:-.045em;
  color:#fff; max-width:none; margin:0 0 .44em;
}
/* statement en deux registres : le serif porte le mot pivot (V6 P5) */
.mi-lede{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.24rem, 2.5vw, 2.05rem); line-height:1.34;
  color:#E7EDF4; max-width:26ch; margin:0;
}
.mi-lede em{ font-style:italic; color:var(--f-orange) }
/* filigrane clippé — conteneur propre, sinon il s'échappe (recette 7) */
.mi-word-clip{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.mi-word{
  position:absolute; right:3vw; top:50%; transform:translateY(-48%);
  font-family:var(--sans); font-weight:700;
  font-size:clamp(11rem, 34vw, 30rem); line-height:.78; letter-spacing:-.06em;
  white-space:nowrap; color:transparent;
  -webkit-text-stroke:2px rgba(205,216,228,.13);
}
/* sous 900 px le titre occupe toute la largeur : le chiffre passe derrière,
   plus discret, et ne dispute plus la place au texte */
@media (max-width:899px){
  .mi-word{ right:-.12em; top:auto; bottom:-.06em; transform:none;
            font-size:clamp(9rem, 46vw, 16rem); -webkit-text-stroke-width:1.5px }
}

/* ==========================================================================
   LES TROIS MODES — escalier + asymétrie + chute à cheval
   ========================================================================== */

.mi-modes{ background:var(--f-lav); padding:calc(var(--mi-pad) + 18px) 0 calc(var(--mi-pad) + 30px) }

.mi-h{ margin:0 0 clamp(38px, 5vw, 74px) }
.mi-h h2{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1.7rem, 3.6vw, 3.05rem); line-height:1.04; letter-spacing:-.035em;
  color:var(--f-ink); max-width:24ch; margin:0;
}
.mi-h h2 .soft{ color:#5A6B80 }

.mi-esc{ list-style:none; margin:0; padding:0; position:relative }

/* le filet qui relie les trois marches — il se trace à la traversée */
.mi-rail{
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:rgba(16,27,43,.13); transform-origin:50% 0;
}
.mi-rail::after{
  content:""; position:absolute; inset:0;
  background:var(--mi-accent, #A03608);
  transform:scaleY(var(--r, 1)); transform-origin:50% 0;
}

.mi-m{ position:relative; padding-left:clamp(18px, 3.4vw, 54px) }
.mi-m + .mi-m{ margin-top:clamp(40px, 5.2vw, 82px) }

/* l'escalier : chaque marche s'enfonce vers la droite. La dérive pilotée par
   le scroll est NÉGATIVE au repos (la marche revient de la gauche et rejoint
   son décrochement) — dans l'autre sens elle sortirait à droite, dans une
   section clippée, et serait coupée en silence. */
@media (min-width:900px){
  .mi-m{ margin-left:calc(var(--s) * clamp(22px, 3.2vw, 52px)) }
  .mi-m{ transform:translate3d(calc(var(--d, 0) * -1px), 0, 0) }

  /* DEUX niveaux, pas cinq. Le nom du mode occupe seul la colonne de gauche :
     l'œil descend cette colonne et lit les trois modes sans lire le reste.
     C'est ça, « l'info essentielle rapidement perceptible ». */
  .mi-m{ display:grid; grid-template-columns:.58fr 1fr; gap:clamp(18px, 2.6vw, 46px);
         align-items:start }
}

.mi-m h3{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1.62rem, 3.5vw, 2.9rem); line-height:1.02; letter-spacing:-.035em;
  color:var(--f-ink); max-width:none; margin:0 0 .4em;
  text-wrap:balance;
}
@media (min-width:900px){ .mi-m h3{ margin:0 } }

.mi-m > .mi-desc{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.02rem, 1.28vw, 1.19rem); line-height:1.62;
  color:#2B3A4C; margin:0; max-width:56ch;
}

/* ==========================================================================
   AIGUILLAGE — contraste d'échelle : la question chuchote, la réponse énonce
   ========================================================================== */
.mi-aig{ background:var(--f-lav); padding:var(--mi-pad) 0 }
.mi-aig .mi-h h2{ max-width:20ch }

.mi-q{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(20px, 2.8vw, 40px) }
.mi-q li{ border-top:1px solid rgba(16,27,43,.14); padding-top:clamp(14px, 1.8vw, 24px) }
.mi-q a{
  display:grid; gap:.28em; text-decoration:none;
  grid-template-columns:1fr; align-items:baseline;
}
@media (min-width:900px){ .mi-q a{ grid-template-columns:.62fr 1fr; gap:.28em clamp(18px,3vw,54px) } }

.mi-q .q{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(.98rem, 1.25vw, 1.16rem); line-height:1.42; color:#3B4A5C;
}
.mi-q .r{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1.34rem, 3.1vw, 2.5rem); line-height:1.06; letter-spacing:-.035em;
  color:var(--f-ink);
  transition:color .18s;
}
.mi-q a:hover .r, .mi-q a:focus-visible .r{ color:#A03608 }

/* ==========================================================================
   COUCHE CONTINUE — pilotée par la traversée, jamais par un épinglage.
   ⚠️ L'état par défaut (sans JS, sans desktop, si le pilote échoue) est
   l'état FINAL LISIBLE : --d à 0 et --r à 1. Rien n'est masqué.
   ========================================================================== */
.mi-esc{ --d:0 }
html.js .mi-page.is-live .mi-m{ will-change:transform }

@media (prefers-reduced-motion:reduce){
  html.js .mi-page.is-live .mi-m{ transform:none !important }
  .mi-rail::after{ transform:scaleY(1) !important }
}

/* ---------- mobile : l'escalier est à plat, la dérive neutralisée ---------- */
@media (max-width:899px){
  .mi-m{ transform:none !important; margin-left:0 }
  .mi-rail{ display:none }
  .mi-m{ padding-left:0 }
}

/* ==========================================================================
   CTA — titre en nacre, comme sur les pages d'expertise V2
   (`.exp-prem .fcta h2{color:var(--f-silver)}` dans expertise.css, que cette
   page ne charge pas). Portée par `.mi-page` : `.fcta` sert 17 pages, une
   règle nue fuirait sur toutes. Spécificité égale à `.bold .fcta h2` — c'est
   l'ORDRE qui tranche, et cette feuille est chargée après cortex-bold.css.
   ========================================================================== */
.mi-page .fcta h2{ color:#DFE7F0 }
/* ⚠️ Nacre RELEVÉ, pas remplacé : #CDD8E4 (le `--f-silver` du socle) rendait le
   titre trop pâle une fois posé sur le halo. #DFE7F0 reste franchement nacre —
   32 points sous le blanc, contre 50 — et gagne en éclat : 8,94 → 10,34:1 au
   pire point du halo, pour un seuil de 3.
   La graisse n'est PAS un levier ici : `montserrat.woff2` est déclaré
   `font-weight:500 700`, et 800 rend une chasse identique à 700 (écart mesuré
   et consigné au journal le 2026-08-31). Seule la teinte agit. */