/* ══════════════════════════════════════════════════════════
   Aurore Énergies · Gabarit B (page de contenu) et corps de texte .prose
   Chargée par les guides, les sous-pages de contenu et les pages légales
   ($page_css = ['contenu']). Mobile-first, paliers 768 et 1024 px.
   Spécification : design_handoff_site_aurore/Page guide.dc.html et
   Prose.dc.html. Classes du gabarit : guide-… ; corps générique : .prose.
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   Corps de texte générique (.prose)
   Éléments HTML génériques seulement : il sert aussi aux mentions légales et
   à la politique de confidentialité. Les règles visent les éléments SANS
   classe (:not([class])) pour ne jamais toucher les composants insérés
   (appel à l'action, tableau défilant, encadrés…), qui ont leurs classes.
   ══════════════════════════════════════════════════════════ */
.prose {
  display: flex; flex-direction: column; gap: 20px;
  min-width: 0; max-width: 520px;          /* 520 px à 17 px ≈ 70 caractères (pas 70ch) */
  font-size: 17px; line-height: 1.65; color: var(--text-2);
}

.prose h2:not([class]) {
  font-size: 28px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); text-wrap: balance; overflow-wrap: break-word;
}
.prose > h2:not([class]):not(:first-child) { margin-top: 28px; }
.prose h3:not([class]) {
  margin-top: 12px;
  font-size: 21px; line-height: 1.25; font-weight: 700;
  color: var(--ink); text-wrap: balance; overflow-wrap: break-word;
}
.prose h4:not([class]) {
  margin-top: 8px;
  font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink);
}
.prose > :is(h3, h4):not([class]):first-child { margin-top: 0; }
.prose p:not([class]) { text-wrap: pretty; }

.prose strong, .prose b { font-weight: 700; color: var(--ink); }

.prose a:not([class]) {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--ring); text-underline-offset: 4px;
  overflow-wrap: break-word;
  transition: text-decoration-color .15s ease-out;
}
.prose a:not([class]):hover { color: var(--ink); text-decoration-color: var(--ink); }

/* Listes : puce encre de 8 px dans un anneau jaune ; numéro dans un cercle encre.
   Pas de flex sur <li> : un « <strong>Libellé :</strong> valeur » reste en ligne. */
.prose ul:not([class]),
.prose ol:not([class]) { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
.prose ul:not([class]) > li,
.prose ol:not([class]) > li { position: relative; line-height: 1.6; }
/* Comme Prose.dc.html : puce au bord de la colonne (son anneau de 3 px déborde
   à gauche), 12 px d'écart, texte à 20 px. */
.prose ul:not([class]) > li { padding-left: 20px; }
.prose ul:not([class]) > li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 3px var(--yellow);
}
.prose ol:not([class]) { counter-reset: prose-ol; }
.prose ol:not([class]) > li { padding-left: 38px; counter-increment: prose-ol; }
.prose ol:not([class]) > li::before {
  content: counter(prose-ol); position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--yellow);
  font-size: 13px; font-weight: 800; line-height: 26px; text-align: center;
}
.prose li > :is(ul, ol):not([class]) { margin-top: 10px; }

/* Citation : 22 px, 600, guillemet jaune. */
.prose blockquote:not([class]) { position: relative; margin: 8px 0; padding-left: 42px; color: var(--ink); }
.prose blockquote:not([class])::before {
  content: '“'; position: absolute; left: 0; top: 0;
  font-size: 56px; line-height: .8; font-weight: 800; color: var(--yellow);
}
.prose blockquote:not([class]) p { font-size: 22px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.prose blockquote:not([class]) > * + * { margin-top: 8px; }
.prose blockquote:not([class]) :is(cite, footer) {
  display: block; font-style: normal; font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--muted);
}

/* Figure : rayon 20 px, légende de 14 px. */
.prose figure:not([class]) { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.prose figure:not([class]) img { width: 100%; border-radius: 20px; }
.prose figcaption:not([class]) { font-size: 14px; line-height: 1.45; color: var(--muted); }

/* Tableau brut (pages légales, sans le composant du socle) : même rendu que
   .tableau, défilement dans son cadre. Les tableaux des guides passent par
   contenu_corps(), qui les met au format .tableau (style.css). */
.prose table:not([class]) {
  display: block; max-width: 100%; overflow-x: auto;
  border-collapse: separate; border-spacing: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  font-size: 15px; line-height: 1.45;
}
.prose table:not([class]) :is(th, td) {
  min-width: 130px; padding: 12px 14px; vertical-align: top; text-align: left;
  border-top: 1px solid var(--line);
}
.prose table:not([class]) thead th { border-top: 0; background: var(--ink); color: var(--white); font-weight: 700; vertical-align: bottom; }
.prose table:not([class]) tbody th { color: var(--ink); font-weight: 700; }

.prose hr:not([class]) { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid var(--line); }

@media (min-width: 768px) {
  .prose h2:not([class]) { font-size: 34px; }
  .prose h3:not([class]) { font-size: 23px; }
}

/* ══════════════════════════════════════════════════════════
   Composants à insérer dans le corps (voir dev/schema-contenu.md)
   ══════════════════════════════════════════════════════════ */

/* ── Bon à savoir (teinte, ampoule) · Attention (blanc, bordure encre) ── */
.guide-encadre {
  display: flex; gap: 14px;
  margin: 8px 0; padding: 22px;
  border-radius: 24px; color: var(--ink);
}
.guide-encadre--bon { background: var(--tint); }
.guide-encadre--attention { background: var(--white); border: 2px solid var(--ink); }
.guide-encadre__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.guide-encadre--bon .guide-encadre__icon { background: var(--yellow); color: var(--ink); }
.guide-encadre--attention .guide-encadre__icon { background: var(--ink); color: var(--yellow); }
.guide-encadre__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guide-encadre__title { font-size: 16px; font-weight: 800; line-height: 1.25; }
.guide-encadre__text { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.guide-encadre__text > * + * { margin-top: .6em; }
.guide-encadre__text ul:not([class]),
.guide-encadre__text ol:not([class]) { gap: 6px; }

/* ── Chiffre clé : bordure encre, disque jaune en coin ── */
.guide-chiffre {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0; padding: 24px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 24px;
}
.guide-chiffre__disc {
  position: absolute; right: -28px; top: -28px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--yellow);
}
/* 48 px comme Prose.dc.html dès 455 px de large (donc dans la colonne de
   520 px du desktop), puis réduit avec la place disponible (100vw - 140 px
   sous 768 px) : « 26,35 €/MWh » et « 3,13 €/MWh HT » tiennent sur une ligne
   de 320 à 454 px au lieu de couper le nombre de son unité (38 px à 390,
   33 px à 360, 27 px à 320). Pas d'espace insécable dans les données :
   overflow-wrap couperait alors au milieu de « €/MWh ». */
.guide-chiffre__valeur {
  position: relative; padding-right: 48px;
  font-size: clamp(27px, 15.4vw - 22px, 48px); line-height: 1; font-weight: 800; letter-spacing: -.03em;
  overflow-wrap: break-word;
}
.guide-chiffre__label { position: relative; font-size: 17px; line-height: 1.35; font-weight: 700; }
.guide-chiffre__source { position: relative; font-size: 13px; line-height: 1.2; color: var(--muted); }

/* ── Emplacement d'image nommé (visuel à produire) ── */
.guide-emplacement { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.guide-emplacement__cadre {
  aspect-ratio: 3 / 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 20px; text-align: center;
  background: var(--tint); border: 2px dashed var(--ring); border-radius: 20px;
}
.guide-emplacement--4-3 .guide-emplacement__cadre { aspect-ratio: 4 / 3; }
.guide-emplacement--16-9 .guide-emplacement__cadre { aspect-ratio: 16 / 9; }
.guide-emplacement--1-1 .guide-emplacement__cadre { aspect-ratio: 1; }
.guide-emplacement__label {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ochre-tint);
}
.guide-emplacement__format { max-width: 300px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); }

/* Appel à l'action en contexte et tableau défilant : composants du socle
   (.cta-contexte, .tableau dans style.css), marges 8 px déjà posées. Le
   bouton du CTA (.btn--wrap) garde la flèche au bout du texte sur deux
   lignes : règle du socle. Dans la colonne de lecture, légende et aide du
   tableau à l'interligne « normal » du handoff (1,2 en Urbanist) : sans cela,
   elles hériteraient du 1,65 de .prose. */
.prose .tableau__caption,
.prose .tableau__hint { line-height: 1.2; }

/* ══════════════════════════════════════════════════════════
   Mise en page du gabarit B
   Mobile : une colonne. 768 : 1fr | 520 | 1fr, en-tête pleine largeur.
   1024 : minmax(200px,1fr) | minmax(0,520px) | minmax(0,1fr), sommaire collant
   en colonne 1, article en colonne 2, en-tête en colonnes 2 à 3.
   ══════════════════════════════════════════════════════════ */
.guide {
  display: grid; grid-template-columns: minmax(0, 1fr);
  row-gap: 32px;
  padding-top: 8px;
}

/* ── En-tête de l'article ── */
.guide__hero {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 20px;
  min-width: 0; max-width: 820px;
}
.guide__theme {
  align-self: flex-start;
  padding: 6px 12px; 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;
  transition: background-color .15s ease-out, color .15s ease-out;
}
/* Sur fond jaune, jamais d'ocre : le survol passe en encre. */
.guide__theme:hover { background: var(--yellow); color: var(--ink); }
.guide__chapo { max-width: 680px; }

.guide__auteur { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.guide__auteur-photo {
  flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--yellow);
}
.guide__auteur-photo img { width: 44px; height: auto; }
.guide__auteur-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.35; }
.guide__auteur-nom {
  align-self: flex-start; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color .15s ease-out;
}
.guide__auteur-nom:hover { color: var(--ink); text-decoration-color: var(--ring); }
.guide__meta { color: var(--muted); }

/* ── Colonne de l'article ── */
.guide__body {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 32px;
  min-width: 0;
}

/* ── Sommaire : colonne collante (desktop), <details> replié (mobile) ── */
.guide__toc { display: none; }
.guide__toc-title {
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ochre);
}
.guide__toc-list { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.guide__toc-link {
  display: block; margin-left: -1px; padding: 8px 0 8px 14px;
  border-left: 2px solid transparent;
  font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--muted);
  transition: color .15s ease-out, border-color .15s ease-out;
}
.guide__toc-link:hover { color: var(--ink); }
/* Section en cours (toc.js) : aria-current="true". */
.guide__toc-link[aria-current] { color: var(--ink); font-weight: 700; border-left-color: var(--ink); }

.guide__toc-mobile {
  padding: 0 20px;
  background: var(--white); border: 1px solid var(--line); border-radius: 20px;
}
.guide__toc-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 800;
}
.guide__toc-summary::-webkit-details-marker { display: none; }
.guide__toc-summary::marker { content: ''; }
.guide__toc-chevron { flex: none; transition: transform .2s ease-out; }
.guide__toc-mobile[open] .guide__toc-chevron { transform: rotate(180deg); }
.guide__toc-mlist { margin: 0 0 16px; border-top: 1px solid var(--line); }
.guide__toc-mlink {
  display: flex; gap: 12px; padding: 11px 0;
  font-size: 16px; line-height: 1.2; font-weight: 600; color: var(--ink);   /* 11 + 19,2 + 11 ≈ 41 px */
}
.guide__toc-mlink:hover { text-decoration: underline; text-decoration-color: var(--ring); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.guide__toc-num { flex: none; width: 22px; font-weight: 800; color: var(--ochre); }

/* ── Sources, FAQ ── */
.guide__section { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.guide__h2 {
  margin-top: 16px;
  font-size: 28px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em;
  text-wrap: balance; overflow-wrap: break-word;
}

/* ── Encadré auteur ── */
.guide-auteur {
  display: flex; align-items: flex-start; gap: 18px;
  max-width: 520px; padding: 24px;
  background: var(--white); border-radius: 24px;
}
.guide-auteur__photo {
  flex: none; width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--yellow);
}
.guide-auteur__photo img { width: 68px; height: auto; }
.guide-auteur__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.guide-auteur__nom { font-size: 18px; font-weight: 800; line-height: 1.2; }
.guide-auteur__role { font-size: 14px; line-height: 1.2; color: var(--muted); }
.guide-auteur__bio { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.guide-auteur__lien {
  align-self: flex-start;
  font-size: 15px; 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;
}
.guide-auteur__lien:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ── À lire aussi (fond blanc, bord à bord) ── */
.guide-lire { display: flex; flex-direction: column; gap: 28px; }

/* ══════════════════════════════════════════════════════════
   Tablette : ≥ 768 px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .guide { grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr); }
  .guide__body { grid-column: 2; }
  .guide__h2 { font-size: 34px; }
}

/* ══════════════════════════════════════════════════════════
   Desktop : ≥ 1024 px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .guide {
    grid-template-columns: minmax(200px, 1fr) minmax(0, 520px) minmax(0, 1fr);
    column-gap: clamp(48px, 7.692vw - 30.77px, 80px);   /* 48 → 80 px de 1024 à 1440 */
  }
  .guide__hero { grid-column: 2 / 4; }
  .guide__body { grid-column: 2; grid-row: 2; }

  /* Contenu collé sous l'en-tête (92 px) + 24 px. Le padding de 6 px (retiré
     du « top » et compensé par la marge négative) garde la place de l'anneau
     de focus quand la liste défile (sommaire très long).
     Rangées 2 à 3 comme Page guide.dc.html : la 3e rangée, vide, ajoute
     l'écart de 32 px sous l'article avant le padding de la section (sans
     elle, « À lire aussi » remonte de 32 px par rapport au handoff). */
  .guide__toc {
    grid-column: 1; grid-row: 2 / span 2; align-self: start;
    position: sticky; top: calc(var(--header-h) + 18px);
    display: flex; flex-direction: column; gap: 12px;
    max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto;
    margin: -6px 0 0 -6px; padding: 6px 8px 6px 6px;
  }
  .guide__toc-mobile { display: none; }
}

/* ══════════════════════════════════════════════════════════
   Impression (règles du handoff, gabarits B et D)
   Masqués : en-tête, menus, sommaire, filtres, bulle, appels à l'action,
   « À lire aussi », bloc contact (data-print="hide"). Auteur et date de mise
   à jour restent dans l'en-tête de l'article.
   ══════════════════════════════════════════════════════════ */
@media print {
  [data-print="hide"] { display: none !important; }
  body, main, main * { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .prose a[href^="http"]::after,
  .sources a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; overflow-wrap: anywhere; }
  table, figure, aside, blockquote, [data-print="keep"] { break-inside: avoid; }
  .guide__toc, .sommaire { position: static !important; }

  .guide { display: block; padding-top: 0; }
  .guide__hero, .guide__chapo, .guide__section, .guide-auteur, .prose { max-width: none; }
  .guide__body { margin-top: 24px; gap: 24px; }
  h2, h3 { break-after: avoid; }

  /* FAQ dépliée à l'impression (toc.js ouvre aussi les <details>). */
  details > * { display: block !important; }
  details::details-content { display: block !important; content-visibility: visible !important; }
  .faq__panel { height: auto !important; }
  .faq__sign { display: none; }

  /* Puces et pastilles dessinées au trait : les fonds ne s'impriment pas. */
  .prose ul:not([class]) > li::before { background: none; border: 2px solid #000; box-shadow: none; }
  .prose ol:not([class]) > li::before { background: none; color: #000; border: 1.5px solid #000; line-height: 23px; }
  .prose blockquote:not([class])::before { color: #000; }
  .guide-chiffre__disc, .guide__auteur-photo, .guide-auteur__photo { display: none; }
  .guide-encadre__icon, .essentiel__check, .sources__num { border: 1.5px solid #000; }
  /* Les aplats disparaissent : un filet garde le contour des encadrés. */
  .essentiel, .guide-encadre--bon, .guide-auteur { border: 1px solid #000; }

  .tableau__scroll { overflow: visible; border-color: #000; border-radius: 0; }
  .tableau__table { min-width: 0 !important; }
  .tableau__table th { position: static !important; }
  .tableau__table thead th { border-bottom: 2px solid #000; }
  .tableau__hint { display: none; }
}