/* ============================================================
   MESURE PROCESS — DESIGN TOKENS
   wp-content/themes/rs1-mesure-process/assets/css/mp-tokens.css

   Chargé APRÈS dist/assets/main-*.css par inc/mp-design-system.php.
   Ce fichier ne modifie rien au rendu tant qu'aucun bloc ne consomme
   ses variables : son installation est sans risque.

   RÈGLE : aucune couleur en dur dans un style.css de bloc.
   Si un token manque, on l'ajoute ici, jamais dans le bloc.
   ============================================================ */

:root{

  /* ── COULEURS DE MARQUE ────────────────────────────────────
     Bleu = structure. Turquoise = signal (≈ 8 % de la surface).

     Le turquoise canonique est #009C95, la couleur officielle du
     groupe Synqo. Le thème actuel utilise #00b5ad (49 occurrences)
     et #009e97 — deux nuances pour la même intention. Elles
     convergent vers --mp-turquoise au fil du refactor.

     Pour conserver la nuance actuelle au lieu d'aligner sur le
     groupe, remplacer la valeur ci-dessous par #00b5ad. C'est le
     seul endroit à changer.                                      */

  --mp-bleu:            #143E6D;   /* 35 occurrences dans le thème */
  --mp-bleu-fonce:      #0D2A4B;
  --mp-bleu-nuit:       #081C33;
  --mp-bleu-clair:      #245A9B;   /* survol des boutons           */
  --mp-bleu-voile:      #E9EFF7;
  --mp-bleu-brume:      #F5F8FC;

  --mp-turquoise:       #009C95;   /* canonique groupe Synqo       */
  --mp-turquoise-vif:   #2FC7BE;   /* signal sur fond sombre       */
  --mp-turquoise-fonce: #00726D;   /* fond des boutons turquoise : blanc 5,79:1 */
  --mp-turquoise-profond: #005A56; /* survol des boutons turquoise : blanc 8,09:1 */
  --mp-turquoise-voile: #E6F6F5;
  --mp-turquoise-pale:  #9FDCD8;

  /* ── NEUTRES ─────────────────────────────────────────────── */
  --mp-encre:           #0F2136;
  --mp-texte:           #3E5064;
  --mp-gris:            #5B6E82;   /* AA : 5,25:1 blanc, 4,93:1 brume, 4,54:1 voile (#6C7F94 échouait) */
  --mp-trait:           #DFE6EF;
  --mp-blanc:           #FFFFFF;
  --mp-erreur:          #B3261E;   /* erreurs de formulaire : 6,5:1 sur blanc */

  /* ── SURFACES ET TRAITS SUR FOND SOMBRE ──────────────────── */
  --mp-texte-nuit:      #93A6BC;   /* texte courant du pied de page */
  --mp-texte-sombre:    rgba(255,255,255,.78);
  --mp-trait-sombre:    rgba(255,255,255,.12);
  --mp-voile-sombre:    rgba(255,255,255,.08);
  --mp-verre:           rgba(255,255,255,.9);   /* en-tête translucide */

  /* ── TYPOGRAPHIE ─────────────────────────────────────────── */
  --mp-font-titre: "Manrope", system-ui, -apple-system, sans-serif;
  --mp-font-texte: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --mp-t-xs:   0.8125rem;
  --mp-t-sm:   0.9375rem;
  --mp-t-carte: 1rem;       /* texte secondaire des cartes et étapes (16 px) */
  --mp-t-base: 1.0625rem;
  --mp-t-lg:   1.1875rem;
  --mp-t-h3:   clamp(1.15rem, 1.6vw, 1.35rem);
  --mp-t-h2:   clamp(1.85rem, 3.3vw, 2.85rem);
  --mp-t-h1:   clamp(2.35rem, 4.6vw, 3.9rem);

  --mp-lh-titre: 1.12;
  --mp-lh-texte: 1.65;
  --mp-ls-titre: -0.025em;

  /* ── FORMES ──────────────────────────────────────────────── */
  --mp-r:      22px;
  --mp-r-sm:   14px;
  --mp-r-ico:  16px;
  --mp-r-pill: 999px;

  /* ── OMBRES ──────────────────────────────────────────────── */
  --mp-sh-1: 0 1px 2px rgba(15,33,54,.05), 0 8px 24px rgba(15,33,54,.05);
  --mp-sh-2: 0 2px 4px rgba(15,33,54,.05), 0 22px 50px rgba(20,62,109,.15);
  --mp-sh-btn: 0 8px 20px rgba(20,62,109,.26);
  --mp-sh-btn-hover: 0 12px 28px rgba(20,62,109,.34);
  --mp-sh-signal: 0 8px 20px rgba(0,156,149,.3);
  --mp-anneau:    0 0 0 4px rgba(20,62,109,.12);   /* focus des champs */

  /* ── RYTHME ──────────────────────────────────────────────── */
  --mp-gouttiere: clamp(1.25rem, 5vw, 3.5rem);
  --mp-max:       1280px;
  --mp-section:   clamp(4rem, 8vw, 7rem);
  --mp-gap:       1.5rem;

  /* ── MOUVEMENT ───────────────────────────────────────────── */
  --mp-ease:     cubic-bezier(.22,.61,.36,1);
  --mp-ease-pop: cubic-bezier(.34,1.3,.64,1);
  --mp-dur:      .25s;
}

/* ============================================================
   COMPOSANTS PARTAGÉS

   Ces classes portent ~60 % de l'identité visuelle. Les blocs les
   réutilisent au lieu de redéfinir leurs propres boutons, cartes
   et pastilles — c'est ce qui fera tomber les style.css de blocs
   de 300 à 100 lignes.

   Elles sont préfixées .mp- et n'entrent donc en collision avec
   aucune classe existante du thème. Rien ne change tant qu'un
   bloc ne les utilise pas.
   ============================================================ */

/* ── Conteneur et sections ───────────────────────────────── */
.mp-wrap{
  max-width: var(--mp-max);
  margin-inline: auto;
  padding-inline: var(--mp-gouttiere);
}
.mp-section{ padding-block: var(--mp-section) }
.mp-section--alt{ background: var(--mp-bleu-brume) }
.mp-section--sombre{ background: var(--mp-bleu-fonce); color: rgba(255,255,255,.78) }
.mp-section--sombre h2,
.mp-section--sombre h3{ color: var(--mp-blanc) }

/* ── Titres utilitaires ──────────────────────────────────── */
.mp-h1,.mp-h2,.mp-h3{
  font-family: var(--mp-font-titre);
  color: var(--mp-encre);
  line-height: var(--mp-lh-titre);
  letter-spacing: var(--mp-ls-titre);
  text-wrap: balance;
}
.mp-h1{ font-size: var(--mp-t-h1); font-weight: 800 }
.mp-h2{ font-size: var(--mp-t-h2); font-weight: 800 }
.mp-h3{ font-size: var(--mp-t-h3); font-weight: 700; letter-spacing:-.015em }

/* Convention /mot/ du thème : le fragment passe en bleu,
   surligné de turquoise. */
.mp-exergue{
  font-style: normal;
  color: var(--mp-bleu);
  position: relative;
  white-space: nowrap;
  isolation: isolate;   /* garde le surlignage (z-index:-1) au-dessus du fond de section */
}
@media (max-width:600px){ .mp-exergue{ white-space: normal } }

/* ── Contexte sombre ─────────────────────────────────────────
   .mp-sombre se pose sur toute section à fond bleu : les composants
   qui ont une variante sur fond sombre la prennent automatiquement. */
.mp-sombre{ color: var(--mp-texte-sombre) }
.mp-sombre .mp-exergue,
.mp-section--sombre .mp-exergue,
.mp-bande-bleue .mp-exergue,
.mp-degrade .mp-exergue{ color: var(--mp-blanc) }
.mp-sombre .mp-exergue::after,
.mp-section--sombre .mp-exergue::after,
.mp-bande-bleue .mp-exergue::after,
.mp-degrade .mp-exergue::after{ background: var(--mp-turquoise-vif); opacity: .45 }
.mp-exergue::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em;
  height:.16em; background: var(--mp-turquoise); opacity:.30;
  border-radius:2px; z-index:-1;
}
/* Mobile étroit : l'exergue peut passer à la ligne. Un ::after absolu
   s'étire alors du début du premier fragment à la fin du dernier et
   ne souligne qu'une partie de la dernière ligne. Le surlignage devient
   un fond dessiné ligne par ligne (box-decoration-break).            */
@media (max-width:600px){
  .mp-exergue::after{ content:none }
  .mp-exergue{
    --mp-exergue-trait: color-mix(in srgb, var(--mp-turquoise) 30%, transparent);
    background: linear-gradient(to top, transparent .06em, var(--mp-exergue-trait) .06em, var(--mp-exergue-trait) .22em, transparent .22em);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .mp-sombre .mp-exergue,
  .mp-section--sombre .mp-exergue,
  .mp-bande-bleue .mp-exergue,
  .mp-degrade .mp-exergue{ --mp-exergue-trait: color-mix(in srgb, var(--mp-turquoise-vif) 45%, transparent) }
}

/* ── Suréligne de section ────────────────────────────────── */
.mp-eyebrow{
  display:inline-block;
  font-family: var(--mp-font-texte);
  font-weight:600; font-size: var(--mp-t-xs);
  letter-spacing:.09em; text-transform:uppercase;
  color: var(--mp-turquoise-fonce);   /* 5,2:1 sur le voile ; le turquoise pur (3,05:1) échouait en AA */
  background: var(--mp-turquoise-voile);
  padding:.4rem .85rem;
  border-radius: var(--mp-r-pill);
  margin-bottom:1.1rem;
}
.mp-section--sombre .mp-eyebrow{
  background: rgba(47,199,190,.18);
  color: var(--mp-turquoise-pale);
}

/* ── Boutons ─────────────────────────────────────────────────
   RÈGLE : bouton BLEU sur fond clair, bouton TURQUOISE sur fond
   bleu. Jamais l'inverse. C'est ce qui garde la hiérarchie
   lisible sans avoir à y penser.                                */
.mp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family: var(--mp-font-texte); font-weight:600; font-size:1rem;
  padding:1rem 1.75rem;
  border:2px solid transparent; border-radius: var(--mp-r-pill);
  cursor:pointer; text-decoration:none;
  transition: transform var(--mp-dur) var(--mp-ease-pop),
              box-shadow var(--mp-dur) ease,
              background var(--mp-dur) ease,
              color var(--mp-dur) ease,
              border-color var(--mp-dur) ease;
}
.mp-btn:hover{ transform: translateY(-2px) }
.mp-btn svg{ flex:none; transition: transform var(--mp-dur) ease }
.mp-btn:hover svg{ transform: translateX(3px) }

.mp-btn--principal{ background: var(--mp-bleu); color:#fff; box-shadow: var(--mp-sh-btn) }
.mp-btn--principal:hover{ background: var(--mp-bleu-clair); box-shadow: var(--mp-sh-btn-hover); color:#fff }

.mp-btn--contour{ border-color: var(--mp-trait); color: var(--mp-encre); background:#fff }
.mp-btn--contour:hover{ border-color: var(--mp-bleu); color: var(--mp-bleu) }

/* Texte blanc sur turquoise foncé : 5,79:1 (AA). Le blanc sur #009C95 ne faisait
   que 3,39:1. Au survol, turquoise profond : 8,09:1. */
.mp-btn--signal{ background: var(--mp-turquoise-fonce); color:#fff; box-shadow: var(--mp-sh-signal) }
.mp-btn--signal:hover{ background: var(--mp-turquoise-profond); color:#fff }

/* Secondaire posé sur fond sombre (à côté d'un --signal) */
.mp-btn--contour-clair{ border-color: rgba(255,255,255,.5); color:#fff; background: transparent }
.mp-btn--contour-clair:hover{ border-color:#fff; background:#fff; color: var(--mp-bleu) }

.mp-btn--sm{ padding:.7rem 1.2rem; font-size: var(--mp-t-sm) }

/* ── Lien fléché ─────────────────────────────────────────── */
.mp-lien{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size: var(--mp-t-sm);
  color: var(--mp-bleu); text-decoration:none;
}
.mp-lien svg{ transition: transform var(--mp-dur) ease }
.mp-lien:hover{ color: var(--mp-turquoise-fonce) }   /* AA en petit corps */
.mp-lien:hover svg{ transform: translateX(4px) }

/* ── Carte ───────────────────────────────────────────────── */
.mp-carte{
  background:#fff;
  border:1px solid var(--mp-trait);
  border-radius: var(--mp-r);
  padding:1.9rem 1.65rem;
  transition: transform var(--mp-dur) ease,
              box-shadow var(--mp-dur) ease,
              border-color var(--mp-dur) ease;
}
.mp-carte:hover{ transform: translateY(-6px); box-shadow: var(--mp-sh-2); border-color: transparent }

/* Pastille d'icône : bleue au repos, turquoise au survol */
.mp-ico{
  width:54px; height:54px; border-radius: var(--mp-r-ico);
  background: var(--mp-bleu-voile); color: var(--mp-bleu);
  display:grid; place-items:center;
  transition: background var(--mp-dur) ease, color var(--mp-dur) ease;
}
.mp-ico svg{ stroke: currentColor }
.mp-carte:hover .mp-ico{ background: var(--mp-turquoise); color:#fff }

/* ── Chip ────────────────────────────────────────────────── */
.mp-chip{
  display:inline-block;
  font-size:.75rem; font-weight:600;
  color: var(--mp-bleu); background: var(--mp-bleu-voile);
  padding:.28rem .6rem; border-radius: var(--mp-r-pill);
}

/* Chip large : badges de secteurs (rs1/badges) */
.mp-chip--lg{ font-size: var(--mp-t-sm); padding:.6rem 1.15rem }

/* ── Rangée de logos clients ─────────────────────────────────
   Partagée par rs1/partners-band (accueil) et rs1/mnt-clients
   (Maintenance) : même taille, même disposition, même survol.
   Niveaux de gris à 55 %, couleurs au survol. Le mode « multiply »
   efface le fond blanc des logos non détourés (BM GNV, JPEG) sur un
   fond brume ; sur fond blanc il ne change rien.               */
.mp-logos{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap: clamp(1.75rem, 4vw, 3rem) clamp(2rem, 4.5vw, 3.75rem);
  list-style:none; margin:0; padding:0;
}
.mp-logos__item a{ display:block; line-height:0 }
.mp-logos__item img{
  display:block;
  width:auto; height: clamp(1.75rem, 3vw, 2.5rem); max-width:9.5rem;
  object-fit:contain;
  mix-blend-mode: multiply;
  filter: grayscale(1); opacity:.55;
  transition: filter var(--mp-dur) ease, opacity var(--mp-dur) ease;
}
.mp-logos__item:hover img,
.mp-logos__item a:focus-visible img{ filter:none; opacity:1 }

/* ── Coche de validation (toujours turquoise) ────────────── */
.mp-check{ display:flex; gap:.75rem; align-items:flex-start }
.mp-check svg{ flex:none; margin-top:.3rem }

/* ── Chiffre clé ─────────────────────────────────────────── */
.mp-kpi b{
  display:block;
  font-family: var(--mp-font-titre); font-weight:800;
  font-size: clamp(2.2rem, 4.2vw, 3.25rem);
  line-height:1; letter-spacing:-.03em;
  font-variant-numeric: tabular-nums;
  color: var(--mp-turquoise);
}
.mp-kpi span{ display:block; margin-top:.6rem; font-size: var(--mp-t-sm); color: var(--mp-gris) }
.mp-section--sombre .mp-kpi b,
.mp-bande-bleue .mp-kpi b,
.mp-sombre .mp-kpi b{ color: var(--mp-turquoise-vif) }
.mp-section--sombre .mp-kpi span,
.mp-bande-bleue .mp-kpi span,
.mp-sombre .mp-kpi span{ color: rgba(255,255,255,.82) }

/* Bande de chiffres sur fond bleu, avec voile turquoise */
.mp-bande-bleue{
  background: var(--mp-bleu); color:#fff;
  position:relative; overflow:hidden;
  padding-block: clamp(3rem,5vw,4.25rem);
}
.mp-bande-bleue::after{
  content:""; position:absolute; top:-45%; right:-8%;
  width:44rem; height:44rem;
  background: radial-gradient(circle, rgba(47,199,190,.20) 0%, rgba(47,199,190,0) 66%);
  pointer-events:none;
}
.mp-bande-bleue > *{ position:relative }

/* ── Séparateur turquoise sous titre centré ──────────────── */
.mp-titre-centre{ text-align:center; margin-inline:auto }
.mp-titre-centre h2::after,
.mp-titre-centre .mp-h2::after{
  content:""; display:block;
  width:56px; height:3px; margin:1.1rem auto 0;
  background: var(--mp-turquoise); border-radius:3px;
}

/* ── Dégradé de marque ───────────────────────────────────── */
.mp-degrade{
  background: linear-gradient(118deg,
    var(--mp-bleu-fonce) 0%,
    var(--mp-bleu) 52%,
    #0A6E86 88%,
    var(--mp-turquoise-fonce) 118%);
  color:#fff;
}

/* ── Champs de formulaire ────────────────────────────────── */
.mp-champ label{
  display:block; font-size: var(--mp-t-xs); font-weight:600;
  color: var(--mp-encre); margin-bottom:.4rem;
}
.mp-champ input,
.mp-champ select,
.mp-champ textarea{
  width:100%;
  font-family: var(--mp-font-texte); font-size: var(--mp-t-sm);
  color: var(--mp-encre);
  padding:.8rem 1rem;
  border:1.5px solid var(--mp-trait); border-radius: var(--mp-r-sm);
  background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mp-champ input:focus,
.mp-champ select:focus,
.mp-champ textarea:focus{
  outline:0;
  border-color: var(--mp-bleu);
  box-shadow: 0 0 0 4px rgba(20,62,109,.12);
}

/* ── Compléments d'échelle (lot B) ───────────────────────── */
:root{
  --mp-t-h2-sm:      clamp(1.5rem, 2.6vw, 2.1rem);   /* titres de sous-section */
  --mp-section-sm:   clamp(2.5rem, 5vw, 4rem);        /* sections empilées     */
  --mp-espace-bloc:  clamp(1.5rem, 4vw, 3rem);        /* bloc Spacer           */

  /* Voiles (lot C) */
  --mp-voile-turquoise: radial-gradient(circle, rgba(47,199,190,.18) 0%, rgba(47,199,190,0) 66%);

  /* Voiles des bandeaux photo (septembre 2026, 17/09) — dégradés concentrés
     derrière le bloc de texte, plus transparents ailleurs pour laisser lire
     la photo. Teinte unique --mp-bleu-nuit ; les pourcentages sont des
     opacités. Redéfinis à 960 px et 600 px : le recadrage de la photo et la
     place du texte changent (voir RAPPORT-REFONTE.md, « Voiles des heroes »,
     ratios de contraste mesurés). */
  --mp-voile-teinte: var(--mp-bleu-nuit);

  /* Bandeau à texte bas-gauche (rs1/mnt-hero) : ellipse dense sous le texte,
     léger fond d'ensemble, pied assombri pour les boutons. */
  --mp-voile-bloc:
    radial-gradient(ellipse 70% 62% at 28% 70%,
      color-mix(in srgb, var(--mp-voile-teinte) 80%, transparent) 0%,
      color-mix(in srgb, var(--mp-voile-teinte) 74%, transparent) 55%,
      transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--mp-voile-teinte) 30%, transparent) 0%, transparent 40%),
    linear-gradient(color-mix(in srgb, var(--mp-voile-teinte) 16%, transparent), color-mix(in srgb, var(--mp-voile-teinte) 16%, transparent));

  /* Hero de l'accueil (rs1/home-hero-v2) : même principe, plus couvrant
     (photo claire, bus blanc sous le titre). */
  --mp-voile-accueil:
    radial-gradient(ellipse 62% 60% at 26% 66%,
      color-mix(in srgb, var(--mp-voile-teinte) 90%, transparent) 0%,
      color-mix(in srgb, var(--mp-voile-teinte) 84%, transparent) 50%,
      transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--mp-voile-teinte) 50%, transparent) 0%, transparent 30%),
    linear-gradient(color-mix(in srgb, var(--mp-voile-teinte) 22%, transparent), color-mix(in srgb, var(--mp-voile-teinte) 22%, transparent));

}

/* Tablette : le texte occupe presque toute la largeur */
@media (max-width: 960px){
  :root{
    --mp-voile-bloc:
      linear-gradient(180deg,
        color-mix(in srgb, var(--mp-voile-teinte) 10%, transparent) 0%,
        color-mix(in srgb, var(--mp-voile-teinte) 68%, transparent) 42%,
        color-mix(in srgb, var(--mp-voile-teinte) 78%, transparent) 100%),
      linear-gradient(90deg, color-mix(in srgb, var(--mp-voile-teinte) 26%, transparent) 0%, color-mix(in srgb, var(--mp-voile-teinte) 6%, transparent) 100%);
    --mp-voile-accueil:
      radial-gradient(ellipse 95% 68% at 38% 70%,
        color-mix(in srgb, var(--mp-voile-teinte) 90%, transparent) 0%,
        color-mix(in srgb, var(--mp-voile-teinte) 84%, transparent) 55%,
        transparent 100%),
      linear-gradient(0deg, color-mix(in srgb, var(--mp-voile-teinte) 50%, transparent) 0%, transparent 30%),
      linear-gradient(color-mix(in srgb, var(--mp-voile-teinte) 22%, transparent), color-mix(in srgb, var(--mp-voile-teinte) 22%, transparent));
  }
}

/* Mobile étroit : le texte couvre presque tout le bandeau ; seul le haut reste léger */
@media (max-width: 600px){
  :root{
    --mp-voile-bloc: linear-gradient(180deg,
      color-mix(in srgb, var(--mp-voile-teinte) 38%, transparent) 0%,
      color-mix(in srgb, var(--mp-voile-teinte) 78%, transparent) 22%,
      color-mix(in srgb, var(--mp-voile-teinte) 82%, transparent) 100%);
    --mp-voile-accueil: linear-gradient(180deg,
      color-mix(in srgb, var(--mp-voile-teinte) 45%, transparent) 0%,
      color-mix(in srgb, var(--mp-voile-teinte) 84%, transparent) 13%,
      color-mix(in srgb, var(--mp-voile-teinte) 78%, transparent) 60%,
      color-mix(in srgb, var(--mp-voile-teinte) 84%, transparent) 100%);
  }
}

/* Suréligne sur n'importe quel fond sombre */
.mp-sombre .mp-eyebrow{
  background: rgba(47,199,190,.18);
  color: var(--mp-turquoise-pale);
}

/* Carte non cliquable : pas de soulèvement au survol */
.mp-carte--statique:hover{ transform:none; box-shadow:none; border-color: var(--mp-trait) }
.mp-carte--statique:hover .mp-ico{ background: var(--mp-bleu-voile); color: var(--mp-bleu) }

/* ── Bandeau de titre des pages internes ─────────────────────
   Partagé par rs1/page-header et rs1/hero. Fond bleu foncé avec
   voile turquoise, ou photo sous voile bleu (.mp-bandeau__media).
   Compense l'en-tête fixe via --header-height (mp-global.css). */
.mp-bandeau{
  position:relative; isolation:isolate; overflow:hidden;
  background: var(--mp-bleu-fonce);
  color: var(--mp-texte-sombre);
  padding-top: var(--header-height, 76px);
}
.mp-bandeau::after{
  content:""; position:absolute; top:-40%; right:-10%; z-index:-1;
  width:44rem; height:44rem;
  background: radial-gradient(circle, rgba(47,199,190,.18) 0%, rgba(47,199,190,0) 66%);
  pointer-events:none;
}
.mp-bandeau__media{ position:absolute; inset:0; z-index:-2 }
.mp-bandeau__media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center }
.mp-bandeau__media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(8,28,51,.94) 0%, rgba(13,42,75,.82) 45%, rgba(13,42,75,.48) 100%);
}
/* Voile concentré sur le bloc de texte (bas-gauche) : la photo reste lisible
   ailleurs. Remplace le voile renforcé uniforme (--voile-fort, 17/09). */
.mp-bandeau--voile-bloc .mp-bandeau__media::after{ background: var(--mp-voile-bloc) }
/* Hero Carrière en arrière-plan (rs1/careers-hero, présentation « fond »,
   21/09) : titre long sur plusieurs lignes, colonne de texte à gauche,
   groupe de personnes à droite. Dense jusqu'au bord de la colonne de texte
   (--mp-crh-bord, calculé par le bloc en longueur, pas en %), dégressif
   ensuite vers le groupe. Déclaré sur le bandeau et non sur :root :
   une propriété personnalisée résout ses var() là où elle est déclarée, et
   --mp-crh-bord n'existe que sur le bandeau. Ratios mesurés dans
   RAPPORT-REFONTE.md, « Hero Carrière ». */
.mp-bandeau--voile-carriere{
  --mp-voile-carriere:
    linear-gradient(90deg,
      color-mix(in srgb, var(--mp-voile-teinte) 88%, transparent) 0%,
      color-mix(in srgb, var(--mp-voile-teinte) 86%, transparent) calc(var(--mp-crh-bord, 60%) + 1.5rem),
      color-mix(in srgb, var(--mp-voile-teinte) 42%, transparent) calc(var(--mp-crh-bord, 60%) + 10rem),
      color-mix(in srgb, var(--mp-voile-teinte) 14%, transparent) calc(var(--mp-crh-bord, 60%) + 22rem),
      color-mix(in srgb, var(--mp-voile-teinte) 8%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--mp-voile-teinte) 40%, transparent) 0%, transparent 28%);
}
/* Mobile étroit : texte sur toute la hauteur, voile vertical dense */
@media (max-width: 600px){
  .mp-bandeau--voile-carriere{
    --mp-voile-carriere: linear-gradient(180deg,
      color-mix(in srgb, var(--mp-voile-teinte) 90%, transparent) 0%,
      color-mix(in srgb, var(--mp-voile-teinte) 86%, transparent) 70%,
      var(--mp-voile-teinte) 100%);
  }
}
.mp-bandeau--voile-carriere .mp-bandeau__media::after{ background: var(--mp-voile-carriere) }
/* Hero panoramique (rs1/gnv-hero, format « panoramique », page IRVE, 21/09) :
   photo sombre à gauche, sujet à droite. Dès 961 px, dégradé horizontal
   dense jusqu'au bord de la colonne de texte (--mp-gnvh-bord, calculé par le
   bloc) puis transparent sur le sujet, et pied fondu dans le bleu nuit.
   Jusqu'à 960 px, la photo est un bandeau au-dessus du texte : transparente
   en haut, dense à son pied où commencent le fil d'Ariane et la suréligne.
   Ratios mesurés dans RAPPORT-REFONTE.md, « Hero IRVE ». Déclaré sur le
   bandeau (var() résolus là où la propriété est déclarée). */
.mp-gnvh--panoramique{
  --mp-voile-panoramique:
    linear-gradient(90deg,
      color-mix(in srgb, var(--mp-voile-teinte) 78%, transparent) 0%,
      color-mix(in srgb, var(--mp-voile-teinte) 70%, transparent) calc(var(--mp-gnvh-bord, 55%) + 1rem),
      color-mix(in srgb, var(--mp-voile-teinte) 15%, transparent) calc(var(--mp-gnvh-bord, 55%) + 9rem),
      transparent 100%),
    linear-gradient(0deg, var(--mp-voile-teinte) 0%, color-mix(in srgb, var(--mp-voile-teinte) 60%, transparent) 14%, transparent 42%);
}
@media (max-width: 960px){
  .mp-gnvh--panoramique{
    --mp-voile-panoramique: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--mp-voile-teinte) 10%, transparent) 40%,
      color-mix(in srgb, var(--mp-voile-teinte) 85%, transparent) 85%,
      var(--mp-voile-teinte) 100%);
  }
}

.mp-bandeau__in{ padding-block: clamp(3.25rem,7vw,5.75rem) clamp(3rem,6vw,5rem) }
.mp-bandeau__titre{
  margin:0; max-width:22ch;
  font-family: var(--mp-font-titre); font-weight:800;
  font-size: var(--mp-t-h1);
  line-height: var(--mp-lh-titre); letter-spacing: var(--mp-ls-titre);
  color: var(--mp-blanc);
  text-wrap: balance;
}
.mp-bandeau__texte{
  margin:1.15rem 0 0; max-width:60ch;
  font-size: var(--mp-t-lg); line-height: var(--mp-lh-texte);
  color: var(--mp-texte-sombre);
}
.mp-bandeau__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem }
.mp-bandeau__preuves{
  display:flex; flex-wrap:wrap; gap:.6rem 1.75rem;
  list-style:none; margin:1.75rem 0 0; padding:0;
}
.mp-bandeau__preuves li{ font-weight:600; font-size: var(--mp-t-sm); color: var(--mp-blanc) }
.mp-bandeau__preuves svg{ color: var(--mp-turquoise-vif) }

.mp-bandeau--clair{ background: var(--mp-bleu-brume); color: var(--mp-texte); border-bottom:1px solid var(--mp-trait) }
.mp-bandeau--clair::after{ background: radial-gradient(circle, rgba(20,62,109,.10) 0%, rgba(20,62,109,0) 66%) }
.mp-bandeau--clair .mp-bandeau__titre{ color: var(--mp-encre) }
.mp-bandeau--clair .mp-bandeau__texte{ color: var(--mp-texte) }
.mp-bandeau--clair .mp-bandeau__preuves li{ color: var(--mp-encre) }
.mp-bandeau--clair .mp-bandeau__preuves svg{ color: var(--mp-turquoise) }

@media (max-width:600px){ .mp-bandeau__texte{ font-size: var(--mp-t-base) } }

/* ── Fil d'Ariane dans un bandeau (views/partials/fil-ariane.twig) ── */
.mp-ariane{ margin-bottom:1.25rem }
.mp-ariane .rank-math-breadcrumb{ max-width:none; margin:0; padding:0; text-align:left; font-size: var(--mp-t-xs); color: var(--mp-gris) }
.mp-sombre .mp-ariane .rank-math-breadcrumb{ color: var(--mp-texte-sombre) }
.mp-sombre .mp-ariane a{ --rs1-underline-color: var(--mp-turquoise-vif); color: var(--mp-blanc) }
.mp-sombre .mp-ariane a:hover{ color: var(--mp-turquoise-vif) }
.mp-sombre .mp-ariane .last{ color: var(--mp-texte-sombre) }

/* ============================================================
   MOUVEMENT
   Deux techniques seulement, appliquées partout à l'identique.
   ============================================================ */
.mp-rv{
  opacity:0; transform: translateY(24px);
  transition: opacity .6s var(--mp-ease), transform .6s var(--mp-ease);
}
.mp-rv.is-in{ opacity:1; transform:none }
.mp-rv[data-d="1"]{ transition-delay:.08s }
.mp-rv[data-d="2"]{ transition-delay:.16s }
.mp-rv[data-d="3"]{ transition-delay:.24s }

@media (prefers-reduced-motion: reduce){
  .mp-rv{ opacity:1; transform:none; transition:none }
  .mp-btn,.mp-carte,.mp-ico,.mp-lien,.mp-logos__item img{ transition:none }
}

/* ============================================================
   RESPONSIVE
   Point de rupture principal : 960px (convention du thème).
   ============================================================ */
@media (max-width:1100px){
  :root{ --mp-gap: 1.25rem }
}
@media (max-width:960px){
  :root{ --mp-r: 18px; --mp-section: clamp(3rem,7vw,4.5rem) }
  .mp-btn{ padding:.9rem 1.5rem }
}
@media (max-width:600px){
  .mp-btn{ width:100% }
  .mp-carte{ padding:1.5rem 1.35rem }
}

/* ── Confirmation d'envoi de formulaire ──────────────────────
   Message « même page » de Fluent Forms (Settings → Confirmation →
   Same Page, formulaire masqué) : remplace le formulaire sur place.
   Coche turquoise sur voile turquoise, étapes numérotées, lien de
   poursuite de visite. Utilisé par Contact et les pages solution. */
.mp-confirmation{
  display:grid; justify-items:start; gap:1.1rem;
  color: var(--mp-texte);
}
.mp-confirmation__coche{
  display:grid; place-items:center;
  width:4rem; height:4rem; border-radius: var(--mp-r-pill);
  background: var(--mp-turquoise-voile); color: var(--mp-turquoise);
}
.mp-confirmation__titre{
  margin:0;
  font-family: var(--mp-font-titre); font-weight:800;
  font-size: var(--mp-t-h2-sm); line-height: var(--mp-lh-titre);
  letter-spacing: var(--mp-ls-titre); color: var(--mp-encre);
}
.mp-confirmation__intro{ margin:0; font-size: var(--mp-t-base); line-height: var(--mp-lh-texte) }
.mp-confirmation__etapes{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.85rem; counter-reset: mp-etape;
}
/* Pas de grille sur le li : texte, lien et ponctuation resteraient
   des cellules séparées (le lien tomberait dans la colonne du numéro). */
.mp-confirmation__etapes li{
  counter-increment: mp-etape;
  position:relative; min-height:2rem; padding-left:2.85rem;
  font-size: var(--mp-t-base); line-height: var(--mp-lh-texte);
}
.mp-confirmation__etapes li::before{
  content: counter(mp-etape);
  position:absolute; left:0; top:0;
  display:grid; place-items:center;
  width:2rem; height:2rem; border-radius: var(--mp-r-pill);
  background: var(--mp-bleu-voile); color: var(--mp-bleu);
  font-weight:700; font-size: var(--mp-t-sm); line-height:1;
}
.mp-confirmation__etapes a{
  color: var(--mp-bleu); font-weight:600;
  text-decoration: underline; text-underline-offset: 2px;
  overflow-wrap:anywhere;
}
.mp-confirmation__etapes a:hover{ color: var(--mp-turquoise-fonce) }
.mp-confirmation .mp-lien{ margin-top:.35rem }