/* ══════════════════════════════════════════════════════════
   Aurore Énergies · Socle partagé
   Jetons, en-tête, pied de page et composants communs. Les règles propres
   à l'accueil sont dans accueil.css (chargée par index.php seulement).
   Mobile-first : valeurs de base = mobile, puis paliers 768 et 1024 px
   (et 1200 / 1360 px pour l'en-tête seul). Les feuilles de gabarit
   (service, contenu, guides, apropos, contact, faq) s'ajoutent par page.
   ══════════════════════════════════════════════════════════ */

/* ── Police auto-hébergée (Urbanist variable, 400-800) ──── */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/urbanist-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/urbanist-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Jetons ─────────────────────────────────────────────── */
:root {
  --yellow:      #FFD105;
  --yellow-hover:#F2C700;
  --yellow-soft: rgba(255, 209, 5, .28);
  --ink:         #111110;
  --ink-hover:   #24231F;
  --ink-soft:    #2B2A26;
  --paper:       #FAF8F2;
  --white:       #FFFFFF;
  --tint:        #FFF6CC;

  --text-2:      #3D3B36;
  --muted:       #55534C;
  --on-dark:     #BDBAB1;
  --on-dark-2:   #D8D6CF;
  --on-dark-3:   #E6E4DD;
  --footer-mute: #8A877E;
  /* Ocre : #8A6F00 sur blanc et papier, #866A00 sur la teinte (4,74:1).
     Jamais d'ocre sur fond jaune. */
  --ochre:       #8A6F00;
  --ochre-tint:  #866A00;
  /* Nouveaux jetons du handoff (formulaire de contact). */
  --erreur:        #B3261E;   /* 6,5:1 sur blanc, 6,2:1 sur papier */
  --bordure-champ: #8A877E;   /* 3,7:1, contraste non textuel */

  --line:        #DDDAD0;
  --line-dark:   #2A2926;
  --line-dark-2: #3A3934;
  --ring:        #C9B24A;

  --shadow-card:   0 12px 28px rgba(0, 0, 0, .12);
  --shadow-card-l: 0 16px 36px rgba(0, 0, 0, .12);
  --shadow-drop:   0 20px 48px rgba(17, 17, 16, .16);
  --shadow-menu:   0 24px 48px rgba(0, 0, 0, .25);
  --shadow-bubble: 0 10px 28px rgba(17, 17, 16, .35);

  /* Colonne de contenu plafonnée à 1280 px : les aplats vont bord à bord,
     ce sont les gouttières qui absorbent le surplus. */
  --content-max: 1280px;
  --maxw: calc(var(--content-max) + 2 * var(--px));
  --px: 20px;              /* gouttière : 20 / 40 / 80 */
  --py: 48px;              /* rythme vertical : 48 / 72 / 80 à 104 */
  --gap: 28px;             /* écart entre colonnes : 28 / 32 / 48 à 72 */
  --header-h: 72px;        /* 72 sous 1024 px, 92 au-delà */
  --cardpad: 26px 22px;

  --radius-card:  28px;
  --radius-small: 20px;
  --pill: 99px;

  /* Typographie : valeurs mobiles */
  --h1: 42px;              /* accueil */
  --h1-page: 34px;         /* pages intérieures A à F */
  --h2: 32px;
  --h2-s: 32px;            /* H2 secondaire (FAQ de l'accueil) */
  --h3: 25px;
  --quote: 22px;
  --lead: 18px;            /* chapô : 18 / 19 / 19 → 21 px (toutes les pages) */
  --eyebrow: 13px;         /* 13 px à toutes les largeurs (handoff) */
  --body: 15px;
  /* Texte courant des gabarits (service.css) : 16 / 17 px. Le <body>, lui,
     reste à 16 px partout, comme dans le handoff. */
  --body-lg: 16px;
}

@media (min-width: 768px) {
  :root {
    --px: 40px;
    --py: 72px;
    --gap: 32px;
    --cardpad: 32px;
    /* Accueil : 42 px sous 768, 48 px fixes de 768 à 1023, puis 48 → 76 px. */
    --h1: 48px;
    /* 40 px de 768 à 1024, puis 40 → 56 px jusqu'à 1440 (handoff). */
    --h1-page: clamp(40px, 3.85vw + .6px, 56px);
    --h2: 40px;
    --h2-s: 36px;
    --h3: 28px;
    --quote: 28px;
    --lead: 19px;
  }
}

@media (min-width: 1024px) {
  :root {
    --px: 80px;
    --py: clamp(80px, 5.77vw + 20.92px, 104px);
    --gap: clamp(48px, 5.77vw - 11.08px, 72px);
    --cardpad: clamp(32px, 2.885vw + 2.46px, 44px);
    --header-h: 92px;
    --h1: clamp(48px, 6.7308vw - 20.923px, 76px);
    --h2: clamp(40px, 2.885vw + 10.46px, 52px);
    --h2-s: clamp(34px, 1.4423vw + 19.231px, 40px);
    --h3: clamp(28px, 1.923vw + 8.31px, 36px);
    --quote: clamp(28px, 1.4423vw + 13.231px, 34px);
    --lead: clamp(19px, .4808vw + 14.08px, 21px);
    --body: 16px;
    --body-lg: 17px;
    --radius-card: 36px;
    --radius-small: 24px;
  }
}

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

/* Le filet anti-débordement va sur <html> SEUL : posé aussi sur <body>, il
   ferait de body un second conteneur de défilement. */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
address { font-style: normal; }

/* La feuille du navigateur pose [hidden]{display:none}, mais toute règle
   d'auteur fixant un display (flex, grid…) la bat. */
[hidden] { display: none !important; }

/* Ancres ET focus clavier : l'en-tête collant (72 / 92 px) ne recouvre jamais
   la cible ni l'élément qui reçoit le focus (Maj+Tab, WCAG 2.4.11). Sous
   768 px, la bulle « Appeler » (60 px + 16 px) ne recouvre pas non plus le bas. */
html { scroll-padding-top: calc(var(--header-h) + 12px); }
@media (max-width: 767px) {
  html { scroll-padding-bottom: 88px; }
}

/* Focus visible du handoff : contour encre + anneau jaune ; contour jaune
   sur fond encre. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--yellow);
}
.section--ink :focus-visible,
.site-end :focus-visible,
.menu-mobile :focus-visible,
.bandeau-prod :focus-visible,
.offer--ink :focus-visible {
  outline-color: var(--yellow);
  box-shadow: none;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 12px; left: 12px; z-index: 70;
  transform: translateY(-300%);
  background: var(--ink); color: var(--yellow);
  padding: 12px 18px; border-radius: var(--pill);
  font-size: 15px; font-weight: 700;
}
.skip-link:focus { transform: none; color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Coque, gouttières, sections ────────────────────────── */
/* --gut : gouttière d'une section pleine largeur. Sous la largeur maximale
   elle vaut --px ; au-delà elle absorbe le surplus, si bien que la colonne
   de contenu reste à 1280 px pendant que les aplats vont bord à bord.
   Les 100 % se résolvent sur le conteneur de la section (la coque). */
.shell {
  --gut: max(var(--px), calc((100% - var(--content-max)) / 2));
  position: relative;
  background: var(--paper);
}

.section { padding: var(--py) var(--gut); }
.section--white { background: var(--white); }
.section--tint  { background: var(--tint); }
.section--ink   { background: var(--ink); color: var(--white); }

/* Conteneur centré, pour un bloc qui n'est pas une .section. */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--px);
}

#main:focus { outline: none; box-shadow: none; }

/* ── Typographie ────────────────────────────────────────── */
.h1 {
  font-size: var(--h1);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: balance;
}
/* H1 des pages intérieures : 34 / 40 / 40 → 56 px. « Autoconsommation »
   tient dans 320 px à 34 px ; pas de césure automatique sur les titres. */
.h1-page {
  font-size: var(--h1-page);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* H2 de section : 1.08 / -.02em à toutes les largeurs sur les pages
   intérieures (gabarits A à F du handoff) ; 1.06 / -.03em sur l'accueil. */
.h2 {
  font-size: var(--h2);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.is-home .h2 { line-height: 1.06; letter-spacing: -.03em; }
.h3 {
  font-size: var(--h3);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.02em;
}
.lead { font-size: var(--lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.lead--dark { color: var(--on-dark); }

/* Interligne 1.2 (« normal » d'Urbanist) : celui du handoff, qui n'en fixe pas. */
.eyebrow {
  font-size: var(--eyebrow);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ochre);
}
.section--tint .eyebrow,
.eyebrow--tint { color: var(--ochre-tint); }
.eyebrow--light,
.section--tint .eyebrow--light { color: var(--yellow); }
/* Sur-titre à point : 14 px / 600, point de 10 px, à toutes les largeurs. */
.eyebrow--dot {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0;
  text-transform: none; color: var(--muted);
}
.eyebrow__dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--yellow);
}

/* Surlignage « Grand Ouest » du H1. */
.mark { background: linear-gradient(transparent 62%, var(--yellow) 62%); }

/* ── Boutons ────────────────────────────────────────────── */
.btn {
  --btn-h: 58px;           /* hauteur sur une ligne (reprise par .btn--wrap) */
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--btn-h); padding: 0 26px;
  border: 2px solid transparent; border-radius: var(--pill);
  font-size: 17px; font-weight: 700; line-height: 1;
  text-align: center; white-space: nowrap;
  transition: transform .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--yellow); color: var(--ink); }
.btn--primary:hover { background: var(--yellow-hover); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--yellow); }
.btn--ink:hover { background: var(--ink-hover); color: var(--yellow); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--yellow); }
.btn--outline-light { border-color: var(--white); color: var(--white); }
.btn--outline-light:hover { background: var(--white); color: var(--ink); }
.btn--md { --btn-h: 54px; padding: 0 26px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }
.btn--lg { width: 100%; }
.btn__arrow { font-weight: 700; }
/* Libellé qui peut passer sur deux lignes (btn(…, ['wrap' => true])) : en
   bloc et non en flex, la flèche suit le dernier mot (espace insécable posée
   par btn()) au lieu d'être rejetée au bord droit. Sur une ligne, même
   hauteur que le bouton flex : padding = (hauteur - 2 × 2 px de bordure -
   1,25em d'interligne) / 2. */
.btn--wrap {
  display: inline-block; height: auto; min-height: var(--btn-h);
  padding-block: calc((var(--btn-h) - 4px - 1.25em) / 2);
  line-height: 1.25; text-align: left; white-space: normal;
}
.btn--wrap.btn--block { display: block; }

@media (min-width: 640px) {
  .btn--lg { width: auto; padding: 0 30px; }
}

/* Lien souligné « … → » */
.lien-plus {
  align-self: flex-start;
  font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--ring); text-underline-offset: 4px;
}
.lien-plus:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ══════════════════════════════════════════════════════════
   En-tête G
   ══════════════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: var(--header-h);
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--px);
}
.brand { flex: none; display: block; }
.brand img { width: auto; height: 40px; }

.nav, .header-actions { display: none; }

.burger {
  flex: none;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease-out;
}
.burger:hover { background: var(--ink-hover); }
.burger__bars { display: flex; flex-direction: column; gap: 5px; }
.burger__bars span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--yellow);
  transition: transform .2s ease-out;
}
.burger[aria-expanded="true"] .burger__bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* Menu mobile : panneau encre sous la barre, second niveau dépliable. */
.menu-mobile {
  position: absolute; top: calc(100% + 4px); left: 12px; right: 12px; z-index: 60;
  max-height: min(700px, calc(100vh - 110px));
  max-height: min(700px, calc(100dvh - 110px));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 24px 24px;
  background: var(--ink); color: var(--white);
  border-radius: 28px; box-shadow: var(--shadow-menu);
}
.menu-mobile__item { border-bottom: 1px solid var(--line-dark); }
.menu-mobile__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-mobile__link {
  flex: 1; min-width: 0;
  padding: 14px 0;
  color: var(--white); font-size: 22px; font-weight: 700; line-height: 1.2;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: transparent;
}
.menu-mobile__link:hover { color: var(--yellow); }
.menu-mobile__link[aria-current] { text-decoration-color: var(--yellow); }
.menu-mobile__toggle {
  flex: none; width: 44px; height: 44px; padding: 0;
  border: 2px solid var(--line-dark-2); border-radius: 50%;
  background: transparent; color: var(--yellow); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.menu-mobile__chevron { transition: transform .2s ease-out; }
.menu-mobile__toggle[aria-expanded="true"] .menu-mobile__chevron { transform: rotate(180deg); }
/* Second niveau : le contenu du méga-menu desktop, empilé (accroche, lien
   vers le pilier, sous-pages à icône, guides, carte d'action). */
.menu-mobile__sub { margin: 0 0 18px; }
.menu-mobile__intro {
  margin: 0 0 2px;
  color: var(--on-dark-2); font-size: 15px; line-height: 1.4;
}
.menu-mobile__more {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--yellow); font-size: 15px; font-weight: 700; line-height: 1.2;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.menu-mobile__more[aria-current="page"],
.menu-mobile__more:hover { color: var(--white); }
.menu-mobile__pages { display: grid; gap: 2px; margin: 4px 0 0; }
.menu-mobile__page {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; color: var(--white);
}
.menu-mobile__icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--ink);
}
.menu-mobile__page-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.menu-mobile__page-title { font-size: 17px; font-weight: 700; line-height: 1.25; }
.menu-mobile__page-desc { color: var(--on-dark); font-size: 14px; line-height: 1.35; }
.menu-mobile__page:hover .menu-mobile__page-title,
.menu-mobile__page[aria-current="page"] .menu-mobile__page-title { color: var(--yellow); }
.menu-mobile__label {
  margin: 14px 0 2px;
  color: var(--yellow); font-size: 12px; font-weight: 700; line-height: 1.2;
  letter-spacing: .12em; text-transform: uppercase;
}
.menu-mobile__guide {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark-2); font-size: 16px; font-weight: 600; line-height: 1.25;
}
.menu-mobile__guide-arrow { flex: none; color: var(--yellow); }
.menu-mobile__guide:hover,
.menu-mobile__guide[aria-current="page"] { color: var(--yellow); }
.menu-mobile__card {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 16px; padding: 16px 18px; border-radius: 20px;
  color: var(--ink);
}
.menu-mobile__card--jaune { background: var(--yellow); }
.menu-mobile__card--teinte { background: var(--tint); }
.menu-mobile__card-eyebrow {
  font-size: 12px; font-weight: 700; line-height: 1.2;
  letter-spacing: .12em; text-transform: uppercase;
}
/* Ocre sur teinte : #866A00 (4,74:1). Jamais d'ocre sur le jaune. */
.menu-mobile__card--teinte .menu-mobile__card-eyebrow { color: #866A00; }
.menu-mobile__card-title { font-size: 17px; font-weight: 800; line-height: 1.25; }
.menu-mobile__card-text { font-size: 14px; line-height: 1.4; }
.menu-mobile__card-cta {
  margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.2;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.menu-mobile .btn { height: 56px; }
.menu-mobile__cta { margin-top: 20px; }
.menu-mobile__phone { margin-top: 10px; }

@media (min-width: 1024px) {
  .burger { display: none; }
  .menu-mobile { display: none !important; }

  /* La barre sert de repère aux méga-menus : ils prennent toute la colonne de
     contenu (du logo au bouton Contact, 1280 px au plus). */
  .site-header__bar { position: relative; }
  .nav { display: block; min-width: 0; }
  /* 20 px entre les liens (handoff). À 1024 : 107 + 20 + 565 + 20 + 150
     = 862 px pour 864 disponibles (bouton Contact sans bordure, 94 px). */
  .nav__list { display: flex; align-items: center; gap: 20px; }
  .nav__item { display: flex; align-items: center; gap: 2px; }
  .nav__link {
    padding: 8px 2px;
    color: var(--ink); font-size: 16px; font-weight: 600; white-space: nowrap;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
    text-decoration-color: transparent;
    transition: text-decoration-color .15s ease-out;
  }
  .nav__link:hover,
  .nav__link[aria-current],
  .nav__item.is-open .nav__link { color: var(--ink); text-decoration-color: var(--ink); }
  .nav__label--long { display: none; }

  .nav__toggle {
    flex: none; width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--ink); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .15s ease-out;
  }
  .nav__toggle:hover { background: var(--tint); }
  .nav__toggle[aria-expanded="true"] { background: var(--yellow); }
  .nav__chevron { transition: transform .2s ease-out; }
  .nav__toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
  /* Écran tactile (iPad en paysage, portable tactile) : le chevron est le seul
     moyen d'ouvrir un panneau. Zone de toucher portée de 28 × 28 à 38 × 44 px
     par un pseudo-élément invisible : 8 px en haut, en bas et à droite (il
     reste 12 px avant l'entrée suivante), 2 px à gauche, jusqu'au bord du
     libellé sans le recouvrir. Mise en page inchangée. */
  @media (any-pointer: coarse) {
    .nav__toggle { position: relative; }
    .nav__toggle::after { content: ''; position: absolute; inset: -8px -8px -8px -2px; }
  }

  .header-actions { flex: none; display: flex; align-items: center; gap: 12px; }
  .header-phone { color: var(--ink); }
  .header-phone--text { display: none; font-size: 16px; font-weight: 700; white-space: nowrap; }
  .header-phone--text:hover { color: var(--ochre); }
  .header-phone--icon {
    width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .15s ease-out, color .15s ease-out;
  }
  .header-phone--icon:hover { background: var(--ink); color: var(--yellow); }
  /* Sans la bordure transparente de .btn : 94 px de large (102 dès 1200). */
  .header-contact { height: 48px; padding: 0 20px; border: 0; font-size: 15px; }
}

/* Palier propre à l'en-tête : libellés complets, numéro affiché, logo 48 px. */
@media (min-width: 1200px) {
  /* Handoff : 28 px entre logo, menu et actions, 24 px entre les liens.
     À 1200 pile, cela demande 128 + 28 + 652 + 28 + 220 = 1056 px pour 1040
     (la maquette elle-même déborde de 15 px dans la gouttière) : les liens
     passent à 20 px et les écarts extérieurs à 20 px au moins ; le reste
     (16 px) revient aux écarts extérieurs par space-between (28 px mesurés).
     Valeurs pleines atteintes à 1280 px. */
  .site-header__bar { gap: clamp(20px, 10vw - 100px, 28px); }
  .brand img { height: 48px; }
  .nav__list { gap: clamp(20px, 4vw - 28px, 24px); }
  .nav__label--long { display: inline; }
  .nav__label--short { display: none; }
  .header-phone--text { display: inline; }
  .header-phone--icon { display: none; }
  .header-contact { padding: 0 24px; }
}
@media (min-width: 1360px) {
  .nav__list { gap: 32px; }
}

/* ── Méga-menus (Courtage, Autoconsommation collective) ─── */
/* Desktop seul (la .nav est masquée sous 1024 px). Spécification :
   dev/mega-menu.md ; comportement (survol, clic, clavier) dans main.js.
   Le panneau naît « hidden » : sans JS, rien ne s'affiche. Il est en
   position absolue sous la barre : aucun décalage de mise en page. Ses 8 px
   d'écart sous l'en-tête sont un padding transparent du panneau, qui compte
   donc comme « dans le panneau » pour le survol. Pile : dans le contexte de
   l'en-tête (z-index 40), au-dessus du contenu et des titres collants des
   gabarits ; la bulle « Appeler » n'existe que sous 768 px. */
@media (min-width: 1024px) {
  .mega {
    position: absolute; top: 100%; left: var(--px); right: var(--px); z-index: 2;
    padding-top: 8px;
    animation: mega-in .15s ease-out;
  }
  .mega--instant { animation: none; }
  /* 1024 à 1199 : deux colonnes, la troisième passe dessous (guides sous la
     présentation, carte d'action sous les sous-pages). L'ordre du DOM suit
     l'ordre de lecture : présentation, sous-pages, guides, carte. */
  .mega__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-areas: "intro pages" "guides card";
    align-items: start;
    gap: 24px 28px;
    max-height: calc(100vh - var(--header-h) - 16px);
    max-height: calc(100dvh - var(--header-h) - 16px);
    /* Défile seulement sur un écran trop bas (moins de 547 px). Pas
       d'overscroll-behavior: contain : sur un panneau qui ne défile pas, il
       bloquait la molette et la page paraissait figée sous la souris. */
    overflow-y: auto;
    padding: 28px;
    background: var(--white); color: var(--ink);
    border-radius: 28px; box-shadow: var(--shadow-menu);
  }

  /* 1. Présentation du pilier (titre visuel en <p> : pas de H2 dans l'en-tête). */
  .mega__intro { grid-area: intro; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .mega__title {
    font-size: 24px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em;
    text-wrap: balance;
  }
  .mega__text { font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
  .mega__more { margin-top: 4px; font-size: 15px; }
  /* Page en cours : soulignement encre (le --ring des .lien-plus ne fait que
     2,1:1 sur blanc, WCAG 1.4.11 demande 3:1 pour un état) et graisse 800. */
  .mega__more[aria-current="page"],
  .mega__card-link[aria-current="page"] { text-decoration-color: var(--ink); font-weight: 800; }

  /* 2. Sous-pages : cartes-liens, pastille d'icône teinte puis jaune. */
  .mega__pages { grid-area: pages; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .mega__page {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 14px; border-radius: 18px;
    color: var(--ink);
    transition: background-color .15s ease-out;
  }
  .mega__page:hover { background: var(--paper); color: var(--ink); }
  /* Page en cours : fond teinte (1,08:1, simple second indice) et titre
     souligné encre, l'indice qui compte (contraste 3:1 et plus, visible aussi
     en couleurs forcées), comme le libellé du pilier dans la barre. */
  .mega__page[aria-current="page"] { background: var(--tint); }
  .mega__page[aria-current="page"] .mega__page-title {
    text-decoration: underline; text-decoration-thickness: 2px;
    text-decoration-color: var(--ink); text-underline-offset: 4px;
  }
  .mega__icon {
    flex: none; width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tint); color: var(--ink);
    transition: background-color .15s ease-out;
  }
  .mega__page:hover .mega__icon,
  .mega__page:focus-visible .mega__icon,
  .mega__page[aria-current="page"] .mega__icon { background: var(--yellow); }
  .mega__page-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
  .mega__page-title { font-size: 16px; font-weight: 700; line-height: 1.25; }
  .mega__page-desc { font-size: 14px; line-height: 1.4; color: var(--muted); }

  /* 3. Guides puis carte d'action. */
  .mega__guides { grid-area: guides; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  /* Filets sur les <li> ; le lien déborde de 8 px de chaque côté (marge
     négative) pour que le contour de focus ne colle pas au texte, le texte
     restant aligné sur la colonne. */
  .mega__guides-list li + li { border-top: 1px solid var(--line); }
  .mega__guide {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-inline: -8px; padding: 11px 8px; border-radius: 10px;
    font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink);
  }
  .mega__guide-arrow { flex: none; color: var(--ochre); transition: transform .15s ease-out, color .15s ease-out; }
  .mega__guide:hover { color: var(--ink); }
  .mega__guide:hover > span,
  .mega__guide[aria-current="page"] > span {
    text-decoration: underline; text-decoration-thickness: 2px;
    text-decoration-color: var(--ring); text-underline-offset: 4px;
  }
  .mega__guide[aria-current="page"] > span { text-decoration-color: var(--ink); }
  .mega__guide:hover .mega__guide-arrow { color: var(--ink); transform: translateX(3px); }

  /* À 1200 px, la colonne fait 273 px : marges de 20 px, titre (226 px),
     texte (229 px) et bouton (225 px) y tiennent chacun sur une ligne. */
  .mega__card {
    grid-area: card; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    min-width: 0; padding: 20px; border-radius: 20px; color: var(--ink);
  }
  .mega__card--jaune { background: var(--yellow); }
  .mega__card--teinte { background: var(--tint); }
  .mega__card-eyebrow { color: var(--ochre-tint); }
  .mega__card--jaune .mega__card-eyebrow { color: var(--ink); }   /* jamais d'ocre sur jaune */
  .mega__card-title {
    font-size: 18px; line-height: 1.22; font-weight: 800; letter-spacing: -.01em;
    text-wrap: balance;
  }
  .mega__card-text { font-size: 14px; line-height: 1.4; color: var(--ink); text-wrap: balance; }
  /* Bouton encre pleine largeur de la carte, 48 px ; en colonne étroite le
     libellé passe sur deux lignes au lieu de déborder (btn--wrap). */
  .mega__card-btn.btn--wrap {
    --btn-h: 48px;
    margin-top: 10px; padding-inline: 18px;
    font-size: 15px; text-align: center;
  }
  .mega__card-link { margin-top: 8px; font-size: 15px; }

  /* Voile très léger sur la page pendant qu'un panneau est ouvert : il ne
     capte aucun pointeur (le survol et le clic extérieur passent dessous). */
  .site-header::after {
    content: ''; position: fixed; inset: var(--header-h) 0 0; z-index: 1;
    background: rgba(17, 17, 16, .14);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease-out, visibility 0s linear .15s;
  }
  .site-header.has-mega::after { opacity: 1; visibility: visible; transition: opacity .15s ease-out; }
}

/* 1200 px et plus : trois colonnes (présentation, sous-pages, guides et
   carte) ; la carte descend au bas de sa colonne. */
@media (min-width: 1200px) {
  .mega__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas: "intro pages guides" "intro pages card";
    grid-template-rows: auto 1fr;
    gap: 20px clamp(24px, 3.333vw - 16px, 32px);   /* 24 px à 1200, 32 px dès 1440 */
    padding: 32px;
  }
  .mega__title { font-size: clamp(24px, 1.667vw + 4px, 28px); }
  .mega__card { align-self: end; }
}

@keyframes mega-in {
  from { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .mega { animation: none; }
  .site-header::after { transition: none; }
}
/* Couleurs forcées (contraste élevé Windows) : ombre et aplats disparaissent ;
   un filet marque le bord du panneau et des cartes d'action. */
@media (min-width: 1024px) and (forced-colors: active) {
  .mega__inner { border: 2px solid CanvasText; }
  .mega__card { border: 1px solid CanvasText; }
}

/* ══════════════════════════════════════════════════════════
   Fin de page : bloc contact encre + pied de page
   ══════════════════════════════════════════════════════════ */
.site-end { background: var(--ink); color: var(--white); }
.site-end__inner {
  display: flex; flex-direction: column; gap: 48px;
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--py) var(--px) 40px;
}
/* Sous 768 px, la bulle « Appeler » (60 px + 16 px de marge) ne doit jamais
   couvrir les mentions légales ni le crédit. */
.site-end--bulle .site-end__inner { padding-bottom: 104px; }
.site-end--pied .site-end__inner { gap: 0; }

.cta-final { display: flex; flex-direction: column; gap: 24px; }
.cta-final__text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cta-final__title {
  font-size: 34px; line-height: 1.02; font-weight: 800; letter-spacing: -.03em;
  text-wrap: balance;
}
.cta-final__lead { font-size: 16px; line-height: 1.5; color: var(--on-dark); }
.cta-final__actions { flex: none; display: flex; flex-direction: column; gap: 10px; }
.cta-final__btn { padding: 0 28px; }

.site-footer {
  display: flex; flex-direction: column; gap: 28px;
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
}
.site-end--pied .site-footer { padding-top: 0; border-top: 0; }
.site-footer a:hover { color: var(--white); }

.site-footer__id { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.site-footer__logo { width: 64px; height: auto; }
.site-footer__coords {
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  font-size: 15px; line-height: 1.5; color: var(--on-dark);
}
.site-footer__phone { color: var(--white); font-weight: 700; }
.site-footer__linkedin { color: var(--white); font-weight: 600; }
.site-footer__phone:hover,
.site-footer__linkedin:hover { color: var(--yellow) !important; }

.site-footer__cols { display: none; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.site-footer__col-title {
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase;
  color: var(--yellow);
}
.site-footer__list { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.4; }
.site-footer__list a { color: var(--on-dark); }

.site-footer__acc { display: flex; flex-direction: column; }
.site-footer__details { border-top: 1px solid var(--line-dark); }
.site-footer__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; cursor: pointer; list-style: none;
}
.site-footer__summary::-webkit-details-marker { display: none; }
.site-footer__summary::marker { content: ''; }
.site-footer__summary-title { font-size: 16px; font-weight: 700; color: var(--white); }
.site-footer__chevron { flex: none; color: var(--yellow); transition: transform .2s ease-out; }
.site-footer__details[open] .site-footer__chevron { transform: rotate(180deg); }
.site-footer__details .site-footer__list { gap: 0; margin: 0 0 16px; }
.site-footer__details .site-footer__list a { display: block; padding: 9px 0; font-size: 16px; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding-top: 20px; border-top: 1px solid var(--line-dark);
  font-size: 14px; line-height: 1.2; color: var(--footer-mute);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__legal a { color: var(--on-dark); }

/* Bulle d'appel (sous 768 px) */
.call-bubble {
  position: fixed; right: 16px; z-index: 50;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 22px 0 8px;
  background: var(--yellow); color: var(--ink);
  border-radius: var(--pill); box-shadow: var(--shadow-bubble);
  font-size: 16px; font-weight: 700;
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.call-bubble:hover { color: var(--ink); }
.call-bubble__icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
}
/* Masquée pendant que le menu mobile est ouvert (main.js). */
.call-bubble.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }
/* Masquée tant que les boutons du haut de page sont à l'écran (main.js) :
   elle recouvrait l'appel à l'action principal à 375 × 667. Classe distincte
   de is-hidden pour ne pas interférer avec le menu mobile. */
.call-bubble.is-masquee { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }

@media (min-width: 768px) {
  .site-end__inner { gap: 72px; }
  .site-end--bulle .site-end__inner { padding-bottom: 40px; }
  .site-end--pied .site-end__inner { gap: 0; }
  .cta-final__title { font-size: 48px; }
  .cta-final__lead { font-size: 17px; }
  .cta-final__actions { flex-direction: row; flex-wrap: wrap; }

  .site-footer__cols {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px;
    padding-top: 28px; border-top: 1px solid var(--line-dark);
  }
  .site-footer__acc { display: none; }
  .call-bubble,
  .call-bubble-zone { display: none; }
}

@media (min-width: 1024px) {
  .cta-final { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  /* 64 px dès 1024 (Pied de page.dc.html) : à 1024, le titre passe sur
     trois lignes à gauche des boutons, comme dans la maquette. */
  .cta-final__title { font-size: 64px; }
  .cta-final__actions { flex-wrap: nowrap; }
  .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════
   Composants partagés
   ══════════════════════════════════════════════════════════ */

/* ── Fil d'Ariane ───────────────────────────────────────── */
.breadcrumb { min-width: 0; }
.breadcrumb__list {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.breadcrumb__item { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.breadcrumb__item--current { flex: 0 1 auto; overflow: hidden; }
.breadcrumb__link {
  color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
.breadcrumb__link:hover { color: var(--ink); text-decoration-color: var(--ink); }
.breadcrumb__sep { color: var(--footer-mute); }
.breadcrumb__current { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }

/* ── L'essentiel ────────────────────────────────────────── */
.essentiel {
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px 22px;
  background: var(--tint); border-radius: 28px;
}
.essentiel__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
}
.essentiel__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.essentiel__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 32px; }
.essentiel__item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 16px; line-height: 1.5; color: var(--ink); text-wrap: pretty;
}
.essentiel__check {
  flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  background: var(--ink); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) {
  .essentiel { padding: 32px 36px; }
  .essentiel--2col .essentiel__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── FAQ ────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q-text { font-size: 17px; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.faq__sign {
  position: relative; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--yellow);
}
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--ink); border-radius: 2px;
}
/* Barres de 10 × 2 px : le « + » du handoff (Urbanist 20 px / 700). */
.faq__sign::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.faq__sign::after {
  width: 2px; height: 10px;
  transform: translate(-50%, -50%);
  transition: transform .2s ease-out;
}
.faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__panel { overflow: hidden; }
.faq__a {
  max-width: 640px; margin: 0 0 20px; padding-right: 48px;
  font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty;
}
.faq__a p + p, .faq__a p + ul, .faq__a ul + p { margin-top: .75em; }
.faq__a a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--ring); text-underline-offset: 4px;
}
.faq__a a:hover { text-decoration-color: var(--ink); }
@media (min-width: 1024px) {
  .faq-list:not(.faq-list--compact) .faq__q-text { font-size: 19px; }
}

/* ── Sources ────────────────────────────────────────────── */
.sources { display: flex; flex-direction: column; gap: 14px; }
.sources__item { display: flex; align-items: flex-start; gap: 14px; }
.sources__num {
  flex: none; width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.sources__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
.sources__link {
  color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.4;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--ring); text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.sources__link:hover { text-decoration-color: var(--ink); }
.sources__host { font-size: 13px; line-height: 1.2; color: var(--muted); }

/* ── Cartes guides ──────────────────────────────────────── */
.cartes-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cartes-grid > li { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 768px) {
  .cartes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cartes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Le lien est sur le titre ; son ::after couvre toute la carte. */
.carte-guide {
  position: relative; flex: 1;
  display: flex; flex-direction: column; gap: 12px;
  height: 100%; padding: 24px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: 24px;
  transition: border-color .15s ease-out;
}
.carte-guide:hover { border-color: var(--ink); }
.carte-guide__theme {
  align-self: flex-start;
  padding: 5px 10px; border-radius: var(--pill);
  background: var(--tint); color: var(--ochre-tint);
  font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
}
.carte-guide__title { font-size: 21px; font-weight: 700; line-height: 1.25; text-wrap: pretty; }
.carte-guide__link { color: inherit; }
.carte-guide__link:hover { color: inherit; }
.carte-guide__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.carte-guide__extrait {
  font-size: 15px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.carte-guide__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 8px;
  font-size: 13px; line-height: 1.2; color: var(--muted);
}
.carte-guide__arrow {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
@supports selector(:has(a)) {
  .carte-guide__link:focus-visible { outline: none; box-shadow: none; }
  .carte-guide:has(.carte-guide__link:focus-visible) {
    outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--yellow);
  }
  .carte-guide--une:has(.carte-guide__link:focus-visible) { outline-offset: 3px; box-shadow: 0 0 0 3px var(--yellow); }
}

/* Variante « à la une » : encre, disque jaune en coin. */
.carte-guide--une {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; align-items: end;
  padding: 28px 24px; overflow: hidden;
  background: var(--ink); color: var(--white);
  border: 0; border-radius: 28px;
}
/* 200 px à partir de 768. Sous 768 px, aucun texte clair sur le disque jaune
   (contraste) : 110 px centrés sur le coin, il s'arrête à 55 px du haut, au-
   dessus du titre (68 px) ; la rangée d'étiquettes garde 26 px libres à droite
   pour qu'une étiquette de thème longue passe à la ligne avant le disque.
   Vérifié de 320 à 767 px avec les 4 thèmes (règle reprise de guides.css). */
.carte-guide__disc {
  position: absolute; right: -55px; top: -55px;
  width: 110px; height: 110px; border-radius: 50%; background: var(--yellow);
}
.carte-guide__main { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.carte-guide__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-right: 26px; }
.carte-guide__badge {
  padding: 5px 10px; border-radius: var(--pill);
  background: var(--yellow); color: var(--ink);
  font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
}
.carte-guide--une .carte-guide__theme {
  padding: 4px 10px; background: transparent; color: var(--on-dark-2);
  border: 1px solid var(--line-dark-2);
}
.carte-guide--une .carte-guide__title {
  font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance;
}
.carte-guide--une .carte-guide__extrait {
  display: block; max-width: 560px; overflow: visible;
  font-size: 16px; color: var(--on-dark-2);
}
.carte-guide__aside { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.carte-guide--une .carte-guide__meta { margin: 0; padding: 0; font-size: 14px; color: var(--on-dark); }
.carte-guide__cta {
  display: flex; align-items: center;
  height: 52px; padding: 0 24px; border-radius: var(--pill);
  background: var(--yellow); color: var(--ink);
  font-size: 16px; font-weight: 700; white-space: nowrap;
  transition: background-color .15s ease-out;
}
.carte-guide--une:hover .carte-guide__cta { background: var(--yellow-hover); }
@media (min-width: 768px) {
  .carte-guide__disc { right: -60px; top: -60px; width: 200px; height: 200px; }
  .carte-guide__tags { padding-right: 0; }
  .carte-guide--une { padding: 44px; }
  .carte-guide--une .carte-guide__title { font-size: 34px; }
}
@media (min-width: 1024px) {
  .carte-guide--une { grid-template-columns: minmax(0, 1fr) auto; }
  .carte-guide--une .carte-guide__title { font-size: 40px; }
}

/* ── Carte exemple (SerenyCalas) ────────────────────────── */
.exemple {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%; max-width: 520px; padding: 22px;
  background: var(--white); border-radius: 24px;
}
.exemple__title { font-size: 16px; font-weight: 800; line-height: 1.3; }
.exemple__mix { display: flex; flex-direction: column; gap: 10px; }
.exemple__bar { display: flex; height: 14px; border-radius: var(--pill); overflow: hidden; }
/* 36 % : part mesurée (ACC_MIX['share'] dans config.php). */
.exemple__bar-solar { width: 36%; background: var(--yellow); }
.exemple__bar-rest { flex: 1; background: var(--line); }
.exemple__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.exemple__key { display: flex; align-items: center; gap: 6px; }
.exemple__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.exemple__dot--solar { background: var(--yellow); }
.exemple__dot--rest { background: var(--line); }
.exemple__stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.exemple__stat { display: flex; flex-direction: column; gap: 4px; }
.exemple__value { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.exemple__label { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.exemple__source { font-size: 12px; line-height: 1.45; color: var(--muted); }
.exemple__source a { color: var(--ochre); text-decoration: underline; text-underline-offset: 2px; }
.exemple__source a:hover { color: var(--ink); }

/* ── Logos fournisseurs ─────────────────────────────────── */
/* Tuiles de 3 / 4 / 6 colonnes, dernière rangée centrée. Les logos gardent
   leurs tailles d'affichage (width/height), bornées par la tuile. */
.logos { --cols: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.logos__item {
  flex: 0 0 calc((100% - (var(--cols) - 1) * 10px) / var(--cols));
  min-width: 0; height: 72px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border-radius: 16px;
}
.logos__item img { max-width: 100%; height: auto; }
.logos__nom { font-size: 14px; font-weight: 600; text-align: center; }
@media (min-width: 768px) {
  .logos { --cols: 4; }
  .logos__item { height: 88px; }
}
@media (min-width: 1024px) {
  .logos { --cols: 6; }
}

/* ── Schéma ACC ─────────────────────────────────────────── */
/* SVG dans un repère 350 × 300 ; les étiquettes restent du HTML et suivent
   la largeur du dessin (unités cqi, repli en px). */
.acc-schema {
  width: 100%; max-width: 520px; margin-inline: auto; padding: 8px;
  background: var(--white); border-radius: 28px;
}
.acc-schema__figure {
  position: relative; width: 100%; aspect-ratio: 350 / 300;
  container-type: inline-size;
}
.acc-schema__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.acc-schema__labels > span {
  position: absolute; transform: translate(-50%, -50%);
  white-space: nowrap; font-weight: 700; line-height: 1.3;
}
.acc-schema__center {
  left: 50%; top: 50%; text-align: center;
  font-size: 13px; font-size: 4cqi; font-weight: 800 !important; line-height: 1.15 !important;
}
.acc-schema__label {
  padding: .4cqi 1.6cqi; border-radius: var(--pill); background: var(--white);
  font-size: 12px; font-size: 3.8cqi;
}
.acc-schema__label--bureaux   { left: 30%;     top: 26.5%; }
.acc-schema__label--commerce  { left: 70%;     top: 26.5%; }
.acc-schema__label--atelier   { left: 15.71%;  top: 63%; }
.acc-schema__label--industrie { left: 84.29%;  top: 63%; }
.acc-schema__cote {
  left: 50%; top: 78.7%;
  padding: .6cqi 2.4cqi; border-radius: var(--pill);
  background: var(--ink); color: var(--yellow);
  font-size: 13px; font-size: 4cqi;
}
.acc-schema__grid {
  left: 50%; top: 94%;
  padding: .3cqi 2.4cqi; border: 2px solid var(--ink); border: .57cqi solid var(--ink); border-radius: var(--pill);
  background: var(--white);
  font-size: 12px; font-size: 3.8cqi;
}

/* ── Étapes de l'ACC ────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; gap: 14px; }
.step__num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
}
.steps--first-yellow .step:first-child .step__num { background: var(--yellow); color: var(--ink); }
.step__body { padding-top: 4px; }
.step__title { font-size: 18px; font-weight: 700; line-height: 1.2; }
.step__text { margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--text-2); }

/* ── Notre méthode (fond encre) ─────────────────────────── */
.methode { display: flex; flex-direction: column; gap: 40px; }
.methode__intro { display: flex; flex-direction: column; gap: 12px; }
/* Titre de la méthode sans équilibrage de lignes (handoff). */
.methode .h2 { color: var(--white); text-wrap: wrap; }
.methode__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.methode__step { display: flex; flex-direction: column; gap: 14px; }
.methode__num {
  width: 52px; height: 52px; border: 2px solid var(--yellow); border-radius: 50%;
  background: var(--ink); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800;
}
.methode__step--first .methode__num { background: var(--yellow); color: var(--ink); }
.methode__title { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--white); }
.methode__text { font-size: 15px; line-height: 1.5; color: var(--on-dark); }
@media (min-width: 768px) {
  .methode__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .methode__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Bandeau Producteurs ────────────────────────────────── */
.bandeau-prod {
  display: grid; grid-template-columns: minmax(0, 1fr);
  overflow: hidden; border-radius: 28px;
  background: var(--ink); color: var(--white);
}
.bandeau-prod__media {
  position: relative; isolation: isolate;
  min-height: 300px; padding: 28px 24px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
}
.bandeau-prod__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Voile à 65 % au moins : le sur-titre jaune garde 5,7:1 sur la photo. */
.bandeau-prod__media::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(17, 17, 16, .65), rgba(17, 17, 16, .92));
}
.bandeau-prod__title {
  font-size: var(--h3); font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance;
}
.bandeau-prod__body {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 32px 28px;
}
.bandeau-prod__text { font-size: 16px; line-height: 1.5; color: var(--on-dark-3); }
.bandeau-prod__points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; }
.bandeau-prod__points li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; line-height: 1.2; }
.bandeau-prod__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }
/* « Je suis producteur → » : la flèche suit le libellé à une espace
   (≈ 4 px), pas au gap de 10 px des autres boutons. */
.bandeau-prod__cta { align-self: flex-start; gap: .25em; }
/* Lien vers le pilier Producteurs (option lien_pilier, accueil). */
.bandeau-prod__lien { color: var(--white); }
.bandeau-prod__lien:hover { color: var(--yellow); text-decoration-color: var(--yellow); }
@media (min-width: 768px) {
  .bandeau-prod__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bandeau-prod { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
}

/* ── Appel à l'action en contexte ───────────────────────── */
.cta-contexte {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  margin: 8px 0; padding: 24px; border-radius: 24px;
  color: var(--ink);
}
.cta-contexte--jaune { background: var(--yellow); }
.cta-contexte--teinte { background: var(--tint); }
.cta-contexte__title { font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.cta-contexte__text { font-size: 16px; line-height: 1.5; color: var(--ink); }
/* Bouton .btn--wrap (components.php) : 52 px sur une ligne (14 + 20 + 14 + 4). */
.cta-contexte__btn { --btn-h: 52px; padding-inline: 24px; font-size: 16px; }
/* Sur fond jaune, liens et survols en encre (jamais d'ocre). */
.cta-contexte a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cta-contexte a:not(.btn):hover { color: var(--ink); }

/* ── Tableau défilant ───────────────────────────────────── */
.tableau { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 8px 0; }
.tableau__caption { font-size: 15px; font-weight: 700; }
.tableau__scroll {
  overflow-x: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
}
.tableau__table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 15px; line-height: 1.45;
}
/* 150 px par colonne au moins : au-delà, le cadre défile. */
.tableau--cols-2 .tableau__table { min-width: 300px; }
.tableau--cols-3 .tableau__table { min-width: 450px; }
.tableau--cols-4 .tableau__table { min-width: 600px; }
.tableau--cols-5 .tableau__table { min-width: 750px; }
.tableau--cols-6 .tableau__table { min-width: 900px; }
.tableau__table thead th {
  padding: 12px 14px; vertical-align: bottom; text-align: left;
  background: var(--ink); color: var(--white); font-weight: 700;
}
.tableau__table thead th:first-child { position: sticky; left: 0; z-index: 2; }
.tableau__table tbody th {
  position: sticky; left: 0; z-index: 1;
  min-width: 140px; padding: 12px 14px; vertical-align: top; text-align: left;
  background: var(--white); font-weight: 700;
  border-top: 1px solid var(--line); box-shadow: 1px 0 0 var(--line);
}
.tableau__table td {
  min-width: 130px; padding: 12px 14px; vertical-align: top;
  border-top: 1px solid var(--line); color: var(--text-2);
}
/* Aide à toutes les largeurs, mais seulement si le cadre défile : main.js
   pose .tableau--tient quand il ne déborde pas (sans JS, l'aide reste). En
   desktop, un tableau de 4 colonnes et plus défile dans la colonne de 518 px
   des guides : sans l'aide, rien n'y signalait les colonnes coupées. */
.tableau__hint { font-size: 13px; color: var(--muted); }
.tableau--tient .tableau__hint { display: none; }

/* ── Coche ronde (réassurance du hero de l'accueil et des pages A) ── */
.tick {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
}

/* ── Pages légales et 404 ───────────────────────────────── */
.page-legale { padding-top: 8px; }
.page-legale__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.page-legale__updated { font-size: 14px; color: var(--muted); }

.error404 { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 24px; }
/* Encre surlignée de jaune, comme .mark du H1 de l'accueil : le jaune seul
   sur papier ne faisait que 1,37:1 (3:1 requis). */
.error404__code {
  align-self: flex-start;
  font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
  color: var(--ink); background: linear-gradient(transparent 62%, var(--yellow) 62%);
}
.error404__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/* ── Visibilité par palier ──────────────────────────────── */
/* Posée EN FIN de bloc mobile : à spécificité égale, l'ordre tranche (sinon
   « .btn { display: inline-flex } » afficherait les deux variantes). */
.only-desktop { display: none; }

/* ══════════════════════════════════════════════════════════
   Tablette : ≥ 768 px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .error404__actions { flex-direction: row; flex-wrap: wrap; width: auto; }
}

/* ══════════════════════════════════════════════════════════
   Desktop : ≥ 1024 px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .only-mobile { display: none !important; }
  br.only-desktop { display: inline; }
  span.only-desktop { display: inline; }
  p.only-desktop { display: block; }
}

/* ── Impression (règles de base ; contenu.css complète pour B et D) ── */
@media print {
  [data-print="hide"] { display: none !important; }
  .site-header { position: static; }
}