/* ==========================================================================
   Smart-Électricité - feuille de style globale
   Mobile first : base = 375px, puis md 768 / lg 1024 / xl 1280
   ========================================================================== */

/* Polices hébergées sur le site (pas d'appel à Google : RGPD). Sous-ensemble latin, licence SIL OFL.
   Phase 2 : copier assets/fonts/ dans le thème, chemins inchangés. */
/* Sora : titres de l'accueil (21 oct. 2026, demande de Sandro), sous-ensemble latin de Fontsource */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/sora-400.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; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/sora-600.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; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/sora-700.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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.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; }

:root {
  /* Couleurs */
  --color-primary:      #0080e8;
  --color-primary-dark: #01488d;
  --color-navy:         #14213d;
  --color-accent:       #fab102;
  --color-bg:           #f0f4f9;
  --color-surface:      #ffffff;
  --color-border:       #dedede;
  --color-text:         #000000;
  --color-text-muted:   #555f6e;
  --color-text-light:   #ffffff;

  /* Typographie */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;
  /* 28 oct. 2026 (demande de la direction) : TOUS les titres du site en Sora, tous les textes en Poppins.
     Source Serif 4 et Archivo ne sont plus utilisées. */
  --font-display: 'Sora', 'Poppins', sans-serif;
  --font-title:   'Sora', 'Poppins', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Espacements */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Rayons */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);

  /* Mise en page */
  --container-max: 1360px;
  --gutter: 1.25rem;
  --header-h: 72px;
  --gutter-wide: clamp(1.25rem, 3.5vw, 4rem);
}

@media (min-width: 768px)  { :root { --gutter: 2rem; } }
@media (min-width: 1024px) { :root { --header-h: 96px; } }

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
}
/* Prototype : tant que le JS n'a pas rempli <main>, le pied de page reste hors écran
   (sinon il s'affiche en haut puis saute en bas : décalage de mise en page, CLS) */
main:empty { min-height: 100vh; }

img, svg { display: block; max-width: 100%; }

::selection { background: rgba(0,128,232,.18); color: var(--color-navy); }
input, textarea { caret-color: var(--color-primary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary-dark); }

/* Un élément focalisé ne passe jamais sous l'en-tête fixe */
html { scroll-padding-top: calc(var(--header-h) + 1rem); }

a { color: var(--color-primary-dark); }

h1, h2, h3 { font-family: var(--font-heading); color: var(--color-navy); line-height: 1.2; margin: 0 0 var(--space-sm); }
h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--text-3xl); font-weight: 700; }
h3 { font-size: var(--text-xl);  font-weight: 600; }
@media (min-width: 1024px) { h1 { font-size: var(--text-5xl); } h3 { font-size: var(--text-2xl); } }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: none; padding-inline: var(--gutter-wide); }  /* header + footer : pleine largeur */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: fixed; top: var(--space-xs); left: var(--space-xs); z-index: 200;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface); color: var(--color-navy);
  font-weight: 600; border-radius: var(--radius-md);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Placeholders de contenu manquant (cf. CLAUDE.md §5) */
.placeholder { font-style: normal; border-bottom: 1px dashed currentColor; }

/* --- Boutons ------------------------------------------------------------- */

/* Texte blanc sur --color-primary = 4,0:1. Pour rester conforme WCAG AA, le libellé
   est en « grand texte » (≥ 18,66 px en gras → seuil 3:1). Ne pas réduire. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body); font-size: 1.1875rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn--primary { background: var(--color-primary); color: var(--color-text-light); }
/* Petits écrans : le libellé agrandi peut passer sur deux lignes plutôt que déborder */
@media (max-width: 479px) { .btn { display: block; white-space: normal; text-align: center; } }
.btn--primary:hover { background: var(--color-primary-dark); }

/* --- En-tête ------------------------------------------------------------- */
/* Blanc, collant, pleine largeur. Au scroll : se compacte et prend une ombre. */

#site-header { position: sticky; top: 0; z-index: 100; }

.site-header {
  position: relative; isolation: isolate;
  height: var(--header-h);
  color: var(--color-navy);
  transition: color .25s ease;
}
/* Le fond est sur un pseudo-élément : un backdrop-filter posé sur l'en-tête lui-même
   piégerait le menu mobile (position: fixed) dans la hauteur de l'en-tête. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-surface);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Après scroll : même hauteur, fond blanc et ombre douce */
.site-header.is-solid::before {
  border-bottom-color: var(--color-border);
  box-shadow: 0 6px 24px rgba(20,33,61,.07);
}
/* Posé sur un hero image (<body data-header="overlay">) : transparent, texte et logo blancs */
.site-header.is-overlay:not(.is-menu) { color: var(--color-text-light); }
.site-header.is-overlay:not(.is-menu)::before { background: transparent; }
.site-header.is-overlay:not(.is-menu) .site-logo img { filter: brightness(0) invert(1); }
.site-header.is-overlay:not(.is-menu) :focus-visible { outline-color: var(--color-text-light); }
/* Méga-menu ouvert : fond blanc plein, raccord avec le panneau */
.site-header.is-menu::before { background: var(--color-surface); border-bottom-color: var(--color-border); box-shadow: none; }

/* Sur fond blanc (pages sans hero image, ou après scroll) : verre dépoli, filet très fin,
   ombre diffuse au scroll. L'état « sur image » (.is-overlay) n'est pas concerné. */
.site-header:not(.is-overlay):not(.is-menu)::before {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: rgba(20,33,61,.07);
}
.site-header.is-solid:not(.is-overlay):not(.is-menu)::before {
  border-bottom-color: rgba(20,33,61,.06);
  box-shadow: 0 10px 30px -12px rgba(20,33,61,.14);
}

/* Voile sur la page quand un méga-menu est ouvert */
.nav-backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: rgba(20,33,61,.35);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.site-header.is-menu + .nav-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }

.site-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}

.site-logo { display: block; flex: none; margin-left: -0.5rem; }
.site-logo img { height: 64px; width: auto; transition: filter .25s ease; }
@media (min-width: 1024px) { .site-logo img { height: 80px; } }
/* Menu centré sur le milieu de la page (même axe que le texte du hero de l'accueil) : la zone du logo
   réserve la même largeur que le bouton de droite (19,5rem, + 0,5rem de marge négative du logo).
   À partir de 1440px seulement : avec quatre menus (Nous rejoindre, 16 oct. 2026), entre 1280 et 1439px
   le logo garde sa largeur naturelle pour que les entrées tiennent sur une ligne */
@media (min-width: 1440px) { .site-logo { flex-basis: 20rem; } }
@media (min-width: 1280px) { .nav-link, .nav-trigger { white-space: nowrap; } }

/* Bouton hamburger (mobile / tablette) */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; margin-right: -0.5rem;
  color: inherit; background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* Navigation - mobile : panneau plein écran */
.primary-nav {
  position: fixed; inset: var(--header-h) 0 0 0;
  padding: var(--space-sm) var(--gutter) var(--space-lg);
  overflow-y: auto;
  background: var(--color-surface); color: var(--color-navy);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.primary-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-item { border-bottom: 1px solid var(--color-border); }

.nav-link,
.nav-trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--space-sm) 0;
  font-family: var(--font-body); font-size: var(--text-lg); font-weight: 500; line-height: 1.3;
  color: inherit; text-decoration: none; text-align: left;
  background: none; border: 0; cursor: pointer;
}
.nav-trigger svg { width: 18px; height: 18px; flex: none; transition: transform .2s ease; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-link[aria-current="page"],
.nav-trigger.is-current { color: var(--color-primary-dark); font-weight: 600; }

.nav-panel[hidden] { display: none; }
.nav-panel__inner { padding: 0 0 var(--space-sm) var(--space-sm); }
.mega__intro, .mega__arrow, .mega__desc, .mega__apercus { display: none; }
.mega__links { list-style: none; margin: 0; padding: 0; }
.mega__links a {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0.55rem 0;
  color: var(--color-navy); text-decoration: none;
}
.mega__links a:hover { color: var(--color-primary); }
.mega__links a[aria-current="page"] { color: var(--color-primary-dark); font-weight: 600; }

.primary-nav__cta { margin-top: var(--space-md); }
.primary-nav__cta .btn { width: 100%; }

/* Navigation - desktop */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }

  .primary-nav {
    position: static; inset: auto; flex: 1;
    display: flex; align-items: center; gap: var(--space-md);
    padding: 0; overflow: visible;
    background: none; color: inherit;
    visibility: visible; opacity: 1; transform: none; transition: none;
  }
  .primary-nav, .nav-list { height: 100%; }
  .nav-list { display: flex; align-items: stretch; gap: 0.25rem; margin-inline: auto; }
  /* Les entrées occupent toute la hauteur : pas de trou entre le bouton et le panneau */
  .nav-item { display: flex; align-items: center; border: 0; }

  .nav-link,
  .nav-trigger {
    position: relative; width: auto; gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-base);
  }
  .nav-trigger svg { width: 14px; height: 14px; }

  /* Trait sous l'entrée active / survolée */
  .nav-link::after,
  .nav-trigger::after {
    content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.1rem;
    height: 2px; background: var(--color-primary); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
  }
  /* Fond blanc : entrées en pastille au survol, entrée active en bleu foncé, bouton légèrement en relief */
  .site-header:not(.is-overlay) .nav-link,
  .site-header:not(.is-overlay) .nav-trigger { border-radius: 999px; transition: background-color .2s ease, color .2s ease; }
  .site-header:not(.is-overlay) .nav-link:hover,
  .site-header:not(.is-overlay) .nav-trigger:hover,
  .site-header:not(.is-overlay) .nav-trigger[aria-expanded="true"] { color: var(--color-primary-dark); background: rgba(0,128,232,.07); }
  .site-header:not(.is-overlay) .nav-link[aria-current="page"],
  .site-header:not(.is-overlay) .nav-trigger.is-current { color: var(--color-primary-dark); }
  .site-header:not(.is-overlay) .nav-link::after,
  .site-header:not(.is-overlay) .nav-trigger::after { left: 50%; right: auto; width: 1.25rem; bottom: 0.15rem; transform: translateX(-50%) scaleX(0); transform-origin: center; }
  .site-header:not(.is-overlay) .nav-link:hover::after,
  .site-header:not(.is-overlay) .nav-trigger:hover::after,
  .site-header:not(.is-overlay) .nav-trigger[aria-expanded="true"]::after,
  .site-header:not(.is-overlay) .nav-link[aria-current="page"]::after,
  .site-header:not(.is-overlay) .nav-trigger.is-current::after { transform: translateX(-50%) scaleX(1); }
  .site-header:not(.is-overlay) .primary-nav__cta .btn { box-shadow: 0 6px 18px -6px rgba(0,128,232,.55); transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
  .site-header:not(.is-overlay) .primary-nav__cta .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(1,72,141,.6); }

  .nav-link:hover::after, .nav-trigger:hover::after,
  .nav-trigger[aria-expanded="true"]::after,
  .nav-link[aria-current="page"]::after, .nav-trigger.is-current::after { transform: scaleX(1); }
  /* Même graisse pour l'entrée active : le gras décalait les entrées voisines */
  .nav-link[aria-current="page"], .nav-trigger.is-current { color: inherit; font-weight: 500; }

  /* Méga-menu : panneau blanc pleine largeur sous l'en-tête */
  .nav-panel {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
    background: var(--color-surface); color: var(--color-navy);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 24px 48px rgba(20,33,61,.14);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s;
  }
  .nav-panel[hidden] { display: block; }
  .nav-trigger[aria-expanded="true"] + .nav-panel { clip-path: inset(0 0 -60px 0); visibility: visible; transition-delay: 0s; }

  /* Contenu : rubrique en serif à gauche, liens texte séparés par des filets, pied de panneau sobre (14 oct. 2026) */
  .nav-panel__inner {
    display: grid; grid-template-columns: minmax(260px, 22rem) 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start;
    padding: var(--space-md) var(--gutter-wide);
  }
  .nav-panel__inner { opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
  .nav-trigger[aria-expanded="true"] + .nav-panel .nav-panel__inner { opacity: 1; transform: none; transition-delay: .06s; }

  /* Bloc bleu clair à gauche, léger dégradé */
  /* Appel à l'action : s'étire sur toute la hauteur de la liste des pages, bouton calé en bas */
  .mega__intro {
    align-self: stretch;
    display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-md);
    border-radius: var(--radius-lg);
    background: radial-gradient(110% 90% at 100% 100%, rgba(0,128,232,.1), transparent 65%), var(--color-bg);
    border: 1px solid rgba(0,128,232,.1);
  }
  .mega__title {
    display: block; margin: 0;
    font-family: var(--font-title); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
    color: var(--color-navy);
  }
  .mega__title::after { content: ""; display: block; width: 2.5rem; height: 2px; margin-top: 0.6rem; background: var(--color-accent); }
  .mega__lead { margin: 0.75rem 0 1rem; font-size: var(--text-sm); line-height: 1.65; color: var(--color-text-muted); }
  .mega__intro-btn { margin-top: auto; padding: 0.6rem 1.15rem; font-size: var(--text-sm); }

  /* Pages rangées par colonne (de haut en bas, puis colonne suivante) */
  /* Liens aérés : la liste s'étire sur la hauteur de l'encadré (ou du sommaire), l'espace se répartit entre les lignes */
  .mega__links { align-self: stretch; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 1), 1fr); grid-auto-flow: column; column-gap: var(--space-lg); }
  .mega__links li { border-bottom: 1px solid rgba(20,33,61,.1); }
  .mega__links a {
    position: relative;
    align-items: center; justify-content: space-between; gap: var(--space-sm);
    height: 100%; padding: 0.6rem 0;
  }
  .mega__links a:hover { color: var(--color-navy); }
  /* Filet bleu qui se trace sous le lien survolé */
  .mega__links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
  }
  .mega__links a:is(:hover, :focus-visible, .is-active)::after, .mega__links a[aria-current="page"]::after { transform: scaleX(1); }
  .mega__text { display: block; }
  .mega__label { display: block; font-weight: 500; line-height: 1.35; color: var(--color-navy); transition: color .2s ease; }
  .mega__desc { display: none; margin-top: 0.15rem; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }
  .mega__arrow {
    display: block; flex: none; margin-top: 0.1rem; color: var(--color-primary);
    opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .25s ease;
  }
  .mega__arrow svg { display: block; width: 18px; height: 18px; }
  .mega__links a:is(:hover, :focus-visible, .is-active) .mega__label,
  .mega__links a[aria-current="page"] .mega__label { color: var(--color-primary-dark); }
  .mega__links a:is(:hover, :focus-visible, .is-active) .mega__arrow { opacity: 1; transform: none; }
  .mega__links a[aria-current="page"] { font-weight: 400; }
  .mega__links a[aria-current="page"] .mega__label { font-weight: 600; }
  /* Nos solutions : un seul service en avant à la fois, celui qui porte .is-active (la page en cours par défaut,
     puis celui survolé) ; la page en cours ne reste pas soulignée quand on en survole un autre (18 oct. 2026) */
  .nav-panel__inner--apercu .mega__links a[aria-current="page"]:not(.is-active)::after { transform: scaleX(0); }
  .nav-panel__inner--apercu .mega__links a[aria-current="page"]:not(.is-active) .mega__label { color: var(--color-navy); }

  /* Nos solutions : services en colonne, sommaire de la page survolée à droite (titres numérotés, liens vers les sections) */
  .nav-panel__inner--apercu { grid-template-columns: minmax(260px, 22rem) minmax(0, 26rem) minmax(0, 1fr); }
  /* Nous rejoindre : une colonne de pages, à la largeur de celle de Nos solutions */
  .nav-panel__inner--colonne { grid-template-columns: minmax(260px, 22rem) minmax(0, 26rem); }
  .mega__apercus { display: block; align-self: stretch; padding-left: clamp(2rem, 4vw, 4rem); border-left: 1px solid var(--color-border); }
  .mega__apercus-titre { margin: 0.2rem 0 0.4rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-muted); }
  .mega__apercus-stack { display: grid; }
  .mega__apercus-stack > .mega__apercu { grid-area: 1 / 1; }
  .mega__apercus-stack > .mega__apercu[hidden] { display: grid; visibility: hidden; }
  .mega__apercu { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; counter-reset: sommaire; }
  .mega__apercu:not([hidden]) li { animation: mega-sommaire .35s ease both; }
  .mega__apercu li:nth-child(2) { animation-delay: .04s; }
  .mega__apercu li:nth-child(3) { animation-delay: .08s; }
  .mega__apercu li:nth-child(4) { animation-delay: .12s; }
  .mega__apercu li:nth-child(5) { animation-delay: .16s; }
  .mega__apercu a {
    display: flex; align-items: baseline; gap: 1rem; padding: 0.22rem 0; line-height: 1.45;
    font-size: var(--text-base); font-weight: 500; color: var(--color-navy); text-decoration: none;
    transition: color .2s ease, transform .2s ease;
  }
  .mega__apercu a::before {
    counter-increment: sommaire; content: counter(sommaire, decimal-leading-zero);
    flex: none; min-width: 1.6rem; font-family: var(--font-title); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary);
  }
  .mega__apercu a:hover { color: var(--color-primary-dark); transform: translateX(3px); }
  @keyframes mega-sommaire { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @media (max-width: 1279px) {
    .nav-panel__inner--apercu { grid-template-columns: 17rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
    .mega__apercus { padding-left: var(--space-lg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .mega__apercu:not([hidden]) li { animation: none; }
    .nav-panel__inner, .mega__arrow, .mega__links a::after { transition: none; transform: none; }
  }

  /* Position identique sur toutes les pages : le libellé du bouton change (CTA_PAGES), pas sa largeur,
     calée sur le plus long (« Demander un audit complet ») ; le menu, centré entre logo et bouton, ne bouge plus */
  .primary-nav__cta { flex: none; margin: 0; }
  .primary-nav__cta .btn { width: 19.5rem; padding-inline: 1rem; justify-content: center; text-align: center; }
}

/* --- Pied de page -------------------------------------------------------- */

.site-footer {
  background: var(--color-navy); color: rgba(255,255,255,.78);
  font-size: 0.9375rem; line-height: 1.7;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--color-text-light); text-decoration: underline; text-underline-offset: 4px; }
.site-footer a[aria-current="page"] { color: var(--color-text-light); }
.site-footer :focus-visible { outline-color: var(--color-text-light); }

.site-footer__main {
  display: grid; gap: var(--space-xl);
  padding-block: var(--space-xl);
}

.footer-brand > a img { height: 72px; width: auto; margin-left: -0.7rem; filter: brightness(0) invert(1); }
.footer-brand__tagline {
  margin: var(--space-sm) 0 var(--space-md); max-width: 28ch;
  font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; line-height: 1.3; color: var(--color-text-light);
}

.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-contact li { display: flex; gap: 0.75rem; align-items: center; }
.footer-contact svg { width: 16px; height: 16px; flex: none; color: rgba(255,255,255,.55); }

.footer-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); align-content: start; }

.footer-col h2 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.01em; color: rgba(255,255,255,.55);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer-col li { line-height: 1.45; }

/* Logos SCE et Bureau Veritas : petites tuiles blanches sous les coordonnées */
.footer-trust { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.footer-trust .trust-logo { padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); }
.footer-trust .trust-logo img { height: 46px; max-width: 170px; }

.site-footer__legal { font-size: var(--text-xs); color: rgba(255,255,255,.6); }
.site-footer__legal-inner { display: grid; gap: 0.25rem; padding-block: var(--space-md); border-top: 1px solid rgba(255,255,255,.12); }
.site-footer__legal p { margin: 0; }
.footer-cookies { padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; cursor: pointer; }
.footer-cookies:hover { color: var(--color-text-light); }

/* --- Bandeau cookies : bas d'écran, deux boutons de même poids (CNIL) -------- */
.cookie-banner {
  position: fixed; z-index: 90; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm);
  max-width: 34rem; padding: var(--space-md); border-radius: var(--radius-lg);
  color: var(--color-text-light); background: var(--color-navy); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); line-height: 1.6;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__title { margin: 0 0 0.4rem; font-size: var(--text-base); color: var(--color-text-light); }
.cookie-banner p { margin: 0; color: rgba(255,255,255,.85); }
.cookie-banner a { color: var(--color-text-light); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); margin-top: var(--space-sm); }
.cookie-banner__btn { padding-block: 0.7rem; color: var(--color-navy); background: var(--color-text-light); border: 2px solid var(--color-text-light); }
.cookie-banner__btn:hover { background: transparent; color: var(--color-text-light); }
.cookie-banner :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (min-width: 768px) { .cookie-banner { left: var(--space-lg); bottom: var(--space-lg); } }

@media (min-width: 768px) {
  .footer-columns { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .site-footer__main { grid-template-columns: minmax(280px, 1fr) 2.4fr; gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-2xl); }
  .site-footer__legal-inner { grid-template-columns: auto 1fr auto; gap: var(--space-lg); align-items: center; }
  .site-footer__legal-inner p:nth-child(2) { text-align: center; }
}

/* --- Boutons (variantes) ------------------------------------------------- */

.btn--outline { color: var(--color-navy); border-color: var(--color-navy); background: transparent; }
.btn--outline:hover { background: var(--color-navy); color: var(--color-text-light); }
/* Jaune de la charte : bouton principal sur fond navy (hero de l'accueil, CTA final). Texte navy sur jaune = 8,7:1. */
.btn--accent { background: var(--color-accent); color: var(--color-navy); }
.btn--accent:hover { background: #ffc633; }
.btn--outline-light { color: var(--color-text-light); border-color: rgba(255,255,255,.7); background: transparent; }
.btn--outline-light:hover { background: var(--color-text-light); color: var(--color-navy); border-color: var(--color-text-light); }

.link-more {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; color: var(--color-primary-dark); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color .2s ease, gap .2s ease;
}
.link-more svg { width: 18px; height: 18px; }
.link-more:hover { border-bottom-color: currentColor; gap: 0.75rem; }

/* --- Sections ------------------------------------------------------------ */

.section { padding-block: var(--space-xl); }
@media (min-width: 1024px) { .section { padding-block: var(--space-2xl); } }
.section--white { background: var(--color-surface); }
.section--bg    { background: var(--color-bg); }
.section--navy  {
  position: relative; overflow: hidden; color: rgba(255,255,255,.82);
  background:
    radial-gradient(55% 70% at 90% 0%, rgba(0,128,232,.30), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(0,128,232,.14), transparent 70%),
    var(--color-navy);
}
.section--navy h2, .section--navy h3 { color: var(--color-text-light); }

h2 { font-size: clamp(1.75rem, 1.15rem + 1.8vw, 2.5rem); letter-spacing: -0.02em; }

.section-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.section-head h2 { margin: 0; max-width: 22ch; }
.section-head p { margin: 0; max-width: 56ch; color: var(--color-text-muted); }
.section-head.section-head--stack { gap: var(--space-md); margin-bottom: var(--space-2xl); }
.section-head--stack h2 { max-width: 26ch; font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); line-height: 1.08; }
@media (min-width: 1024px) { .section-head.section-head--stack { margin-bottom: 7rem; } }
.section-head--stack p { max-width: 70ch; font-size: var(--text-lg); }
.section--navy .section-head p { color: rgba(255,255,255,.8); }
@media (min-width: 1024px) {
  .section-head { margin-bottom: var(--space-xl); }
  .section-head--split { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--space-2xl); }
  /* Titre plus long, en deux lignes imposées (Taxes, 19 oct. 2026) : la colonne du titre s'élargit */
  .section-head--titre-large { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.section-foot { margin: var(--space-lg) 0 0; }

.prose p { max-width: 62ch; margin: 0 0 var(--space-sm); }
.prose p:last-child { margin-bottom: 0; }

.split { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  
}

/* --- Bouton principal + numéro souligné dessous (heroes : accueil, services, secteurs) ---- */
.cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.cta-stack--center { align-items: center; }
.cta-stack .btn { padding: 1rem 2rem; }
@media (max-width: 479px) { .cta-stack { align-items: stretch; } .cta-stack .cta-call { text-align: center; } }
.cta-call { font-weight: 600; color: var(--color-navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cta-call:hover { text-decoration-thickness: 2px; }
.cta-stack--light .cta-call { color: var(--color-text-light); }

/* --- Badges de confiance (SCE / Bureau Veritas) -------------------------- */

.trust-badges { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.trust-badge {
  --logo-w: 104px; --logo-h: 44px;
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0.6rem 1.1rem; min-height: 64px;
  background: var(--color-surface); color: var(--color-navy); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500; line-height: 1.35;
}
.trust-badge__logo { flex: none; width: var(--logo-w); height: var(--logo-h); overflow: hidden; display: grid; place-items: center; }
.trust-badge__logo img { width: 100%; height: 100%; object-fit: contain; }
/* Le PNG du SCE est un carré 1500×1500 avec le logo petit au centre : on le recadre. */
.trust-badge__title { display: block; }
.trust-badge__detail { display: block; margin-top: 0.25rem; font-weight: 400; color: var(--color-text-muted); }

.trust-badge--sm { --logo-w: 72px; --logo-h: 30px; min-height: 0; padding: 0.35rem 0.8rem; border: 1px solid var(--color-border); }
/* Logo seul, grand, sur tuile blanche (hero, footer) */

.trust-logo {
  display: flex; align-items: center;
  padding: 0.6rem 0.9rem;
  background: var(--color-surface); border-radius: var(--radius-md);
}
.trust-logo img { height: 34px; width: auto; max-width: 200px; object-fit: contain; }
@media (min-width: 768px) { .trust-logo img { height: 48px; } }
@media (min-width: 1024px) { .trust-logo { padding: 0.85rem 1.4rem; } .trust-logo img { height: 58px; max-width: 240px; } }
.trust-badge--card { flex-direction: column; align-items: flex-start; padding: var(--space-md); background: var(--color-surface); box-shadow: var(--shadow-sm); font-size: var(--text-base); min-height: 0; }
@media (min-width: 1280px) { .trust-badge--card { flex-direction: row; } }
.trust-badge--card .trust-badge__title { font-weight: 600; color: var(--color-navy); }

/* --- Hero accueil : image plein cadre ------------------------------------ */

body[data-header="overlay"] #site-header { position: fixed; inset: 0 0 auto 0; }

.hero { background: var(--color-navy); }

.hero__frame {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: min(100svh, 980px);
  padding: calc(var(--header-h) + var(--space-md)) var(--gutter-wide) var(--space-lg);
  color: var(--color-text-light); background: var(--color-navy);
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  animation: hero-zoom 2.6s cubic-bezier(.2,.7,.2,1) both;
}
/* Voile navy : lisibilité du texte à gauche, du panneau chiffres en bas */
.hero__frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(20,33,61,.94) 0%, rgba(20,33,61,.72) 50%, rgba(20,33,61,.78) 100%);
}
@media (min-width: 1024px) {
  .hero__frame::before {
    background:
      linear-gradient(90deg, rgba(20,33,61,.95) 0%, rgba(20,33,61,.85) 38%, rgba(20,33,61,.35) 72%, rgba(20,33,61,.15) 100%),
      linear-gradient(0deg, rgba(20,33,61,.85) 0%, rgba(20,33,61,0) 40%);
  }
}

.hero__content {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  max-width: 52rem; padding-block: var(--space-sm) var(--space-lg);
}
.hero h1 {
  color: var(--color-text-light);
  font-size: clamp(1.9rem, 1.1rem + 2vw, 2.9rem); font-weight: 800;
  line-height: 1.06; letter-spacing: -0.03em;
  max-width: 24ch; margin-bottom: var(--space-md);
}
.hero__lead { margin: 0 0 var(--space-lg); max-width: 64ch; font-size: 0.9375rem; color: rgba(255,255,255,.84); }
@media (min-width: 768px) { .hero__lead { font-size: var(--text-base); } }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.hero__actions .btn { flex: 1 1 auto; padding-block: 0.9rem; }
@media (min-width: 768px) { .hero__actions .btn { flex: none; } }

/* Seul moment d'entrée orchestré du site : l'image se pose, le texte monte, le panneau suit. */
@keyframes hero-zoom { from { transform: scale(1.1); } to { transform: none; } }
@keyframes rise { from { transform: translateY(20px); } to { transform: none; } }   /* sans opacité : contenu visible dès le premier affichage (6 nov. 2026) */
.hero__content > *, .hero .stats { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero__content > :nth-child(1) { animation-delay: .15s; }
.hero__content > :nth-child(2) { animation-delay: .25s; }
.hero__content > :nth-child(3) { animation-delay: .35s; }
.hero__content > :nth-child(4) { animation-delay: .45s; }
.hero .stats { animation-delay: .6s; }

/* --- Bandeau chiffres : ligne compacte ----------------------------------- */

.stats { padding-block: var(--space-lg); background: var(--color-navy); color: var(--color-text-light); }
.stats--overlay { padding: 0; background: none; }

.kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--space-sm) 0; }
.kpi { display: flex; flex-direction: column; gap: 0.2rem; padding: 0 var(--space-md); border-left: 1px solid rgba(255,255,255,.28); }
.kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
.kpi__value { font-size: var(--text-2xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-light); }
.kpi__unit { margin-left: 0.2rem; font-size: 0.6em; font-weight: 600; letter-spacing: 0; }
.kpi__label { font-size: var(--text-xs); line-height: 1.35; color: rgba(255,255,255,.78); max-width: 10rem; }
@media (min-width: 768px) {
  .kpis { grid-template-columns: repeat(4, auto); }
  .kpi:nth-child(odd) { padding-left: var(--space-md); border-left: 1px solid rgba(255,255,255,.28); }
  .kpi:first-child { padding-left: 0; border-left: 0; }
  .kpi__value { font-size: var(--text-3xl); }
  .kpi__label { font-size: var(--text-sm); }
}

/* --- Panel de fournisseurs : catégories + logos sur la carte -------------- */

.panel-lead { margin: 0 0 var(--space-lg); max-width: 52ch; font-size: var(--text-lg); color: var(--color-text-muted); }

.cat-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.cat-tab {
  padding: 0.65rem 1.1rem; cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--color-navy);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.cat-tab:hover { border-color: var(--color-navy); }
.cat-tab[aria-selected="true"] { color: var(--color-text-light); background: var(--color-navy); border-color: var(--color-navy); }
.cat-panel { margin-top: var(--space-md); max-width: 52ch; color: var(--color-text-muted); animation: rise .35s ease both; }
.cat-panel p { margin: 0; }

.fr-map { position: relative; width: 100%; max-width: 580px; margin-inline: auto; }
.fr-map__dots { width: 100%; height: auto; opacity: .2; }

.fr-logos { list-style: none; margin: 0; padding: 0; }
.fr-logo {
  position: absolute; left: var(--x); top: var(--y);
  display: flex; align-items: center; justify-content: center;
  width: 140px; height: 68px; padding: 0.85rem 1.1rem;
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(20,33,61,.14);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -50%) scale(.85);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s;
}
.fr-logo img { min-width: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Groupe actif : les logos apparaissent un à un puis flottent doucement */
.fr-logos.is-active .fr-logo {
  opacity: 1; visibility: visible; transform: translate(-50%, -50%);
  transition-delay: calc(var(--i) * 70ms); transition-duration: .35s, .45s, 0s;
  animation: float 6s ease-in-out calc(var(--i) * -1.1s) infinite;
}
@keyframes float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@media (max-width: 767px) {
  .fr-logo { width: 92px; height: 46px; padding: 0.45rem 0.6rem; border-radius: var(--radius-md); }

}

/* --- Expérience ---------------------------------------------------------- */

.founder { position: relative; max-width: 32rem; width: 100%; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.founder img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; background: var(--color-surface); }
.founder figcaption {
  position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm);
  padding: 0.9rem 1.1rem; border-radius: var(--radius-lg);
  color: var(--color-text-light); background: rgba(20,33,61,.55);
  border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  line-height: 1.4;
}
.founder figcaption strong { display: block; font-weight: 600; }
.founder figcaption span { font-size: var(--text-sm); color: rgba(255,255,255,.85); }

.doing__quote p { margin: 0; }
.doing__statement { margin: var(--space-md) 0 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.5; color: var(--color-navy); }
.journey__link { color: inherit; text-decoration: none; }
.journey__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* Les ancres internes (piliers) ne passent pas sous l'en-tête collant */
.section h2[id] { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
.doing__quote cite { display: block; margin-top: 0.4rem; font-size: var(--text-sm); font-style: normal; font-weight: 500; color: var(--color-text-muted); }
.pullquote {
  margin: var(--space-md) 0 0; padding: 0.25rem 0 0.25rem var(--space-md);
  border-left: 3px solid var(--color-accent);
  font-size: var(--text-lg); font-weight: 500; line-height: 1.5; color: var(--color-navy);
}

/* --- Chaîne de valeur : maillons cliquables (onglets) -------------------- */

.flow { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.flow li { position: relative; z-index: 1; display: flex; }
.flow__tab {
  flex: 1; display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md); text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  background: #1c2a49; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.flow__tab:hover { background: #223358; border-color: rgba(255,255,255,.25); }
.flow__tab[aria-selected="true"] { background: linear-gradient(160deg, #0d4f96, #13315f); border-color: rgba(0,128,232,.8); }
.flow__icon {
  flex: none; width: 56px; height: 56px; display: grid; place-items: center;
  color: var(--color-text-light);
  background: rgba(0,128,232,.2); border: 1px solid rgba(0,128,232,.55); border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(0,128,232,.08);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.flow__tab[aria-selected="true"] .flow__icon { background: var(--color-primary); box-shadow: 0 0 0 8px rgba(0,128,232,.18), 0 0 28px rgba(0,128,232,.6); }
.flow__icon svg { width: 24px; height: 24px; }
.flow__tab strong { display: block; font-size: var(--text-lg); font-weight: 600; color: var(--color-text-light); }
.flow__tab strong + span { display: block; font-size: var(--text-sm); color: rgba(255,255,255,.78); line-height: 1.45; }

.flow-panel { margin-top: var(--space-lg); animation: rise .4s cubic-bezier(.2,.7,.2,1) both; }
.flow-panel:focus-visible { outline-offset: 8px; }
.flow-panel[hidden] { display: none; }
.flow-panel h3 { margin: 0 0 0.5rem; font-size: var(--text-xl); }
.flow-panel p { margin: 0 0 var(--space-sm); max-width: 72ch; }
.flow-panel .link-more { color: #8fd0ff; }

@media (min-width: 1024px) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
  .flow__tab { flex-direction: column; align-items: flex-start; }
  /* Ligne qui relie les maillons, parcourue par une impulsion lumineuse */
  .flow::before, .flow::after {
    content: ""; position: absolute; z-index: 0; left: 12%; right: 12%; top: 52px; height: 2px;
  }
  .flow::before { background: rgba(255,255,255,.14); }
  .flow::after {
    background: linear-gradient(90deg, transparent, var(--color-primary), #8fd0ff, transparent) no-repeat;
    background-size: 25% 100%;
    animation: pulse 3.6s linear infinite;
  }
  @keyframes pulse { from { background-position: -40% 0; } to { background-position: 140% 0; } }
  .flow-panel { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-lg); align-items: start; }
  .flow-panel h3 { margin: 0; }
}

/* --- Cartes (au-delà du conseil) ----------------------------------------- */

.cards-2 { display: grid; gap: var(--space-md); }
@media (min-width: 768px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
.card-link {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-lg); height: 100%;
  color: inherit; text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card-link::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.card-link:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card-link:hover::before { transform: scaleX(1); }
.card-link h3 { margin: 0; font-size: var(--text-2xl); }
.card-link p { margin: 0; color: var(--color-text-muted); flex: 1; }

/* --- Encadré confiance (partial) ----------------------------------------- */

.trust-box__panel { padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-xl); display: grid; gap: var(--space-md); }
.trust-box__badges { display: grid; gap: var(--space-sm); }
.trust-box__text p { margin: 0; }
.trust-box__lead { font-weight: 600; color: var(--color-navy); }
@media (min-width: 768px) {
  .trust-box__panel { padding: var(--space-lg); }
  .trust-box__badges { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .trust-box__panel.is-compact { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-lg); }
  .trust-box__panel.is-compact .trust-box__badges { grid-template-columns: none; grid-auto-flow: column; }
}

/* --- Certifications (encadré confiance détaillé) ------------------------- */

.split--top { align-items: start; }

.certs { display: grid; }
.cert { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); padding-block: var(--space-md); border-top: 1px solid var(--color-border); }
.cert:first-child { padding-top: 0; border-top: 0; }
.cert__logo { display: grid; place-items: center; width: 180px; height: 96px; padding: 0.75rem 1rem; background: var(--color-bg); border-radius: var(--radius-lg); }
.cert__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cert h3 { margin: 0 0 0.35rem; font-size: var(--text-lg); }
.cert p { margin: 0; color: var(--color-text-muted); }
@media (min-width: 768px) { .cert { grid-template-columns: 180px 1fr; gap: var(--space-md); align-items: center; } }

.cert-statement { display: flex; gap: var(--space-sm); align-items: flex-start; padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.cert-statement p { margin: 0; }
.cert-statement strong { color: var(--color-navy); font-weight: 600; }
.cert-statement__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-primary-dark); background: rgba(0,128,232,.12); }
.cert-statement__icon svg { width: 22px; height: 22px; }

/* --- Témoignages (partial) : carrousel ----------------------------------- */

.tcar { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) { .tcar { grid-template-columns: 1fr 2fr; gap: var(--space-2xl); align-items: center; } }
.tcar__aside h2 { margin: 0; }
.tcar__controls { display: flex; align-items: center; gap: var(--space-sm); }
.tcar__btn {
  display: grid; place-items: center; width: 52px; height: 52px; cursor: pointer;
  color: var(--color-navy); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 50%;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tcar__btn svg { width: 20px; height: 20px; }
.tcar__btn:hover { color: var(--color-text-light); background: var(--color-navy); border-color: var(--color-navy); }
.tcar__count { margin: 0; min-width: 3.5rem; text-align: center; font-weight: 600; color: var(--color-navy); font-variant-numeric: tabular-nums; }

.tcar__slide { margin: 0; animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
.tcar__mark { width: 44px; height: 44px; color: var(--color-primary); }
.tcar__slide blockquote {
  margin: var(--space-sm) 0 var(--space-lg);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em;
  color: var(--color-navy);
}
.tcar__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.tcar__who { display: flex; align-items: center; gap: 0.85rem; font-size: var(--text-sm); line-height: 1.4; }
.tcar__who strong { display: block; font-size: var(--text-base); font-weight: 600; color: var(--color-navy); }
.tcar__who span span { display: block; color: var(--color-text-muted); }
.tcar__aside h2 + .tcar__controls { margin-top: var(--space-md); }
.tcar__avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--color-bg); }
.tcar__result { display: flex; align-items: baseline; gap: 0.5rem; }
.tcar__result strong { font-size: var(--text-3xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--color-primary-dark); }
.tcar__result span { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 12rem; line-height: 1.3; }

/* --- CTA final (partial) : panneau image ---------------------------------- */

.cta-final { padding-block: 0 var(--space-xl); }
@media (min-width: 1024px) { .cta-final { padding-bottom: var(--space-2xl); } }
.cta-final__panel {
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--space-xl) var(--space-md);
  border-radius: var(--radius-xl); color: rgba(255,255,255,.88); background: var(--color-navy);
}
@media (min-width: 1024px) { .cta-final__panel { padding: var(--space-2xl) var(--space-xl); } }
.cta-final__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.cta-final__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(1,72,141,.96) 0%, rgba(20,33,61,.86) 50%, rgba(20,33,61,.82) 100%);
}
@media (min-width: 768px) {
  .cta-final__panel::before { background: linear-gradient(100deg, rgba(1,72,141,.96) 0%, rgba(20,33,61,.86) 50%, rgba(20,33,61,.45) 100%); }
}
.cta-final__inner { max-width: 44rem; }
.cta-final h2 { color: var(--color-text-light); }
.cta-final p { margin: 0 0 var(--space-lg); font-size: var(--text-lg); max-width: 52ch; }
.cta-final__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.cta-final__actions .btn { flex: 1 1 auto; }
@media (min-width: 768px) { .cta-final__actions .btn { flex: none; } }
@media (max-width: 479px) { .cta-final__actions .btn { padding-inline: 1rem; font-size: 1.0625rem; } }   /* libellés sur une ligne */

/* ==========================================================================
   Accueil (refonte du 13 oct. 2026, 2e passe) : hero + widget Smart-Detect, carte des fournisseurs,
   qui sommes-nous (photo de l'équipe), aperçu de rapport Smart-Detect, trois parts de la facture,
   témoignages en colonnes alternées. Jaune limité au bouton et aux pastilles sur navy ;
   jamais en couleur de texte sur fond blanc (1,85:1).
   ========================================================================== */

/* --- Apparition au défilement (22 oct. 2026, demande de Sandro) : tous les blocs montent plus lentement et d'un peu plus bas,
   du même mouvement, sur l'accueil puis sur tout le site (les sections sans [data-reveal] le reçoivent par autoReveal, components.js) */
.js-anim :is(.page-accueil, body) main [data-reveal] { opacity: 0; transform: translateY(56px); transition: opacity 1.2s ease, transform 1.5s cubic-bezier(.16,.8,.24,1); }
.js-anim :is(.page-accueil, body) main [data-reveal].is-visible { opacity: 1; transform: none; }
/* le second bloc d'une rangée arrive juste après le premier */
.js-anim .page-accueil main :is(.svc__visual, .panel-text, .about__text, .deonto__carte + .deonto__carte)[data-reveal] { transition-delay: .15s; }
/* même mouvement partout (22 oct. 2026) : la carte de présence et le « +50 » montent comme le reste, sans effet propre */
.js-anim .page-accueil .about__media[data-reveal] .presence { transform: none; opacity: 1; filter: none; transition: none; }
/* Sans apparition au défilement (22 oct. 2026, demande de Sandro) : blog, articles, glossaire, FAQ */
.js-anim main:is([data-page="blog"], [data-page="article"], [data-glossaire], [data-faq]) :is([data-reveal], [data-reveal] > li[style*="--i"]) { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .js-anim :is(.page-accueil, body) main [data-reveal] { opacity: 1; transform: none; transition: none; } }
/* respiration entre les services et les fournisseurs */
/* 28 oct. 2026 : la déontologie (fond bleu nuit) suit désormais les services ; l'écart d'avant les fournisseurs n'a plus lieu d'être */
.page-accueil .home-expertises { padding-bottom: var(--space-2xl); }
@media (min-width: 1024px) { .page-accueil .home-expertises { padding-bottom: 7rem; } }

/* --- Votre activité (22 oct. 2026, demande de Sandro) : titre centré, carrousel de cartes à photo qui défile seul
   (mécanique .marquee : ralentit puis s'arrête au survol ; défilement manuel avec prefers-reduced-motion) --- */
.sect__titre { max-width: 40ch;   /* élargi le 28 oct. 2026 : une seule ligne en desktop */
  margin: 0 auto var(--space-xl); text-align: center; text-wrap: balance; }
@media (min-width: 1024px) { .sect__titre { margin-bottom: 7rem; } }
/* Plus d'air entre le hero et le titre des secteurs (28 oct. 2026) */
.page-accueil .home-secteurs { padding-top: calc(var(--space-xl) + var(--space-md)); }
.page-accueil .home-secteurs { padding-bottom: calc(var(--space-xl) + var(--space-md)); }   /* plus d'air avant les fournisseurs (28 oct. 2026) */
@media (min-width: 1024px) { .page-accueil .home-secteurs { padding-top: 9rem; padding-bottom: 8rem; } }
/* Carrousel des secteurs (22 oct. 2026 ; refait le 28 oct. 2026 : défilement en JS, plus rapide, cartes plus petites,
   flèches sur les côtés, glissement au doigt et aimantation des cartes sur mobile) : pleine largeur, bords à peine estompés */
.home-secteurs { overflow-x: clip; }
.sect-car { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); }
.sect-car__vue {
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: var(--space-xs) var(--space-md);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0, #000 5%, #000 95%, rgba(0,0,0,.25) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0, #000 5%, #000 95%, rgba(0,0,0,.25) 100%);
}
.sect-car__vue::-webkit-scrollbar { display: none; }
.sect-car__rail { display: flex; width: max-content; }
.sect-car__liste { display: flex; flex: none; gap: var(--space-sm); margin: 0; padding: 0 calc(var(--space-sm) / 2); list-style: none; }
.sect-car__liste li { flex: none; display: flex; }
@media (min-width: 768px) { .sect-car__liste { gap: var(--space-md); padding: 0 calc(var(--space-md) / 2); } }
/* Flèches : rondes, blanches, posées sur les bords, au milieu des cartes ; masquées sur mobile (on y glisse les cartes) */
.sect-car__btn {
  position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 3.25rem; height: 3.25rem; margin-top: calc(var(--space-md) / -2 - 1.625rem);
  color: var(--color-navy); background: rgba(255,255,255,.92); border: 1px solid rgba(20,33,61,.08); border-radius: 50%; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 30px -14px rgba(20,33,61,.45);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.sect-car__btn svg { width: 1.25rem; height: 1.25rem; }
.sect-car__btn--prev { left: max(var(--space-sm), calc((100vw - 1296px) / 2 - 1.625rem)); }
.sect-car__btn--next { right: max(var(--space-sm), calc((100vw - 1296px) / 2 - 1.625rem)); }
.sect-car__btn:hover { color: #fff; background: var(--color-primary); }
.sect-car__btn:active { transform: scale(.94); }
.sect-car__btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
@media (min-width: 768px) { .sect-car__btn { display: grid; } }
/* Écrans tactiles : aimantation carte par carte, la carte suivante dépasse pour inviter à glisser */
@media (hover: none), (pointer: coarse) {
  .sect-car__vue { scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-sm); }
  .sect-car__liste li { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .sect-car__btn { transition: none; } }
.sect__carte { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; width: min(72vw, 16rem); aspect-ratio: 1 / 1;
  color: var(--color-text-light); text-decoration: none; background: var(--color-navy); border-radius: 22px;
  box-shadow: 0 22px 44px -34px rgba(20,33,61,.7); }
@media (min-width: 768px) { .sect__carte { width: 17rem; } }   /* plus petites (21rem avant le 28 oct. 2026) */
.sect__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0;
  transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.sect__voile { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,33,61,0) 35%, rgba(20,33,61,.55) 62%, rgba(14,24,46,.92) 100%); }
.sect__corps { min-width: 0; padding: 1.1rem 1.15rem; }
.sect__carte h3 { margin: 0 0 0.25rem; font-size: var(--text-lg) !important; line-height: 1.25 !important; text-wrap: balance;
  color: var(--color-text-light); text-shadow: 0 1px 12px rgba(10,18,36,.35); }
.sect__carte p { margin: 0; font-size: var(--text-sm) !important; line-height: 1.45; color: rgba(255,255,255,.82); text-wrap: balance; }   /* cartes plus petites (28 oct. 2026) : le texte passe à la ligne au lieu d'être coupé */
.sect__fleche { position: absolute; top: var(--space-sm); right: var(--space-sm); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--color-text-light);
  background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  transition: color .25s ease, background-color .25s ease, transform .3s ease; }
.sect__fleche svg { width: 1rem; height: 1rem; }
.sect__carte:hover .sect__photo { transform: scale(1.04); }
.sect__carte:hover .sect__fleche { color: var(--color-navy); background: #fff; transform: rotate(-45deg); }
.sect__carte:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: reduce) { .sect__carte:hover .sect__photo, .sect__carte:hover .sect__fleche { transform: none; } }

.svc[id] { scroll-margin-top: calc(var(--header-h, 5rem) + var(--space-md)); }

/* --- Hero : texte centré sur la photo (15 oct. 2026 : le texte à gauche laissait un vide à droite) */

.home-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex;
  min-height: min(100svh, 1080px);   /* hero à hauteur d'écran, bandeau de preuves après (14 oct. 2026) ; plafonné le 6 nov. 2026 : sur une fenêtre étirée (rendu des moteurs) le texte restait au milieu d'un hero géant */
  padding: calc(var(--header-h) + var(--space-lg)) 0 var(--space-xl);
  color: rgba(255,255,255,.86); background: var(--color-navy);
}
.home-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%;
}
/* Vidéo au-dessus de l'image fixe, en fondu dès qu'elle joue */
.home-hero__video { opacity: 0; transition: opacity .8s ease; }
.home-hero__video.is-playing { opacity: 1; }
/* Voile bleu : navy en haut (lisibilité du titre), bleu foncé de la charte en bas */
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,33,61,.86) 0%, rgba(20,33,61,.78) 50%, rgba(1,72,141,.74) 100%); }
/* Lisibilité sur la vidéo : assombrissement doux au centre, derrière le texte, et ombre légère sous les lettres */
.home-hero__inner { position: relative; }
.home-hero__grid { position: relative; isolation: isolate; }
.home-hero__grid::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -18%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(20,33,61,.55), rgba(20,33,61,.3) 60%, transparent);
}
/* Pause de la vidéo : discret, en bas à droite */
.video-toggle {
  position: absolute; right: var(--space-sm); bottom: var(--space-sm); z-index: 2;
  padding: 0.4rem 0.8rem; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; color: rgba(255,255,255,.85);
  background: rgba(20,33,61,.45); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; cursor: pointer; transition: background-color .2s ease;
}
.video-toggle:hover { background: rgba(20,33,61,.75); color: #fff; }
.video-toggle:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.home-hero__inner { display: flex; flex-direction: column; }
.home-hero__grid { display: grid; justify-items: center; margin-block: auto; text-align: center; }
/* Titre en Sora semi-gras (police de tous les titres depuis le 28 oct. 2026) */
.home-hero h1 {
  margin: 0 auto var(--space-md); max-width: 22ch;
  font-family: var(--font-title); font-size: clamp(2.3rem, 1.4rem + 2.9vw, 4rem); font-weight: 600;
  line-height: 1.06; letter-spacing: -0.03em;   /* Sora est large : approche resserrée (28 oct. 2026) */
  color: var(--color-text-light); text-wrap: balance;
}
.home-hero__lead { margin: 0 auto; max-width: 40ch; text-wrap: balance; font-size: var(--text-base); line-height: 1.65; color: rgba(255,255,255,.9); }
.home-hero h1, .home-hero__lead { text-shadow: 0 1px 14px rgba(10,18,36,.5); }
@media (min-width: 1024px) { .home-hero h1 { max-width: 34ch; margin-bottom: 2rem; } }   /* titre sur deux lignes */
@media (min-width: 768px) { .home-hero__lead { max-width: 58ch; font-size: var(--text-lg); } }   /* trois lignes au plus, plus de ligne de 100 signes */
/* Nos trois métiers en accès direct (28 oct. 2026) : trois grands liens en verre, côte à côte en desktop, empilés en mobile ;
   titre en Sora resserré, flèche dans un rond cerclé qui se remplit d'ambre au survol */
.home-hero__services { list-style: none; display: grid; gap: 0.75rem; width: 100%; max-width: 66rem; margin: var(--space-lg) auto var(--space-lg); padding: 0; }
.home-hero__services a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: 100%;
  padding: 1.1rem 1.1rem 1.1rem 1.4rem; border: 1px solid rgba(255,255,255,.24); border-radius: 18px;
  font-family: var(--font-title); font-size: 1.0625rem; font-weight: 600; line-height: 1.22; letter-spacing: -0.015em;
  text-align: left; text-wrap: pretty; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background-color .25s ease, border-color .25s ease;
}
.home-hero__services a::after { content: none; }
.home-hero__services svg {
  flex: none; box-sizing: content-box; width: 18px; height: 18px; padding: 0.55rem;
  color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 50%;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.home-hero__services a:hover { background-color: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.home-hero__services a:hover svg { color: var(--color-navy); background: var(--color-accent); border-color: var(--color-accent); transform: translateX(2px); }
.home-hero__services a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
@media (min-width: 768px) {
  .home-hero__services { max-width: 36rem; margin-top: var(--space-xl); margin-bottom: var(--space-xl); }   /* tablette : empilés, colonne étroite */
  .home-hero__services a { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
  .home-hero__services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); max-width: 66rem; }
  .home-hero__services a { min-height: 6.25rem; gap: var(--space-sm); padding: 1.4rem 1.2rem 1.4rem 1.5rem; font-size: clamp(1rem, 0.3rem + 1.1vw, 1.3rem); text-wrap: balance; }   /* taille qui suit l'écran : « Audit et optimisation » tient sur une ligne dès 1024 px */
}
@media (min-width: 1280px) {
  .home-hero__services a { gap: var(--space-md); padding: 1.4rem 1.4rem 1.4rem 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .home-hero__services a, .home-hero__services svg { transition: none; } }
.kpi__prefix--mot { margin-right: 0.3em; white-space: nowrap; font-size: 0.38em; font-weight: 600; letter-spacing: 0; }

/* Entrée orchestrée du hero : le titre, le texte, puis les boutons */
.home-hero__content > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.home-hero__content > :nth-child(2) { animation-delay: .1s; }
.home-hero__content > :nth-child(3) { animation-delay: .2s; }
.home-hero__content > :nth-child(4) { animation-delay: .3s; }

/* --- Bandeau de preuves : chiffres clés + SCE / Bureau Veritas ----------- */

.proofbar { padding-block: var(--space-xl); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.proofbar__inner { display: grid; gap: var(--space-lg); }
@media (min-width: 1280px) { .proofbar__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl); } }
.proofbar .stats--inline { padding: 0; border-top: 0; }
.proofbar .kpis { gap: var(--space-md) 0; }
.proofbar .kpi { gap: 0.4rem; }
.proofbar .stats--inline .kpi__value { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); font-weight: 600; letter-spacing: -0.03em; }
.proofbar .kpi__unit { font-size: 0.45em; }
.proofbar .kpi__prefix--mot { color: var(--color-primary-dark); font-size: 0.32em; }
.proofbar .stats--inline .kpi__label { max-width: 10.5rem; font-size: var(--text-sm); }
@media (min-width: 768px) { .proofbar .kpis { grid-template-columns: repeat(4, auto); justify-content: space-between; } }
@media (min-width: 1024px) { .proofbar .kpi { padding-inline: var(--space-lg); } .proofbar .kpi:first-child { padding-left: 0; } }
.proofbar__trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
@media (min-width: 1280px) { .proofbar__trust { display: grid; justify-items: start; padding: 0 0 0 var(--space-xl); border-top: 0; border-left: 1px solid var(--color-border); } }
.proofbar__trust p { margin: 0; max-width: 18rem; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.proofbar .trust-badges { flex-wrap: nowrap; gap: var(--space-sm); }
.proofbar .trust-logo { padding: 0.6rem 0.9rem; border: 1px solid var(--color-border); }
.proofbar .trust-logo img { height: 48px; max-width: 150px; }
@media (max-width: 479px) { .proofbar .trust-logo img { height: 36px; max-width: 120px; } }
/* Variante hero (accueil) : en bas du hero, sur la photo, sans fond blanc et plus compacte */
.proofbar--hero { margin-top: var(--space-xl); padding: var(--space-md) 0 0; background: none; border-bottom: 0; border-top: 1px solid rgba(255,255,255,.2); }
.proofbar--hero .stats--inline .kpi__value { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); color: var(--color-text-light); }
.proofbar--hero .kpi__prefix--mot { color: rgba(255,255,255,.8); }
.proofbar--hero .stats--inline .kpi__label { font-size: var(--text-sm); color: rgba(255,255,255,.8); }
@media (min-width: 1024px) { .proofbar--hero .stats--inline .kpi__label { max-width: none; white-space: nowrap; } }
.proofbar--hero .stats--inline .kpi, .proofbar--hero .stats--inline .kpi:nth-child(odd) { border-left-color: rgba(255,255,255,.2); }
.proofbar--hero .proofbar__trust { border-color: rgba(255,255,255,.2); }
.proofbar--hero .proofbar__trust p { max-width: 15rem; font-size: var(--text-xs); color: rgba(255,255,255,.75); }
.proofbar--hero .trust-logo { padding: 0.35rem 0.6rem; border: 0; }
.proofbar--hero .trust-logo img { height: 32px; max-width: 110px; }

/* --- Nos services (refonte du 21 oct. 2026) : un service par rangée, photo et texte en alternance, sur un gabarit unique.
   Photo à peine plus large que le texte, étiquette en verre posée sur la photo, poste de la facture en petit au-dessus du titre,
   trois points à coche fine, liens fléchés ; une seule couleur d'accent, aucune variante par service --- */

.svcs { display: grid; gap: var(--space-2xl); }
.svc { display: grid; gap: var(--space-lg); align-items: center; }
main .svc h3 { margin: 0 0 var(--space-sm); font-size: clamp(1.85rem, 1.4rem + 1.4vw, 2.75rem) !important; line-height: 1.12 !important; text-wrap: balance; }
.svc__accroche { margin: 0 0 var(--space-sm); font-size: var(--text-lg) !important; font-weight: 500; color: var(--color-navy); }
.svc__text > p:not([class]) { max-width: 48ch; margin: 0 0 var(--space-md); color: var(--color-text-muted); }
.svc__liens { display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-lg); margin: 0; }
/* Boutons des services (22 oct. 2026) : très discrets, petite pastille à filet fin, flèche qui glisse au survol */
.svc__boutons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: var(--space-md) 0 0; }
/* Courtage / conseil : chaque bouton suivi de sa demi-phrase ; TURPE et taxes : une ligne de faits courts (22 oct. 2026, soir) */
.svc__choix { list-style: none; display: grid; gap: 0.6rem; margin: var(--space-md) 0 0; padding: 0; }
.svc__choix li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem var(--space-sm); }
.svc__choix .btn-mini { min-width: 8.5rem; justify-content: space-between; }
.svc__choix span { font-size: var(--text-sm); color: var(--color-text-muted); }
.svc__faits { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem var(--space-md); margin: 0 0 var(--space-xs); padding: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-navy); }
.svc__faits li { display: inline-flex; align-items: center; gap: 0.5rem; }
.svc__faits li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); }
.btn-mini { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; font-size: var(--text-sm) !important; font-weight: 600; line-height: 1.2;
  color: var(--color-navy); text-decoration: none; border: 1px solid rgba(20,33,61,.16); border-radius: 999px; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.btn-mini svg { width: 15px; height: 15px; transition: transform .2s ease; }
.btn-mini:hover { color: var(--color-primary-dark); border-color: rgba(0,128,232,.45); background: rgba(0,128,232,.04); }
.btn-mini:hover svg { transform: translateX(3px); }
.btn-mini:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.svc__parcours a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* Visuel (22 oct. 2026) : illustration à fond blanc, animée, dans un panneau pâle sans ombre ni filet ;
   l'étiquette en verre reste posée sur l'illustration */
.svc__visual {
  position: relative; isolation: isolate; display: grid; place-items: center; margin: 0;
  aspect-ratio: 5 / 4; padding: var(--space-lg) var(--space-md) calc(var(--space-xl) + var(--space-md));
  border-radius: var(--radius-xl); background: var(--svc-fond);
}
/* Fond pâle par service (22 oct. 2026, demande de Sandro) : bleu pour le conseil, orangé pour le TURPE, vert pour les taxes ;
   l'illustration est fondue dans le fond (mix-blend-mode : son blanc prend la teinte du panneau) */
.svc:nth-child(1) { --svc-fond: linear-gradient(160deg, #f5f9ff 0%, #e6f0fd 100%); }
.svc:nth-child(2) { --svc-fond: linear-gradient(160deg, #fffaf2 0%, #ffeedb 100%); }
.svc:nth-child(3) { --svc-fond: linear-gradient(160deg, #f4fcf8 0%, #e1f5eb 100%); --svc-mot: var(--joy-vert-fonce, #0b7a55); }
.svc__visual .illu-anim { mix-blend-mode: multiply; }
.svc__illu { display: block; width: 100%; max-width: 30rem; height: auto; max-height: 100%; object-fit: contain; }
.js-anim .svc__visual[data-reveal] .svc__illu { transform: translateY(16px) scale(.97); opacity: 0; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity .8s ease; }
.js-anim .svc__visual[data-reveal].is-visible .svc__illu { transform: none; opacity: 1; }
/* Mot du titre dans la couleur du panneau voisin (titre en grand : contraste ≥ 3:1) */
.svc:nth-child(1) { --svc-mot: var(--color-primary); }
.svc:nth-child(2) { --svc-mot: #b06a00; }
.svc__mot { color: var(--svc-mot); }
/* Illustrations à fond blanc animées : l'ensemble image + calque apparaît d'un bloc */
.svc__visual .illu-anim { max-width: 34rem; }

.js-anim .svc__visual[data-reveal] .illu-anim { transform: translateY(16px) scale(.97); opacity: 0; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity .8s ease; }
.js-anim .svc__visual[data-reveal].is-visible .illu-anim { transform: none; opacity: 1; }
.js-anim .svc__visual[data-reveal] .illu-anim .svc__illu { transform: none; opacity: 1; transition: none; }
@media (max-width: 767px) {   /* mobile : l'étiquette passe sous l'illustration, dans le panneau, pour ne pas la cacher */
  .svc__visual { aspect-ratio: auto; gap: var(--space-sm); padding: var(--space-md); }
  .svc__illu { max-width: 20rem; }
  .svc__visual .svc__etiquette { position: static; justify-self: stretch; max-width: none; }
}
/* L'étiquette arrive juste après la photo ; son chiffre se compte (initCounters) */
.js-anim .svc__visual[data-reveal] .svc__etiquette { opacity: 0; transform: translateY(14px); transition: opacity .6s ease .5s, transform .7s cubic-bezier(.16,.8,.24,1) .5s; }
.js-anim .svc__visual[data-reveal].is-visible .svc__etiquette { opacity: 1; transform: none; }
/* Les trois points apparaissent l'un après l'autre */
@media (prefers-reduced-motion: reduce) {
  .js-anim .svc__visual[data-reveal] :is(.svc__illu, .illu-anim, .svc__etiquette) { opacity: 1; transform: none; transition: none; }
}
/* Étiquette en verre : un fait validé, en bas à gauche de la photo */
.svc__etiquette {
  position: absolute; z-index: 1; left: var(--space-sm); bottom: var(--space-sm); display: grid; gap: 0.1rem; max-width: min(19rem, calc(100% - var(--space-md)));
  padding: 0.75rem 1rem; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-lg); box-shadow: 0 18px 36px -22px rgba(20,33,61,.55);
}
.svc__etiquette strong { font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; color: var(--color-navy); }
.svc__etiquette > span { font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-muted); }
@media (min-width: 768px) { .svc__etiquette { left: var(--space-md); bottom: var(--space-md); } }

.visuel-attente {   /* visuel à venir (partial visuel-attente) : même format que les photos des services */
  display: grid; place-content: center; justify-items: center; gap: 0.35rem; aspect-ratio: 4 / 3; padding: var(--space-md); text-align: center;
  background: var(--color-bg); border: 2px dashed rgba(1,72,141,.25); border-radius: var(--radius-xl);
}
.visuel-attente__code { font-size: var(--text-sm); font-weight: 600; letter-spacing: .02em; color: var(--color-primary-dark); }
.visuel-attente__sujet { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .svcs { gap: var(--space-3xl); }   /* resserré le 22 oct. 2026 (demande de Sandro) */
  .svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-2xl); }
  .svc:nth-child(even) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .svc:nth-child(even) .svc__visual { order: -1; }
}

/* --- Panel de fournisseurs de l'accueil : « +50 » en dégradé, deux lignes de logos qui défilent --- */

.panel-count { display: grid; gap: 0.75rem; margin: 0; }
/* « +50 » : compté depuis 0 à l'apparition (initCounters), dégradé qui ondule en continu, halo orange qui respire */
.panel-count__num { position: relative; width: fit-content; }
.panel-count strong {
  position: relative; display: block; padding-right: 0.08em; /* l'approche négative rognait le « 0 » */
  font-family: var(--font-title); font-size: clamp(7.5rem, 4rem + 14vw, 17rem); font-weight: 600; line-height: .82; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(110deg, #fab102 0%, #f7931e 25%, #ef6c1a 50%, #f7931e 75%, #fab102 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: count-flow 6s linear infinite;
}
.panel-count__num::before {
  content: ""; position: absolute; inset: 10% 5%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(247,147,30,.35), transparent); filter: blur(30px);
  animation: count-glow 4s ease-in-out infinite;
}
@keyframes count-flow { to { background-position: -200% 0; } }
@keyframes count-glow { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
.js-anim .panel-count[data-reveal] { transform: translateY(30px) scale(.96); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.js-anim .panel-count[data-reveal].is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .panel-count strong, .panel-count__num::before { animation: none; } }
.panel-count > span:last-child { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 600; line-height: 1.3; color: var(--color-navy); }
@media (min-width: 1024px) { .panel-home { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); } }
.panel-marquees { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.marquee.marquee--panel { /* .marquee.… : passe devant le style de base du bandeau, défini plus loin */
  padding-block: 0.4rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.marquee--panel .marquee__track { animation-duration: calc(var(--count) * 3.2s); }
.marquee--inverse .marquee__track { animation-direction: reverse; }
.marquee--panel .marquee__list { gap: var(--space-sm); padding: 0 calc(var(--space-sm) / 2); }
.marquee--panel .marquee__link { display: flex; align-items: center; justify-content: center; width: 168px; height: 76px; padding: 0.85rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.marquee--panel .marquee__link:hover { border-color: rgba(1,72,141,.35); }
.marquee--panel .marquee__list img { height: auto; max-height: 100%; max-width: 100%; }
@media (max-width: 767px) { .marquee--panel .marquee__link { width: 132px; height: 62px; } }

/* --- Qui sommes-nous : carte de présence (une épingle qui pulse sur chaque ville) --- */

.presence { position: relative; margin: 0; }
.presence__map { position: relative; max-width: 40rem; margin-inline: auto; }
.presence__map::before { content: ""; position: absolute; inset: 15% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(250,177,2,.18), rgba(0,128,232,.1) 60%, transparent); filter: blur(20px); }
.presence__dots { position: relative; display: block; width: 100%; height: auto; opacity: .75; }
.pin { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--pin, var(--color-primary)); border: 3px solid var(--color-surface); box-shadow: 0 4px 12px rgba(20,33,61,.25); }
.pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: .5; animation: ping 2.6s cubic-bezier(0,0,.2,1) calc(var(--i, 0) * .25s) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin::after { animation: none; display: none; } }

/* --- Qui sommes-nous (17 oct. 2026) : carte un peu agrandie (44rem), sans fondu,
   entrée en glissant depuis la gauche ; texte à droite, citation encadrée --- */

.about-sec { overflow: hidden; }
/* Arrière-plan (23 oct. 2026) : la section suit la déontologie, blanche elle aussi ; un fond bleu très clair qui monte du bas
   et une trame de points fine derrière la carte (écho à la carte en points), qui s'efface vers les bords, marquent le changement de section */
.about-sec { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--color-surface) 0%, #f4f8fd 100%); }
.about-sec::before {
  content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 75%; pointer-events: none;
  background-image: radial-gradient(rgba(1,72,141,.28) 1.2px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 35% 50%, #000 15%, transparent 78%);
          mask-image: radial-gradient(ellipse 62% 62% at 35% 50%, #000 15%, transparent 78%);
}
.about { display: grid; gap: var(--space-xl); }
.about__media { position: relative; margin: 0; }
/* 5 nov. 2026 : sur une colonne (téléphone, tablette), la trame suit la carte au lieu de descendre derrière le texte
   (centrée à mi-hauteur de la section, elle se retrouvait sous la carte) */
@media (max-width: 1023px) {
  .about-sec::before { display: none; }
  .about__media { isolation: isolate; }
  .about__media::before {
    content: ""; position: absolute; z-index: -1; inset: -1.5rem calc(-1 * var(--space-sm)); pointer-events: none;
    background-image: radial-gradient(rgba(1,72,141,.28) 1.2px, transparent 1.6px); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 15%, transparent 78%);
            mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 15%, transparent 78%);
  }
}
.about__media .presence__map { max-width: 44rem; }
/* Étiquette « Présence nationale » (18 oct. 2026) : carte blanche posée en bas à gauche de la carte, apparaît après elle */
.presence__tag {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 0.8rem; width: fit-content; margin: -1.5rem 0 0;
  padding: 0.8rem 1.15rem 0.8rem 0.8rem; background: rgba(255,255,255,.92); border: 1px solid rgba(20,33,61,.08);
  border-radius: var(--radius-lg); box-shadow: 0 12px 32px -12px rgba(20,33,61,.28); backdrop-filter: blur(8px);
}
.presence__tag-icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; color: #fff; background: linear-gradient(140deg, var(--color-primary), var(--color-primary-dark)); }
.presence__tag-icon svg { width: 20px; height: 20px; }
.presence__tag > span:last-child { display: grid; line-height: 1.35; }
.presence__tag strong { font-family: var(--font-title); font-size: var(--text-lg); font-weight: 600; color: var(--color-navy); }
.presence__tag > span:last-child > span { font-size: var(--text-sm); color: var(--color-text-muted); }
.js-anim .about__media[data-reveal] .presence__tag { opacity: 0; transform: translateY(14px); transition: opacity .6s ease 1s, transform .6s cubic-bezier(.16,.8,.24,1) 1s; }
.js-anim .about__media[data-reveal].is-visible .presence__tag { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-anim .about__media[data-reveal] .presence__tag { opacity: 1; transform: none; transition: none; } }
@media (min-width: 768px) { .presence__tag { position: absolute; left: 2%; bottom: 8%; margin: 0; } }
/* Entrée : la carte glisse depuis la gauche en se précisant */
.js-anim .about__media[data-reveal] { opacity: 1; transform: none; }
.js-anim .about__media[data-reveal] .presence { transform: translateX(-14%); opacity: 0; filter: blur(10px); transition: transform 1.4s cubic-bezier(.16,.8,.24,1), opacity 1s ease, filter 1.2s ease; }
.js-anim .about__media[data-reveal].is-visible .presence { transform: none; opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .about__media[data-reveal] .presence { transform: none; opacity: 1; filter: none; transition: none; }
}
@media (min-width: 1024px) {
  .about { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--space-2xl); align-items: center; }   /* carte un peu plus large que le texte */
}
.about__text h2 { max-width: 24ch; }   /* deux lignes (br-lg) sur grand écran */
.br-lg { display: none; }
@media (min-width: 1024px) { .br-lg { display: inline; } }
.about__text > p { max-width: 58ch; margin: 0 0 var(--space-sm); }
.about__text > p:not([class]) { color: var(--color-text-muted); }
.about__lead { color: var(--color-navy); }

/* Citation du fondateur : encadré bleu clair, guillemet ambre */
.founder-quote { position: relative; margin: var(--space-lg) 0 var(--space-md); padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 2rem); background: var(--color-bg); border-radius: var(--radius-lg); }
.founder-quote::before { content: "«"; position: absolute; left: var(--space-md); top: var(--space-sm); font-family: var(--font-title); font-size: 2.6rem; line-height: 1; color: var(--color-accent); }
.founder-quote blockquote { margin: 0 0 0.75rem; max-width: 52ch; font-family: var(--font-title); font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); font-weight: 400; line-height: 1.55; color: var(--color-navy); }
.founder-quote blockquote::after { content: " »"; }
.founder-quote figcaption { display: grid; font-size: var(--text-sm); line-height: 1.4; }
.founder-quote figcaption strong { font-weight: 600; color: var(--color-navy); }
.founder-quote figcaption span { color: var(--color-text-muted); }

/* --- Témoignages de l'accueil (partial « temoignages », data-variant="pro", 23 oct. 2026) : grille bento d'après uisections.com (Chatbase),
   citations sur cartes blanches + cartes chiffres à bandeau de couleur --- */

.tbento { display: grid; gap: var(--space-md); }
.tbento__card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; margin: 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}

.tbento__quote { gap: var(--space-sm); padding: var(--space-md); }
.tbento__etoiles { display: flex; gap: 2px; color: var(--color-accent); }
.tbento__etoiles svg { width: 18px; height: 18px; fill: currentColor; }
.tbento__quote blockquote { flex: 1; margin: 0 0 var(--space-xs); font-size: 1rem; line-height: 1.65; color: var(--color-navy); }
.tbento__quote blockquote::before { content: "« "; }
.tbento__quote blockquote::after { content: " »"; }
.tbento__auteur { display: flex; align-items: center; gap: 0.85rem; }
.tbento__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.tbento__logo { display: block; width: 128px; height: 40px; }
.tbento__logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: left center; }
.tbento__qui { display: grid; min-width: 0; font-size: var(--text-sm); line-height: 1.4; }
.tbento__qui strong { font-weight: 600; color: var(--color-navy); }
.tbento__qui span { color: var(--color-text-muted); }
.tbento__lien {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto;
  color: var(--color-primary-dark); border: 1px solid var(--color-border); border-radius: 50%;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tbento__lien svg { width: 16px; height: 16px; transition: transform .2s ease; }
.tbento__lien:hover { color: var(--color-text-light); background: var(--color-primary); border-color: var(--color-primary); }
.tbento__lien:hover svg { transform: translateX(2px); }

/* Cartes chiffres : bandeau haut en taches de couleur fondues (charte : bleu, ambre, bleu vers ambre) */
.tbento__fond { display: block; height: 4rem; flex: none; }
.tbento__stat--bleu .tbento__fond {
  background:
    radial-gradient(60% 90% at 20% 30%, rgba(1, 72, 141, .85), transparent 70%),
    radial-gradient(55% 80% at 75% 40%, rgba(0, 128, 232, .8), transparent 70%),
    radial-gradient(50% 70% at 50% 100%, rgba(120, 190, 255, .9), transparent 75%),
    #cfe6fb;
}
.tbento__stat--ambre .tbento__fond {
  background:
    radial-gradient(55% 85% at 25% 35%, rgba(250, 177, 2, .9), transparent 70%),
    radial-gradient(50% 80% at 78% 30%, rgba(255, 140, 40, .75), transparent 70%),
    radial-gradient(60% 70% at 60% 100%, rgba(255, 214, 120, .9), transparent 75%),
    #ffefc7;
}
.tbento__stat--mixte .tbento__fond {
  background:
    radial-gradient(55% 90% at 15% 40%, rgba(0, 128, 232, .85), transparent 70%),
    radial-gradient(50% 80% at 85% 35%, rgba(250, 177, 2, .85), transparent 70%),
    radial-gradient(45% 70% at 50% 90%, rgba(150, 205, 255, .8), transparent 75%),
    #eaf0f6;
}
.tbento__valeur {
  margin: 0; padding: var(--space-md) var(--space-md) 0;
  font-family: var(--font-title); font-weight: 600; font-size: clamp(2rem, 1rem + 1.6vw, 2.75rem); line-height: 1.05; white-space: nowrap; color: var(--color-navy);
  font-variant-numeric: tabular-nums;
}
.tbento__valeur small { font-size: .5em; font-weight: 600; }
.tbento__label { margin: 0.35rem 0 0; padding: 0 var(--space-md) var(--space-md); font-size: var(--text-base); line-height: 1.4; color: var(--color-text-muted); }

/* Tablette : grande carte, 3 chiffres sur une ligne, 2 citations ; desktop (5 colonnes) : grande carte + 2 chiffres, puis chiffre + 2 citations */
@media (min-width: 768px) {
  .tbento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tbento__card { grid-column: span 3; }
  .tbento__quote--large { grid-column: span 6; }
  .tbento__stat { grid-column: span 2; }
  .tbento__fond { height: 4.5rem; }
}
@media (min-width: 1024px) {
  .tbento { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tbento__card { grid-column: span 2; }
  .tbento__quote--large { grid-column: span 3; }
  .tbento__stat { grid-column: span 1; }
  .tbento__quote { padding: var(--space-md) var(--space-lg); }
  .tbento__quote--large blockquote { font-size: 1.1875rem; line-height: 1.6; }
  .tbento__fond { height: 5.5rem; }
  .tbento__valeur { margin-top: auto; padding-top: var(--space-md); }
}


/* ==========================================================================
   Pages intérieures - template secteur (et futurs templates service)
   ========================================================================== */

/* --- Hero intérieur : texte + visuel, fond clair ------------------------- */

.page-hero { padding-block: var(--space-lg) var(--space-xl); background: var(--color-bg); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: center; }
.page-hero h1 {
  font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.03em; max-width: 22ch; margin-bottom: var(--space-md);
}
.page-hero__lead { margin: 0 0 var(--space-lg); max-width: 60ch; color: var(--color-text-muted); }
.page-hero .hero__actions, .page-hero .cta-stack { margin-bottom: var(--space-lg); }
.page-hero__text > * { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.page-hero__text > :nth-child(2) { animation-delay: .08s; }
.page-hero__text > :nth-child(3) { animation-delay: .16s; }
.page-hero__text > :nth-child(4) { animation-delay: .24s; }
.page-hero__text > :nth-child(5) { animation-delay: .32s; }
.page-hero__media { margin: 0; animation: rise .7s .2s cubic-bezier(.2,.7,.2,1) both; }
@media (min-width: 1024px) {
  .page-hero { padding-block: var(--space-xl) var(--space-2xl); }
  .page-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .page-hero__lead { font-size: var(--text-lg); }
}

.page-hero__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); background: var(--color-border); }
@media (min-width: 1024px) { .page-hero__img { aspect-ratio: 4 / 5; } }

/* Visuel manquant : fond grisé balisé (CLAUDE.md §5) */
.photo-placeholder {
  display: grid; place-content: center; justify-items: center; gap: var(--space-sm);
  aspect-ratio: 4 / 3; padding: var(--space-md);
  border-radius: var(--radius-xl);
  font-size: var(--text-sm); text-align: center; color: var(--color-text-muted);
  background: repeating-linear-gradient(135deg, #e4e9f0 0 14px, #dde3eb 14px 28px);
}
.photo-placeholder__icon {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  color: var(--color-primary-dark); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.photo-placeholder__icon svg { width: 32px; height: 32px; }
@media (min-width: 1024px) { .photo-placeholder { aspect-ratio: 4 / 5; } }

/* Fil d'Ariane */
.breadcrumb ol { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumb li + li::before { content: "/"; margin-inline: 0.6rem; color: var(--color-border); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--color-navy); font-weight: 500; }

/* Bandeau chiffres sur fond clair */
.stats--inline { padding: var(--space-md) 0 0; background: none; color: var(--color-navy); border-top: 1px solid var(--color-border); }
.stats--inline .kpi,
.stats--inline .kpi:nth-child(odd) { border-left-color: var(--color-border); }
.stats--inline .kpi__value { color: var(--color-navy); font-size: var(--text-2xl); }
.stats--inline .kpi__label { color: var(--color-text-muted); }
@media (min-width: 768px) { .stats--inline .kpi:first-child { border-left: 0; } }

/* --- Briques communes des pages intérieures ----------------------------- */

/* Sur-titre de section : court, en couleur, précédé d'un trait (pas de capitales) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 var(--space-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark);
}
.eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: currentColor; }

.h2-xl { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; }
.prose--lg p { font-size: var(--text-lg); }

.section--tight { padding-block: var(--space-lg); }
@media (min-width: 1024px) { .section--tight { padding-block: var(--space-xl); } }
.center { text-align: center; }

/* Apparition douce au scroll ([data-reveal], cf. components.js) ; les grilles montent en cascade */
.js-anim [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js-anim [data-reveal].is-visible { opacity: 1; transform: none; }
.js-anim [data-reveal] > li[style*="--i"] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; transition-delay: calc(var(--i) * 60ms); }
.js-anim [data-reveal].is-visible > li[style*="--i"] { opacity: 1; transform: none; }

/* --- Votre réalité : éditorial (titre large, puis texte + chiffre) ------- */

.editorial-head { margin-bottom: var(--space-lg); }
.editorial-head h2 { margin: 0; max-width: 22ch; }
.editorial { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) {
  .editorial-head { margin-bottom: var(--space-xl); }
  .editorial { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: start; }
  
}

/* Chiffre clé : grand nombre, filet ambre au-dessus */
.stat { display: grid; gap: var(--space-sm); margin: 0; padding-top: var(--space-md); border-top: 3px solid var(--color-accent); }
.stat strong { font-size: clamp(3rem, 2rem + 3.5vw, 5rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--color-navy); white-space: nowrap; }
.stat span { max-width: 28ch; color: var(--color-text-muted); }

/* --- Ce que nous faisons : « ce que vous n'avez pas à faire » ------------ */

/* --- Ce que vous gagnez : liste pilotée par le scroll ------------------- */
/* Grands intitulés, ligne de progression qui se remplit, point lu en navy,
   grand numéro fixe à gauche (même tracé que les étapes de l'accueil). */

@media (min-width: 1024px) { .sticky-head { position: sticky; top: calc(var(--header-h) + var(--space-lg)); } }
.scroll-count { display: none; }
@media (min-width: 1024px) {
  .scroll-count { display: flex; align-items: baseline; gap: 0.75rem; margin: var(--space-xl) 0 0; color: var(--color-text-muted); font-weight: 500; }
  .scroll-count [data-steps-current] {
    font-size: 7rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
    color: transparent; -webkit-text-stroke: 1.5px var(--color-primary);
  }
}

.scroll-steps { --progress: 0; position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--space-lg); }
.scroll-steps::before,
.scroll-steps::after { content: ""; position: absolute; left: 5px; top: 0; width: 2px; border-radius: 2px; }
.scroll-steps::before { bottom: 0; background: var(--color-border); }
.scroll-steps::after { height: calc(var(--progress) * 100%); background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark)); }

.scroll-steps li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); padding-block: var(--space-md); }
@media (min-width: 1024px) { .scroll-steps li { gap: var(--space-md); padding-block: var(--space-lg); } }
/* Point sur la ligne */
.scroll-steps li::before {
  content: ""; position: absolute; z-index: 1; left: calc(-1 * var(--space-lg)); top: calc(var(--space-md) + 0.55rem);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--color-border);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
@media (min-width: 1024px) { .scroll-steps li::before { top: calc(var(--space-lg) + 0.9rem); } }
.scroll-steps li.is-past::before { background: var(--color-primary); border-color: var(--color-primary); }
.scroll-steps li.is-active::before { background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 0 6px rgba(0,128,232,.15); }

.scroll-steps__num { min-width: 1.4rem; padding-top: 0.35rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; transition: color .3s ease; }
@media (min-width: 1024px) { .scroll-steps__num { padding-top: 0.75rem; } }
.scroll-steps h3 {
  margin: 0 0 0.4rem; font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); letter-spacing: -0.02em;
  color: var(--color-text-muted); transition: color .3s ease;
}
.scroll-steps p { margin: 0; max-width: 46ch; color: var(--color-text-muted); }
.scroll-steps li.is-active h3 { color: var(--color-navy); }
.scroll-steps li.is-active .scroll-steps__num { color: var(--color-primary-dark); }

/* --- Leviers numérotés en colonnes -------------------------------------- */

.points-row { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); counter-reset: pt; }
@media (min-width: 1024px) { .points-row { margin-top: var(--space-2xl); } }
.points-row li { position: relative; padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
/* Le filet se remplit en navy à l'apparition */
.points-row li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--color-navy); transform-origin: left; transition: transform .9s cubic-bezier(.2,.7,.2,1) .2s; }
.js-anim .points-row[data-reveal]:not(.is-visible) li::before { transform: scaleX(.18); }
.points-row h3 { margin: 0 0 0.5rem; font-size: var(--text-xl); }
.points-row p { margin: 0; color: var(--color-text-muted); }

/* --- Liste cochée (« ce qui change à votre échelle ») -------------------- */

.check-list { margin-top: var(--space-lg); }
.check-list h3 { margin: 0 0 var(--space-sm); font-size: var(--text-lg); }
.check-list ul { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; gap: var(--space-sm); align-items: flex-start; padding-block: 0.9rem; border-top: 1px solid var(--color-border); }
.check-list__icon {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 0.1rem; border-radius: 50%;
  color: var(--color-primary-dark); background: rgba(0,128,232,.1);
}
.check-list__icon svg { width: 15px; height: 15px; }

/* --- Bloc secteur : en-tête centré --------------------------------------- */

.center-head { display: grid; justify-items: center; max-width: 44rem; margin: 0 auto var(--space-lg); text-align: center; }
.center-head h2 { margin: 0; }
@media (min-width: 1024px) { .center-head { margin-bottom: var(--space-xl); } }

/* Profils concernés : tuiles en grille */

/* Contraste : comparateur en ligne vs nous */
.versus { position: relative; display: grid; gap: var(--space-sm); max-width: 68rem; margin-inline: auto; }
@media (min-width: 768px) { .versus { grid-template-columns: 1fr 1fr; gap: var(--space-md); } }

.versus__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--color-text-muted); background: var(--color-surface); }

.versus__mark svg { width: 16px; height: 16px; }


/* --- Experte dédiée (copropriété) + frise de logos ----------------------- */

.expert-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.expert-direct { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.expert-direct > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.expert-direct svg { width: 16px; height: 16px; color: var(--color-primary-dark); }

.logo-strip { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); text-align: center; }
.logo-strip h3 { margin: 0 0 var(--space-lg); font-size: var(--text-xl); }
.logo-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
.logo-strip li {
  display: grid; place-items: center; width: calc(50% - var(--space-sm) / 2); height: 96px; padding: 0.9rem 1.2rem;
  background: var(--color-bg); border-radius: var(--radius-lg);
}
@media (min-width: 768px) { .logo-strip li { width: 160px; } }
/* Le SVG d'origine (J'estimmo) a de larges marges : on le recentre plus grand */
.logo-strip img[src$=".svg"] { transform: scale(1.5); }
.logo-strip img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- Encadré confiance en bandeau (pages intérieures) -------------------- */

.trust-band { display: grid; gap: var(--space-lg); padding: var(--space-lg); background: var(--color-bg); border-radius: var(--radius-xl); }
@media (min-width: 1024px) { .trust-band { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-xl); padding: var(--space-xl); align-items: start; } }
.trust-band__intro h2 { margin: var(--space-sm) 0 0.5rem; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
.trust-band__intro p { margin: 0; color: var(--color-text-muted); }
.trust-band__intro strong { color: var(--color-navy); font-weight: 600; }
.trust-band__cert .cert__logo { width: 160px; height: 84px; margin-bottom: var(--space-sm); background: var(--color-surface); }
.trust-band__cert h3 { margin: 0 0 0.35rem; font-size: var(--text-lg); }
.trust-band__cert p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- FAQ : accordéon natif <details> ------------------------------------- */

.faq { border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-md); cursor: pointer; list-style: none;
  font-size: var(--text-lg); font-weight: 600; line-height: 1.4; color: var(--color-navy);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--color-primary-dark); }
.faq__icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-surface);
  transition: transform .25s ease, background-color .2s ease, color .2s ease;
}
.faq__icon svg { width: 16px; height: 16px; }
.faq__item[open] .faq__icon { transform: rotate(45deg); color: var(--color-text-light); background: var(--color-navy); border-color: var(--color-navy); }
.faq__answer { padding-bottom: var(--space-md); animation: rise .3s ease both; }
.faq__answer p { margin: 0; max-width: 62ch; color: var(--color-text-muted); }
.faq--center { max-width: 52rem; margin-inline: auto; }

/* ==========================================================================
   Pages services (service.js)
   ========================================================================== */

/* --- Hero centré navy : faisceau de 40 lignes vers les logos fournisseurs --- */

.hero-centre {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; min-height: min(100svh, 1040px);
  padding-top: calc(var(--header-h) + var(--space-lg));
  color: var(--color-text-light); text-align: center;
}
.hero-centre::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(0,128,232,.38), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 0%, #01488d 0%, transparent 75%),
    var(--color-navy);
}
.hero-centre__text { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: var(--space-lg) var(--space-xl); }
.hero-centre__copy { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero-centre .breadcrumb ol { margin-bottom: var(--space-lg); }
@media (min-width: 1024px) { .hero-centre__text { padding-block: var(--space-md) var(--space-xl); } }
.hero-centre .breadcrumb ol { justify-content: center; }
.hero-centre .breadcrumb a, .hero-centre .breadcrumb span { color: rgba(255,255,255,.72); }
.hero-centre .breadcrumb a:hover { color: var(--color-text-light); }
.hero-centre .breadcrumb [aria-current] { color: var(--color-text-light); }
.hero-centre .breadcrumb li + li::before { color: rgba(255,255,255,.35); }
.hero-centre :focus-visible { outline-color: var(--color-text-light); }

.hero-centre h1 {
  max-width: 24ch; margin: 0 0 var(--space-lg);
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em;
  color: var(--color-text-light); text-wrap: balance;
}
/* Segment de titre sur sa propre ligne (desktop) ; en mobile, le texte coule normalement */
@media (min-width: 768px) { .u-ligne { display: block; } }
@media (min-width: 1024px) { .section-head--titre-large .u-ligne { white-space: nowrap; } }

/* Passage du H1 mis en valeur (Conseil : « un vrai conseil », 19 oct. 2026) : ambre sur navy (8,7:1), filet ambre tracé de gauche à droite.
   Pas de surlignage (CLAUDE.md §4 : l'ambre n'est pas un surligneur de titres) */
.h1-accent { position: relative; display: inline-block; color: var(--color-accent); }
.h1-accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 0.06em; min-height: 2px; border-radius: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left; animation: h1-accent-trait .9s .6s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes h1-accent-trait { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .h1-accent::after { animation: none; transform: none; } }
.hero-centre__tagline { margin: 0 0 var(--space-md); font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem); font-weight: 600; color: var(--color-text-light); text-wrap: balance; }
.hero-centre__lead { max-width: 62ch; margin: 0 0 var(--space-xl); color: rgba(255,255,255,.82); text-wrap: pretty; }
@media (min-width: 768px) { .hero-centre__lead { font-size: var(--text-lg); } }
.hero-centre .hero__actions { justify-content: center; width: 100%; margin-bottom: var(--space-xl); }
.hero-centre .cta-stack { align-items: center; width: 100%; margin-bottom: var(--space-xl); }
@media (min-width: 768px) { .hero-centre .hero__actions .btn { flex: none; } }
.hero-centre .kpis { justify-content: center; }
.hero-centre .kpi { align-items: center; text-align: center; }
.hero-centre .kpi__label { margin-inline: auto; }

/* Pages services : sections plus aérées (passe premium, 14 oct. 2026) */
main[data-service] .section:not(.section--tight) { padding-block: 5rem; }
main[data-service] .section-head { margin-bottom: var(--space-xl); }
@media (min-width: 1024px) {
  main[data-service] .section:not(.section--tight) { padding-block: var(--space-3xl); }
  main[data-service] .section-head { margin-bottom: 5rem; }
}

/* Variante deux colonnes (photo?, Conseil en énergie) : texte aligné à gauche, titre en serif comme l'accueil, photo à droite */
.hero-centre--split { min-height: 0; text-align: left; }
.hero-centre--split .hero-centre__text { display: grid; gap: var(--space-xl); align-items: center; padding-block: var(--space-lg) var(--space-2xl); }
.hero-centre--split .hero-centre__copy { align-items: flex-start; }
.hero-centre--split .breadcrumb ol { justify-content: flex-start; }
.hero-centre--split h1 {
  max-width: 17ch; margin-bottom: var(--space-md);
  font-family: var(--font-title); font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em;
}
.hero-centre--split .hero-centre__tagline { margin-bottom: var(--space-md); font-size: var(--text-lg); font-weight: 500; color: rgba(255,255,255,.92); }
.hero-centre--split .hero-centre__lead { max-width: 54ch; margin-bottom: var(--space-lg); }
.hero-centre--split .cta-stack { align-items: flex-start; margin-bottom: 0; }
.hero-centre__media { margin: 0; }
.hero-centre__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 45% 35%; border-radius: var(--radius-xl); }
/* Illustration détourée (fond transparent) : affichée telle quelle, sans recadrage */
.hero-centre__media--art img { aspect-ratio: auto; object-fit: contain; border-radius: 0; }
/* Image entière (Conseil, Taxes, TURPE) : proportions d'origine, aucun recadrage */
.hero-centre__media--entiere { position: relative; }
.hero-centre__media--entiere img {
  position: relative; aspect-ratio: auto; object-fit: contain; border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
/* Halo bleu derrière l'image */
.hero-centre__media--entiere::before {
  content: ""; position: absolute; inset: 8% -6% -6% 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,128,232,.45), transparent); filter: blur(30px);
}
@media (min-width: 1024px) {
  /* Heros en deux colonnes à hauteur d'écran, sans plafond (Conseil : le bandeau de chiffres reste sous la ligne de flottaison sur grand écran) */
  .hero-centre--split { min-height: min(100svh, 1080px); }
  .hero-centre--split .hero-centre__text { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-3xl); }
  .hero-centre__media:not(.hero-centre__media--art):not(.hero-centre__media--entiere) img { aspect-ratio: 4 / 5; }
  /* Image entière (Conseil, Taxes, TURPE) : plus grande que le texte, inclinée en perspective, sans effet au survol.
     --largeur (part de la colonne) et --decalage (vers la droite) : réglés page par page (hero_visuel.largeur / decalage) */
  .hero-centre--entiere .hero-centre__text { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-xl); }
  .hero-centre__media--entiere { perspective: 1800px; width: var(--largeur, 100%); justify-self: end; margin-right: calc(-1 * var(--decalage, 0px)); }
  .hero-centre__media--entiere img {
    transform: rotateY(-10deg) rotateX(4deg); transform-origin: 30% 50%;
    box-shadow: 40px 50px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
    animation: hero-entree 1.2s .15s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes hero-entree { from { transform: translateX(40px) rotateY(-24deg) rotateX(6deg); } }
  @media (prefers-reduced-motion: reduce) { .hero-centre__media--entiere img { animation: none; } }
}

/* Bandeau de logos fournisseurs en bas du hero : défilement continu de droite à gauche */
.hero-centre__marquee { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.marquee {
  overflow: hidden; padding-block: 1.25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee calc(var(--count) * 2.4s) linear infinite; }
.marquee__list { display: flex; align-items: center; flex: none; gap: clamp(2rem, 4vw, 3.5rem); margin: 0; padding: 0 clamp(1rem, 2vw, 1.75rem); list-style: none; }
.marquee__list li { flex: none; display: flex; align-items: center; }
.marquee__list img { height: 30px; width: auto; max-width: 120px; object-fit: contain; }
/* Logo cliquable : effet discret, le logo monte de 2 px au survol */
.marquee__link { display: block; border-radius: var(--radius-sm); transition: transform .2s ease; }
.marquee__link:hover { transform: translateY(-2px); }
.marquee__link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
  .marquee__list[aria-hidden] { display: none; }
}

/* --- Briques texte courtes ------------------------------------------------ */

.lead { max-width: 56ch; margin: 0 0 var(--space-md); font-size: var(--text-lg); line-height: 1.6; color: var(--color-text-muted); text-wrap: pretty; }
.center-head .lead { margin: var(--space-sm) auto 0; }
.section--navy .lead { color: rgba(255,255,255,.82); }
.section--navy .eyebrow { color: #8fd0ff; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags li { padding: 0.35rem 0.9rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-navy); background: var(--color-bg); border-radius: 999px; }

/* --- Le problème : calculateur ------------------------------------------- */

.problem { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 1024px) { .problem { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; } }
.problem__criteres-titre { margin: var(--space-lg) 0 var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }

/* Extrait de comparatif : un document, pas un widget. Fond blanc, filets fins,
   colonne recommandée en bleu. Au scroll : lignes en cascade, puis la colonne s'allume. */
.quote-doc {
  margin: 0; padding: var(--space-md); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -24px rgba(20,33,61,.28);
}
@media (min-width: 768px) { .quote-doc { padding: var(--space-lg); } }
.quote-doc__head { display: flex; align-items: center; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.quote-doc__head strong { display: block; font-size: var(--text-lg); color: var(--color-navy); }
.quote-doc__head span span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.quote-doc__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--color-primary-dark); background: var(--color-bg); }
.quote-doc__icon svg { width: 20px; height: 20px; }
.quote-doc__scroll { overflow-x: auto; }
.quote-doc__scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.quote-doc table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-sm); }
.quote-doc th, .quote-doc td { padding: 0.85rem 0.4rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); hyphens: auto; -webkit-hyphens: auto; }
.quote-doc thead td { width: 31%; }
@media (min-width: 480px) {
  .quote-doc table { font-size: var(--text-base); }
  .quote-doc th, .quote-doc td { padding: 1.1rem 0.85rem; hyphens: manual; -webkit-hyphens: manual; }
  .quote-doc thead td { width: 27%; }
}
.quote-doc tbody tr:last-child > * { border-bottom: 0; }
.quote-doc thead th { padding-top: var(--space-md); font-weight: 700; color: var(--color-navy); }
.quote-doc tbody th { font-size: var(--text-sm); font-weight: 500; line-height: 1.35; color: var(--color-navy); }
.quote-doc tbody th span { display: block; margin-top: 0.15rem; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }
.quote-doc td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.quote-doc td { font-size: var(--text-lg); font-weight: 600; color: var(--color-navy); }
/* Colonne recommandée */
.quote-doc .is-reco { background: rgba(0,128,232,.09); transition: background-color .5s ease 1.1s, color .5s ease 1.1s; }
.quote-doc thead .is-reco { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.quote-doc td.is-reco { font-weight: 600; }
.quote-doc.is-visible thead .is-reco { color: var(--color-text-light); background: var(--color-primary-dark); }
.quote-doc__badge { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 0.4rem; vertical-align: -3px; border-radius: 50%; color: var(--color-text-light); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); }
.quote-doc__badge svg { width: 11px; height: 11px; }
/* Lignes en cascade */
.quote-doc tbody tr { transition: opacity .45s ease, transform .45s ease; transition-delay: calc(.2s + var(--r) * .12s); }
.js-anim .quote-doc:not(.is-visible) tbody tr { opacity: 0; transform: translateY(8px); }   /* lignes visibles sans script (6 nov. 2026) */
.quote-doc.is-visible tbody tr { opacity: 1; transform: none; }
/* Ligne « Économies réalisées » : le chiffre porte le message */
.quote-doc__total > * { padding-top: var(--space-md); }
.quote-doc__total td strong { display: block; font-size: var(--text-xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.quote-doc__total td span { display: block; margin-top: 0.35rem; font-size: var(--text-sm); font-weight: 600; line-height: 1.35; color: var(--color-text-muted); }
@media (min-width: 480px) { .quote-doc__total td strong { font-size: var(--text-3xl); } .quote-doc td { font-size: var(--text-xl); } }
.tone--gain   { color: var(--color-primary-dark); }
.quote-doc__total td span { color: var(--color-text-muted); }
.tone--neutre { color: var(--color-text-muted); }
.tone--perte  { color: #b42318; }   /* rouge réservé à la perte (hors charte, à valider) */
.quote-doc__reco {
  display: flex; gap: 0.6rem; align-items: flex-start; margin: var(--space-md) 0 0; padding: 0.85rem 1rem;
  font-size: var(--text-sm); font-weight: 500; color: var(--color-navy);
  background: rgba(250,177,2,.14); border-radius: var(--radius-md);
}
.quote-doc__reco svg { flex: none; width: 18px; height: 18px; margin-top: 0.15rem; color: var(--color-primary-dark); }
.quote-doc__note { margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) { .quote-doc tbody tr { opacity: 1; transform: none; } }

.problem__resume {
  max-width: 30ch; margin: var(--space-xl) auto 0; text-align: center; text-wrap: balance;
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-navy);
}
@media (min-width: 1024px) { .problem__resume { margin-top: var(--space-2xl); } }

/* Chiffre clé à droite (Taxes) : très grand, centré verticalement face au texte */
.problem__stat { margin: 0; }
.problem__stat strong { font-size: clamp(3.5rem, 2rem + 6vw, 7rem); }
.problem__stat span { max-width: 26ch; font-size: var(--text-lg); }

/* Exemple chiffré : panneau blanc discret, barres avant / après tracées au scroll,
   gain sur fond bleu très clair (à droite en desktop, en bas en mobile) */
.saving {
  display: grid; margin-top: var(--space-lg); overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 1024px) { .saving { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); margin-top: var(--space-lg); } }
.saving__main { padding: var(--space-md); }
@media (min-width: 768px) { .saving__main { padding: var(--space-md) var(--space-lg); } }
.saving__tag {
  display: inline-block; margin: 0 0.5rem 0 0; padding: 0.2rem 0.7rem; border-radius: 999px;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); background: rgba(0,128,232,.1);
}
.saving__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0; margin: 0 0 var(--space-sm); }
.saving__title { margin: 0; font-size: var(--text-base); font-weight: 600; line-height: 1.4; color: var(--color-navy); }
.saving__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.saving__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem var(--space-sm); align-items: baseline; }
.saving__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.saving__amount { grid-column: 2; grid-row: 1; font-size: var(--text-base); font-weight: 700; color: var(--color-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.saving__track { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: var(--color-bg); overflow: hidden; }
.saving__bar {
  display: block; width: var(--w); height: 100%; border-radius: inherit; background: #8e9cb0;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s cubic-bezier(.4,0,.2,1); transition-delay: calc(.3s + var(--i) * .5s);
}
.saving.is-visible .saving__bar { transform: none; }
.saving__row.is-target .saving__bar { background: var(--color-primary); }
.saving__row.is-target .saving__amount { color: var(--color-primary-dark); }
.saving__result {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; margin: 0; padding: var(--space-sm) var(--space-md);
  background: rgba(0,128,232,.06); border-top: 1px solid var(--color-border);
}
@media (min-width: 1024px) { .saving__result { border-top: 0; border-left: 1px solid var(--color-border); } }
@media (min-width: 1024px) { .saving__result { display: grid; align-content: center; gap: 0.1rem; padding: var(--space-md) var(--space-lg); } }
.saving__result span { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.saving__result strong { font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.04em; color: var(--color-primary-dark); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .saving__bar { transform: none; } }

/* Bande de chiffres secondaires (TURPE) : compacte, sous le texte et le chiffre clé */
.figures { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
@media (min-width: 768px) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figures li { display: grid; align-content: start; gap: 0.2rem; padding: var(--space-md); }
.figures li + li { border-top: 1px solid var(--color-border); }
@media (min-width: 768px) { .figures li + li { border-top: 0; border-left: 1px solid var(--color-border); } }
.figures strong { font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-primary-dark); }
.figures span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Leviers : titre + intro côte à côte, colonnes numérotées -------------- */

.leviers .points-row { margin-top: 0; }

/* --- Distinction : deux notions face à face (TURPE ≠ accises) -------------- */

.distinct { display: grid; gap: var(--space-sm); max-width: 68rem; margin-inline: auto; }
@media (min-width: 768px) { .distinct { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-md); } }
.distinct__col { padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .distinct__col { padding: var(--space-lg); } }
.distinct__head { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-sm); }
.distinct__head strong { display: block; font-size: var(--text-xl); color: var(--color-navy); }
.distinct__head span span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.distinct__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-lg); color: var(--color-primary-dark); background: rgba(0,128,232,.1); }
.distinct__icon svg { width: 24px; height: 24px; }
.distinct dl { margin: 0; }
.distinct dl div { padding-block: 0.8rem; border-top: 1px solid var(--color-border); }
.distinct dl div:last-child { padding-bottom: 0; }
.distinct dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); }
.distinct dd { margin: 0.2rem 0 0; }
.distinct__neq {
  display: grid; place-items: center; justify-self: center; align-self: center; width: 48px; height: 48px; border-radius: 50%;
  font-family: system-ui, sans-serif; font-size: 1.75rem; font-weight: 600; line-height: 1;   /* Poppins dessine mal le signe ≠ */
  color: var(--color-navy); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.distinct__end { margin: var(--space-lg) auto 0; text-align: center; text-wrap: balance; font-size: var(--text-lg); font-weight: 600; color: var(--color-navy); }
.distinct__end + .section-foot { margin-top: var(--space-sm); }

/* --- Dispositifs : onglets électricité / gaz, deux colonnes ----------------- */

.schemes__tabs { justify-content: center; margin-bottom: var(--space-lg); }
.schemes__tabs .cat-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.4rem; font-size: var(--text-base); font-weight: 600; }
.schemes__tabs .cat-tab svg { width: 18px; height: 18px; }
.schemes__panel { animation: rise .35s ease both; }
.schemes__panel:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 8px; border-radius: var(--radius-md); }
.schemes__intro { max-width: 62ch; margin: 0 auto var(--space-lg); text-align: center; text-wrap: pretty; color: var(--color-text-muted); }
.schemes__intro strong { color: var(--color-navy); }
.schemes__cols { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .schemes__cols { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }
.schemes__col { padding-top: var(--space-md); border-top: 3px solid var(--color-primary); }
.schemes__col + .schemes__col { border-top-color: var(--color-navy); }
.schemes__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem var(--space-sm); }
.schemes__head h3 { margin: 0; font-size: var(--text-xl); }
.schemes__head strong { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--color-primary-dark); white-space: nowrap; }
.schemes__sub { margin: 0.2rem 0 var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.schemes__col ul { list-style: none; margin: 0; padding: 0; }
.schemes__col li { display: flex; gap: var(--space-sm); align-items: flex-start; padding-block: 0.8rem; border-top: 1px solid var(--color-border); }

/* --- Ce que nous faisons : photo + parcours relié ------------------------ */

.doing { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .doing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.doing__media { margin: 0; }
.doing__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 45% 35%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); background: var(--color-border); }
@media (min-width: 1024px) { .doing__media img { aspect-ratio: 1; } }
@media (min-width: 1024px) { .doing__media .photo-placeholder { aspect-ratio: 1; } }
.photo-placeholder { grid-template-columns: minmax(0, 1fr); }   /* le libellé passe à la ligne au lieu de déborder */
.journey { list-style: none; margin: var(--space-lg) 0 0; padding: 0; border-top: 1px solid var(--color-border); }
.journey li { display: grid; gap: 0.35rem; padding-block: var(--space-md); border-bottom: 1px solid var(--color-border); }
.journey strong { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; color: var(--color-navy); }
.journey li > span { color: var(--color-text-muted); }
@media (min-width: 768px) { .journey li > span { font-size: var(--text-lg); } }

/* Volets (Conseil) : la bonne offre en trois cartes numérotées, puis une phrase de transition */
.choice { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
@media (min-width: 900px) { .choice { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }
.choice__card { display: flex; flex-direction: column; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.choice__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-lg); color: var(--color-primary-dark); background: var(--color-bg); border-radius: var(--radius-md); }
.choice__icon svg { width: 24px; height: 24px; }
.choice__label { margin: 0 0 0.6rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); }
.choice__card h3 { margin: 0 0 var(--space-sm); font-family: var(--font-title); font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.55rem); font-weight: 600; line-height: 1.25; }
.choice__card p:last-child { margin: 0; color: var(--color-text-muted); }
.choice__next { max-width: 46ch; margin: var(--space-xl) auto 0; text-align: center; font-family: var(--font-title); font-size: var(--text-xl); line-height: 1.45; color: var(--color-navy); text-wrap: balance; }
@media (min-width: 1024px) { .choice__next { margin-top: 5rem; } }


/* Sans photo : titre et affirmation à gauche, étapes à droite */
.doing--solo .journey { margin-top: 0; }
.doing--solo .doing__statement {
  margin: var(--space-xl) 0 0; max-width: 24ch;
  font-family: var(--font-title); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 600; line-height: 1.3; color: var(--color-navy);
}
.doing--solo .doing__statement::before { content: ""; display: block; width: 2.5rem; height: 2px; margin-bottom: var(--space-md); background: var(--color-accent); }
.doing--solo .section-foot { margin-top: var(--space-lg); }
@media (min-width: 1024px) { .doing--solo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-2xl); } }

/* --- Pour qui : message à gauche, trois critères à droite ---------------- */

.fit__intro h2 { margin: 0 0 var(--space-md); max-width: 18ch; }
@media (min-width: 1024px) {
  .fit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .fit__intro { position: sticky; top: calc(var(--header-h) + var(--space-lg)); }
}
.fit__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.fit__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.fit__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-lg);
  color: var(--color-primary-dark); background: var(--color-bg);
}
.fit__icon svg { width: 24px; height: 24px; }
.fit__list h3 { margin: 0; font-size: var(--text-xl); }
.fit__sub { margin: 0.15rem 0 0.6rem; font-weight: 600; color: var(--color-primary-dark); }
.fit__list p:last-child { margin: 0; color: var(--color-text-muted); }
.fit__list a { color: var(--color-navy); text-decoration-color: rgba(0,128,232,.5); text-underline-offset: 3px; }
.fit__list a:hover { color: var(--color-primary-dark); text-decoration-color: currentColor; }

/* --- Pourquoi nous : tuiles à icône --------------------------------------- */

.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
@media (min-width: 600px)  { .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reasons { grid-template-columns: repeat(4, 1fr); } }
.reasons li { padding: var(--space-lg) var(--space-md); background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.reasons__icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-md); border-radius: var(--radius-lg);
  color: var(--color-text-light); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: 0 8px 20px rgba(0,128,232,.28);
}
.reasons__icon svg { width: 26px; height: 26px; }
.reasons h3 { margin: 0 0 0.35rem; font-size: var(--text-lg); }
.reasons p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Rémunération : maillons de la « chaîne de valeur » (accueil), non cliquables --- */
/* Reprend .flow / .flow__tab / .flow__icon et la ligne parcourue d'une impulsion ; le maillon
   « Vous » prend l'état actif (.is-on) et affiche 0 € en ambre. */

.flow--static { margin-top: var(--space-xl); }
.flow--static .flow__tab { cursor: default; }
.flow--static .flow__tab:hover { background: #1c2a49; border-color: rgba(255,255,255,.12); }
.flow--static .flow__tab.is-on,
.flow--static .flow__tab.is-on:hover { background: linear-gradient(160deg, #0d4f96, #13315f); border-color: rgba(0,128,232,.8); }
.flow__tab.is-on .flow__icon { background: var(--color-primary); box-shadow: 0 0 0 8px rgba(0,128,232,.18), 0 0 28px rgba(0,128,232,.6); }
.flow__amount { margin-left: auto; font-style: normal; font-size: var(--text-3xl); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--color-accent); }
@media (min-width: 1024px) {
  .flow--static { grid-template-columns: repeat(var(--n), 1fr); }
  .flow--static::before, .flow--static::after { left: 16%; right: 16%; }
  .flow__amount { margin: var(--space-xs) 0 0; font-size: var(--text-4xl); }
}
.payflow__pledge {
  display: flex; gap: var(--space-sm); align-items: flex-start; max-width: 52rem; margin: var(--space-xl) auto 0;
  padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg);
  font-size: var(--text-sm); color: rgba(255,255,255,.85); background: rgba(255,255,255,.06);
}
.payflow__pledge strong { color: var(--color-text-light); }
.payflow__pledge-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-accent); background: rgba(250,177,2,.16); }
.payflow__pledge-icon svg { width: 20px; height: 20px; }

/* --- FAQ en deux colonnes ------------------------------------------------- */

@media (min-width: 1024px) { .faq-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.faq-split .sticky-head h2 { margin: 0; }

/* --- Cross-sell : 3 cartes ------------------------------------------------ */

.cards-3 { display: grid; gap: var(--space-md); }
@media (min-width: 768px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.cards-3 .card-link h3 { font-size: var(--text-xl); }
.card-link--static:hover { box-shadow: var(--shadow-sm); transform: none; }

/* --- Mouvement réduit ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; }
  .flow::after, .fr-logos.is-active .fr-logo { animation: none !important; }
  .js-anim [data-reveal], .js-anim [data-reveal] > li[style*="--i"] { opacity: 1 !important; transform: none !important; }
}

/* === Pages légales + glossaire (sous-agent) ===============================
   Hero simple (SmartBlocs.heroSimple), gabarit juridique (assets/js/legal.js),
   glossaire (assets/js/glossaire.js). Mobile first.
   ========================================================================== */

/* --- Hero simple : fil d'Ariane + H1 + chapeau, sans visuel --------------- */

.hero-simple { padding-block: var(--space-lg) var(--space-xl); background: var(--color-bg); }
.hero-simple h1 {
  font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.03em; max-width: 24ch; margin-bottom: var(--space-md);
}
.hero-simple__lead { margin: 0 0 var(--space-md); max-width: 62ch; color: var(--color-text-muted); }
.hero-simple__meta { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.hero-simple .link-more svg, .gloss .link-more svg { flex: none; }   /* la flèche ne rétrécit pas quand le lien passe sur 2 lignes */
@media (min-width: 1024px) {
  .hero-simple { padding-block: var(--space-xl); }
  .hero-simple__lead { font-size: var(--text-lg); }
}

/* --- Gabarit juridique : sommaire + texte --------------------------------- */

.legal__grid { display: grid; gap: var(--space-lg); }
.legal-toc { padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-lg); }
.legal-toc__title { margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-border); }
.legal-toc a {
  display: block; margin-left: -2px; padding: 0.35rem 0 0.35rem var(--space-sm);
  border-left: 2px solid transparent;
  font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-muted); text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.legal-toc a:hover { color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }
.legal-toc a[aria-current] { color: var(--color-primary-dark); border-left-color: var(--color-primary); font-weight: 600; }
@media (min-width: 1024px) {
  .legal__grid { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
  .legal-toc { position: sticky; top: calc(var(--header-h) + var(--space-lg)); padding: 0; background: none; border-radius: 0; }
}

.legal-doc { max-width: 46rem; }
.legal-doc > section { padding-block: var(--space-lg); border-top: 1px solid var(--color-border); scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
.legal-doc > section:first-child { padding-top: 0; border-top: 0; }
.legal-doc > section:last-child { padding-bottom: 0; }
.legal-doc h2 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); margin-bottom: var(--space-sm); }
.legal-doc h3 { font-size: var(--text-lg); margin: var(--space-md) 0 var(--space-xs); }
.legal-doc p { margin: 0 0 var(--space-sm); }
.legal-doc p:last-child { margin-bottom: 0; }
.legal-doc ul { margin: 0 0 var(--space-sm); padding-left: 1.25rem; }
.legal-doc li { margin-bottom: 0.3rem; }
.legal-doc li::marker { color: var(--color-primary); }
.legal-doc a { color: var(--color-primary-dark); text-underline-offset: 3px; }
.legal-address { margin: 0 0 var(--space-md); font-style: normal; font-weight: 500; color: var(--color-navy); }

/* Faits d'identité : libellé / valeur */
.legal-facts { margin: 0 0 var(--space-sm); border-top: 1px solid var(--color-border); }
.legal-facts > div { display: grid; gap: 0.1rem; padding-block: 0.65rem; border-bottom: 1px solid var(--color-border); }
.legal-facts dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.legal-facts dd { margin: 0; font-weight: 500; color: var(--color-navy); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .legal-facts > div { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-md); align-items: baseline; }
}

/* Tableau (durées de conservation) */
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.legal-table th, .legal-table td { padding: 0.75rem 0.75rem 0.75rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.legal-table thead th { font-weight: 600; color: var(--color-navy); border-bottom: 2px solid var(--color-navy); }
.legal-table tbody th { font-weight: 500; color: var(--color-text); }
@media (min-width: 768px) { .legal-table { font-size: var(--text-base); } .legal-table th, .legal-table td { padding-right: var(--space-md); } }
/* Tableau à plusieurs colonnes : une carte par ligne sur mobile (intitulé de colonne via data-label) */
@media (max-width: 767px) {
  .legal-table--cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-table--cartes tr, .legal-table--cartes th, .legal-table--cartes td { display: block; }
  .legal-table--cartes tr { padding-block: 0.5rem; border-bottom: 1px solid var(--color-border); }
  .legal-table--cartes th, .legal-table--cartes td { padding: 0.2rem 0; border: 0; }
  .legal-table--cartes tbody th { font-weight: 600; color: var(--color-navy); }
  .legal-table--cartes td::before { content: attr(data-label) " : "; font-weight: 500; color: var(--color-text-muted); }
}

/* --- FAQ : sommaire des thèmes + un accordéon par thème -------------------- */

.faq-theme { padding-block: var(--space-lg); scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
.faq-theme:first-child { padding-top: 0; }
.faq-theme:last-child { padding-bottom: 0; }
.faq-theme h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem var(--space-sm); margin: 0 0 var(--space-sm); font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); }
.faq-theme__count { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--color-text-muted); }
@media (min-width: 1024px) { .faq-theme { padding-block: var(--space-xl); } }

/* --- Contact : formulaire à gauche, experts et coordonnées à droite -------- */

/* En-tête et formulaire sur le même fond : on les rapproche (page jugée trop longue) */

.contact__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; } }

.contact-form { padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
@media (min-width: 768px) { .contact-form { padding: var(--space-lg); } }
.contact-form h2 { margin: 0 0 0.35rem; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); }
.contact-form__note { margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-text-muted); }
.contact-form__grid { display: grid; column-gap: var(--space-md); }
@media (min-width: 768px) { .contact-form__grid { grid-template-columns: 1fr 1fr; } }

.field { margin-bottom: var(--space-md); }
.field > label, .field__label { display: block; margin-bottom: 0.35rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
.field__req { color: #b42318; }   /* même rouge que les erreurs (hors charte, cf. memory.md) */
.field input:not([type="checkbox"]):not([type="file"]), .field select, .field textarea {
  width: 100%; padding: 0.75rem 0.9rem; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-text-muted); border-radius: var(--radius-md);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.field [aria-invalid] { border-color: #b42318 !important; box-shadow: 0 0 0 1px #b42318; }
.field__hint { margin: 0.3rem 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.field__error { display: flex; gap: 0.35rem; margin: 0.35rem 0 0; font-size: var(--text-sm); font-weight: 500; color: #b42318; }
.field__error[hidden] { display: none; }
.field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; border-radius: 50%; font-size: var(--text-xs); font-weight: 700; color: #fff; background: #b42318; }

/* Dépôt de fichiers */
.field > .dropzone {
  display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); cursor: pointer;
  font-size: var(--text-sm); color: var(--color-text-muted);
  background: var(--color-bg); border: 1.5px dashed #9aa6b6; border-radius: var(--radius-md);
  transition: border-color .2s ease, background-color .2s ease;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--color-primary); background: rgba(0,128,232,.06); }
.dropzone:has(+ input[type="file"]:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.dropzone strong { color: var(--color-navy); }
.dropzone__link { color: var(--color-primary-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dropzone__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-primary-dark); background: var(--color-surface); }
.dropzone__icon svg { width: 20px; height: 20px; }
.dropzone__files { list-style: none; margin: 0; padding: 0; }
.dropzone__files li { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.5rem; font-size: var(--text-sm); color: var(--color-navy); }
.dropzone__files li span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__files li span:last-child { flex: none; color: var(--color-text-muted); }
.dropzone__files svg { flex: none; width: 16px; height: 16px; color: var(--color-primary-dark); }

.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field--check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem var(--space-sm); align-items: start; }
.field--check input { width: 20px; height: 20px; margin: 0.15rem 0 0; accent-color: var(--color-primary-dark); }
.field--check label { margin: 0; font-size: var(--text-sm); font-weight: 400; color: var(--color-text); }
.field--check a { color: var(--color-primary-dark); text-underline-offset: 3px; }
.field--check .field__error { grid-column: 2; }
.contact-form__rgpd { margin: 0 0 var(--space-md); font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-muted); }
.contact-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); }
.contact-form__submit p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

.contact-form__done { display: grid; justify-items: start; gap: 0.25rem; padding-block: var(--space-lg); outline: none; }
.contact-form__done-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-sm); border-radius: 50%; color: var(--color-text-light); background: var(--color-primary-dark); }
.contact-form__done-icon svg { width: 28px; height: 28px; }
.contact-form__done p { margin: 0; }

/* Envoi en cours (formulaire.js) : formulaire grisé, bouton à indicateur, étapes et transfert des fichiers */
.contact-form form.is-envoi > :not(h2, .contact-form__submit) { opacity: .55; transition: opacity .2s ease; }
.contact-form form.is-envoi .dropzone { pointer-events: none; }
.contact-form form.is-envoi .contact-form__btn:disabled { opacity: 1; cursor: progress; }
.form-envoi__spinner { flex: none; width: 1.1rem; height: 1.1rem; border: 2px solid rgba(255,255,255,.35); border-top-color: var(--color-accent); border-radius: 50%; animation: form-envoi-tour .8s linear infinite; }
@keyframes form-envoi-tour { to { transform: rotate(360deg); } }
.form-envoi { display: grid; gap: 0.5rem; max-width: 26rem; margin-top: var(--space-sm); }
.form-envoi__etape { margin: 0; font-size: var(--text-sm); color: var(--color-primary-dark); }
.form-envoi__barre { height: 6px; overflow: hidden; border-radius: 999px; background: var(--color-bg); }
.form-envoi__barre > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); transition: width .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .form-envoi__spinner { animation: none; border-top-color: rgba(255,255,255,.35); border-right-color: var(--color-accent); }
  .form-envoi__barre > span { transition: none; }
}

/* Colonne de droite */
.contact-aside { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .contact-aside { position: sticky; top: calc(var(--header-h) + var(--space-lg)); } }
.contact-aside h2 { margin: 0 0 var(--space-md); font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); }
.experts { list-style: none; margin: 0; padding: 0; }
.expert { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-border); }
.expert:first-child { padding-top: 0; border-top: 0; }
.expert img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--color-border); }
.expert h3 { margin: 0; font-size: var(--text-lg); }
.expert__role { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); }
.expert__scope { margin: 0.35rem 0 0.6rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.contact-line { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.contact-line li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--text-sm); }
.contact-line a { color: var(--color-navy); text-decoration: none; overflow-wrap: anywhere; }
.contact-line a:hover { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.contact-line__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--color-primary-dark); background: var(--color-surface); }
.contact-line__icon svg { width: 14px; height: 14px; }
.contact-coords address { font-style: normal; }
.contact-coords__societe { margin: 0 0 var(--space-xs); color: var(--color-navy); }
.contact-coords .contact-line li { font-size: var(--text-base); }
.contact-coords__hours { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.contact-coords__hours strong { color: var(--color-navy); }

/* --- Fournisseurs : grille filtrable ------------------------------------- */

/* Hero propre à la page : texte + chiffres à gauche, carte de France avec logos flottants à droite
   (classes .fr-map / .fr-logo de l'accueil, même animation) */
.panel-hero { padding-block: var(--space-lg) var(--space-xl); background: var(--color-bg); overflow: hidden; }
@media (min-width: 1024px) { .panel-hero { padding-block: var(--space-xl) var(--space-2xl); } }
.panel-hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) { .panel-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-2xl); } }
.panel-hero h1 { margin: 0 0 var(--space-md); max-width: 18ch; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.panel-hero__lead { max-width: 54ch; margin: 0 0 var(--space-lg); font-size: var(--text-lg); line-height: 1.6; color: var(--color-text-muted); }
.panel-hero__map { margin: 0 auto; }
@media (max-width: 1023px) { .panel-hero__map { max-width: 440px; } }

.panel-grid__title { margin: 0 0 var(--space-md); }
/* Recherche + un seul filtre (énergie, 16 oct. 2026) : sur une ligne dès que la largeur le permet */
.panel-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-md) var(--space-lg); padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-lg); }
.panel-tools__search { flex: 1 1 18rem; }
.panel-tools__search input { max-width: 28rem; }
.panel-tools__search label, .pills legend { display: block; margin-bottom: 0.35rem; padding: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
.panel-tools__search input {
  width: 100%; padding: 0.65rem 0.9rem; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-text-muted); border-radius: var(--radius-md);
}
.panel-tools__search input::placeholder { color: var(--color-text-muted); opacity: 1; }
.panel-tools__search input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.pills { min-width: 0; margin: 0; padding: 0; border: 0; }
.pills__list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pills label { position: relative; cursor: pointer; }
.pills input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pills span {
  display: inline-block; padding: 0.45rem 0.9rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-navy);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pills label:hover span { border-color: var(--color-navy); }
.pills input:checked + span { color: var(--color-text-light); background: var(--color-navy); border-color: var(--color-navy); }
.pills input:focus-visible + span { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.panel-count { margin: var(--space-md) 0 var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.suppliers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .suppliers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); } }
@media (min-width: 1024px) { .suppliers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.suppliers > li[hidden] { display: none; }
/* Pagination de la grille (17 oct. 2026) : numéros ronds, page courante pleine, flèches précédente / suivante */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); margin-top: var(--space-lg); }
.pager[hidden] { display: none; }
.pager__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; list-style: none; margin: 0; padding: 0; }
.pager__btn {
  display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.75rem;
  border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
  font: 600 var(--text-sm)/1 var(--font-body); color: var(--color-navy); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.pager__btn:hover:not([disabled]):not([aria-current]) { border-color: var(--color-primary); color: var(--color-primary); }
.pager__btn[aria-current="page"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-text-light); cursor: default; }
.pager__btn[disabled] { opacity: .4; cursor: not-allowed; }
.pager__btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.pager__btn svg { width: 1rem; height: 1rem; }
.pager__btn--prev svg { transform: rotate(180deg); }
.pager__status { display: none; margin: 0 var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
/* Mobile : « 2 / 9 » entre les flèches au lieu de la liste des numéros */
@media (max-width: 767px) { .pager__list { display: none; } .pager__status { display: block; } }

/* Carte : logo sur un plateau clair, puis nom / type / énergies, flèche ronde qui s'allume au survol */
.supplier {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.supplier:hover { border-color: rgba(0,128,232,.35); box-shadow: 0 18px 40px -18px rgba(20,33,61,.35); transform: translateY(-4px); }
.supplier:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.supplier__logo {
  display: block; height: 96px; padding: 1.1rem 1.25rem;
  background: radial-gradient(120% 90% at 50% 0%, #fff 55%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) { .supplier__logo { height: 128px; padding: 1.5rem 1.75rem; } }
.supplier__logo img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.supplier:hover .supplier__logo img { transform: scale(1.04); }
.supplier__logo .placeholder { font-size: var(--text-xs); color: var(--color-text-muted); }
.supplier__body { flex: 1; display: flex; align-items: flex-end; gap: var(--space-xs); padding: 0.85rem 0.9rem 0.95rem; }
@media (min-width: 768px) { .supplier__body { padding: 1rem 1.1rem 1.1rem; } }
.supplier__text { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.supplier__name { font-size: var(--text-base); font-weight: 600; line-height: 1.3; color: var(--color-navy); }
.supplier__type { font-size: var(--text-xs); color: var(--color-text-muted); }
.supplier__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.chip { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; line-height: 1.5; color: var(--color-primary-dark); background: rgba(0,128,232,.09); }
.chip svg { flex: none; width: 12px; height: 12px; }
.chip--gaz { color: #7a4f00; background: rgba(250,177,2,.18); }   /* contraste AA sur fond ambre clair */
.chip--autre { color: var(--color-navy); background: var(--color-bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier__go {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--color-primary-dark); background: var(--color-bg); transition: background-color .25s ease, color .25s ease;
}
.supplier__go svg { width: 16px; height: 16px; transition: transform .25s ease; }
.supplier:hover .supplier__go { color: var(--color-text-light); background: var(--color-primary); }
.supplier:hover .supplier__go svg { transform: translateX(2px); }
@media (max-width: 479px) { .supplier__go { display: none; } }
.panel-empty { padding: var(--space-lg) 0; text-align: center; }
.panel-empty p { margin: 0 0 var(--space-sm); color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) { .supplier:hover, .supplier:hover .supplier__logo img { transform: none; } }

/* --- Fournisseur : page individuelle (gabarit unique) --------------------- */

.supplier-hero {
  --brand: var(--color-primary);
  position: relative; overflow: hidden; padding-block: var(--space-lg) var(--space-xl);
  background: linear-gradient(115deg, color-mix(in srgb, var(--brand) 13%, #fff) 0%, color-mix(in srgb, var(--brand) 5%, var(--color-bg)) 55%, var(--color-bg) 100%);
}
/* Halo de la couleur du fournisseur derrière le logo + filet en bas du hero */
.supplier-hero::before {
  content: ""; position: absolute; z-index: 0; right: -10%; top: -30%; width: 60vw; max-width: 720px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent);
  pointer-events: none;
}
.supplier-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 20%, transparent)); }
.supplier-hero__grid { position: relative; z-index: 1; }
.supplier-hero__grid { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 1024px) { .supplier-hero__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-2xl); } .supplier-hero { padding-block: var(--space-xl); } }
.supplier-hero h1 { margin: 0 0 var(--space-sm); max-width: 22ch; font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; }
.supplier-hero__tagline { margin: 0 0 var(--space-md); font-size: var(--text-lg); font-style: italic; color: var(--color-text-muted); }
.supplier-hero__tags li { background: var(--color-surface); }
.supplier-hero__site { margin: var(--space-md) 0 0; }
.supplier-hero__logo {
  display: grid; place-items: center; margin: 0; aspect-ratio: 16 / 9; padding: var(--space-lg);
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--brand) 45%, rgba(20,33,61,.4)), 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}
.supplier-hero__logo img { width: 80%; height: 100%; object-fit: contain; }
@media (max-width: 1023px) { .supplier-hero__logo { order: -1; max-width: 22rem; aspect-ratio: 2 / 1; padding: var(--space-md); } }

@media (min-width: 1024px) { .supplier-intro { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.supplier-intro h2 { margin: 0 0 var(--space-md); }
.supplier-facts { padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-xl); }
@media (min-width: 768px) { .supplier-facts { padding: var(--space-lg); } }
.supplier-facts h3 { margin: 0 0 var(--space-sm); font-size: var(--text-lg); }
.supplier-facts ul { list-style: none; margin: 0; padding: 0; }
.supplier-facts li { position: relative; padding: 0.7rem 0 0.7rem 1.1rem; font-size: var(--text-sm); color: var(--color-navy); border-top: 1px solid var(--color-border); }
.supplier-facts li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }

.supplier-points__title { margin: 0 0 var(--space-md); }
.supplier-points .check-list { margin: 0; }
@media (min-width: 768px) { .supplier-points .check-list ul { columns: 2; column-gap: var(--space-xl); } .supplier-points .check-list li { break-inside: avoid; } }
.supplier-why { max-width: 48rem; }
.supplier-why h2 { margin: 0 0 var(--space-md); }

/* --- Glossaire ------------------------------------------------------------ */

.gloss { padding-top: 0; }
.gloss [hidden] { display: none !important; }   /* filtre : l'attribut hidden l'emporte sur les display: grid ci-dessous */

/* Outils : recherche + index A-Z (collants à partir de 768 px) */
.gloss-tools {
  display: grid; gap: var(--space-sm);
  padding-block: var(--space-md); margin-bottom: var(--space-sm);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.gloss-search { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-sm); }
.gloss-search input { grid-column: 1 / -1; }
.gloss-search label { display: block; margin-bottom: 0.3rem; white-space: nowrap; font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
.gloss-search input {
  width: 100%; padding: 0.7rem 0.9rem;
  font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-text-muted); border-radius: var(--radius-md);
}
.gloss-search input::placeholder { color: var(--color-text-muted); opacity: 1; }
.gloss-search input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }

.az { min-width: 0; }
.az ul {
  display: flex; gap: 0.15rem; margin: 0; padding: 0 0 0.25rem; list-style: none;
  overflow-x: auto; scrollbar-width: thin;
}
.az__letter {
  position: relative;   /* contient le texte .visually-hidden (sinon débordement de page en mobile) */
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none;
  font-weight: 600; font-size: var(--text-sm); line-height: 1; text-decoration: none;
  color: var(--color-primary-dark); border-radius: var(--radius-sm);
  transition: background-color .2s ease, color .2s ease;
}
a.az__letter:hover { background: var(--color-bg); color: var(--color-navy); }
.az__letter.is-off { color: #a3abb6; }   /* lettre sans entrée : inactive (exemptée de contraste, WCAG 1.4.3) */

.gloss-status { grid-column: 1 / -1; grid-row: 3; margin: 0.45rem 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }   /* sous le champ : ne se coupe plus */

@media (min-width: 768px) {
  .gloss-tools {
    position: sticky; top: var(--header-h); z-index: 5;
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); align-items: end; column-gap: var(--space-lg);
  }
  .az ul { flex-wrap: wrap; justify-content: flex-end; overflow: visible; padding: 0; }
  .az__letter { width: 2rem; height: 2.25rem; }
}

/* Entrées groupées par lettre */
.gloss-group { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); scroll-margin-top: var(--header-h); }
.gloss-groups > .gloss-group:last-child { padding-bottom: 0; }
/* Filets seulement entre éléments visibles (le filtre masque des entrées avec [hidden]) */
.gloss-group:not([hidden]) ~ .gloss-group { border-top: 1px solid var(--color-border); }
.gloss-group__letter { margin: 0; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; color: var(--color-primary-dark); }

.gloss-entry { padding-block: var(--space-md); scroll-margin-top: var(--header-h); }
.gloss-entry:not([hidden]) ~ .gloss-entry { border-top: 1px solid var(--color-border); }
.gloss-group__list > .gloss-entry:first-child { padding-top: var(--space-xs); }
.gloss-entry__term { margin: 0 0 var(--space-xs); font-size: var(--text-lg); line-height: 1.3; }
.gloss-entry__term dfn { font-style: normal; }
.gloss-entry__full { display: block; margin-top: 0.2rem; font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.gloss-entry__def { max-width: 65ch; }
.gloss-entry__def p { margin: 0 0 var(--space-xs); }
.gloss-entry__def > :last-child { margin-bottom: 0; }
.gloss-entry__links { display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-md); margin-top: var(--space-xs); }
.gloss-entry__links .link-more { font-size: var(--text-sm); }
.gloss-entry:target { box-shadow: inset 3px 0 0 var(--color-accent); padding-left: var(--space-sm); }

.gloss-sublist { display: grid; margin: 0 0 var(--space-xs); padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.gloss-sublist li { display: grid; grid-template-columns: minmax(3rem, max-content) minmax(0, 1fr); gap: var(--space-sm); padding-block: 0.45rem; border-bottom: 1px solid var(--color-border); }
.gloss-sublist strong { font-weight: 600; color: var(--color-navy); }

.gloss-empty { padding-block: var(--space-lg); }
.gloss-empty p { margin: 0 0 var(--space-xs); }

@media (min-width: 768px) {
  .gloss-group, .gloss-entry { scroll-margin-top: calc(var(--header-h) + var(--tools-h, 7.5rem)); }
}
@media (min-width: 1024px) {
  .gloss-group { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl); }
  .gloss-group__letter { position: sticky; top: calc(var(--header-h) + var(--tools-h, 7.5rem) + var(--space-md)); align-self: start; }
  .gloss-entry { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--space-xl); }
  .gloss-entry__term { margin: 0; }
  .gloss-entry:target { padding-left: var(--space-md); }
}

/* === Comment ça marche ======================================================
   Page pages/comment-ca-marche.html (assets/js/comment-ca-marche.js). Refonte du 7 oct. 2026.
   ========================================================================== */

/* --- Parcours : scroll narratif, traitement éditorial ---------------------------
   Typographie et filets plutôt que cartes et aplats : sobre et lisible. */
.story { display: grid; gap: var(--space-lg); }
.story__aside h2 { max-width: 20ch; text-wrap: balance; }
.story__aside .lead { margin-bottom: 0; }
.story__panel { display: none; }
.story__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.story__step { padding-block: var(--space-md); border-bottom: 1px solid var(--color-border); }
.story__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 0 0 0.5rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); }
.story__num { font-weight: 600; color: var(--color-navy); font-variant-numeric: tabular-nums; }
.story__inline-fact { margin-left: auto; font-weight: 600; color: var(--color-primary-dark); }
.story__step h3 { margin: 0 0 0.5rem; font-size: var(--text-2xl); font-weight: 700; line-height: 1.25; color: var(--color-navy); }
.story__step p:last-child { margin: 0; max-width: 52ch; color: var(--color-text-muted); }

/* Citation en fin de parcours */
.story__quote { margin: var(--space-xl) 0 0; }
.story__quote blockquote { margin: 0; }
.story__quote blockquote p { margin: 0; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; color: var(--color-navy); text-wrap: pretty; }
.story__quote figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: var(--space-md); font-size: var(--text-sm); line-height: 1.4; }
.story__quote img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.story__quote figcaption strong { display: block; color: var(--color-navy); }
.story__quote figcaption span span { color: var(--color-text-muted); }

@media (min-width: 1024px) {
  .story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; }
  .story__aside { position: sticky; top: calc(var(--header-h) + var(--space-xl)); }
  /* Repère : n° / total, fait clé de l'étape lue en grand (fondu), filet de progression */
  .story__panel { display: block; margin-top: var(--space-2xl); }
  .story__count { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  .story__count-cur { color: var(--color-navy); }
  .story__facts { position: relative; height: 9rem; margin-top: var(--space-sm); }
  .story__fact { position: absolute; inset: 0; display: grid; align-content: start; gap: 0.25rem; margin: 0;
    opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
  .story__fact.is-on { opacity: 1; transform: none; }
  .story__fact strong { font-family: var(--font-display); font-size: clamp(2.25rem, 1.2rem + 2.2vw, 3.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--color-navy); }
  .story__fact span { font-size: var(--text-base); color: var(--color-text-muted); }
  .story__bar { display: block; max-width: 22rem; height: 2px; margin-top: var(--space-md); background: var(--color-border); }
  .story__bar > span { display: block; height: 100%; width: 100%; background: var(--color-navy); transform: scaleX(var(--p)); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }

  .story__inline-fact { display: none; }
  .story__main { padding-block: var(--space-xl) 0; }
  .story__step { padding-block: var(--space-lg); }
  .story__step h3 { font-size: var(--text-3xl); }
  /* L'étape lue en navy, les autres en gris */
  .story__step h3, .story__step p:last-child, .story__num, .story__label { transition: color .35s ease; }
  /* Étapes inactives atténuées mais lisibles (gris 4,9:1 sur fond clair, AA) */
  .story__step:not(.is-active) h3 { color: #5c6b82; }
  .story__step:not(.is-active) .story__num, .story__step:not(.is-active) .story__label { color: #5c6b82; }
  .story__step:not(.is-active) p:last-child { color: #5c6b82; }
  .story__quote { margin-top: var(--space-2xl); }
}
@media (prefers-reduced-motion: reduce) { .site-header .primary-nav__cta .btn:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .story__fact, .story__bar > span, .story__step h3, .story__step p { transition: none; } }

/* Comment ça marche, passe premium (14 oct. 2026) : titres d'étapes en serif, repère discret du panneau,
   filet navy qui se trace sur l'étape lue, citation en serif */
.story--premium .story__step { position: relative; }
.story--premium .story__step h3 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.01em; }
.story--premium .story__num { color: var(--color-text-muted); }
.story--premium .story__quote blockquote p { font-family: var(--font-title); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.45; }
@media (min-width: 1024px) {
  .story--premium .story__step::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--color-navy); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .story--premium .story__step.is-active::before { transform: none; }
  .story--premium .story__step h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); }
  .story--premium .story__facts { height: 4.5rem; }
  .story--premium .story__fact strong { font-family: var(--font-title); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; }
  .story--premium .story__fact span { font-size: var(--text-sm); }
}
@media (prefers-reduced-motion: reduce) { .story--premium .story__step::before { transition: none; } }

/* Schéma (composant .schema) adapté au fond navy */
.section--navy .schema__icon { color: var(--color-text-light); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); }
.section--navy .schema li:last-child .schema__icon { color: var(--color-navy); background: var(--color-accent); border-color: var(--color-accent); }
.section--navy .schema h3 { color: var(--color-text-light); }
.section--navy .schema__text { color: rgba(255,255,255,.78); }
.section--navy .schema li:not(:last-child)::before { background: rgba(255,255,255,.18); }
.section--navy .schema li:not(:last-child)::after { background: var(--color-accent); }

/* === Notre histoire =========================================================
   Page pages/notre-histoire.html (assets/js/notre-histoire.js).
   Mobile first (375 px), puis 768 / 1024 px.
   ========================================================================== */

/* --- Hero : photo plein cadre (classes .hero de l'accueil), texte en bas ----- */

.story-hero .hero__frame { min-height: min(88svh, 860px); }
/* Photo en arrière-plan (retours de Sandro, 8 oct. : garder la photo de fond, pas de zoom, fondu propre ;
   on peut couper des personnes).
   Mobile : photo entière (3:2) sous l'en-tête, texte dessous sur navy.
   Desktop : photo à son format (hauteur du hero, aucun recadrage), calée à droite. Un seul fondu, porté par
   la photo elle-même (masque long et progressif) : son bord gauche se fond dans le navy sans couture. */
.story-hero .hero__bg { inset: var(--header-h) 0 auto 0; height: auto; aspect-ratio: 1624 / 1080; animation: none; }
.story-hero .hero__frame:has(.hero__bg) { min-height: 0; padding-top: calc(var(--header-h) + 66.5vw + var(--space-sm)); }
.story-hero .hero__frame:has(.hero__bg)::before {
  background: linear-gradient(180deg, rgba(20,33,61,0) calc(var(--header-h) + 56vw), var(--color-navy) calc(var(--header-h) + 66.5vw));
}
@media (min-width: 1024px) {
  .story-hero .hero__frame:has(.hero__bg) { min-height: min(88svh, 820px); padding-top: calc(var(--header-h) + var(--space-md)); }
  .story-hero .hero__bg {
    inset: 0 0 0 auto; width: auto; max-width: none; height: 100%; aspect-ratio: 1624 / 1080; object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 10%, rgba(0,0,0,.3) 22%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.88) 46%, #000 58%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 10%, rgba(0,0,0,.3) 22%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.88) 46%, #000 58%);
  }
  /* Voiles légers : lisibilité du texte (gauche, uniforme : invisible sur le navy, sans couture), du menu et des repères */
  .story-hero .hero__frame:has(.hero__bg)::before {
    background:
      linear-gradient(90deg, rgba(20,33,61,.6) 0%, rgba(20,33,61,.45) 38%, rgba(20,33,61,0) 62%),
      linear-gradient(180deg, rgba(20,33,61,.55) 0%, rgba(20,33,61,0) 18%),
      linear-gradient(0deg, rgba(20,33,61,.6) 0%, rgba(20,33,61,0) 25%);
  }
}
.story-hero .hero__content { justify-content: flex-end; max-width: 56rem; padding-bottom: 0; }
.story-hero h1 { max-width: 20ch; font-size: clamp(2.1rem, 1.2rem + 3vw, 3.75rem); }
.story-hero .breadcrumb a, .story-hero .breadcrumb span { color: rgba(255,255,255,.72); }
.story-hero .breadcrumb a:hover { color: var(--color-text-light); }
.story-hero .breadcrumb [aria-current] { color: var(--color-text-light); }
.story-hero .breadcrumb li + li::before { color: rgba(255,255,255,.35); }
.story-hero :focus-visible { outline-color: var(--color-text-light); }
/* Sans photo : fond navy dégradé + mention du placeholder */
.story-hero .hero__frame:not(:has(.hero__bg)) {
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(0,128,232,.35), transparent 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(0,128,232,.18), transparent 70%),
    var(--color-navy);
}
.story-hero__todo { position: absolute; right: var(--gutter-wide); top: calc(var(--header-h) + var(--space-md)); margin: 0; font-size: var(--text-xs); color: rgba(255,255,255,.7); }
@media (max-width: 767px) { .story-hero__todo { left: var(--gutter); } }

/* Repères : « Depuis 2019 · Savoie · Lyon · Avignon » */
.story-hero__lieux { list-style: none; margin: 0; padding: var(--space-md) 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0; border-top: 1px solid rgba(255,255,255,.22); font-size: var(--text-sm); font-weight: 500; color: rgba(255,255,255,.85); }
.story-hero__lieux li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0.85rem 0.15rem; border-radius: 50%; background: var(--color-primary); vertical-align: middle; }
.story-hero__lieux li:first-child { color: var(--color-text-light); font-weight: 600; }

/* --- Le fondateur ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .story-founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .story-founder .founder { position: sticky; top: calc(var(--header-h) + var(--space-lg)); }
}
.story-founder h2 { max-width: 20ch; }
.story-founder__end { margin-top: var(--space-md); }

/* Étapes de carrière : période | fonction + entreprise */
.story-career { list-style: none; margin: var(--space-md) 0; padding: 0; max-width: 62ch; border-top: 1px solid var(--color-border); }
.story-career li { display: grid; gap: 0.15rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
.story-career strong { display: block; font-weight: 600; color: var(--color-navy); }
.story-career__periode { font-weight: 600; color: var(--color-primary-dark); white-space: nowrap; }
@media (min-width: 768px) {
  .story-career li { grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-sm); }
}

/* Convictions du fondateur */
.story-convictions__title { margin: var(--space-lg) 0 var(--space-sm); }
.story-convictions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); max-width: 62ch; }
.story-convictions li { padding-left: var(--space-sm); border-left: 2px solid var(--color-primary); line-height: 1.7; }
.story-convictions strong { color: var(--color-navy); font-weight: 600; }

/* --- La fondation : photo + fiche d'identité | récit ---------------------- */

.story-origin { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) { .story-origin { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; } }
.story-origin__media { position: relative; }
.story-origin__img, .story-origin .photo-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); }
.story-origin .photo-placeholder { padding-bottom: 9rem; }
.story-origin__text h2 { max-width: 18ch; }

/* Fiche : posée sur le bas de la photo, comme un extrait d'acte */
.story-card {
  position: relative; margin: calc(-1 * var(--space-xl)) var(--space-sm) 0; padding: var(--space-md);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-md);
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.story-card dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.story-card dd { margin: 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.35; color: var(--color-navy); }
@media (min-width: 768px) {
  .story-card { margin: calc(-1 * var(--space-2xl)) var(--space-md) 0; grid-template-columns: repeat(3, auto); justify-content: space-between; }   /* fiche sous la photo, à cheval sur son bas (18 oct. 2026) */
  .story-card dd { font-size: var(--text-base); }
}
@media (max-width: 767px) { .story-origin .photo-placeholder { padding-bottom: var(--space-xl); } }

/* --- Les chiffres : titre, puis quatre grands compteurs --------------------- */

.story-figures h2 { margin-bottom: var(--space-lg); }
.story-figures__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
@media (min-width: 1024px) { .story-figures h2 { margin-bottom: var(--space-xl); } .story-figures__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); } }
.story-figures__list li { position: relative; display: grid; gap: 0.5rem; padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
/* Filet qui se trace à l'apparition (même geste que .points-row) */
.story-figures__list li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 120ms + .2s); }
.story-figures__list.is-visible li::before { transform: none; }
.story-figures__list strong { font-size: clamp(2.25rem, 1.4rem + 3vw, 4.25rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--color-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.story-figures__unit { margin-left: 0.3rem; font-size: 0.45em; font-weight: 600; letter-spacing: 0; }
.story-figures__list li > span { max-width: 22ch; font-size: var(--text-sm); color: var(--color-text-muted); }
@media (min-width: 768px) { .story-figures__list li > span { font-size: var(--text-base); } }
.story-figures__ca { margin: var(--space-lg) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .story-figures__list li::before { transform: none; }
}

/* === Pourquoi nous choisir ==================================================
   Page pages/pourquoi-nous-choisir.html (assets/js/pourquoi-nous-choisir.js).
   Mobile first (375 px), puis 768 / 1024 px.
   ========================================================================== */

/* --- Hero : fond blanc (la 1re section est bleu clair), sommaire à droite --- */

.why-hero { background: var(--color-surface); }
.why-hero h1 { max-width: 20ch; }
@media (min-width: 1024px) { .why-hero .page-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; } }

/* Sommaire : les quatre raisons, liens vers leur section */
.why-index { padding: var(--space-md); border-radius: var(--radius-xl); background: var(--color-bg); animation: rise .7s .2s cubic-bezier(.2,.7,.2,1) both; }
@media (min-width: 1024px) { .why-index { padding: var(--space-lg); } }
.why-index__title { margin: 0 0 var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); }
.why-index ol { list-style: none; margin: 0; padding: 0; }
.why-index li + li { border-top: 1px solid var(--color-border); }
.why-index a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) 0; color: var(--color-navy); text-decoration: none;
}
.why-index strong { display: block; font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.why-index strong + span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.why-index__arrow { width: 20px; height: 20px; color: var(--color-primary); transition: transform .25s ease; }
.why-index a:hover .why-index__arrow { transform: translateX(4px); }
@media (min-width: 1024px) { .why-index a { padding: var(--space-md) 0; } }

/* Ancres : le titre visé n'est pas masqué par le header collant */
main[data-page="pourquoi-nous-choisir"] h2[id] { scroll-margin-top: calc(var(--header-h) + var(--space-lg)); }

/* --- « Ce que ça change pour vous » : la conséquence de chaque raison -------- */

.so-what { display: grid; gap: 0.25rem; max-width: 62ch; margin: var(--space-md) 0 0; padding: var(--space-sm) var(--space-md); background: rgba(0,128,232,.07); border-radius: var(--radius-md); }
.so-what strong { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); }
.so-what span { font-weight: 500; color: var(--color-navy); }
.so-what--dark { margin-top: var(--space-xl); background: rgba(255,255,255,.06); }
.so-what--dark strong { color: #8fd0ff; }
.so-what--dark span { color: var(--color-text-light); }

/* --- 1. Expérience : texte | 30 ans + jalons ------------------------------- */

.why-xp h2 { max-width: 20ch; }
.why-xp__unit { margin-left: 0.4rem; font-size: 0.35em; font-weight: 600; letter-spacing: 0; }
.why-xp__aside { align-self: center; }
.why-xp__jalons { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.why-xp__jalons li { position: relative; padding: 0.6rem 0 0.6rem 1.5rem; font-weight: 500; color: var(--color-navy); }
.why-xp__jalons li + li { border-top: 1px solid var(--color-border); }
.why-xp__jalons li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--color-primary); }

/* --- 2. Fournisseurs : bandeau de logos pleine largeur ---------------------- */

.section--flush { padding-bottom: 0; }
.why-marquee { margin-top: var(--space-lg); padding-block: var(--space-md); background: var(--color-surface); border-block: 1px solid var(--color-border); }
@media (min-width: 1024px) { .why-marquee { margin-top: var(--space-xl); padding-block: var(--space-lg); } .why-marquee .marquee__list img { height: 40px; max-width: 150px; } }
/* Titre, puis la promesse et le lien vers la liste des fournisseurs */
.section-head .why-panel__claim { margin: var(--space-md) 0; max-width: 24ch; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 600; line-height: 1.4; color: var(--color-primary-dark); }


/* --- 6. Témoignages : chiffres de fin --------------------------------------- */

/* En-tête titre | texte : titre aligné en haut quand le texte est long ; l'encadré garde sa marge */
.section-head--top { align-items: start !important; }
.section-head .so-what { margin-top: var(--space-md); color: inherit; }
.why-panel__head .link-more { width: fit-content; margin-top: var(--space-md); }

/* CTA final sans paragraphe : écart titre / boutons */
.cta-final h2 + .cta-final__actions { margin-top: var(--space-lg); }

/* === Devenir partenaire (refonte du 16 oct. 2026, seconde version) ============
   Page pages/devenir-partenaire.html (assets/js/devenir-partenaire.js).
   Hero clair (halo bleu, encart de chiffres en verre sur le visuel)
   → profils : scène navy éclairée, sélecteur en verre dépoli (trois boutons accolés,
     curseur blanc qui glisse), puis le profil dans une grande carte blanche qui chevauche
     la scène (intro | visuel, lignes Pour qui / Rôle, apports en trois colonnes filetées)
   → cadre commun → croissance (navy) → candidature : un seul bloc, Frédérick (navy) | formulaire.
   Formulaire : classes .contact-form / .field de la page Contact (formulaire.js).
   .join-careers (encart) sert aussi à Carrières.
   ========================================================================== */

/* --- Titres en serif, rythme des sections ------------------------------------ */
main[data-page="devenir-partenaire"] .page-hero h1,
main[data-page="devenir-partenaire"] h2 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.015em; }
main[data-page="devenir-partenaire"] .section { padding-block: 5rem; }
@media (min-width: 1024px) { main[data-page="devenir-partenaire"] .section { padding-block: var(--space-3xl); } }

/* --- Hero ---------------------------------------------------------------------- */
.join-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface) 55%, var(--color-bg) 100%); }
.join-hero > .container { position: relative; }
.join-hero__glow { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38rem 26rem at 82% 38%, rgba(0,128,232,.16), transparent 70%),
    radial-gradient(22rem 16rem at 96% 90%, rgba(143,208,255,.30), transparent 70%); }
.join-hero .nowrap { white-space: nowrap; }
main[data-page="devenir-partenaire"] .join-hero h1 { font-size: clamp(2.35rem, 1.5rem + 3vw, 3.75rem); line-height: 1.05; letter-spacing: -0.025em; max-width: 16ch; }
.join-hero .page-hero__lead { max-width: 54ch; }
@media (min-width: 1024px) {
  main[data-page="devenir-partenaire"] .join-hero { padding-block: var(--space-2xl) 7rem; }
  .join-hero .page-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-2xl); }
}
.join-hero__visual { position: relative; padding-bottom: 3.5rem; }
.join-hero__visual .visuel-attente { border-radius: 36px 0 36px 36px; background: rgba(240,244,249,.75); }
.join-hero__chiffres {
  position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: 0;
  list-style: none; margin: 0; padding: 1.1rem 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); border-radius: 22px;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 24px 60px -24px rgba(20,33,61,.35), 0 2px 6px rgba(20,33,61,.06);
}
@media (min-width: 768px) { .join-hero__chiffres { left: auto; right: auto; left: -2.5rem; width: min(26rem, 90%); padding: 1.35rem 1.6rem; } }
.join-hero__chiffres li { display: grid; gap: 0.1rem; align-content: start; }
.join-hero__chiffres li + li { padding-left: var(--space-sm); border-left: 1px solid rgba(20,33,61,.12); }
.join-hero__chiffres strong { font-family: var(--font-title); font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-navy); }
.join-hero__chiffres span { font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-muted); }
@media (min-width: 768px) { .join-hero__chiffres span { font-size: var(--text-sm); } }

/* --- Profils : scène navy éclairée + sélecteur en verre ------------------------- */
.join-profiles { position: relative; padding-bottom: 5rem; background: var(--color-bg); scroll-margin-top: var(--header-h); }
@media (min-width: 1024px) { .join-profiles { padding-bottom: var(--space-3xl); } }
.join-stage { position: relative; overflow: hidden; padding: 5rem 0 9rem; color: rgba(255,255,255,.82); background: var(--color-navy); isolation: isolate; }
@media (min-width: 1024px) { .join-stage { padding: var(--space-3xl) 0 12rem; } }
.join-stage__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.join-stage__light span { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.join-stage__light span:nth-child(1) { width: 34rem; height: 22rem; left: 50%; top: 52%; margin-left: -17rem; background: rgba(0,128,232,.55); animation: join-drift 18s ease-in-out infinite alternate; }
.join-stage__light span:nth-child(2) { width: 22rem; height: 18rem; left: 8%; top: -6rem; background: rgba(143,208,255,.22); animation: join-drift 22s ease-in-out infinite alternate-reverse; }
.join-stage__light span:nth-child(3) { width: 16rem; height: 12rem; right: 12%; top: 46%; background: rgba(250,177,2,.16); animation: join-drift 26s ease-in-out infinite alternate; }
@keyframes join-drift { from { transform: translate3d(-4%, 0, 0) scale(1); } to { transform: translate3d(5%, -6%, 0) scale(1.08); } }
.join-stage::after { /* fondu vers le bas : la carte du profil se pose sur une zone plus sombre */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: linear-gradient(180deg, transparent 60%, rgba(20,33,61,.55) 100%);
}
.join-stage__head { max-width: 46rem; margin: 0 auto var(--space-lg); text-align: center; }
.join-stage__head h2 { margin: 0 0 var(--space-sm); font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.1; color: var(--color-text-light); }
.join-stage__head p { margin: 0 auto; max-width: 58ch; font-size: var(--text-lg); color: rgba(255,255,255,.8); }

.join-switch {
  --n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  width: 100%; max-width: 54rem; margin: 0 auto; padding: 6px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 22px;
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.6);
}
.join-switch__thumb {
  position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--n));
  border-radius: 16px; background: var(--color-surface);
  box-shadow: 0 10px 30px -8px rgba(0,128,232,.55), 0 2px 6px rgba(0,0,0,.18);
  transition: transform .45s cubic-bezier(.3,.8,.25,1);
}
.join-switch[data-active="1"] .join-switch__thumb { transform: translateX(100%); }
.join-switch[data-active="2"] .join-switch__thumb { transform: translateX(200%); }
.join-switch__tab {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 3.5rem; padding: 0.6rem 0.4rem; font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1.25; text-align: center;
  color: rgba(255,255,255,.82); background: none; border: 0; border-radius: 16px; cursor: pointer;
  transition: color .3s ease;
}
.join-switch__tab:hover { color: var(--color-text-light); }
.join-switch__tab[aria-selected="true"] { color: var(--color-navy); }
.join-switch__tab:focus-visible { outline: 2px solid #8fd0ff; outline-offset: 2px; }
.join-switch__icon { display: none; }
.join-switch__icon svg { display: block; width: 18px; height: 18px; }
.join-switch__tab[aria-selected="true"] .join-switch__icon { color: var(--color-primary); }
@media (min-width: 768px) {
  .join-switch__tab { flex-direction: row; gap: 0.6rem; min-height: 3.75rem; padding: 0.75rem 1rem; font-size: var(--text-base); }
  .join-switch__icon { display: block; }
}

/* --- Le profil : grande carte blanche qui chevauche la scène -------------------- */
.join-profiles__body { position: relative; margin-top: -6.5rem; }
@media (min-width: 1024px) { .join-profiles__body { margin-top: -9rem; } }
.join-panel {
  padding: var(--space-lg) var(--space-md); background: var(--color-surface); border-radius: 28px;
  box-shadow: 0 40px 90px -40px rgba(20,33,61,.45), 0 1px 0 rgba(20,33,61,.04);
  scroll-margin-top: calc(var(--header-h) + var(--space-md));
}
@media (min-width: 768px) { .join-panel { padding: var(--space-xl) var(--space-lg); } }
@media (min-width: 1024px) { .join-panel { padding: 5rem 5.5rem; } }
.join-panel:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.join-panel:not([hidden]) { animation: join-panel .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes join-panel { from { transform: translateY(14px); } to { transform: none; } }

.join-panel__intro { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) { .join-panel__intro { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 5rem; align-items: center; } }
.join-panel__title { margin: 0 0 var(--space-sm); font-family: var(--font-title); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; color: var(--color-navy); }
.join-panel__lead { margin: 0; max-width: 34ch; font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); line-height: 1.55; color: var(--color-text-muted); }
.join-panel__label { margin: var(--space-lg) 0 0.75rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
.join-panel__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.join-panel__tags li { padding: 0.4rem 0.9rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-primary-dark); background: rgba(0,128,232,.07); border-radius: 999px; }

.join-panel__visual .visuel-attente { border-radius: 24px; }
.join-panel__visual--shot { position: relative; padding: clamp(1rem, 3vw, 2rem); border-radius: 28px; background: radial-gradient(80% 70% at 50% 40%, rgba(0,128,232,.18), transparent 75%), var(--color-bg); }
.join-panel__shot { display: block; width: 100%; height: auto; max-width: 30rem; margin-inline: auto; border-radius: 18px; box-shadow: 0 30px 60px -28px rgba(20,33,61,.55); }

.join-panel__rows { margin-top: var(--space-xl); border-top: 1px solid var(--color-border); }
@media (min-width: 1024px) { .join-panel__rows { margin-top: 5rem; } }
.join-row { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-border); }
@media (min-width: 1024px) { .join-row { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl); } }
.join-row__label { margin: 0; font-family: var(--font-title); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-navy); }
.join-row__text { margin: 0; max-width: 62ch; font-size: var(--text-lg); line-height: 1.7; }

.join-steps { list-style: none; margin: 0; padding: 0; counter-reset: etape; display: grid; gap: var(--space-md); }
.join-steps li { counter-increment: etape; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; max-width: 64ch; font-size: var(--text-lg); line-height: 1.6; }
.join-steps li::before {
  content: counter(etape); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-top: -0.1rem;
  font-family: var(--font-title); font-size: var(--text-base); font-weight: 600; color: var(--color-primary-dark);
  border: 1px solid rgba(0,128,232,.35); border-radius: 50%;
}


.join-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xl); }

/* Encart Carrières (postes internes) : une ligne sous les profils */
.join-careers { padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-bg); }
@media (min-width: 1024px) { .join-careers { padding: var(--space-lg); } }
.join-careers h3 { margin-bottom: var(--space-xs); font-size: var(--text-xl); }
.join-careers p { margin: 0 0 var(--space-sm); color: var(--color-text-muted); }
.join-careers.join-careers--line { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); padding: 0 var(--space-xs); background: none; border-radius: 0; }
@media (min-width: 768px) { .join-careers.join-careers--line { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); padding-inline: var(--space-lg); } }
.join-careers--line h3 { margin: 0 0 0.2rem; font-size: var(--text-lg); }
.join-careers--line p { margin: 0; }

/* --- Cadre commun : quatre engagements entre filets ------------------------------ */
.join-cadre { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--color-navy); }
@media (min-width: 768px) { .join-cadre { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); } }
@media (min-width: 1024px) { .join-cadre { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.join-cadre li { padding-block: var(--space-md); border-bottom: 1px solid var(--color-border); }
@media (min-width: 1024px) { .join-cadre li { padding-bottom: 0; border-bottom: 0; } }
.join-cadre__icon { display: block; width: 28px; height: 28px; margin-bottom: var(--space-sm); color: var(--color-primary-dark); }
.join-cadre__icon svg { display: block; width: 100%; height: 100%; }
.join-cadre h3 { margin: 0 0 0.35rem; font-size: var(--text-lg); font-weight: 600; color: var(--color-navy); }
.join-cadre p { margin: 0; color: var(--color-text-muted); }

/* --- Croissance et candidature : un seul bloc, Frédérick, l'entreprise et ses coordonnées (navy) | formulaire (19 oct. 2026) --- */
.join-apply {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 28px; background: var(--color-surface);
  box-shadow: 0 40px 90px -45px rgba(20,33,61,.45), 0 1px 0 rgba(20,33,61,.04);
}
@media (min-width: 1024px) { .join-apply { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.join-apply__side { position: relative; overflow: hidden; color: rgba(255,255,255,.82); background: var(--color-navy); isolation: isolate; }
.join-apply__light { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28rem 22rem at 100% 0%, rgba(0,128,232,.45), transparent 70%),
    radial-gradient(20rem 18rem at 0% 100%, rgba(143,208,255,.14), transparent 70%); }
.join-apply__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-xl) var(--space-md); }
@media (min-width: 768px) { .join-apply__inner { padding: var(--space-xl) var(--space-lg); } }
@media (min-width: 1024px) { .join-apply__inner { position: sticky; top: calc(var(--header-h) + var(--space-sm)); padding: 4.5rem 3.5rem; } }
.join-apply__side h2 { margin: 0 0 var(--space-xs); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.025em; color: var(--color-text-light); }
.join-apply__intro { margin: 0; font-size: var(--text-lg); color: rgba(255,255,255,.82); }
.join-apply__entreprise { padding-top: var(--space-lg); border-top: 1px solid rgba(255,255,255,.14); }
.join-apply__entreprise h3 { margin: 0 0 var(--space-sm); font-family: var(--font-title); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; color: var(--color-text-light); }
.join-apply__entreprise dl { display: grid; gap: 0; margin: 0; }
.join-apply__entreprise dl > div { display: grid; gap: 0.1rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.join-apply__entreprise dt { font-size: var(--text-xs); font-weight: 600; color: #8fd0ff; }
.join-apply__entreprise dd { margin: 0; font-size: var(--text-sm); color: rgba(255,255,255,.88); }
@media (min-width: 768px) { .join-apply__entreprise dl > div { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; } }
.join-apply__form-title { margin: 0 0 var(--space-md); font-family: var(--font-title); font-size: var(--titre-3); font-weight: 600; color: var(--color-navy); }
.join-apply__rdv { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid rgba(255,255,255,.14); scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
.join-apply__rdv h3 { margin: 0; font-family: var(--font-title); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; color: var(--color-text-light); }
.join-apply__rdv p { margin: 0; color: rgba(255,255,255,.8); }
.join-apply__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-xs); }
.join-apply__call { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; white-space: normal; text-align: center; color: var(--color-navy); background: var(--color-surface); }
.join-apply__call svg { flex: none; }
.join-apply__call > span { min-width: 0; }
@media (max-width: 767px) { .join-apply__call { width: 100%; } }
.join-apply__call:hover { color: var(--color-navy); background: #dcecfb; }
.join-apply__call svg, .join-apply__mail svg { width: 18px; height: 18px; margin-right: 0.5rem; vertical-align: -3px; }
.join-apply__mail { display: inline-flex; align-items: center; font-weight: 600; color: var(--color-text-light); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; overflow-wrap: anywhere; }
.join-apply__mail:hover { border-bottom-color: currentColor; }
.join-apply__mail svg { flex: none; }
.join-apply__side :focus-visible { outline: 2px solid #8fd0ff; outline-offset: 3px; }

main[data-page="devenir-partenaire"] .join-apply__form { padding: var(--space-xl) var(--space-md); border: 0; border-radius: 0; box-shadow: none; }
@media (min-width: 768px) { main[data-page="devenir-partenaire"] .join-apply__form { padding: var(--space-xl) var(--space-lg); } }
@media (min-width: 1024px) { main[data-page="devenir-partenaire"] .join-apply__form { padding: 4.5rem 4rem; } }
main[data-page="devenir-partenaire"] .join-apply__form .field input:not([type="checkbox"]):not([type="file"]),
main[data-page="devenir-partenaire"] .join-apply__form .field select,
main[data-page="devenir-partenaire"] .join-apply__form .field textarea { border-radius: 12px; border-color: #8a94a3; }
main[data-page="devenir-partenaire"] .join-apply__form .field input:hover,
main[data-page="devenir-partenaire"] .join-apply__form .field select:hover,
main[data-page="devenir-partenaire"] .join-apply__form .field textarea:hover { border-color: var(--color-navy); }
main[data-page="devenir-partenaire"] .join-apply__form .contact-form__done h2 { font-family: var(--font-title); }
.contact-form { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }

@media (prefers-reduced-motion: reduce) {
  .join-panel:not([hidden]) { animation: none; }
  .join-stage__light span { animation: none; }
  .join-switch__thumb, .join-switch__tab { transition: none; }
}

/* === Carrières + fiche d'offre ==============================================
   Pages pages/carrieres.html (assets/js/carrieres.js) et pages/offre.html (assets/js/offre.js).
   Formulaire : classes .contact-form / .field (formulaire.js).
   ========================================================================== */

/* --- Hero : texte | postes ouverts ------------------------------------------ */

.jobs-hero { background: var(--color-surface); }
@media (min-width: 1024px) { .jobs-hero .page-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.jobs-open { padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-xl); animation: rise .7s .2s cubic-bezier(.2,.7,.2,1) both; }
@media (min-width: 1024px) { .jobs-open { padding: var(--space-lg); } }
.jobs-open__count { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin: 0 0 var(--space-sm); font-size: var(--text-lg); font-weight: 600; color: var(--color-navy); }
.jobs-open__count strong { font-variant-numeric: tabular-nums; color: var(--color-primary-dark); }
.jobs-open ul { list-style: none; margin: 0; padding: 0; }
.jobs-open li + li { border-top: 1px solid var(--color-border); }
.jobs-open a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.15rem var(--space-sm); padding: var(--space-sm) 0; font-weight: 600; color: var(--color-navy); text-decoration: none; }
.jobs-open a svg { width: 18px; height: 18px; color: var(--color-primary); transition: transform .25s ease; }
.jobs-open a:hover svg { transform: translateX(4px); }
.jobs-open a:hover > span:first-child { color: var(--color-primary-dark); }
.jobs-open__type { grid-column: 1; font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.jobs-open a svg { grid-row: 1 / span 2; grid-column: 2; }

/* --- Cartes d'offre ----------------------------------------------------------- */

.jobs-grid { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-md); }
@media (min-width: 768px) { .jobs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jobs-grid { gap: var(--space-lg); margin-top: var(--space-xl); } }
.job-card {
  display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-md);
  background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease, opacity .7s ease;
}
@media (min-width: 1024px) { .job-card { padding: var(--space-lg); } }
.job-card:hover { box-shadow: var(--shadow-md); }
.job-card__type { display: inline-block; margin: 0 0 var(--space-sm); padding: 0.2rem 0.75rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); background: rgba(250,177,2,.22); border-radius: 999px; }
.job-card h3 { margin-bottom: var(--space-sm); font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -0.02em; }
.job-card__text { margin: var(--space-sm) 0 var(--space-md); color: var(--color-text-muted); }
.job-card__btn { margin-top: auto; }

/* Informations clés : icône + valeur (cartes, en-tête de fiche) */
.job-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-md); }
.job-meta li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-navy); }
.job-meta svg { flex: none; width: 18px; height: 18px; color: var(--color-primary-dark); }
.jobs-empty { max-width: 56ch; margin: var(--space-lg) 0 0; padding: var(--space-md); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-muted); }

/* --- Candidature spontanée : texte + renvoi partenaire | formulaire -------- */

.jobs-spont__intro h2 { max-width: 16ch; }
.jobs-spont__intro > p { max-width: 46ch; margin: 0 0 var(--space-lg); color: var(--color-text-muted); }
@media (min-width: 1024px) { .jobs-spont__intro { position: sticky; top: calc(var(--header-h) + var(--space-lg)); } }

/* --- Fiche d'offre : en-tête ----------------------------------------------------- */

.job-hero { padding-block: var(--space-lg) var(--space-xl); background: var(--color-bg); }
@media (min-width: 1024px) { .job-hero { padding-block: var(--space-xl) var(--space-2xl); } }
.job-hero h1 { max-width: 22ch; margin-bottom: var(--space-md); font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); letter-spacing: -0.03em; }
.job-hero .job-meta { margin-bottom: var(--space-lg); }
.job-hero .job-meta li { font-size: var(--text-base); }
.job-hero .hero__actions { align-items: center; margin-bottom: 0; }
.job-hero > .container > * { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }

/* --- Fiche d'offre : contenu | résumé collant -------------------------------- */

.job-body { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .job-body { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: start; } }
.job-block + .job-block { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); }
.job-block h2 { margin-bottom: var(--space-md); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.job-block p { max-width: 68ch; margin: 0; }
.job-lead { font-size: var(--text-lg); color: var(--color-navy); }

.job-missions { list-style: none; margin: 0; padding: 0; }
.job-missions li { padding-block: var(--space-sm); }
.job-missions li + li { border-top: 1px solid var(--color-border); }
.job-missions h3 { margin: 0 0 0.25rem; font-size: var(--text-lg); }
.job-missions p { color: var(--color-text-muted); }

.job-sub { margin: 0 0 var(--space-sm); font-size: var(--text-lg); }
.job-skills { display: grid; column-gap: var(--space-lg); margin: 0 0 var(--space-lg); }
@media (min-width: 768px) { .job-skills { grid-template-columns: 1fr 1fr; } }
.job-skills > div { padding-block: var(--space-sm); border-top: 1px solid var(--color-border); }
.job-skills dt { font-weight: 600; color: var(--color-navy); }
.job-skills dd { margin: 0.2rem 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.job-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.job-tags li { padding: 0.4rem 0.9rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-primary-dark); background: rgba(0,128,232,.08); border-radius: 999px; }
.job-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.job-checks li { display: flex; gap: 0.6rem; }
.job-checks svg { flex: none; width: 20px; height: 20px; margin-top: 0.2rem; color: var(--color-primary); }

.job-summary { padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-xl); }
@media (min-width: 1024px) { .job-summary { position: sticky; top: calc(var(--header-h) + var(--space-lg)); padding: var(--space-lg); } }
.job-summary__title { margin: 0 0 var(--space-sm); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; color: var(--color-navy); }
.job-summary dl { margin: 0 0 var(--space-md); }
.job-summary dl > div { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 0.55rem 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.job-summary dt { color: var(--color-text-muted); }
.job-summary dd { margin: 0; font-weight: 600; text-align: right; color: var(--color-navy); }
.job-summary .btn { width: 100%; }

/* --- Fiche d'offre : formulaire, autres offres -------------------------------- */

.job-apply { max-width: 52rem; }
.job-others__title { font-size: var(--text-2xl); }
.job-others { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.job-others a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-navy); text-decoration: none; transition: border-color .25s ease, box-shadow .25s ease; }
.job-others a:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.job-others .job-card__type { margin: 0; }
.job-others strong { font-size: var(--text-lg); }
.job-others__lieu { font-size: var(--text-sm); color: var(--color-text-muted); }
.job-others svg { width: 20px; height: 20px; margin-left: auto; color: var(--color-primary); }
@media (min-width: 1024px) { .jobs-spont { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (max-width: 1023px) { .jobs-open ul { display: none; } }   /* mobile : les cartes suivent juste après, le compteur suffit */
/* Processus de recrutement : étapes reliées par une ligne */
.job-process { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.job-process li { position: relative; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-sm); }
.job-process__step { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); white-space: nowrap; padding-top: 0.1rem; }
.job-process strong { color: var(--color-navy); }
.job-process p { margin: 0.15rem 0 0; color: var(--color-text-muted); }

/* === Blog : archive + article ===============================================
   blog/index.html (assets/js/blog.js), blog/article.html (assets/js/article.js).
   ========================================================================== */

/* --- Archive : hero léger + filtres ------------------------------------------- */


.post-filters ul { list-style: none; margin: 0; padding: 0 0 var(--space-xs); display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: thin; }
.post-filters a {
  display: inline-flex; padding: 0.5rem 1rem; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 500; color: var(--color-navy); text-decoration: none;
  border: 1px solid var(--color-border); border-radius: 999px; transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.post-filters a:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.post-filters a[aria-current] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-text-light); }

.blog-list { padding-top: var(--space-lg); }
.blog-count { margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-text-muted); }
.blog-empty { max-width: 56ch; padding: var(--space-md); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-muted); }

/* --- Cartes d'article : 1 / 2 / 3 colonnes --------------------------------------- */

.post-grid { display: grid; gap: var(--space-md); }
@media (min-width: 768px)  { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }
.post-card { display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); transition: box-shadow .25s ease, transform .25s ease; }
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.post-card__media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-border); }
.post-media--todo { display: grid; place-items: center; padding: var(--space-sm); font-size: var(--text-xs); color: var(--color-text-muted); background: repeating-linear-gradient(135deg, #e4e9f0 0 14px, #dde3eb 14px 28px); }
.post-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: var(--space-md); }
.post-card__title { margin: var(--space-sm) 0 0.5rem; font-size: var(--text-xl); line-height: 1.3; letter-spacing: -0.01em; }
.post-card__title a { color: var(--color-navy); text-decoration: none; }
.post-card__title a:hover { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.post-card__excerpt { margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .post-meta { margin-top: auto; }

/* Tag de catégorie : teinte prise dans la charte */
.post-tag { display: inline-block; padding: 0.2rem 0.7rem; font-size: var(--text-xs); font-weight: 600; text-decoration: none; border-radius: 999px; transition: filter .2s ease; }
.post-tag:hover { filter: brightness(.95); }
.post-tag--primary      { color: var(--color-primary-dark); background: rgba(0,128,232,.12); }
.post-tag--primary-dark { color: var(--color-text-light);   background: var(--color-primary-dark); }
.post-tag--accent       { color: var(--color-navy);         background: rgba(250,177,2,.28); }
.post-tag--navy         { color: var(--color-text-light);   background: var(--color-navy); }
.post-tag--muted        { color: var(--color-navy);         background: #e3e8ef; }

.post-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Pagination ----------------------------------------------------------------- */

/* Lots suivants du blog (affichage progressif) */
.blog-more { display: flex; justify-content: center; margin-top: var(--space-xl); }

/* --- Article : hero (image à la une incluse) ---------------------------------------- */

.post-hero { padding-block: var(--space-lg) var(--space-xl); background: var(--color-bg); }
@media (min-width: 1024px) { .post-hero { padding-block: var(--space-xl) var(--space-2xl); } }
/* Texte | image à la une (dessous en mobile) */
.post-hero__inner { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 1024px) { .post-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-2xl); } }
.post-hero h1 { max-width: 24ch; margin: var(--space-sm) 0 var(--space-md); font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.post-hero__chapo { max-width: 62ch; margin: 0 0 var(--space-md); font-size: var(--text-lg); line-height: 1.6; color: var(--color-navy); }
.post-hero__meta { margin: 0; }
.post-hero__media { width: 100%; aspect-ratio: 1200 / 628; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
@media (min-width: 1024px) { .post-hero__media { aspect-ratio: 4 / 3; } }
.post-hero > .container > * { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }

/* --- Article : corps | articles liés ------------------------------------------------- */

.post-section { padding-top: var(--space-xl); }
.post-layout { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-2xl); align-items: start; } }

.post-content { max-width: 70ch; font-size: 1.0625rem; line-height: 1.75; }
.post-content > * + * { margin-top: var(--space-sm); }
.post-content p { margin: 0; }
.post-content h2 { margin: var(--space-xl) 0 var(--space-sm); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
.post-content h3 { margin: var(--space-lg) 0 0.5rem; font-size: var(--text-xl); }
.post-content ul, .post-content ol { margin-block: var(--space-sm) 0; padding-left: 1.4rem; }
.post-content li + li { margin-top: 0.5rem; }
.post-content li::marker { color: var(--color-primary); font-weight: 600; }
.post-content strong { color: var(--color-navy); }
.post-content a { color: var(--color-primary-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-content a:hover { text-decoration-thickness: 2px; }
.post-content .btn { color: var(--color-text-light); text-decoration: none; }
.post-content ul + p, .post-content ol + p { margin-top: var(--space-md); }

/* Sommaire (après le 1er paragraphe) */
.post-toc { margin-block: var(--space-lg) !important; padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-lg); }
.post-toc__title { margin: 0 0 0.5rem !important; font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
.post-toc ol { margin: 0; padding-left: 1.3rem; font-size: var(--text-base); }
.post-toc li + li { margin-top: 0.35rem; }
.post-toc a { text-decoration: none; }
.post-toc a:hover { text-decoration: underline; }

/* Encadré expert (CTA dans le corps) */
.post-expert { display: grid; gap: var(--space-sm); align-items: center; margin-block: var(--space-xl) !important; padding: var(--space-md); background: rgba(0,128,232,.07); border-radius: var(--radius-lg); }
@media (min-width: 768px) { .post-expert { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); padding: var(--space-md) var(--space-lg); } }
.post-expert__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-text-light); background: var(--color-primary-dark); }
.post-expert__icon svg { width: 20px; height: 20px; }
.post-expert p { margin: 0; font-size: var(--text-base); }
.post-expert__title { font-weight: 700; color: var(--color-navy); }
.post-expert .btn { justify-self: start; }

.post-foot { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.post-foot p { margin: 0; }
.post-foot span:first-child { color: var(--color-text-muted); margin-right: 0.4rem; }
.post-foot a { font-weight: 600; color: var(--color-primary-dark); }
.post-foot__tag { display: inline-block; margin-right: 0.35rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--color-bg); }

/* Articles liés : colonne collante en desktop, sous l'article en mobile */
.post-related h2 { margin-bottom: var(--space-sm); font-size: var(--text-lg); }
@media (min-width: 1024px) { .post-related { position: sticky; top: calc(var(--header-h) + var(--space-lg)); } }
.post-related ul { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.post-related li + li { border-top: 1px solid var(--color-border); }
.post-related a:not(.link-more) { display: grid; gap: 0.2rem; padding: var(--space-sm) 0; color: var(--color-navy); text-decoration: none; }
.post-related a:not(.link-more):hover strong { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.post-related strong { font-size: var(--text-base); line-height: 1.4; }
.post-related__cat { font-size: var(--text-xs); font-weight: 600; color: var(--color-primary-dark); }
.post-related__meta { font-size: var(--text-xs); color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) { .post-card:hover { transform: none; } }

/* --- Le bon moment : frise des mois qui précèdent l'échéance (Conseil en énergie) --------------
   Mobile : verticale (point + texte). Desktop : horizontale, une ligne relie les points. */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.timeline__step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-md); align-content: start; }
.timeline__step > :not(.timeline__dot) { grid-column: 2; }
.timeline__dot { grid-row: 1 / span 3; grid-column: 1; position: relative; z-index: 1; width: 18px; height: 18px; margin: 4px 3px 0; border-radius: 50%; background: var(--color-surface); border: 3px solid var(--color-primary-dark); }
.timeline__step:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: calc(-1 * var(--space-md) + 2px); width: 2px; background: var(--color-border); }
.timeline__when { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); }
.timeline__step h3 { margin: 0.1rem 0 0.25rem; font-size: var(--text-lg); }
.timeline__step p { margin: 0; color: var(--color-text-muted); }
/* Étape clé (la signature) : point plein, carte légèrement marquée */
.timeline__step.is-key .timeline__dot { background: var(--color-primary-dark); box-shadow: 0 0 0 5px rgba(1,72,141,.15); }
@media (min-width: 1024px) {
  .timeline { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-lg); }
  .timeline__step { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .timeline__step > :not(.timeline__dot) { grid-column: 1; }
  .timeline__when { order: -1; margin-bottom: var(--space-sm); }
  .timeline__dot { grid-row: auto; grid-column: 1; margin: 0 0 var(--space-md); }
  .timeline__step:not(:last-child)::before { left: 18px; right: calc(-1 * var(--space-lg)); top: auto; bottom: auto; width: auto; height: 2px;
    /* aligné sur le centre du point : hauteur du repère + moitié du point */
    margin-top: calc(var(--text-sm) * 1.7 + var(--space-sm) + 8px); }
  .timeline__step p { max-width: 24ch; }
}

/* --- Êtes-vous concerné ? : profils éligibles en tuiles (Optimisation des taxes) --------------- */
.profiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
@media (min-width: 768px)  { .profiles { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } }
@media (min-width: 1024px) { .profiles { grid-template-columns: repeat(4, 1fr); } }
.profile { padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.section--bg .profile { border-color: transparent; }
.profile__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-sm); border-radius: var(--radius-md); color: var(--color-primary-dark); background: rgba(0,128,232,.1); }
.profile__icon svg { width: 22px; height: 22px; }
.profile h3 { margin: 0 0 0.35rem; font-size: var(--text-lg); }
.profile p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.profiles__note { margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.schemes-fold { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.schemes-fold > summary { cursor: pointer; font-weight: 600; color: var(--color-primary-dark); }
.schemes-fold__intro { margin: var(--space-sm) 0 var(--space-md); max-width: 62ch; color: var(--color-text-muted); }
.schemes-fold[open] .schemes { margin-top: var(--space-md); }


/* --- Le bon fournisseur : prix de six fournisseurs en barres (Conseil en énergie) -------------- */
.quotes { margin: 0; padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
@media (min-width: 768px) { .quotes { padding: var(--space-xl) var(--space-lg); } }
.quotes__title { margin-bottom: var(--space-md); font-weight: 600; color: var(--color-navy); }
.quotes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.quotes__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }
@media (max-width: 479px) { .quotes__row { grid-template-columns: 6.25rem minmax(0, 1fr) auto; gap: 0.5rem; } }
.quotes__name { color: var(--color-text-muted); }
.quotes__track { height: 12px; }
.quotes__bar { display: block; width: var(--w); height: 100%; border-radius: 0 4px 4px 0; background: #c9d6e6;
  transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i) * .08s); }
.quotes.is-visible .quotes__bar { transform: none; }
.quotes__price { display: flex; align-items: center; gap: 0.4rem; justify-self: end; font-weight: 600; color: var(--color-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quotes__row.is-best .quotes__name { font-weight: 600; color: var(--color-navy); }
.quotes__row.is-best .quotes__bar { background: var(--color-primary-dark); }
.quotes__tag { display: none; }
@media (min-width: 480px) {
  .quotes__tag { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary-dark); background: rgba(0,128,232,.12); }
  .quotes__tag svg { width: 12px; height: 12px; }
}
.quotes__gap { display: grid; justify-items: center; gap: 0.35rem; margin: var(--space-lg) 0 0; padding-top: var(--space-lg); border-top: 1px solid var(--color-border); text-align: center; }
.quotes__gap strong { font-family: var(--font-title); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 600; line-height: 1.1; color: var(--color-navy); }
.quotes__gap span { font-size: var(--text-sm); color: var(--color-text-muted); }
.quotes__note { margin: var(--space-sm) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .quotes__bar { transform: none; transition: none; } }

/* ==========================================================================
   Template service : blocs ajoutés pour Énergie verte (génériques)
   ========================================================================== */

/* Problème sans comparatif ni chiffre : une seule colonne, largeur de lecture */
@media (min-width: 1024px) { .problem--solo { grid-template-columns: minmax(0, 1fr); max-width: 52rem; } }

/* Schéma : étapes reliées par une ligne (verticale en mobile, horizontale en desktop) */
.schema { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 68rem; display: grid; gap: var(--space-lg); }
.schema li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-md); align-content: start; }
.schema li > :not(.schema__icon) { grid-column: 2; }
.schema__icon {
  grid-row: 1 / span 3; position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  color: var(--color-text-light); background: var(--color-primary-dark);
}
.schema__icon svg { width: 26px; height: 26px; }
.schema__step { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); }
.schema h3 { margin: 0.15rem 0 0.4rem; font-size: var(--text-xl); }
.schema__text { margin: 0; color: var(--color-text-muted); }
/* Ligne de liaison : grise, puis bleue qui se trace à l'apparition */
.schema li:not(:last-child)::before,
.schema li:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 64px; bottom: calc(-1 * var(--space-lg) + 8px); width: 2px; background: var(--color-border); }
.schema li:not(:last-child)::after { background: var(--color-primary); transform: scaleY(0); transform-origin: top; transition: transform .8s cubic-bezier(.4,0,.2,1) calc(.3s + var(--i) * .35s); }
@media (min-width: 1024px) {
  .schema { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-xl); }
  .schema li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .schema li > :not(.schema__icon) { grid-column: 1; }
  .schema__icon { grid-row: auto; width: 64px; height: 64px; margin-bottom: var(--space-sm); }
  .schema__icon svg { width: 28px; height: 28px; }
  .schema__text { max-width: 30ch; }
  .schema li:not(:last-child)::before,
  .schema li:not(:last-child)::after { left: calc(50% + 44px); top: 31px; bottom: auto; width: calc(100% + var(--space-xl) - 88px); height: 2px; }
  .schema li:not(:last-child)::after { transform: scaleX(0); transform-origin: left; }
}
.schema.is-visible li:not(:last-child)::after { transform: none; }
.schema__note { max-width: 46rem; margin: var(--space-xl) auto 0; text-align: center; text-wrap: balance; font-size: var(--text-sm); color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) { .schema li::after { transform: none !important; transition: none; } }

/* Encart : texte à gauche, listes cochées à droite (biogaz, filiale solaire) */
.encart h2 { margin-top: 0; }
.encart__reperes { margin: var(--space-sm) 0 var(--space-md); }
.section--bg .encart__reperes li { background: var(--color-surface); }
.encart__aside .check-list:first-child { margin-top: 0; }
.encart__note { margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Hero vert (hero_theme: "vert", Énergie verte) --------------------------
   Même construction que le hero navy des services (base sombre, halo en haut, lueur en bas),
   transposée en vert (retour de Sandro, 7 oct.) : base #0f2e22, halo #1a6b4a, lueur verte en bas.
   Blanc ≥ 6,5:1 partout ; fil d'Ariane à 90 % et chapeau à 94 % (AA). Bouton blanc à texte vert foncé #0b3b2c (12,5:1). */
.hero-centre--vert::before {
  background:
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(46,160,100,.38), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 0%, #1a6b4a 0%, transparent 75%),
    #0f2e22;
}
.hero-centre--vert .breadcrumb a, .hero-centre--vert .breadcrumb span { color: rgba(255,255,255,.9); }
.hero-centre--vert .breadcrumb li + li::before { color: rgba(255,255,255,.55); }
.hero-centre--vert .hero-centre__lead { color: rgba(255,255,255,.94); }
.hero-centre--vert .btn--primary,
body:has(.hero-centre--vert) .site-header.is-overlay:not(.is-menu) .primary-nav__cta .btn--primary { color: #0b3b2c; background: var(--color-surface); }
/* Accueil, header sur la vidéo : bouton discret (contour blanc, fond transparent) ; il redevient bleu quand le header passe en blanc */
body:has(.home-hero) .site-header.is-overlay:not(.is-menu) .primary-nav__cta .btn--primary {
  color: var(--color-text-light); background: transparent; border-color: rgba(255,255,255,.55); box-shadow: none;
}
body:has(.home-hero) .site-header.is-overlay:not(.is-menu) .primary-nav__cta .btn--primary:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.hero-centre--vert .btn--primary:hover,
body:has(.hero-centre--vert) .site-header.is-overlay:not(.is-menu) .primary-nav__cta .btn--primary:hover { background: #e3f1e9; }

/* --- Face à face : deux offres, mêmes critères (probleme.face_a_face) ------- */
@media (min-width: 768px) {
  .problem--versus { margin-inline: auto; text-align: center; }
  .problem--versus .lead { margin-inline: auto; }
}
.versus { display: grid; gap: var(--space-md); max-width: 60rem; margin: var(--space-xl) auto 0; }
@media (min-width: 768px) { .versus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } }
.versus__card { display: flex; flex-direction: column; padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
@media (min-width: 1024px) { .versus__card { padding: var(--space-lg); } }
.section--white .versus__card { background: var(--color-bg); border-color: transparent; }
.versus__card.is-pick { background: var(--color-surface); border: 2px solid var(--color-primary-dark); box-shadow: var(--shadow-md); }
.versus__head { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.versus__name { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.is-pick .versus__name { color: var(--color-primary-dark); }
.versus__head h3 { margin: 0.2rem 0 0; font-size: var(--text-xl); }
.versus__rows { margin: 0; flex: 1; }
.versus__rows > div { padding-block: 0.9rem; border-bottom: 1px solid var(--color-border); }
.versus__rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
/* Desktop : les lignes des deux cartes restent alignées (sous-grille) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .versus { grid-template-rows: auto repeat(4, auto); }
    .versus__card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .versus__rows { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  }
}
.versus__rows dt { margin: 0 0 0.25rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.versus__rows dd { margin: 0; display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 500; color: var(--color-navy); }
/* Repère : tiret gris (critère non garanti) ou coche bleue (offre mise en avant) */
.versus__mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0.1rem; border-radius: 50%; background: var(--color-bg); }
.versus__mark:empty::before { content: ""; width: 9px; height: 2px; border-radius: 1px; background: #8a94a3; }
.section--white .versus__card:not(.is-pick) .versus__mark { background: var(--color-surface); }
.is-pick .versus__mark { color: var(--color-text-light); background: var(--color-primary-dark); }
.versus__mark svg { width: 13px; height: 13px; }
/* Conclusion sous le face-à-face : plus discrète que le grand résumé des autres pages */
.problem--versus ~ .problem__resume { max-width: 40ch; margin-top: var(--space-xl); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.4; }

/* --- Taxes : tableau simple des dispositifs (dans le bloc dépliable) ------------------------- */
.rates { margin-top: var(--space-md); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.rates table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--text-sm); }
.rates th, .rates td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.rates tbody tr:last-child > * { border-bottom: 0; }
.rates thead th { font-weight: 600; color: var(--color-navy); background: var(--color-bg); }
.rates tbody th { font-weight: 500; color: var(--color-navy); }
.rate { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.rate--reduit { color: var(--color-primary-dark); background: rgba(0,128,232,.12); }
.rate--exo { color: var(--color-text-light); background: var(--color-primary-dark); }
.rate__detail { display: block; margin-top: 0.3rem; color: var(--color-text-muted); white-space: nowrap; }
.rate__none { color: var(--color-text-muted); }
.rates__ref { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-navy); }
.rates__note { margin: 0.25rem 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
/* Note mise en évidence sous un tableau ou des leviers (Taxes, TURPE) : qui est rarement concerné. Filet droit, pas de bloc arrondi */
.key-note { max-width: 62ch; margin: var(--space-lg) 0 0; padding-left: var(--space-sm); border-left: 2px solid var(--color-accent); font-weight: 500; color: var(--color-navy); }

/* --- Énergie verte : face-à-face plus compact ------------------------------------------------ */
.versus { max-width: 46rem; margin-top: var(--space-lg); }
.versus__card, .versus__card.is-pick { padding: var(--space-md); }
.versus__head h3 { font-size: var(--text-lg); }
.versus__rows > div { padding-block: 0.6rem; }
.versus__rows dd { font-size: var(--text-sm); }

/* --- Leviers avec photo (TURPE) : photo à gauche, points en 2 × 2 à droite ------------------- */
.leviers-media { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) { .leviers-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; } }
.leviers-media__img { margin: 0; }
.leviers-media__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); background: var(--color-border); }
@media (min-width: 768px) { .leviers--grid .points-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* === Pages secteurs : interlocutrice nommée et témoignage ====================
   assets/js/secteur.js (le reste du gabarit est dans le bloc « squelette d'expertise »
   en fin de fichier ; ancien gabarit du 7 oct. supprimé le 14 oct. 2026).
   ========================================================================== */


/* --- Experte dédiée (copropriété), juste après le hero ------------------- */
.sx-expert { display: grid; gap: var(--space-lg); }
.sx-expert__photo { position: relative; margin: 0; max-width: 30rem; border-radius: 36px 0 36px 36px; overflow: hidden; }   /* coins du hero secteur, sans ombre */
.sx-expert__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--color-border); }
.sx-expert__photo figcaption {
  position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm);
  padding: 0.9rem 1.1rem; border-radius: var(--radius-lg); line-height: 1.4;
  color: var(--color-text-light); background: rgba(20,33,61,.6); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.sx-expert__photo figcaption strong { display: block; font-weight: 600; }
.sx-expert__photo figcaption span { font-size: var(--text-sm); color: rgba(255,255,255,.85); }
.sx-expert__text h2 { margin: 0 0 var(--space-md); }
.sx-expert__lead { margin: 0 0 var(--space-md); font-size: var(--text-lg); font-weight: 500; line-height: 1.6; color: var(--color-navy); }
@media (min-width: 1024px) {
  .sx-expert { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
}

/* Citation de Sandrine, liens directs et logos syndics cliquables */
.sx-expert__quote { margin: var(--space-md) 0 0; padding-left: var(--space-md); border-left: 3px solid var(--color-accent); }
.sx-expert__quote p { margin: 0; font-size: var(--text-lg); font-weight: 500; line-height: 1.55; color: var(--color-navy); text-wrap: pretty; }
.expert-direct > a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-primary-dark); font-weight: 500; text-decoration: none; }
.expert-direct > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.logo-strip li a { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; }
.logo-strip li { transition: box-shadow .2s ease, transform .2s ease; }
.logo-strip li:has(a:hover) { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.logo-strip li a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .logo-strip li { transition: none; } .logo-strip li:has(a:hover) { transform: none; } }



.section--navy .section-head p { color: rgba(255,255,255,.8); }

/* Critères regardés au-delà du prix : liste à puces cochées (section « Le bon fournisseur ») */
.problem__criteres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem var(--space-md); }
.problem__criteres li { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; color: var(--color-navy); }
.problem__criteres-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--color-primary-dark); }
.problem__criteres-icon svg { width: 18px; height: 18px; }

/* === Optimisation des taxes : parcours vertical ========================================= */
/* Parcours : liste cochée + résultat sous chaque étape */
.step-checks { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: 0.4rem; }
.step-checks li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-navy); }
.step-checks__icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--color-primary-dark); background: rgba(0,128,232,.1); }
.step-checks__icon svg { width: 12px; height: 12px; }
.story__step .story__desc { margin: 0; max-width: 52ch; color: var(--color-text-muted); }
@media (min-width: 1024px) { .story__step:not(.is-active) .story__desc { color: #5c6b82; } .story__step .story__desc { transition: color .35s ease; } }
.story__steps .story__step p.step-result { color: var(--color-navy); }
.story__step .step-bullets { margin: var(--space-sm) 0 0; padding-left: 1.2rem; color: var(--color-text-muted); }
.story__step .step-bullets li { margin-top: 0.25rem; }
.story__step .step-bullets li::marker { color: var(--color-primary); }
.story__step .step-result { margin: var(--space-sm) 0 0; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; }
.story__step .step-result::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.story__label span + span { margin-left: 0.25rem; }


/* Pourquoi nous choisir : chiffres clés (une seule fois sur la page) au-dessus des témoignages en cartes */
.why-kpis { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.why-kpis li { display: grid; gap: 0.2rem; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.why-kpis li:first-child { border-top: 2px solid var(--color-navy); }
.why-kpis strong { font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--color-navy); }
.why-kpis span { color: var(--color-text-muted); }
@media (min-width: 768px) { .why-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); } }

/* === Lettre d'information marché (pied de page) ========================================= */
.footer-news { display: grid; gap: var(--space-md); padding-block: var(--space-xl); border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-news h2 { margin: 0 0 0.5rem; font-family: var(--font-title); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; color: var(--color-text-light); }
.footer-news__text p { margin: 0; max-width: 52ch; }
.footer-news__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); align-content: start; }
.footer-news__form input {
  min-height: 48px; padding: 0.7rem 1rem; font: inherit; color: var(--color-navy);
  background: var(--color-surface); border: 2px solid transparent; border-radius: var(--radius-md);
}
.footer-news__form input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.footer-news__form input[aria-invalid="true"] { border-color: #ffb4a8; }
.footer-news__rgpd, .footer-news__msg { grid-column: 1 / -1; margin: 0; font-size: var(--text-xs); color: rgba(255,255,255,.72); }
.footer-news__rgpd a { text-decoration: underline; text-underline-offset: 2px; }
.footer-news__msg:empty { display: none; }
.footer-news__msg { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-light); }
.footer-news__msg.is-error { color: #ffcfc7; }
@media (min-width: 768px) {
  .footer-news__form { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 1024px) {
  .footer-news { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
  .footer-news__form { width: 100%; max-width: 36rem; justify-self: end; }
}

/* === Smart-Detect (accueil, Conseil en énergie) ========================================== */
.sd { display: grid; gap: var(--space-xl); align-items: center; }
.sd h2 { margin: 0 0 var(--space-sm); }
.sd .check-list { margin-top: var(--space-md); }
.sd__actions { margin: var(--space-lg) 0 0; }
.sd__media { margin: 0; }
.sd__capture { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.sd__capture.photo-placeholder { aspect-ratio: 4 / 3; box-shadow: none; }
@media (min-width: 1024px) {
  .sd { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
}

/* === Témoignage dans une page secteur (Tourisme : Lagrange Vacances ; Industries : CERE'OEUF) == */
.sx-quote { display: grid; margin: 0; overflow: hidden; background: var(--color-surface); border: 1px solid #e3eaf3; border-radius: 28px; box-shadow: var(--shadow-sm); }
.sx-quote__media { min-height: 14rem; }
.sx-quote__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sx-quote__corps { display: flex; flex-direction: column; justify-content: center; padding: var(--space-lg) var(--space-md); }
.sx-quote__guillemet { font-family: var(--font-title); font-size: 4.5rem; font-weight: 600; line-height: .6; color: var(--color-accent); }
.sx-quote blockquote { margin: var(--space-sm) 0 0; }
main .sx-quote__texte { margin: 0; max-width: 46ch; font-family: var(--font-title); font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.8rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--color-navy); text-wrap: pretty; }
.sx-quote__auteur { display: grid; gap: 0.1rem; margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-text-muted); }
.sx-quote__auteur strong { font-size: var(--text-base); color: var(--color-navy); }
main .sx-quote__fait { display: flex; align-items: baseline; gap: 0.6rem; margin: var(--space-md) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
.sx-quote__fait strong { flex: none; font-family: var(--font-title); font-size: var(--text-2xl); font-weight: 600; white-space: nowrap; color: var(--color-navy); }
main .sx-quote__lien { margin: var(--space-md) 0 0; }
@media (min-width: 768px) { .sx-quote__corps { padding: var(--space-xl) var(--space-lg); } }
@media (min-width: 1024px) {
  /* 5 nov. 2026 : l'image garde son format 4:3, centrée dans sa colonne, au lieu d'être étirée sur la hauteur du texte
     (elle était agrandie et recadrée, logo de Lagrange coupé) */
  .sx-quote { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .sx-quote__media { min-height: 0; padding: var(--space-lg) 0 var(--space-lg) var(--space-lg); }
  .sx-quote__media img { height: auto; max-width: 640px; aspect-ratio: 4 / 3; border-radius: 20px; }
  .sx-quote__corps { padding: var(--space-xl) 4.5rem; }
}

/* === Page 404 ============================================================================ */
.notfound { padding-block: var(--space-xl) var(--space-2xl); background: var(--color-bg); }
.notfound__code { margin: 0; font-family: var(--font-display); font-size: clamp(4rem, 2.5rem + 6vw, 8rem); font-weight: 800; line-height: 1; color: var(--color-primary-dark); }
.notfound h1 { margin: var(--space-sm) 0; }
.notfound__links { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
@media (min-width: 768px) { .notfound__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.founder .photo-placeholder { aspect-ratio: 4 / 5; padding-bottom: 6rem; border-radius: 0; }
.gloss-table table { min-width: 28rem; }
.gloss-entry, .gloss-entry__def, .gloss-group__list { min-width: 0; }   /* le tableau défile dans son cadre au lieu d'élargir la page */
.gloss-table { max-width: 100%; }

/* === Pages secondaires : passe premium (14 oct. 2026) =======================
   Pages légales, FAQ, glossaire, contact, devenir partenaire. Même vocabulaire que
   l'accueil, les services et les secteurs : titres forts en Source Serif 4, filets fins,
   fonds blanc / bleu clair, pas d'ombre lourde, un seul accent ambre ponctuel.
   ========================================================================== */

/* --- Hero simple (pages légales, FAQ, glossaire, contact, pages introuvables) --- */
.hero-simple { padding-block: var(--space-xl); }
.hero-simple h1 {
  max-width: 28ch; font-family: var(--font-title); font-size: clamp(2.1rem, 1.45rem + 2vw, 3.1rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance;
}
.hero-simple__lead { max-width: 58ch; }
@media (min-width: 1024px) { .hero-simple { padding-block: var(--space-2xl) 5rem; } }

/* --- Pages légales : document lisible, sommaire à filets ---------------------- */
.legal { padding-top: var(--space-xl); }
@media (min-width: 1024px) {
  .legal { padding-block: 5rem var(--space-3xl); }
  .legal__grid { grid-template-columns: 14rem minmax(0, 1fr); gap: 5rem; }
}
/* Sommaire : plus de bloc grisé en mobile, deux filets suffisent */
.legal-toc { padding: var(--space-md) 0; background: none; border-radius: 0; border-block: 1px solid var(--color-border); }
.legal-toc__title { margin-bottom: var(--space-sm); font-size: var(--text-xs); font-weight: 500; letter-spacing: .02em; color: var(--color-text-muted); }
.legal-toc ol { border-left-width: 1px; }
.legal-toc a { margin-left: -1px; border-left-width: 1px; }
.legal-toc a[aria-current] { border-left-color: var(--color-navy); color: var(--color-navy); }
@media (min-width: 1024px) { .legal-toc { padding: 0; border: 0; } }

.legal-doc { max-width: 44rem; }
.legal-doc > section { padding-block: var(--space-xl); }
.legal-doc > section:first-child { padding-top: 0; }
.legal-doc h2 {
  margin-bottom: var(--space-md); font-family: var(--font-title); font-size: clamp(1.5rem, 1.25rem + .8vw, 1.95rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
}
.legal-num { font-weight: 400; color: var(--color-text-muted); }   /* numéro de section (texte du document), en retrait */
.legal-doc h3 { margin: var(--space-lg) 0 var(--space-xs); font-size: var(--text-base); font-weight: 600; }
.legal-doc h2 + h3 { margin-top: 0; }
.legal-doc p, .legal-doc li { line-height: 1.75; }
/* Listes : tiret fin navy plutôt que puces bleues */
.legal-doc ul { list-style: none; padding-left: 0; }
.legal-doc li { position: relative; padding-left: 1.25rem; }
.legal-doc li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.6rem; height: 1px; background: var(--color-navy); }
.legal-doc li strong { font-weight: 600; color: var(--color-navy); }
.legal-address { padding-left: var(--space-sm); border-left: 2px solid var(--color-accent); line-height: 1.7; }
.legal-table thead th { font-size: var(--text-sm); border-bottom: 1px solid var(--color-navy); }
.legal-doc .legal-table + p { margin-top: var(--space-md); }

/* --- FAQ : thèmes en serif, questions plus calmes ------------------------------ */
.faq-page { padding-top: var(--space-xl); }
@media (min-width: 1024px) {
  .faq-page { padding-block: 5rem var(--space-3xl); }
  .faq-page .legal__grid { grid-template-columns: 14rem minmax(0, 1fr); gap: 5rem; }
}
.faq-theme h2 {
  margin-bottom: var(--space-md); font-family: var(--font-title); font-size: clamp(1.5rem, 1.25rem + .8vw, 1.95rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
}
.faq-theme__count { font-family: var(--font-body); font-weight: 400; }
.faq-page .faq__item summary { font-size: var(--text-base); font-weight: 500; }
@media (min-width: 1024px) { .faq-page .faq__item summary { font-size: var(--text-lg); } }
.faq-page .faq__answer p { max-width: 64ch; line-height: 1.75; }
.faq-page .faq__icon { width: 32px; height: 32px; }

/* --- Glossaire : lettres et termes en serif, index sobre ---------------------- */
.gloss-group__letter { font-family: var(--font-title); font-weight: 600; color: var(--color-navy); }
.gloss-entry__term dfn { font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.005em; }
.gloss-entry__def p, .gloss-entry__def li { line-height: 1.75; }
.az__letter { color: var(--color-navy); font-weight: 500; }
a.az__letter:hover { color: var(--color-primary-dark); }
.gloss-search label { font-weight: 500; }
@media (min-width: 1024px) { .gloss-groups { padding-bottom: var(--space-xl); } }
/* Lien du hero sur deux lignes en mobile : la flèche suit le texte au lieu d'être repoussée à droite */
.hero-simple .link-more { display: inline; }
.hero-simple .link-more svg { display: inline-block; margin-left: 0.4rem; vertical-align: -0.2em; }

/* --- Contact : formulaire sur fond blanc à filet fin, coordonnées à filets ------- */
main[data-contact] .hero-simple { padding-bottom: var(--space-lg); }
@media (min-width: 1024px) { main[data-contact] .hero-simple { padding-bottom: var(--space-xl); } main[data-contact] .contact { padding-bottom: var(--space-3xl); } }
main:is([data-contact], [data-page="devenir-partenaire"]) .contact-form { border-radius: var(--radius-lg); box-shadow: none; }
@media (min-width: 1024px) { main:is([data-contact], [data-page="devenir-partenaire"]) .contact-form { padding: var(--space-xl); } }
main[data-contact] .contact-form h2,
main[data-contact] .contact-aside h2 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.01em; }
main[data-contact] .contact-aside { gap: var(--space-lg); padding-top: var(--space-sm); }
main[data-contact] .contact-coords .contact-line { gap: 0; border-top: 1px solid var(--color-border); }
main[data-contact] .contact-coords .contact-line li { padding-block: 0.8rem; border-bottom: 1px solid var(--color-border); }
main[data-contact] .contact-line__icon { width: 20px; height: 28px; place-items: center start; background: none; }
main[data-contact] .contact-coords__societe { margin-bottom: var(--space-sm); font-size: var(--text-sm); }
main[data-contact] .contact-coords__societe strong { font-weight: 600; }
.contact-aside__more { margin: 0; }


/* === Notre histoire : passe premium (14 oct. 2026) ===========================
   Titres en serif (H1, étapes de la frise, chiffres, convictions), portrait aux coins
   des pages secteurs sans ombre, fondation en récit | fiche d'identité à filets,
   frise resserrée, cinq chiffres (dont le chiffre d'affaires).
   ========================================================================== */
.story-hero h1 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; }
.story-founder .founder { border-radius: 36px 0 36px 36px; box-shadow: none; }
.story-founder .pullquote { padding-left: var(--space-md); font-family: var(--font-title); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); font-weight: 600; line-height: 1.5; }
.story-convictions__title { font-family: var(--font-title); font-size: var(--text-2xl); font-weight: 600; }
.story-convictions { gap: 0; border-top: 1px solid var(--color-border); }
.story-convictions li { padding: 0.85rem 0; border-left: 0; border-bottom: 1px solid var(--color-border); }
/* Fondation sans photo : récit | fiche d'identité */
.story-origin--plain { align-items: start; }
@media (min-width: 1024px) { .story-origin--plain { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.story-fiche { margin: 0; border-top: 1px solid var(--color-border); }
.story-fiche > div { display: grid; gap: 0.15rem; padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); }
.story-fiche dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.story-fiche dd { margin: 0; font-weight: 600; color: var(--color-navy); }
@media (min-width: 768px) { .story-fiche > div { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-md); } }
/* Frise : titres d'étape et années en serif, étapes moins hautes */
.story-step__year { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.02em; }
.story-step h3 { font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; }
@media (min-width: 1024px) { .story-step { min-height: 24vh; } }
/* Chiffres : serif, cinq colonnes en grand écran */
.story-figures__list strong { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.02em; }
@media (min-width: 1024px) { .story-figures__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* === Carrières et fournisseurs : passe premium (14 oct. 2026) ================
   Carrières (+ fiche d'offre) et Nos fournisseurs partenaires (+ fiche fournisseur).
   Même vocabulaire que les secteurs et les pages secondaires : titres en Source Serif 4,
   filets fins plutôt que blocs grisés, pas d'ombre, pas d'étiquette ambre en série.
   ========================================================================== */
.u-nowrap { white-space: nowrap; }

/* --- Carrières et fiche d'offre : titres en serif ------------------------------ */
main[data-page="carrieres"] h1,
main[data-page="carrieres"] h2,
main[data-page="offre"] .job-hero h1,
main[data-page="offre"] h2,
.job-card h3 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.015em; }
main[data-page="carrieres"] .page-hero h1,
main[data-page="offre"] .job-hero h1 { font-size: clamp(2.1rem, 1.45rem + 2vw, 3.1rem); line-height: 1.1; text-wrap: balance; }
main[data-page="carrieres"] .section { padding-block: 5rem; }
@media (min-width: 1024px) {
  main[data-page="carrieres"] .page-hero { padding-block: var(--space-2xl); }
  main[data-page="carrieres"] .section { padding-block: var(--space-3xl); }
}

/* Postes ouverts : un chiffre en serif, puis la liste entre filets (plus de bloc grisé) */
.jobs-open { padding: 0; background: none; border-radius: 0; border-top: 1px solid var(--color-navy); }
@media (min-width: 1024px) { .jobs-open { padding: 0; } }
.jobs-open__count { justify-content: flex-start; gap: 0.75rem; margin: 0; padding-block: var(--space-md); font-size: var(--text-base); font-weight: 500; color: var(--color-text-muted); }
.jobs-open__count strong { font-family: var(--font-title); font-size: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.015em; color: var(--color-navy); }
.jobs-open ul { border-top: 1px solid var(--color-border); }
.jobs-open li { border-bottom: 1px solid var(--color-border); }
.jobs-open li + li { border-top: 0; }
.jobs-open a { padding-block: 1.1rem; font-weight: 500; }
.jobs-open a svg { color: var(--color-navy); }

/* Offres : cartes blanches à filet fin, sans ombre ; contrat en simple mention */
.jobs-head { margin-bottom: var(--space-lg); }
@media (min-width: 1024px) { .jobs-head { margin-bottom: var(--space-xl); } }
.jobs-head + .jobs-grid { margin-top: 0; }
.job-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: none; }
.job-card:hover { box-shadow: none; }
@media (min-width: 1024px) { .job-card { padding: var(--space-xl); } }
.job-card__type { padding: 0; font-weight: 500; color: var(--color-text-muted); background: none; border-radius: 0; }
.job-card h3 { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); line-height: 1.2; }
.job-card__text { margin-bottom: var(--space-lg); }
.job-meta svg { color: var(--color-text-muted); }

/* Candidature spontanée : renvoi partenaire sous un filet, formulaire comme Contact */
main[data-page="carrieres"] .join-careers { padding: var(--space-md) 0 0; background: none; border-radius: 0; border-top: 1px solid var(--color-navy); }
main[data-page="carrieres"] .join-careers h3 { font-size: var(--text-lg); }
main[data-page="carrieres"] .contact-form,
main[data-page="offre"] .contact-form { border-radius: var(--radius-lg); box-shadow: none; }
@media (min-width: 1024px) {
  main[data-page="carrieres"] .contact-form,
  main[data-page="offre"] .contact-form { padding: var(--space-xl); }
}

/* --- Fiche d'offre ------------------------------------------------------------------ */
.job-hero .job-card__type { margin-bottom: var(--space-xs); }
@media (min-width: 1024px) { .job-hero { padding-block: var(--space-2xl); } }
.job-block h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.2; }
.job-tags li { padding: 0.3rem 0.75rem; color: var(--color-navy); background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.job-checks svg { color: var(--color-primary-dark); }
.job-process__step { font-weight: 500; color: var(--color-text-muted); }
.job-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-top-color: var(--color-navy); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.job-summary__title { font-family: var(--font-title); font-size: var(--text-xl); }
.job-others a:hover { border-color: var(--color-navy); box-shadow: none; }
.job-others .job-card__type { font-size: var(--text-sm); }
.job-others strong { font-family: var(--font-title); font-weight: 600; }
.job-others svg { color: var(--color-navy); }

/* --- Nos fournisseurs partenaires : titres en serif, sections aérées -------------- */
main[data-fournisseurs] h1,
main[data-fournisseurs] h2:not(.cta-final h2),
main[data-fournisseur] h1,
main[data-fournisseur] h2:not(.cta-final h2) { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.015em; }
main[data-fournisseurs] .panel-hero h1 { max-width: 20ch; font-size: clamp(2.1rem, 1.45rem + 2vw, 3.1rem); line-height: 1.1; }
main[data-fournisseurs] .section { padding-block: 5rem; }
@media (min-width: 1024px) {
  main[data-fournisseurs] .panel-hero { padding-block: var(--space-2xl); }
  main[data-fournisseurs] .section { padding-block: var(--space-3xl); }
}
/* Logos de la carte : ombre allégée */
main[data-fournisseurs] .fr-logo { box-shadow: 0 0 0 1px var(--color-border), 0 6px 18px rgba(20,33,61,.06); }

/* Outils de filtre : entre deux filets, plus de bloc grisé ; pastilles plus discrètes */
.panel-tools { padding: var(--space-md) 0; background: none; border-radius: 0; border-block: 1px solid var(--color-border); }
.panel-tools__search label, .pills legend { font-weight: 500; color: var(--color-text-muted); }
.pills span { padding: 0.35rem 0.85rem; border-radius: var(--radius-sm); }
.panel-count { margin-top: var(--space-lg); }

/* Cartes fournisseurs : filet fin, sans ombre ni élévation ; énergies en mentions neutres */
.supplier { border-radius: var(--radius-lg); }
.supplier:hover { border-color: var(--color-navy); box-shadow: none; transform: none; }
.supplier__logo { background: var(--color-surface); }
.supplier:hover .supplier__logo img { transform: none; }
.supplier__name { font-family: var(--font-title); font-size: var(--text-lg); font-weight: 600; }
.chip, .chip--gaz, .chip--autre { padding: 0.1rem 0.45rem; font-weight: 500; color: var(--color-navy); background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.chip svg { color: var(--color-text-muted); }
.supplier__go { width: auto; height: auto; color: var(--color-navy); background: none; }
.supplier:hover .supplier__go { color: var(--color-navy); background: none; }
.supplier:hover .supplier__go svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .supplier:hover .supplier__go svg { transform: none; } }

/* Indépendance : icônes au trait, sans pastille */
main[data-fournisseurs] .fit__icon { width: 28px; height: 28px; margin-top: 0.1rem; background: none; border-radius: 0; }
main[data-fournisseurs] .fit__list h3 { font-size: var(--text-lg); }

/* --- Fiche fournisseur : hero sobre, la couleur du fournisseur en simple filet --- */
.supplier-hero { background: var(--color-bg); }
.supplier-hero::before { content: none; }
.supplier-hero::after { height: 2px; background: var(--brand); }
@media (min-width: 1024px) { .supplier-hero { padding-block: var(--space-2xl); } }
.supplier-hero h1 { font-size: clamp(2rem, 1.4rem + 1.7vw, 2.8rem); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.supplier-hero__tagline { font-family: var(--font-title); font-size: var(--text-xl); font-style: normal; }
.supplier-hero__tags li { padding: 0.25rem 0.7rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.supplier-hero__logo { border-radius: 36px 0 36px 36px; box-shadow: none; border: 1px solid var(--color-border); }
main[data-fournisseur] .section { padding-block: 5rem; }
@media (min-width: 1024px) { main[data-fournisseur] .section { padding-block: var(--space-2xl); } }
.supplier-facts { padding: 0; background: none; border-radius: 0; border-top: 1px solid var(--color-navy); }
@media (min-width: 768px) { .supplier-facts { padding: 0; } }
.supplier-facts h3 { margin: var(--space-sm) 0 var(--space-xs); font-size: var(--text-base); font-weight: 500; color: var(--color-text-muted); }
.supplier-facts li { padding-left: 0; font-size: var(--text-base); }
.supplier-facts li::before { content: none; }

/* === Pourquoi nous choisir : passe premium (14 oct. 2026) ====================
   H1 en serif, sommaire sans numéros, conséquences en phrase serif sous un filet
   (plus d'encadré « Ce que ça change pour vous »), preuves sans ombre, engagements
   au rendu .story--premium sans numéros, chiffres de fin en serif.
   ========================================================================== */
.why-hero h1 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; font-size: clamp(2rem, 1.4rem + 1.7vw, 2.8rem); }
.why-index { background: transparent; padding: 0; border-radius: 0; border-top: 1px solid var(--color-border); }
.why-index__title { font-weight: 600; color: var(--color-navy); }
.why-index strong { font-family: var(--font-title); font-weight: 600; }
.why-effect { max-width: 52ch; margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-family: var(--font-title); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); font-weight: 600; line-height: 1.45; color: var(--color-navy); }
.why-effect--dark { margin-top: var(--space-xl); border-top-color: rgba(255,255,255,.2); color: var(--color-text-light); }
.why-kpis strong { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.02em; }
.why-xp .stat strong { font-family: var(--font-title); font-weight: 600; }

/* === Blog (archive et article) : passe premium (14 oct. 2026) ================
   Titres en serif, article à la une sur « Tous les articles », cartes à filet sans ombre
   ni soulèvement, catégories en mention (plus de pastilles de couleur), filtres à coins
   droits, sommaire et encadré de conseil à filets, photos aux coins des pages secteurs.
   ========================================================================== */
.post-hero h1 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.015em; }
.post-filters a { border-radius: var(--radius-sm); }
/* Catégorie : simple mention */
.post-tag, .post-tag--primary, .post-tag--primary-dark, .post-tag--accent, .post-tag--navy, .post-tag--muted {
  padding: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); background: none; border-radius: 0;
}
.post-tag:hover { filter: none; text-decoration: underline; text-underline-offset: 3px; }
/* Cartes */
.post-card { border: 1px solid var(--color-border); border-radius: 24px 0 24px 24px; box-shadow: none; }
.post-card:hover { box-shadow: none; transform: none; border-color: #c4ccd8; }
.post-card__title { font-family: var(--font-title); font-weight: 600; letter-spacing: 0; }
/* À la une */
.post-feature { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border); }
.post-feature__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 36px 0 36px 36px; }
.post-feature__title { margin: var(--space-sm) 0; font-family: var(--font-title); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 600; line-height: 1.15; }
.post-feature__title a { color: var(--color-navy); text-decoration: none; }
.post-feature__title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post-feature__excerpt { max-width: 56ch; margin: 0 0 var(--space-sm); color: var(--color-text-muted); }
@media (min-width: 1024px) { .post-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; } }
/* Article */
.post-hero__media { border-radius: 36px 0 36px 36px; box-shadow: none; }
.post-content h2 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.01em; }
.post-toc { padding: var(--space-sm) 0; background: none; border-radius: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.post-expert { background: none; border: 0; border-radius: 0; border-top: 2px solid var(--color-navy); border-bottom: 1px solid var(--color-border); padding-inline: 0; }
.post-expert__icon { display: none; }
@media (min-width: 768px) { .post-expert { grid-template-columns: minmax(0, 1fr) auto; } }
.post-expert__title { font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; }
.post-related h2 { font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; }
/* 404 : code et titre en serif, liens à filets */
.notfound__code { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.02em; color: var(--color-navy); }
.notfound h1 { font-family: var(--font-title); font-weight: 600; letter-spacing: -0.015em; }
.notfound__links li { padding-block: 0.6rem; border-bottom: 1px solid var(--color-border); }

/* === Conseil et courtage : deux parcours (16-17 oct. 2026) ====================
   Titre et consigne centrés, barre d'onglets « Courtage » / « Conseil » sous le hero (service.js, s.parcours),
   puis les blocs des parcours : intro illustrée, étapes sur un rail à icônes, étude de cas, domaines d'expertise */
/* Barre d'onglets de Devenir partenaire (.join-switch, deux places) posée sur fond clair : la barre porte son propre fond navy ;
   libellé, puis titre en serif ; le curseur blanc glisse sous le parcours choisi */
.join-switch--parcours { --n: 2; max-width: 46rem; background: var(--color-navy); border-color: var(--color-navy); }
.join-switch--parcours .join-switch__tab { gap: 0.15rem; padding: 0.75rem 0.9rem; }
@media (min-width: 768px) { .join-switch--parcours .join-switch__tab { flex-direction: column; min-height: 4.5rem; padding: 0.85rem 1.5rem; } }
.join-switch--parcours .join-switch__tab[aria-selected="true"] { cursor: default; }
.parcours__nom { font-family: var(--font-title); font-size: 1.05rem; font-weight: 600; line-height: 1.25; color: var(--color-text-light); transition: color .3s ease; }
.parcours__titre { font-size: var(--text-xs); font-weight: 500; line-height: 1.4; color: rgba(255,255,255,.7); transition: color .3s ease; }
@media (max-width: 479px) { .parcours__titre { display: none; } }   /* petit mobile : le nom seul, la barre reste compacte */
@media (min-width: 768px) { .parcours__nom { font-size: 1.35rem; } .parcours__titre { font-size: var(--text-sm); } }
.join-switch__tab[aria-selected="true"] .parcours__nom { color: var(--color-navy); }
.join-switch__tab[aria-selected="true"] .parcours__titre { color: var(--color-text-muted); }
.parcours__panel:not([hidden]) { animation: parcours-in .4s ease both; }
@keyframes parcours-in { from { transform: translateY(8px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .parcours__panel:not([hidden]) { animation: none; } .join-switch__thumb { transition: none; } }

/* Intro d'un parcours (17 oct. 2026, modèle « homepage service ») : grand panneau blanc arrondi, texte à gauche,
   visuel à droite dans un cadre bleu clair (seuils « À qui s'adresse » retirés le 21 oct. 2026) */
[data-parcours] .center-head h2, .parcours__panel .center-head h2 { text-wrap: balance; }
.pc-intro { display: grid; gap: var(--space-lg); align-items: center; padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-xl); }
@media (min-width: 768px) { .pc-intro { padding: var(--space-lg); } }
@media (min-width: 1024px) { .pc-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl); } }
.pc-intro > * { min-width: 0; }
.pc-intro h2 { margin: 0 0 var(--space-sm); text-wrap: balance; }
.pc-intro__accroche { margin: 0 0 var(--space-md); font-family: var(--font-title); font-size: var(--titre-3); font-weight: 600; line-height: 1.35; color: var(--color-primary-dark); }
.pc-intro .prose p { max-width: 58ch; color: var(--color-text-muted); }
.pc-intro__visuel { display: grid; place-items: center; min-height: 100%; padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-lg); }
.pc-intro__visuel > * { width: 100%; min-width: 0; }
.pc-intro__visuel img { display: block; width: 100%; height: auto; }
.pc-intro__visuel .visuel-attente { width: 100%; background: transparent; }

/* Étapes d'un parcours (17 oct. 2026, modèle « Financial Solutions ») : panneau bleu clair, étapes numérotées à gauche,
   cliquables (boutons, aria-pressed) : l'étape choisie en navy ; à droite un visuel avec une étiquette en verre */
.pc-etapes { display: grid; gap: var(--space-md); margin-top: var(--space-xl); padding: var(--space-sm); background: var(--color-bg); border-radius: var(--radius-xl); }
.pc-etapes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; align-content: center; }
.pc-etapes__btn {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; width: 100%;
  padding: var(--space-sm); font: inherit; text-align: left; color: inherit; background: transparent; border: 0; border-radius: var(--radius-lg);
  cursor: pointer; transition: background-color .35s ease;
}
.pc-etapes__btn:hover { background: rgba(20,33,61,.05); }
.pc-etapes__btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.pc-etapes__num {   /* numéro en chiffres gras, sans pastille (18 oct. 2026) */
  display: block; padding-top: 0.15rem;
  font-family: var(--font-title); font-size: 1.6rem; font-weight: 700; line-height: 1; color: rgba(20,33,61,.35);
  transition: color .35s ease;
}
.pc-etapes__corps { display: grid; gap: 0.25rem; padding-top: 0.2rem; }
.pc-etapes__titre { font-family: var(--font-title); font-size: var(--titre-3); font-weight: 600; line-height: 1.3; color: var(--color-navy); transition: color .35s ease; }
.pc-etapes__texte { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); transition: color .35s ease; }
.pc-etapes__list li.is-active .pc-etapes__btn { background: var(--color-surface); box-shadow: 0 16px 34px -24px rgba(20,33,61,.45); }   /* étape choisie : carte blanche (18 oct. 2026) */
.pc-etapes__list li.is-active .pc-etapes__num { color: var(--color-primary); }
.pc-etapes__visuel { position: relative; display: grid; min-width: 0; min-height: 22rem; }
.pc-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
/* Vues superposées (une par étape) : seule celle de l'étape choisie est visible (fondu). Photo : plein cadre ;
   document (--contenir) : affiché entier sur une carte blanche, l'étiquette dessous */
.pc-etapes__vue { position: relative; display: grid; grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.pc-etapes__vue.is-active { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.pc-etapes__vue > [data-partial] { display: grid; }
.pc-etapes__vue:not(.pc-etapes__vue--contenir) .pc-photo { position: absolute; inset: 0; }
.pc-etapes__vue--contenir { padding: var(--space-md) var(--space-md) 8rem; background: var(--color-surface); border-radius: var(--radius-lg); }
.pc-etapes__vue--contenir .pc-photo { position: static; height: auto; object-fit: contain; align-self: center; }
.pc-etapes__vue--contenir .pc-etapes__etiquette { background: var(--color-bg); border-color: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .pc-etapes__vue, .pc-etapes__vue.is-active { transition: none; } }
/* Photo de l'intro : affichée entière à son format d'origine, jamais recadrée (18 oct. 2026 : les personnes en entier) */
.pc-intro__visuel--photo { align-self: center; min-height: 0; padding: 0; overflow: hidden; }
.pc-intro__visuel--photo img { height: auto; }
/* 19 oct. 2026 : les photos d'intro du courtage et du conseil à la même taille, au format de celle du conseil (non réduite) ;
   celle du courtage (16:9) est rognée de quelques pixels sur les côtés, les trois personnes restent entières */
.pc-intro__visuel--photo img { aspect-ratio: 1200 / 798; object-fit: cover; object-position: 50% 50%; }
.domaines__visuel .pc-photo { aspect-ratio: 4 / 5; height: auto; max-height: 34rem; }
.pc-etapes__visuel .visuel-attente { height: 100%; aspect-ratio: auto; padding-bottom: 7rem; background: var(--color-surface); }
.pc-etapes__etiquette {
  position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); display: grid; gap: 0.15rem; margin: 0; padding: var(--space-sm) var(--space-md);
  text-align: center; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius-lg); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.4;
  box-shadow: 0 16px 34px -22px rgba(20,33,61,.45);
}
.pc-etapes__etiquette strong { font-family: var(--font-title); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 600; line-height: 1.15; color: var(--color-navy); }
.pc-etapes__etiquette-etape { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; color: var(--color-primary-dark); }   /* « Étape 1 » (Conseil, 22 oct. 2026) */
@media (prefers-reduced-motion: reduce) { .pc-etapes__btn, .pc-etapes__num, .pc-etapes__titre, .pc-etapes__texte { transition: none; } }
@media (min-width: 768px) { .pc-etapes { padding: var(--space-md); } }
@media (min-width: 1024px) {
  .pc-etapes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
  .pc-etapes__btn { padding: var(--space-sm) var(--space-md); }
}

/* Étude de cas (courtage, 17 oct. 2026, d'après design-references/exemples-visuels) : titre à gauche, description à droite ;
   mosaïque : le rapport dans une grande carte blanche avec une étiquette en verre posée dessus, à droite le budget
   avant / après en barres et les chiffres clés sur fond navy. Mobile : le tableau défile horizontalement (image à 900px) */
.cas { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.cas__rapport, .cas__carte { margin: 0; min-width: 0; background: var(--color-surface); border-radius: var(--radius-xl); }
.cas__rapport { padding: var(--space-md); }
.cas__titre { margin: 0 0 var(--space-sm); }
.cas__ecran { position: relative; }
.cas__feuille { overflow-x: auto; border-radius: var(--radius-md); background: var(--color-bg); }
.cas__feuille:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.cas__feuille img { display: block; width: 900px; max-width: none; height: auto; }
@media (min-width: 768px) { .cas__feuille { overflow: hidden; } .cas__feuille img { width: 100%; max-width: 100%; } }
.cas__etiquette {
  position: absolute; right: -0.5rem; bottom: -1rem; display: grid; margin: 0; padding: 0.7rem 1rem;
  background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.95); border-radius: var(--radius-lg); box-shadow: 0 18px 40px -20px rgba(20,33,61,.45);
  font-size: var(--text-xs); line-height: 1.3; color: var(--color-text-muted);
}
.cas__etiquette strong { font-family: var(--font-title); font-size: var(--text-2xl); font-weight: 600; color: var(--color-primary-dark); }
.cas__legende { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem var(--space-md); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-text-muted); }

.cas__cote { display: grid; gap: var(--space-md); min-width: 0; }
.cas__carte { padding: var(--space-md); }
.cas__compare h3 { margin: 0 0 var(--space-md); }
.cas__barre + .cas__barre { margin-top: var(--space-md); }
.cas__barre p { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); margin: 0 0 0.45rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.cas__barre strong { font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; color: var(--color-navy); white-space: nowrap; }
.cas__jauge { display: block; height: 12px; border-radius: 999px; background: var(--color-bg); overflow: hidden; }
.cas__jauge::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: rgba(20,33,61,.28); transform-origin: left; }
.cas__barre--apres .cas__jauge::before { background: var(--color-primary); }
.cas__barre--apres strong { color: var(--color-primary-dark); }
/* Les barres se remplissent à l'apparition */
.js-anim .cas__compare[data-reveal] .cas__jauge::before { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .2s; }
.js-anim .cas__compare[data-reveal].is-visible .cas__jauge::before { transform: none; }
.js-anim .cas__compare[data-reveal] .cas__barre--apres .cas__jauge::before { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .js-anim .cas__compare[data-reveal] .cas__jauge::before { transform: none; transition: none; } }

.cas__chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); background: var(--color-navy); }
.cas__chiffres div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.25rem; }
.cas__chiffres dd { margin: 0; font-family: var(--font-title); font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); font-weight: 600; line-height: 1.15; color: var(--color-text-light); white-space: nowrap; }
.cas__chiffres dt { font-size: var(--text-sm); line-height: 1.4; color: rgba(255,255,255,.72); }
.cas__compare { position: relative; }
.cas__economie {   /* étiquette posée en bas à droite de la carte « Budget annuel TTC » (18 oct. 2026) */
  position: absolute; right: var(--space-md); bottom: calc(var(--space-md) * -1); display: flex; align-items: baseline; gap: 0.4rem; margin: 0;
  padding: 0.6rem 1rem; background: var(--color-primary-dark); border-radius: var(--radius-lg); color: rgba(255,255,255,.8); font-size: var(--text-sm);
  box-shadow: 0 16px 30px -16px rgba(1,72,141,.7); transform: rotate(-2deg);
}
.cas__economie strong { font-family: var(--font-title); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem); font-weight: 600; line-height: 1.1; color: var(--color-text-light); white-space: nowrap; }
.cas__compare .cas__barre:last-of-type { margin-bottom: var(--space-lg); }
.cas__note { max-width: 70ch; margin: var(--space-lg) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

@media (min-width: 768px) {
  .cas__rapport, .cas__carte { padding: var(--space-lg); }
}
@media (min-width: 1024px) {
  .cas { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: stretch; }
  .cas__cote { grid-template-rows: auto minmax(0, 1fr); }   /* les deux colonnes finissent au même niveau (18 oct. 2026) */
  .cas__chiffres { align-content: center; }
  .cas__compare { display: flex; flex-direction: column; justify-content: center; }
  .cas__chiffres { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .cas__chiffres div + div { padding-top: var(--space-md); border-top: 1px solid rgba(255,255,255,.14); }
}

/* Secteurs accompagnés : bandeau discret sous la barre d'onglets, commun aux deux parcours ; texte simple séparé par des points médians */
.pc-secteurs { max-width: 62rem; margin: var(--space-lg) auto 0; text-align: center; }
.pc-secteurs__titre { margin: 0 0 0.35rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; color: #5b6b82; }
.pc-secteurs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 0; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.pc-secteurs__list a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
.pc-secteurs__list a:hover { color: var(--color-primary-dark); text-decoration-color: currentColor; }
.pc-secteurs__list a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
.pc-secteurs__list li:not(:last-child)::after { content: "·"; margin: 0 0.6rem; color: #8a97ab; }   /* le point reste en fin de ligne */

/* Domaines d'expertise (conseil, 17 oct. 2026, modèle « Why choose us ») : titre et visuel à gauche,
   domaines en cartes blanches décalées en quinconce à droite, icône dans un disque bleu */
.domaines { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) { .domaines { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; } }
.domaines__head h2 { margin: 0; text-wrap: balance; }
.domaines__head .lead { margin: var(--space-sm) 0 0; color: var(--color-text-muted); }
.domaines__visuel { margin-top: var(--space-lg); }
.domaines__visuel .visuel-attente { aspect-ratio: 4 / 3; background: var(--color-surface); }
.domaines__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.domaines__list li {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-sm) var(--space-md); align-items: start;
  padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-lg);
}
.domaines__icone { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--color-text-light); background: var(--color-primary); }
.domaines__icone svg { width: 1.3rem; height: 1.3rem; }
.domaines__list h3 { margin: 0.4rem 0 0.4rem; color: var(--color-navy); }
.domaines__list p:not([class]) { max-width: 52ch; margin: 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
.domaines__liens { display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-lg); margin: var(--space-sm) 0 0; }
.domaines__liens .link-more { font-size: var(--text-sm); }
@media (min-width: 768px) {
  .domaines__list li:nth-child(odd) { margin-right: var(--space-xl); }
  .domaines__list li:nth-child(even) { margin-left: var(--space-xl); }
}
.js-anim .domaines__list li[data-reveal] { transition-delay: calc(var(--i) * 120ms); }


/* Hero des services avec visuel entier (Conseil) : le visuel décalé vers la droite ne crée pas de défilement horizontal */
.hero-centre--entiere { overflow-x: clip; }


/* === Optimisation du TURPE : les quatre réglages (16 oct. 2026) ===============
   Illustration collante à gauche, réglages en liste numérotée à filets à droite */
.reglages { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) {
  .reglages { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
  .reglages__visuel { position: sticky; top: 7rem; }
}
.reglages__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.reglages__list li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-border); }
@media (min-width: 768px) { .reglages__list li { grid-template-columns: 4.5rem minmax(0, 1fr); } }
.reglages__num { font-family: var(--font-title); font-size: 2rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--color-primary-dark); }
@media (min-width: 768px) { .reglages__num { font-size: 2.6rem; } }
.reglages__list h3 { margin: 0 0 0.4rem; font-family: var(--font-title); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 600; }
.reglages__list p { margin: 0; color: var(--color-text-muted); }
.reglages .key-note { margin-top: var(--space-lg); }

/* ==========================================================================
   Typographie unifiée (17 oct. 2026 ; police : Sora depuis le 28 oct. 2026) : TOUS les titres du site en Sora 600,
   une seule taille par niveau (H1, H2, H3, H4), quelle que soit la page ou le composant ; les paragraphes
   en Poppins 400, 1rem / 1.7 (chapeaux .lead : 1.125rem). Placé en fin de feuille et en !important
   pour primer sur les réglages propres aux composants écrits avant cette règle.
   Exception : le H1 de l'accueil, sur la vidéo, garde sa taille (même police).
   ========================================================================== */
:root {
  --font-heading: var(--font-title);
  --titre-1: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  --titre-2: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem);
  --titre-3: clamp(1.2rem, 1.1rem + 0.35vw, 1.4rem);
  --titre-4: 1.125rem;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-title) !important; font-weight: 600 !important; letter-spacing: -0.02em; }
main h1:not(.home-hero h1) { font-size: var(--titre-1) !important; line-height: 1.1 !important; }
main h2 { font-size: var(--titre-2) !important; line-height: 1.15 !important; }
main h3 { font-size: var(--titre-3) !important; line-height: 1.3 !important; }
main h4 { font-size: var(--titre-4) !important; line-height: 1.35 !important; }
p { font-family: var(--font-body); }
main p:not([class]) { font-size: var(--text-base); line-height: 1.7; }
main p.lead { font-size: var(--text-lg); line-height: 1.7; }
/* Chapeaux : une seule taille, quel que soit le composant */
main :is(.lead, .panel-hero__lead, .svc__accroche, .about__lead, .sx-expert__lead, .join-panel__lead, .join-row__text, .join-apply__intro,
         .hero-centre__lead, .hero-simple__lead, .page-hero__lead, .panel-lead) {
  font-size: var(--text-lg) !important; font-weight: 400 !important; line-height: 1.7 !important;
}
/* Textes courants des cartes, listes et notes : la taille du corps (plus de 14px) */
main li p:not([class]), main li > span:not([class]), main li > div > p:not([class]),
main :is(.schema__note, .post-card__excerpt, .expert-direct) {
  font-size: var(--text-base) !important; line-height: 1.7 !important; font-weight: 400 !important;
}
/* Phrases d'affirmation en grand : police des titres */
main .problem__resume { font-family: var(--font-title) !important; font-weight: 600 !important; font-size: var(--titre-3) !important; line-height: 1.4 !important; }
.story-map__year { font-family: var(--font-title) !important; font-weight: 600 !important; }


/* ==========================================================================
   Optimisation du TURPE, version en couleurs (17 oct. 2026, d'après design-references/exemples-visuels ; demande de Sandro :
   « des couleurs dans les pages »). Teintes de la charte : bleu vif, bleu nuit, ambre et leurs tons clairs.
   ========================================================================== */
:root {
  --tint-bleu: #d5e7fb;
  --tint-bleu-2: #f4f8fe;
  --tint-ambre: #fff0c7;
  --tint-ambre-2: #fffaee;
}
.tp-panneau { padding: var(--space-md); border-radius: var(--radius-xl); }
.tp-panneau--bleu { background: linear-gradient(135deg, var(--tint-bleu) 0%, var(--tint-bleu-2) 70%); }
.tp-panneau--ambre { background: linear-gradient(135deg, var(--tint-ambre) 0%, var(--tint-ambre-2) 70%); }
@media (min-width: 768px) { .tp-panneau { padding: var(--space-xl) var(--space-lg); } }
@media (min-width: 1024px) { .tp-panneau { padding: var(--space-xl); } }

/* Icône sur pastille de couleur (18 oct. 2026 : dégradé, reflet en haut, ombre teintée ; pictogramme en deux tons) */
.tp-icone {
  position: relative; flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 14px; color: var(--color-text-light);
  background: linear-gradient(150deg, #2f9bff 0%, var(--color-primary) 45%, #0067c4 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 22px -10px rgba(0,128,232,.7);
}
.tp-icone::after { content: ""; position: absolute; inset: 1px 1px 50% 1px; border-radius: 13px 13px 40% 40% / 13px 13px 12px 12px; background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events: none; }
.tp-icone svg { position: relative; z-index: 1; width: 1.5rem; height: 1.5rem; stroke-width: 1.6; }
.tp-icone--bleu { }
.tp-icone--navy { background: linear-gradient(150deg, #2c4272 0%, var(--color-navy) 60%, #0c152a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 22px -10px rgba(20,33,61,.75); }
.tp-icone--fonce { background: linear-gradient(150deg, #1a6fc0 0%, var(--color-primary-dark) 55%, #013666 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 22px -10px rgba(1,72,141,.7); }
.tp-icone--ambre { color: var(--color-navy); background: linear-gradient(150deg, #ffd35c 0%, var(--color-accent) 50%, #ef9d00 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.15), 0 10px 22px -10px rgba(239,157,0,.75); }

/* Pictogrammes en deux tons, sur tout le site (18 oct. 2026) : les formes fermées des icônes à trait
   (rectangles, cercles, tracés fermés) sont remplies en transparence de la couleur du trait */
:is([class*="icon"], [class*="icone"]) > svg[fill="none"] :is(rect, circle, ellipse, path[d$="z"], path[d$="Z"]) { fill: currentColor; fill-opacity: .18; }
.tp-icone > svg[fill="none"] :is(rect, circle, ellipse, path[d$="z"], path[d$="Z"]) { fill-opacity: .28; }

/* 1. La facture en barre */
.tp-facture { display: grid; gap: var(--space-lg); align-items: center; }
.tp-facture h2 { margin: 0 0 var(--space-sm); }
.tp-facture .lead { margin: 0; max-width: 54ch; color: var(--color-text-muted); }
.tp-facture__carte { margin: 0; padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 24px 50px -32px rgba(1,72,141,.45); }
.tp-facture__carte figcaption { margin-bottom: var(--space-md); font-family: var(--font-title); font-size: var(--titre-3); font-weight: 600; color: var(--color-navy); }
.tp-facture__barre { display: flex; height: 4.5rem; overflow: hidden; border-radius: var(--radius-md); background: var(--color-bg); }
.tp-facture__part {
  display: flex; align-items: center; justify-content: center; width: var(--w); min-width: 6.5rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: var(--color-text-light);
}
.tp-facture__part strong { font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; white-space: nowrap; }
.tp-facture__reste { flex: 1; background: repeating-linear-gradient(135deg, #e7ecf3 0 10px, #eef2f7 10px 20px); }
.js-anim .tp-facture__carte[data-reveal] .tp-facture__part { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .25s; }
.js-anim .tp-facture__carte[data-reveal].is-visible .tp-facture__part { transform: none; }
.tp-facture__legende { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem var(--space-md); margin: var(--space-sm) 0 0; padding: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.tp-facture__legende li { display: flex; align-items: center; gap: 0.45rem; }
.tp-pastille { width: 0.75rem; height: 0.75rem; border-radius: 3px; background: #dfe5ee; }
.tp-pastille--bleu { background: var(--color-primary); }
.tp-facture__note { margin: var(--space-sm) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); }
.tp-reperes { list-style: none; display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 0; padding: 0; }
.tp-reperes li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.2rem var(--space-sm); align-items: start; padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-lg); }
.tp-reperes .tp-icone { grid-row: 1 / 3; }
.tp-reperes h3 { margin: 0.3rem 0 0; }
.tp-reperes p { margin: 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
@media (min-width: 768px) { .tp-reperes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tp-reperes li { grid-template-columns: minmax(0, 1fr); } .tp-reperes .tp-icone { grid-row: auto; margin-bottom: var(--space-xs); } }
@media (min-width: 1024px) { .tp-facture { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); } .tp-facture__carte { padding: var(--space-lg); } }

/* 2. Les quatre réglages en mosaïque */
.tp-bento { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.tp-bento__grande { display: grid; gap: var(--space-md); align-content: space-between; padding: var(--space-md); background: linear-gradient(160deg, var(--tint-ambre) 0%, var(--tint-ambre-2) 80%); border-radius: var(--radius-xl); }
.tp-bento__illu { display: block; width: 100%; height: auto; margin-inline: auto; filter: drop-shadow(0 18px 24px rgba(120,80,0,.12)); }
.tp-bento__grande .visuel-attente { aspect-ratio: 4 / 3; background: rgba(255,255,255,.6); border-color: rgba(20,33,61,.18); }
.tp-bento__grande p { margin: 0; font-family: var(--font-title); font-size: var(--titre-3); font-weight: 600; line-height: 1.45; color: var(--color-navy); }
.tp-bento__reglages { list-style: none; display: grid; gap: var(--space-sm); margin: 0; padding: 0; }
.tp-bento__reglages li { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); background: var(--color-bg); border-radius: var(--radius-xl); }
.tp-bento__reglages .num-gras { margin-bottom: auto; }
.tp-bento__reglages h3 { margin: var(--space-md) 0 0; }
.tp-bento__reglages p { margin: 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
@media (min-width: 768px) { .tp-bento__reglages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tp-bento { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .tp-bento__grande { padding: var(--space-lg); } }

/* 3. Notre rôle : panneau ambre, étapes en cartes blanches */
.tp-role { display: grid; gap: var(--space-lg); align-items: center; }
.tp-role h2 { margin: 0 0 var(--space-sm); }
.tp-role .lead { margin: 0 0 var(--space-md); max-width: 50ch; color: var(--color-text-muted); }
.tp-role__etapes { list-style: none; display: grid; grid-auto-rows: 1fr; gap: var(--space-sm); margin: 0; padding: 0; }   /* cartes de même hauteur (19 oct. 2026) */
.tp-role__etapes li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-md); align-items: start; padding: var(--space-md); background: var(--color-surface); border: 1px solid rgba(20,33,61,.06); border-radius: var(--radius-lg); box-shadow: 0 18px 40px -30px rgba(20,33,61,.4); }
.tp-role__tag { display: inline-block; margin: 0 0 0.4rem; padding: 0.15rem 0.6rem; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary-dark); background: var(--tint-bleu); border-radius: 999px; }
.tp-role__etapes h3 { margin: 0 0 0.3rem; }
.tp-role__etapes p:not([class]) { margin: 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
@media (min-width: 1024px) { .tp-role { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); } }
.js-anim .tp-reperes li[data-reveal], .js-anim .tp-bento__reglages li[data-reveal], .js-anim .tp-role__etapes li[data-reveal] { transition-delay: calc(var(--i) * 110ms); }
@media (prefers-reduced-motion: reduce) { .js-anim .tp-facture__carte[data-reveal] .tp-facture__part { transform: none; transition: none; } }

/* ==========================================================================
   Pastilles d'icônes, sur tout le site (18 oct. 2026, retour de Sandro : icônes « trop simples, pas assez modernes et pro »).
   Pastilles claires : dégradé blanc vers bleu clair, filet bleu, petite ombre ; pastilles pleines : même rendu que .tp-icone.
   Les pictogrammes passent en deux tons (règle « Pictogrammes en deux tons » plus haut).
   ========================================================================== */
:is(.profile__icon, .distinct__icon, .choice__icon, .quote-doc__icon, .cert-statement__icon) {
  color: var(--color-primary-dark);
  background: linear-gradient(150deg, #ffffff 0%, #e2eefc 100%);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,128,232,.16), inset 0 1px 0 #fff, 0 8px 18px -10px rgba(1,72,141,.45);
}
.cert-statement__icon { border-radius: 50%; }
:is(.domaines__icone, .reasons__icon) {
  background: linear-gradient(150deg, #2f9bff 0%, var(--color-primary) 45%, #0067c4 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -10px rgba(0,128,232,.7);
}

/* ==========================================================================
   Optimisation des taxes (18 oct. 2026, d'après design-references/exemples-visuels) : mêmes ingrédients que le TURPE
   (teintes claires, pastilles de couleur, cartes blanches), autre composition.
   ========================================================================== */
/* 1. L'accise : carte bleu clair (illustration + taux standard en étiquette) à gauche, texte et repères à droite */
.tx-accise { display: grid; gap: var(--space-xl); align-items: center; }
.tx-accise__visuel {
  position: relative; display: grid; place-items: center; margin: 0; padding: var(--space-lg) var(--space-md) 7.5rem;
  background: radial-gradient(120% 90% at 20% 0%, #ffffff 0%, var(--tint-bleu-2) 40%, var(--tint-bleu) 100%); border-radius: var(--radius-xl);
}
.tx-accise__illu { display: block; width: 100%; max-width: 30rem; height: auto; filter: drop-shadow(0 24px 30px rgba(1,72,141,.16)); }
.tx-accise__taux {
  position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); display: grid; gap: 0.2rem; padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius-lg); box-shadow: 0 18px 36px -24px rgba(1,72,141,.5);
}
.tx-accise__taux strong { font-family: var(--font-title); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 600; line-height: 1.05; color: var(--color-primary-dark); }
.tx-accise__taux span { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.tx-accise__texte h2 { margin: 0 0 var(--space-sm); }
.tx-accise__texte .lead { margin: 0; max-width: 58ch; color: var(--color-text-muted); }
.tx-reperes { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; }
.tx-reperes li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-md); align-items: start; padding: var(--space-md) 0; border-top: 1px solid rgba(20,33,61,.1); }
.tx-reperes h3 { margin: 0.15rem 0 0.25rem; }
.tx-reperes p { margin: 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .tx-accise { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); }
  .tx-accise__visuel { padding: var(--space-xl) var(--space-lg) 8.5rem; min-height: 100%; }
  .tx-accise__taux { left: var(--space-lg); right: auto; bottom: var(--space-lg); max-width: 22rem; }
}

/* 2. Les dispositifs : trois cartes, le régime et ses taux en bas de carte, sur un fond teinté propre à chaque carte */
.tx-cas { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.tx-cas__carte { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--space-md); background: var(--color-surface); border: 1px solid rgba(20,33,61,.07); border-radius: var(--radius-xl); box-shadow: 0 24px 48px -36px rgba(20,33,61,.45); }
.tx-cas__tete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }   /* icône au-dessus du titre : titres sur deux lignes (18 oct. 2026) */
.tx-cas__tete .tp-icone { width: 2.6rem; height: 2.6rem; border-radius: 12px; }
.tx-cas__tete .tp-icone svg { width: 1.25rem; height: 1.25rem; }
.tx-cas__carte h3 { margin: 0; text-wrap: balance; }
.tx-cas__carte > p { margin: 0 0 var(--space-xs); font-size: var(--text-base) !important; color: var(--color-text-muted); }
.tx-cas__taux { margin-top: auto; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--tint-bleu-2), var(--tint-bleu)); }
.tx-cas__regime { display: inline-block; margin: 0 0 0.4rem; padding: 0.15rem 0.65rem; font-size: var(--text-xs) !important; font-weight: 600; color: var(--color-navy); background: rgba(255,255,255,.8); border-radius: 999px; }
.tx-cas__taux dl { margin: 0; display: grid; gap: 0.3rem; }
.tx-cas__taux dl > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-sm); }
.tx-cas__taux dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.tx-cas__taux dd { margin: 0; display: grid; justify-items: end; text-align: right; font-family: var(--font-title); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); font-weight: 600; line-height: 1.2; color: var(--color-navy); }
.tx-cas__taux dd span { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.js-anim .tx-cas li[data-reveal] { transition-delay: calc(var(--i) * 110ms); }
@media (min-width: 768px) { .tx-cas__carte { padding: var(--space-md) var(--space-lg) var(--space-lg); } }
@media (min-width: 1024px) { .tx-cas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   Pages secteurs, gabarit v2 (18 oct. 2026, d'après design-references/exemples-visuels ; TPE, artisans et commerçants en essai).
   Hero sur fond bleu clair pleine largeur, chiffres en bandeau, usages en cartes, leviers en liste cliquable
   à côté d'un visuel unique, rôle en étapes (chiffres en gras), engagements en bandeau. Icônes avec parcimonie.
   ========================================================================== */
.page-hero--v2 { padding-block: var(--space-xl); background: radial-gradient(90% 120% at 0% 0%, #ffffff 0%, var(--tint-bleu-2) 35%, var(--tint-bleu) 100%); }
.page-hero--v2 .page-hero__grid { gap: var(--space-lg); }
.page-hero--v2 h1 { max-width: 22ch; font-family: var(--font-title); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.page-hero--v2 .page-hero__lead { max-width: 54ch; color: var(--color-text-muted); }
.page-hero--v2 .page-hero__media { position: relative; }
.page-hero--v2 .page-hero__img { aspect-ratio: 4 / 3; border-radius: 22px; box-shadow: 0 30px 60px -36px rgba(1,72,141,.55); }
/* Notre histoire : emplacement de la future photo de l'équipe dans le hero (18 oct. 2026) */
.nh-hero-attente .visuel-attente { aspect-ratio: 4 / 3; border-radius: 22px; background: rgba(255,255,255,.6); }
/* 19 oct. 2026 : format paysage (photo de groupe) aussi sur desktop, pour que le hero ait la hauteur commune des pages À propos */
main[data-page="notre-histoire"] .page-hero--v2 .page-hero__img { aspect-ratio: 4 / 3; }
.v2-hero__etiquette {
  position: absolute; left: var(--space-sm); bottom: var(--space-sm); display: grid; gap: 0.1rem; max-width: 16rem; padding: 0.8rem 1rem;
  font-size: var(--text-sm); line-height: 1.4; color: var(--color-text-muted);
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: var(--radius-lg); box-shadow: 0 16px 32px -18px rgba(20,33,61,.5);
}
.v2-hero__etiquette strong { font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; color: var(--color-navy); }
@media (min-width: 1024px) {
  .page-hero--v2 { display: flex; align-items: center; min-height: clamp(560px, calc(100svh - var(--header-h)), 760px); padding-block: var(--space-2xl); }
  .page-hero--v2 .page-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .page-hero--v2 .page-hero__img { aspect-ratio: 5 / 6; }
  .v2-hero__etiquette { left: calc(var(--space-lg) * -1); bottom: var(--space-xl); }
}

/* Chiffres clés en bandeau, sous le hero */
.v2-chiffres { padding-block: var(--space-xl) var(--space-lg); background: var(--color-surface); }
.v2-chiffres ul { list-style: none; margin: 0 auto; display: grid; gap: var(--space-lg); text-align: center; }
.v2-chiffres li { display: grid; gap: 0.4rem; justify-items: center; }
.v2-chiffres strong { font-family: var(--font-title); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 600; line-height: 1; color: var(--color-navy); }
.v2-chiffres span { max-width: 28ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.js-anim .v2-chiffres li[data-reveal] { transition-delay: calc(var(--i) * 110ms); }
@media (min-width: 768px) { .v2-chiffres ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v2-chiffres li + li { border-left: 1px solid rgba(20,33,61,.1); } }

/* Usages : cartes grises claires, petite icône discrète (une seule couleur) */
.v2-usages { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.v2-usages li { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--space-md); background: #f5f7fb; border: 1px solid rgba(20,33,61,.05); border-radius: var(--radius-xl); }
.section--bg .v2-usages li { background: var(--color-surface); }
.v2-usages__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-sm); border-radius: 12px; color: var(--color-primary-dark); background: rgba(0,128,232,.1); }
.v2-usages__icon svg { width: 1.25rem; height: 1.25rem; }
.v2-usages h3 { margin: 0; }
.v2-usages__metiers { margin: 0; font-size: var(--text-sm) !important; font-weight: 500; color: var(--color-primary-dark); }
.v2-usages p:not([class]) { margin: var(--space-xs) 0 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
.js-anim .v2-usages li[data-reveal] { transition-delay: calc(var(--i) * 100ms); }
@media (min-width: 640px) { .v2-usages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v2-usages { grid-template-columns: repeat(4, minmax(0, 1fr)); } .v2-usages li { padding: var(--space-lg) var(--space-md); } }

/* Leviers : liste cliquable à gauche (le levier choisi en carte blanche sur voile clair), visuel unique à droite */
.v2-leviers { display: grid; gap: var(--space-md); margin-top: var(--space-xl); padding: var(--space-sm); background: #f3f6fb; border-radius: 28px; }
.v2-leviers__list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 0.5rem; align-content: center; }   /* trois encarts de même hauteur (18 oct. 2026) */
.v2-leviers__list > li { border-radius: var(--radius-lg); transition: background-color .35s ease, box-shadow .35s ease; }
.v2-leviers__btn {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; width: 100%; padding: var(--space-sm);
  font: inherit; text-align: left; color: inherit; background: transparent; border: 0; border-radius: var(--radius-lg); cursor: pointer;
}
.v2-leviers__list > li:not(.is-active):hover { background: rgba(255,255,255,.55); }
.v2-leviers__btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.v2-leviers__num { display: block; padding-top: 0.1rem; font-family: var(--font-title); font-size: 1.6rem; font-weight: 700; line-height: 1; color: rgba(20,33,61,.3); transition: color .35s ease; }
.v2-leviers__corps { display: grid; gap: 0.25rem; }
.v2-leviers__titre { font-family: var(--font-title); font-size: var(--titre-3); font-weight: 600; line-height: 1.3; color: var(--color-navy); }
.v2-leviers__texte { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.v2-leviers__lien { visibility: hidden; opacity: 0; transition: opacity .3s ease; margin: 0; padding: 0 var(--space-sm) var(--space-sm) calc(2.75rem + var(--space-sm) * 2); }
.v2-leviers__list > li.is-active { background: var(--color-surface); box-shadow: 0 16px 34px -24px rgba(20,33,61,.45); }
.v2-leviers__list > li.is-active .v2-leviers__num { color: var(--color-primary); }
/* Le lien garde sa place même fermé : la liste et le visuel ne bougent pas au clic (18 oct. 2026) */
.v2-leviers__list > li.is-active .v2-leviers__lien { visibility: visible; opacity: 1; }
.v2-leviers__visuel { display: grid; min-height: 16rem; border-radius: 22px; overflow: hidden; }
.v2-leviers__visuel > [data-partial] { display: grid; }
.v2-leviers__visuel .visuel-attente { height: 100%; aspect-ratio: auto; background: var(--color-surface); }
.v2-leviers__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Illustration (TPE : atelier isométrique, 19 oct. 2026) : image entière, fond blanc, de l'air autour ; l'encart reste posé en bas */
.v2-leviers__visuel--illu { place-items: center; padding: var(--space-md) var(--space-md) 6.5rem; background: var(--color-surface); }
.v2-leviers__visuel--illu .v2-leviers__img { width: auto; max-width: 100%; height: auto; max-height: 30rem; object-fit: contain; }
/* Encart du levier choisi, en bas du visuel (19 oct. 2026) : verre clair, chiffre ou repère en serif, une phrase ; fondu au changement */
.v2-leviers__visuel { position: relative; }
.v2-leviers__encarts { position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); display: grid; pointer-events: none; }
.v2-leviers__encart {
  grid-area: 1 / 1; align-self: end; display: grid; gap: 0.15rem; max-width: 26rem; margin: 0; padding: 0.85rem 1.1rem;
  font-size: var(--text-sm) !important; line-height: 1.5; color: var(--color-text-muted);
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: var(--radius-lg); box-shadow: 0 16px 32px -18px rgba(20,33,61,.5);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.v2-leviers__encart.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s ease, visibility 0s; }
.v2-leviers__encart strong { font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; line-height: 1.25; color: var(--color-navy); }
@media (min-width: 768px) { .v2-leviers__encarts { left: var(--space-md); right: var(--space-md); bottom: var(--space-md); } }
@media (prefers-reduced-motion: reduce) { .v2-leviers__encart, .v2-leviers__encart.is-active { transition: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v2-leviers__list > li, .v2-leviers__num { transition: none; } }
@media (min-width: 768px) { .v2-leviers { padding: var(--space-md); } }
@media (min-width: 1024px) { .v2-leviers { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-lg); } .v2-leviers__btn { padding: var(--space-md); } .v2-leviers__lien { padding-left: calc(2.75rem + var(--space-md) * 2); padding-bottom: var(--space-md); } }

/* Rôle, version concise (18 oct. 2026) : titre, accroche et lien à gauche ; trois étapes courtes sur un filet à droite */
.v2-role { display: grid; gap: var(--space-lg); align-items: center; }
.v2-role__tete h2 { margin: 0 0 var(--space-sm); }
.v2-role__tete .lead { margin: 0; }
.v2-role__lien { margin: var(--space-md) 0 0; }
.v2-role__etapes { list-style: none; margin: 0; padding: 0; display: grid; border-left: 2px solid rgba(1,72,141,.14); }
.v2-role__etapes li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; padding: var(--space-md) 0 var(--space-md) var(--space-md); }
.v2-role__etapes li + li { border-top: 1px solid rgba(20,33,61,.08); }
.v2-role__etapes h3 { margin: 0 0 0.2rem; }
.v2-role__etapes p { margin: 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
.js-anim .v2-role__etapes li[data-reveal] { transition-delay: calc(var(--i) * 120ms); }
@media (min-width: 1024px) { .v2-role { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); } .v2-role__etapes li { padding-left: var(--space-lg); } }

/* Numéros en chiffres gras, sans pastille, et puces simples (18 oct. 2026, retour de Sandro : icônes avec parcimonie) */
.num-gras { display: block; padding-top: 0.1rem; font-family: var(--font-title); font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.puce { display: block; width: 0.55rem; height: 0.55rem; margin-top: 0.55rem; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px rgba(0,128,232,.14); }

/* ==========================================================================
   Notre histoire (refonte du 18 oct. 2026, d'après design-references/exemples-visuels) : hero en panneau (gabarit v2),
   fondateur, vision numérotée (retirée), constantes en cartes ; fondateur et carte de France : bloc du 29 oct. 2026 en fin de fichier
   ========================================================================== */
/* Carte de citation (Comment ça marche) */
.nh-citation { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); margin: 0; padding: var(--space-lg) var(--space-md); background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: 0 24px 48px -36px rgba(20,33,61,.45); }
.nh-citation blockquote { position: relative; margin: 0; padding-top: 2.4rem; }
.nh-citation blockquote::before { content: "«"; position: absolute; left: 0; top: -0.4rem; font-family: var(--font-title); font-size: 3.6rem; line-height: 1; color: var(--color-primary); }
.nh-citation blockquote p { margin: 0; font-family: var(--font-title) !important; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem) !important; font-weight: 400; line-height: 1.45 !important; color: var(--color-navy); text-wrap: pretty; }
.nh-citation figcaption { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); line-height: 1.4; color: var(--color-text-muted); }
.nh-citation figcaption img { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; }
.nh-citation figcaption strong { display: block; font-weight: 600; color: var(--color-navy); }
@media (min-width: 768px) { .nh-citation { padding: var(--space-xl) var(--space-lg); } }


/* Vision : panneau bleu clair, titre à gauche, convictions numérotées en cartes blanches (2 × 2) à droite */
.nh-vision { display: grid; gap: var(--space-lg); padding: var(--space-lg) var(--space-md); background: linear-gradient(135deg, var(--tint-bleu) 0%, var(--tint-bleu-2) 75%); border-radius: 28px; }
.nh-vision__tete h2 { margin: 0 0 var(--space-sm); }
.nh-vision__tete .lead { margin: 0; }
.nh-vision__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.nh-vision__liste li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-md); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 16px 34px -26px rgba(20,33,61,.45); }
.nh-vision__liste h3 { margin: 0 0 0.25rem; }
.nh-vision__liste p { margin: 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
.js-anim .nh-vision__liste li[data-reveal] { transition-delay: calc(var(--i) * 100ms); }
@media (min-width: 768px) { .nh-vision { padding: var(--space-xl) var(--space-lg); } .nh-vision__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nh-vision { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-xl); align-items: center; } }

/* Ce qui ne change pas : trois cartes numérotées */
.nh-constantes { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.nh-constantes li { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--space-lg) var(--space-md); background: var(--color-surface); border: 1px solid rgba(20,33,61,.06); border-radius: var(--radius-xl); box-shadow: 0 24px 48px -38px rgba(20,33,61,.45); }
.nh-constantes .num-gras { margin-bottom: var(--space-sm); }
.nh-constantes h3 { margin: 0; text-wrap: balance; }
.nh-constantes p { margin: 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
.js-anim .nh-constantes li[data-reveal] { transition-delay: calc(var(--i) * 110ms); }
@media (min-width: 1024px) { .nh-constantes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nh-constantes li { padding: var(--space-xl) var(--space-lg); } }

/* ==========================================================================
   Pourquoi nous choisir (refonte du 22 oct. 2026, validée par Sandro : « pro, assez épuré ») : quatre raisons sur un même
   gabarit, séparées par un filet. Numéro et étiquette | titre, texte, points à coche fine, lien | preuve dans un panneau
   pâle (grand chiffre et jalons, logos des fournisseurs, logos SCE et Bureau Veritas). Une couleur par raison, discrète.
   ========================================================================== */
.pq-raisons { padding-top: var(--space-xl); }
.pq-raison { --c: var(--color-primary-dark); --f: var(--color-primary); --t: var(--tint-bleu-2);
  display: grid; gap: var(--space-md); padding-block: var(--space-xl); border-top: 1px solid var(--color-border); scroll-margin-top: calc(var(--header-h, 5rem) + var(--space-sm)); }
.pq-raison:first-child { border-top: 0; padding-top: var(--space-md); }
.pq-raison--2 { --c: var(--joy-corail-fonce); --f: var(--joy-corail); --t: var(--tint-corail-2); }
.pq-raison--3 { --c: var(--joy-vert-fonce); --f: var(--joy-vert); --t: var(--tint-vert-2); }
.pq-raison--4 { --c: var(--joy-ambre-fonce); --f: var(--color-accent); --t: var(--tint-ambre-2); }
.pq-raison__num { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--c); }
.pq-raison__num span { font-family: var(--font-title); font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; }
.pq-raison__corps h2 { margin: 0 0 var(--space-sm); text-wrap: balance; }
.pq-raison__corps .prose p { color: var(--color-text-muted); }
.pq-points { list-style: none; display: grid; gap: var(--space-sm); margin: var(--space-md) 0 0; padding: var(--space-md) 0 0; border-top: 1px solid var(--color-border); }
.pq-points li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.pq-points li > span:last-child { display: grid; gap: 0.1rem; color: var(--color-text-muted); }
.pq-points strong { font-weight: 600; color: var(--color-navy); }
.pq-points__coche { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; color: var(--c); }
.pq-points__coche svg { width: 1.1rem; height: 1.1rem; }
.pq-raison__lien { margin: var(--space-md) 0 0; }
/* Preuve : panneau pâle à la couleur de la raison */
.pq-preuve { align-self: start; padding: var(--space-lg) var(--space-md); background: var(--t); border-radius: var(--radius-xl); }
.pq-preuve__chiffre { display: flex; align-items: baseline; gap: 0.4rem; margin: 0; color: var(--color-navy); }
.pq-preuve__chiffre strong { font-family: var(--font-title); font-size: clamp(3.5rem, 2.6rem + 3vw, 5rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.pq-preuve__chiffre span { font-family: var(--font-title); font-size: var(--text-2xl); font-weight: 600; color: var(--c); }
.pq-preuve__texte { margin: var(--space-xs) 0 0; color: var(--color-text-muted); }
.pq-preuve__jalons { list-style: none; display: grid; margin: var(--space-md) 0 0; padding: 0; }
.pq-preuve__jalons li { position: relative; padding: 0.7rem 0 0.7rem 1.1rem; font-size: var(--text-sm); color: var(--color-navy); border-top: 1px solid rgba(20,33,61,.08); }
.pq-preuve__jalons li::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem; border-radius: 50%; background: var(--f); }
.pq-preuve__titre { margin: 0 0 var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); }
.pq-logos-grille { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; }
/* Cartes toutes au même format (3:2), quelle que soit la forme du logo ; logo centré, sans déformation, à surface
   apparente comparable (largeur --logo-l calculée par le gabarit d'après les proportions de l'image) */
.pq-logos-grille li { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-surface); border-radius: var(--radius-md); }
.pq-logos-grille img { display: block; width: var(--logo-l, 72%); max-width: 84%; height: auto; max-height: 66%; object-fit: contain; }
.pq-certifs { list-style: none; display: grid; gap: var(--space-sm); margin: 0; padding: 0; }
.pq-certifs li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; padding: var(--space-sm); background: var(--color-surface); border-radius: var(--radius-lg); }
.pq-certifs img { display: block; width: 100%; height: auto; }
.pq-certifs span { display: grid; font-size: var(--text-sm); color: var(--color-text-muted); }
.pq-certifs strong { font-weight: 600; color: var(--c); }
@media (min-width: 768px) { .pq-preuve { padding: var(--space-lg); } }
@media (min-width: 1024px) {
  .pq-raison { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 24rem); gap: var(--space-xl); padding-block: var(--space-2xl); }
  .pq-raison:first-child { padding-top: var(--space-lg); }
  .pq-raison__num { flex-direction: column; gap: 0.4rem; }
  .pq-raison__num span { font-size: 3.25rem; }
}

/* Comment ça marche (18 oct. 2026) : citation sous les étapes, rémunération en trois points numérotés */
.ccm-citation { margin-top: var(--space-xl); }
@media (min-width: 1024px) { .ccm-citation { max-width: 58rem; margin-inline: auto; } }

/* ==========================================================================
   Pourquoi nous choisir (19 oct. 2026) : +50 fournisseurs = titre | texte, trois atouts à pictogramme sur une
   ligne à filets, logos sur une seule ligne qui défile (bords en flou progressif), bouton vers le marché français.
   Chiffres clés en bandeau à filets sous les témoignages.
   ========================================================================== */
/* Bords en flou progressif : le masque efface les logos vers les bords, deux voiles flous les estompent en douceur */
.marquee.marquee--flou {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.marquee--flou::before, .marquee--flou::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 22%; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.marquee--flou::before { left: 0; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.marquee--flou::after { right: 0; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); }

/* ==========================================================================
   Comment ça marche (18 oct. 2026, soir) : frise sans image. Panneau bleu clair, rail vertical à gauche reliant
   les cinq étapes (pictogramme dans un nœud blanc), titre et texte, fait clé en grand en serif à droite.
   Mobile : le fait clé passe sous le texte. Rémunération : logos SCE et Bureau Veritas sous l'intro.
   ========================================================================== */
.ccm-frise { position: relative; list-style: none; margin: var(--space-xl) 0 0; padding: var(--space-sm) var(--space-md); background: linear-gradient(135deg, var(--tint-bleu) 0%, var(--tint-bleu-2) 70%); border-radius: 28px; }
.ccm-frise__etape { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.25rem var(--space-md); padding: var(--space-md) 0; }
.ccm-frise__etape + .ccm-frise__etape { border-top: 1px solid rgba(1,72,141,.12); }
/* rail : chaque étape trace sa moitié de segment au-dessus et au-dessous de son nœud (centré verticalement) */
.ccm-frise__etape::before, .ccm-frise__etape::after { content: ""; position: absolute; left: calc(1.5rem - 1px); width: 2px; background: rgba(1,72,141,.22); }
.ccm-frise__etape::before { top: 0; height: 50%; }
.ccm-frise__etape::after { top: 50%; bottom: 0; }
.ccm-frise__etape:first-child::before, .ccm-frise__etape:last-child::after { display: none; }
.ccm-frise__noeud {
  grid-row: span 3; align-self: center; position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem;
  color: var(--color-primary-dark); background: var(--color-surface); border-radius: 50%; box-shadow: 0 10px 22px -14px rgba(1,72,141,.6);
  transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.ccm-frise__noeud svg { width: 1.35rem; height: 1.35rem; }
.ccm-frise__corps h3 { margin: 0 0 0.25rem; }
.ccm-frise__corps > p:last-child { max-width: 52ch; margin: 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
.ccm-frise__num { margin: 0 0 0.15rem; font-size: var(--text-xs) !important; font-weight: 600; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.ccm-frise__repere { grid-column: 2; display: grid; gap: 0.1rem; margin: var(--space-xs) 0 0; }
.ccm-frise__repere strong { font-family: var(--font-title); font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); font-weight: 600; line-height: 1.15; color: var(--color-navy); text-wrap: balance; }
.ccm-frise__repere span { font-size: var(--text-xs); color: var(--color-text-muted); }
/* Étapes pilotées par le défilement (initScrollSteps) : étape lue = nœud bleu plein, étapes passées = nœud bleu clair,
   rail coloré jusqu'à l'étape lue (19 oct. 2026 ; remplace l'effet au survol) */
.ccm-frise__etape::before, .ccm-frise__etape::after { transition: background-color .4s ease; }
.ccm-frise__etape.is-past .ccm-frise__noeud { color: var(--color-primary); background: var(--color-surface); box-shadow: inset 0 0 0 2px rgba(0,128,232,.55); }
.ccm-frise__etape.is-active .ccm-frise__noeud { color: var(--color-text-light); background: var(--color-primary); box-shadow: 0 0 0 6px rgba(0,128,232,.14), 0 10px 22px -12px rgba(0,128,232,.8); }
.ccm-frise__etape:is(.is-past, .is-active)::before, .ccm-frise__etape.is-past::after { background: var(--color-primary); }
.js-anim .ccm-frise__etape[data-reveal] { transition-delay: calc(var(--i) * 90ms); }
@media (prefers-reduced-motion: reduce) { .ccm-frise__noeud, .ccm-frise__etape::before, .ccm-frise__etape::after { transition: none; } }
@media (min-width: 768px) {
  .ccm-frise { padding: var(--space-md) var(--space-xl); }
  .ccm-frise__etape { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 17rem); align-items: center; padding: var(--space-lg) 0; }
  .ccm-frise__noeud { grid-row: auto; }
  .ccm-frise__repere { grid-column: 3; margin: 0; text-align: right; }
}
@media (min-width: 1024px) { .ccm-frise__etape { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 22rem); gap: var(--space-xl); } .ccm-frise__etape::before, .ccm-frise__etape::after { left: calc(1.75rem - 1px); } .ccm-frise__noeud { justify-self: center; } }

/* Rémunération (19 oct. 2026) : trois colonnes à filets sur fond blanc, puis la garantie déontologique en bandeau à contour fin */
.ccm-cout { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; }
.ccm-cout li { display: grid; align-content: start; gap: 0.3rem; padding: var(--space-lg) 0; border-top: 1px solid var(--color-border); }
.js-anim .ccm-cout li[data-reveal] { transition-delay: calc(var(--i) * 100ms); }
.ccm-cout__icone { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-sm); border-radius: 50%; color: var(--color-primary-dark); background: var(--color-bg); }
.ccm-cout__icone svg { width: 1.3rem; height: 1.3rem; }
.ccm-cout h3 { margin: 0; }
.ccm-cout p { max-width: 36ch; margin: 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
.ccm-cout .ccm-cout__label { font-size: var(--text-xs) !important; font-weight: 600; color: var(--color-primary-dark); }
.ccm-garanties { display: grid; gap: var(--space-md); align-items: center; margin-top: var(--space-xl); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.ccm-garanties__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.ccm-garanties__logos li { display: grid; place-items: center; height: 3.5rem; }
.ccm-garanties__logos img { display: block; width: auto; max-width: 9.5rem; height: 100%; object-fit: contain; }
.ccm-garanties p { max-width: 62ch; margin: 0; font-size: var(--text-base) !important; color: var(--color-text-muted); }
@media (min-width: 768px) {
  .ccm-cout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ccm-cout li { padding: var(--space-lg) var(--space-lg) var(--space-md) 0; border-top: 2px solid var(--color-navy); }
  .ccm-cout li + li { padding-left: var(--space-lg); border-left: 1px solid var(--color-border); }
  .ccm-garanties { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-md) var(--space-lg); }
  .ccm-garanties__logos { padding-right: var(--space-xl); border-right: 1px solid var(--color-border); }
}

/* ==========================================================================
   Blog, archive (18 oct. 2026, soir : « plus moderne et pro ») - les articles eux-mêmes ne changent pas.
   Hero en panneau bleu clair (titre | chapeau, puis la barre des catégories en verre dépoli et le compte),
   à la une en grande carte blanche, grille de cartes calmes : image arrondie dans la carte, catégorie et durée
   en haut, titre (H3), extrait, date en pied. Survol : l'image s'agrandit à peine.
   ========================================================================== */
.blog-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-xl); }
.blog-barre .post-filters { min-width: 0; max-width: 100%; }
.blog-barre .post-filters ul {
  display: inline-flex; gap: 0.25rem; padding: 0.3rem; overflow-x: auto; scrollbar-width: none; max-width: 100%;
  background: var(--color-bg); border-radius: 999px;
}
.blog-barre .post-filters a { padding: 0.55rem 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--color-navy); }
.blog-barre .post-filters a:hover { background: var(--color-surface); color: var(--color-primary-dark); }
.blog-barre .post-filters a[aria-current] { background: var(--color-navy); color: var(--color-text-light); }
.blog-barre .post-filters a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; }
.blog-barre .blog-count { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

.blog-list { padding-top: var(--space-xl); }
/* À la une */
.blog-list .post-feature {
  margin-bottom: var(--space-xl); padding: var(--space-sm); border: 0; background: var(--color-bg); border-radius: 28px;
}
.blog-list .post-feature__media { border-radius: 20px; }
.blog-list .post-feature__body { padding: var(--space-sm) var(--space-sm) var(--space-md); }
.post-feature__lire { margin-top: var(--space-md); }
@media (min-width: 1024px) {
  .blog-list .post-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); padding: var(--space-sm); }
  .blog-list .post-feature__body { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; }
}
/* Cartes (22 oct. 2026, d'après une section blog de uisections.com, Coframe) : sans cadre ni fond, image arrondie,
   pastilles à filet fin (catégorie, date, durée), titre et flèche oblique, extrait en gris ; le lien du titre couvre la carte */
.blog-list .post-grid { gap: var(--space-xl) var(--space-lg); }
@media (min-width: 1024px) { .blog-list .post-grid { gap: var(--space-2xl) var(--space-xl); } }
.blog-list .post-card { position: relative; padding: 0; overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.blog-list .post-card:hover { box-shadow: none; transform: none; }
.blog-list .post-card__media { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); transition: filter .4s ease; }
.blog-list .post-card:hover .post-card__media { filter: brightness(.94); }
.blog-list .post-card__body { padding: var(--space-md) 0 0; }
.post-card__pastilles { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 var(--space-sm); }
.post-card__pastilles span { padding: 0.2rem 0.6rem; font-size: var(--text-xs); font-weight: 500; letter-spacing: .02em; color: var(--color-text-muted);
  background: var(--color-surface); border: 1px solid rgba(20,33,61,.14); border-radius: 6px; }
.post-card__tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: start; width: 100%; }
.blog-list .post-card__title { margin: 0 0 0.5rem; }
.blog-list .post-card__title a { color: var(--color-navy); text-decoration: none; }
.blog-list .post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-list .post-card__title a:hover { color: var(--color-navy); text-decoration: none; }
.blog-list .post-card__title a:focus-visible { outline: none; }
.blog-list .post-card__title a:focus-visible::after { outline: 3px solid var(--color-primary); outline-offset: 6px; border-radius: var(--radius-lg); }
.post-card__fleche { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-top: 0.15rem; color: var(--color-text-muted); transition: color .25s ease, transform .25s ease; }
.post-card__fleche svg { width: 100%; height: 100%; }
.blog-list .post-card:hover .post-card__fleche { color: var(--color-primary-dark); transform: translate(2px, -2px); }
.blog-list .post-card__excerpt { margin: 0; color: var(--color-text-muted); -webkit-line-clamp: 2; }
.blog-more .btn--navy { color: var(--color-text-light); background: var(--color-navy); border-color: var(--color-navy); }
.blog-more .btn--navy:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
@media (prefers-reduced-motion: reduce) { .blog-list .post-card__media, .post-card__fleche { transition: none; } .blog-list .post-card:hover .post-card__fleche { transform: none; } }

/* ==========================================================================
   Formulaires, version moderne (18 oct. 2026, soir) - Contact, Devenir partenaire, Carrières, fiche d'offre.
   Champs pleins et arrondis (fond bleuté, filet visible : contraste ≥ 3:1), focus blanc + anneau bleu,
   choix en pastilles (radios), groupes titrés, dépôt de fichiers plus léger, bouton d'envoi avec flèche.
   ========================================================================== */
.contact-form { border: 1px solid rgba(20,33,61,.07); border-radius: 28px; box-shadow: 0 30px 60px -48px rgba(20,33,61,.55); }
main .contact-form { border-radius: 28px; }
.contact-form .contact-form__note { margin-bottom: var(--space-lg); }
.form-groupe { padding-top: var(--space-md); border-top: 1px solid rgba(20,33,61,.08); }
.form-groupe + .form-groupe { margin-top: var(--space-xs); }
.form-groupe__titre { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 var(--space-md); font-family: var(--font-title); font-size: var(--titre-4) !important; font-weight: 600; color: var(--color-navy); }
.form-groupe__titre::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px rgba(0,128,232,.15); }
.field > label, .field__label { font-weight: 500; }
.field input:not([type="checkbox"]):not([type="file"]):not([type="radio"]), .field select, .field textarea {
  min-height: 3.1rem; padding: 0.8rem 1rem; background: #f5f8fc; border: 1px solid #7d8899; border-radius: 12px;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.field input:not([type="checkbox"]):not([type="file"]):not([type="radio"]):hover, .field select:hover, .field textarea:hover { border-color: var(--color-navy); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(0,128,232,.18);
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2314213d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.1rem; }
.field textarea { min-height: 9rem; }
/* Choix en pastilles */
.field--choix { margin: 0 0 var(--space-md); padding: 0; border: 0; min-width: 0; }
.field--choix legend { padding: 0; margin-bottom: 0.5rem; }
.choix { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.choix__item { position: relative; display: inline-flex; cursor: pointer; }
.choix__item input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choix__item span {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.5rem 1rem; font-size: var(--text-sm); font-weight: 500; color: var(--color-navy);
  background: #f5f8fc; border: 1px solid #7d8899; border-radius: 999px; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.choix__item:hover span { border-color: var(--color-navy); }
.choix__item input:checked + span { color: var(--color-text-light); background: var(--color-navy); border-color: var(--color-navy); }
.choix__item input:checked + span::before { content: ""; width: 0.45rem; height: 0.45rem; margin-right: 0.5rem; border-radius: 50%; background: var(--color-accent); }
.choix__item input:focus-visible + span { outline: 3px solid var(--color-primary); outline-offset: 2px; }
/* Dépôt de fichiers */
.field > .dropzone { padding: var(--space-sm) var(--space-md); background: #f5f8fc; border: 1.5px dashed #8b97a8; border-radius: 14px; }
.dropzone__icon { box-shadow: 0 8px 18px -12px rgba(1,72,141,.6); }
/* Case à cocher, envoi */
.field--check input { accent-color: var(--color-navy); }
.contact-form__btn { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding-inline: 1.6rem; border-radius: 999px; }
.contact-form__btn svg { width: 1.1rem; height: 1.1rem; transition: transform .25s ease; }
.contact-form__btn:hover svg { transform: translateX(3px); }
@media (max-width: 479px) { .contact-form__submit { display: grid; } .contact-form__btn { justify-content: center; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .contact-form__btn svg, .choix__item span { transition: none; } }

/* ==========================================================================
   Contact (18 oct. 2026, soir) : hero en panneau bleu clair (titre | chapeau, puis trois accès rapides en
   verre : appeler, écrire, délai de réponse), formulaire en carte blanche | coordonnées et « après votre message »
   ========================================================================== */
.ct-acces { list-style: none; margin: 0 0 var(--space-xl); padding: 0; display: grid; gap: var(--space-xs); }   /* en tête du contenu, sous le hero simple (19 oct. 2026) */
.ct-acces li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-bg); border-radius: 18px; }
.ct-acces li > span:last-child { display: grid; min-width: 0; }
/* Icône discrète (19 oct. 2026 : la pastille en dégradé était trop visible) : petit cercle blanc, pictogramme bleu foncé */
.ct-acces__icone { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-surface); color: var(--color-primary-dark); }
.ct-acces__icone svg { width: 1.05rem; height: 1.05rem; stroke-width: 1.6; }
.ct-acces__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.ct-acces a, .ct-acces strong { overflow-wrap: anywhere; font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; color: var(--color-navy); text-decoration: none; }
.ct-acces a:hover { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (min-width: 768px) { .ct-acces { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }   /* deux accès depuis le 28 oct. 2026 (délai retiré) */

main[data-contact] .contact { padding-top: var(--space-xl); }
.ct-aside { display: grid; gap: var(--space-md); align-content: start; }
.ct-carte { padding: var(--space-md); background: var(--color-bg); border-radius: 24px; }
.ct-carte h2 { margin: 0 0 var(--space-sm); font-size: var(--titre-3) !important; }
.ct-carte--bleu { background: linear-gradient(150deg, var(--tint-bleu-2) 0%, var(--tint-bleu) 100%); }
.ct-bureaux { list-style: none; margin: 0; padding: 0; display: grid; }
.ct-bureaux li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid rgba(20,33,61,.08); }
.ct-bureaux li > span:last-child { display: grid; font-size: var(--text-sm); color: var(--color-text-muted); }
.ct-bureaux strong { font-size: var(--text-base); font-weight: 600; color: var(--color-navy); }
.ct-bureaux__point { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px rgba(0,128,232,.15); transform: translateY(-1px); }
.ct-carte__horaires { display: grid; margin: var(--space-sm) 0 0; padding-top: var(--space-sm); border-top: 1px solid rgba(20,33,61,.08); font-size: var(--text-sm) !important; font-weight: 600; color: var(--color-navy); }
.ct-carte__horaires span { font-weight: 400; color: var(--color-text-muted); }
.ct-ensuite { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-sm); }
.ct-ensuite li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-xs); align-items: baseline; }
.ct-ensuite .num-gras { font-size: 1.25rem; }
.ct-ensuite p { margin: 0; font-size: var(--text-base) !important; color: var(--color-navy); }
@media (min-width: 768px) { .ct-carte { padding: var(--space-lg); } }
@media (min-width: 1024px) { .ct-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-xl); align-items: start; } .ct-aside { position: sticky; top: calc(var(--header-h) + var(--space-md)); } }
.ct-carte address { font-style: normal; }
/* Devenir partenaire, candidature (22 oct. 2026) : mise en page de la page Contact ; fiche de l'entreprise et liens directs */
.join-apply__tete { max-width: 46rem; margin-bottom: var(--space-xl); }
.join-apply__tete h2 { margin: 0 0 var(--space-sm); }
.join-apply__tete .lead { margin: 0; color: var(--color-text-muted); }
main[data-page="devenir-partenaire"] .contact-form h3 { margin: 0 0 var(--space-md); }
.ct-carte h3 { margin: 0 0 var(--space-sm); }
.ct-carte > p { margin: 0 0 var(--space-sm); color: var(--color-text-muted); }
.ct-fiche { display: grid; margin: 0; }
.ct-fiche > div { display: grid; gap: 0.1rem; padding: 0.7rem 0; border-top: 1px solid rgba(20,33,61,.08); }
.ct-fiche dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.ct-fiche dd { margin: 0; font-weight: 600; color: var(--color-navy); }
.ct-liens { list-style: none; display: grid; gap: var(--space-xs); margin: 0; padding: 0; }
.ct-liens li { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.ct-liens a { overflow-wrap: anywhere; font-weight: 600; color: var(--color-navy); text-decoration: none; }
.ct-liens a:hover { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ct-acces a, .ct-acces strong { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); overflow-wrap: normal; }
.ct-acces a[href^="mailto"] { overflow-wrap: anywhere; }

/* ==========================================================================
   Devenir partenaire (18 oct. 2026, soir) : hero v2 (3 nov. 2026 : liste des trois profils, comme Carrières),
   cadre commun en cartes décalées à pastille d'icône, formulaire en trois groupes (profil en pastilles)
   ========================================================================== */
@media (min-width: 1024px) { .join-hero2 .page-hero__grid { align-items: center; } }

.join-cadre2 { display: grid; gap: var(--space-lg); }
.join-cadre2__tete h2 { margin-top: 0; }
.join-cadre2__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.join-cadre2__liste li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; padding: var(--space-md);
  background: var(--color-bg); border-radius: 22px;
}
.join-cadre2__liste h3 { margin: 0.15rem 0 0.25rem; }
.join-cadre2__liste p { margin: 0; color: var(--color-text-muted); }
.js-anim .join-cadre2__liste li[data-reveal] { transition-delay: calc(var(--i) * 100ms); }
@media (min-width: 1024px) {
  .join-cadre2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
  .join-cadre2__liste li { padding: var(--space-md) var(--space-lg); }
  .join-cadre2__liste li:nth-child(odd) { margin-right: var(--space-xl); }
  .join-cadre2__liste li:nth-child(even) { margin-left: var(--space-xl); }
}
main[data-page="devenir-partenaire"] .join-apply__form { border: 0; box-shadow: none; }

/* ==========================================================================
   Carrières (18 oct. 2026, soir, d'après design-references/exemples-visuels) : hero v2 avec photo d'équipe à venir et
   postes ouverts en étiquette de verre, chiffres en bandeau, offres en lignes cliquables, avantages en liste,
   candidature spontanée (formulaire moderne)
   ========================================================================== */

.jobs-lignes { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.jobs-ligne {
  position: relative; display: grid; gap: var(--space-sm); padding: var(--space-md); background: var(--color-surface);
  border: 1px solid rgba(20,33,61,.07); border-radius: 24px; box-shadow: 0 22px 44px -40px rgba(20,33,61,.55);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.jobs-ligne:hover { border-color: rgba(1,72,141,.2); box-shadow: 0 26px 50px -36px rgba(20,33,61,.6); }
.jobs-ligne:focus-within { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.jobs-ligne__type { display: inline-block; margin: 0 0 0.4rem; padding: 0.15rem 0.65rem; font-size: var(--text-xs) !important; font-weight: 600; color: var(--color-primary-dark); background: var(--tint-bleu); border-radius: 999px; }
.jobs-ligne h3 { margin: 0 0 0.3rem; }
.jobs-ligne h3 a { color: var(--color-navy); text-decoration: none; }
.jobs-ligne h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* toute la ligne est cliquable */
.jobs-ligne h3 a:focus-visible { outline: none; }
.jobs-ligne__resume { max-width: 62ch; margin: 0; color: var(--color-text-muted); }
.jobs-ligne .job-meta { display: grid; gap: 0.4rem; }
.jobs-ligne__fleche { display: none; }
@media (min-width: 1024px) {
  .jobs-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem) 3rem; align-items: center; gap: var(--space-xl); padding: var(--space-lg) var(--space-xl); }
  .jobs-ligne__fleche { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--color-text-light); background: var(--color-navy); transition: background-color .25s ease, transform .25s ease; }
  .jobs-ligne__fleche svg { width: 1.1rem; height: 1.1rem; }
  .jobs-ligne:hover .jobs-ligne__fleche { background: var(--color-primary); transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .jobs-ligne__fleche { transition: none; } }
.jobs-spont .join-careers.ct-carte { margin-top: var(--space-lg); border: 0; }
/* ==========================================================================
   Énergie verte (18 oct. 2026, soir, d'après design-references/exemples-visuels)
   - Garantie d'origine : panneau bleu clair, étapes numérotées | maquette de certificat (carte blanche, statut en
     pastille verte de la charte = bleu, étiquette en verre posée dessus)
   - Ce que nous faisons : photo en grande carte + trois cartes à pastille d'icône
   - Biométhane : panneau ambre clair, « À retenir » dans une carte blanche
   ========================================================================== */
.ev-go { display: grid; gap: var(--space-xl); align-items: center; border-radius: 28px; }
.ev-go h2 { margin-top: 0; }
.ev-go__etapes { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; }
.ev-go__etapes li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-md) 0; border-top: 1px solid rgba(1,72,141,.14); }
.ev-go__etapes li:first-child { border-top-color: var(--color-primary-dark); }
.ev-go__etapes h3 { margin: 0 0 0.2rem; }
.ev-go__etapes p { margin: 0; color: var(--color-text-muted); }
.js-anim .ev-go__etapes li[data-reveal] { transition-delay: calc(var(--i) * 100ms); }
.ev-go__note { max-width: 70ch; margin: var(--space-md) 0 0; }
.ev-certif { position: relative; margin: 0; padding-bottom: var(--space-lg); }
.ev-certif__carte {
  position: relative; padding: var(--space-md); background: var(--color-surface); border-radius: 24px;
  box-shadow: 0 34px 70px -40px rgba(1,72,141,.55); transform: rotate(-1.5deg);
}
.ev-certif__tete { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px dashed rgba(20,33,61,.18); }
.ev-certif__tete strong { font-family: var(--font-title); font-size: var(--titre-3); font-weight: 600; color: var(--color-navy); }
.ev-certif dl { margin: 0; display: grid; gap: 0; }
.ev-certif dl div { display: flex; justify-content: space-between; gap: var(--space-md); padding: 0.6rem 0; border-bottom: 1px solid rgba(20,33,61,.06); font-size: var(--text-sm); }
.ev-certif dt { color: var(--color-text-muted); }
.ev-certif dd { margin: 0; font-weight: 600; text-align: right; color: var(--color-navy); }
.ev-certif__statut { display: inline-flex; align-items: center; gap: 0.45rem; margin: var(--space-md) 0 0; padding: 0.4rem 0.85rem; font-size: var(--text-sm) !important; font-weight: 600; color: var(--color-primary-dark); background: var(--tint-bleu); border-radius: 999px; }
.ev-certif__statut svg { flex: none; width: 1rem; height: 1rem; }
.ev-certif__etiquette {
  position: absolute; right: var(--space-sm); bottom: 0; display: grid; gap: 0.1rem; margin: 0; padding: 0.8rem 1.1rem;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.95); border-radius: 18px; box-shadow: 0 18px 36px -22px rgba(20,33,61,.5);
  font-size: var(--text-xs); color: var(--color-text-muted); transform: rotate(2deg);
}
.ev-certif__etiquette strong { font-family: var(--font-title); font-size: var(--text-xl); font-weight: 600; color: var(--color-navy); }
.ev-certif__note { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-text-muted); }
@media (min-width: 768px) { .ev-certif__carte { padding: var(--space-lg); } }
@media (min-width: 1024px) {
  .ev-go { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-2xl); padding: var(--space-2xl) var(--space-xl); }
  .ev-certif { padding: 0 var(--space-md) var(--space-lg); }
  .ev-certif__etiquette { right: -0.5rem; }
}

.ev-mosaique { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.ev-mosaique__photo { position: relative; margin: 0; min-height: 20rem; overflow: hidden; border-radius: 28px; }
.ev-mosaique__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-mosaique__etiquette {
  position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); display: grid; gap: 0.15rem; padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 18px; font-size: var(--text-sm); color: var(--color-text-muted);
}
.ev-mosaique__etiquette strong { font-family: var(--font-title); font-size: var(--titre-3); font-weight: 600; color: var(--color-navy); }
.ev-mosaique__cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.ev-mosaique__cartes li { display: grid; align-content: start; gap: 0.35rem; padding: var(--space-md); background: var(--color-bg); border-radius: 24px; }
.ev-mosaique__cartes .tp-icone { margin-bottom: var(--space-sm); }
.ev-mosaique__cartes h3 { margin: 0; }
.ev-mosaique__cartes p { margin: 0; color: var(--color-text-muted); }
.js-anim .ev-mosaique__cartes li[data-reveal] { transition-delay: calc(var(--i) * 100ms); }
@media (min-width: 768px) { .ev-mosaique__cartes li { padding: var(--space-lg); } }
@media (min-width: 1024px) {
  .ev-mosaique { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ev-mosaique__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-mosaique__cartes li:last-child { grid-column: 1 / -1; }
}

.ev-encart { display: grid; gap: var(--space-lg); align-items: center; border-radius: 28px; }
.ev-encart h2 { margin-top: 0; }
.ev-encart__carte { padding: var(--space-md); background: var(--color-surface); border-radius: 24px; box-shadow: 0 30px 60px -44px rgba(20,33,61,.5); }
@media (min-width: 768px) { .ev-encart__carte { padding: var(--space-lg); } }
@media (min-width: 1024px) { .ev-encart { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-2xl); padding: var(--space-2xl) var(--space-xl); } }
@media (prefers-reduced-motion: reduce) { .ev-certif__carte, .ev-certif__etiquette { transform: none; } }
.ev-go__note { margin-inline: 0; text-align: left; }

/* ==========================================================================
   Heros des pages À propos (19 oct. 2026, demande de Sandro) : même fond et même hauteur que le hero de Notre histoire
   (panneau bleu clair en dégradé, hauteur d'écran plafonnée sur desktop) ; texte à gauche, image ou sommaire à droite.
   Pourquoi nous choisir, Comment ça marche, Énergie verte (hero à sommaire .why-hero) et Les fournisseurs du marché.
   FAQ, glossaire et blog gardent leur hero simple.
   ========================================================================== */
.why-hero, main[data-fournisseurs] .panel-hero {
  padding-block: var(--space-xl);
  background: radial-gradient(90% 120% at 0% 0%, #ffffff 0%, var(--tint-bleu-2) 35%, var(--tint-bleu) 100%);
}
@media (min-width: 1024px) {
  .why-hero, main[data-fournisseurs] .panel-hero {
    display: flex; align-items: center; min-height: clamp(560px, calc(100svh - var(--header-h)), 760px); padding-block: var(--space-2xl);
  }
  .why-hero > .container, main[data-fournisseurs] .panel-hero > .container { width: 100%; }
}


/* Énergie verte : « Aller plus loin » (19 oct. 2026) sur le rendu des leviers des secteurs (.v2-leviers) :
   photos empilées, celle du modèle choisi en fondu ; bandeau logo + installations + lien dessous */
.ev-modeles { margin-top: 0; }
.ev-modeles__visuel { position: relative; min-height: 18rem; }
.ev-modeles__photo { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.ev-modeles__photo.is-active { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.ev-modeles__photo img { height: 100%; }
.ev-modeles__bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.ev-modeles__bandeau .section-foot { margin: 0 0 0 auto; }
.ev-modeles__logo { margin: 0; }
.ev-modeles__logo img { display: block; width: auto; height: 2.5rem; }
.ev-modeles__installations { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.ev-modeles__installations > p { margin: 0; font-size: var(--text-sm) !important; font-weight: 600; color: var(--color-navy); }
.ev-modeles__installations .tags { margin: 0; }
@media (max-width: 767px) { .ev-modeles__bandeau .section-foot { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .ev-modeles__photo, .ev-modeles__photo.is-active { transition: none; } }
.ev-modeles__installations .tags li { background: var(--color-surface); }

/* === Le marché de l'énergie (19 oct. 2026) : graphique des prix de gros (.mk) ======================
   assets/js/marche-energie.js. Carte blanche : titre | filtres (énergie, période), repères chiffrés à filets,
   légende, courbes Cal+1 (bleu, aire légère) et spot (ambre foncé #c27f00, palette validée), survol / clavier,
   tableau des moyennes mensuelles en <details>. Une seule échelle (€/MWh), à partir de 0. */
.mk { --terme: var(--color-primary); --terme-2: #0f9d8a; --terme-3: #a8479a; --spot: #c27f00; margin: var(--space-xl) 0 0; }
/* Couleur de chaque série (courbe, point, puce de légende et de bulle, carte) : palette validée sur toutes les paires */
.mk [data-serie="terme"] { --c: var(--terme); }
.mk [data-serie="terme_2"] { --c: var(--terme-2); }
.mk [data-serie="terme_3"] { --c: var(--terme-3); }
.mk [data-serie="spot"] { --c: var(--spot); }
.mk__card { padding: var(--space-md) var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); color: var(--color-navy); }
@media (min-width: 768px) { .mk__card { padding: var(--space-lg); } }
.mk__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-sm) var(--space-md); }
.mk__head { display: grid; gap: 0.2rem; }
.mk__title { font-family: var(--font-title); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; color: var(--color-navy); }
.mk__sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.mk__filtres { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.mk__seg { display: inline-flex; padding: 4px; background: var(--color-bg); border-radius: 999px; }
.mk__seg button {
  min-height: 40px; padding: 0.4rem 1rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted);
  background: none; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.mk__seg button:hover { color: var(--color-navy); }
.mk__seg button[aria-pressed="true"] { color: var(--color-navy); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.mk__seg button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Cartes Cal+1, Cal+2, Cal+3, spot : fond bleu très clair, filet de la couleur de la série en haut, valeur en serif,
   évolution en pastille neutre (jamais rouge / vert) */
.mk__cartes { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin: var(--space-lg) 0 var(--space-md); padding: 0; }
@media (min-width: 1024px) { .mk__cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); } }
.mk-carte {
  position: relative; display: flex; flex-direction: column; gap: 0.35rem; overflow: hidden;
  padding: 0.9rem 1rem 1rem; background: linear-gradient(180deg, #f7faff, var(--color-surface)); border: 1px solid #e3eaf3; border-radius: var(--radius-lg);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mk-carte[data-serie="spot"] { background: linear-gradient(180deg, #fffaf0, var(--color-surface)); border-color: #f1e6cf; }
.mk-carte::before { content: ""; position: absolute; left: 1rem; top: 0; width: 1.75rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.mk-carte:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mk-carte p { margin: 0; }
.mk-carte__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 0.5rem; font-size: var(--text-xs); color: var(--color-text-muted); }
.mk-carte__tete strong { font-size: var(--text-sm); font-weight: 700; color: var(--color-navy); }
.mk-carte__valeur { font-size: var(--text-xs); color: var(--color-text-muted); }
.mk-carte__valeur strong { font-family: var(--font-title); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-navy); font-variant-numeric: tabular-nums; }
.mk-carte__var { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; justify-self: start; font-size: var(--text-xs); font-weight: 600; color: var(--color-navy); }
.mk-carte__var span { font-weight: 400; color: var(--color-text-muted); }
.mk-carte__var svg { width: 13px; height: 13px; padding: 2px; box-sizing: content-box; border-radius: 50%; background: var(--color-bg); }
.mk-carte__var svg.is-hausse { transform: rotate(-45deg); }
.mk-carte__var svg.is-baisse { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .mk-carte { transition: none; } .mk-carte:hover { transform: none; } }
/* Légende */
.mk__legende { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem var(--space-md); margin: 0 0 var(--space-md); padding: 0; font-size: var(--text-sm); color: var(--color-navy); }
.mk__legende li { display: inline-flex; align-items: center; gap: 0.5rem; }
.mk__puce { flex: none; width: 18px; height: 3px; border-radius: 2px; background: var(--c); }
[data-serie="spot"] > .mk__puce { height: 2px; }
/* Tracé */
.mk__body { position: relative; padding-left: 2.5rem; }
.mk__plot { position: relative; height: clamp(240px, 32vw, 380px); touch-action: pan-y; cursor: crosshair; }
.mk__plot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 6px; border-radius: 2px; }
.mk__grid { position: absolute; left: 0; right: 0; top: var(--y); border-top: 1px solid #edf0f4; }
.mk__grid span { position: absolute; right: calc(100% + 0.6rem); top: 0; transform: translateY(-50%); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk__vgrid { position: absolute; top: 0; bottom: 0; left: var(--x); border-left: 1px dashed #e3e8ef; }
.mk__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.45,.05,.25,1); }
.mk.is-visible .mk__svg { clip-path: inset(-10px -10px -10px 0); }
.mk__ligne { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mk__ligne { stroke: var(--c); stroke-width: 1.75; }
.mk__ligne[data-serie="terme"] { stroke-width: 2.5; }
.mk__ligne[data-serie="spot"] { stroke-width: 1.5; }
/* Dernière valeur : point cerclé de blanc en bout de courbe */
.mk__fin { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff; opacity: 0; transition: opacity .4s ease 1.4s; pointer-events: none; }
.mk.is-visible .mk__fin { opacity: 1; }
/* Semaine survolée */
.mk__guide { position: absolute; top: 0; bottom: 0; left: var(--x); border-left: 1px solid rgba(20,33,61,.3); pointer-events: none; z-index: 2; }
.mk__dot { position: absolute; left: -5px; top: var(--y); width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff; }
.mk__tip {
  position: absolute; left: 0.75rem; top: 0; display: grid; gap: 0.2rem; min-width: 11rem; padding: 0.55rem 0.75rem;
  font-size: var(--text-xs); color: var(--color-navy); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); white-space: nowrap;
}
.mk__guide.is-gauche .mk__tip { left: auto; right: 0.75rem; }
.mk__tip-date { margin-bottom: 0.15rem; color: var(--color-text-muted); }
.mk__tip-ligne { display: flex; align-items: center; gap: 0.45rem; }
.mk__tip-ligne strong { margin-left: auto; padding-left: var(--space-sm); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.mk__axis { position: relative; height: 1.75rem; border-top: 1px solid var(--color-border); }
.mk__axis span { position: absolute; left: var(--x); top: 0.45rem; transform: translateX(-50%); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.mk__aide { margin: var(--space-xs) 0 0; font-size: var(--text-xs) !important; color: var(--color-text-muted); }
@media (hover: none) { .mk__aide { display: none; } }
/* Pied : mention des données fictives, source, tableau */
.mk__pied { display: grid; gap: 0.35rem; margin-top: var(--space-sm); }
.mk__pied p { margin: 0; font-size: var(--text-xs) !important; line-height: 1.5; color: var(--color-text-muted); }
.mk__fictif { justify-self: start; padding: 0.3rem 0.7rem; font-weight: 600; color: var(--color-navy) !important; background: rgba(250,177,2,.18); border-radius: var(--radius-sm); }
.mk__donnees { margin-top: var(--space-sm); }
.mk__donnees summary { display: inline-block; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); cursor: pointer; }
.mk__donnees summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.mk__table { max-height: 22rem; margin-top: var(--space-sm); overflow: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.mk__table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.mk__table caption { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--color-navy); }
.mk__table th, .mk__table td { padding: 0.45rem 1rem; text-align: right; border-top: 1px solid #edf0f4; }
.mk__table th:first-child { text-align: left; font-weight: 500; }
.mk__table thead th { position: sticky; top: 0; background: var(--color-bg); font-weight: 600; color: var(--color-navy); }
@media (prefers-reduced-motion: reduce) {
  .mk__svg { clip-path: none; transition: none; }
  .mk__fin { opacity: 1; transition: none; }
}
/* Article « Comprendre le marché » : styles du blog (.post-layout, .post-content, .post-toc, .post-expert), chapô en tête,
   sommaire collant à droite sur grand écran */
.mk-article__tete { display: grid; gap: var(--space-xs); max-width: 70ch; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.mk-article__tete p { margin: 0; }
.mk-article__surtitre { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); }
.mk-article__chapo { font-family: var(--font-title); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); font-weight: 600; line-height: 1.35; color: var(--color-navy); }
.mk-article .post-content > h2:first-child { margin-top: 0; }
.mk-article__aside { display: grid; gap: var(--space-sm); align-content: start; }
.mk-article__aside p { margin: 0; }
.mk-article__aside .post-toc { margin: 0 !important; }
@media (min-width: 1024px) { .mk-article__aside { position: sticky; top: calc(var(--header-h) + var(--space-lg)); } }

.mk-article .post-content > p + p, .mk-article .post-content > ul + p { margin-top: var(--space-sm); }

/* Devenir partenaire : photos des profils apporteur et consultant (19 oct. 2026), format 3:2, coins arrondis */
.join-panel__visual--photo { overflow: hidden; border-radius: 24px; }
.join-panel__photo { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Carrières : liste cliquable du hero (19 oct. 2026), centrée verticalement face au texte */
@media (min-width: 1024px) { .jobs-hero2 .page-hero__grid { align-items: center; } }

/* ==========================================================================
   Accueil en couleurs (21 oct. 2026, demande de Sandro : « plus joyeux », un conseil moderne plutôt que gris-bleu).
   La charte reste la base (bleu vif, bleu nuit, ambre) ; s'y ajoutent, sur l'accueil seulement, un vert, un corail
   et un violet, en teintes claires pour les fonds et en tons foncés pour les textes (contraste AA sur blanc).
   Titres de l'accueil en Sora (prime sur la typographie unifiée pour cette page).
   ========================================================================== */
:root {
  --joy-vert: #1fa67a;     --joy-vert-fonce: #0b7a55;   --tint-vert: #d9f4e8;   --tint-vert-2: #f2fbf7;
  --joy-corail: #ff6b4a;   --joy-corail-fonce: #c2410c; --tint-corail: #ffe3da; --tint-corail-2: #fff6f2;
  --joy-violet: #7c5cff;   --joy-violet-fonce: #5b3fd6; --tint-violet: #e9e4ff; --tint-violet-2: #f7f5ff;
  --joy-ambre-fonce: #8a5a00;
}
.page-accueil { --font-title: 'Sora', 'Poppins', sans-serif; }
.page-accueil :is(h1, h2) { letter-spacing: -0.03em; }
.page-accueil h3 { letter-spacing: -0.02em; }
/* Titres de section de l'accueil un peu plus grands (22 oct. 2026, demande de Sandro : 40px → 48px en desktop) */
body.page-accueil main h2 { font-size: clamp(2rem, 1.45rem + 1.9vw, 3rem) !important; line-height: 1.1 !important; }

/* Pictogrammes sur pastille : variantes vert, corail, violet (même dégradé et reflet que .tp-icone) */
.tp-icone--vert { background: linear-gradient(150deg, #45d39f 0%, var(--joy-vert) 50%, #0e8a60 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 22px -10px rgba(31,166,122,.75); }
.tp-icone--corail { background: linear-gradient(150deg, #ff9a7a 0%, var(--joy-corail) 50%, #e8481f 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 22px -10px rgba(255,107,74,.75); }
.tp-icone--violet { background: linear-gradient(150deg, #a48dff 0%, var(--joy-violet) 50%, #5b3fd6 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 22px -10px rgba(124,92,255,.75); }

/* Une expertise à 360° : anneaux bleu vers ambre d'origine, comme les formes des photos des services
   (vert, corail et violet retirés le 22 oct. 2026 pour unifier l'accueil) */


/* Fournisseurs : fond chaud (témoignages et CTA final : fonds d'origine, violet retiré le 21 oct. 2026) */
.page-accueil .home-fournisseurs { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(160deg, var(--tint-ambre-2) 0%, #fff 45%, var(--tint-corail-2) 100%); }
.page-accueil .home-fournisseurs::before {
  content: ""; position: absolute; z-index: -1; width: 36rem; aspect-ratio: 1; left: -12rem; top: -12rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(250,177,2,.2), transparent);
}

/* --- Déontologie : SCE et Bureau Veritas en deux cartes (21 oct. 2026 ; 22 oct. : deux fonds distincts, bleu pâle pour le SCE,
   ambre pâle pour Bureau Veritas ; logo et statut sur une même ligne en tête, bien séparés du titre ; sans anneau décoratif) --- */
.deonto__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }   /* minmax : le logo (480 px) ne doit pas élargir la colonne en mobile */
@media (min-width: 768px) { .deonto__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); } }
.deonto__carte { display: flex; flex-direction: column; padding: var(--space-md); border-radius: var(--radius-xl); background: var(--deonto-fond, #f6f8fb); }
@media (min-width: 1024px) { .deonto__carte { padding: var(--space-lg); } }
.deonto__carte--bleu  { --deonto-fond: linear-gradient(160deg, #f5f9ff 0%, #e6f0fd 100%); --deonto-statut: var(--color-primary-dark); }
.deonto__carte--ambre { --deonto-fond: linear-gradient(160deg, #fffaf2 0%, #ffeedb 100%); --deonto-statut: #8a5a00; }
.deonto__carte--vert  { --deonto-fond: linear-gradient(160deg, #f4fcf8 0%, #e1f5eb 100%); --deonto-statut: var(--joy-vert-fonce, #0b7a55); }
.deonto__haut { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.deonto__logo { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 5rem; padding: 0.85rem 1.25rem; background: #fff; border-radius: 16px; box-shadow: 0 14px 30px -22px rgba(20,33,61,.5); }
.deonto__logo img { display: block; width: auto; height: 4.25rem; max-width: min(14rem, 100%); object-fit: contain; }   /* le badge Bureau Veritas reste lisible (22 oct. 2026) */
.deonto__statut { flex: none; margin: 0; padding: 0.3rem 0.8rem; font-size: var(--text-xs) !important; font-weight: 600; line-height: 1.5; border-radius: 999px; background: #fff; color: var(--deonto-statut); }
.deonto__carte h3 { margin: 0 0 0.6rem; color: var(--color-navy); }
.deonto__carte p:not(.deonto__statut) { margin: 0; color: var(--color-text-muted); }

/* ==========================================================================
   Secteurs en couleurs légères (21 oct. 2026, validé sur TPE puis étendu aux 9 secteurs) :
   hero blanc vers bleu, filet gris sous les chiffres, usages teintés ; leviers et « Notre rôle » inchangés.
   Mêmes teintes que l'accueil (bleu, ambre, vert, corail ; pas de violet), en fonds très clairs
   et tons foncés pour les textes ; la structure du gabarit v2 ne change pas.
   ========================================================================== */
main[data-secteur] {
  --sx-c1: var(--color-primary-dark); --sx-t1: var(--tint-bleu-2);   --sx-p1: var(--tint-bleu);
  --sx-c2: var(--joy-corail-fonce);   --sx-t2: var(--tint-corail-2); --sx-p2: var(--tint-corail);
  --sx-c3: var(--joy-ambre-fonce);    --sx-t3: var(--tint-ambre-2);  --sx-p3: var(--tint-ambre);
  --sx-c4: var(--joy-vert-fonce);     --sx-t4: var(--tint-vert-2);   --sx-p4: var(--tint-vert);
}
/* Hero : blanc à gauche vers bleu clair à droite */
main[data-secteur] .page-hero--v2 { background: linear-gradient(90deg, #fff 0%, var(--tint-bleu-2) 40%, var(--tint-bleu) 100%); }
/* Chiffres : un court filet gris sous chaque valeur */
main[data-secteur] .v2-chiffres strong::after {
  content: ""; display: block; width: 2.5rem; height: 3px; margin: 0.7rem auto 0.2rem; border-radius: 3px; background: rgba(20,33,61,.18);
}
/* Usages : chaque carte prend une teinte (fond très clair, pastille et métiers dans le ton foncé) */
main[data-secteur] .v2-usages li { background: var(--sx-t); border-color: transparent; }
main[data-secteur] .v2-usages__icon { color: var(--sx-c); background: var(--sx-p); }
main[data-secteur] .v2-usages__metiers { color: var(--sx-c); }
main[data-secteur] .v2-usages li:nth-child(4n+1) { --sx-c: var(--sx-c1); --sx-t: var(--sx-t1); --sx-p: var(--sx-p1); }
main[data-secteur] .v2-usages li:nth-child(4n+2) { --sx-c: var(--sx-c2); --sx-t: var(--sx-t2); --sx-p: var(--sx-p2); }
main[data-secteur] .v2-usages li:nth-child(4n+3) { --sx-c: var(--sx-c3); --sx-t: var(--sx-t3); --sx-p: var(--sx-p3); }
main[data-secteur] .v2-usages li:nth-child(4n+4) { --sx-c: var(--sx-c4); --sx-t: var(--sx-t4); --sx-p: var(--sx-p4); }

/* ==========================================================================
   TURPE et taxes en couleurs légères (21 oct. 2026, même principe que les secteurs) :
   cartes teintées (fond très clair, numéro ou pastille dans le ton foncé). Heros, « Notre rôle » et FAQ inchangés.
   ========================================================================== */
main:is([data-service="optimisation-turpe"], [data-service="optimisation-taxes"]) {
  --sx-c1: var(--color-primary-dark); --sx-t1: var(--tint-bleu-2);   --sx-p1: var(--tint-bleu);   --sx-v1: var(--color-primary);
  --sx-c2: var(--joy-corail-fonce);   --sx-t2: var(--tint-corail-2); --sx-p2: var(--tint-corail); --sx-v2: var(--joy-corail);
  --sx-c3: var(--joy-vert-fonce);     --sx-t3: var(--tint-vert-2);   --sx-p3: var(--tint-vert);   --sx-v3: var(--joy-vert);
  --sx-c4: var(--joy-ambre-fonce);    --sx-t4: var(--tint-ambre-2);  --sx-p4: var(--tint-ambre);  --sx-v4: var(--color-accent);
}
/* TURPE : les quatre réglages (bleu, corail, vert, ambre ; l'ambre loin de la grande carte ambrée) */
main[data-service="optimisation-turpe"] .tp-bento__reglages li { background: linear-gradient(160deg, var(--sx-p) 0%, var(--sx-t) 70%); }
main[data-service="optimisation-turpe"] .tp-bento__reglages .num-gras { color: var(--sx-c); }
main[data-service="optimisation-turpe"] .tp-bento__reglages li:nth-child(4n+1) { --sx-c: var(--sx-c1); --sx-t: var(--sx-t1); --sx-p: var(--sx-p1); }
main[data-service="optimisation-turpe"] .tp-bento__reglages li:nth-child(4n+2) { --sx-c: var(--sx-c2); --sx-t: var(--sx-t2); --sx-p: var(--sx-p2); }
main[data-service="optimisation-turpe"] .tp-bento__reglages li:nth-child(4n+3) { --sx-c: var(--sx-c3); --sx-t: var(--sx-t3); --sx-p: var(--sx-p3); }
main[data-service="optimisation-turpe"] .tp-bento__reglages li:nth-child(4n+4) { --sx-c: var(--sx-c4); --sx-t: var(--sx-t4); --sx-p: var(--sx-p4); }
/* Taxes : les trois situations (gros consommateurs en bleu, procédés en corail, agriculture en vert) */
main[data-service="optimisation-taxes"] .tx-cas__taux { background: linear-gradient(150deg, var(--sx-t), var(--sx-p)); }
main[data-service="optimisation-taxes"] .tx-cas__tete .tp-icone { color: #fff; background: linear-gradient(150deg, var(--sx-v) 0%, var(--sx-c) 100%); }
main[data-service="optimisation-taxes"] .tx-cas__regime { color: var(--sx-c); }
main[data-service="optimisation-taxes"] .tx-cas__carte:nth-child(3n+1) { --sx-c: var(--sx-c1); --sx-t: var(--sx-t1); --sx-p: var(--sx-p1); --sx-v: var(--sx-v1); }
main[data-service="optimisation-taxes"] .tx-cas__carte:nth-child(3n+2) { --sx-c: var(--sx-c2); --sx-t: var(--sx-t2); --sx-p: var(--sx-p2); --sx-v: var(--sx-v2); }
main[data-service="optimisation-taxes"] .tx-cas__carte:nth-child(3n+3) { --sx-c: var(--sx-c3); --sx-t: var(--sx-t3); --sx-p: var(--sx-p3); --sx-v: var(--sx-v3); }

/* ==========================================================================
   Conseil et courtage en couleurs légères (21 oct. 2026) : trame de points derrière « Deux métiers »
   (anneaux retirés le 22 oct. 2026), intro en panneau bleu vers ambre (comme le panneau conseil
   de l'accueil), étapes sur fond bleu très clair, domaines du conseil en bleu, corail, vert.
   ========================================================================== */
main[data-service="conseil-energie"] .parcours { position: relative; isolation: isolate; overflow: hidden; background: var(--color-surface); }
/* « Deux métiers » (22 oct. 2026, retour de Sandro : anneaux jugés pas beaux) : fond blanc, trame de points très fine
   derrière le titre et les onglets, qui s'efface vers le bas et les côtés */
main[data-service="conseil-energie"] .parcours::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 30rem; pointer-events: none;
  background-image: radial-gradient(rgba(1,72,141,.16) 1px, transparent 1.3px); background-size: 22px 22px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 55% 75% at 50% 0%, #000 0%, transparent 78%);
}
main[data-service="conseil-energie"] .parcours > .container { position: relative; }

/* Moins d'encadrés (21 oct. 2026, retour de Sandro : « trop de rectangles avec info dedans ») : intro posée directement
   sur la section, domaines en liste éditoriale ; étapes et étude de cas gardent leur rendu d'origine (décision de Sandro). */

/* Intro de chaque parcours : sans panneau ; la photo s'appuie sur une forme en dégradé bleu vers ambre, décalée */
main[data-service="conseil-energie"] .pc-intro { padding: 0; background: none; border-radius: 0; }
main[data-service="conseil-energie"] .pc-intro__accroche { padding-left: var(--space-sm); border-left: 3px solid var(--color-accent); }
main[data-service="conseil-energie"] .pc-intro__visuel--photo { position: relative; isolation: isolate; overflow: visible; margin: 0 var(--space-sm) var(--space-sm) 0; }
main[data-service="conseil-energie"] .pc-intro__visuel--photo img { border-radius: var(--radius-xl); }
main[data-service="conseil-energie"] .pc-intro__visuel--photo::before {
  content: ""; position: absolute; z-index: -1; inset: var(--space-md) calc(var(--space-sm) * -1) calc(var(--space-sm) * -1) var(--space-md);
  border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--tint-bleu) 0%, #cfe4fb 40%, #ffe7b8 80%, #ffd9b0 100%);
}
@media (min-width: 1024px) {
  main[data-service="conseil-energie"] .pc-intro { padding: var(--space-md) 0; }
  main[data-service="conseil-energie"] .pc-intro__visuel--photo { margin: 0 var(--space-lg) var(--space-lg) 0; }
  main[data-service="conseil-energie"] .pc-intro__visuel--photo::before { inset: var(--space-xl) calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-xl); }
}

/* Domaines du conseil : liste éditoriale (filets entre les lignes, sans carte ni décalage), une couleur par domaine */
main[data-service="conseil-energie"] .domaines__list { gap: 0; }
main[data-service="conseil-energie"] .domaines__list li { margin: 0; padding: var(--space-md) 0; background: none; border-radius: 0; border-top: 1px solid rgba(20,33,61,.12); }
main[data-service="conseil-energie"] .domaines__list li:last-child { border-bottom: 1px solid rgba(20,33,61,.12); }
@media (min-width: 768px) { main[data-service="conseil-energie"] .domaines__list li { padding: var(--space-lg) 0; } }
main[data-service="conseil-energie"] .domaines__list li:nth-child(3n+1) .domaines__icone { background: linear-gradient(150deg, #2f9bff, var(--color-primary) 50%, var(--color-primary-dark)); }
main[data-service="conseil-energie"] .domaines__list li:nth-child(3n+2) .domaines__icone { background: linear-gradient(150deg, #ff9a7a, var(--joy-corail) 50%, var(--joy-corail-fonce)); }
main[data-service="conseil-energie"] .domaines__list li:nth-child(3n+3) .domaines__icone { background: linear-gradient(150deg, #45d39f, var(--joy-vert) 50%, var(--joy-vert-fonce)); }
/* Domaines : anneaux abstraits sous le titre, dans le vide de la colonne de gauche (bureau seulement) */
@media (min-width: 1024px) {
  main[data-service="conseil-energie"] .domaines { position: relative; isolation: isolate; }
  main[data-service="conseil-energie"] .domaines::before,
  main[data-service="conseil-energie"] .domaines::after { content: ""; position: absolute; z-index: -1; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
  main[data-service="conseil-energie"] .domaines::before {
    width: 24rem; left: -4rem; bottom: -6rem;
    background: conic-gradient(from 300deg, transparent 0deg, rgba(0,128,232,.24) 70deg, rgba(31,166,122,.22) 150deg, rgba(255,107,74,.2) 220deg, transparent 290deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 19px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 19px));
  }
  main[data-service="conseil-energie"] .domaines::after {
    width: 15rem; left: 5rem; bottom: -1.5rem;
    background: conic-gradient(from 120deg, transparent 0deg, rgba(250,177,2,.55) 80deg, rgba(0,128,232,.4) 170deg, transparent 250deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  }
}
/* TURPE : grande carte des réglages sur fond blanc, avec l'illustration de l'accueil et la note dessous (21 oct. 2026) */
main[data-service="optimisation-turpe"] .tp-bento__grande { align-content: start; background: var(--color-surface); border: 1px solid rgba(20,33,61,.08); }
main[data-service="optimisation-turpe"] .tp-bento__illu { mix-blend-mode: multiply; filter: none; }

/* TURPE (page service, « Quatre réglages ») : courant animé sur l'illustration (21 oct. 2026, d'abord sur l'accueil). Chaque câble porte une impulsion (cœur blanc, lueur ambre)
   qui part du premier pylône et finit au transformateur ; un halo s'allume au transformateur à chaque arrivée.
   Ne tourne qu'une fois la section visible ; rien avec prefers-reduced-motion. */
.courant { position: relative; }
.courant img { display: block; }
.courant__calque { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.courant__fils path { stroke: #fffbe8; stroke-width: 5; stroke-dasharray: 9 300; stroke-dashoffset: 9; opacity: 0;
  filter: drop-shadow(0 0 2px #fab102) drop-shadow(0 0 6px #fab102) drop-shadow(0 0 12px rgba(250,177,2,.7));
  animation: 3.2s linear var(--d) infinite paused; }
.courant__fils .courant__a { animation-name: courant-a; }   /* portée pylône → pylône */
.courant__fils .courant__b { animation-name: courant-b; }   /* portée pylône → transformateur, juste après */
.courant__halo { opacity: 0; transform-box: fill-box; transform-origin: center; animation: courant-halo 3.2s ease-out .5s infinite paused; }
.is-visible :is(.courant__fils path, .courant__halo) { animation-play-state: running; }
@keyframes courant-a { 0% { stroke-dashoffset: 9; opacity: 0; } 4% { opacity: 1; } 34% { opacity: 1; } 38% { stroke-dashoffset: -100; opacity: 0; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes courant-b { 0%, 38% { stroke-dashoffset: 9; opacity: 0; } 42% { opacity: 1; } 74% { opacity: 1; } 78% { stroke-dashoffset: -100; opacity: 0; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes courant-halo { 0%, 68% { opacity: 0; transform: scale(.7); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .courant__calque { display: none; } }

/* Illustrations animées de l'accueil (22 oct. 2026) : image à fond blanc + calque SVG (initIllusAnimees, components.js).
   Courant ambre le long des câbles, données en bleu clair, halos, reflet et rayons ; cycle commun de 4,5 s,
   joué seulement dans l'écran (.is-joue), jamais avec prefers-reduced-motion. */
.illu-anim { position: relative; width: 100%; max-width: 32rem; margin-inline: auto; }
.illu-anim img { display: block; width: 100%; max-width: none; height: auto; filter: none; }
.illu-anim__calque { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.illu-anim__flux { stroke: #fab102; stroke-width: 6; stroke-dasharray: 10 300; stroke-dashoffset: 10; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(250,177,2,.9)); animation: illu-flux 4.5s cubic-bezier(.45,.05,.55,.95) var(--d, 0s) infinite paused; }
.illu-anim__flux--donnees { stroke: #8fd8ff; filter: drop-shadow(0 0 5px rgba(0,128,232,.85)); }
.illu-anim__halo { opacity: 0; transform-box: fill-box; transform-origin: center; animation: illu-halo 4.5s ease-out var(--d, 0s) infinite paused; }
.illu-anim__reflet { fill: rgba(255,255,255,.6); opacity: 0; animation: illu-reflet 4.5s ease-in-out 1.4s infinite paused; }
.illu-anim__onde { fill: none; stroke: #1fa67a; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: illu-onde 4.5s ease-out 1.8s infinite paused; }
.illu-anim__rayons path { stroke: #7be495; stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(31,166,122,.8)); animation: illu-rayon 4.5s ease-out calc(1.9s + var(--i) * .12s) infinite paused; }
.is-joue :is(.illu-anim__flux, .illu-anim__halo, .illu-anim__reflet, .illu-anim__rayons path, .illu-anim__onde) { animation-play-state: running; }
@keyframes illu-onde { 0% { opacity: 0; transform: scale(1); } 4% { opacity: .9; } 30%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes illu-flux { 0% { stroke-dashoffset: 10; opacity: 0; } 3% { opacity: 1; } 28% { stroke-dashoffset: -100; opacity: 1; } 30%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes illu-halo { 0% { opacity: 0; transform: scale(.5); } 10% { opacity: 1; transform: scale(1); } 32%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes illu-reflet { 0% { opacity: 0; transform: translateX(0); } 4% { opacity: 1; } 24% { opacity: 1; transform: translateX(300px); } 26%, 100% { opacity: 0; transform: translateX(300px); } }
@keyframes illu-rayon { 0% { stroke-dashoffset: 1; opacity: 1; } 8% { stroke-dashoffset: 0; } 22% { opacity: 1; } 34%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .illu-anim__calque { display: none; } }

/* Taxes (page service, « L'accise ») : coches animées sur l'illustration (21 oct. 2026, d'abord sur l'accueil). Les cases (redessinées par-dessus celles de l'image)
   se cochent une à une, une onde part du badge « validé », puis tout s'efface et recommence (cycle de 6 s). */
.coches { position: relative; mix-blend-mode: multiply; }   /* image et calque fondus ensemble dans le fond de la carte */
.coches img { display: block; }
.coches__calque { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.coches__cache { fill: #f6faff; }
.coches__case { fill: #f6faff; stroke: #c1d8f0; stroke-width: 3; }
.coches__coche { fill: none; stroke: #1ea779; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: coche 6s cubic-bezier(.3,.7,.3,1) calc(var(--i) * .55s) infinite paused; }
.coches__onde { fill: none; stroke: #1ea779; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: coche-onde 6s ease-out infinite paused; }
.is-visible :is(.coches__coche, .coches__onde) { animation-play-state: running; }
@keyframes coche { 0%, 6% { stroke-dashoffset: 1; opacity: 1; } 14% { stroke-dashoffset: 0; } 80% { stroke-dashoffset: 0; opacity: 1; } 88%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes coche-onde { 0%, 46% { opacity: 0; transform: scale(1); } 50% { opacity: .9; } 70%, 100% { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .coches__calque { display: none; } }
.tx-accise .coches { width: 100%; max-width: 30rem; margin-inline: auto; }   /* le calque suit la largeur de l'illustration */
.tx-accise .coches .tx-accise__illu { max-width: 100%; filter: none; }   /* pas d'ombre portée : l'image n'est pas détourée */
.tx-accise .coches {   /* bords estompés : le fond presque blanc de l'image ne dessine plus de cadre sur le dégradé de la carte */
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ==========================================================================
   Étapes « produit » (Conseil, courtage ; branche homepage-2-exemple, 21 oct. 2026) : d'après la section de Secoda
   (uisections.com). Titre à gauche ; quatre cartes (fait clé de chaque étape, la choisie sur fond gris clair, soulevées au survol) ;
   grand panneau : accordéon des étapes à gauche, écran à droite qui déborde du panneau (rapport de consultation).
   SmartBlocs.etapesProduit (blocs.js).
   ========================================================================== */
.ep__tete { max-width: 46rem; margin: 0 0 var(--space-xl); }
.ep__tete h2 { margin: 0 0 var(--space-sm); }
.ep__tete p { margin: 0; color: var(--color-text-muted); }

.ep__cartes { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ep__carte {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; width: 100%; height: 100%; padding: 1.1rem;
  font: inherit; text-align: left; color: var(--color-navy); cursor: pointer;
  background: var(--color-surface); border: 1px solid #e3e6ec; border-radius: 20px;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* Barre d'étapes (22 oct. 2026, retour de Sandro : les quatre cartes à icônes ne plaisaient pas) : sans cadre ni icône,
   un filet en haut de chaque étape, bleu pour l'étape choisie ; numéro, fait clé en serif, précision en gris */
.ep__cartes { gap: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); }
.ep__carte { gap: 0.3rem; padding: var(--space-sm) 0 0; background: none; border: 0; border-top: 2px solid rgba(20,33,61,.12); border-radius: 0;
  transition: border-color .3s ease; }
.ep__carte:hover { border-top-color: rgba(1,72,141,.45); }
.ep__carte.is-active { background: none; border-top-color: var(--color-primary); }
.ep__carte:focus-visible { outline-offset: 4px; }
.ep__carte-num { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; color: var(--color-text-muted); transition: color .3s ease; }
.ep__carte.is-active .ep__carte-num { color: var(--color-primary-dark); }
.ep__carte-titre { font-family: var(--font-title); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.ep__carte-texte { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) { .ep__carte, .ep__carte-num { transition: none; } }

/* Panneau : même fond chaud que les fournisseurs de l'accueil (ambre clair, blanc, corail clair) + halo ambre en haut à gauche */
.ep__panneau { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--space-lg); padding: var(--space-md) var(--space-md) 0; border-radius: 28px;
  background: linear-gradient(160deg, var(--tint-ambre-2, #fffaee) 0%, #fff 45%, var(--tint-corail-2, #fff6f2) 100%); border: 1px solid #f1ebe4; }
.ep__panneau::before { content: ""; position: absolute; z-index: -1; width: 36rem; aspect-ratio: 1; left: -12rem; top: -12rem; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(250,177,2,.2), transparent); }
.ep__item { border-bottom: 1px solid #e6e1da; }
.ep__item:last-child { border-bottom: 0; }
.ep__item h3 { margin: 0; }
.ep__declencheur {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.1rem 0;
  font: inherit; font-family: var(--font-title); font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); font-weight: 600; line-height: 1.25;
  text-align: left; color: var(--color-navy); background: none; border: 0; cursor: pointer;
}
.ep__declencheur svg { flex: none; width: 20px; height: 20px; color: var(--color-text-muted); transition: transform .3s ease; }
.ep__item.is-open .ep__declencheur svg { transform: rotate(180deg); }
/* Ouverture en douceur (grille 0fr → 1fr) ; fermé, le contenu est masqué aux lecteurs d'écran (visibility) */
.ep__contenu { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s ease, visibility .35s; }
.ep__item.is-open .ep__contenu { grid-template-rows: 1fr; visibility: visible; }
.ep__contenu > div { overflow: hidden; }
.ep__contenu p { margin: 0 0 var(--space-md); max-width: 40ch; font-size: var(--text-lg) !important; line-height: 1.6 !important; color: #3b4658; }
.ep__btn { margin-bottom: 1.5rem; padding: 0.7rem 1.3rem; font-size: var(--text-base); font-weight: 600; color: var(--color-navy); background: var(--color-surface); border: 1px solid #d5dbe4; border-radius: 999px; }
.ep__btn:hover { border-color: var(--color-navy); }

/* Écran : moniteur bleu nuit, dalle blanche au format du rapport (16:9), pied coupé par le bas du panneau */
.ep__ecran { position: relative; align-self: end; }
.ep__moniteur { padding: 10px; background: var(--color-navy); border-radius: 18px 18px 0 0; }
.ep__dalle { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #fff; border-radius: 8px 8px 0 0; }
.ep__vue { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.ep__vue.is-active { opacity: 1; }
.ep__vue img { width: 100%; height: 100%; object-fit: contain; }
.ep__pied { display: none; }

@media (min-width: 768px) {
  .ep__cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
}
@media (min-width: 1024px) {
  .ep__panneau { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: var(--space-xl); align-items: center; padding: var(--space-xl) 0 0 4rem; min-height: 34rem; }
  .ep__accordeon { align-self: center; padding-bottom: var(--space-xl); }
  /* le moniteur sort du panneau à droite, son pied est coupé en bas, comme dans la référence */
  .ep__ecran { margin-right: -14%; }
  .ep__moniteur { border-radius: 20px; padding: 14px; }
  .ep__dalle { border-radius: 8px; }
  .ep__pied { display: block; width: 22%; height: 3.5rem; margin-left: 30%; background: linear-gradient(180deg, #c7ccd4, #dfe3e8); }
}
@media (prefers-reduced-motion: reduce) { .ep__contenu, .ep__vue, .ep__declencheur svg { transition: none; } }

/* ==========================================================================
   Petites touches de couleur (22 oct. 2026, demande de Sandro : « sans trop en faire ») : Notre histoire et
   Comment ça marche reprennent les teintes des secteurs (bleu, corail, vert, ambre), en tons foncés pour les textes
   ========================================================================== */
main:is([data-page="notre-histoire"], [data-page="comment-ca-marche"]) { --c1: var(--color-primary-dark); --c2: var(--joy-corail-fonce); --c3: var(--joy-vert-fonce); --c4: var(--joy-ambre-fonce);
  --t1: var(--tint-bleu); --t2: var(--tint-corail); --t3: var(--tint-vert); --t4: var(--tint-ambre); }
/* Notre histoire : constantes numérotées dans leur couleur */
main[data-page="notre-histoire"] .nh-constantes li { border-top: 3px solid var(--t); }
main[data-page="notre-histoire"] .nh-constantes .num-gras { color: var(--c); }
main[data-page="notre-histoire"] .nh-constantes li:nth-child(1) { --c: var(--c1); --t: var(--color-primary); }
main[data-page="notre-histoire"] .nh-constantes li:nth-child(2) { --c: var(--c2); --t: var(--joy-corail); }
main[data-page="notre-histoire"] .nh-constantes li:nth-child(3) { --c: var(--c3); --t: var(--joy-vert); }
/* Comment ça marche : pastilles et étiquettes de la rémunération teintées */
main[data-page="comment-ca-marche"] .ccm-cout li:nth-child(1) { --c: var(--c1); --t: var(--t1); }
main[data-page="comment-ca-marche"] .ccm-cout li:nth-child(2) { --c: var(--c2); --t: var(--t2); }
main[data-page="comment-ca-marche"] .ccm-cout li:nth-child(3) { --c: var(--c3); --t: var(--t3); }
main[data-page="comment-ca-marche"] .ccm-cout__icone { color: var(--c); background: var(--t); }
main[data-page="comment-ca-marche"] .ccm-cout .ccm-cout__label { color: var(--c); }

/* Accueil, « Une expertise à 360° » : titre et description centrés, titre agrandi (22 oct. 2026, demande de Sandro) */
.page-accueil .home-expertises .section-head--stack { justify-items: center; text-align: center; }
.page-accueil .home-expertises .section-head--stack p { margin-inline: auto; text-wrap: balance; }
/* 28 oct. 2026 : même taille que le titre des secteurs (« Un accompagnement adapté à votre activité ») et que les autres H2 de l'accueil */
body.page-accueil main :is(.home-expertises .section-head--stack h2, .sect__titre) { font-size: clamp(2rem, 1.45rem + 1.9vw, 3rem) !important; line-height: 1.1 !important; }
body.page-accueil main .home-expertises .section-head--stack h2 { max-width: 30ch; margin-inline: auto; text-wrap: balance; }

/* H1 de toutes les pages dans la police du titre de l'accueil (Sora), 22 oct. 2026, demande de Sandro ;
   tailles inchangées ; depuis le 28 oct. 2026 tous les titres sont en Sora */
main h1 { font-family: 'Sora', 'Poppins', sans-serif !important; letter-spacing: -0.03em; }

/* Accueil, sous-titre du hero sur deux lignes en desktop (22 oct. 2026, demande de Sandro) */
@media (min-width: 1024px) { .home-hero__lead { max-width: 64rem; } }

/* Accueil, déontologie sur fond bleu nuit (28 oct. 2026, demande de Sandro : la distinguer nettement des services) :
   la charte réserve le navy aux encarts de réassurance ; cartes en verre sombre, logos sur leur pastille blanche,
   un filet de couleur en tête de chaque carte (bleu SCE, ambre Bureau Veritas) */
.page-accueil .deonto { padding-block: var(--space-2xl); }
@media (min-width: 1024px) { .page-accueil .deonto { padding-block: 8rem; } }
.page-accueil .deonto.section--navy .section-head p { color: rgba(255,255,255,.78); }
.page-accueil .section--navy .deonto__carte {
  position: relative; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.page-accueil .section--navy .deonto__carte::before {
  content: ""; position: absolute; top: -1px; left: var(--space-lg); right: var(--space-lg); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--deonto-filet, var(--color-primary)), transparent);
}
.page-accueil .section--navy .deonto__carte--ambre { --deonto-filet: var(--color-accent); }
.page-accueil .section--navy .deonto__carte h3 { color: var(--color-text-light); }
.page-accueil .section--navy .deonto__carte p:not(.deonto__statut) { color: rgba(255,255,255,.75); }
.page-accueil .section--navy .deonto__logo { box-shadow: none; }
.page-accueil .section--navy .deonto__statut { color: var(--color-navy); background: rgba(255,255,255,.92); }

/* Variante bleu clair (28 oct. 2026, à l'essai) : fond bleu clair de la charte avec un halo bleu très doux,
   cartes blanches à filet de couleur en tête ; pour revenir au bleu nuit, remettre section--navy sur la section */
.page-accueil .deonto.section--bg {
  background:
    radial-gradient(50% 60% at 95% 0%, rgba(0,128,232,.10), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(250,177,2,.07), transparent 70%),
    var(--color-bg);
}
.page-accueil .section--bg .deonto__carte {
  position: relative; background: var(--color-surface);
  border: 1px solid rgba(20,33,61,.06); box-shadow: 0 24px 48px -36px rgba(20,33,61,.35);
}
.page-accueil .section--bg .deonto__carte::before {
  content: ""; position: absolute; top: -1px; left: var(--space-lg); right: var(--space-lg); height: 3px; border-radius: 0 0 3px 3px;
  background: var(--deonto-filet, var(--color-primary));
}
.page-accueil .section--bg .deonto__carte--ambre { --deonto-filet: var(--color-accent); }
.page-accueil .section--bg .deonto__logo { box-shadow: none; border: 1px solid var(--color-border); }
.page-accueil .section--bg .deonto__statut { background: var(--color-bg); }

/* ==========================================================================
   Mobile (28 oct. 2026, après l'audit téléphone) : titres ramenés à une taille de téléphone, services du hero
   de l'accueil en ligne, carrousel des secteurs avec flèches sous les cartes, fournisseurs de l'accueil
   condensés (« +50 » à côté de sa légende, une seule ligne de logos), chiffres des secteurs en liste compacte.
   ========================================================================== */
@media (max-width: 767px) {
  :root { --titre-1: 1.875rem; --titre-2: 1.5rem; --titre-3: 1.125rem; }
  body.page-accueil main h2,
  body.page-accueil main :is(.home-expertises .section-head--stack h2, .sect__titre) { font-size: 1.625rem !important; line-height: 1.15 !important; }

  /* Hero de l'accueil : titre plus court, texte plus petit, les trois services côte à côte */
  .home-hero { padding-top: calc(var(--header-h) + var(--space-md)); }
  .home-hero h1 { font-size: 2rem; margin-bottom: var(--space-sm); }
  .home-hero__lead { font-size: 0.9375rem; line-height: 1.6; }
  .home-hero__services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: var(--space-md); }
  .home-hero__services a {
    flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.6rem; min-height: 7.25rem;
    padding: 0.8rem 0.7rem; border-radius: 14px; font-size: 0.8125rem; line-height: 1.25; letter-spacing: -0.01em; hyphens: manual;
  }
  .home-hero__services svg { width: 14px; height: 14px; padding: 0.4rem; }

  /* Carrousel des secteurs : cartes un peu plus étroites alignées sur la marge, flèches sous les cartes */
  .sect__titre { margin-bottom: var(--space-lg); }
  .sect-car { padding-bottom: 3.75rem; }
  .sect-car__liste { padding-left: var(--space-sm); }
  .sect__carte { width: min(66vw, 15rem); }
  .sect-car__btn { display: grid; top: auto; bottom: 0; margin-top: 0; width: 2.75rem; height: 2.75rem; }
  .sect-car__btn--prev { left: calc(50% - 3.25rem); }
  .sect-car__btn--next { right: calc(50% - 3.25rem); }

  /* Fournisseurs de l'accueil : « +50 » à côté de sa légende, une seule ligne de logos */
  .home-fournisseurs .panel-count { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-sm); }
  .home-fournisseurs .panel-count strong { font-size: 5.5rem; }
  .home-fournisseurs .panel-count > span:last-child { font-size: 1.125rem; }
  .home-fournisseurs .panel-home { gap: var(--space-md); }
  .home-fournisseurs .panel-marquees { margin-top: var(--space-lg); }
  .home-fournisseurs .panel-marquees .marquee + .marquee { display: none; }

  /* Pages secteurs : chiffres clés en liste compacte (valeur à gauche, texte à droite) */
  .v2-chiffres { padding-block: var(--space-lg) var(--space-sm); }
  .v2-chiffres ul { gap: 0; text-align: left; }
  .v2-chiffres li { grid-template-columns: 7.5rem 1fr; align-items: center; justify-items: start; gap: var(--space-sm); padding-block: var(--space-sm); }
  .v2-chiffres li + li { border-top: 1px solid rgba(20,33,61,.1); }
  .v2-chiffres strong { font-size: 1.625rem; }
  main[data-secteur] .v2-chiffres strong::after { display: none; }
}

/* ==========================================================================
   Pages services, hero clair (28 oct. 2026, demande de la direction : plus de fond bleu nuit) : même construction
   que les secteurs (texte à gauche sur un fond blanc qui passe au bleu clair), à droite l'illustration animée de
   l'accueil dans un panneau pâle à la couleur du service (bleu conseil, orangé TURPE, vert taxes)
   ========================================================================== */
.page-hero--service { padding-block: var(--space-xl); background: linear-gradient(90deg, #fff 0%, var(--tint-bleu-2) 45%, var(--tint-bleu) 100%); }
.page-hero--service .page-hero__grid { gap: var(--space-lg); align-items: center; }
.page-hero--service h1 { max-width: 20ch; text-wrap: balance; color: var(--color-navy); }
.page-hero--service .page-hero__lead { max-width: 54ch; color: var(--color-text-muted); }
.page-hero--service .h1-accent { color: var(--color-primary); }   /* l'ambre ne se lit pas sur fond clair : bleu, filet ambre gardé */
.page-hero--service .page-hero__media { margin: 0; }
.svc-hero__panneau {
  display: grid; place-items: center; aspect-ratio: 5 / 4; padding: var(--space-md);
  border-radius: var(--radius-xl); background: var(--svc-hero-fond, linear-gradient(160deg, #f5f9ff 0%, #e6f0fd 100%));
  box-shadow: 0 30px 60px -40px rgba(1,72,141,.45);
}
.page-hero--ambre { --svc-hero-fond: linear-gradient(160deg, #fffaf2 0%, #ffeedb 100%); }
.page-hero--vert  { --svc-hero-fond: linear-gradient(160deg, #f4fcf8 0%, #e1f5eb 100%); }
.svc-hero__panneau .illu-anim { width: 100%; max-width: 36rem; mix-blend-mode: multiply; }
.svc-hero__panneau .svc__illu { max-width: none; }
@media (min-width: 1024px) {
  .page-hero--service { display: flex; align-items: center; min-height: clamp(540px, calc(100svh - var(--header-h)), 720px); padding-block: var(--space-2xl); }
  .page-hero--service .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-2xl); }
  .svc-hero__panneau { padding: var(--space-lg); }
}
@media (max-width: 767px) { .svc-hero__panneau { aspect-ratio: 4 / 3; padding: var(--space-sm); } }

/* Accueil (28 oct. 2026) : « Une expertise à 360° pour optimiser vos coûts » sur une ligne en desktop, description plus large ;
   un peu moins d'espace entre le carrousel des secteurs et cette section */
@media (min-width: 1024px) {
  body.page-accueil main .home-expertises .section-head--stack h2 { max-width: none; white-space: nowrap; }
  .page-accueil .home-expertises .section-head--stack p { width: 100%; max-width: 64rem; }   /* deux lignes larges */
  .page-accueil .home-secteurs { padding-bottom: 4.5rem; }
  .page-accueil .home-expertises { padding-top: 4.5rem; }
}

/* Conseil, « Deux métiers, un même interlocuteur » (28 oct. 2026) : barre de choix aux couleurs du site
   (fond blanc bordé, curseur bleu de la charte comme les boutons, texte blanc sur le choix actif) au lieu de la barre navy */
.join-switch.join-switch--parcours {
  background: var(--color-surface); border: 1px solid var(--color-border);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 18px 40px -28px rgba(1,72,141,.35);
}
.join-switch--parcours .join-switch__thumb {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 10px 24px -10px rgba(0,128,232,.6);
}
.join-switch--parcours .parcours__nom { color: var(--color-navy); }
.join-switch--parcours .parcours__titre { color: var(--color-text-muted); }
.join-switch--parcours .join-switch__tab:not([aria-selected="true"]):hover { background: var(--color-bg); }
.join-switch--parcours .join-switch__tab[aria-selected="true"] .parcours__nom { color: var(--color-text-light); }
.join-switch--parcours .join-switch__tab[aria-selected="true"] .parcours__titre { color: rgba(255,255,255,.85); }
.join-switch--parcours .join-switch__tab:focus-visible { outline-color: var(--color-primary); }

/* Heros clairs des pages services (28 oct. 2026) : le passage mis en valeur reste dans le fil du titre (pas de bloc),
   et le filet ambre souligne chaque ligne ; il se trace à l'arrivée de la page */
.page-hero--service .h1-accent {
  display: inline; padding-bottom: 0.04em;
  background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 0 100% / 0 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: h1-accent-ligne .9s .6s cubic-bezier(.2,.7,.2,1) forwards;
}
.page-hero--service .h1-accent::after { content: none; }
@keyframes h1-accent-ligne { to { background-size: 100% 3px; } }
@media (prefers-reduced-motion: reduce) { .page-hero--service .h1-accent { animation: none; background-size: 100% 3px; } }

/* ==========================================================================
   Notre histoire (29 oct. 2026, demande de Sandro)
   - Le fondateur : citation en grand sur un filet bleu vers ambre, signée d'une petite photo (nom, titre, « Depuis 1996 »)
     | parcours dans un panneau bleu clair, périodes en pastilles, la création de Smart-Électricité mise en avant.
   - De la Savoie au reste de la France : carte de France qui s'allume depuis Saint-Jean-de-Maurienne (seul point nommé),
     puis des points un à un partout en France, du plus proche au plus loin | chiffres clés en cartes de couleur
     (dégradés des réglages du TURPE : bleu, corail, vert, ambre).
   ========================================================================== */
main[data-page="notre-histoire"] {
  --sx-c1: var(--color-primary-dark); --sx-t1: var(--tint-bleu-2);   --sx-p1: var(--tint-bleu);
  --sx-c2: var(--joy-corail-fonce);   --sx-t2: var(--tint-corail-2); --sx-p2: var(--tint-corail);
  --sx-c3: var(--joy-vert-fonce);     --sx-t3: var(--tint-vert-2);   --sx-p3: var(--tint-vert);
  --sx-c4: var(--joy-ambre-fonce);    --sx-t4: var(--tint-ambre-2);  --sx-p4: var(--tint-ambre);
}

/* --- Le fondateur --- */
.nh-fondateur { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.nh-mot { position: relative; display: flex; flex-direction: column; gap: var(--space-lg); margin: 0; padding-left: var(--space-md); }
.nh-mot::before { content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent) 100%); }
.nh-mot blockquote { margin: 0; }
.nh-mot blockquote p { margin: 0; font-family: var(--font-title) !important; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem) !important; font-weight: 500; line-height: 1.42 !important; letter-spacing: -0.01em; color: var(--color-navy); text-wrap: pretty; }
.nh-mot blockquote p::before { content: "« "; color: var(--color-primary); }
.nh-mot blockquote p::after { content: " »"; color: var(--color-primary); }
.nh-mot figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.nh-mot figcaption img { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 4px rgba(20,33,61,.1); }
.nh-mot__qui { display: grid; font-size: var(--text-sm); line-height: 1.4; color: var(--color-text-muted); }
.nh-mot__qui strong { font-size: var(--text-base); font-weight: 600; color: var(--color-navy); }
.nh-mot__depuis { padding: 0.3rem 0.8rem; font-size: var(--text-sm); color: var(--color-primary-dark); background: var(--tint-bleu); border-radius: 999px; }
.nh-mot__depuis strong { font-weight: 600; }

.nh-parcours { padding: var(--space-md); background: linear-gradient(160deg, var(--tint-bleu) 0%, var(--tint-bleu-2) 75%); border-radius: var(--radius-xl); }
.nh-parcours h3 { margin: 0 0 var(--space-md); }
.nh-parcours ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.nh-parcours li { display: grid; gap: 0.5rem; padding: var(--space-sm) var(--space-md); background: rgba(255,255,255,.72); border-radius: var(--radius-lg); }
.nh-parcours__periode { justify-self: start; padding: 0.15rem 0.6rem; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary-dark); background: var(--color-surface); border: 1px solid rgba(1,72,141,.15); border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nh-parcours__corps { display: grid; gap: 0.1rem; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.nh-parcours__corps strong { font-size: var(--text-base); font-weight: 600; line-height: 1.4; color: var(--color-navy); }
.nh-parcours__fin { background: var(--color-surface) !important; box-shadow: 0 16px 32px -24px rgba(1,72,141,.55); }
.nh-parcours__fin .nh-parcours__periode { color: var(--color-text-light); background: var(--color-primary); border-color: var(--color-primary); }
@media (min-width: 768px) {
  .nh-mot { padding-left: var(--space-lg); }
  .nh-parcours { padding: var(--space-lg); }
  .nh-parcours li { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: var(--space-md); }
}
@media (min-width: 1024px) { .nh-fondateur { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; } }

/* --- De la Savoie au reste de la France --- */
.nh-france { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.nh-carte { position: relative; width: 100%; max-width: 34rem; margin: 0 auto; }
.nh-carte__fond { display: block; width: 100%; height: auto; opacity: .22; }
.nh-carte__pt, .nh-carte__dot { position: absolute; border-radius: 50%; background: var(--color-primary); }
.nh-carte__pt {
  left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  box-shadow: 0 0 0 3px var(--color-surface), 0 3px 8px rgba(20,33,61,.22);
  opacity: 0; transform: scale(.3); transition: opacity .45s ease, transform .5s cubic-bezier(.3,1.5,.5,1);
}
.nh-carte.is-on .nh-carte__pt { opacity: 1; transform: none; transition-delay: calc(0.9s + var(--i) * 85ms); }
.nh-carte__depart {
  position: absolute; left: var(--x); top: var(--y); z-index: 1; display: flex; align-items: center; gap: 0.5rem;
  opacity: 0; transform: translateY(calc(-50% + 8px)); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.nh-carte.is-on .nh-carte__depart { opacity: 1; transform: translateY(-50%); }
.nh-carte__dot { position: relative; flex: none; width: 18px; height: 18px; margin-left: -9px; background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-surface), 0 4px 12px rgba(20,33,61,.25); }
.nh-carte__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--color-accent); animation: pin-pulse 2.2s ease-out infinite; }
.nh-carte__nom { display: grid; padding: 0.25rem 0.6rem; font-size: var(--text-xs); font-weight: 600; line-height: 1.25; color: var(--color-navy); background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.nh-carte__nom > span { white-space: nowrap; }
@media (min-width: 768px) { .nh-carte__nom { font-size: var(--text-sm); } }
/* Mobile : carte un peu plus petite et calée à gauche, l'étiquette de Saint-Jean-de-Maurienne reste dans l'écran à 375 px */
@media (max-width: 767px) { .nh-carte { max-width: 18rem; margin-inline: 0 auto; } }

.nh-chiffres-cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.nh-chiffres-cartes li {
  display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-sm); padding: var(--space-md);
  background: linear-gradient(160deg, var(--sx-p) 0%, var(--sx-t) 70%); border-radius: var(--radius-xl);
}
.nh-chiffres-cartes li:first-child { grid-column: 1 / -1; }
.js-anim .nh-chiffres-cartes li[data-reveal] { transition-delay: calc(var(--i) * 110ms); }
.nh-chiffres-cartes li:nth-child(4n+1) { --sx-c: var(--sx-c1); --sx-t: var(--sx-t1); --sx-p: var(--sx-p1); }
.nh-chiffres-cartes li:nth-child(4n+2) { --sx-c: var(--sx-c2); --sx-t: var(--sx-t2); --sx-p: var(--sx-p2); }
.nh-chiffres-cartes li:nth-child(4n+3) { --sx-c: var(--sx-c3); --sx-t: var(--sx-t3); --sx-p: var(--sx-p3); }
.nh-chiffres-cartes li:nth-child(4n+4) { --sx-c: var(--sx-c4); --sx-t: var(--sx-t4); --sx-p: var(--sx-p4); }
.nh-chiffres-cartes strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.3rem; font-family: var(--font-title); font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--sx-c); font-variant-numeric: tabular-nums; }
.nh-chiffres-cartes__pre { font-size: .7em; }
.nh-chiffres-cartes__unite { margin-left: 0.15rem; font-size: .5em; letter-spacing: 0; }
.nh-chiffres-cartes li > span { font-size: var(--text-sm); line-height: 1.45; color: var(--color-navy); }
@media (min-width: 768px) { .nh-chiffres-cartes li { padding: var(--space-md) var(--space-lg); } .nh-chiffres-cartes li > span { font-size: var(--text-base); } }
@media (min-width: 1024px) {
  .nh-france { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .nh-carte__pt, .nh-carte__depart { transition: none; }
  .nh-carte__dot::after { animation: none; display: none; }
}