/* ==========================================================================
   STAM ITAD — css/styles.css
   Feuille unique du site. Ordre : polices auto-hébergées, jetons, base,
   mise en page, typographie, composants, en-tête, pied, sections, responsive.
   ========================================================================== */

/* ---------- 0. POLICES AUTO-HÉBERGÉES --------------------------------- */

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/98895e1c-7ac7-46dc-82bf-8fe185d6b124.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/f7b29788-d84e-4cad-8200-3fef290a3789.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/98895e1c-7ac7-46dc-82bf-8fe185d6b124.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/f7b29788-d84e-4cad-8200-3fef290a3789.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/98895e1c-7ac7-46dc-82bf-8fe185d6b124.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/f7b29788-d84e-4cad-8200-3fef290a3789.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  src: url("../assets/fonts/material-symbols-sous-ensemble.woff2?v=c38615f9") format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   STAM ITAD — feuille de style de production
   1. Jetons · 2. Base · 3. Mise en page · 4. Typographie · 5. Composants
   6. En-tête · 7. Pied de page · 8. Sections · 9. Responsive
   ========================================================================== */

/* ---------- 1. JETONS ---------------------------------------------------- */
:root {
  /* couleurs de marque */
  --bleu:        #008FCB;   /* titres, gros éléments, aplats */
  --bleu-f:      #0072A3;   /* petits textes bleus (<18px) et survols */
  --bleu-c:      #35B4E8;
  --bleu-cc:     #5FC8F2;
  --vert:        #80BA51;
  --vert-h:      #93CB60;
  --vert-t:      #4E7A28;   /* vert utilisé comme couleur de texte */
  --vert-tc:     #9BD16E;
  --vert-hero:   #B2E08A;

  /* neutres */
  --encre:       #1A2B36;   /* titres */
  --texte:       #4A6B80;   /* texte courant */
  --label:       #6E8798;   /* petits labels mono */
  --note:        #7E93A2;   /* notes de maquette */
  --inactif:     #B9C7D1;
  --erreur:      #C0392B;

  /* fonds et bordures */
  --clair:       #DCF6FF;   /* fond alterné, encarts, placeholders */
  --survol:      #EFF9FE;
  --survol-2:    #F2FBFF;
  --accent:      #C9EEFC;
  --accent-h:    #B4E5FA;
  --bord:        #BFE4F5;   /* bordure fine */
  --bord-fort:   #9CCFE4;   /* bordure marquée */
  --bord-doux:   #D3EFFB;   /* séparateur interne */

  /* typographie */
  /* CDC : une seule famille, deux graisses (400 regular / 700 bold) */
  --rb: Roboto, Helvetica, Arial, sans-serif;
  --gt: var(--rb);   /* titres, chiffres, boutons — toujours en 700 */
  --mn: var(--rb);   /* libelles techniques — 400, petites capitales espacees */

  /* gabarit */
  --largeur:   1280px;
  --gouttiere: 40px;
  --entete:    82px;
  /* espacement vertical unique de toutes les sections */
  --section-y: 96px;
  /* animation : une seule courbe de reference, quatre paliers de duree */
  --ea: cubic-bezier(.2,.7,.2,1);
  --d1: 200ms;   /* micro-interactions : survol, flechage */
  --d2: 300ms;   /* changements d'etat : onglets, accordeons, panneaux */
  --d3: 450ms;   /* revelations a l'entree dans l'ecran */
  --d4: 600ms;   /* sequences longues */

  --r-btn: 2px;
  --r-carte: 3px;
}

/* ---------- 2. BASE ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* remise à zéro des marges : tout l'espacement est porté par les composants */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, fieldset { margin: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }   /* prime sur les display:flex/grid des composants */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       scroll-padding-top: calc(var(--entete) + 16px); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: #fff;
  font: 400 16px/1.6 var(--rb);
  color: var(--encre);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  text-wrap: pretty;
  overflow-x: clip;
}

img, video, svg { max-width: 100%; height: auto; }
sub { font-size: .72em; line-height: 0; vertical-align: -.22em; }
img, video { display: block; }

a { color: var(--bleu-f); text-decoration: none; }
a:hover { color: var(--bleu); }

button, input, select, textarea { font-family: var(--rb); font-size: 100%; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--bleu-f); outline-offset: 2px; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bleu); color: #fff; padding: 12px 18px;
  font: 700 14px var(--gt); border-radius: var(--r-btn);
}
.saut-contenu { min-height: 44px; display: inline-flex; align-items: center; }
.saut-contenu:focus { left: 12px; top: 12px; color: #fff; }

.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;
}

/* icônes Material Symbols (ligatures) */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'opsz' 24;
  flex: none;
}

/* animations */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes pulse    { 0% { transform: scale(.85); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes defile   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes apparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* révélation au défilement */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ea), transform .6s var(--ea); }
[data-reveal].vu { opacity: 1; transform: none; }
[data-reveal][data-delai="1"] { transition-delay: .08s; }
[data-reveal][data-delai="2"] { transition-delay: .16s; }
[data-reveal][data-delai="3"] { transition-delay: .24s; }

/* ---------- 3. MISE EN PAGE --------------------------------------------- */
.container { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }

/* Une seule échelle verticale. Les variantes historiques --sm / --xs / --haut /
   --chiffres sont conservées comme alias pour ne pas toucher au balisage, mais
   elles produisent toutes le même espacement. Aucun contenu ne doit toucher
   le bord haut ou bas d'une section. */
.section,
.section--sm,
.section--xs,
.section--haut,
.section--chiffres { padding: var(--section-y) 0; }
.section--clair { background: var(--clair); }
.section--bord-bas { border-bottom: 1px solid var(--bord); }
.section--bord-haut { border-top: 1px solid var(--bord); }
/* filet de rythme entre deux sections blanches consécutives */
.section--filet { border-top: 1px solid var(--bord); }
/* alternance de l'accueil : dès que « Preuve » ou « Témoignages » se rend, les fonds d'origine reviennent */
#contenu:has(> section:is([data-config="preuvesValidees"], [data-config="temoignagesValides"]):not([hidden])) #rse { background: var(--clair); }
#contenu:has(> section:is([data-config="preuvesValidees"], [data-config="temoignagesValides"]):not([hidden])) .accueil-faq { background: none; }
#contenu:has(> section:is([data-config="preuvesValidees"], [data-config="temoignagesValides"]):not([hidden])) .accueil-blog { border-top: 1px solid var(--bord); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid--serre { gap: 24px; }
.grid--large { gap: 56px; }

/* grille à filets : cellules blanches séparées par 1px de bordure */
.grid-filet {
  display: grid; gap: 1px; background: var(--bord);
  border: 1px solid var(--bord); border-radius: var(--r-carte); overflow: hidden;
}
.grid-filet > * { background: #fff; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.duo--texte-large { grid-template-columns: 1.1fr .9fr; }
.duo--media-large { grid-template-columns: .9fr 1.1fr; }
.duo--115 { grid-template-columns: 1.15fr .85fr; }
.duo--105 { grid-template-columns: 1.05fr .95fr; }
.duo--085 { grid-template-columns: .85fr 1.15fr; gap: 56px; }
.duo--08  { grid-template-columns: .8fr 1.2fr; gap: 56px; }
.duo--072 { grid-template-columns: .72fr 1.28fr; gap: 48px; }
.duo--11  { grid-template-columns: 1.1fr .9fr; }
.duo--125 { grid-template-columns: 1.25fr .75fr; gap: 40px; }
.duo--haut { align-items: start; }
.duo--bas { align-items: end; }
/* sous 1200 px, le widget d'orientation (pour-qui) dépasse 700 px de haut : aligné en bas,
   le titre de page tombait sous la ligne de flottaison et laissait une moitié gauche vide */
@media (min-width: 768px) and (max-width: 1199px) {
  .duo--bas:has([data-orientation]) { align-items: start; }
}

/* un enfant de grille ne doit jamais imposer sa largeur minimale au parent */
.grid > *, .duo > *, .grid-filet > *, .chiffres > *, .expertises > *,
.cycle > *, .explorateur > *, .contact__grille > * { min-width: 0; }

.bandeau-titre {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; margin-bottom: 44px;
}
.bandeau-titre--centre { display: block; text-align: center; max-width: 720px; margin: 0 auto 48px; }

.pile { display: flex; flex-direction: column; }
.pile--10 { gap: 10px; } .pile--12 { gap: 12px; } .pile--16 { gap: 16px; }
.rangee { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- 4. TYPOGRAPHIE ---------------------------------------------- */
.h1, .h2, .h3, .h4 { font-family: var(--gt); color: var(--encre); margin: 0; letter-spacing: -.02em; }
.h1 { font-weight: 700; font-size: 56px; line-height: 1.08; }
.h1--profil { font-size: 54px; line-height: 1.09; }
.h2 { font-weight: 700; font-size: 46px; line-height: 1.12; }
.h2--lg { font-size: 50px; line-height: 1.1; }
.h2--sm { font-size: 42px; }
.h2--xs { font-size: 38px; line-height: 1.17; }
.h3 { font-weight: 700; font-size: 36px; line-height: 1.17; letter-spacing: -.015em; }
.h4 { font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: 0; }

.lead  { font: 400 18px/1.7 var(--rb); color: var(--texte); margin: 0; }
.texte { font: 400 17px/1.7 var(--rb); color: var(--texte); margin: 0; }
.texte--sm { font-size: 16px; }
.texte--xs { font-size: 15px; line-height: 1.65; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 400 11px var(--mn); letter-spacing: .18em; text-transform: uppercase;
  color: var(--bleu-f); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--bleu); flex: none; }
.eyebrow--vert { color: var(--vert-t); }
.eyebrow--vert::before { background: var(--vert); }
.eyebrow--nu::before { display: none; }

.label {
  font: 400 11px var(--mn); letter-spacing: .14em; text-transform: uppercase;
  color: var(--label); margin-bottom: 10px;
}
.note { font: 400 12.5px/1.7 var(--mn); letter-spacing: .01em; color: var(--note); margin: 0; }
.note--filet { border-left: 2px solid var(--bord-fort); padding-left: 14px; }
.mono { font: 400 12px var(--mn); letter-spacing: .02em; color: var(--note); }

.fil-ariane { font: 400 12px var(--mn); color: var(--note); margin-bottom: 30px; }
.fil-ariane a { color: var(--note); }
.fil-ariane a:hover { color: var(--bleu-f); }

.valeur-cle { font: 700 58px/1 var(--gt); letter-spacing: -.03em; color: var(--bleu); }
.valeur-cle span { font-size: 30px; }
.valeur-cle--vert { color: var(--vert-t); }
.valeur-cle--encre { color: var(--encre); }
.trait-cle { height: 2px; width: 44px; background: var(--bleu); margin: 16px 0 14px; }
.trait-cle--vert { background: var(--vert); }
.trait-cle--encre { background: var(--encre); }

/* ---------- 5. COMPOSANTS ------------------------------------------------ */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: var(--r-btn); cursor: pointer; text-decoration: none;
  font: 700 15px var(--gt); letter-spacing: .02em;
  padding: 19px 30px; min-height: 44px;
  transition: color .2s ease, border-color .2s ease,
              transform .18s var(--ea), box-shadow .18s ease;
}
/* balayage de remplissage : uniquement transform, donc sans reflow */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s var(--ea);
}
.btn .fleche { font-size: 13px; transition: transform .25s var(--ea); }

.btn:hover:not([disabled]):not([aria-busy="true"])::before { transform: scaleX(1); }
.btn:hover:not([disabled]):not([aria-busy="true"]) {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(26,43,54,.45);
}
.btn:hover:not([disabled]):not([aria-busy="true"]) .fleche { transform: translateX(4px); }
.btn:active:not([disabled]):not([aria-busy="true"]) {
  transform: scale(.98); transition-duration: .08s; box-shadow: none;
}
.btn:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* principal : bleu marque, assombri au survol */
.btn--primaire { background: var(--bleu-f); color: #fff; }
.btn--primaire::before { background: #005E86; }
.btn--primaire:hover { color: #fff; }

/* secondaire : bleu clair borde, se remplit de bleu au survol */
.btn--secondaire {
  background: var(--clair); color: var(--bleu-f); border: 1px solid var(--bord-fort);
}
.btn--secondaire::before { background: var(--bleu-f); }
.btn--secondaire:hover { color: #fff; border-color: var(--bleu-f); }

/* sur fond teinte, le secondaire passe en blanc borde de bleu pour rester lisible */
.hero__contenu .btn--secondaire,
.section--clair .btn--secondaire, .hero-page .btn--secondaire, .pied .btn--secondaire,
.cta-final .btn--secondaire, .capture .btn--secondaire, .encart-cta .btn--secondaire,
.rse__encart .btn--secondaire, .famille-detail .btn--secondaire,
.explorateur__livrable .btn--secondaire, .megamenu__encart .btn--secondaire,
.orientation__resultat .btn--secondaire, .processus__bloc--clair .btn--secondaire,
.article__cta .btn--secondaire, .barre-mobile .btn--secondaire {
  background: #fff; border-color: var(--bleu);
}

/* vert : meme mouvement, teinte propre */
.btn--vert { background: var(--vert); color: var(--encre); }
.btn--vert::before { background: var(--vert-h); }
.btn--vert:hover { color: var(--encre); }

/* fantome, sur le voile sombre du hero */
.btn--fantome { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.42); }
.btn--fantome::before { background: rgba(255,255,255,.16); }
.btn--fantome:hover { border-color: #fff; color: #fff; }

.btn--sm { font-size: 14px; padding: 15px 22px; }
.btn--xs { font-size: 14px; padding: 13px 18px; }
.btn--bloc { width: 100%; }

/* etats desactive et « Envoi en cours… » : ni balayage, ni elevation */
.btn[disabled], .btn[aria-disabled="true"] { background: var(--inactif); color: #fff; cursor: not-allowed; }
.btn[disabled]::before, .btn[aria-disabled="true"]::before, .btn[aria-busy="true"]::before { content: none; }
.btn[aria-busy="true"] { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  /* couleurs conservees, mouvement supprime */
  .btn, .btn::before, .btn .fleche { transition: none; }
  .btn:hover:not([disabled]):not([aria-busy="true"]) { transform: none; box-shadow: none; }
  .btn:hover:not([disabled]):not([aria-busy="true"]) .fleche { transform: none; }
  .btn:active:not([disabled]) { transform: none; }
}

.lien-fleche {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 700 15px var(--gt); color: var(--bleu-f); text-decoration: none;
  min-height: 44px;
}
.lien-fleche:hover { color: var(--bleu); }
.lien-fleche .fleche { font-size: 13px; }

.card {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
}
.card--clair { background: #fff; }
.card--pad { padding: 30px 32px; }
.card--pad-lg { padding: 40px 44px; }
.card--lien { display: flex; flex-direction: column; text-align: left; overflow: hidden; text-decoration: none; }
.card--lien:hover { border-color: var(--bleu); }
.card__corps { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

/* emplacements visuels à fournir — style unique */
.ph {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  font: 400 12px/1.6 var(--mn); color: var(--note);
}
.ph .ms { font-size: 40px; color: var(--bord-fort); }
.ph--16-9 { aspect-ratio: 16/9; }
.ph--16-11 { aspect-ratio: 16/11; }
.ph--4-3 { aspect-ratio: 4/3; }
.ph--carre { aspect-ratio: 1; }
.ph--125 { aspect-ratio: 1.25; }
.ph--13 { aspect-ratio: 1.3; }
.ph--media { border: 0; border-bottom: 1px solid var(--bord); border-radius: 0; background: #fff; }
.ph--pointille { border: 1px dashed var(--bord-fort); align-items: flex-start; text-align: left; padding: 20px; }
.ph--logo { height: 78px; padding: 8px; }

/* visuels photographiques livres — meme geometrie que les emplacements .ph
   qu'ils remplacent, l'image est cadree en cover sans deformation. */
.visuel { margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); }
.visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visuel--16-9  { aspect-ratio: 16/9; }
.visuel--16-11 { aspect-ratio: 16/11; }
.visuel--3-2   { aspect-ratio: 3/2; }
.visuel--carre { aspect-ratio: 1; }
.visuel--125   { aspect-ratio: 1.25; }
/* image posee en tete de carte : pas de cadre ni d'arrondi propre */
.visuel--media { border: 0; border-bottom: 1px solid var(--bord); border-radius: 0; }
/* schemas et infographies : lisibles entierement, donc jamais rognes */
.visuel--schema img { object-fit: contain; }
/* sujets dont le haut de l'image porte l'information (visages, titres) */
.visuel--haut img { object-position: 50% 22%; }

/* logiciels d'effacement — logos editeurs, distincts des certifications */
.logiciels { margin-top: 26px; }
.logiciels__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.logiciels__logo {
  display: flex; align-items: center; justify-content: center;
  height: 58px; min-width: 130px; padding: 10px 18px;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-btn);
}
.logiciels__logo img { max-height: 30px; width: auto; height: auto; display: block; }

.puce-liste { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.puce {
  display: flex; gap: 13px; align-items: flex-start;
  font: 400 16px/1.6 var(--rb); color: var(--texte);
}
.puce::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bleu); margin-top: 9px; flex: none;
}
.puce--verte::before { background: var(--vert); }
.puce--sm { font-size: 15px; }

.jeton {
  font: 400 14px var(--rb); color: var(--texte);
  border: 1px solid var(--bord); border-radius: var(--r-btn); padding: 9px 14px;
}

.badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(128,186,81,.14); border-radius: var(--r-btn); padding: 8px 13px;
  font: 400 11px var(--mn); letter-spacing: .16em; text-transform: uppercase;
  color: #3E6320;
}

.pastille {
  width: 40px; height: 40px; border-radius: 8px; background: var(--clair);
  border: 1px solid var(--bord); display: flex; align-items: center;
  justify-content: center; flex: none;
}
.pastille .ms { font-size: 22px; color: var(--bleu); }

/* accordéons « En savoir plus » */
.deplier {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 700 14px var(--gt); color: var(--bleu-f); min-height: 44px;
}
.deplier:hover { color: var(--bleu); }
.deplier .signe { font: 400 16px var(--rb); }
.deplie {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--d2) var(--ea),
              margin-top var(--d2) var(--ea), padding-top var(--d2) var(--ea),
              border-color var(--d2) var(--ea), visibility 0s linear var(--d2);
}
.deplie > *, .deplie .accord__corps { min-height: 0; overflow: hidden; }
.deplie.ouvert {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows var(--d2) var(--ea),
              margin-top var(--d2) var(--ea), padding-top var(--d2) var(--ea),
              border-color var(--d2) var(--ea), visibility 0s;
}
.texte-deplie {
  font: 400 16px/1.7 var(--rb); color: var(--texte); margin: 0 0 12px;
  padding-left: 14px; border-left: 2px solid var(--bord-fort);
}

/* accordéon FAQ */
.faq { border: 1px solid var(--bord); border-radius: var(--r-carte); background: #fff; }
.faq__item { border-bottom: 1px solid var(--bord); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 26px 30px; font: 700 18px/1.4 var(--gt); color: var(--encre);
}
.faq__q .signe { font: 400 22px var(--rb); color: var(--bleu-f); flex: none; }
.faq__r { padding: 0 30px 28px; font: 400 16px/1.7 var(--rb); color: var(--texte); max-width: 700px; }

/* onglets */
.onglets { display: flex; gap: 8px; flex-wrap: wrap; }
.onglet {
  background: #fff; color: var(--texte); border: 1px solid var(--bord);
  border-radius: var(--r-btn); cursor: pointer; font: 400 14px var(--gt);
  padding: 11px 15px; min-height: 44px;
}
.onglet[aria-selected="true"], .onglet.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }

/* champs de formulaire */
.champ { display: block; }
.champ__label { display: block; font: 400 13px var(--mn); color: var(--label); margin-bottom: 8px; }
.champ__input, .champ__select, .champ__zone {
  width: 100%; background: #fff; color: var(--encre);
  border: 1px solid var(--bord); border-radius: var(--r-btn);
  padding: 15px 16px; font: 400 15px var(--rb); min-height: 44px;
}
.champ__input { text-overflow: ellipsis; } /* placeholder long coupé proprement sur petit écran */
.champ__zone { line-height: 1.6; resize: vertical; }
.champ__input:focus, .champ__select:focus, .champ__zone:focus { border-color: var(--bleu); outline: none; }
.champ__input[aria-invalid="true"] { border-color: var(--erreur); }
.champ__erreur { font: 400 13px var(--rb); color: var(--erreur); margin-top: 7px; }

/* ---------- 5b. UTILITAIRES D'ESPACEMENT --------------------------------- */
/* échelle unique, employée à la place des marges en ligne */
.mb-0 { margin-bottom: 0px; }
.mb-4 { margin-bottom: 4px; }
.mb-5 { margin-bottom: 5px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }
.mb-24 { margin-bottom: 24px; }
.mb-26 { margin-bottom: 26px; }
.mb-28 { margin-bottom: 28px; }
.mb-30 { margin-bottom: 30px; }
.mb-32 { margin-bottom: 32px; }
.mb-34 { margin-bottom: 34px; }
.mb-36 { margin-bottom: 36px; }
.mb-38 { margin-bottom: 38px; }
.mb-40 { margin-bottom: 40px; }
.mb-44 { margin-bottom: 44px; }
.mb-48 { margin-bottom: 48px; }
.mb-56 { margin-bottom: 56px; }
.mt-0 { margin-top: 0px; }
.mt-4 { margin-top: 4px; }
.mt-5 { margin-top: 5px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-26 { margin-top: 26px; }
.mt-28 { margin-top: 28px; }
.mt-30 { margin-top: 30px; }
.mt-32 { margin-top: 32px; }
.mt-34 { margin-top: 34px; }
.mt-36 { margin-top: 36px; }
.mt-38 { margin-top: 38px; }
.mt-40 { margin-top: 40px; }
.mt-44 { margin-top: 44px; }
.mt-48 { margin-top: 48px; }
.mt-56 { margin-top: 56px; }
.mw-320 { max-width: 320px; }
.mw-340 { max-width: 340px; }
.mw-380 { max-width: 380px; }
.mw-400 { max-width: 400px; }
.mw-420 { max-width: 420px; }
.mw-440 { max-width: 440px; }
.mw-540 { max-width: 540px; }
.mw-600 { max-width: 600px; }
.mw-620 { max-width: 620px; }
.mw-640 { max-width: 640px; }
.mw-660 { max-width: 660px; }
.mw-680 { max-width: 680px; }
.mw-720 { max-width: 720px; }
.mw-760 { max-width: 760px; }
.mw-820 { max-width: 820px; }
.mw-840 { max-width: 840px; }
.mw-900 { max-width: 900px; }
.flex-1 { flex: 1; }
.txt-centre { text-align: center; }
.bleu-f { color: var(--bleu-f); }
.vert-t { color: var(--vert-t); }
.coupe-mot { word-break: break-all; }

/* ---------- 6. EN-TÊTE --------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
}
.entete__barre {
  max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere);
  height: var(--entete); display: flex; align-items: center; gap: 30px;
}
.entete__logo { display: flex; align-items: center; flex: none; min-height: 44px; }
.entete__logo img { height: 44px; width: auto; }

.nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav__lien, .nav__bouton {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; text-decoration: none;
  font: 400 15px var(--gt); color: var(--encre);
  padding: 10px 13px; border-radius: var(--r-btn); min-height: 44px;
}
.nav__lien:hover, .nav__bouton:hover { color: var(--bleu); }
.nav__lien[aria-current="page"] { color: var(--bleu); }
.nav__chevron { font-size: 8px; color: var(--label); transition: transform .18s ease; }
.nav__bouton[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.entete__actions { display: flex; align-items: center; gap: 14px; flex: none; }
.entete__rappel {
  background: none; border: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; font: 400 14px var(--rb); color: var(--texte);
  padding: 10px 4px; min-height: 44px;
}
.entete__rappel:hover { color: var(--bleu-f); }
.entete__cta { font-size: 14px; padding: 15px 22px; }
.nav__lien, .nav__bouton { white-space: nowrap; }
/* 1024–1099 px : les libellés passaient sur deux lignes (« Pour qui / ? ») */
@media (min-width: 1024px) and (max-width: 1099px) {
  .entete__barre { gap: 16px; }
  .nav__lien, .nav__bouton { padding-left: 8px; padding-right: 8px; }
}

/* méga-menus (desktop) */
.megamenu {
  position: absolute; left: 0; right: 0; top: var(--entete);
  background: #fff; border-bottom: 1px solid var(--bord);
  box-shadow: 0 26px 44px -26px rgba(26,43,54,.18);
  animation: apparait .16s ease both;
}
.megamenu[hidden] { display: none; }
.megamenu__grille {
  max-width: var(--largeur); margin: 0 auto; padding: 38px var(--gouttiere) 44px;
  display: grid; gap: 44px;
}
.megamenu__grille--solutions { grid-template-columns: 1.2fr 1fr 1fr .9fr; }
.megamenu__grille--profils { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.megamenu__titre {
  font: 400 11px var(--mn); letter-spacing: .16em; text-transform: uppercase;
  color: var(--label); margin-bottom: 18px;
}
.megamenu__liste { display: flex; flex-direction: column; }
.megamenu__lien {
  text-align: left; text-decoration: none; padding: 9px 0;
  font: 400 16px var(--gt); color: var(--encre);
}
.megamenu__lien:hover { color: var(--bleu); }
.megamenu__lien--sec { padding: 7px 0; font: 400 15px var(--rb); color: var(--texte); }
.megamenu__jetons { display: flex; flex-wrap: wrap; gap: 7px; }
.megamenu__jeton {
  background: var(--clair); border: 1px solid var(--bord); border-radius: var(--r-btn);
  padding: 8px 11px; font: 400 13px var(--rb); color: var(--texte); text-decoration: none;
}
.megamenu__jeton:hover { border-color: var(--bleu); color: var(--bleu-f); }
.megamenu__encart {
  background: var(--clair); border: 1px solid var(--bord);
  border-radius: var(--r-carte); padding: 26px;
}
.megamenu__carte {
  display: block; text-align: left; text-decoration: none;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 24px;
}
.megamenu__carte:hover { border-color: var(--bleu); background: var(--survol); }
.megamenu__carte--accent { background: var(--clair); }
.megamenu__carte--accent:hover { background: #EAF7FE; }
.megamenu__num { font: 400 11px var(--mn); color: var(--bleu-f); margin-bottom: 10px; }
.megamenu__nom { font: 700 18px var(--gt); color: var(--encre); margin-bottom: 8px; }
.megamenu__carte--accent .megamenu__nom { color: var(--bleu); }
.megamenu__desc { font: 400 14px/1.6 var(--rb); color: var(--texte); }

/* burger (< 1024px) */
.burger {
  display: none; width: 46px; height: 46px; flex: none;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-btn); cursor: pointer;
}
.burger__trait { display: block; width: 20px; height: 2px; background: var(--encre); border-radius: 2px; position: relative; transition: transform .2s ease, background .2s ease; }
.burger__trait::before, .burger__trait::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--encre); border-radius: 2px; transition: transform .2s ease, top .2s ease; }
.burger__trait::before { top: -6px; }
.burger__trait::after  { top: 6px; }
.burger[aria-expanded="true"] .burger__trait { background: transparent; }
.burger[aria-expanded="true"] .burger__trait::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait::after  { top: 0; transform: rotate(-45deg); }

/* Le panneau ne couvre jamais toute la largeur : la bande de voile restante
   est la zone « toucher hors du panneau » qui referme le menu. Son haut suit
   le bas réel de l'en-tête (qui se compacte au défilement). */
.panneau {
  position: fixed; top: var(--panneau-haut, var(--entete)); right: 0; bottom: 0;
  width: min(420px, 86vw); z-index: 90;
  display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid var(--bord);
  box-shadow: -20px 0 44px -28px rgba(26,43,54,.5);
}
.panneau[hidden] { display: none; }
.panneau__defile {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 8px 20px 20px;
}
.voile-menu {
  position: fixed; top: var(--panneau-haut, var(--entete)); left: 0; right: 0; bottom: 0;
  background: rgba(26,43,54,.42); z-index: 85;
}
.voile-menu[hidden] { display: none; }
.panneau__lien {
  display: block; text-decoration: none; padding: 15px 4px;
  font: 400 17px var(--gt); color: var(--encre);
  border-bottom: 1px solid var(--bord-doux); min-height: 44px;
}
.panneau__bouton {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: none; border: 0; border-bottom: 1px solid var(--bord-doux);
  padding: 15px 4px; font: 400 17px var(--gt); color: var(--encre); cursor: pointer; min-height: 44px;
}
.panneau__bouton .signe { font: 400 20px var(--rb); color: var(--bleu-f); }
.panneau__tiroir { display: none; padding: 6px 0 14px 14px; border-bottom: 1px solid var(--bord-doux); }
.panneau__tiroir.ouvert { display: block; }
.panneau__tiroir a {
  display: block; padding: 11px 0; font: 400 15px var(--rb);
  color: var(--texte); text-decoration: none; min-height: 44px;
}
.panneau__tiroir a:hover { color: var(--bleu-f); }
/* les deux CTA restent visibles quel que soit l'état des sous-menus */
.panneau__pied {
  flex: none; display: flex; flex-direction: column; gap: 10px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bord); background: #fff;
}

/* ---------- 7. PIED DE PAGE --------------------------------------------- */
.pied { background: var(--clair); padding: 64px 0; }   /* le pied garde son propre rythme */
.pied__grille {
  display: grid; grid-template-columns: 1.35fr .75fr .75fr 1.15fr; gap: 48px;
  padding-bottom: 52px; border-bottom: 1px solid var(--bord);
}
.pied__logo {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
  padding: 12px 16px; display: inline-block; margin-bottom: 20px;
}
.pied__logo img { height: 34px; width: auto; }
.pied__texte { font: 400 15px/1.7 var(--rb); color: var(--texte); margin: 0 0 22px; max-width: 320px; }
.pied__coord { font: 400 15px/1.9 var(--rb); color: var(--texte); }
.pied__titre {
  font: 400 11px var(--mn); letter-spacing: .16em; text-transform: uppercase;
  color: var(--vert-t); margin-bottom: 18px;
}
.pied__liens { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.pied__liens a { font: 400 15px var(--rb); color: var(--texte); text-decoration: none; }
.pied__liens a:hover { color: var(--bleu-f); }
.pied__form { display: flex; gap: 8px; }
.pied__inscription .form-etat { margin-top: 14px; padding: 12px 14px; font-size: 14px; }
.pied__consent { margin-top: 12px; font-size: 13px; line-height: 1.55; }
.pied__consent a { color: var(--bleu-f); text-decoration: underline; }
.pied__form .champ__input { flex: 1; min-width: 0; }
.pied__social { display: flex; gap: 16px; margin-top: 24px; font: 400 13px var(--rb); flex-wrap: wrap; }
.pied__social a { color: var(--texte); }
.pied__bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 26px; font: 400 13px var(--rb); color: var(--texte);
}
.pied__legal { display: flex; gap: 24px; flex-wrap: wrap; }
.pied__legal a { color: var(--texte); }

/* ---------- 8. SECTIONS -------------------------------------------------- */

/* --- hero vidéo (accueil) --- */
/* Hero : contenu à gauche sur fond clair, panneau sombre à droite portant le
   lecteur vidéo. La séparation entre les deux est nette et assumée. */
.hero {
  --hero-fond:  #EFF9FE;
  --hero-media: 50%;
  position: relative; overflow: hidden; background: var(--hero-fond);
}
/* Panneau sombre : la séparation avec le fond clair est nette et assumée,
   la vidéo n'est plus une ambiance mais un lecteur mis en avant. */
.hero__panneau {
  position: absolute; right: 0; top: 0; bottom: 0; width: var(--hero-media);
  background: var(--encre); z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px clamp(32px, 4vw, 64px);
}
.lecteur {
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  background: rgba(255, 255, 255, .04); overflow: hidden;
  max-width: 620px; width: 100%; margin: 0 auto;
}
/* La hauteur de l'écran est réservée dès l'analyse de la feuille : le poster puis
   la vidéo se posent dans une boîte déjà dimensionnée, jamais de décalage (CLS). */
.lecteur__ecran {
  position: relative; aspect-ratio: 16 / 9; background: #10202A;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* repli pour les navigateurs sans aspect-ratio : même boîte réservée */
@supports not (aspect-ratio: 16 / 9) {
  .lecteur__ecran { height: 0; padding-top: 56.25%; }
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* gros bouton de lecture, tant que l'utilisateur n'a pas lancé le son */
.lecteur__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; width: 76px; height: 76px; border-radius: 6px;
  border: 0; cursor: pointer; background: var(--bleu);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--d1) var(--ea), background-color var(--d1) var(--ea);
}
.lecteur__play:hover { background: var(--bleu-c); transform: translate(-50%, -50%) scale(1.06); }
.lecteur__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lecteur__play-icone {
  width: 0; height: 0; margin-left: 5px;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.lecteur[data-son="oui"] .lecteur__play { display: none; }
.lecteur__pied {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.lecteur__titre { font: 700 19px/1.3 var(--gt); color: #fff; }
.lecteur__lien {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 400 11px var(--mn); letter-spacing: .14em; text-transform: uppercase;
  color: #5FC8F2; text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--d1) var(--ea);
}
.lecteur__lien:hover { color: #fff; }
.lecteur__lien:focus-visible { outline: 2px solid #5FC8F2; outline-offset: 3px; }
.lecteur__mentions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 620px; margin: 20px auto 0;
  font: 400 10px/1.4 var(--mn); letter-spacing: .16em; text-transform: uppercase;
  color: #8FA6B4;
}
.lecteur__sep { color: rgba(143, 166, 180, .6); }
.hero__mention {
  position: absolute; right: 44px; bottom: 24px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--bord-fort); background: rgba(255,255,255,.86);
  border-radius: var(--r-btn); padding: 9px 14px;
}
.hero__mention .ms { font-size: 18px; color: var(--bleu-f); }
.hero__mention span:last-child { font: 400 12px var(--mn); letter-spacing: .06em; color: var(--texte); }
.hero__corps {
  position: relative; z-index: 4; max-width: var(--largeur); margin: 0 auto;
  padding: 0 var(--gouttiere); min-height: 640px; display: flex; align-items: center;
  /* la boîte du contenu s'étend jusqu'au-dessus du panneau sombre : sans cela
     elle intercepterait les clics sur le lecteur et ses commandes natives */
  pointer-events: none;
}
.hero__contenu { pointer-events: auto; }
/* le contenu s'arrête avant le panneau sombre : la séparation est nette,
   plus de dégradé pour absorber un chevauchement */
.hero__contenu { padding: 104px 0 116px; max-width: 548px; }
/* surtitre : texte simple espacé, plus de pastille */
.hero__surtitre {
  font: 400 11px var(--mn); letter-spacing: .18em; text-transform: uppercase;
  color: var(--texte); margin-bottom: 26px;
}
.hero__accroche {
  font: 400 17px/1.65 var(--rb); color: var(--texte);
  max-width: 500px; margin-bottom: 36px;
}
.hero__titre { font: 700 46px/1.08 var(--gt); letter-spacing: -.02em; color: var(--encre); margin: 0 0 30px; }
.hero__titre .bleu { color: var(--bleu); }
/* #80BA51 ne tient que 2,17:1 sur ce fond : le vert de texte de la charte prend le relais */
.hero__titre .vert { color: var(--vert-t); }
.hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 40px; }

/* hero des pages profondes */
.hero-page { background: var(--clair); padding: var(--section-y) 0; }

/* --- bandeau défilant --- */
.defile { background: #fff; border-bottom: 1px solid var(--bord); overflow: hidden; }
.defile__piste { display: flex; width: max-content; animation: defile 38s linear infinite; padding: 18px 0; }
.defile__groupe {
  display: flex; gap: 44px; padding-right: 44px;
  font: 400 13px var(--mn); letter-spacing: .14em; text-transform: uppercase;
  color: var(--label); white-space: nowrap;
}
.defile__sep { color: var(--bleu); }

/* --- chiffres clés --- */
/* 3 chiffres clés : colonnes de largeur égale, bloc et contenu centrés */
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 320px)); justify-content: center; gap: 40px 72px; text-align: center; }
.chiffres .trait-cle { margin-left: auto; margin-right: auto; }
.chiffres__source {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--bord);
  font: 400 12px var(--mn); color: var(--note);
}

/* --- cycle de vie orbital --- */
.cycle { display: grid; grid-template-columns: 560px 1fr; gap: 56px; align-items: center; }
.cycle__roue { position: relative; width: 560px; height: 560px; }
.cycle__anneau {
  position: absolute; left: 50%; top: 50%; width: 400px; height: 400px;
  margin: -200px 0 0 -200px;
}
.cycle__noyau {
  position: absolute; left: 50%; top: 50%; width: 186px; height: 186px;
  margin: -93px 0 0 -93px; border-radius: 50%; background: var(--bleu);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
}
.cycle__noyau-sur { font: 400 10px var(--mn); letter-spacing: .16em; color: rgba(255,255,255,.72); margin-bottom: 8px; }
.cycle__noyau-titre { font: 700 19px/1.2 var(--gt); color: #fff; }
.cycle__noeud {
  position: absolute; transform: translate(-50%, -50%);
  width: 132px; height: 132px; border-radius: 50%;
  border: 1px solid var(--bord-fort); background: #fff; color: var(--encre);
  cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; padding: 12px;
}
.cycle__noeud .ms { font-size: 28px; color: var(--bleu); }
.cycle__noeud span:last-child { font: 700 14px/1.2 var(--gt); text-align: center; }
.cycle__noeud[aria-selected="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.cycle__noeud[aria-selected="true"] .ms { color: var(--vert-tc); }
.cycle__cote { display: grid; align-items: start; }
.cycle__cote > .cycle__panneau { grid-area: 1 / 1; }
.cycle__panneau { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 44px 46px; }
.cycle__entete { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.cycle__etape { font: 400 12px var(--mn); color: var(--bleu-f); }
.cycle__filet { height: 1px; flex: 1; background: var(--bord); }
.cycle__duree { background: var(--clair); border-radius: var(--r-btn); padding: 7px 12px; font: 400 12px var(--mn); color: var(--texte); }
.cycle__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px 0;
  border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); margin-bottom: 26px;
}
.cycle__meta-val { font: 700 16px/1.5 var(--gt); color: var(--encre); }
.cycle__liste { display: none; }
/* liste mobile : l'étape tapée déroule son détail complet juste en dessous */
.cycle__ligne {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); overflow: hidden;
  transition: border-color var(--d2) var(--ea);
}
.cycle__ligne--active { border-color: var(--bleu); }
.cycle__ligne-titre { margin: 0; font: inherit; }
.cycle__ligne-btn {
  width: 100%; min-height: 58px; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: #fff; border: 0; cursor: pointer;
  font: 700 16px/1.3 var(--gt); color: var(--encre);
  transition: background-color var(--d2) var(--ea);
}
.cycle__ligne-btn:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }
.cycle__ligne-btn .ms { font-size: 22px; color: var(--bleu); flex: none; }
.cycle__ligne-num { font: 400 12px var(--mn); color: var(--bleu-f); flex: none; }
.cycle__ligne-nom { flex: 1; }
.cycle__ligne-btn .signe { font: 400 22px/1 var(--rb); color: var(--bleu-f); flex: none; }
.cycle__ligne--active .cycle__ligne-btn { background: var(--clair); }
.cycle__ligne-detail {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--d2) var(--ea), visibility 0s linear var(--d2);
}
.cycle__ligne-detail.ouvert {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows var(--d2) var(--ea), visibility 0s;
}
.cycle__ligne-detail > .accord__corps { min-height: 0; overflow: hidden; }
.cycle__ligne-contenu { padding: 16px 18px 20px; }
.cycle__ligne-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 14px 0 18px; padding: 14px 0;
  border-top: 1px solid var(--bord-doux); border-bottom: 1px solid var(--bord-doux);
}
.cycle__ligne-meta dt { margin-bottom: 4px; }
.cycle__ligne-meta dd { margin: 0; font: 700 15px/1.4 var(--gt); color: var(--encre); }
.cycle__pied { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--bord); text-align: center; }

/* --- cartes parcours --- */
.parcours__carte { display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.parcours__carte:hover { border-color: var(--bleu); }
.parcours__tete { display: flex; align-items: center; gap: 10px; }
.parcours__num { font: 400 11px var(--mn); color: var(--bleu-f); }
.parcours__nom { font: 700 22px var(--gt); color: var(--encre); }
.parcours__puces { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.parcours__puce { display: flex; gap: 10px; align-items: center; font: 400 14px/1.5 var(--rb); color: var(--texte); }
.parcours__puce::before { content: ""; width: 5px; height: 5px; background: var(--vert); border-radius: 50%; flex: none; }

/* --- bande expertises --- */
.expertises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bord); border: 1px solid var(--bord); border-radius: var(--r-carte); overflow: hidden; }
.expertise {
  text-align: left; background: #fff; border: 0; cursor: pointer; text-decoration: none;
  padding: 22px 24px; display: flex; align-items: center; gap: 14px;
}
.expertise:hover { background: var(--survol); }
.expertise__nom { font: 400 16px/1.35 var(--gt); color: var(--encre); flex: 1; }
.expertise__fleche { font: 400 14px var(--rb); color: var(--bleu-f); flex: none; }
.expertise--accent { background: var(--accent); }
.expertise--accent:hover { background: var(--accent-h); }
.expertise--accent .pastille { background: #fff; }
.expertise--accent .pastille .ms { color: var(--vert-t); }

/* --- simulateur (accueil + page estimation) --- */
.sim { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 38px 40px; }
.sim__valeurs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.sim__val { background: var(--clair); border-radius: var(--r-carte); padding: 22px 24px; }
.sim__val--vert { background: rgba(128,186,81,.1); }
.sim__val-chiffre { font: 700 26px/1.1 var(--gt); color: var(--bleu); }
.sim__val--vert .sim__val-chiffre { color: var(--vert-t); }
.sim__val--vert .label { color: var(--vert-t); }
/* tablette : dans le duo, chaque case ne faisait que 130 px — la fourchette
   « 11 220 € – 15 180 € » se cassait sur 4 lignes. Cases empilées. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sim__valeurs { grid-template-columns: 1fr; }
  /* chiffres du hero reprise-de-parc : cases de ~130 px, « 24-48 h » se cassait */
  .chiffre-carte { padding: 18px 14px !important; }
  .chiffre-carte > p:first-child { font-size: 22px !important; white-space: nowrap; }
}
.sim__curseur { width: 100%; accent-color: var(--bleu); margin-bottom: 30px; min-height: 44px; }
.sim__qte { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.sim__qte-val { font: 700 22px var(--gt); color: var(--encre); }
.sim__avantages { display: flex; flex-direction: column; gap: 10px; font: 400 15px var(--rb); color: var(--texte); }
.sim__avantage { display: flex; align-items: center; gap: 11px; }
.sim__coche {
  width: 18px; height: 18px; border-radius: 50%; background: rgba(0,143,203,.12);
  color: var(--bleu-f); font-size: 10px; display: flex; align-items: center;
  justify-content: center; flex: none;
}
.sim__coche--vert { background: rgba(128,186,81,.16); color: var(--vert-t); }

/* étapes de l'estimation */
.etapes-nav { display: flex; flex-direction: column; gap: 4px; margin: 30px 0; }
.etape-nav { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-btn); }
.etape-nav.actif { background: var(--clair); }
.etape-nav__pastille {
  width: 26px; height: 26px; border-radius: 50%; background: var(--bord-fort); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--gt); flex: none;
}
.etape-nav.fait .etape-nav__pastille, .etape-nav.actif .etape-nav__pastille { background: var(--bleu); }
.etape-nav--3.actif .etape-nav__pastille { background: var(--vert); color: var(--encre); }
.etape-nav__nom { font: 700 15px var(--gt); color: var(--encre); }

.compteur-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--bord-doux);
}
.compteur-ligne:last-of-type { border-bottom: 0; }
.compteur-ligne__id { display: flex; align-items: center; gap: 14px; }
.compteur-ligne__id .ms { font-size: 26px; color: var(--bleu); }
.compteur-ligne__nom { font: 700 16px var(--gt); color: var(--encre); }
.compteur-ligne__ex { font: 400 13px var(--rb); color: var(--note); }
.compteur { display: flex; align-items: center; gap: 12px; }
.compteur__btn {
  width: 44px; height: 44px; border: 1px solid var(--bord-fort); background: #fff;
  border-radius: var(--r-btn); cursor: pointer; font: 400 18px var(--rb); color: var(--encre);
}
.compteur__btn:hover { border-color: var(--bleu); color: var(--bleu); }
.compteur__val { min-width: 44px; text-align: center; font: 700 18px var(--gt); color: var(--inactif); }
.compteur__val.actif { color: var(--bleu); }

.choix-etat {
  text-align: left; background: #fff; border: 1px solid var(--bord);
  border-radius: var(--r-carte); padding: 20px 22px; cursor: pointer; width: 100%;
}
.choix-etat[aria-pressed="true"] { background: rgba(0,143,203,.07); border-color: var(--bleu); }
.choix-etat__nom { display: block; font: 700 17px var(--gt); color: var(--encre); margin-bottom: 6px; }
.choix-etat__detail { display: block; font: 400 14px/1.55 var(--rb); color: var(--texte); }

.resultat { background: var(--clair); border-radius: var(--r-carte); padding: 30px 32px; }
.resultat--vert { background: rgba(128,186,81,.12); }
.resultat__chiffre { font: 700 34px/1.05 var(--gt); letter-spacing: -.02em; color: var(--bleu); }
.resultat--vert .resultat__chiffre { color: var(--vert-t); }
.resultat--vert .label { color: var(--vert-t); }

/* --- preuve / certifications --- */
.preuve__logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.preuve__logo { text-decoration: none; }
.preuve__logo:hover { border-color: var(--bleu); color: var(--bleu-f); }
.preuve__apercus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.preuve__jetons { grid-column: span 2; display: flex; gap: 10px; flex-wrap: wrap; }

/* --- témoignages --- */
.temoignage { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 52px 56px; }
/* hauteur fixe du carrousel : les avis sont empilés dans une même cellule, la carte prend
   la hauteur du plus long à chaque largeur ; les avis masqués restent invisibles et hors focus */
.temoignage { display: grid; }
.temoignage > [data-temoignage] { grid-area: 1 / 1; display: flex; flex-direction: column; }
.temoignage > [data-temoignage][hidden] { display: flex !important; visibility: hidden; }
.temoignage__citation { font: 400 26px/1.55 var(--gt); color: var(--encre); margin: 0 0 32px; max-width: 900px; }
.temoignage > [data-temoignage] > .temoignage__pied { margin-top: auto; }
.temoignage__pied { display: flex; align-items: center; gap: 18px; padding-top: 28px; border-top: 1px solid var(--bord); }
/* avatar : initiales dans une pastille, pas de photo */
.temoignage__avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--clair); border: 1px solid var(--bord-fort); color: var(--bleu-f);
  font: 700 16px/1 var(--gt); letter-spacing: .04em;
}
.temoignage__nom { font: 700 16px var(--gt); color: var(--encre); }
.temoignage__role { font: 400 14px var(--rb); color: var(--texte); }
.fleches { display: flex; gap: 10px; }
.fleche-btn {
  width: 48px; height: 48px; border: 1px solid var(--bord-fort); background: #fff;
  border-radius: var(--r-btn); cursor: pointer; font: 400 18px var(--rb); color: var(--encre);
}
.fleche-btn:hover { border-color: var(--bleu); color: var(--bleu); }
.logos-clients { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.logo-client {
  height: 70px; background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
  display: flex; align-items: center; justify-content: center;
  font: 400 11px var(--mn); color: var(--note); filter: grayscale(1);
}

/* --- RSE --- */
.rse__chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 16px 32px; margin-bottom: 26px; }
.rse__chiffre { border-top: 2px solid var(--vert); padding-top: 14px; }
.rse__chiffre--bleu { border-top-color: var(--bleu); }
.rse__chiffre-val { font: 700 34px/1 var(--gt); letter-spacing: -.02em; color: var(--vert-t); }
.rse__chiffre--bleu .rse__chiffre-val { color: var(--bleu); }
.rse__chiffre-lib { font: 400 13px/1.5 var(--rb); color: var(--texte); margin-top: 8px; }
/* fermé, ce bloc ne doit rien occuper : marge, padding et filet
   n'apparaissent qu'à l'ouverture */
.rse__detail { margin-top: 0; padding-top: 0; border-top: 1px solid transparent; }
.rse__detail.ouvert { margin-top: 44px; padding-top: 40px; border-top-color: var(--bord); }
.rse__encart { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 44px 46px; }
.rse__valeur { font: 700 20px var(--gt); color: var(--encre); }
.rse__pilier { border-left: 2px solid var(--vert); padding-left: 16px; }
.rse__pilier-nom { font: 700 17px var(--gt); color: var(--encre); margin-bottom: 5px; }
.rse__video-ph {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
  aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 24px;
}
.rse__play {
  width: 70px; height: 70px; border-radius: 50%; background: var(--bleu);
  display: flex; align-items: center; justify-content: center;
}
.rse__play::after {
  content: ""; border-left: 16px solid #fff; border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; margin-left: 5px;
}

/* --- processus illustré (page Nos services) --- */
.processus { display: flex; flex-direction: column; gap: 16px; }
.processus__bloc {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
  padding: 40px 44px; display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 48px; align-items: center;
}
.processus__bloc--clair { background: var(--clair); }
.processus__bloc:nth-child(even) .processus__texte { order: 2; }
.processus__bloc:nth-child(even) .processus__image { order: 1; }
.processus__tete { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.processus__tete .ms { font-size: 24px; color: var(--bleu); }
.processus__etape { font: 400 12px var(--mn); letter-spacing: .14em; color: var(--bleu-f); }
.processus__titre { font: 700 26px/1.3 var(--gt); color: var(--encre); margin: 0 0 22px; }
.processus__image { display: flex; justify-content: center; }
/* seules les illustrations SVG en enfant direct prennent la boîte ; les photos
   sont dans une <figure class="visuel"> et gardent leur cadrage en cover */
.processus__image > img {
  width: 100%; max-width: 380px; aspect-ratio: 380/269; object-fit: contain;
}
.processus__image .visuel { width: 100%; max-width: 380px; aspect-ratio: 380/269; }

/* --- explorateur de services --- */
.explorateur { display: grid; grid-template-columns: 340px 1fr; border: 1px solid var(--bord); border-radius: var(--r-carte); overflow: hidden; background: #fff; }
.explorateur__liste { background: #fff; border-right: 1px solid var(--bord); display: flex; flex-direction: column; }
.explorateur__onglet {
  width: 100%; text-align: left; background: transparent; border: 0;
  border-bottom: 1px solid var(--bord); border-left: 3px solid transparent;
  cursor: pointer; padding: 24px 28px; display: flex; align-items: center; gap: 16px;
}
.explorateur__onglet .ms { font-size: 24px; color: var(--bleu); }
.explorateur__onglet-num { font: 400 11px var(--mn); color: var(--note); }
.explorateur__onglet-nom { font: 400 18px var(--gt); color: var(--encre); }
.explorateur__onglet[aria-selected="true"] { background: var(--clair); border-left-color: var(--bleu); }
.explorateur__panneau { padding: 48px 52px; }
.explorateur__entete { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.explorateur__entete .ms { font-size: 26px; color: var(--bleu); }
.explorateur__num { font: 400 12px var(--mn); color: var(--bleu-f); }
.explorateur__corps { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; margin-bottom: 32px; }
.explorateur__illu { width: 190px; height: 190px; object-fit: contain; flex: none; }
.explorateur__photo { width: 190px; flex: none; aspect-ratio: 1; }
.explorateur__livrable { background: var(--clair); border-radius: var(--r-carte); padding: 24px 26px; margin-bottom: 32px; }
.explorateur__livrable-nom { font: 700 18px/1.4 var(--gt); color: var(--encre); margin-bottom: 16px; }

/* --- besoins / situations --- */
.besoin {
  text-align: left; background: #fff; border: 1px solid var(--bord);
  border-radius: var(--r-carte); padding: 28px 30px; cursor: pointer;
  display: flex; flex-direction: column; gap: 12px; text-decoration: none;
}
.besoin:hover { border-color: var(--bleu); }
.besoin__tete { display: flex; align-items: center; gap: 12px; }
.besoin__tete .ms { font-size: 28px; color: var(--bleu); }
.besoin__num { font: 400 11px var(--mn); color: var(--note); }
.besoin__nom { font: 700 20px/1.3 var(--gt); color: var(--encre); }
.besoin__cta { font: 700 14px var(--gt); color: var(--bleu-f); margin-top: 4px; }

/* --- page reprise : familles --- */
.familles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.famille {
  display: flex; align-items: center; gap: 9px; background: #fff; color: var(--texte);
  border: 1px solid var(--bord); cursor: pointer; font: 400 15px var(--gt);
  padding: 13px 20px; border-radius: var(--r-btn); min-height: 44px;
}
.famille .ms { font-size: 20px; }
.famille[aria-selected="true"], .famille[aria-pressed="true"] { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.famille-detail {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
  padding: 40px 44px; display: grid; grid-template-columns: 1fr 1fr 300px; gap: 44px; align-items: start;
}
.famille-detail__tete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.famille-detail__tete .ms { font-size: 32px; color: var(--bleu); }
.famille-detail__nom { font: 700 24px/1.25 var(--gt); color: var(--encre); }
.famille-detail__prix { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 26px; }
.famille-detail__val { font: 700 30px var(--gt); color: var(--bleu); }

.etape-carte { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 26px; }
.etape-carte img {
  display: block; width: 100%; max-width: 200px; height: 150px;
  object-fit: contain; object-position: center bottom;
  margin: 0 auto 18px;
}
.etape-carte__num { font: 400 11px var(--mn); color: var(--bleu-f); margin-bottom: 12px; }
.etape-carte__num--vert { color: var(--vert-t); }
.etape-carte__nom { font: 700 18px var(--gt); color: var(--encre); margin-bottom: 10px; }

/* --- pages profils --- */
.profil__encart { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 32px 34px; }
.profil__ligne {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--bord-doux);
}
.profil__ligne:last-child { border-bottom: 0; }
.profil__ligne-k { font: 400 15px/1.5 var(--rb); color: var(--texte); }
.profil__ligne-v { font: 700 15px var(--gt); color: var(--encre); text-align: right; flex: none; }
/* tablette : l'encart ne fait que ~210 px dans le duo, on empile libellé / valeur comme en mobile */
@media (min-width: 768px) and (max-width: 1023px) {
  .profil__encart { padding: 28px 24px; }
  .profil__ligne { flex-direction: column; gap: 4px; }
  .profil__ligne-v { text-align: left; }
}
.profil__chips { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.profil__chip { display: flex; align-items: center; gap: 9px; font: 400 14px var(--rb); color: var(--texte); }
.profil__chip .ms { font-size: 20px; color: var(--bleu); }
.livrable { background: #fff; padding: 34px 30px 38px; }
.livrable:hover { background: var(--survol); }
.livrable .ms { font-size: 34px; color: var(--bleu); }
.livrable__nom { font: 700 19px/1.3 var(--gt); color: var(--encre); margin: 20px 0 12px; }
.bloc-etape { border-top: 2px solid var(--bleu); padding-top: 22px; }
.bloc-etape img {
  display: block; width: 100%; max-width: 210px; height: 150px;
  object-fit: contain; object-position: center bottom;
  margin: 0 auto 18px;
}
.bloc-etape__num { font: 400 11px var(--mn); color: var(--bleu-f); margin-bottom: 12px; }
.bloc-etape__nom { font: 700 20px/1.25 var(--gt); color: var(--encre); margin-bottom: 12px; }
.situation { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 30px 32px; }
.situation:hover { border-color: var(--bleu); }
.situation .ms { font-size: 32px; color: var(--bleu); }
.situation__nom { font: 700 20px/1.3 var(--gt); color: var(--encre); margin: 18px 0 12px; }
.cas__chiffre { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 28px 30px; }
.cas__chiffre-val { font: 700 46px/1 var(--gt); letter-spacing: -.03em; color: var(--bleu); }
.cas__chiffre-lib { font: 400 15px/1.55 var(--rb); color: var(--texte); }

/* --- tableau comparatif (page Pour qui ?) --- */
.comparatif { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); overflow: hidden; }
.comparatif table { width: 100%; border-collapse: collapse; }
.comparatif th {
  background: var(--bleu); padding: 18px 26px; text-align: left;
  font: 400 11px var(--mn); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.comparatif td { padding: 26px; border-top: 1px solid var(--bord); vertical-align: top; font: 400 15px/1.6 var(--rb); color: var(--texte); }
.comparatif td:first-child { font: 700 18px var(--gt); color: var(--encre); }
.comparatif td:last-child { font: 700 15px/1.6 var(--gt); color: var(--bleu-f); }
.comparatif__cartes { display: none; }

/* --- blog --- */
.article-carte { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; text-align: left; background: #fff; }
.article-carte:hover { border-color: var(--bleu); }
.article-carte__meta { display: flex; align-items: center; gap: 10px; }
.article-carte__tag { font: 400 11px var(--mn); letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-f); }
.article-carte__duree { font: 400 13px var(--rb); color: var(--note); }
.article-carte__titre { font: 700 20px/1.35 var(--gt); color: var(--encre); }
.article-carte__chapo { font: 400 14px/1.65 var(--rb); color: var(--texte); }
.article-carte__lire { font: 700 14px var(--gt); color: var(--bleu-f); margin-top: auto; }
.blog__filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-bottom: 30px; border-bottom: 1px solid var(--bord); margin-bottom: 40px; }
.blog__compte { font: 400 12px var(--mn); color: var(--note); margin-left: auto; }
.une { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 28px 30px; }
.une__titre { font: 700 22px/1.3 var(--gt); color: var(--encre); margin-bottom: 12px; }

/* --- contact --- */
.contact__grille { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: start; }
.contact__form { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 40px 44px; }
.demande {
  text-align: left; background: #fff; border: 1px solid var(--bord);
  border-radius: var(--r-carte); padding: 20px 22px; cursor: pointer; width: 100%;
}
.demande[aria-pressed="true"] { background: rgba(0,143,203,.07); border-color: var(--bleu); }
.demande__tete { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.demande__tete .ms { font-size: 24px; color: var(--bleu); }
.demande__nom { font: 700 16px var(--gt); color: var(--encre); }
.demande__detail { font: 400 14px/1.5 var(--rb); color: var(--texte); }
.contact__champs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact__fichier {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--clair); border: 1px solid var(--bord); border-radius: var(--r-carte);
  padding: 20px 22px; flex-wrap: wrap;
}
.contact__fichier-btn {
  display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--bord-fort);
  border-radius: var(--r-btn); padding: 13px 18px; cursor: pointer;
  font: 700 14px var(--gt); color: var(--encre); min-height: 44px;
}
.contact__fichier-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* ---- être rappelé : planificateur ----------------------------------- */
.rappel__grille { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: start; }
.rappel__form { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 40px 44px; }
.rappel__agenda {
  background: var(--clair); border: 1px solid var(--bord); border-radius: var(--r-carte);
  padding: 24px 28px; margin-bottom: 28px;
}
.rappel__etape { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; }
.rappel__legende {
  display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 16px;
  font: 700 18px/1.3 var(--gt); color: var(--encre);
}
.rappel__num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bleu); color: #fff; font: 700 14px var(--gt);
}
.rappel__jours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1024px) { .rappel__jours { grid-template-columns: repeat(7, minmax(0, 1fr)); } } /* 7 jours sur une ligne dès que la place le permet */
.rappel__jour {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 84px; padding: 12px 6px; cursor: pointer;
  background: #fff; border: 1px solid var(--bord-fort); border-radius: var(--r-carte);
  color: var(--encre); font-family: var(--rb);
  transition: background-color var(--d1) var(--ea), border-color var(--d1) var(--ea),
              color var(--d1) var(--ea), transform var(--d1) var(--ea);
}
.rappel__jour:hover { border-color: var(--bleu); transform: translateY(-2px); }
.rappel__jour:focus-visible, .rappel__creneau:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.rappel__jour-sem { font: 400 10px var(--mn); letter-spacing: .05em; text-transform: uppercase; color: var(--texte); }
.rappel__jour-num { font: 700 26px/1.1 var(--gt); }
.rappel__jour-mois { font: 400 12px var(--rb); color: var(--texte); }
.rappel__jour[aria-pressed="true"] { background: var(--bleu-f); border-color: var(--bleu-f); color: #fff; }
.rappel__jour[aria-pressed="true"] .rappel__jour-sem,
.rappel__jour[aria-pressed="true"] .rappel__jour-mois { color: #DCF6FF; }
.rappel__periode { font: 400 11px var(--mn); letter-spacing: .14em; text-transform: uppercase; color: var(--texte); margin: 4px 0 10px; }
.rappel__creneaux { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.rappel__creneau {
  min-height: 44px; padding: 10px 16px; cursor: pointer;
  background: #fff; border: 1px solid var(--bord-fort); border-radius: var(--r-btn);
  font: 700 15px var(--gt); color: var(--encre);
  transition: background-color var(--d1) var(--ea), border-color var(--d1) var(--ea), color var(--d1) var(--ea);
}
.rappel__creneau:hover:not([disabled]) { border-color: var(--bleu); }
.rappel__creneau[aria-pressed="true"] { background: var(--bleu-f); border-color: var(--bleu-f); color: #fff; }
.rappel__creneau[disabled] {
  cursor: not-allowed; color: var(--inactif); border-color: var(--bord-doux);
  text-decoration: line-through; background: #fff;
}
.rappel__apercu {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 24px; padding: 16px 18px;
  background: var(--survol); border: 1px dashed var(--bord-fort); border-radius: var(--r-carte);
  font: 400 15px/1.5 var(--rb); color: var(--texte);
}
.rappel__apercu .ms { font-size: 22px; color: var(--bleu); }
.rappel__form--pret .rappel__apercu {
  background: var(--clair); border-style: solid; border-color: var(--bleu); color: var(--encre); font-weight: 700;
}
.champ--large { grid-column: 1 / -1; }
.contact__consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font: 400 14px/1.6 var(--rb); color: var(--texte); }
.contact__consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--bleu); flex: none; }
.contact__envoye {
  background: rgba(128,186,81,.12); border: 1px solid var(--vert);
  border-radius: var(--r-carte); padding: 22px 24px; margin-top: 22px;
}
.contact__coord { display: flex; gap: 12px; align-items: flex-start; font: 400 16px/1.6 var(--rb); color: var(--encre); margin-top: 14px; }
.contact__coord .ms { font-size: 22px; color: var(--bleu); }
.contact__horaires {
  display: flex; gap: 12px; align-items: center; font: 400 14px var(--rb); color: var(--texte);
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bord-doux);
}
.contact__horaires .ms { font-size: 20px; color: var(--label); }
.encart-cta { background: var(--clair); border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 32px 34px; }
.encart-cta__titre { font: 700 20px var(--gt); color: var(--encre); margin-bottom: 8px; }

/* --- CTA final --- */
.cta-final { background: var(--clair); }
.cta-final--simple { padding: 0; }

.cta-final__corps { max-width: var(--largeur); margin: 0 auto; padding: var(--section-y) var(--gouttiere); text-align: center; }
.cta-final__titre { font: 700 56px/1.1 var(--gt); letter-spacing: -.02em; color: var(--encre); margin: 0 auto 20px; max-width: 840px; }
.cta-final__texte { font: 400 18px/1.7 var(--rb); color: var(--texte); margin: 0 auto 34px; max-width: 600px; }
.cta-final__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-bande {
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}

/* ==========================================================================
   8b. COMPOSANTS AJOUTÉS POUR LA CONFORMITÉ AU CAHIER DES CHARGES
   ========================================================================== */

/* ---- retour d'état des formulaires ------------------------------------- */
.form-etat {
  margin-top: 20px; padding: 18px 20px; border-radius: var(--r-carte);
  font: 400 15px/1.6 var(--rb);
}
.form-etat--succes { background: rgba(128,186,81,.12); border: 1px solid var(--vert); color: var(--encre); }
.form-etat--erreur { background: rgba(192,57,43,.07); border: 1px solid var(--erreur); color: var(--encre); }
.form-etat a { color: var(--bleu-f); text-decoration: underline; }
/* un lien dans un bloc de texte ne doit pas se distinguer que par la couleur */
.prose a, .contact__consent a, .pied__consent a, .texte a, .lead a,
.note a, .fil-ariane a, .pied__coord a, .contact__coord a {
  text-decoration: underline; text-underline-offset: 2px;
}
.champ__input.champ--erreur, .champ__zone.champ--erreur, .champ__select.champ--erreur { border-color: var(--erreur); }

/* ---- bloc de capture après résultat du simulateur ---------------------- */
.capture { background: var(--clair); border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 28px 30px; }
.capture__titre { font: 700 20px/1.3 var(--gt); color: var(--encre); margin-bottom: 8px; }
.capture__ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.capture__ligne .champ { flex: 1 1 240px; }
.capture__outils { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* ---- jauge CO₂ et équivalents ------------------------------------------ */
.co2 { margin-top: 18px; }
.co2__piste {
  height: 12px; background: #fff; border: 1px solid var(--bord);
  border-radius: 999px; overflow: hidden;
}
.co2__barre {
  display: block; height: 100%; width: 100%;
  background: var(--vert); border-radius: 999px;
  transform: scaleX(var(--taux, .02)); transform-origin: left center;
  transition: transform var(--d3) var(--ea);
}
.co2__equivalents { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.co2__equiv { display: flex; gap: 11px; align-items: flex-start; font: 400 14px/1.5 var(--rb); color: var(--texte); }
.co2__equiv .ms { font-size: 22px; color: var(--vert-t); }
.co2__val { font: 700 17px var(--gt); color: var(--encre); display: block; }

/* ---- sous-navigation collante par ancres ------------------------------- */
.sousnav {
  position: sticky; top: var(--entete); z-index: 60;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
}
.sousnav__liste {
  max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere);
  display: flex; gap: 4px; align-items: center; overflow-x: auto;
}
.sousnav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
  font: 400 14px var(--rb); color: var(--texte); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.sousnav a:hover { color: var(--bleu-f); }
.sousnav a[aria-current="true"] { color: var(--bleu-f); border-bottom-color: var(--bleu); font-weight: 700; }

/* ---- barre d'action fixe (mobile) -------------------------------------- */
.barre-mobile {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(255,255,255,.98); border-top: 1px solid var(--bord);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  transition: transform .2s ease;
}
.barre-mobile .btn { flex: 1; padding: 15px 12px; font-size: 14px; }
.barre-mobile--repliee { transform: translateY(110%); }

/* ---- orientation en 3 questions (pour-qui) ----------------------------- */
.orientation__question { margin-bottom: 22px; }
.orientation__intitule { font: 700 16px/1.4 var(--gt); color: var(--encre); margin-bottom: 12px; }
.orientation__choix { display: flex; gap: 8px; flex-wrap: wrap; }
.orientation__choix button {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-btn);
  padding: 12px 15px; min-height: 44px; cursor: pointer;
  font: 400 14px var(--rb); color: var(--texte); text-align: left;
}
.orientation__choix button:hover { border-color: var(--bleu); color: var(--bleu-f); }
.orientation__choix button[aria-pressed="true"] {
  background: var(--clair); border-color: var(--bleu); color: var(--encre); font-weight: 700;
}
.orientation__resultat {
  margin-top: 22px; padding: 20px 22px; background: var(--clair);
  border: 1px solid var(--bleu); border-radius: var(--r-carte);
}
.orientation__resultat p { font: 400 15px/1.6 var(--rb); color: var(--encre); margin-bottom: 14px; }

/* ---- pages de contenu long (mentions, confidentialité, articles) -------- */
.prose { max-width: 780px; }
.prose h2 { font: 700 28px/1.25 var(--gt); color: var(--encre); letter-spacing: -.02em; margin: 44px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 700 20px/1.3 var(--gt); color: var(--encre); margin: 28px 0 10px; }
.prose p { font: 400 16px/1.75 var(--rb); color: var(--texte); margin-bottom: 16px; }
.prose ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.prose li { font: 400 16px/1.75 var(--rb); color: var(--texte); margin-bottom: 8px; }
.prose a { color: var(--bleu-f); text-decoration: underline; }
/* les boutons du bloc d'appel dans un article ne prennent pas le style de lien du texte */
.prose a.btn { text-decoration: none; }
.prose a.btn--primaire, .prose a.btn--secondaire:hover { color: #fff; }
.prose a.btn--secondaire { color: var(--bleu-f); }
/* le bloc d'appel garde sa hiérarchie (titre h4, texte xs) malgré « .prose p » */
.prose .article__cta .h4 { font: 700 20px/1.3 var(--gt); color: var(--encre); margin-bottom: 8px; }
.prose .article__cta .texte--xs { font-size: 15px; line-height: 1.65; margin-bottom: 20px; }
@media (max-width: 767px) { .prose .article__cta .h4 { font-size: 18px; } }
.prose strong { font-weight: 700; color: var(--encre); }
.prose .acompleter {
  background: rgba(0,143,203,.08); border: 1px dashed var(--bord-fort);
  border-radius: 2px; padding: 1px 7px; font: 700 14px var(--rb); color: var(--bleu-f);
}
.prose__maj { font: 400 13px var(--rb); color: var(--note); margin-bottom: 32px; }

/* ---- article de blog ---------------------------------------------------- */
.article__meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font: 400 14px var(--rb); color: var(--texte); }
.article__meta .ms { font-size: 18px; color: var(--bleu); }
.article__sommaire {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
  padding: 24px 26px; margin-bottom: 36px;
}
.article__sommaire h2 { font: 700 15px var(--gt); color: var(--encre); margin-bottom: 12px; letter-spacing: 0; }
.article__sommaire ol { list-style: decimal; padding-left: 20px; }
.article__sommaire li { margin-bottom: 8px; }
.article__sommaire a { font: 400 15px var(--rb); color: var(--bleu-f); text-decoration: none; }
.article__sommaire a:hover { text-decoration: underline; }
.article__cta {
  margin-top: 44px; padding: 30px 32px; background: var(--clair);
  border: 1px solid var(--bord); border-radius: var(--r-carte);
}

/* ---- carte entièrement cliquable --------------------------------------- */
.card--cliquable { position: relative; }
.card--cliquable a.lien-couvrant::after { content: ""; position: absolute; inset: 0; }
.card--cliquable:hover { border-color: var(--bleu); }

/* ---- mention de délai --------------------------------------------------- */
.mention-delai {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 14px var(--rb); color: var(--texte);
}
.mention-delai .ms { font-size: 18px; color: var(--vert-t); }

/* ==========================================================================
   9. RESPONSIVE
   ≥1200px  desktop (rendu de la maquette validée, inchangé)
   1024-1199px  transition
   768-1023px   tablette + menu burger
   <768px       mobile, tout en une colonne
   ========================================================================== */

/* ---------- < 1200px : tablette large ------------------------------------ */
@media (max-width: 1199px) {
  :root { --gouttiere: 32px; --section-y: 72px; }

  .h1 { font-size: 40px; }
  .h2, .h2--lg { font-size: 34px; }
  .h2--sm, .h2--xs { font-size: 30px; }
  .h3 { font-size: 28px; }
  .lead { font-size: 17px; }
  .cta-final__titre { font-size: 38px; }
  .hero { --hero-media: 50%; }
  .hero__panneau { padding: 40px 28px; }
  .hero__contenu { max-width: 420px; }
  .hero__titre { font-size: 36px; }
  .lecteur__titre { font-size: 17px; }
}
/* tablette : la colonne de texte (420 px) ne tient plus à gauche du panneau à 50 %
   sous ~900 px — le lecteur recouvrait le titre. On empile comme en mobile,
   la vidéo reste lue en sourdine (heroVideo ne bascule qu'à 767 px). */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { display: flex; flex-direction: column; }
  .hero__corps { min-height: 0; order: 1; width: 100%; }
  .hero__contenu { padding: 72px 0 60px; max-width: 640px; }
  .hero__panneau { position: relative; order: 2; width: 100%; padding: 48px var(--gouttiere) 52px; }
}
@media (max-width: 1199px) {

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid--large { gap: 40px; }
  .duo, .duo--texte-large, .duo--media-large { gap: 40px; }

  .expertises { grid-template-columns: repeat(2, 1fr); }
  .chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .preuve__logos { gap: 10px; }
  .logos-clients { grid-template-columns: repeat(3, 1fr); }

  /* cycle : la roue passe sous le panneau */
  .cycle { grid-template-columns: 1fr; gap: 32px; }
  .cycle__roue { width: 100%; max-width: 460px; height: 460px; margin: 0 auto; }
  .cycle__anneau { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
  .cycle__noeud { width: 108px; height: 108px; }
  .cycle__noeud span:last-child { font-size: 12px; }
  .cycle__panneau { padding: 32px 30px; }

  .explorateur { grid-template-columns: 260px 1fr; }
  .explorateur__panneau { padding: 32px 30px; }
  .explorateur__corps { grid-template-columns: 1fr; gap: 24px; }
  .explorateur__illu, .explorateur__photo { width: 150px; }
  .explorateur__illu { height: 150px; }
  .bloc-etape img, .etape-carte img { height: 128px; }

  .processus__bloc { padding: 32px 30px; gap: 32px; }
  .famille-detail { grid-template-columns: 1fr 1fr; gap: 28px; }
  .famille-detail__prix { grid-column: span 2; }
  .contact__grille { grid-template-columns: 1fr; }
  .rappel__grille { grid-template-columns: 1fr; }
  .contact__form { padding: 32px 30px; }
  .temoignage { padding: 36px 34px; }
  .temoignage__citation { font-size: 21px; }
  .card--pad-lg, .rse__encart { padding: 32px 30px; }
  .sim { padding: 30px 28px; }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 36px; }
  .megamenu__grille--solutions { grid-template-columns: 1fr 1fr; }
  .megamenu__grille--profils { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- < 1024px : navigation burger --------------------------------- */
@media (max-width: 1023px) {
  .nav, .entete__rappel { display: none; }
  .megamenu { display: none !important; }
  .burger { display: flex; }
  .entete__barre { gap: 16px; justify-content: space-between; }
  .entete__actions { gap: 10px; margin-left: auto; }
  .entete__cta { padding: 13px 16px; font-size: 13px; }
  /* Verrou de défilement posé sur la racine, pas sur <body> : un overflow
     hidden sur body en fait le conteneur de défilement de l'en-tête sticky,
     qui repart alors à sa position d'origine — hors écran dès qu'on a défilé,
     bouton de fermeture compris. */
  html.menu-ouvert { overflow: hidden; }
  /* la barre d'action fixe s'efface derrière le menu : aucun chevauchement */
  html.menu-ouvert .barre-mobile { transform: translateY(110%) !important; visibility: hidden; }
}

/* ---------- < 768px : mobile --------------------------------------------- */
@media (max-width: 767px) {
  :root { --gouttiere: 20px; --entete: 68px; --section-y: 56px; }

  .h1 { font-size: 31px; }
  .h2, .h2--lg { font-size: 27px; }
  .h2--sm, .h2--xs { font-size: 25px; }
  .h3 { font-size: 24px; }
  .h4 { font-size: 18px; }
  .lead { font-size: 16px; }
  .texte { font-size: 16px; }
  .cta-final__titre { font-size: 28px; }

  .entete__logo img { height: 34px; }
  .entete__cta { padding: 12px 14px; font-size: 12px; letter-spacing: 0; }
  .entete__cta .fleche { display: none; }

  /* tout en une colonne */
  .grid-2, .grid-3, .grid-4, .grid-5,
  .duo, .duo--texte-large, .duo--media-large,
  .chiffres, .expertises, .contact__champs,
  .rse__chiffres, .sim__valeurs, .cycle__meta,
  .preuve__logos, .preuve__apercus, .famille-detail { grid-template-columns: 1fr; }

  /* planificateur de rappel */
  .rappel__form { padding: 26px 20px; }
  .rappel__jours { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .rappel__jour { min-height: 76px; padding: 10px 4px; }
  .rappel__jour-num { font-size: 22px; }
  .rappel__creneau { flex: 1 1 calc(50% - 5px); }
  .grid, .duo, .grid--large { gap: 20px; }
  .famille-detail__prix, .preuve__jetons { grid-column: auto; }
  .logos-clients { grid-template-columns: repeat(2, 1fr); }

  .bandeau-titre { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
  .bandeau-titre--centre { margin-bottom: 32px; }

  /* CTA pleine largeur empilés */
  .hero__actions, .cta-final__actions, .rangee--cta, .btn-groupe { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__actions .btn, .cta-final__actions .btn, .rangee--cta .btn, .btn-groupe .btn { width: 100%; }

  /* hero : composition empilée, aucune vidéo chargée (voir heroVideo) */
  .hero { display: flex; flex-direction: column; }
  .hero__corps { min-height: 0; order: 1; }
  .hero__contenu { padding: 48px 0 40px; max-width: none; }
  .hero__titre { font-size: 30px; margin-bottom: 24px; }
  .hero__panneau {
    position: relative; order: 2; width: 100%; padding: 28px 20px 32px;
  }
  .lecteur { max-width: none; }
  .lecteur__ecran {
    /* déclaré ici et pas en JS : c'est l'image la plus grande de l'écran,
       le navigateur doit la découvrir dès l'analyse de la feuille */
    background-image: url("../assets/img/photos/hero-poster-mobile.jpg");
  }
  .lecteur__play { width: 62px; height: 62px; }
  .lecteur__play-icone { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; }
  /* Sous le panneau empilé, le JS réécrit « Lecture automatique en sourdine »
     en « Lecture au toucher » : le retour à la ligne disparaissait et la page
     remontait de 24 px. Les deux mentions sont empilées, le nombre de lignes
     ne dépend donc plus de la longueur du texte. */
  .lecteur__mentions {
    margin-top: 16px; flex-direction: column; align-items: center; gap: 4px; min-height: 32px;
  }
  .lecteur__sep { display: none; }
  .hero__mention { right: 20px; bottom: 20px; padding: 7px 10px; }
  .hero__mention span:last-child { font-size: 10px; }

  /* cycle : liste verticale */
  .cycle { display: block; }
  .cycle__roue, .cycle__panneau { display: none; }
  .cycle__liste { display: flex; flex-direction: column; gap: 10px; }
  .cycle__pied { margin-top: 28px; }

  /* processus : illustration au-dessus du texte */
  .processus__bloc { grid-template-columns: 1fr; padding: 26px 22px; gap: 22px; }
  .processus__bloc .processus__texte,
  .processus__bloc:nth-child(even) .processus__texte { order: 2; }
  .processus__bloc .processus__image,
  .processus__bloc:nth-child(even) .processus__image { order: 1; }
  .processus__image img { max-width: 260px; }
  .processus__titre { font-size: 21px; }

  /* explorateur : accordéon. Les 6 services restent tous visibles, le détail
     du service choisi s'ouvre juste sous son intitulé. (La bande d'onglets
     défilants ne montrait que le premier : chaque onglet prenait toute la
     largeur et rien n'indiquait qu'on pouvait glisser.) */
  .explorateur {
    display: flex; flex-direction: column; gap: 10px;
    border: 0; background: none; overflow: visible;
  }
  .explorateur__liste, .explorateur__panneaux { display: contents; }
  .explorateur .curseur-onglet { display: none !important; }
  .explorateur__onglet, .explorateur__panneau { order: var(--ordre); }
  .explorateur__onglet {
    width: 100%; min-height: 58px; padding: 14px 18px; gap: 12px;
    background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte);
  }
  .explorateur__onglet::after {
    content: "+"; margin-left: auto; padding-left: 8px;
    font: 400 22px/1 var(--rb); color: var(--bleu-f);
  }
  .explorateur__onglet[aria-selected="true"] {
    background: var(--clair); border-color: var(--bleu);
    border-radius: var(--r-carte) var(--r-carte) 0 0;
  }
  .explorateur__onglet[aria-selected="true"]::after { content: "\2212"; }
  .explorateur__onglet-nom { font-size: 16px; white-space: normal; }
  .explorateur__panneau {
    margin-top: -10px; padding: 22px 18px 24px;
    background: #fff; border: 1px solid var(--bleu); border-top: 0;
    border-radius: 0 0 var(--r-carte) var(--r-carte);
  }
  .explorateur__illu, .explorateur__photo { width: 130px; height: 130px; }

  /* tableau comparatif -> cartes empilées */
  .comparatif { display: none; }
  .comparatif__cartes { display: flex; flex-direction: column; gap: 16px; }
  .comparatif__carte { background: #fff; border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 24px 22px; }
  .comparatif__carte h3 { font: 700 20px var(--gt); color: var(--encre); margin: 0 0 16px; }
  .comparatif__ligne { padding: 12px 0; border-top: 1px solid var(--bord-doux); }
  .comparatif__ligne:first-of-type { border-top: 0; }

  /* simulateur */
  .sim { padding: 24px 20px; }
  .compteur-ligne { flex-direction: column; align-items: flex-start; gap: 14px; }
  .compteur { width: 100%; justify-content: space-between; }
  /* les 3 étapes restent visibles : l'étape 3 active ne sort plus de l'écran */
  .etapes-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .etape-nav { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; }
  .etape-nav__nom { font-size: 13px; line-height: 1.25; }

  /* cartes et encarts */
  .card--pad { padding: 22px 20px; }
  .card--pad-lg, .rse__encart, .contact__form, .cycle__panneau { padding: 24px 20px; }
  .temoignage { padding: 24px 20px; }
  .temoignage__citation { font-size: 18px; line-height: 1.5; margin-bottom: 22px; }
  .temoignage__pied { flex-wrap: wrap; gap: 12px; }
  .faq__q { padding: 20px 18px; font-size: 16px; gap: 14px; }
  .faq__r { padding: 0 18px 22px; font-size: 15px; }
  html.anim .faq__r { padding-top: 0; padding-bottom: 0; }
  html.anim .faq__r .accord__corps { padding-bottom: 22px; }
  .encart-cta, .megamenu__encart { padding: 22px 20px; }
  .livrable { padding: 24px 20px 26px; }
  .situation, .besoin, .cas__chiffre, .article-carte .card__corps { padding: 22px 20px; }
  .cas__chiffre-val { font-size: 36px; }
  .valeur-cle { font-size: 44px; }
  .valeur-cle span { font-size: 24px; }
  .rse__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .rse__chiffre-val { font-size: 24px; }
  .rse__chiffre-lib { font-size: 12px; }
  .resultat { padding: 22px 20px; }
  .resultat__chiffre { font-size: 27px; }

  /* pied de page empilé */
  .pied { padding: 48px 0; }
  .pied__grille { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .pied__bas { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pied__form { flex-direction: column; }
  .pied__form .btn { width: 100%; }

  /* CTA final */
  .cta-final__corps { padding: var(--section-y) var(--gouttiere); }
  .cta-bande { flex-direction: column; align-items: stretch; gap: 24px; }
  .cta-bande .btn { width: 100%; }

  .defile__groupe { gap: 28px; padding-right: 28px; font-size: 11px; }
  .blog__compte { margin-left: 0; width: 100%; }
  .profil__ligne { flex-direction: column; gap: 4px; }
  .profil__ligne-v { text-align: left; }
  .contact__fichier { flex-direction: column; align-items: stretch; }
  .contact__fichier-btn { justify-content: center; }
  .fleche-btn { width: 44px; height: 44px; }

  /* composants CDC en mobile */
  .barre-mobile { display: flex; }
  body { padding-bottom: 76px; }          /* place pour la barre fixe */
  .sousnav { display: none; }             /* sous-navigation : desktop seulement */
  .co2__equivalents { grid-template-columns: 1fr; gap: 10px; }
  .capture { padding: 22px 20px; }
  .capture__ligne { flex-direction: column; }
  .capture__ligne .btn, .capture__outils .btn { width: 100%; }
  .orientation__choix { flex-direction: column; }
  .orientation__choix button { width: 100%; }
  .prose h2 { font-size: 23px; margin-top: 34px; }
  .prose h3 { font-size: 18px; }
  .article__sommaire, .article__cta { padding: 20px 18px; }

  /* cibles tactiles : liens secondaires (pied, fil d'Ariane, réseaux) */
  .pied__liens a, .pied__social a, .pied__legal a, .fil-ariane a, .pied__coord a,
  .contact__coord a, .megamenu__jeton {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* le tiroir du panneau garde display:block : ses liens s'empilent */
  .panneau__tiroir a { display: block; min-height: 44px; padding: 12px 0; }
  .pied__liens { gap: 2px; }
  .pied__social { gap: 12px; row-gap: 0; }
  .pied__legal { gap: 18px; row-gap: 0; }
}

/* ---------- très petits écrans (≤ 380px) --------------------------------- */
@media (max-width: 380px) {
  :root { --gouttiere: 16px; }
  .h1 { font-size: 27px; }
  .hero__titre { font-size: 26px; }
  .cta-final__titre { font-size: 25px; }
  .entete__cta { font-size: 11px; padding: 11px 12px; }
  .rse__chiffres { grid-template-columns: 1fr; }
  .logos-clients { grid-template-columns: 1fr; }
  .temoignage__citation { font-size: 16px; }
}

/* ---------- impression --------------------------------------------------- */
@media print {
  .entete, .pied, .burger, .panneau, .voile-menu, .defile,
  .sousnav, .barre-mobile, .saut-contenu, .form-etat,
  [data-imprimer], [data-copier], .capture__ligne { display: none !important; }
  body { color: #000; background: #fff; padding-bottom: 0; }
  .deplie { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }

  /* fiche d'estimation : une page propre */
  .section, .section--sm, .section--xs, .hero-page { padding: 0 !important; background: #fff !important; }
  .card, .resultat, .capture, .co2__piste { border: 1px solid #999 !important; background: #fff !important; break-inside: avoid; }
  .etapes-nav, .compteur, [data-etape="1"], [data-etape="2"] { display: none !important; }
  .resultat__chiffre { color: #000 !important; }
  .co2__barre { background: #666 !important; }
  .duo, .grid-2, .grid-3, .grid-4 { display: block !important; }
}


/* =========================================================================
   SYSTÈME D'ANIMATION
   ─────────────────────────────────────────────────────────────────────────
   Règles : transform et opacity uniquement (aucune propriété qui recalcule
   la mise en page), 200–600 ms, une seule courbe `--ea`, déclenchement à
   l'entrée dans l'écran une seule fois. Les états initiaux sont conditionnés
   à `html.anim`, posée par le JS : sans JS, tout reste visible et en place.
   Tout est neutralisé en fin de fichier sous prefers-reduced-motion.
   ========================================================================= */

/* ---- 1. révélation générique, en cascade ------------------------------- */
[data-anim] {
  transition: opacity var(--d3) var(--ea), transform var(--d3) var(--ea);
  transition-delay: calc(var(--i, 0) * var(--pas, 80ms));
}
html.anim [data-anim]                 { opacity: 0; }
html.anim [data-anim="montee"]        { transform: translateY(16px); }
html.anim [data-anim="gauche"]        { transform: translateX(-24px); }
html.anim [data-anim="droite"]        { transform: translateX(24px); }
html.anim [data-anim="pop"]           { transform: scale(.94); }
html.anim [data-anim="ligne"]         { transform: translateY(18px); }
html.anim [data-anim].vu              { opacity: 1; transform: none; }

/* ---- 2. cartes --------------------------------------------------------- */
.card, .parcours__carte, .article-carte, .famille-detail, .cas__chiffre {
  transition: transform var(--d1) var(--ea), border-color var(--d1) var(--ea),
              box-shadow var(--d1) var(--ea);
}
.card--lien:hover, .parcours__carte:hover, .article-carte:hover {
  transform: translateY(-4px); border-color: var(--bleu);
  box-shadow: 0 12px 26px -16px rgba(26,43,54,.45);
}
.card .ms, .parcours__carte .ms, .article-carte .ms {
  transition: transform var(--d1) var(--ea);
}
.card--lien:hover .ms, .parcours__carte:hover .ms { transform: translateY(-3px) rotate(-4deg); }
.lien-fleche .fleche, .article-carte .fleche { transition: transform var(--d1) var(--ea); }
.lien-fleche:hover .fleche, .article-carte:hover .fleche { transform: translateX(4px); }

/* ---- 3. badges, puces, étiquettes -------------------------------------- */
.jeton, .badge, .profil__chip, .cycle__duree, .article-carte__tag,
.mention-delai, .processus__etape, .parcours__num {
  transition: color var(--d1) var(--ea), background-color var(--d1) var(--ea),
              border-color var(--d1) var(--ea), transform var(--d1) var(--ea);
}
.jeton:hover { background: var(--accent); border-color: var(--bleu); color: var(--bleu-f); }
.profil__chip:hover { color: var(--bleu-f); }
.profil__chip .ms { transition: transform var(--d1) var(--ea); }
.profil__chip:hover .ms { transform: scale(1.12); }
.puce::before { transition: transform var(--d1) var(--ea); }
.puce:hover::before { transform: scale(1.4); }

/* ---- 4. certifications, logos, aperçus --------------------------------- */
.logiciels__logo, .preuve__logo, .defile__groupe span {
  transition: transform var(--d1) var(--ea), box-shadow var(--d1) var(--ea),
              border-color var(--d1) var(--ea);
}
.logiciels__logo img { filter: grayscale(1); opacity: .78; transition: filter var(--d2) var(--ea), opacity var(--d2) var(--ea); }
.logiciels__logo:hover img { filter: none; opacity: 1; }
.logiciels__logo:hover, .preuve__logo:hover {
  transform: scale(1.04); box-shadow: 0 10px 20px -14px rgba(26,43,54,.5);
}
.ph--125, .ph--13, .preuve__apercus .card {
  transition: transform var(--d1) var(--ea), box-shadow var(--d1) var(--ea);
}
.preuve__apercus .card:hover, .ph--125:hover, .ph--13:hover {
  transform: translateY(-4px); box-shadow: 0 12px 26px -16px rgba(26,43,54,.4);
}

/* ---- 5. boutons : onde au clic, pulsation à l'envoi -------------------- */
.btn__onde {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: currentColor; opacity: .3;
  animation: onde var(--d2) var(--ea) forwards;
}
@keyframes onde { to { transform: scale(26); opacity: 0; } }
.btn[aria-busy="true"] { animation: pouls 1.4s ease-in-out infinite; }
@keyframes pouls { 50% { opacity: .68; } }

/* ---- 6. hero : titre ligne par ligne ----------------------------------- */
.hero__titre .mot { display: inline-block; }
/* Le titre du hero est l'élément LCP de la page : il entre par une translation
   seule, à pleine opacité, pour ne pas retarder le plus grand rendu. Le fondu
   est porté par ce qui l'entoure (badge, boutons, garanties). */
.hero__titre .mot[data-anim] { transition-duration: 260ms; }
html.anim .hero__titre .mot[data-anim] { opacity: 1; }

/* ---- 7. chiffres clés : trait qui se dessine --------------------------- */
html.anim [data-trait] { transform: scaleX(0); transform-origin: left center; }
[data-trait] { transition: transform var(--d3) var(--ea); }
html.anim [data-trait].trace { transform: none; }

/* ---- 8. bandeau défilant : piste pilotée en JS (transform) ------------- */
.defile__piste[data-js] { animation: none !important; }

/* ---- 9. onglets : indicateur qui glisse -------------------------------- */
.curseur-onglet {
  position: absolute; left: 0; top: 0; z-index: 0;
  background: var(--bleu); border-radius: var(--r-btn);
  transform-origin: top left; opacity: 0;
  transition: transform var(--d2) var(--ea), opacity var(--d1) var(--ea);
  pointer-events: none;
}
.curseur-onglet.pret { opacity: 1; }
html.anim .onglets, html.anim .blog__filtres, html.anim .familles { position: relative; }
html.anim .onglet, html.anim .famille { position: relative; z-index: 1; }
.avec-curseur .onglet[aria-selected="true"], .avec-curseur .onglet.actif,
.avec-curseur .famille[aria-selected="true"], .avec-curseur .famille[aria-pressed="true"] {
  background: transparent;
}
html.anim .explorateur__liste { position: relative; }
.avec-curseur .explorateur__onglet[aria-selected="true"] { border-left-color: transparent; }
.curseur-onglet--vertical { width: 3px; border-radius: 0; }
/* contenu du panneau : fondu-glissé sans saut */
.panneau-anime { animation: entre-panneau var(--d2) var(--ea) both; }
@keyframes entre-panneau { from { opacity: 0; transform: translateX(14px); } }
.explorateur__illu, .explorateur__photo { animation: none; }
.panneau-anime .explorateur__illu, .panneau-anime .explorateur__photo {
  animation: zoom-arriere var(--d4) var(--ea) both;
}
@keyframes zoom-arriere { from { opacity: 0; transform: scale(1.08); } }

/* ---- 10. cycle de vie -------------------------------------------------- */
.cycle__anneau { position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; }
.cycle__anneau > circle { stroke: var(--bord-fort); }
/* le cercle du masque doit rester blanc : c'est sa luminance qui révèle le tracé */
.cycle__anneau mask circle, .cycle__trace { stroke: #fff; }
html.anim .cycle__trace { stroke-dashoffset: 1; }
.cycle__trace { transition: stroke-dashoffset 900ms var(--ea) 250ms; }
.cycle.trace .cycle__trace { stroke-dashoffset: 0; }
.cycle.tourne .cycle__anneau { animation: cycle-tourne 90s linear infinite; }
@keyframes cycle-tourne { to { transform: rotate(360deg); } }

html.anim .cycle__noyau { transform: scale(.6); opacity: 0; }
.cycle__noyau { transition: transform var(--d3) var(--ea), opacity var(--d3) var(--ea); }
.cycle.trace .cycle__noyau { transform: none; opacity: 1; }

.cycle__noeud {
  transform: translate(-50%, -50%) scale(var(--e, 1));
  transition: transform var(--d2) var(--ea), background-color var(--d2) var(--ea),
              border-color var(--d2) var(--ea), color var(--d2) var(--ea),
              opacity var(--d2) var(--ea), box-shadow var(--d2) var(--ea);
  transition-delay: calc(300ms + var(--i, 0) * 110ms);
}
html.anim .cycle__noeud { --e: .4; opacity: 0; }
.cycle.trace .cycle__noeud { --e: 1; opacity: 1; }
.cycle__noeud:hover { --e: 1.05; box-shadow: 0 12px 24px -14px rgba(26,43,54,.5); }
.cycle__noeud[aria-selected="true"]:hover { --e: 1; }
.cycle__noeud.pop { --e: 1.08; transition-duration: var(--d1); transition-delay: 0s; }
.cycle__noeud.retrait { --e: .93; transition-duration: var(--d1); transition-delay: 0s; }
/* halo de l'étape active */
.cycle__noeud::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--bleu); opacity: 0; pointer-events: none;
}
.cycle.tourne .cycle__noeud[aria-selected="true"]::after { animation: halo 2s var(--ea) infinite; }
@keyframes halo {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}
html.anim .cycle__cote { opacity: 0; transform: translateX(28px); }
.cycle__cote { transition: opacity var(--d3) var(--ea), transform var(--d3) var(--ea); transition-delay: 1000ms; }
.cycle.trace .cycle__cote { opacity: 1; transform: none; }
/* échange de panneau : sortie 150 ms, entrée 250 ms */
.cycle__panneau { transition: opacity 150ms var(--ea), transform 150ms var(--ea); }
.cycle__panneau.sort { opacity: 0; transform: translateY(8px); }
.cycle__panneau.entre { animation: entre-cycle 250ms var(--ea) both; }
@keyframes entre-cycle { from { opacity: 0; transform: translateY(-8px); } }

/* ---- 11. processus : numéro d'étape avant le titre --------------------- */
/* le numéro d'étape entre avant le titre, le titre avant les puces ;
   l'illustration arrive du côté opposé au texte */

/* ---- 12. simulateur ---------------------------------------------------- */
.sim__val, .sim__val-chiffre { transition: transform var(--d2) var(--ea); }
.etape-anime { animation: glisse-etape var(--d2) var(--ea) both; }
@keyframes glisse-etape { from { opacity: 0; transform: translateX(24px); } }
.etape-anime--retour { animation-name: glisse-etape-retour; }
@keyframes glisse-etape-retour { from { opacity: 0; transform: translateX(-24px); } }
.resultat-pop { animation: pop-resultat var(--d3) var(--ea) both; }
@keyframes pop-resultat { from { opacity: 0; transform: scale(.96); } }

/* ---- 13. navigation ---------------------------------------------------- */
.megamenu { animation: entre-menu 150ms var(--ea) both; }
@keyframes entre-menu { from { opacity: 0; transform: translateY(-8px); } }
.panneau { animation: entre-panneau-mobile 150ms var(--ea) both; }
@keyframes entre-panneau-mobile { from { opacity: 0; transform: translateX(24px); } }
.voile-menu { animation: entre-voile 150ms var(--ea) both; }
@keyframes entre-voile { from { opacity: 0; } }
.entete { transition: box-shadow var(--d2) var(--ea); }
.entete__barre { transition: height var(--d2) var(--ea); }
.entete__logo img { transition: transform var(--d2) var(--ea); transform-origin: left center; }
.entete--compacte { box-shadow: 0 10px 24px -20px rgba(26,43,54,.55); }
.entete--compacte .entete__barre { height: 68px; }
.entete--compacte .entete__logo img { transform: scale(.9); }
.panneau__tiroir { transition: grid-template-rows var(--d2) var(--ea), visibility 0s linear var(--d2); }
/* accordéons dont le contenu est enveloppé par le JS (.accord__corps) */
html.anim .faq__r, html.anim .panneau__tiroir {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  padding-top: 0; padding-bottom: 0;
  transition: grid-template-rows var(--d2) var(--ea), visibility 0s linear var(--d2);
}
html.anim .faq__r.ouvert, html.anim .panneau__tiroir.ouvert {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows var(--d2) var(--ea), visibility 0s;
}
html.anim .accord__corps { min-height: 0; overflow: hidden; }
html.anim .faq__r .accord__corps { padding-bottom: 28px; }
html.anim .panneau__tiroir .accord__corps { padding: 6px 0 14px; }
/* le signe des accordéons pivote à l'ouverture */
.faq__q .signe, .deplier .signe, .panneau__bouton .signe, .cycle__ligne-btn .signe {
  display: inline-block; transition: transform var(--d2) var(--ea);
}
[aria-expanded="true"] > .signe, [aria-expanded="true"] .signe { transform: rotate(180deg); }

html.anim .barre-mobile { transform: translateY(110%); transition: transform var(--d2) var(--ea); }
html.anim .barre-mobile--montee { transform: none; }
html.anim .barre-mobile--repliee { transform: translateY(110%); }

/* ---- 14. mouvement réduit : état final, sans transition ---------------- */
@media (prefers-reduced-motion: reduce) {
  .cycle__ligne-detail, .cycle__ligne, .cycle__ligne-btn { transition: none !important; }
  html.anim [data-anim],
  html.anim [data-trait],
  html.anim .cycle__noyau,
  html.anim .cycle__cote {
    opacity: 1 !important; transform: none !important;
  }
  /* le nœud garde sa translation de positionnement : ce n'est pas une animation */
  html.anim .cycle__noeud {
    opacity: 1 !important; transform: translate(-50%, -50%) !important;
  }
  html.anim .cycle__trace { stroke-dashoffset: 0 !important; }
  .cycle.tourne .cycle__anneau,
  .cycle.tourne .cycle__noeud[aria-selected="true"]::after,
  .btn[aria-busy="true"] { animation: none !important; }
  .panneau-anime, .panneau-anime .explorateur__illu, .panneau-anime .explorateur__photo,
  .cycle__panneau.entre, .etape-anime, .resultat-pop,
  .megamenu, .panneau, .voile-menu { animation: none !important; }
  .btn__onde { display: none; }
  [data-anim], [data-trait], .card, .cycle__noeud, .cycle__panneau,
  .curseur-onglet, .entete, .entete__barre, .entete__logo img,
  .deplie, .panneau__tiroir, .co2__barre { transition: none !important; }
}