/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN 9 — « DOSSIER »
   Couche de thème. À charger APRÈS base.css.

   PARTI PRIS — croisement des designs 2 et 8, arrondis poussés au maximum.

   Du design 2 « Éditorial » : la hiérarchie typographique d'un rapport
   d'ingénierie — titres très grands, sur-titres en petites capitales, filet
   plein sous chaque en-tête de section, index numéroté pour les situations,
   et le pied de page clair (le seul autre design à ne pas basculer en sombre).

   Du design 8 « Compact » : le rythme court, le corps de texte resserré et les
   grilles à trois ou quatre colonnes. La page se parcourt vite.

   Ce que le croisement change : là où le design 2 supprimait les cartes au
   profit de colonnes nues, elles reviennent ici sous forme de surfaces très
   arrondies. Le contraste tient la page — typographie sévère, formes douces.

   Rayons et construction repris du design 10 : 44 px au plus large, page grise
   et sections alternées en panneaux blancs arrondis détachés des bords.

   Ce qui distingue encore les deux : ici les cartes restent cernées d'un filet
   fin là où le design 10 les pose à l'ombre seule, les titres sont nettement
   plus grands, les situations gardent l'index numéroté « 01 → 11 » au lieu
   d'une grille de quatre colonnes, le pied de page reste clair, et le rythme
   général est moins serré.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Page grise, panneaux et contenus blancs — comme le design 10 */
  --surface:     #EBEFF5;
  --surface-alt: #FFFFFF;
  --card-bg:     #FFFFFF;
  /* Filet légèrement densifié : les cartes blanches se posent désormais aussi
     sur les panneaux blancs (mission, approche, parcours, contact). À #E5E9EF
     elles s'y effaçaient — et c'est le filet, pas l'ombre, qui les définit ici. */
  --card-border: 1px solid #DCE2EB;
  --panel-bg:    #0A1226;

  /* Formes : rayons du design 10, le maximum de la série */
  --r-xl: 44px; --r-lg: 34px; --r-md: 26px; --r-sm: 18px;
  --r-pill: 999px; --r-btn: 999px;

  /* Retrait latéral des panneaux par rapport aux bords de l'écran */
  --inset: clamp(8px, 1.4vw, 22px);

  /* Titres à l'échelle éditoriale du design 2… */
  --fs-h1:    clamp(2.3rem, 4.9vw, 4rem);
  --fs-h2:    clamp(1.95rem, 4vw, 3.25rem);
  --h-track:  -0.045em;

  /* …et corps de texte resserré comme le design 8 */
  --fs-h3:    clamp(1.04rem, 1.3vw, 1.2rem);
  --fs-lead:  clamp(1rem, 1.15vw, 1.08rem);
  --fs-body:  1.02rem;
  --fs-small: .91rem;
  --fs-micro: .8rem;

  /* Rythme court */
  --space-section: clamp(58px, 6.6vw, 100px);
  --grid-gap: 12px;
  --container: 1320px;
  --header-h: 68px;
}

body { line-height: 1.57; }

/* — Les sections alternées deviennent de grands panneaux blancs arrondis,
     détachés des bords de l'écran.

     Le panneau est peint par un pseudo-élément plutôt que par une marge sur la
     section : une marge décalerait le contenu de ces sections par rapport aux
     sections blanches voisines, et les paragraphes cesseraient de s'aligner
     verticalement au défilement. — */
.section--mist { background: transparent; }
.section--mist::before {
  content: ""; position: absolute; inset: clamp(24px, 2.8vw, 44px) var(--inset); z-index: 0;
  background: var(--surface-alt);
  border-radius: clamp(26px, 2.6vw, var(--r-xl));
}
.section--mist > .container { position: relative; z-index: 1; }

/* — En-tête de section : le filet plein du design 2, à hauteur compacte — */
.section__head {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(18px, 2.8vw, 46px);
  margin-bottom: clamp(24px, 3vw, 38px);
  padding-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--c-ink);
}
.eyebrow { color: var(--c-ink); margin-bottom: 13px; }
.eyebrow::before { width: 30px; }
.section__lead .btn { margin-top: 18px; }

/* — Cartes : denses comme le design 8, mais très arrondies —
     Le rayon impose un peu plus de marge intérieure, sinon le texte vient
     buter dans la courbe des angles. */
.card { padding: clamp(24px, 2.3vw, 32px) clamp(24px, 2.3vw, 32px) clamp(26px, 2.5vw, 34px); }
.card:hover { transform: translateY(-3px); }
.card h3 { margin-bottom: 8px; }
.card__icon { width: 46px; height: 46px; margin-bottom: 14px; }
.card__num { top: 22px; right: 26px; font-size: 1.15rem; }
.card__claim { font-size: var(--fs-small) !important; margin-bottom: 7px; }
.card__list { margin-top: 14px; padding-top: 14px; gap: 6px; }
.card__list li { font-size: var(--fs-micro); padding-left: 16px; line-height: 1.48; }
.card__list li::before { width: 7px; top: .58em; }
.card__link { padding-top: 17px; font-size: var(--fs-micro); }
.card__flag { top: -10px; left: 32px; font-size: 10px; padding: 5px 13px; }
.card--featured { border-width: 1.5px; }

/* — Étapes : le gros numéro fantôme du design 2, dans une surface arrondie — */
.step { padding: clamp(24px, 2.5vw, 34px); }
.step:hover { transform: translateY(-3px); }
.step__num {
  font-size: clamp(2.4rem, 3.4vw, 3.3rem); line-height: .9;
  color: #8A94A3; margin-bottom: 12px;   /* Relevé : le ton d'origine tombait sous le seuil du perceptible. */
}
.step:hover .step__num { color: var(--c-accent); transform: none; }
.step h3 { margin-bottom: 7px; }

/* — Portes d'entrée et références : pastilles larges — */
.door { padding: 18px 24px 19px; border-radius: var(--r-lg); }
.door:hover { transform: translateY(-3px); }
.door__items { font-size: .76rem; line-height: 1.48; }

.logos li { min-height: 68px; padding: 0 26px; flex-basis: 170px; border-radius: clamp(18px, 2vw, 26px); }
.logos li span { font-size: .92rem; }
.logos li:hover { transform: translateY(-3px); }

/* — Situations : sommaire numéroté « 01 → 11 », une ligne par situation —
     Lecture en colonne (préférence d'Enes, 31/08/2026) : en grille sur trois
     colonnes, l'œil sautait d'une phrase à l'autre sans ordre évident et la
     numérotation ne servait à rien. En pile, elle se lit d'un seul balayage.
     Ne pas repasser en `repeat(3, 1fr)`. */
/* Largeur bornee : etirees sur 1300 px, les lignes etaient aux trois quarts
   vides a droite. A 860 px la pastille reste proportionnee au texte. */
.situations { grid-template-columns: 1fr; gap: 8px; counter-reset: sit; max-width: 860px; }
.situations li {
  counter-increment: sit;
  padding: 13px 22px 13px 52px;
  font-size: var(--fs-small);
}
.situations li::before {
  content: counter(sit, decimal-leading-zero);
  left: 22px; top: 13px; width: auto; height: auto; background: none;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  color: var(--c-accent-sm);
}
.situations li:hover { transform: translateX(4px); }
.situations li:hover::before { width: auto; color: var(--c-accent); }
.situations__close { margin-top: 22px; padding-top: 20px; font-size: var(--fs-body); }


/* — Étiquettes et fil rouge — */
.thread { gap: 8px 4px; margin-bottom: clamp(26px, 3vw, 38px); }
.thread li { padding: 7px 16px; font-size: var(--fs-micro); }
.tags { gap: 7px; margin-block: 20px; }
.tags li { padding: 6px 14px; font-size: .76rem; }

/* — Blocs larges — */
.panel__body { padding: clamp(28px, 3.4vw, 50px); }
.panel__list { gap: 8px; margin-bottom: 26px; }
.sector__body { padding: clamp(24px, 2.8vw, 40px); }
.sector--others { padding: clamp(24px, 2.8vw, 34px); }
.split { gap: clamp(26px, 3.4vw, 56px); }
.split__text .prose { margin-top: 20px; }
.cta-final { padding-block: clamp(60px, 7vw, 100px); }

/* — Formulaire : champs largement arrondis, libellés en capitales du design 2 —
     Le rayon impose plus de marge horizontale pour que le texte saisi ne colle
     pas à la courbe. */
.contact__intro { margin-bottom: 24px; }
.form { gap: 15px; }
.field-row { gap: 15px; }
.field label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .09em; }
.field--check label { text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  padding: 12px 22px; border-radius: var(--r-md); border-color: #DCE2EB;
}
.field textarea { min-height: 104px; padding-top: 14px; border-radius: var(--r-lg); }
.form__status { border-radius: var(--r-md); padding: 13px 22px; }
.contact__card, .contact__meta { padding: clamp(24px, 2.8vw, 34px); }
.contact__meta dd { margin-bottom: 16px; }

/* — Pied de page : SOMBRE, comme le modèle 1 (retour de Julien).
     Le modèle 4 le forçait en clair ; on ne redéfinit plus rien ici, le
     pied de page anthracite de base.css s'applique tel quel — c'est
     exactement celui de la proposition 1. Il referme la page sur le même
     ton que le hero et la mission. — */

/* — Rattrapage mobile —
   Ce thème redéfinit .section__head hors media query. Comme il est chargé
   après base.css à spécificité égale, il écrasait aussi le passage en une
   seule colonne prévu sous 900 px : l'en-tête de section restait sur deux
   colonnes, le texte d'accroche se retrouvait dans une colonne trop étroite
   et le bouton, en white-space: nowrap, débordait de l'écran.
   On réarme donc ici la règle de base.css. */
@media (max-width: 900px) {
  .section__head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PROPOSITION 5 — « SYNTHÈSE » : le mix des modèles 1 et 4 demandé par Julien.

   Tout ce qui précède est la proposition 4 telle quelle (hero photo plein
   cadre conservé, page grise, panneaux blancs arrondis). La couche ci-dessous
   ajoute les deux demandes :

   1. La section Mission reprend le fond anthracite et le contraste du
      modèle 1, coulés dans le panneau arrondi détaché des bords du modèle 4.
   2. Les visuels du bandeau du modèle 1 sont réutilisés et associés aux
      quatre missions : chaque carte est coiffée de sa photo, avec le même
      traitement noir & blanc → couleur au survol que le bandeau d'origine.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Mission : le bloc sombre du modèle 1, les formes du modèle 4 ─────── */

#mission::before { background: var(--panel-bg); }
#mission { color: #fff; }
#mission h2 { color: #fff; }
#mission .muted { color: var(--c-accent); }  /* « Et préparer la suite. » en orange */
#mission .eyebrow { color: var(--c-accent); }
#mission .section__head { border-bottom-color: rgba(255,255,255,.28); }
#mission .section__lead { color: rgba(255,255,255,.92); }  /* blanc quasi plein : lisibilité */
#mission .section__lead strong { color: #fff; }

/* Accroche longue (texte de Julien, 3 paragraphes) : la colonne de droite
   s'allongeait seule et laissait un trou au-dessus du H2, aligné en bas.
   Colonnes égalisées, et le bouton passe sous le titre pour que les deux
   colonnes retombent à la même hauteur sur le filet. */
#mission .section__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#mission .section__title {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(18px, 2vw, 26px);
}
@media (max-width: 900px) {
  #mission .section__head { grid-template-columns: 1fr; }
}

/* Bouton primaire : anthracite sur anthracite, il passe en blanc (modèle 1) */
#mission .btn--primary { background: #fff; color: var(--c-ink); }
#mission .btn--primary:hover { background: var(--c-accent); color: #fff; }
#mission .btn--primary:hover .btn__arrow { background: #fff; color: var(--c-accent); }

/* Cartes : le verre dépoli du modèle 1, le rayon et le filet du modèle 4 */
#mission .card {
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: none;
}
#mission .card h3 { color: #fff; }
#mission .card p  { color: rgba(255,255,255,.72); }
/* Rythme des 4 cartes (demande Julien) : problème en tête, puis intervention
   et bénéfice. .card__claim est encré foncé par défaut — illisible ici. */
#mission .card__claim { color: #fff !important; }
#mission .card:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(253,90,0,.55);
  box-shadow: none;
}

/* ── 2. Les visuels du bandeau, associés aux missions ────────────────────────
   La photo occupe toute la largeur de la carte : les marges négatives
   compensent le padding posé plus haut (même clamp, signes inversés), et
   l'overflow:hidden de .card--situation rogne les angles au rayon de la
   carte. Le filet orange de .card--situation::before se déploie PAR-DESSUS
   la photo : c'est voulu, il garde son rôle de signature au survol. */
.card--situation .card__media {
  /* -1px : la photo recouvre le filet clair de la carte, qui affleurait sinon */
  margin: calc(clamp(-32px, -2.3vw, -24px) - 1px)
          calc(clamp(-32px, -2.3vw, -24px) - 1px)
          18px;
  overflow: hidden;
}
.card--situation .card__media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.06); opacity: .85;
  transition: filter var(--slow), opacity var(--slow), transform var(--slow);
}
.card--situation:hover .card__media img {
  filter: none; opacity: 1; transform: scale(1.04);
}

/* Écrans tactiles : pas de survol, la photo reste dans le traitement N&B du
   bandeau d'origine — c'est le rendu que le client a validé. On fige
   simplement le zoom pour éviter l'état collant après un appui. */
@media (hover: none) {
  .card--situation:hover .card__media img {
    filter: grayscale(1) contrast(1.06); opacity: .85; transform: none;
  }
}

/* ── Affinages demandés par Julien ─────────────────────────────────────────── */

/* Colonne de contact figée pendant le défilement du formulaire.
   `top` dégage le bandeau pré-en-tête + l'en-tête fixes (--chrome-h).
   Sous 900 px la page passe en une colonne : la colonne est le dernier
   élément de la grille, sticky n'a plus de course — on le retire. */
@media (min-width: 901px) {
  .contact__side {
    position: sticky;
    top: calc(var(--chrome-h) + 20px);
  }
}

/* ── Pré-en-tête : téléphone et e-mail plus visibles (demande Julien) ──────── */
:root { --preheader-h: 42px; }
.preheader { font-size: .95rem; }
.preheader__item svg { width: 16px; height: 16px; }

/* ── En-têtes de section : texte d'accroche calé en HAUT, aligné sur le titre.
     Le socle cale la colonne de droite sur le bas du titre : avec les très
     grands titres de ce design, l'accroche semblait perdue en bas à droite. ── */
.section__head { align-items: start; }


/* ── Carte « Votre situation n'entre dans aucune case ? » : les deux boutons
     étaient collés l'un à l'autre sur ordinateur. ── */
.card--cta .btn + .btn { margin-top: 10px; }

/* ── Diagnostic Flash : la photo fond dans le panneau sombre au lieu d'une
     coupe franche (demande Julien). Dégradé posé sur le bord intérieur. ── */
.panel__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--panel-bg) 0%, rgba(10,18,38,0) 42%);
}
@media (max-width: 900px) {
  /* Empilé : la photo passe au-dessus du texte, le fondu bascule vers le bas */
  .panel__media::after {
    background: linear-gradient(180deg, rgba(10,18,38,0) 52%, var(--panel-bg) 100%);
  }
}

/* ── LinkedIn : la pastille « in » prend la couleur officielle. Elle était
     encre sur encre dans le bouton sombre du Parcours. ── */
.btn__li { background: #0A66C2; color: #fff; }


/* ── Appel final : même langage que les autres panneaux.
     Le bloc sombre courait d'un bord à l'autre alors que tous les panneaux
     de la page sont détachés des bords — d'où l'encoche au raccord avec le
     panneau Contact. Il devient un panneau arrondi détaché, comme les autres
     (préférence d'Enes : les écarts latéraux du modèle 4 partout).
     La marge directe suffit ici : le contenu est centré, et l'overflow:hidden
     du socle rogne le halo orange au rayon du panneau. ── */
.cta-final {
  margin-inline: var(--inset);
  margin-block: clamp(24px, 2.8vw, 44px);
  border-radius: clamp(26px, 2.6vw, var(--r-xl));
}

/* ── Diagnostic Flash et Secteurs : panneaux ramenés dans le conteneur
     standard, alignés comme les autres sections (demande Enes), et panneau
     Diagnostic moins haut — padding vertical resserré. ── */
#diagnostic .panel__body { padding-block: clamp(26px, 3vw, 40px); }

/* ── Jonctions uniformes : même respiration entre le hero et le premier
     panneau, entre les panneaux entre eux, et avant le footer. ── */
.hero { margin-bottom: clamp(24px, 2.8vw, 44px); }
.footer { margin-top: clamp(24px, 2.8vw, 44px); border-radius: clamp(26px, 2.6vw, 44px) clamp(26px, 2.6vw, 44px) 0 0; }

/* ── Cartes internes (contact) : rayon toujours un cran SOUS celui du panneau
     parent — sur mobile le panneau descend à 26px, les cartes suivent. ── */
.contact__card, .contact__meta { border-radius: clamp(22px, 2.4vw, 40px); }

/* ── Photo du parcours : même rayon que le panneau blanc qui la porte,
     et sur ordinateur elle reste visible pendant que le texte défile. ── */
.split__media { border-radius: clamp(26px, 2.6vw, 44px); }
@media (min-width: 901px) {
  .split__aside { position: sticky; top: calc(var(--chrome-h) + 28px); align-self: start; }
}

/* ── Signature de marque sous le portrait : elle occupe le vide laissé par
     la photo, plus courte que la colonne de texte, et signe le Parcours.
     Le collant porte désormais sur le bloc entier : la phrase suit la
     photo pendant que le texte défile. ── */
.split__aside { display: grid; gap: clamp(18px, 2vw, 26px); }
.signature {
  padding-left: clamp(14px, 1.2vw, 18px);
  border-left: 3px solid var(--c-accent);
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  font-weight: 600; line-height: 1.45;
  color: var(--c-ink); text-wrap: pretty;
}

/* Même signature en clôture du CTA final. Le bloc y est centré sur fond
   anthracite : le filet orange passe au-dessus plutôt qu'à gauche, et le
   texte repasse en blanc plein — le gris de .cta-final p l'éteindrait. */
.cta-final .signature {
  position: relative;
  margin: clamp(26px, 3vw, 38px) auto 0;
  padding: clamp(20px, 2.2vw, 28px) 0 0;
  border-left: 0;
  max-width: 44ch;
  color: #fff;
  font-size: clamp(1.06rem, 1.3vw, 1.2rem);
}
.cta-final .signature::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 46px; height: 3px; background: var(--c-accent);
}

/* ── Mobile : les cartes empilées respirent (doit vivre ICI, après le
     --grid-gap: 12px du thème, sinon il reprend le dessus). ── */
@media (max-width: 900px) {
  :root { --grid-gap: 28px; }

  /* Blocs de chiffres du hero : plus d'air entre les deux rangées */
  .hero__figs-grid { gap: 20px 12px; }

  /* Sur téléphone le hero se termine net, sans arrondi ni détachement */
  .hero { border-radius: 0; margin-bottom: 0; }

  /* Références : la liste défile au doigt, les flèches sont superflues */
  .logoslider__btn { display: none; }

  /* Tous les boutons de contenu prennent la largeur disponible */
  main .btn { width: 100%; justify-content: center; }

  /* Photo des panneaux sombres : même arrondi que le panneau qui la porte,
     et hauteur bornée — le portrait plein cadre mangeait tout l'écran */
  .panel__media { border-radius: clamp(26px, 2.6vw, 44px); height: 200px; min-height: 0; }
}

/* ── Diagnostic Flash : la section « flush » gardait la grande marge de
     section (~100px) en plus du retrait des panneaux voisins — sa jonction
     était deux fois plus haute que les autres. On la cale sur le même pas. ── */
.section--flush { margin-block: clamp(24px, 2.8vw, 44px); }

/* ── Grands panneaux autonomes (Diagnostic, Secteurs) : même rayon que les
     socles arrondis des sections — ils étaient à 44px fixes quand les autres
     suivent le clamp. ── */
.panel, .sector--lead, .sector--others { border-radius: clamp(26px, 2.6vw, var(--r-xl)); }

/* ── Sections sans panneau (Expertises, Situations, Secteurs) : deux paddings
     de section empilés faisaient ~200px de vide entre les contenus sur grand
     écran — trois fois le pas des jonctions de panneaux. On resserre. ── */
#expertises, #situations, #secteurs, #offres { padding-block: clamp(28px, 3.2vw, 48px); }

/* ── Boutons orange : au survol ils basculent en bleu nuit pour trancher —
     sauf sur les fonds déjà sombres, où l'orange foncé reste le bon contraste. ── */
.btn--accent:hover { background: var(--c-ink); color: #fff; }
.hero .btn--accent:hover,
.panel .btn--accent:hover,
.cta-final .btn--accent:hover,
.contact__card .btn--accent:hover,
#mission .btn--accent:hover { background: var(--c-accent-dp); color: #fff; }

/* ── Le :root du thème ci-dessus écrase la remise à zéro mobile du préheader
     faite dans base.css (même spécificité, fichier chargé après) : on la
     répète ici pour qu'elle gagne. Sans ça, le header garde 42px de vide
     au-dessus de lui tant qu'on n'a pas défilé. ── */
@media (max-width: 1080px) {
  :root { --preheader-h: 0px; }
  /* Top figé à 0 et sans transition : évite le glissement de 42px→0
     visible pendant le chargement des feuilles de style. */
  .header { top: 0; transition: background var(--fast), border-color var(--fast); }
}

/* ── Étapes 01/02/03 : la barre orange bascule en BAS des blocs (demande
     Julien — le fil « Comprendre → Pérenniser » reste, lui, au-dessus). ── */
.step::after { top: auto; bottom: 0; }

/* ── Progression au scroll dans l'Approche (demande Julien : « progression
     visuelle au scroll Diagnostiquer → Transformer → Pérenniser »).
     Le fil rouge s'allume pastille par pastille, puis la barre de chaque
     étape se remplit en orange, de 01 à 03. La barre posée à la révélation
     devient le rail gris, l'orange par-dessus est le remplissage.
     Sans JS (html sans .js), tout est déjà à l'état plein. ── */

/* Fil rouge : au repos, pastilles et flèches sont grises. */
.js .thread li:last-child { border-color: var(--c-line); }
.js .thread li {
  transition: background 420ms var(--ease), border-color 420ms var(--ease),
              color 420ms var(--ease), transform var(--fast);
}
/* Les flèches vivent DANS la pastille : au repos, le gris du filet (#E3E7EC)
   disparaissait sur le blanc, et une fois la pastille orange une flèche
   orange devenait invisible sur son propre fond. D'où deux tons dédiés :
   le gris « pas encore atteint » du site, puis du blanc sur l'orange. */
.js .thread li + li::before { color: #8A94A3; transition: color 420ms var(--ease); }
.js .thread li.is-active {
  background: var(--c-accent); border-color: var(--c-accent); color: #fff;
}
.js .thread li.is-active::before { color: rgba(255, 255, 255, .8); }

/* Étapes : rail gris, et par-dessus une ligne orange que le scroll dessine.
   --fill va de 0 à 1 par carte et c'est le JS qui l'écrit en continu : la
   transition ne sert qu'à lisser les à-coups de la molette, pas à animer. */
.step::after { background: var(--c-line); }
.step::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--c-accent); transform: scaleX(var(--fill, 0)); transform-origin: left;
  transition: transform 140ms linear; z-index: 1;
}
.step__num { transition: color 380ms var(--ease), transform 340ms var(--ease); }
.step.is-active .step__num { color: var(--c-accent); }
html:not(.js) .step::before { transform: scaleX(1); }

/* ── Bandeau haut : contacts mis en avant (réf. partagée par Julien).
     Téléphone et e-mail en blanc plein et plus gras ; le délai de réponse
     devient une pastille orange, à la façon du bouton du site de référence. ── */
.preheader__item { color: #fff; font-weight: 700; }
.preheader__item:hover { color: var(--c-accent); }
.preheader__note {
  color: #fff;
  background: rgba(253, 90, 0, .16);
  font-weight: 700;
  padding: 7px 15px;
  border-radius: var(--r-pill);
}

/* ── Logos de références : plus grands et plus lisibles au repos. ── */
.logos--images li img { max-height: 44px; opacity: .8; }

/* ── Pastille LinkedIn : le vrai glyphe. Bleu officiel dans les boutons,
     orange dans le préheader (survol : couleurs LinkedIn). ── */
svg.btn__li { padding: 4px; border-radius: 4px; }
.btn > svg.btn__li { width: 26px; height: 26px; padding: 5px; }

/* ── Préheader :
     · carré LinkedIn plus grand, fond ORANGE, glyphe du bleu nuit du bandeau ;
       au survol il prend les vraies couleurs LinkedIn (bleu officiel, glyphe blanc) ;
     · icônes téléphone et e-mail : orange en permanence — au survol seul le
       texte passe à l'orange, icône et texte restent donc accordés. ── */
.preheader__item svg.btn__li {
  width: 20px; height: 20px; padding: 4px;
  background: var(--c-accent); color: var(--c-ink);
  transition: background var(--fast), color var(--fast);
}
.preheader__item:hover svg.btn__li { background: #0A66C2; color: #fff; }

/* ── Préheader façon Oxalli : posé en haut de PAGE (plus fixé à l'écran),
     il défile avec elle. Seul l'en-tête reste accroché : dès qu'on descend
     (is-stuck, posé par main.js à 40 px), il glisse tout en haut de l'écran
     — en verre dépoli, le fond de page reste visible à travers (socle). ── */
.preheader { position: absolute; }
.header { transition: background var(--fast), border-color var(--fast), top .3s var(--ease); }
.header.is-stuck { top: 0; }
/* Menu mobile ouvert alors qu'on a défilé : le volet suit l'en-tête remonté. */
@media (max-width: 900px) {
  .header.is-stuck #nav { top: var(--header-h); }
}

/* ── Parcours : texte plus grand, plus court, plus contrasté (demande Julien).
     Le gris acier sur blanc manquait de présence. ── */
.split__text .prose p {
  font-size: clamp(1.06rem, 1.25vw, 1.18rem);
  line-height: 1.62;
  color: var(--c-ink-3);
}

/* ── Références intégrées à la présentation ── */
.parcours__refs { margin: clamp(24px, 2.6vw, 34px) 0 26px; }
.parcours__refs .eyebrow { margin-bottom: 10px; }
.parcours__refs-title {
  font-size: clamp(1.18rem, 1.65vw, 1.5rem);
  letter-spacing: var(--h-track);
  line-height: 1.14;
  margin-bottom: 16px;
}

/* Curseur de logos : une rangée qui défile, flèches de part et d'autre */
.logoslider { display: flex; align-items: center; gap: 10px; }
.logoslider .logos {
  flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.logoslider .logos::-webkit-scrollbar { display: none; }
.logoslider .logos li { flex: 0 0 auto; }
.logoslider__btn {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: var(--c-paper); color: var(--c-ink);
  font-size: 1.05rem; cursor: pointer; display: grid; place-items: center;
  transition: background var(--fast), color var(--fast), border-color var(--fast), opacity var(--fast);
}
.logoslider__btn:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* ── Expertises : les 3 portes d'entrée remontent dans l'en-tête de section,
     en BLEU NUIT — un registre visuel volontairement distinct des cinq
     cartes blanches détaillées en dessous (demande Julien). ── */
.section__head .doors { grid-column: 1 / -1; margin: clamp(16px, 1.8vw, 24px) 0 0; }
.door { background: var(--c-ink-2); border-color: var(--c-ink-3); }
.door__title { color: #fff; }
.door__items { color: rgba(255, 255, 255, .62); }
.door:hover { background: var(--c-ink); border-color: rgba(253, 90, 0, .6); }

/* ── Lisibilité générale : même traitement que la bio du Parcours pour tous
     les textes gris sur fond clair — encre foncée au lieu du gris acier, et
     accroches de section à la même échelle que la bio. Les sections sombres
     gardent leurs réglages (leurs sélecteurs plus précis l'emportent). ── */
.section__lead { color: var(--c-ink-3); font-size: clamp(1.06rem, 1.25vw, 1.18rem); }
.card p { color: var(--c-ink-3); font-size: var(--fs-body); }
.step p { color: var(--c-ink-3); }
.situations li { color: var(--c-ink-3); }
.contact__intro { color: var(--c-ink-3); }
.contact__meta dd { color: var(--c-ink-3); }
.sector--others p { color: var(--c-ink-3); }

/* ── Curseur de références : pastilles de taille UNIFORME (les largeurs
     variables des logos rendaient la rangée hétérogène), et libellé
     « Domaines d'expertise » au-dessus des étiquettes du parcours. ── */
/* Glisser à la main : curseur explicite, pas de sélection pendant le geste */
.logoslider .logos { cursor: grab; user-select: none; -webkit-user-select: none; }
.logoslider .logos.is-grabbing { cursor: grabbing; }
.logoslider .logos li { flex: 0 0 152px; width: 152px; padding: 0 16px; }
.logoslider .logos li img { max-width: calc(100% - 8px); max-height: 42px; height: auto; }
.parcours__refs { margin: clamp(20px, 2.2vw, 28px) 0 22px; }
.parcours__label { margin: 2px 0 12px; }
.split__text .tags { margin-top: 0; }

/* ── Portes d'entrée : design enrichi (demande Julien).
     Dégradé bleu nuit, libellés mieux hiérarchisés, et au survol un BALAYAGE
     orange qui traverse la carte de gauche à droite. Le petit filet du socle
     disparaît, le balayage le remplace. ── */
.door {
  background: linear-gradient(115deg, var(--c-ink-2) 0%, var(--c-ink) 100%);
  border-color: var(--c-ink-3);
}
.door::after { display: none; }
.door::before {
  content: ""; position: absolute; z-index: 0;
  /* Largeur 165% : l'arête fondue finit APRÈS le bord droit de la pastille,
     sinon le fond bleu nuit restait visible dans le coin bas droit. */
  inset: 0 auto 0 -20%; width: 165%;
  background: linear-gradient(100deg, var(--c-accent) 0%, var(--c-accent-dp) 76%, rgba(219, 75, 0, 0) 100%);
  transform: translateX(-105%) skewX(-16deg);
  transition: transform .65s cubic-bezier(.45, .05, .2, 1);
}
.door:hover::before { transform: translateX(0) skewX(-16deg); }
.door:hover { border-color: var(--c-accent-dp); }
.door__title, .door__items { position: relative; z-index: 1; }
.door__title { font-size: 1.02rem; }
.door:hover .door__items { color: rgba(255, 255, 255, .88); }

/* ── Boutons pleins : au survol, un BISEAU À BORD FONDU traverse de gauche à
     droite — une couche inclinée (−16°) dont l'arête avant s'efface en
     dégradé (variante 07 retenue par Julien). ── */
.btn--accent, .btn--primary { position: relative; overflow: hidden; z-index: 0; }
.btn--accent::after, .btn--primary::after {
  content: ""; position: absolute; z-index: -1;
  /* Largeur 165% : l'arête fondue finit APRÈS le bord droit du bouton
     (même correctif que les portes d'entrée). */
  inset: 0 auto 0 -20%; width: 165%;
  transform: translateX(-105%) skewX(-16deg);
  transition: transform .6s cubic-bezier(.45, .05, .2, 1);
}
.btn--accent::after { background: linear-gradient(90deg, var(--c-accent-dp) 78%, rgba(219, 75, 0, 0) 100%); }
.btn--primary::after { background: linear-gradient(90deg, var(--c-accent) 78%, rgba(253, 90, 0, 0) 100%); }
.btn--accent:hover::after, .btn--primary:hover::after { transform: translateX(0) skewX(-16deg); }
/* le fond de base ne change plus instantanément : le balayage s'en charge */
.btn--accent:hover { background: var(--c-accent); }

/* ── CORRECTIF : la rangée de logos (flex-basis auto = 967 px) imposait son
     minimum à la colonne texte du Parcours, ce qui écrasait la colonne photo
     à ~47 px. Base flex à zéro : la rangée prend la place disponible, le
     surplus défile (et les flèches apparaissent). Garde-fou min-width sur la
     colonne texte pour qu'aucun futur contenu large ne reproduise l'effet. ── */
.logoslider .logos { flex: 1 1 0px; min-width: 0; }
.split__text { min-width: 0; }

/* ── Curseur de références : pas de soulèvement au survol des pastilles
     (le retour en couleur du logo suffit), la rangée reste stable. ── */
.logoslider .logos li:hover { transform: none; }