/* =========================================================================
   MORWEIS CONSULTING — feuille de style partagée (site vitrine)
   v1.1 — identité visuelle turquoise/vert (voir README, section "v1.1").
   Remplace la dominante bleu marine v1.0 par une dominante vert profond
   dérivée du logo réel du cabinet (turquoise #1FB3AC, olive #6E9B37,
   noir quasi-pur #161616), or/ambre conservé comme unique couleur de
   bouton d'action par écran. Une teinte verte distincte identifie chacun
   des quatre départements D1-D4 (remplace la règle slide 8 réservant le
   vert au seul D3 — devenue sans objet, le vert étant la couleur de
   marque générale). Aucune dépendance externe (pas de CDN, pas de Google
   Fonts).
   ========================================================================= */

:root {
  /* --- Fond dominant (en-tête, pied de page, héros) --- */
  --brand-dark: #123B2E;
  --brand-dark-700: #163f30;   /* tiroir mobile */
  --brand-dark-600: #1c4c3a;   /* méga-menu mobile */

  /* --- Accent interactif (liens, états actifs, éléments interactifs) --- */
  --turquoise: #1FB3AC;        /* usage décoratif / grandes surfaces / larges textes en gras */
  --turquoise-dark: #127D74;   /* variante sombre, sûre en contraste AA pour le texte de lien */

  /* --- Titres / structure --- */
  --olive: #6E9B37;

  /* --- Or / ambre — RÉSERVÉ à l'unique bouton d'action par écran --- */
  --gold: #C89B2A;              /* fond du CTA uniquement — jamais en texte sur fond clair (2.5:1 sur blanc) */
  /* --gold-dark sert trois rôles distincts, chacun avec sa contrainte de
     contraste ; #856313 est la valeur la plus claire qui les satisfait tous
     les trois (v6, mesures WCAG recalculées — voir AUDIT-DESIGN.md § 6) :
       texte sur blanc (.eyebrow, .card-kicker, .mega-see, .required-mark) 5.54:1
       fond du bouton doré survolé, texte blanc dessus (.btn-gold:hover)      5.54:1
       texte sur --gold-tint (.badge-gold)                                    4.72:1
     L'ancienne valeur #a87f1e échouait sur les trois (3.67 / 3.67 / 3.13). */
  --gold-dark: #856313;
  --gold-tint: #f7ecd2;

  /* --- Neutres --- */
  --grey-bg: #F7FAFC;
  --grey-border: #dbe4ec;
  --ink: #161616;               /* texte courant — noir quasi-pur de la marque */
  --ink-muted: #51605A;
  --white: #ffffff;

  /* --- Texte clair sur fond vert profond (en-tête/pied de page) --- */
  --onDark-primary: #EAF6F1;
  --onDark-muted: #B9D9CE;
  --onDark-faint: #8FB3A3;

  /* --- Alerte (statut, non lié à la marque) --- */
  --danger-bg: #fdecec;
  --danger-border: #f0b8b8;
  --danger-ink: #7a1f1f;

  /* --- Teinte de département (task 3) — valeur par défaut hors pages D1-D4 --- */
  --dept-accent: var(--turquoise-dark);
  --dept-accent-text: #ffffff;
  --dept-accent-tint: var(--gold-tint);
  --dept-accent-tint-border: #ecd9a6;

  /* Typographie */
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rythme */
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(18, 59, 46, 0.10);
  --shadow-md: 0 6px 20px rgba(18, 59, 46, 0.16);
  --header-h: 72px;
  --max-width: 1180px;
  --measure: 75ch;

  --transition: 180ms ease;
}

/* =========================================================================
   TEINTE PAR DÉPARTEMENT (task 3) — remplace la réservation du vert à D3
   Chaque page D1-D4 porte une classe body.dept-dX qui redéfinit
   --dept-accent localement ; tous les composants réutilisables qui en
   dépendent (numéro de carte activité, frise de mission, porteur de
   l'expertise, encadré référentiel, cas anonymisé) en héritent sans
   sélecteur dédié par département.
   Les couleurs de texte (--dept-accent-text) sont choisies pour garantir
   un contraste AA ≥ 4,5:1 avec leur fond respectif (blanc pour D1, dont le
   vert forêt est assez sombre ; noir pour D2-D4, dont les teintes plus
   claires ne passeraient pas le contraste avec du texte blanc).
   ========================================================================= */
.dept-d1 {
  --dept-accent: #1F6E4A;
  --dept-accent-text: #ffffff;
  --dept-accent-tint: #E3F1EA;
  --dept-accent-tint-border: #bfe0cd;
}
.dept-d2 {
  --dept-accent: #1E8F86;
  --dept-accent-text: #000000;
  --dept-accent-tint: #E1F3F1;
  --dept-accent-tint-border: #bfe3df;
}
.dept-d3 {
  --dept-accent: #5CAE3C;
  --dept-accent-text: #000000;
  --dept-accent-tint: #EEF7E7;
  --dept-accent-tint-border: #cfe8bd;
}
.dept-d4 {
  --dept-accent: #6E9B37;
  --dept-accent-text: #000000;
  --dept-accent-tint: #F1F5E4;
  --dept-accent-tint-border: #d9e3bd;
}

/* ---------- Reset minimal ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; }
a { color: inherit; }
/* Anneau de focus à deux tons : visible aussi bien sur fond clair que sur
   le fond vert profond de l'en-tête/pied de page (voir README — un anneau
   turquoise-dark seul n'atteint pas 3:1 sur fond vert profond ; le liseré
   blanc interne garantit une frontière visible dans tous les cas). */
:focus-visible {
  outline: 3px solid var(--turquoise-dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.9);
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  padding-top: var(--header-h);
}

/* Titres : h1-h3 en vert olive (grande taille / gras — contraste AA grand
   texte respecté) ; h4, plus petit, reste en encre sombre car l'olive n'y
   atteint pas le seuil de contraste AA du texte normal (voir README). */
h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.25; font-weight: 700; }
h1, h2, h3 { color: var(--olive); }
h4 { color: var(--ink); }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { max-width: var(--measure); }
p.no-measure { max-width: none; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 56px 0; }
/* Réduit le vide entre le carrousel d'expertises et la section suivante
   (retour client v6 : "élève cette partie") — 56px + 56px de padding par
   défaut créait un blanc trop marqué autour des points de pagination. */
#expertises { padding-bottom: 16px; }
.section--tight { padding: 36px 0; }
.section--grey { background: var(--grey-bg); }
.section--navy { background: var(--brand-dark); color: var(--onDark-primary); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--navy a { color: var(--white); }
.section--navy .eyebrow { color: var(--gold); }

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}

.lede { color: var(--ink-muted); font-size: 1.05rem; margin-top: 12px; }
.section--navy .lede { color: var(--onDark-muted); }

/* ---------- Liens visuellement discrets ---------- */
.text-link {
  color: var(--turquoise-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.text-link:hover, .text-link:focus-visible { color: var(--olive); }
.section--navy .text-link { color: var(--gold); }
.section--navy .text-link:hover { color: var(--white); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brand-dark);
  color: var(--white);
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus { left: 10px; top: 10px; }

/* =========================================================================
   BOUTONS — règle non négociable : un seul bouton doré (CTA) par écran
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn-gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn-gold:hover, .btn-gold:focus-visible { background: var(--gold-dark); color: var(--white); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}
.section--navy .btn-outline, .hero .btn-outline { color: var(--white); }
.btn-outline:hover { background: rgba(18,59,46,0.06); }
.section--navy .btn-outline:hover, .hero .btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 8px 4px;
  text-decoration: underline;
}
.section--navy .btn-ghost, .hero .btn-ghost { color: var(--white); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn-block { width: 100%; justify-content: center; }

/* =========================================================================
   MARQUE — logo (task 1)
   Le logo réel (assets/logo.svg) porte un texte "CO2 Free" en noir
   quasi-pur et un wordmark en vert olive : ces couleurs supposent un fond
   clair. Un chip blanc arrondi est donc placé derrière le logo partout où
   il apparaît sur le fond vert profond de l'en-tête/pied de page, pour
   préserver sa lisibilité sans retoucher le fichier SVG fourni.
   ========================================================================= */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  padding: 6px 10px;
  border-radius: 12px;
  margin-right: auto;
  text-decoration: none;
  line-height: 0;
}
.logo-img { height: 40px; width: auto; display: block; }
.logo-img-header { height: 54px; width: auto; display: block; }
.footer-brand {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  padding: 10px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
}
.footer-brand .logo-img-stacked { height: 88px; width: auto; display: block; }

/* =========================================================================
   EN-TÊTE FIXE
   ========================================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  /* Éclairci (retour client v3) : même vert que le hero d'accueil, cohérent
     avec lui. L'indicateur de page/langue active est passé du turquoise
     (4.79:1 sur l'ancien fond, déjà limite — 2.49:1 sur celui-ci, non
     conforme) à blanc + soulignement, pour rester lisible sans dépendre
     d'une teinte fragile. */
  background: #1B6B4E;
  color: var(--white);
  z-index: 100;
  box-shadow: var(--shadow-md);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius);
  color: var(--white);
  padding: 8px 10px;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  color: var(--onDark-primary);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 600;
  border-radius: var(--radius);
  background: transparent;
  border: none;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--white); background: rgba(255,255,255,0.08); }
/* Blanc plutôt que turquoise (v6) : sur le fond d'en-tête #1B6B4E, le
   turquoise ne donne que 2.49:1. La v3 avait déjà opéré cette correction sur
   l'indicateur de page active ci-dessous, mais l'avait oubliée sur
   l'indicateur d'état ouvert du méga-menu — même fond, même problème. Le
   soulignement dessiné (§ v5) prend le relais comme marqueur d'état. */
.nav-link[aria-expanded="true"] { color: var(--white); }
.nav-link[aria-current="page"] { color: var(--white); font-weight: 700; }
.nav-link .chevron { width: 12px; height: 12px; transition: transform var(--transition); }
.nav-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.nav-extra {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 8px;
}
/* Nav principale centrée sur la pleine largeur de l'en-tête : .nav-list est
   positionnée en absolu par rapport à .header-inner, donc son centre
   correspond au centre réel de l'en-tête, indépendamment du logo à gauche
   et de .nav-extra (CTA doré + langue) à droite (ancrée via marge
   automatique). Redevenu possible après le raccourcissement des libellés
   "Decarbonation"/"Eco-construction" (le précédent essai, avec les
   libellés longs "Carbone & conformité"/"Conseil industriel & bâtiment",
   faisait chevaucher "Contact" et le CTA dès ~1200px). Ignoré en dessous
   de 900px : le tiroir mobile reste en colonne (voir NAVIGATION MOBILE
   ci-dessous). */
@media (min-width: 900px) {
  .header-inner { position: relative; }
  .site-nav { flex: 1 1 auto; }
  /* Répartition (retour client "Amélioration 5") : les 5 liens occupent
     toute la largeur disponible entre le logo et le bloc CTA/langue, plutôt
     que de rester regroupés au centre de l'en-tête. */
  .nav-list {
    flex: 1 1 auto;
    justify-content: space-between;
  }
  .nav-extra { margin-left: 24px; }
  .site-header .nav-link { padding: 10px 6px; font-size: 0.9rem; }
  .site-header .nav-list { gap: 4px; }
  .site-header .nav-extra { gap: 8px; }
  .site-header .nav-cta { padding: 9px 14px; font-size: 0.82rem; white-space: nowrap; }
}
.lang-switch { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 700; }
.lang-switch button {
  background: transparent;
  border: none;
  color: var(--white);
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.lang-switch button[aria-current="true"] { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.lang-switch button[disabled] {
  color: rgba(255,255,255,0.35);
  cursor: not-allowed;
  position: relative;
}
.lang-switch .lang-sep { color: rgba(255,255,255,0.4); }

/* Mega-menu */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, 92vw);
  margin-top: 6px;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 22px;
  display: none;
  z-index: 50;
}
.mega-menu.is-open { display: block; }
.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mega-col h3 { font-size: 1rem; margin-bottom: 10px; color: var(--turquoise-dark); }
.mega-col ul { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mega-col a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 3px 0;
  display: block;
  border-radius: 4px;
}
.mega-col a:hover, .mega-col a:focus-visible { color: var(--turquoise-dark); text-decoration: underline; }
.mega-col .mega-see { color: var(--gold-dark); font-weight: 700; font-size: 0.88rem; }

/* =========================================================================
   NAVIGATION MOBILE
   ========================================================================= */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    background: var(--brand-dark-700);
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-md);
  }
  .site-nav.is-open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; height: auto; gap: 2px; }
  .nav-item { height: auto; }
  .nav-link { width: 100%; justify-content: space-between; }
  .mega-menu {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 4px;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.12);
    background: var(--brand-dark-600);
    color: var(--white);
  }
  .mega-col a { color: var(--onDark-muted); }
  .mega-col a:hover { color: var(--white); }
  .mega-col h3 { color: var(--white); }
  .mega-grid { grid-template-columns: 1fr; gap: 14px; }
  .nav-extra { flex-direction: column; align-items: flex-start; margin-left: 0; margin-top: 14px; gap: 10px; }
  .btn-gold.nav-cta { width: 100%; justify-content: center; }
}

/* Overlay derrière le tiroir mobile */
.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 20, 14, 0.5);
  z-index: 90;
}
.nav-scrim.is-open { display: block; }

/* =========================================================================
   COMPOSANTS RÉUTILISABLES
   ========================================================================= */

/* --- Bloc chiffre --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-item { text-align: left; }
.stat-number {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--turquoise);
  font-weight: 700;
  line-height: 1;
}
.stat-label { color: var(--ink-muted); font-size: 0.92rem; margin-top: 6px; }
.section--navy .stat-label { color: var(--onDark-muted); }

/* --- Cartes égales (anciennement grille d'expertises accueil ; conservées
   pour compatibilité, le bloc 03 de l'accueil utilise désormais le
   carrousel .carousel ci-dessous) --- */
.card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .card-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .card-grid-3 { grid-template-columns: 1fr; } }
.expertise-card {
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.expertise-card:hover, .expertise-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--turquoise);
}
.expertise-card .card-kicker { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold-dark); }
.expertise-card ul { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-size: 0.9rem; color: var(--ink-muted); }
.expertise-card a.card-link { margin-top: auto; font-weight: 700; color: var(--turquoise-dark); text-decoration: none; }
.expertise-card a.card-link:hover { text-decoration: underline; }

/* =========================================================================
   CARROUSEL D'EXPERTISES (task 4 — remplace la grille statique du bloc 03
   de l'accueil). Chaque diapositive porte sa propre classe .dept-dX : la
   couleur de fond et de texte sont donc celles du département, quelle que
   soit la page (l'accueil n'a pas de classe de département au niveau
   body). Voir README pour la justification d'usage (navigation qualifiante,
   pas décoration) et le détail de l'accessibilité implémentée.
   ========================================================================= */
.carousel {
  position: relative;
  border-radius: var(--radius-lg);
}
.carousel:focus-visible { outline-offset: 4px; }
.carousel-viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.carousel-track {
  display: flex;
  transition: transform 420ms ease;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.carousel-slide-link {
  display: block;
  padding: 44px 40px;
  min-height: 300px;
  background: var(--dept-accent);
  color: var(--dept-accent-text);
  text-decoration: none;
  position: relative;
}
.carousel-slide-link:hover, .carousel-slide-link:focus-visible {
  filter: brightness(1.06);
}
.carousel-slide-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  margin-bottom: 16px;
}
.carousel-slide h3 {
  color: var(--dept-accent-text);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  max-width: 34ch;
  margin-bottom: 14px;
}
.carousel-slide-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; font-size: 0.95rem; max-width: 40ch; }
.carousel-slide-list li { padding-left: 18px; position: relative; }
.carousel-slide-list li::before { content: "—"; position: absolute; left: 0; }
.carousel-slide-cta { font-weight: 700; text-decoration: underline; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--brand-dark);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}
.carousel-arrow:hover { background: var(--white); }
.carousel-arrow svg { width: 22px; height: 22px; }
.carousel-prev { left: 14px; }
.carousel-next { right: 14px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.carousel-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--grey-border);
  border: none;
  padding: 0;
  cursor: pointer;
}
.carousel-dot[aria-current="true"] { background: var(--turquoise-dark); }

@media (max-width: 640px) {
  .carousel-slide-link { padding: 34px 24px 30px; min-height: 340px; }
  .carousel-arrow { width: 38px; height: 38px; }
}

/* --- Carte activité (pages D1-D4) --- */
.activity-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--grey-border);
  border-radius: var(--radius);
  scroll-margin-top: calc(var(--header-h) + 16px);
  transition: background var(--transition);
}
.activity-card:first-of-type { border-top: none; }
.activity-card:hover { background: var(--dept-accent-tint); }

/* --- Bouton "Explication" (vidéo courte par activité) --- */
.activity-explain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--dept-accent);
  background: var(--dept-accent);
  color: var(--dept-accent-text);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.activity-explain:hover { transform: translateY(-1px); filter: brightness(1.05); }
.activity-explain:focus-visible { outline: 2px solid var(--dept-accent); outline-offset: 2px; }
.activity-explain:disabled {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--grey-border);
  cursor: not-allowed;
}
.activity-explain:disabled:hover { transform: none; filter: none; }
.activity-number {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--dept-accent);
  color: var(--dept-accent-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem;
}
.activity-body h3 { margin-bottom: 6px; }
.activity-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.activity-meta dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); font-weight: 700; }
.activity-meta dd { font-size: 0.92rem; color: var(--ink); margin-top: 2px; }

/* --- Encadré référentiel (fond teinté par département, doré par défaut) --- */
.referentiel-box {
  background: var(--dept-accent-tint);
  border: 1px solid var(--dept-accent-tint-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.referentiel-box h3 { margin-bottom: 8px; }
.referentiel-box ul { display: flex; flex-direction: column; gap: 6px; }
.referentiel-box li { font-size: 0.92rem; }
.referentiel-box li strong { color: var(--ink); }

/* --- Frise de mission --- */
.mission-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.mission-step { position: relative; padding-top: 10px; }
.mission-step-index {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--dept-accent);
  color: var(--dept-accent-text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-serif);
  margin-bottom: 10px;
}
.mission-step h4 { font-size: 0.98rem; margin-bottom: 4px; }
.mission-step p { font-size: 0.88rem; color: var(--ink-muted); }
.mission-timeline .mission-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 27px; left: calc(100% + 4px);
  width: calc(14px * 2 - 4px);
  height: 2px;
  background: var(--grey-border);
  display: none;
}
@media (min-width: 900px) {
  .mission-timeline .mission-step:not(:last-child)::after { display: block; }
}

/* --- Bandeau réglementaire --- */
.reg-banner {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-left: 4px solid var(--turquoise);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.reg-banner + .reg-banner { margin-top: 12px; }
.reg-banner .reg-date { font-family: var(--font-serif); font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.reg-banner .reg-body h4 { font-size: 1rem; margin-bottom: 3px; }
.reg-banner .reg-body p { font-size: 0.88rem; color: var(--ink-muted); }
.reg-banner .reg-link { font-weight: 700; color: var(--turquoise-dark); text-decoration: none; white-space: nowrap; }
.reg-banner .reg-link:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .reg-banner { grid-template-columns: 1fr; }
}

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.badge-vacant { background: var(--danger-bg); color: var(--danger-ink); border: 1px solid var(--danger-border); }
.badge-info { background: var(--grey-bg); color: var(--ink); border: 1px solid var(--grey-border); }
.badge-gold { background: var(--gold-tint); color: var(--gold-dark); border: 1px solid #ecd9a6; }
.badge-dept { background: var(--dept-accent); color: var(--dept-accent-text); border: 1px solid transparent; }

/* --- Formulaire de qualification --- */
.qualification-form {
  background: var(--grey-bg);
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.form-field .hint { font-size: 0.78rem; color: var(--ink-muted); }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--grey-border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible { border-color: var(--turquoise-dark); }
.form-field textarea { resize: vertical; min-height: 90px; }
.required-mark { color: var(--gold-dark); }
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
}
.form-check input { margin-top: 3px; }
.form-actions { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-message {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--gold-tint);
  border: 1px solid #ecd9a6;
  font-size: 0.9rem;
  display: none;
}
.form-message.is-visible { display: block; }
.form-message.is-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-ink); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.site-footer {
  background: var(--brand-dark);
  color: var(--onDark-muted);
  padding: 48px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.footer-col h3 { color: var(--white); font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; font-family: var(--font-sans); }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: var(--onDark-muted); text-decoration: none; font-size: 0.9rem; }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--turquoise); text-decoration: underline; }
.footer-legend { font-size: 0.78rem; color: var(--onDark-faint); margin-top: 4px; }
.footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--onDark-faint);
}
.footer-note {
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--onDark-faint);
  max-width: none;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid-4 { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .mission-timeline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .card-grid-4 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .mission-timeline { grid-template-columns: 1fr; }
  .activity-card { grid-template-columns: 1fr; }
  .activity-number { margin-bottom: 6px; }
  .activity-meta { grid-template-columns: 1fr; }
  .activity-explain { margin-top: 12px; width: 100%; }
}

/* =========================================================================
   MODALE VIDÉO "EXPLICATION"
   ========================================================================= */
body.no-scroll { overflow: hidden; }
.explain-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 20, 16, 0.92);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.explain-modal.is-open { display: flex; }
.explain-modal-inner {
  position: relative;
  width: min(1000px, 100%);
}
.explain-modal video {
  display: block;
  width: 100%;
  max-height: 82vh;
  border-radius: var(--radius-lg);
  background: #000;
}
.explain-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.explain-modal-close:hover, .explain-modal-close:focus-visible { background: rgba(255,255,255,0.18); }
.explain-modal-close svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .explain-modal-close { top: -40px; }
}

/* =========================================================================
   HÉRO / bandeaux
   ========================================================================= */
.hero {
  background: linear-gradient(160deg, var(--brand-dark) 0%, #1a4d3c 70%, var(--brand-dark) 100%);
  color: var(--white);
  padding: 76px 0 56px;
  position: relative;
  overflow: hidden;
}
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
.hero h1 { color: var(--white); }
.hero .lede { color: var(--onDark-primary); max-width: 46ch; }
/* L'eyebrow héritait de --gold-dark, prévu pour du texte sur fond blanc :
   sur le dégradé sombre du bandeau il ne donnait que 3.38:1 au point le plus
   sombre et 2.63:1 au point le plus clair (#1a4d3c) — échec avant même
   l'assombrissement de --gold-dark en v6. Ni --gold (3.77:1) ni le turquoise
   (3.73:1) ne passent le seuil sur ce dégradé ; le blanc atténué, déjà retenu
   pour le même motif sur le slider d'accueil, donne 6.39:1 au pire point. */
.hero .eyebrow { color: var(--onDark-muted); }
.hero-cta { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.hero-graphic { display: flex; align-items: center; justify-content: center; }
.hero-breadcrumb { font-size: 0.82rem; color: var(--onDark-muted); margin-bottom: 14px; }
.hero-breadcrumb a { color: var(--onDark-muted); text-decoration: none; }
.hero-breadcrumb a:hover { color: var(--white); text-decoration: underline; }
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-graphic { order: -1; max-width: 260px; margin: 0 auto 10px; }
  .hero-graphic.hero-photo { max-width: 100%; }
}

/* Graphique géométrique décoratif inline (schémas industrie/énergie) */
.geo-panel svg { width: 100%; height: auto; }

/* Photographie réelle en bandeau d'accroche — remplace le schéma
   géométrique sur les pages qui disposent d'une image propriétaire
   (dossier assets/img/, fourni par le client). */
.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Variante pour un visuel détouré sur fond clair (ex. D4, sans photo de bâtiment
   disponible) : on affiche l'image en contenu plutôt qu'en fond plein cadre. */
.hero-photo--graphic { background: var(--white); display: flex; align-items: center; justify-content: center; padding: 24px; }
.hero-photo--graphic img { width: auto; height: auto; max-width: 80%; max-height: 80%; object-fit: contain; }

/* =========================================================================
   ANIMATIONS DE RÉVÉLATION AU SCROLL — discrètes
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   SECTIONS GÉNÉRIQUES DE CONTENU
   ========================================================================= */
.section-head { max-width: 62ch; margin-bottom: 32px; }
.section-head--wide { max-width: none; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.list-check { display: flex; flex-direction: column; gap: 10px; }
.list-check li { display: flex; gap: 10px; align-items: flex-start; }
.list-check svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--turquoise-dark); }

.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { background: var(--grey-bg); border: 1px solid var(--grey-border); border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; }

/* Cas / preuve */
.case-box {
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  border-top: 4px solid var(--dept-accent);
}
.case-box .case-tag { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); font-weight: 700; }
.case-box dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin-top: 14px; }
.case-box dt { font-weight: 700; color: var(--ink); font-size: 0.88rem; }
.case-box dd { font-size: 0.92rem; }
@media (max-width: 600px) { .case-box dl { grid-template-columns: 1fr; } }

/* Porteur de l'expertise */
.owner-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--grey-bg);
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.owner-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--dept-accent); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--dept-accent-text);
}
.owner-box h3 { margin-bottom: 4px; }
.owner-box p { font-size: 0.92rem; color: var(--ink-muted); }

/* =========================================================================
   CALCULATEUR
   ========================================================================= */
.calc-shell {
  max-width: 880px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px;
}
.calc-disclaimer {
  background: var(--gold-tint);
  border: 1px solid #ecd9a6;
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.9rem;
  margin-bottom: 24px;
}
.calc-progress { margin-bottom: 28px; }
.calc-progress-track {
  height: 8px;
  background: var(--grey-bg);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--grey-border);
}
.calc-progress-fill {
  height: 100%;
  background: var(--turquoise);
  border-radius: 999px;
  transition: width 320ms ease;
  width: 20%;
}
.calc-steps-labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.76rem; color: var(--ink-muted); }
.calc-steps-labels li { flex: 1; text-align: center; }
.calc-steps-labels li:first-child { text-align: left; }
.calc-steps-labels li:last-child { text-align: right; }
.calc-steps-labels li[aria-current="step"] { color: var(--turquoise-dark); font-weight: 700; }

.calc-panel { display: none; }
.calc-panel.is-active { display: block; }
.calc-panel h2 { margin-bottom: 6px; }
.calc-panel > .lede { margin-bottom: 22px; }

.calc-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field.full { grid-column: 1 / -1; }
.calc-field label { font-weight: 700; font-size: 0.88rem; color: var(--ink); }
.calc-field .unit-hint { font-size: 0.76rem; color: var(--ink-muted); }
.calc-field input, .calc-field select {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--grey-border);
  border-radius: var(--radius);
}
.calc-nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 12px; }
.calc-partial {
  margin-top: 20px;
  background: var(--grey-bg);
  border: 1px dashed var(--grey-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.88rem;
  display: none;
}
.calc-partial.is-visible { display: block; }

.result-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 22px;
}
.result-total .value { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--turquoise-dark); font-weight: 700; }
.result-total .unit { color: var(--ink-muted); }

.result-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 26px; margin-bottom: 26px; }
@media (max-width: 760px) { .result-grid { grid-template-columns: 1fr; } }

.donut-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.donut-legend .swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

.result-postes { display: flex; flex-direction: column; gap: 12px; }
.poste-item { border: 1px solid var(--grey-border); border-radius: var(--radius); padding: 12px 14px; }
.poste-item .poste-head { display: flex; justify-content: space-between; font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.poste-item .poste-source { font-size: 0.78rem; color: var(--ink-muted); margin-top: 4px; }

.intensity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.intensity-item { background: var(--grey-bg); border: 1px solid var(--grey-border); border-radius: var(--radius); padding: 16px; }
.intensity-item .num { font-family: var(--font-serif); font-size: 1.5rem; color: var(--olive); font-weight: 700; }
.intensity-item .lbl { font-size: 0.82rem; color: var(--ink-muted); margin-top: 2px; }

.levers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
@media (max-width: 760px) { .levers-grid { grid-template-columns: 1fr; } }
.lever-card { border: 1px solid var(--grey-border); border-top: 3px solid var(--turquoise); border-radius: var(--radius); padding: 16px; }
.lever-card h4 { font-size: 0.96rem; margin-bottom: 6px; }
.lever-card p { font-size: 0.86rem; color: var(--ink-muted); }
.lever-card a { font-size: 0.84rem; font-weight: 700; color: var(--turquoise-dark); text-decoration: none; }

.routing-message {
  background: var(--brand-dark);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.routing-message strong { color: var(--gold); }

/* =========================================================================
   PAGE CONTACT — ONGLETS
   ========================================================================= */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--grey-border); margin-bottom: 24px; }
.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 12px 6px;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
}
/* Le liseré d'onglet actif est le seul marqueur visuel de l'état sélectionné :
   c'est un composant d'interface non textuel, soumis au seuil de 3:1. Le
   turquoise n'atteignait que 2.59:1 sur blanc (v6). */
.tab-btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--turquoise-dark); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: 18px; }
.contact-info .info-item { display: flex; gap: 12px; align-items: flex-start; }
.contact-info .info-item svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--turquoise-dark); margin-top: 2px; }
.map-placeholder {
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-border);
  overflow: hidden;
}
.map-embed {
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-border);
  overflow: hidden;
}
.map-embed iframe { display: block; width: 100%; height: 320px; }
.map-embed .reg-link { display: inline-block; padding: 10px 16px; }

/* =========================================================================
   PAGES DE SERVICE (mentions, confidentialité, etc.)
   ========================================================================= */
.service-page .section { padding-top: 40px; }
.tbd-box {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-ink);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.9rem;
  margin-bottom: 22px;
}
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 760px) { .sitemap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .sitemap-grid { grid-template-columns: 1fr; } }
.sitemap-grid h3 { margin-bottom: 10px; font-size: 1rem; }
.sitemap-grid ul { display: flex; flex-direction: column; gap: 6px; }
.sitemap-grid a { color: var(--ink-muted); text-decoration: none; font-size: 0.92rem; }
.sitemap-grid a:hover { color: var(--turquoise-dark); text-decoration: underline; }

.error-404 { text-align: center; padding: 90px 0; }
/* Turquoise-dark plutôt que turquoise : le chiffre « 404 », bien qu'en grand
   corps, n'atteignait que 2.59:1 sur blanc — sous le seuil de 3:1 exigé même
   pour du grand texte (v6). #127D74 le porte à 4.99:1. */
.error-404 .code { font-family: var(--font-serif); font-size: 5rem; color: var(--turquoise-dark); line-height: 1; font-variant-numeric: tabular-nums; }

/* Publications (stub) */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  background: var(--grey-bg);
  border: 1px dashed var(--grey-border);
  border-radius: var(--radius-lg);
}
.empty-state svg { width: 48px; height: 48px; color: var(--turquoise-dark); margin: 0 auto 14px; }

/* Génériques */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: 10px; }
.mt-md { margin-top: 20px; }
.mt-lg { margin-top: 40px; }

/* =========================================================================
   REFONTE VISUELLE — v3 « design moderne, images dynamiques »
   ------------------------------------------------------------------------
   Commande client : « refaire le site avec un design moderne et des
   images dynamiques ». Cette section n'introduit ni nouvelle couleur de
   marque, ni image supplémentaire : elle module l'exécution visuelle
   (rythme, profondeur, mouvement) de l'identité déjà validée et des cinq
   photographies déjà fournies par le client (assets/img/), plus les SVG
   décoratifs déjà en place (icônes de liste, anneau du calculateur).
   Tout mouvement respecte prefers-reduced-motion (voir règle globale en
   tête de fichier, qui ramène toute transition/animation à ~0 pour les
   utilisateurs concernés) ; les effets pilotés par JavaScript (parallax
   léger) vérifient en plus explicitement la préférence avant de
   s'attacher, car une transformation posée en style inline par script
   n'est pas couverte par la règle CSS globale. Voir site-web/README.md,
   section « v3 — refonte visuelle », pour la justification détaillée et
   les vérifications de contraste effectuées.
   ========================================================================= */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-base: 320ms;
  --dur-slow: 620ms;
}

/* ---------- En-tête : effet verre au défilement ---------- */
.site-header {
  transition: background-color var(--dur-base) ease, box-shadow var(--dur-base) ease, backdrop-filter var(--dur-base) ease;
}
.site-header.is-scrolled {
  background: rgba(27, 107, 78, 0.94);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 10px 30px rgba(8, 28, 22, 0.28);
}
/* Le fond reste opaque à ≥ 94% d'opacité : le contraste du texte clair de
   navigation (déjà vérifié AA sur --brand-dark) n'est pas dégradé par
   l'effet de verre, qui n'éclaircit pas la couleur de fond. */

/* ---------- Typographie : plus de présence sur les titres héros ---------- */
.hero h1 { font-size: clamp(2.05rem, 4vw, 3.05rem); letter-spacing: -0.01em; }

/* =========================================================================
   HÉROS — v6 : retrait du mouvement ambiant
   ------------------------------------------------------------------------
   Trois effets décoratifs continus ont été retirés ici (voir AUDIT-DESIGN.md
   § 3 et README § v6) :
     • fond « aurora » (.hero::before, dégradés radiaux flous animés 24 s).
       Il tournait notamment derrière la vidéo héros de l'accueil, où il
       était intégralement masqué : coût de composition payé en continu pour
       un effet qu'aucun visiteur ne pouvait voir.
     • chevron de défilement pulsé (.hero::after, 2,2 s en boucle infinie).
       Un signal qui ne s'arrête jamais cesse d'être un signal.
     • Ken Burns (zoom lent en boucle sur les photographies héros).
   Le bandeau conserve son dégradé de fond (déclaré sur .hero) et toute sa
   hiérarchie typographique : c'est la direction « rapport d'ingénieur » —
   le mouvement sert la compréhension ou n'existe pas.
   ========================================================================= */
.hero { isolation: isolate; }

/* Photographie héros : cadre et dégradé de profondeur conservés (statiques). */
.hero-photo {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: box-shadow var(--dur-base) ease;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(195deg, rgba(18, 59, 46, 0) 55%, rgba(9, 31, 24, 0.5) 100%);
  pointer-events: none;
}

/* =========================================================================
   MICRO-INTERACTIONS — boutons, cartes, badges
   ========================================================================= */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), background var(--transition), color var(--transition), box-shadow var(--dur-base) var(--ease-out);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 640ms ease;
  pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(120%); }
.btn:hover { box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(0.98); }

.expertise-card, .case-box, .referentiel-box, .owner-box, .reg-banner, .lever-card, .intensity-item, .poste-item {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.case-box:hover, .lever-card:hover, .reg-banner:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.activity-card { transition: background var(--dur-base) ease, transform var(--dur-base) var(--ease-out); }
.activity-card:hover { transform: translateX(2px); }

/* Pulsation infinie du badge « poste à pourvoir » retirée en v6. L'information
   est réelle et importante (poste D4 vacant, priorité 1), mais une pulsation
   qui ne s'arrête jamais devient un tic visuel plutôt qu'un signal — et sur
   une page d'expertise consultée plusieurs minutes, elle travaille contre le
   sérieux qu'elle est censée souligner. Le badge garde son traitement de
   couleur d'alerte, qui suffit à le distinguer. */

/* Carrousel : sweep lumineux discret au survol/actif d'une diapositive,
   agrandissement léger des points actifs — même palette par département,
   aucune nouvelle couleur. */
.carousel-slide-link { overflow: hidden; }
.carousel-slide-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.16) 42%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 700ms ease;
  pointer-events: none;
}
.carousel-slide-link:hover::before, .carousel-slide-link:focus-visible::before { transform: translateX(130%); }
.carousel-dot { transition: transform var(--dur-base) var(--ease-out), background var(--transition); }
.carousel-dot[aria-current="true"] { transform: scale(1.25); }
.carousel-arrow { transition: transform var(--dur-base) var(--ease-out), background var(--transition); }
.carousel-arrow:hover { transform: translateY(-50%) scale(1.08); }

/* =========================================================================
   RÉVÉLATION AU DÉFILEMENT — variante « étagée » pour les grilles
   Les grilles listées ci-dessous n'ont pas de classe .reveal par élément
   (contrairement aux cartes .activity-card, déjà révélées une à une par
   l'observateur JS existant) : quand leur conteneur .reveal devient
   visible, chaque enfant s'anime avec un décalage croissant, en pur CSS,
   sans dépendance JS supplémentaire.
   ========================================================================= */
.reveal .mission-timeline > *,
.reveal .levers-grid > *,
.reveal .stat-grid > *,
.reveal .pill-list > *,
.reveal .sitemap-grid > *,
.reveal .card-grid-3 > *,
.reveal .card-grid-4 > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.reveal.is-visible .mission-timeline > *,
.reveal.is-visible .levers-grid > *,
.reveal.is-visible .stat-grid > *,
.reveal.is-visible .pill-list > *,
.reveal.is-visible .sitemap-grid > *,
.reveal.is-visible .card-grid-3 > *,
.reveal.is-visible .card-grid-4 > * {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal .mission-timeline > *, .reveal .levers-grid > *, .reveal .stat-grid > *,
  .reveal .pill-list > *, .reveal .sitemap-grid > *, .reveal .card-grid-3 > *, .reveal .card-grid-4 > * {
    opacity: 1; transform: none;
  }
}
/* Décalage croissant — 9 positions couvrent toutes les grilles du site
   (le plus grand groupe, .footer-col, n'est pas concerné : le pied de
   page n'est jamais enveloppé dans .reveal). */
.reveal.is-visible :is(.mission-timeline, .levers-grid, .stat-grid, .pill-list, .sitemap-grid, .card-grid-3, .card-grid-4) > *:nth-child(1) { transition-delay: 0ms; }
.reveal.is-visible :is(.mission-timeline, .levers-grid, .stat-grid, .pill-list, .sitemap-grid, .card-grid-3, .card-grid-4) > *:nth-child(2) { transition-delay: 70ms; }
.reveal.is-visible :is(.mission-timeline, .levers-grid, .stat-grid, .pill-list, .sitemap-grid, .card-grid-3, .card-grid-4) > *:nth-child(3) { transition-delay: 140ms; }
.reveal.is-visible :is(.mission-timeline, .levers-grid, .stat-grid, .pill-list, .sitemap-grid, .card-grid-3, .card-grid-4) > *:nth-child(4) { transition-delay: 210ms; }
.reveal.is-visible :is(.mission-timeline, .levers-grid, .stat-grid, .pill-list, .sitemap-grid, .card-grid-3, .card-grid-4) > *:nth-child(5) { transition-delay: 280ms; }
.reveal.is-visible :is(.mission-timeline, .levers-grid, .stat-grid, .pill-list, .sitemap-grid, .card-grid-3, .card-grid-4) > *:nth-child(6) { transition-delay: 350ms; }
.reveal.is-visible :is(.mission-timeline, .levers-grid, .stat-grid, .pill-list, .sitemap-grid, .card-grid-3, .card-grid-4) > *:nth-child(7) { transition-delay: 420ms; }
.reveal.is-visible :is(.mission-timeline, .levers-grid, .stat-grid, .pill-list, .sitemap-grid, .card-grid-3, .card-grid-4) > *:nth-child(8) { transition-delay: 490ms; }
.reveal.is-visible :is(.mission-timeline, .levers-grid, .stat-grid, .pill-list, .sitemap-grid, .card-grid-3, .card-grid-4) > *:nth-child(9) { transition-delay: 560ms; }

/* =========================================================================
   PIED DE PAGE — liseré dégradé, liens animés
   ========================================================================= */
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--turquoise) 0%, var(--gold) 50%, var(--olive) 100%);
  opacity: 0.85;
}
.footer-col a { position: relative; display: inline-block; transition: color var(--transition); }
.footer-col a:hover, .footer-col a:focus-visible { text-decoration: none; }
.footer-col a:not([target="_blank"])::after {
  content: "";
  display: block;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width var(--dur-base) var(--ease-out);
}
.footer-col a:hover::after, .footer-col a:focus-visible::after { width: 100%; }

/* =========================================================================
   PAGE HEAD — bandeau d'en-tête léger pour les pages de service
   (mentions légales, confidentialité, cookies, plan du site) : remplace
   les styles inline hérités de la v1 par un composant partagé, cohérent
   avec la nouvelle direction visuelle, sans changer le contenu.
   ========================================================================= */
.page-head {
  background: linear-gradient(180deg, var(--grey-bg) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--grey-border);
  padding: 40px 0 30px;
}
.page-head .hero-breadcrumb { color: var(--ink-muted); margin-bottom: 12px; }
.page-head .hero-breadcrumb a { color: var(--ink-muted); }
.page-head .hero-breadcrumb a:hover { color: var(--turquoise-dark); }
.page-head h1 { margin-bottom: 0; }
.page-head + .section { padding-top: 40px; }

/* =========================================================================
   BANDEAU HÉROS COMPACT (contact, calculateur, veille réglementaire)
   Remplace les styles inline ponctuels de la v2 par des classes nommées.
   ========================================================================= */
.hero--compact { padding-bottom: 36px; }
.hero--single .container { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .hero-photo { will-change: auto; }
}

/* =========================================================================
   REFONTE VISUELLE — v4 « design premier ordre, images dynamiques »
   ------------------------------------------------------------------------
   Commande du commanditaire (Direction), en une passe au-dessus de la v3 :
   ajout de six photographies secondaires libres de droits (Wikimedia
   Commons — voir site-web/README.md, section "v4", pour la table
   image/page/source/licence/date de consultation) et un affinement
   éditorial qui reste dans les limites du site statique sans framework ni
   étape de build. Aucune couleur de marque ni teinte de département n'est
   modifiée. Le point d'arrêt "campagne photo propriétaire" (photographies
   du cabinet lui-même) n'est pas levé par cet ajout : ces six images sont
   des visuels d'illustration générique, pas des photos du cabinet ou de
   ses clients — voir README.
   ========================================================================= */

/* ---------- Accent éditorial sous les titres de section ----------
   Un trait dégradé, teinté par département (--dept-accent, turquoise par
   défaut hors pages D1-D4), sous chaque h2 de .section-head : renforce la
   hiérarchie typographique sans dépendre d'une nouvelle police. */
.section-head h2 {
  position: relative;
  padding-bottom: 16px;
}
.section-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--dept-accent) 0%, transparent 100%);
}

/* ---------- Micro-interactions supplémentaires, coût de maintenance nul ---------- */
.pill {
  transition: background var(--transition), border-color var(--transition), transform var(--dur-base) var(--ease-out);
}
.pill:hover {
  background: var(--dept-accent-tint);
  border-color: var(--dept-accent-tint-border);
  transform: translateY(-1px);
}
.mission-step-index { transition: transform var(--dur-base) var(--ease-out); }
.mission-step:hover .mission-step-index { transform: scale(1.08); }

/* =========================================================================
   SECTION ÉDITORIALE — image secondaire + texte, alternée
   Compose les six nouvelles photographies avec un bloc de texte contextuel,
   dans un rythme éditorial "image / texte" alterné d'une page à l'autre
   (.editorial--reverse inverse l'ordre). Le cadre de la photo porte un
   liseré supérieur à la couleur du département (--dept-accent), au même
   titre que .case-box, pour rattacher visuellement l'illustration à
   l'expertise concernée.
   ========================================================================= */
.editorial {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.editorial-figure { order: 1; margin: 0; }
.editorial-text { order: 2; }
.editorial--reverse .editorial-figure { order: 2; }
.editorial--reverse .editorial-text { order: 1; }
/* Remonte le bloc de texte au lieu de le centrer verticalement sur la photo —
   utile quand le texte est court par rapport à une image haute (v7). */
.editorial--top { align-items: start; }
@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial-figure, .editorial--reverse .editorial-figure { order: -1; }
  .editorial-text, .editorial--reverse .editorial-text { order: 2; }
}
.editorial-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--dept-accent);
  background: var(--white);
}
.editorial-media { aspect-ratio: 4 / 3; overflow: hidden; }
.editorial-media img,
.editorial-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease-out);
}
.editorial-figure:hover .editorial-media img,
.editorial-figure:focus-within .editorial-media img,
.editorial-figure:hover .editorial-media video,
.editorial-figure:focus-within .editorial-media video { transform: scale(1.045); }

/* Zoom ambiant continu retiré en v6. Il se cumulait avec celui du bandeau
   héros : sur une page D1-D4, deux images distinctes zoomaient en
   permanence à l'écran sans qu'aucune ne porte d'information. Le zoom au
   survol/focus posé ci-dessus est conservé — celui-là répond à une
   intention de l'utilisateur, il est signifiant. .img-dynamic reste dans le
   HTML des huit pages concernées (aucune modification de balisage) mais
   n'ajoute plus de mouvement au repos. */
.editorial-media img.img-dynamic { transform-origin: 55% 45%; }

/* Animation 3D du pictogramme CO2 du calculateur (retour client
   "Amélioration 9" : "cette image n'est pas animée en 3D"). Portée
   volontairement limitée à ce seul visuel décoratif (pas une photo
   documentaire) — contrairement au zoom ambiant générique retiré en v6
   ci-dessus, celui-ci répond à une demande explicite sur cet asset précis.
   Appliqué à un wrapper, pas à l'image elle-même, pour ne pas entrer en
   conflit avec le zoom au survol défini plus haut. */
.img-float3d {
  width: 100%;
  height: 100%;
  perspective: 900px;
}
.img-float3d img {
  animation: img-float3d-spin 7s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes img-float3d-spin {
  0%, 100% { transform: rotateY(-10deg) rotateX(3deg) translateY(0); }
  50% { transform: rotateY(10deg) rotateX(-3deg) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .img-float3d img { animation: none; }
}
.editorial-caption {
  padding: 14px 18px;
  font-size: 0.82rem;
  color: var(--ink-muted);
  border-top: 1px solid var(--grey-border);
}
.editorial-caption .credit {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--ink-muted);
  opacity: 0.85;
}
.editorial-caption .credit a {
  color: var(--turquoise-dark);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.editorial-text .eyebrow { margin-bottom: 8px; }
.editorial-text h2 { padding-bottom: 0; }
.editorial-text h2::after { display: none; }
.editorial-text p { color: var(--ink-muted); margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .editorial-media img { transition: none; }
}

/* =========================================================================
   REFONTE VISUELLE — v5 « typographie de marque, héros immersifs, mouvement »
   ------------------------------------------------------------------------
   Commande du commanditaire, en une passe au-dessus de la v4 : rendu
   « exceptionnellement premium ». Trois leviers, dans cet ordre de poids
   visuel :
   1. Typographie de marque auto-hébergée (Fraunces + Inter, variable,
      fichiers dans assets/fonts/ — aucune requête réseau à l'exécution,
      conforme à la contrainte « aucune dépendance externe »).
   2. Héros en plein cadre (photo pleine largeur, plus de carte encadrée)
      avec entrée animée (texte séquencé + rideau qui se lève sur l'image)
      et, sur l'accueil, un vrai slider à trois diapositives.
   3. Direction éditoriale : numérotation de section (compteur CSS, aucun
      HTML supplémentaire), soulignements dessinés au survol, grain
      filmique léger sur les héros, léger tilt 3D des cartes au survol.
   Tout mouvement respecte prefers-reduced-motion (règle globale déjà en
   tête de fichier + gardes explicites en JS pour les effets pilotés par
   script, voir assets/script.js).
   ========================================================================= */

/* ---------- Typographie auto-hébergée ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-variable-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/inter-variable-latin.woff2') format('woff2');
}
:root {
  --font-serif: 'Fraunces', Georgia, "Times New Roman", serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
h1, h2, h3, h4 { font-optical-sizing: auto; letter-spacing: -0.012em; }
h1 { letter-spacing: -0.02em; }
.hero-bleed h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
/* L'eyebrow bascule en mono, plus proche du "data-driven label" éditorial
   que du petit texte gras générique — cohabite avec les couleurs déjà
   définies par contexte (.section--navy .eyebrow, .hero .eyebrow, etc.). */
.eyebrow { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.1em; font-size: 0.74rem; }

/* ---------- Numérotation éditoriale des sections (zéro HTML) ---------- */
main { counter-reset: section-index; }
.section-head { counter-increment: section-index; }
.section-head::before {
  content: "0" counter(section-index);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--dept-accent);
  opacity: 0.75;
  margin-bottom: 10px;
}

/* ---------- Soulignement dessiné — navigation ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 8px;
  height: 2px;
  background: var(--turquoise);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-link:hover::after, .nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after,
.nav-link[aria-expanded="true"]::after { transform: scaleX(1); }

/* ---------- Grain filmique léger (SVG inline, aucun fichier) ---------- */
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Tilt 3D retiré en v6 (voir § plus bas et AUDIT-DESIGN.md § 3) : ces trois
   cartes portent des données chiffrées et des référentiels — les incliner
   vers le curseur n'ajoutait aucune information et travaillait contre le
   registre « rapport d'ingénieur ». */

/* =========================================================================
   HÉROS PLEIN CADRE — remplace le schéma « texte en colonne + photo
   encadrée » par une photographie plein cadre, avec dégradé de lisibilité
   et entrée animée. .hero-bleed s'ajoute à .hero (garde le fond de
   secours, l'aurora désactivée ci-dessous, etc.) ; .hero-slider est une
   variante à plusieurs diapositives (accueil uniquement).
   ========================================================================= */
.hero-bleed {
  padding: 0;
  min-height: min(80vh, 760px);
  display: flex;
  align-items: flex-end;
  background: var(--brand-dark);
}
.hero-bleed.hero--compact, .hero-bleed.hero--single { min-height: min(50vh, 460px); }
/* (La neutralisation de l'aurora qui figurait ici n'a plus d'objet : le
   pseudo-élément .hero::before a été supprimé en v6.) */
.hero-bleed .container { display: block; position: relative; z-index: 2; padding: 132px 20px 64px; max-width: var(--max-width); }
.hero-bleed .hero-inner { max-width: 640px; }
.hero-bleed h1, .hero-bleed .lede { color: var(--white); }
.hero-bleed .lede { max-width: 46ch; }
.hero-bleed .eyebrow { color: var(--turquoise); }
.hero-bleed .hero-breadcrumb { position: relative; z-index: 2; }

.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: 55% 40%; /* Ken Burns retiré en v6 — voir § HÉROS ci-dessus */
}
.hero-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(9,31,24,0.22) 0%, rgba(9,31,24,0.38) 42%, rgba(9,31,24,0.92) 100%);
}

/* Tilt 3D piloté par le défilement (v7) — demandé spécifiquement pour le
   héros du calculateur de bilan carbone. Le JS (initHeroScroll3d) pose le
   transform inline ; on ne fixe ici que la perspective du conteneur et une
   transition de repli pour un rendu propre sans JS/prefers-reduced-motion. */
.hero-media--scroll3d { perspective: 1400px; }
.hero-media--scroll3d img, .hero-media--scroll3d video { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; }
}

/* Entrée animée — texte séquencé au chargement (pas au défilement : le
   héros est déjà visible à l'écran). .is-ready est ajouté par
   assets/script.js (initHeroEntrance) après un double requestAnimationFrame,
   pour garantir que le navigateur applique bien l'état initial avant de
   déclencher la transition. */
.hero-bleed .hero-inner > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.hero-bleed.is-ready .hero-inner > * { opacity: 1; transform: none; }
.hero-bleed.is-ready .hero-inner > *:nth-child(1) { transition-delay: 80ms; }
.hero-bleed.is-ready .hero-inner > *:nth-child(2) { transition-delay: 200ms; }
.hero-bleed.is-ready .hero-inner > *:nth-child(3) { transition-delay: 320ms; }
.hero-bleed.is-ready .hero-inner > *:nth-child(4) { transition-delay: 440ms; }
.hero-bleed.is-ready .hero-inner > *:nth-child(5) { transition-delay: 560ms; }
@media (prefers-reduced-motion: reduce) {
  .hero-bleed .hero-inner > * { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   SLIDER HÉROS — accueil uniquement. Diapositives empilées en absolu,
   fondu croisé + rideau qui se lève sur l'image entrante, texte séquencé
   rejoué à chaque changement de diapositive. Flèches/points réutilisent
   les styles déjà posés pour .carousel-arrow/.carousel-dot (v2/v4).
   ========================================================================= */
.hero-slider .hero-slider-slides { position: relative; width: 100%; min-height: min(80vh, 760px); }
.hero-slider .hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms var(--ease-out), visibility 0s linear 900ms;
}
.hero-slider .hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms var(--ease-out);
  z-index: 1;
}
.hero-slider .hero-slide::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: var(--brand-dark);
  transform: scaleX(1);
  transform-origin: right;
  pointer-events: none;
}
.hero-slider .hero-slide.is-active::before {
  animation: heroCurtainReveal 1000ms var(--ease-out) forwards;
}
@keyframes heroCurtainReveal { to { transform: scaleX(0); } }

.hero-slider .hero-slide .hero-inner > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.hero-slider .hero-slide.is-active .hero-inner > * { opacity: 1; transform: none; }
.hero-slider .hero-slide.is-active .hero-inner > *:nth-child(1) { transition-delay: 320ms; }
.hero-slider .hero-slide.is-active .hero-inner > *:nth-child(2) { transition-delay: 440ms; }
.hero-slider .hero-slide.is-active .hero-inner > *:nth-child(3) { transition-delay: 560ms; }
.hero-slider .hero-slide.is-active .hero-inner > *:nth-child(4) { transition-delay: 680ms; }
@media (prefers-reduced-motion: reduce) {
  .hero-slider .hero-slide::before { display: none; }
  .hero-slider .hero-slide .hero-inner > * { opacity: 1; transform: none; transition: opacity 300ms ease; }
}

/* =========================================================================
   SLIDER HÉROS — variante texte | vidéo côte à côte (accueil, sur demande
   client — voir Amélioration du site.pdf). Réutilise .hero .container
   (grille 1.15fr/0.85fr déjà posée pour le schéma « texte + photo »
   pré-v5) et .hero-photo (cadre média, déjà responsive) ; seule la
   mécanique de diapositive change par rapport à .hero-bleed.hero-slider.
   ========================================================================= */
/* Fond éclairci (retour client v2 : "couleurs plus claires") — remplace le
   vert forêt --brand-dark par une teinte plus claire, propre à cette
   section (n'affecte pas l'en-tête/pied de page, dont les contrastes
   texte-sur-fond sont déjà calibrés ailleurs). Contrastes vérifiés :
   blanc sur #1B6B4E = 6.44:1 (AA texte normal), d'où l'eyebrow qui passe
   du turquoise (2.4:1 sur ce fond, insuffisant) à un blanc atténué. */
.hero-slider--split {
  background: linear-gradient(160deg, #1B6B4E 0%, #235C46 55%, #1B6B4E 100%);
}
.hero-slider--split .hero-split-text .eyebrow { color: rgba(255,255,255,0.85); }
.hero-slider--split { padding: 32px 0; }
/* Bannière raccourcie (retour client "Amélioration 8") : les 90vh/840px
   précédents dépassaient largement la hauteur du contenu réel (texte +
   cadre vidéo), laissant un grand vide vert avant les puces de
   navigation. La hauteur suit maintenant le contenu, avec un plafond
   raisonnable plutôt qu'un plancher forcé. */
.hero-slider--split .hero-slider-slides { min-height: min(56vh, 520px); }
/* Texte poussé à gauche, cadre vidéo agrandi (retour client v2 puis v3 :
   "encore agrandir la fenêtre") : la grille redonne l'essentiel de la
   largeur à la vidéo (0.68fr/1.32fr, contre 1.15fr/0.85fr côté texte sur
   le schéma .hero pré-v5 générique), le padding vertical de la section
   est réduit (32px, contre 76/56 hérité de .hero) pour laisser le cadre
   grandir en hauteur, et son ratio passe de 4/3 à 1/1 pour un rendu
   nettement plus grand/carré. */
/* Texte réduit, vidéo qui occupe toute la hauteur de la colonne droite
   (retour client v4) : .hero-slide et .hero-split passent de
   align-items:center (qui centrait le cadre verticalement, laissant un
   vide au-dessus/dessous) à stretch, .hero-photo abandonne son
   aspect-ratio fixe pour remplir width:100%/height:100% de sa cellule de
   grille — la vidéo (object-fit:cover) recadre pour occuper tout le
   cadre, quelle que soit sa proportion réelle. */
.hero-slider--split .hero-split { grid-template-columns: 0.62fr 1.38fr; gap: 28px; align-items: stretch; }
.hero-slider--split .hero-split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 8px;
}
.hero-slider--split .hero-split-text h1 { font-size: clamp(1.6rem, 2.1vw, 2.15rem); }
.hero-slider--split .hero-split-text .lede { font-size: 0.92rem; }
.hero-slider--split .hero-photo { aspect-ratio: unset; width: 100%; height: 100%; max-height: none; }
.hero-slider--split .hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms var(--ease-out), visibility 0s linear 700ms;
}
.hero-slider--split .hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms var(--ease-out);
  z-index: 1;
}
.hero-slider--split .hero-slide.is-active { min-width: 0; }
.hero-split { width: 100%; min-width: 0; }
.hero-split-text, .hero-split .hero-graphic.hero-photo { min-width: 0; }
.hero-split-text h1 { overflow-wrap: break-word; hyphens: auto; }
.hero-split-text .eyebrow { color: var(--turquoise); }
.hero-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-slider--split .hero-slide .hero-split-text > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.hero-slider--split .hero-slide.is-active .hero-split-text > * { opacity: 1; transform: none; }
.hero-slider--split .hero-slide.is-active .hero-split-text > *:nth-child(1) { transition-delay: 120ms; }
.hero-slider--split .hero-slide.is-active .hero-split-text > *:nth-child(2) { transition-delay: 220ms; }
.hero-slider--split .hero-slide.is-active .hero-split-text > *:nth-child(3) { transition-delay: 320ms; }
.hero-slider--split .hero-slide.is-active .hero-split-text > *:nth-child(4) { transition-delay: 420ms; }
@media (prefers-reduced-motion: reduce) {
  .hero-slider--split .hero-slide .hero-split-text > * { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .hero-slider--split .hero-split { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 40px 20px; }
  .hero-slider--split .hero-slider-slides { min-height: 0; }
  .hero-slider--split .hero-slide.is-active { position: relative; display: block; }
  .hero-slider--split .hero-photo { order: -1; aspect-ratio: 16 / 9; }
  .hero-split-text { max-width: 100%; overflow: hidden; }
  .hero-split-text h1 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
}

/* =========================================================================
   BANDEAU D'ACCROCHE (au-dessus du slider principal, accueil uniquement)
   ========================================================================= */
.intro-band {
  position: relative;
  overflow: hidden;
  background: var(--brand-dark);
  padding: 14px 0;
  text-align: center;
}
/* Halo dynamique : deux lueurs radiales (turquoise + or) qui dérivent
   lentement derrière le texte, plutôt qu'un aplat vert uni (retour client
   "trop haut / fond à dynamiser"). Immobile sous prefers-reduced-motion. */
.intro-band::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 22% 30%, rgba(31, 179, 172, 0.38), transparent 45%),
    radial-gradient(circle at 78% 65%, rgba(200, 155, 42, 0.28), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(31, 179, 172, 0.16), transparent 60%);
  filter: blur(48px);
  animation: intro-halo-drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
.intro-band .container { position: relative; z-index: 1; }
.intro-band h2 {
  color: var(--white);
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  margin: 0;
}
@keyframes intro-halo-drift {
  0%   { transform: translate(-4%, -2%) scale(1); }
  50%  { transform: translate(3%, 4%) scale(1.1); }
  100% { transform: translate(-2%, 3%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-band::before { animation: none; }
}

/* =========================================================================
   BLOC "QUI SOMMES-NOUS" (accueil, entre le slider principal et les
   chiffres) : promesse courte + bouton vidéo, réutilise la modale et le
   bouton .activity-explain déjà en place sur les pages D1-D4.
   ========================================================================= */
/* Fond d'écran inspirant (retour client "Amélioration 9") : photo de
   toiture photovoltaïque sous ciel dégagé, assombrie par un dégradé vert
   marque pour que le texte blanc reste lisible (contraste vérifié). */
.about-band {
  position: relative;
  text-align: center;
  background: linear-gradient(160deg, rgba(18,59,46,0.88) 0%, rgba(18,59,46,0.72) 55%, rgba(18,59,46,0.9) 100%),
              url("img/about-band-bg.jpg") center / cover no-repeat;
  color: var(--white);
  padding-top: 56px;
  padding-bottom: 56px;
}
.about-band .eyebrow { color: rgba(255,255,255,0.85); }
.about-band h2 { color: var(--white); }
.about-band .container { max-width: 74ch; }
.about-band p { margin: 14px 0 24px; color: rgba(255,255,255,0.92); }
.about-band .activity-explain { padding: 12px 26px; font-size: 0.95rem; }

.hero-slider-nav {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-bottom: 26px;
}
.hero-slider-nav .carousel-arrow { position: static; transform: none; width: 40px; height: 40px; }
.hero-slider-nav .carousel-arrow:hover { transform: scale(1.08); }
.hero-slider-dots { display: flex; gap: 10px; }

/* =========================================================================
   CARTES DE DONNÉES — état de survol (remplace le tilt 3D, v6)
   L'inclinaison 3D pilotée par JS (initTilt) est supprimée au profit d'une
   transition d'état sobre : élévation légère, ombre portée et liseré teinté
   par département. Aucun style inline posé par script, donc plus rien à
   neutraliser explicitement sous prefers-reduced-motion — la règle CSS
   globale en tête de fichier suffit désormais pour ces trois composants.
   ========================================================================= */
.case-box, .lever-card, .referentiel-box {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.referentiel-box:hover, .referentiel-box:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* =========================================================================
   CARROUSEL D'EXPERTISES — photo plein cadre par département + texte
   animé (correction du chevauchement flèche/texte signalé par le
   commanditaire). Réutilise les photographies déjà déposées pour les
   bandeaux héros D1-D4 (aucune nouvelle image) : aucun coût supplémentaire,
   cohérence visuelle avec les pages d'expertise que chaque diapositive
   introduit.
   ========================================================================= */
.carousel-slide-link {
  background: var(--dept-accent); /* repli tant que la photo charge */
  padding: 44px 76px 44px 76px;
}
.carousel-slide-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.carousel-slide-media img,
.carousel-slide-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.carousel-slide-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--dept-accent) 0%, rgba(0,0,0,0.15) 100%);
  opacity: 0.86;
}
.carousel-slide-kicker, .carousel-slide h3, .carousel-slide-list, .carousel-slide-cta {
  position: relative;
  z-index: 2;
}
/* Texte séquencé — rejoué à chaque diapositive devenant active (classe
   posée par assets/script.js, initCarousel → goTo), pas seulement à la
   première apparition du carrousel dans la page. */
.carousel-slide-link > *:not(.carousel-slide-media) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}
.carousel-slide.is-active .carousel-slide-link > *:not(.carousel-slide-media) { opacity: 1; transform: none; }
.carousel-slide.is-active .carousel-slide-link > *:nth-child(2) { transition-delay: 90ms; }
.carousel-slide.is-active .carousel-slide-link > *:nth-child(3) { transition-delay: 180ms; }
.carousel-slide.is-active .carousel-slide-link > *:nth-child(4) { transition-delay: 270ms; }
.carousel-slide.is-active .carousel-slide-link > *:nth-child(5) { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  .carousel-slide-link > *:not(.carousel-slide-media) { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 640px) {
  .carousel-slide-link { padding: 34px 58px 30px; }
}

/* =========================================================================
   v6 — DIRECTION « RAPPORT D'INGÉNIEUR »
   ------------------------------------------------------------------------
   Cette section ne modifie ni la palette de marque, ni la typographie, ni
   l'architecture des pages. Elle agit sur un seul levier : la façon dont le
   site présente ses chiffres. Le cabinet vend de la rigueur — ses données
   doivent se lire comme un tableau d'ingénieur (colonnes alignées, chasse
   fixe, filets fins), pas comme un argumentaire marketing.
   Les retraits de mouvement décoratif associés à cette direction sont posés
   en place dans les sections concernées ci-dessus, pas ici.
   ========================================================================= */

/* ---------- Titre de diapositive non structurel ----------
   Seule la première diapositive du slider d'accueil porte le <h1> de la
   page ; les suivantes utilisent .hero-title, au rendu identique mais sans
   introduire de titre concurrent dans le plan du document (4 <h1> avant
   v6 — voir AUDIT-DESIGN.md § 4). */
.hero .hero-title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(2.05rem, 4vw, 3.05rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: none;
  margin: 0;
}
.hero-slider--split .hero-split-text .hero-title { font-size: clamp(1.6rem, 2.1vw, 2.15rem); }
.hero-split-text .hero-title { overflow-wrap: break-word; hyphens: auto; }
/* Spécificité alignée sur celle de la règle de bureau ci-dessus : sans cela
   la valeur mobile serait perdue dans la cascade. Le même défaut existait
   sur le <h1> du slider (règle .hero-split-text h1 à 0,2,0 écrasée par
   .hero-slider--split .hero-split-text h1 à 0,3,0, y compris à l'intérieur
   de la requête média) — corrigé pour les deux ci-dessous. */
@media (max-width: 900px) {
  .hero-slider--split .hero-split-text .hero-title,
  .hero-slider--split .hero-split-text h1 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
}

/* ---------- Chiffres en chasse fixe ----------
   `tabular-nums` fige la largeur d'avance de chaque chiffre : les colonnes
   de nombres s'alignent verticalement et un compteur animé cesse de faire
   « danser » la mise en page à chaque incrément. C'est le marqueur
   typographique le plus économique du registre « rapport technique ». */
.stat-number,
.result-total .value,
.intensity-item .num,
.poste-item .poste-head,
.donut-legend li,
.reg-banner .reg-date,
.activity-meta dd,
.case-box dd,
.calc-steps-labels,
.calc-field input,
.form-field input {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Bandeau de preuve — cartes de preuve ----------
   Le bandeau alignait quatre nombres nus. Chaque chiffre reçoit désormais
   un filet supérieur, un intitulé d'unité en mono et, quand une preuve
   existe réellement sur le site, un lien vers l'endroit qui la porte.
   Les deux chiffres sans surface de preuve publique (référentiels
   mobilisés, missions réalisées) n'en reçoivent pas : l'absence de lien
   vaut absence de revendication de source — aucune source n'est inventée
   pour les habiller. Ils restent marqués « à valider Direction » en
   commentaire HTML, comme avant. */
/* Écart de colonne explicite plutôt que `gap: 0` : le filet supérieur doit
   se lire comme quatre colonnes d'un tableau, pas comme une seule barre
   continue — et surtout, sans écart, les libellés de deux colonnes voisines
   se touchent dès que l'un d'eux passe sur deux lignes (vérifié en 2×2 sous
   900 px, où la grille repasse à deux colonnes). */
.stat-grid { column-gap: 28px; row-gap: 10px; }
.stat-item {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding: 18px 0 4px;
}
.stat-number {
  display: block;
  letter-spacing: -0.02em;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 8px;
}
/* Sélecteur qualifié par .section--navy (spécificité 0,2,0) : la règle
   générale `.section--navy a { color: var(--white) }` (0,1,1) l'emporterait
   sinon sur un simple `.stat-proof` (0,1,0). Volontairement pas en or : le
   doré reste réservé à l'unique bouton d'action par écran (règle de doctrine
   inchangée depuis la v1) — un lien de preuve doré sur le même écran que le
   CTA d'en-tête la violerait. Le blanc atténué le place sous le chiffre dans
   la hiérarchie, le soulignement au survol marque l'état. */
.section--navy .stat-proof {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--onDark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.section--navy .stat-proof:hover,
.section--navy .stat-proof:focus-visible {
  color: var(--white);
  border-bottom-color: currentColor;
}

/* ---------- Frise réglementaire — lecture en tableau daté ----------
   L'échéance passe en mono et gagne un filet vertical : les quatre
   bandeaux se lisent comme les lignes d'un tableau de conformité, colonne
   de dates alignée, plutôt que comme quatre encarts indépendants. */
.reg-banner .reg-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.reg-banner + .reg-banner { margin-top: 0; border-top: none; }
.reg-banner { border-radius: 0; }
.reg-banner:first-of-type { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.reg-banner:last-of-type { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }

/* ---------- Restitution du calculateur — colonnes numériques ----------
   Les trois postes dominants et les intensités sont les seuls chiffres du
   site issus d'un calcul : ils reçoivent le traitement le plus strict —
   valeur détachée à droite, filet de séparation, source en dessous. */
.poste-item {
  border: none;
  border-top: 1px solid var(--grey-border);
  border-radius: 0;
  padding: 12px 0;
}
.poste-item:last-child { border-bottom: 1px solid var(--grey-border); }
.poste-item .poste-head { gap: 20px; align-items: baseline; }
.poste-item .poste-head span:last-child {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}
.intensity-item {
  border: none;
  border-top: 2px solid var(--dept-accent);
  border-radius: 0;
  background: transparent;
  padding: 14px 0 0;
}
.intensity-item .num { display: block; letter-spacing: -0.01em; }
.intensity-item .lbl {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 6px;
}
.donut-legend li {
  justify-content: space-between;
  border-bottom: 1px solid var(--grey-border);
  padding-bottom: 6px;
}
.donut-legend li .pct {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 700;
}

/* Total au centre de l'anneau — un anneau sans sa valeur oblige à lire la
   légende pour savoir de quoi il s'agit. Rendu par assets/script.js
   (renderDonut) dans le SVG lui-même, pour rester exportable/imprimable
   avec le graphique. */
#donut-chart svg .donut-center-value {
  font-family: var(--font-serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: var(--ink);
}
#donut-chart svg .donut-center-unit {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  fill: var(--ink-muted);
}

/* ---------- Fiches d'activité et cas — filets plutôt que fonds ---------- */
.activity-meta dt, .case-box dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}