/*
Theme Name: Sans Récif
Theme URI: https://saintaubin.mu/
Author: Seobooster Ltd
Description: Thème code-pur écrit pour saintaubin.mu — magazine du sud de l'île Maurice. Palette minérale (basalte, terre rouge), typographie Darker Grotesque + Andada Pro self-hosted. Aucun page-builder.
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: sansrecif
*/

/* ==========================================================================
   0. Polices self-hosted
   ========================================================================== */
@font-face {
  font-family: 'Darker Grotesque';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/darker-grotesque-variable-latin.woff2') format('woff2-variations'),
       url('fonts/darker-grotesque-variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Andada Pro';
  font-style: normal;
  font-weight: 400 840;
  font-display: swap;
  src: url('fonts/andada-pro-variable-latin.woff2') format('woff2-variations'),
       url('fonts/andada-pro-variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Andada Pro';
  font-style: italic;
  font-weight: 400 840;
  font-display: swap;
  src: url('fonts/andada-pro-italic-variable-latin.woff2') format('woff2-variations'),
       url('fonts/andada-pro-italic-variable-latin.woff2') format('woff2');
}

/* ==========================================================================
   1. Jetons — clair par défaut sur :root nu, sombre sous prefers-color-scheme
   ========================================================================== */
:root {
  --brume: #E2E6DD;
  --feuille: #F0F2EC;
  --basalte: #0F1417;
  --coulee: #1C2529;
  --laterite: #8E2C12;
  --sourde: #57645B;
  --ecume: #F4F8F9;

  --grille-max: 1200px;
  --gouttiere: 24px;
  --marge: clamp(20px, 5vw, 64px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brume: #0F1417;
    --feuille: #1C262B;
    --basalte: #EAEFF1;
    --laterite: #E8734A;
    --sourde: #93A0A7;
  }
}

/* Les bandes sombres (--coulee) sont un contexte FIXE, identique dans les deux thèmes :
   accent et texte secondaire y sont figés pour ne jamais tomber dans les croisements
   interdits mesurés en DA (laterite clair sur coulee = 1,87 ; sourde clair sur coulee = 2,51). */
.sr-band--coulee,
.sr-footer {
  --laterite: #E8734A;
  --sourde: #93A0A7;
  background: var(--coulee);
  color: var(--ecume);
}

/* ==========================================================================
   2. Reset minimal
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--brume);
  color: var(--basalte);
  font-family: 'Andada Pro', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.6;
  font-optical-sizing: auto;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--laterite); outline-offset: 2px; }

/* ==========================================================================
   3. Typographie
   ========================================================================== */
h1, h2, h3, .sr-chiffre {
  font-family: 'Darker Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.92;
  margin: 0;
  color: var(--basalte);
}
h1 { font-size: clamp(40px, 6.4vw, 76px); }
h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; }
h3 { font-size: clamp(22px, 2.6vw, 26px); font-weight: 700; line-height: 1.05; }
p { margin: 0 0 1em; }
.sr-chapo {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 21px);
  color: var(--sourde);
}
.sr-legende {
  font-family: 'Andada Pro', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--sourde);
}
table { border-collapse: collapse; width: 100%; font-variant-numeric: lining-nums tabular-nums; }
td, th { padding: 8px 12px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--sourde) 35%, transparent); }

/* Cote — le nom porte sa cote (procédé 2, tenu sur 100% des pages) */
.sr-cote {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}
.sr-cote__m {
  font-family: 'Darker Grotesque', sans-serif;
  font-variant-caps: small-caps;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--laterite);
  white-space: nowrap;
}

/* ==========================================================================
   4. Grille et bandes
   ========================================================================== */
.sr-conteneur {
  max-width: var(--grille-max);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.sr-band { padding-block: clamp(48px, 8vw, 96px); }
.sr-band--brume { background: var(--brume); }
.sr-band--feuille { background: var(--feuille); }

/* Mur de coulée (procédé 7) — trame de colonnes basaltiques, sans image */
.sr-band--coulee {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.055) 0 2px, transparent 2px 23px,
      rgba(255,255,255,0.04) 23px 25px, transparent 25px 61px,
      rgba(255,255,255,0.05) 61px 64px, transparent 64px 90px,
      rgba(255,255,255,0.035) 90px 91px, transparent 91px 118px),
    var(--coulee);
}

/* ==========================================================================
   5. En-tête / navigation (P-004 : flex sans puces)
   ========================================================================== */
.sr-entete {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--brume) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--sourde) 30%, transparent);
}
.sr-entete__barre {
  max-width: var(--grille-max);
  margin-inline: auto;
  padding: 14px var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.sr-logo { height: 40px; width: auto; color: var(--basalte); flex-shrink: 0; }
.sr-logo a { display: block; color: inherit; text-decoration: none; }
.sr-nav { display: flex; align-items: center; gap: 28px; }
.sr-nav ul { display: flex; gap: 26px; }
.sr-nav a {
  text-decoration: none;
  font-family: 'Darker Grotesque', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.sr-nav a:hover, .sr-nav a[aria-current="page"] { border-bottom-color: var(--laterite); }
.sr-entete__action {
  font-family: 'Darker Grotesque', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  background: var(--laterite);
  color: var(--ecume);
  padding: 10px 18px;
  text-decoration: none;
  white-space: nowrap;
}
.sr-burger { display: none; }

@media (max-width: 780px) {
  .sr-nav ul { display: none; }
  .sr-burger {
    display: inline-flex; align-items:center; justify-content:center;
    width: 44px; height: 44px; background: none; border: 1px solid var(--basalte);
  }
  .sr-burger span, .sr-burger span::before, .sr-burger span::after {
    content: ""; display: block; width: 20px; height: 2px; background: var(--basalte);
    position: relative;
  }
  .sr-burger span::before { position: absolute; top: -6px; }
  .sr-burger span::after { position: absolute; top: 6px; }
  .sr-nav.is-ouvert ul {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; inset: 64px 0 0 0; background: var(--brume);
    padding: 24px var(--marge); z-index: 39; overflow-y: auto;
  }
  .sr-nav.is-ouvert a { display: block; padding: 14px 0; font-size: 22px; border-bottom: 1px solid color-mix(in srgb, var(--sourde) 25%, transparent); }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.sr-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  color: var(--ecume);
  overflow: visible;
}
.sr-hero__media { position: absolute; inset: 0; overflow: hidden; }
.sr-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.sr-hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,20,23,0.86) 0%, rgba(15,20,23,0.38) 42%, rgba(15,20,23,0.12) 68%, rgba(15,20,23,0.28) 100%);
}
.sr-hero__corps {
  position: relative; z-index: 2;
  max-width: var(--grille-max); margin-inline: auto; width: 100%;
  padding: 0 var(--marge) 56px;
}
.sr-hero__surtitre {
  font-family: 'Andada Pro', serif; font-style: italic; font-size: 16px;
  color: var(--ecume); opacity: 0.85; margin-bottom: 8px;
}
.sr-hero__titre { color: var(--ecume); max-width: 14ch; }
.sr-hero__chapo { color: var(--ecume); max-width: 42ch; margin-top: 14px; font-style: italic; opacity: 0.92; }

/* Ligne de cote (procédé 4) — le seul traitement photo du site */
.sr-photo-cote { position: relative; }
.sr-photo-cote__ligne {
  position: absolute; left: 0; right: -1px; height: 1px; background: var(--laterite);
  z-index: 3;
}
.sr-photo-cote__valeur {
  position: absolute; right: calc(var(--marge) * -1 + 8px);
  transform: translate(100%, -50%);
  font-family: 'Darker Grotesque', sans-serif; font-weight: 800; font-size: 15px;
  color: var(--laterite); white-space: nowrap;
  padding-left: 10px; border-left: 1px solid var(--laterite);
}
@media (max-width: 780px) {
  .sr-photo-cote__valeur { position: static; transform: none; display: inline-block; margin-top: 4px; border-left: none; padding-left: 0; }
}

/* ==========================================================================
   7. LE BULLETIN DU SUD (procédé 5)
   ========================================================================== */
.sr-bulletin__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.sr-bulletin__date { font-family: 'Darker Grotesque', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sourde); }
.sr-bulletin__releve { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid color-mix(in srgb, var(--ecume) 20%, transparent); }
.sr-releve__label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sourde); margin-bottom: 6px; }
.sr-releve__valeur { font-family: 'Darker Grotesque', sans-serif; font-weight: 800; font-size: clamp(36px, 4vw, 52px); color: var(--ecume); line-height: 1; }
.sr-releve__unite { font-size: 16px; font-weight: 400; opacity: 0.7; margin-left: 4px; }
.sr-bulletin__dernier { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: center; }
@media (max-width: 780px) {
  .sr-bulletin__releve { grid-template-columns: 1fr; gap: 20px; }
  .sr-bulletin__dernier { grid-template-columns: 1fr; }
}
.sr-bulletin__dernier img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.sr-bulletin__dernier h3 { color: var(--ecume); }
.sr-bulletin__dernier a { text-decoration: none; }
.sr-bulletin__lienplus { display: inline-block; margin-top: 24px; font-family: 'Darker Grotesque', sans-serif; font-weight: 700; color: var(--laterite); text-decoration: none; border-bottom: 2px solid var(--laterite); }

/* ==========================================================================
   8. LA COUPE DU SUD (procédé 1)
   ========================================================================== */
.sr-coupe__entete { max-width: 62ch; margin-bottom: 32px; }
.sr-coupe__scroll { overflow-x: hidden; }
.sr-coupe svg { width: 100%; height: auto; display: block; }
.sr-coupe text { font-family: 'Darker Grotesque', sans-serif; }
.sr-coupe__nom { font-weight: 800; font-size: 17px; fill: var(--basalte); }
.sr-coupe__valeur { font-weight: 700; font-size: 13px; fill: var(--laterite); letter-spacing: 0.04em; }
@media (max-width: 780px) {
  .sr-coupe__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .sr-coupe svg { width: 1100px; max-width: none; }
}

/* ==========================================================================
   9. LES DOSSIERS (grille de cartes, photo obligatoire)
   ========================================================================== */
.sr-grille-titre { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 12px; }
.sr-dossiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gouttiere); }
.sr-carte { text-decoration: none; color: inherit; display: block; }
.sr-carte__photo { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.sr-carte__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sr-carte:hover .sr-carte__photo img { transform: scale(1.035); }
.sr-carte__corps { padding-top: 16px; }
.sr-carte__rubrique { font-family: 'Darker Grotesque', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--laterite); margin-bottom: 6px; display: block; }
.sr-carte__titre { font-size: 24px; margin-bottom: 8px; }
.sr-carte__texte { font-size: 16px; color: var(--sourde); }
@media (max-width: 980px) { .sr-dossiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .sr-dossiers { grid-template-columns: 1fr; } }

/* ==========================================================================
   10. L'ÉCHELLE (procédé 3)
   ========================================================================== */
.sr-echelle__intro { max-width: 56ch; margin-bottom: 40px; color: var(--ecume); }
.sr-echelle {
  display: flex; flex-direction: column;
  border-left: 2px solid var(--laterite);
}
.sr-echelle__item {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 40px);
  padding: 16px 0 16px clamp(20px, 4vw, 40px);
  border-bottom: 1px solid color-mix(in srgb, var(--ecume) 12%, transparent);
}
.sr-echelle__item:last-child { border-bottom: none; }
.sr-echelle__num { font-family: 'Darker Grotesque', sans-serif; font-weight: 800; color: var(--ecume); font-size: 44px; line-height: 0.9; white-space: nowrap; }
.sr-echelle__item--maitre .sr-echelle__num { font-size: clamp(72px, 10vw, 132px); }
.sr-echelle__legende { color: var(--sourde); font-size: 16px; font-style: italic; }
.sr-echelle__legende strong { color: var(--ecume); font-style: normal; font-weight: 700; }
@media (max-width: 620px) { .sr-echelle__item { flex-direction: column; gap: 4px; } }

/* ==========================================================================
   11. LE JOURNAL
   ========================================================================== */
.sr-journal { display: flex; flex-direction: column; }
.sr-journal__item {
  display: grid; grid-template-columns: 140px 1fr auto; gap: 24px; align-items: center;
  padding: 22px 0; text-decoration: none; color: inherit;
  border-bottom: 1px solid color-mix(in srgb, var(--sourde) 30%, transparent);
}
.sr-journal__vignette { aspect-ratio: 3/2; overflow: hidden; }
.sr-journal__vignette img { width: 100%; height: 100%; object-fit: cover; }
.sr-journal__meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.sr-journal__rubrique { font-family: 'Darker Grotesque', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--laterite); }
.sr-journal__date { font-size: 13px; color: var(--sourde); }
.sr-journal__titre { font-size: 22px; }
.sr-journal__fleche { font-family: 'Darker Grotesque', sans-serif; font-size: 28px; color: var(--sourde); }
@media (max-width: 700px) {
  .sr-journal__item { grid-template-columns: 88px 1fr; }
  .sr-journal__fleche { display: none; }
}
details.sr-journal__repli { margin-top: 8px; }
details.sr-journal__repli > summary { cursor: pointer; font-family:'Darker Grotesque',sans-serif; font-weight:700; padding: 16px 0; }

/* ==========================================================================
   12. LA BANDE D'ACTION — bord d'écume (procédé 6) + formulaire vertical
   ========================================================================== */
.sr-action {
  position: relative;
  clip-path: polygon(0% 7%, 5% 1%, 12% 5%, 20% 0%, 28% 6%, 37% 1%, 46% 5%, 55% 0%, 64% 6%, 73% 1%, 82% 5%, 90% 0%, 100% 6%, 100% 100%, 0% 100%);
  padding-top: clamp(72px, 10vw, 128px) !important;
}
.sr-action__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.sr-action__titre { max-width: 16ch; }
.sr-action__texte { color: var(--sourde); max-width: 44ch; margin-top: 16px; }
@media (max-width: 860px) { .sr-action__grille { grid-template-columns: 1fr; gap: 32px; } }

/* Habillage local du formulaire partagé [sb_form] — le composant pose --sblf-a/--sblf-b
   directement sur .sblf via son propre <style>, d'où le !important pour reprendre la main
   avec l'accent du site plutôt que le vert générique. Libellés (besoin/délai) réécrits
   dans functions.php via le filtre sb_form_questions — jamais le texte générique réseau. */
.sr-form-hote .sblf {
  --sblf-a: var(--laterite) !important;
  --sblf-b: color-mix(in srgb, var(--laterite) 12%, var(--feuille)) !important;
  margin: 0; max-width: none; font-family: 'Andada Pro', serif;
}
.sr-form-hote .sblf-c { border-radius: 0; }
.sr-form-hote input, .sr-form-hote textarea { border-radius: 0; }
.sr-form-hote .sblf-b1 { border-radius: 0; font-family:'Darker Grotesque',sans-serif; letter-spacing:0.02em; }
.sr-form-hote .sblf-bar i { border-radius: 0; }

/* ==========================================================================
   13. PIED DE PAGE — dense + ourlet de non-affiliation (procédé 8)
   ========================================================================== */
.sr-footer { padding-top: clamp(56px,8vw,88px); }
.sr-footer__grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid color-mix(in srgb, var(--ecume) 15%, transparent); }
.sr-footer__col h4 { font-family:'Darker Grotesque',sans-serif; font-weight:700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--laterite); margin-bottom: 16px; }
.sr-footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.sr-footer__col a { text-decoration: none; color: var(--ecume); opacity: 0.88; font-size: 15px; }
.sr-footer__col a:hover { opacity: 1; text-decoration: underline; }
.sr-footer__marque { color: var(--ecume); }
.sr-footer__marque .sr-logo { height: 44px; color: var(--ecume); margin-bottom: 14px; }
.sr-footer__baseline { font-style: italic; opacity: 0.85; max-width: 34ch; margin-bottom: 16px; }
.sr-footer__contact { font-size: 15px; opacity: 0.9; }
@media (max-width: 860px) { .sr-footer__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sr-footer__grille { grid-template-columns: 1fr; } }

.sr-ourlet {
  margin-top: 40px;
  border-top: 2px solid var(--laterite);
  padding-top: 20px;
  padding-bottom: 28px;
}
.sr-ourlet p {
  font-family: 'Andada Pro', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ecume);
  max-width: 78ch;
  margin: 0 0 10px;
}
.sr-ourlet__copyright { font-size: 13px; opacity: 0.75; margin-top: 14px; }

/* ==========================================================================
   14. Pages contenu (pilier / article / page)
   ========================================================================== */
.sr-fil { font-family:'Darker Grotesque',sans-serif; font-size: 14px; color: var(--sourde); padding: 18px var(--marge) 0; max-width: var(--grille-max); margin-inline:auto; }
.sr-fil a { text-decoration: none; color: var(--sourde); }
.sr-fil a:hover { color: var(--laterite); }

.sr-article { max-width: 74ch; margin-inline: auto; padding: 48px var(--marge) 0; }
.sr-article__entete { margin-bottom: 32px; }
.sr-article__meta { display:flex; gap: 14px; align-items:baseline; margin-bottom: 12px; font-size: 14px; color: var(--sourde); }
.sr-article__rubrique { font-family:'Darker Grotesque',sans-serif; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color: var(--laterite); }
.sr-article__corps h2 { margin-top: 2em; margin-bottom: 0.5em; font-size: 30px; }
.sr-article__corps h3 { margin-top: 1.6em; margin-bottom: 0.5em; }
.sr-article__corps p { max-width: none; }
.sr-article__corps a { color: var(--laterite); text-decoration-thickness: 1.5px; }
.sr-article__corps figure { margin: 2.4em 0; }
.sr-article__corps figcaption { margin-top: 10px; }

.sr-fait {
  background: var(--feuille);
  border-left: 3px solid var(--laterite);
  padding: 18px 22px;
  margin: 2em 0;
  font-size: 16px;
}
.sr-fait__valeur { font-family:'Darker Grotesque',sans-serif; font-weight: 800; font-size: 32px; color: var(--laterite); display:block; margin-bottom:4px; }

.sr-anneau {
  margin: 56px 0 0;
  padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--sourde) 30%, transparent);
}
.sr-anneau h3 { margin-bottom: 20px; }
.sr-anneau__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sr-anneau__item { text-decoration:none; color:inherit; }
.sr-anneau__item .sr-legende { display:block; margin-top:6px; }
@media (max-width: 700px) { .sr-anneau__liste { grid-template-columns: 1fr; } }

.sr-pilier__liste-rubrique { max-width: var(--grille-max); margin-inline:auto; padding: 0 var(--marge); margin-top: 64px; }

/* ==========================================================================
   15. Navigation basse mobile
   ========================================================================== */
.sr-nav-basse {
  display: none;
}
@media (max-width: 780px) {
  .sr-nav-basse {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--coulee); border-top: 1px solid color-mix(in srgb, var(--ecume) 15%, transparent);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sr-nav-basse a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 4px 8px; text-decoration: none; color: var(--ecume); opacity: 0.62;
    font-family:'Darker Grotesque',sans-serif; font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase;
    min-height: 44px; position: relative;
  }
  .sr-nav-basse a[aria-current="page"] { opacity: 1; }
  .sr-nav-basse a[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 18px; height: 3px; background: var(--laterite); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
  }
  body { padding-bottom: 62px; }
}

/* ==========================================================================
   16. Pages légales / 404 / bandeau non-affiliation générique
   ========================================================================== */
.sr-legal { max-width: 74ch; margin-inline:auto; padding: 48px var(--marge) 96px; }
.sr-legal h2 { font-size: 26px; margin-top: 1.6em; }
.sr-bandeau-affiliation {
  background: var(--feuille);
  border: 1px solid color-mix(in srgb, var(--laterite) 40%, transparent);
  border-left: 4px solid var(--laterite);
  padding: 18px 22px;
  font-size: 15px;
  margin: 0 0 2em;
}
.sr-404 { min-height: 60vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; max-width: var(--grille-max); margin-inline:auto; padding: 0 var(--marge); }
.sr-404 .sr-chiffre { font-size: clamp(90px,16vw,220px); color: var(--laterite); }

/* Correctif 27/08/2026 — les titres des bandes sombres gardaient la couleur d'encre
   du mode CLAIR : « Le Bulletin du Sud » et « L'Échelle » sortaient à 1,19:1, donc
   invisibles. Le contexte --coulee est fixe : ses titres suivent son texte. */
.sr-band--coulee h1,
.sr-band--coulee h2,
.sr-band--coulee h3,
.sr-band--coulee .sr-chiffre,
.sr-footer h1,
.sr-footer h2,
.sr-footer h3 {
  color: var(--ecume);
}

/* Correctif 27/08/2026 — deux paires mesurées sous 4,5:1 par chk_contraste_reel.
   · le bouton d'en-tête : ecume sur laterite = 2,81:1 → laterite assombri POUR CE
     BOUTON SEULEMENT (#B84A1A = 4,87:1), l'accent de la DA reste inchangé ailleurs.
   · le texte d'aide du formulaire réseau (.sblf-aide) : 3,41 à 4,09:1 → redéfini ici,
     dans le thème, et non dans le mu-plugin partagé par tout le parc. */
.sr-entete__action { background: #B84A1A; }
.sblf .sblf-aide { color: #5A6773; }
@media (prefers-color-scheme: dark) {
  .sblf .sblf-aide { color: #8D9AA8; }
}

/* Correctif 27/08/2026 — DÉBORDEMENT HORIZONTAL SUR MOBILE (mesuré : viewport 390 px,
   scrollWidth 503 px). La barre d'en-tête aligne logo + burger + bouton sans les
   réduire : le bouton « Poser une question » finissait à 503 px, et TOUTE la page
   défilait latéralement. On resserre au lieu de masquer le bouton — c'est lui qui
   capte le lead. */
@media (max-width: 560px) {
  .sr-entete__barre { gap: 10px; }
  .sr-logo { height: 32px; }
  .sr-burger { width: 38px; height: 38px; flex-shrink: 0; }
  .sr-entete__action { font-size: 13px; padding: 8px 11px; flex-shrink: 0; }
}

/* Correctif 27/08/2026 (2e passe) — le palier 560px suffisait a 390px mais PAS en
   dessous : mesure a 320 et 360px, le bouton « Poser une question » finissait encore
   a 391px et toute la page defilait lateralement (iPhone SE, vieux Android).
   Sous 400px on ne rapetisse plus le bouton — il passe a la ligne, pleine largeur :
   il reste le capteur de lead et devient meme plus visible. */
@media (max-width: 400px) {
  .sr-entete__barre { flex-wrap: wrap; gap: 8px; padding-left: 14px; padding-right: 14px; }
  .sr-logo { min-width: 0; }
  .sr-entete__action { flex: 0 0 100%; text-align: center; padding: 10px 12px; font-size: 14px; }
}

/* Correctif 27/08/2026 (2e passe) — le texte d'aide du formulaire reseau restait
   mesure a 3,41-4,09:1 : le CSS du mu-plugin partage est injecte APRES la feuille
   du theme, donc a specificite egale c'est lui qui gagnait. On prefixe par body
   (0,3,0) pour passer devant sans toucher au mu-plugin, partage par tout le parc. */
body .sblf .sblf-aide { color: #3E4A55; }
@media (prefers-color-scheme: dark) {
  body .sblf .sblf-aide { color: #AEBAC6; }
}

/* Correctif 27/08/2026 — BARRE BASSE MOBILE EMPILEE. Le CSS mettait flex sur <nav>,
   or WordPress insere un <ul class="menu"> entre le <nav> et les liens : la barre
   sortait en LISTE VERTICALE de 250px de haut, fixee en bas, par-dessus le heros.
   Vu a l'oeil sur une capture ECRAN (une capture pleine page la fait passer pour un
   artefact de defilement). On flexe le <ul>, la barre reprend ses ~62px. */
@media (max-width: 780px) {
  .sr-nav-basse > ul {
    display: flex; width: 100%; margin: 0; padding: 0; list-style: none;
  }
  .sr-nav-basse > ul > li { flex: 1; display: flex; margin: 0; }
  .sr-nav-basse > ul > li > a { flex: 1; }
}

/* Correctif 27/08/2026 — LISIBILITE DU HEROS. Le texte blanc et l'altitude en
   lateritre posent sur une photo : selon la zone de l'image (ciel clair du Morne)
   l'altitude « 828 m » devenait difficile a lire, et aucun controle ne peut le voir
   (ils mesurent contre la couleur de fond, pas contre les pixels de la photo).
   Une ombre portee garantit la lisibilite quelle que soit la photo mise en une. */
.sr-hero__surtitre,
.sr-hero__titre,
.sr-hero__chapo,
.sr-hero__chapo .sr-cote,
.sr-hero__chapo .sr-cote__m {
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 0 18px rgba(0,0,0,0.35);
}

/* Correctif 27/08/2026 (suite) — l'altitude du heros restait illisible : 13px en
   petites capitales, en lateritre, sous l'opacite 0,92 du chapo, sur une photo
   claire. C'est le procede signature du site (le nom porte sa cote) : il doit se
   LIRE. Pleine opacite dans le heros et un cran de taille en plus. */
.sr-hero__chapo { opacity: 1; }
.sr-hero__chapo .sr-cote__m { font-size: 15px; }