/*
Theme Name: Autour de la Pêche
*/

/* ==========================================================================
   AUTOUR DE LA PÊCHE — fondations
   Direction : DIRECTION-ARTISTIQUE.md (07/09/2026). « Le carnet de sortie
   d'un pêcheur » : deux mondes (au-dessus / au-dessous de la ligne d'eau),
   une matière chiffrée (cotes, réglettes, cartouche de conditions), un seul
   accent (vermillon). Rayon 0, aucune ombre portée. Ce fichier ne pose que
   les fondations (tokens, grille, typo, procédés réutilisables) — les
   gabarits de page (home, article, archive) arrivent en passe 2.
   ========================================================================== */

/* Polices self-hosted (P-086 — pas de requête tierce vers Google Fonts) : fichiers dans
   assets/fonts/, servis par le thème lui-même. Fichiers variables Google collapsés en une
   instance statique par famille (Google a servi la même URL woff2 pour 600/700/800 etc.). */
@font-face{
  font-family:'Podkova'; font-style:normal; font-weight:600 800; font-display:swap;
  src:url('assets/fonts/podkova.woff2') format('woff2');
}
@font-face{
  font-family:'Signika'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('assets/fonts/signika.woff2') format('woff2');
}
@font-face{
  font-family:'Azeret Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('assets/fonts/azeretmono.woff2') format('woff2');
}

/* ---------- 1. JETONS DE COULEUR (§2 DA) --------------------------------- */
:root{
  --brume:        #DDE5DC;  /* fond général — brume de rivière avant le jour */
  --ecume:        #F0F4EE;  /* surfaces posées dessus : cartes, tableaux, réglettes */
  --eau-profonde: #13291F;  /* fond des bandes immergées — FIXE dans les 2 thèmes */
  --encre:        #0E1712;  /* texte — vert-noir de vase, jamais #000 */
  --roseau:       #4E5F52;  /* secondaire choisi — dates, signatures, chapôs, filets */
  --vermillon:    #C93B23;  /* accent UNIQUE */
  --vermillon-txt:#A32E1A;  /* vermillon portant du texte sur --brume (contraste 5,47:1) */
  --filet:        #C3CFC0;  /* traits, graduations, hachures */

  /* sur --eau-profonde le texte et les traits passent en clair, fixe dans les 2 thèmes */
  --sur-eau-encre:  #EAF1E8;
  --sur-eau-roseau: #A9BDAE;
  --sur-eau-filet:  #2E4A3A;
  --sur-eau-vermillon: #FF8F70;

  /* jetons génériques attendus par les mu-plugins partagés du parc (bloc auteur, etc.) —
     alias vers nos propres tokens, jamais leurs valeurs de repli neutres (P-345 : un texte
     qui hérite d'une encre fixe sur un fond adaptatif devient illisible dans un des 2 thèmes). */
  --accent: var(--vermillon-txt);
  --surf:   var(--ecume);
  --doux:   var(--ecume);

  --titre:  'Podkova', Georgia, 'Iowan Old Style', serif;
  --lecture:'Signika', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:   'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --conteneur: 1240px;
  --gouttiere: 28px;
  --colonne-lecture: 720px;
  --marge-cotes: 190px;
  --rayon: 0px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brume:  #0D1512;
    --ecume:  #16211C;
    --encre:  #E4EBE2;
    --roseau: #9FB0A2;
    --vermillon: #FF8F70;
    --vermillon-txt: #FF8F70;
    --filet:  #28362D;
    --sur-eau-encre: #E4EBE2;
    --sur-eau-roseau:#9FB0A2;
    --sur-eau-filet: #24352C;
    --sur-eau-vermillon: #FF8F70;
    --accent: var(--vermillon);
    --surf:   var(--ecume);
    --doux:   var(--ecume);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --brume:  #0D1512;
  --ecume:  #16211C;
  --encre:  #E4EBE2;
  --roseau: #9FB0A2;
  --vermillon: #FF8F70;
  --vermillon-txt: #FF8F70;
  --accent: var(--vermillon);
  --surf:   var(--ecume);
  --doux:   var(--ecume);
  --filet:  #28362D;
  --sur-eau-encre: #E4EBE2;
  --sur-eau-roseau:#9FB0A2;
  --sur-eau-filet: #24352C;
  --sur-eau-vermillon: #FF8F70;
  color-scheme: dark;
}

/* ---------- 2. RÉINITIALISATION ------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--brume);
  color:var(--encre);
  font-family:var(--lecture);
  font-weight:400;
  font-size:18px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; border-radius:0; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
:focus-visible{ outline:2px solid var(--vermillon); outline-offset:3px; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
table{ border-collapse:collapse; width:100%; }

h1,h2,h3,h4{
  font-family:var(--titre);
  font-weight:700;
  line-height:1.1;
  margin:0;
  text-transform:none;
  text-wrap:balance;
}
h1{ font-size:clamp(34px,5.2vw,56px); font-weight:800; line-height:1.06; }
h2{ font-size:clamp(26px,3.4vw,36px); line-height:1.1; }
h3{ font-size:22px; line-height:1.14; }
.sb-legende{ font-size:14.5px; color:var(--roseau); }

/* — Azeret Mono réservé aux nombres, jamais à un paragraphe — */
.sb-cote,
.sb-mono{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums lining-nums;
  font-weight:500;
}
.sb-cote-etiquette{
  font-family:var(--mono);
  font-size:13.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--roseau);
}
.sb-chiffre-geant{
  font-family:var(--titre);
  font-weight:800;
  font-size:clamp(48px,7vw,88px);
  line-height:.94;
  color:var(--encre);
}
.sb-chiffre-geant .sb-cote{ font-family:var(--titre); font-weight:800; }

a.sb-oeil, .sb-oeil{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.sb-oeil:focus{
  left:.5rem; top:.5rem; width:auto; height:auto; padding:.5rem .8rem;
  background:var(--encre); color:var(--brume); z-index:99;
}
.sb-oeil-txt{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- 3. GRILLE ----------------------------------------------------- */
.sb-enveloppe{
  width:min(var(--conteneur), 100% - 2 * var(--gouttiere));
  margin-inline:auto;
}
/* colonne de lecture d'article : 720px + marge de cotes 190px à gauche en ≥1100px */
.sb-lecture{
  display:grid;
  grid-template-columns: var(--marge-cotes) minmax(0, var(--colonne-lecture));
  gap: var(--gouttiere);
  width:min(calc(var(--marge-cotes) + var(--gouttiere) + var(--colonne-lecture)), 100% - 2 * var(--gouttiere));
  margin-inline:auto;
}
/* 🪤 Verdict design 07/09/2026, item 4 : sans cette règle, l'auto-placement CSS Grid
   pose le 1er enfant de .sb-lecture dans la colonne de 190px (marge-cotes) et le 2e
   dans la colonne de 720px — un H1 sur plusieurs lignes déborde alors sur le corps.
   Par défaut TOUT enfant va dans la colonne de lecture (2) ; seul un enfant marqué
   .sb-lecture-marge va dans la marge (1). Un simple empilement vertical, quel que
   soit le nombre d'enfants ou la longueur du titre. */
.sb-lecture > *{ grid-column: 2; }
.sb-lecture-marge{ grid-column: 1; font-family:var(--mono); font-size:13.5px; color:var(--roseau); }
.sb-lecture-corps{ min-width:0; }
@media (max-width: 1099px){
  .sb-lecture{ grid-template-columns: minmax(0,1fr); width:min(var(--colonne-lecture), 100% - 2 * var(--gouttiere)); }
  /* une seule colonne existe ici : on annule grid-column:2, sinon le navigateur
     crée une 2e piste implicite et repousse le contenu hors champ. */
  .sb-lecture > *{ grid-column: 1; }
  .sb-lecture-marge{ display:none; }
}

.sb-bande{ padding-block:clamp(2.6rem, 5vw, 4.2rem); }
.sb-bande--brume{ background:var(--brume); color:var(--encre); }
.sb-bande--ecume{ background:var(--ecume); color:var(--encre); }
.sb-bande--immergee{
  background:var(--eau-profonde); color:var(--sur-eau-encre);
}
.sb-bande--immergee .sb-legende,
.sb-bande--immergee .sb-cote-etiquette{ color:var(--sur-eau-roseau); }
.sb-bande--immergee a{ color:inherit; }
.sb-bande--photo{
  position:relative; background-size:cover; background-position:center; color:#fff;
}

.sb-grille{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gouttiere);
}
@media (max-width: 780px){
  .sb-grille{ grid-template-columns:minmax(0,1fr); }
}
/* Grille dédiée aux CARTES D'ARTICLE (archive, home) — 12 colonnes fixes donnent
   des cartes de ~90-120px à 1440px (verdict design 07/09/2026, item 4) : une
   carte veut ~280-320px, pas une fraction de grille éditoriale. */
.sb-grille--cartes{
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
@media (max-width: 780px){
  .sb-grille--cartes{ grid-template-columns:minmax(0,1fr); }
}
/* Grille dense du mur de prises (procédé 5.7) : 5 colonnes en desktop, 2 en
   mobile — la densité est le sujet, jamais 1 colonne (§4 DA). */
.sb-grille--mur{
  grid-template-columns:repeat(5, minmax(0,1fr));
}
@media (max-width: 780px){
  .sb-grille--mur{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ---------- 4. LA LIGNE D'EAU (procédé 5.1) ------------------------------ */
/* Jonction ondulée entre deux bandes de fond différent — jamais un bord droit.
   3 variantes d'amplitude/période pour ne jamais répéter le même tracé. */
.sb-ligne-eau{ display:block; width:100%; height:34px; margin-bottom:-1px; }
.sb-ligne-eau path{ fill: var(--fond-suivant, var(--eau-profonde)); }
.sb-ligne-eau--inverse{ transform:scaleY(-1); }

/* ---------- 5. LE FIL, à la place des filets (procédé 5.2) --------------- */
/* Séparateur en monofilament : hairline qui fléchit vers le bas et se termine
   par un petit nœud (point) à l'ancrage du titre — jamais un border-top droit. */
.sb-fil{ display:block; width:100%; height:14px; overflow:visible; }
.sb-fil path{ fill:none; stroke:var(--filet); stroke-width:1; }
.sb-fil circle{ fill:var(--filet); }
.sb-bande--immergee .sb-fil path{ stroke:var(--sur-eau-filet); }
.sb-bande--immergee .sb-fil circle{ fill:var(--sur-eau-filet); }
.sb-section-tete{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  flex-wrap:wrap; margin-bottom:1.8rem;
}
.sb-section-chapo{ color:var(--roseau); font-size:16.5px; margin-top:.4rem; max-width:56ch; }
.sb-bande--immergee .sb-section-chapo{ color:var(--sur-eau-roseau); }

/* ---------- 6. LA RÉGLETTE DE MESURE (procédé 5.3) ----------------------- */
/* Un seul objet, trois emplois : taille légale, note de test, niveau de
   difficulté. Ticks tous les 10 %, tick long tous les 50 %, curseur vermillon
   à la valeur. JAMAIS d'étoiles, jamais de /10 nu. */
.sb-reglette{ --v: 50%; display:block; }
.sb-reglette-tete{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5rem;
  font-family:var(--mono); font-size:13.5px; letter-spacing:.04em; color:var(--roseau);
}
.sb-reglette-piste{
  position:relative; height:10px; background:var(--ecume); border:1px solid var(--filet);
}
.sb-bande--immergee .sb-reglette-piste{ background:rgba(255,255,255,.04); border-color:var(--sur-eau-filet); }
.sb-reglette-tick{
  position:absolute; top:0; bottom:0; width:1px; background:var(--filet);
}
.sb-bande--immergee .sb-reglette-tick{ background:var(--sur-eau-filet); }
.sb-reglette-tick--fort{ width:2px; background:var(--roseau); }
.sb-bande--immergee .sb-reglette-tick--fort{ background:var(--sur-eau-roseau); }
.sb-reglette-curseur{
  position:absolute; top:-4px; left:var(--v); width:3px; height:18px;
  background:var(--vermillon); transform:translateX(-50%);
}
.sb-bande--immergee .sb-reglette-curseur{ background:var(--sur-eau-vermillon); }
.sb-reglette-valeur{ font-family:var(--mono); font-weight:500; color:var(--vermillon-txt); }
.sb-bande--immergee .sb-reglette-valeur{ color:var(--sur-eau-vermillon); }

/* ---------- 7. LE CARTOUCHE « CONDITIONS DU JOUR » (procédé 5.6) --------- */
.sb-cartouche{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0;
  background:var(--ecume); border:1px solid var(--filet);
}
.sb-cartouche-item{
  padding:.85rem .9rem; border-right:1px solid var(--filet);
}
.sb-cartouche-item:last-child{ border-right:0; }
.sb-cartouche-label{
  display:block; font-family:var(--mono); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--roseau); margin-bottom:.3rem;
}
.sb-cartouche-valeur{ font-family:var(--mono); font-size:15.5px; font-weight:500; color:var(--encre); }
@media (max-width:640px){
  .sb-cartouche{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sb-cartouche-item:nth-child(2n){ border-right:0; }
  .sb-cartouche-item{ border-bottom:1px solid var(--filet); }
}

/* ---------- 8. LA PASTILLE BOUCHON (procédé 5.8) ------------------------- */
/* Forme d'un bouchon vu de côté : cercle vermillon + tige fine — posé en
   surimpression sur une photo, bas-gauche. Jamais un rectangle. */
.sb-pastille-bouchon{
  position:absolute; left:.9rem; bottom:.9rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
}
.sb-pastille-bouchon svg{ width:22px; height:34px; display:block; }
.sb-pastille-bouchon-texte{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:#fff;
  background:rgba(14,23,18,.72); padding:.2rem .55rem;
}
.sb-media{ position:relative; }
.sb-media img{ width:100%; height:100%; object-fit:cover; }
/* Retour Mathias 07/09/2026 : sur le hero de l'accueil, la pastille en bas-gauche
   chevauche le chapo (les deux visent le même coin de la photo). On la remonte
   en haut-gauche pour CE contexte précis — ailleurs (mur de prises, etc.) la
   pastille garde sa place canonique bas-gauche. */
.sb-hero-home-media .sb-pastille-bouchon{ bottom:auto; top:.9rem; }

/* ---------- 9. SILHOUETTES D'ESPÈCES (procédé 5.8) ----------------------- */
.sb-silhouette{ display:inline-block; color:var(--encre); }
.sb-silhouette svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.sb-silhouette--filigrane{ opacity:.06; color:var(--encre); }
.sb-bande--immergee .sb-silhouette--filigrane{ color:var(--sur-eau-encre); }

/* ---------- 10. CARTES, ÉTIQUETTES, LIENS RÉUTILISABLES ------------------ */
.sb-carte{ position:relative; }
.sb-carte h3{ margin-top:.7rem; font-size:21px; }
.sb-carte .sb-chapo{ margin-top:.4rem; color:var(--roseau); font-size:16px; line-height:1.6; }
.sb-etiquette{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--vermillon-txt); border:1px solid currentColor;
  padding:.18rem .55rem; border-radius:0;
}
.sb-bande--immergee .sb-etiquette{ color:var(--sur-eau-vermillon); }
.sb-date{ font-family:var(--mono); font-size:13.5px; color:var(--roseau); }
.sb-bande--immergee .sb-date{ color:var(--sur-eau-roseau); }

.sb-cta{
  display:inline-block; padding:.75rem 1.4rem; border:1px solid var(--encre);
  font-family:var(--mono); font-size:14px; letter-spacing:.03em; border-radius:0;
}
.sb-cta:hover{ text-decoration:none; background:var(--encre); color:var(--brume); }
.sb-cta--vermillon{ border-color:var(--vermillon); color:var(--vermillon-txt); }
.sb-cta--vermillon:hover{ background:var(--vermillon); color:#fff; }
.sb-bande--immergee .sb-cta{ border-color:var(--sur-eau-encre); color:var(--sur-eau-encre); }
.sb-bande--immergee .sb-cta:hover{ background:var(--sur-eau-encre); color:var(--eau-profonde); }

/* ---------- 11. TABLEAUX (défilement mobile géré par le socle) ----------- */
.sb-corps table, table.sb-tableau{
  font-size:16px;
}
.sb-corps th, .sb-corps td, .sb-tableau th, .sb-tableau td{
  border-bottom:1px solid var(--filet); padding:.65rem .5rem; text-align:left;
}
.sb-corps th, .sb-tableau th{ font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--roseau); text-transform:uppercase; }
/* case pleine = ouvert / case hachurée 45° = fermé — jamais vert/rouge (§2 DA) */
.sb-case-ouvert{ background:var(--eau-profonde); }
.sb-case-ferme{
  background-image:repeating-linear-gradient(45deg, var(--filet) 0 2px, transparent 2px 8px);
  background-color:var(--ecume);
}
.sb-case-actuel{ box-shadow:none; outline:2px solid var(--vermillon); outline-offset:-2px; }

/* ---------- 12. RESPONSIVE GÉNÉRAL ---------------------------------------- */
@media (max-width: 760px){
  body{ font-size:17px; }
  .sb-enveloppe{ width:min(var(--conteneur), 100% - 1.6rem); }
  .sb-cartouche{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ---------- 14. EN-TÊTE (header.php) -------------------------------------- */
.sb-tete-in{
  display:grid; grid-template-columns:auto auto 1fr auto; align-items:center;
  gap:1.4rem; padding-block:.3rem 1.1rem;
}
.sb-marque{ display:flex; align-items:center; gap:.65rem; }
.sb-marque:hover{ text-decoration:none; }
.sb-marque-mono{ display:inline-flex; width:34px; color:var(--encre); }
.sb-marque-mono svg{ width:100%; height:auto; }
.sb-marque-mot{
  font-family:var(--titre); font-weight:800; font-size:clamp(20px,2.6vw,26px);
  line-height:1; letter-spacing:.005em;
}
.sb-baseline{
  font-family:var(--mono); font-size:13px; color:var(--roseau); letter-spacing:.01em;
}
.sb-recherche{ justify-self:end; }
.sb-recherche input{
  font:inherit; font-size:14px; padding:.4rem 0; width:min(200px,32vw);
  border:0; border-bottom:1px solid var(--filet); background:none; color:var(--encre);
  border-radius:0;
}
.sb-recherche input:focus{ border-bottom-color:var(--vermillon); outline:none; }
.sb-recherche input::placeholder{ color:var(--roseau); }
.sb-burger{
  display:none; background:none; border:0; padding:.4rem 0; cursor:pointer;
}
.sb-burger span{ display:block; width:20px; height:2px; background:var(--encre); margin:5px 0; }

/* rail des 6 rubriques — silhouette d'espèce en filigrane par rubrique (§5.8) */
.sb-rail{
  border-top:1px solid var(--filet); border-bottom:1px solid var(--filet);
}
.sb-rail-in{ display:flex; justify-content:center; gap:0; overflow-x:auto; scrollbar-width:none; }
.sb-rail-in::-webkit-scrollbar{ display:none; }
.sb-rail-lien{
  display:flex; align-items:center; gap:.5rem; white-space:nowrap; padding:.85rem 1.15rem;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--roseau);
}
.sb-rail-lien:hover{ text-decoration:none; color:var(--encre); }
.sb-rail-silhouette{ width:22px; height:22px; opacity:.55; }
.sb-rail-lien:hover .sb-rail-silhouette{ opacity:1; }

@media (max-width:900px){
  .sb-tete-in{ grid-template-columns:auto auto 1fr; }
  .sb-recherche{ display:none; }
  .sb-burger{ display:block; }
  .sb-rail{ max-height:0; overflow:hidden; border-top:0; border-bottom:0; }
  .sb-rail.is-ouvert{ max-height:none; overflow:visible; border-top:1px solid var(--filet); border-bottom:1px solid var(--filet); }
  .sb-rail-in{ flex-direction:column; align-items:stretch; }
  .sb-rail-lien{ border-bottom:1px solid var(--filet); }
}
/* 🪤 Verdict design 07/09/2026, item 5 : sous 640px la baseline se replie sur
   4 lignes et vient au contact du wordmark — on la masque, le wordmark suffit. */
@media (max-width:640px){
  .sb-baseline{ display:none; }
}

/* ---------- 15. PIED DE PAGE (footer.php) --------------------------------- */
.sb-pied{ padding-block:3rem 0; }
.sb-pied-grille{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr 1fr; gap:2.2rem;
  padding-bottom:2.4rem;
}
.sb-pied .sb-marque-mono{ color:var(--sur-eau-encre); }
.sb-pied-baseline{ font-size:15px; color:var(--sur-eau-roseau); margin-top:.8rem; line-height:1.6; }
.sb-pied-federation{ font-size:13.5px; color:var(--sur-eau-roseau); margin-top:1rem; line-height:1.6; }
.sb-pied-federation a{ color:var(--sur-eau-vermillon); text-decoration:underline; text-underline-offset:3px; }
.sb-pied-titre{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--sur-eau-roseau); padding-bottom:.5rem; margin-bottom:.7rem;
  border-bottom:1px solid var(--sur-eau-filet); font-weight:500;
}
.sb-pied-titre--espace{ margin-top:1.6rem; }
.sb-pied-liste li{
  display:flex; justify-content:space-between; gap:.7rem; align-items:baseline;
  font-size:15.5px; padding:.4rem 0;
}
.sb-pied-nb{ font-family:var(--mono); font-size:12.5px; color:var(--sur-eau-vermillon); }
.sb-pied-date{ font-family:var(--mono); font-size:12px; color:var(--sur-eau-roseau); white-space:nowrap; }
.sb-pied-auteurs{ display:grid; gap:1rem; }
.sb-pied-auteur{ display:flex; gap:.75rem; align-items:center; font-size:14.5px; }
.sb-pied-auteur img{ width:56px; height:56px; object-fit:cover; border-radius:0; flex:none; }
.sb-pied-auteur span{ line-height:1.45; color:var(--sur-eau-roseau); }
.sb-pied-auteur b{ color:var(--sur-eau-encre); font-weight:600; }
.sb-ours{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-block:1.2rem 1.4rem; border-top:1px solid var(--sur-eau-filet);
  font-size:13.5px; color:var(--sur-eau-roseau);
}
.sb-bascule{
  font-family:var(--mono); font-size:12.5px; padding:.4rem 0; border:0;
  border-bottom:1px solid var(--sur-eau-filet); background:none; color:var(--sur-eau-encre);
  border-radius:0; cursor:pointer;
}
.sb-bascule:hover{ border-bottom-color:var(--vermillon); }
@media (max-width:1080px){
  .sb-pied-grille{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
  .sb-pied-grille{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- 16. BARRE MOBILE BASSE ----------------------------------------- */
.sb-nav-mobile{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--brume); border-top:1px solid var(--filet);
  padding-bottom:env(safe-area-inset-bottom);
}
.sb-nav-mobile-item{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:.45rem .2rem .5rem; font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--roseau); text-align:center;
}
.sb-nav-mobile-item:hover{ text-decoration:none; }
.sb-nav-mobile-item.is-actif{ color:var(--vermillon-txt); }
.sb-nav-ico{ display:block; width:20px; height:20px; }
.sb-nav-ico svg{ width:100%; height:100%; }
@media (max-width:760px){
  .sb-nav-mobile{ display:flex; }
  body{ padding-bottom:64px; }
}
@media print{ .sb-tete,.sb-rail,.sb-nav-mobile,.sb-bascule,.sb-pied{ display:none !important; } }

/* ---------- 17. BLOC AUTEUR DU MU-PLUGIN PARTAGÉ (sb-auteur-fin) ---------- */
/* 🪤 Verdict design 07/09/2026, item 2/6 : jr_signature() est retirée (doublon,
   voir functions.php) ; le bloc affiché est désormais UNIQUEMENT celui du
   mu-plugin réseau sb-auteur-bloc.php, injecté dans the_content. On ne touche
   pas son PHP (hors de ce thème) mais on recadre sa largeur dans la colonne de
   lecture (720px, §4 DA) au lieu de le laisser filer sur 1440px. */
.sb-corps .sb-auteur-fin{
  max-width:var(--colonne-lecture);
  margin-inline:auto;
}

/* ---------- 18. SOMMAIRE AUTO (the_content filter) ------------------------ */
.sb-sommaire{
  margin-bottom:2.2rem; padding-block:1rem; border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet);
}
.sb-sommaire p{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--roseau); margin-bottom:.6rem; }
.sb-sommaire li{ font-size:16px; padding:.28rem 0; line-height:1.5; }
.sb-sommaire a{ color:var(--vermillon-txt); }

/* ---------- 19. BANDES DE LA HOME (front-page.php, §4 DA) ----------------- */
/* -- 2. Hero immergé -- */
.sb-hero-home{ position:relative; min-height:62vh; display:flex; align-items:flex-end; overflow:hidden; }
.sb-hero-home-media{ position:absolute; inset:0; z-index:0; }
.sb-hero-home-media img{ width:100%; height:100%; object-fit:cover; }
.sb-hero-home-voile{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,18,14,0) 0%, rgba(10,18,14,.8) 80%); }
.sb-hero-home-in{
  position:relative; z-index:2; width:min(var(--conteneur), 100% - 2 * var(--gouttiere));
  margin-inline:auto; display:flex; justify-content:space-between; align-items:flex-end;
  gap:2.4rem; padding-block:2.6rem 2.2rem; flex-wrap:wrap; color:#fff;
}
.sb-hero-home-titre-bloc{ max-width:640px; }
.sb-hero-home-titre{ color:#fff; margin-top:.6rem; }
.sb-hero-home-titre a{ color:inherit; }
.sb-hero-home-chapo{ color:#D8E2D5; margin-top:.8rem; font-size:17px; max-width:52ch; }
.sb-hero-home-liste{ min-width:260px; max-width:300px; }
.sb-hero-home-liste > p{ color:#D8E2D5; margin-bottom:.6rem; }
.sb-hero-home-liste li{ border-bottom:1px solid rgba(255,255,255,.18); padding:.4rem 0; font-size:14px; }
.sb-hero-home-liste li a{ display:flex; gap:.6rem; color:#fff; }
.sb-hero-home-liste li a:hover{ text-decoration:none; }
.sb-hero-home-liste .sb-mono{ color:var(--sur-eau-vermillon); white-space:nowrap; }
@media (max-width:1099px){ .sb-hero-home-liste{ display:none; } }
@media (max-width:640px){ .sb-hero-home{ min-height:52vh; } }

/* -- 3. L'espèce du mois -- */
.sb-espece-mois{ display:grid; grid-template-columns:1fr 130px 1fr; gap:2.2rem; align-items:center; }
.sb-espece-mois-photo img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.sb-espece-mois-planche{ display:flex; align-items:center; justify-content:center; }
.sb-espece-mois-planche .sb-silhouette{ width:100%; height:100%; opacity:.75; }
.sb-tuiles-geantes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.4rem; margin-block:1.3rem; }
.sb-tuile-geante{ display:flex; flex-direction:column; gap:.35rem; }
@media (max-width:900px){
  .sb-espece-mois{ grid-template-columns:1fr; }
  .sb-espece-mois-planche{ width:90px; height:90px; margin-inline:auto; }
}
@media (max-width:600px){ .sb-tuiles-geantes{ grid-template-columns:1fr 1fr; } }

/* -- 4. Techniques (photo + titre en surimpression) -- */
.sb-grille--techniques .sb-technique-carte{ position:relative; aspect-ratio:3/2; display:block; overflow:hidden; }
.sb-technique-carte img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sb-technique-voile{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,18,14,0) 42%, rgba(10,18,14,.85) 100%); }
.sb-technique-num{ position:absolute; top:.8rem; left:.8rem; z-index:2; font-family:var(--mono); font-size:13px; color:var(--sur-eau-vermillon); }
.sb-technique-titre{ position:absolute; left:.9rem; right:.9rem; bottom:.8rem; z-index:2; color:#fff; font-size:19px; margin:0; }

/* -- 6. Spot de la semaine -- */
.sb-spot{ position:relative; min-height:58vh; display:flex; align-items:flex-end; overflow:hidden; }
.sb-spot-media{ position:absolute; inset:0; }
.sb-spot-media img{ width:100%; height:100%; object-fit:cover; }
.sb-spot-voile{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,18,14,0) 25%, rgba(10,18,14,.82) 100%); }
.sb-spot-in{ position:relative; z-index:2; padding-block:2.4rem; color:#fff; width:min(var(--conteneur), 100% - 2 * var(--gouttiere)); margin-inline:auto; }
.sb-spot-in h2{ color:#fff; margin-top:.5rem; }
.sb-spot-in h2 a{ color:inherit; }
.sb-spot-chapo{ color:#D8E2D5; margin:.8rem 0 1.4rem; max-width:60ch; }
.sb-spot-in .sb-cartouche{ max-width:640px; background:rgba(240,244,238,.94); }
@media (max-width:640px){ .sb-spot{ min-height:48vh; } }

/* -- 7. Matériel testé -- */
.sb-materiel-fiche .sb-reglette{ margin-top:.9rem; }
.sb-materiel-prix{ margin-top:.5rem; color:var(--vermillon-txt); }

/* -- 8. Mur de prises -- */
.sb-mur-item{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden; }
.sb-mur-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sb-mur-voile{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,18,14,0) 55%, rgba(10,18,14,.88) 100%); }
.sb-mur-legende{ position:absolute; left:.7rem; right:.7rem; bottom:.7rem; z-index:2; color:#fff; display:flex; flex-direction:column; gap:.2rem; }
.sb-mur-titre{ font-size:14.5px; font-family:var(--titre); font-weight:700; line-height:1.2; }
.sb-mur-legende .sb-mono{ font-size:12px; color:var(--sur-eau-vermillon); }

/* -- 9. Débuter la pêche -- */
.sb-etapes{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gouttiere); }
.sb-etape{ display:block; position:relative; }
.sb-etape-num{ display:block; color:var(--vermillon-txt); margin-bottom:.4rem; font-size:clamp(36px,4vw,56px); }
.sb-etape-photo img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.sb-etape h3{ margin-top:.7rem; font-size:19px; }
.sb-etape .sb-chapo{ margin-top:.4rem; color:var(--roseau); font-size:15px; line-height:1.55; }
.sb-bande--debuter .sb-etape{ border-top:2px solid var(--vermillon); padding-top:1rem; }
@media (max-width:900px){ .sb-etapes{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .sb-etapes{ grid-template-columns:1fr; } }

/* ---------- 20. LA RÉGLETTE DES OUVERTURES, 12 MOIS (procédé 5.5) --------- */
/* Mobile : défilement horizontal interne, jamais de débordement de page (§4 DA). */
.sb-reglette-mois-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sb-reglette-mois{ min-width:640px; }
.sb-reglette-mois-ligne{
  display:grid; grid-template-columns:120px 1fr; align-items:center; gap:.8rem; padding-block:.35rem;
}
.sb-reglette-mois-entete{ padding-bottom:.5rem; }
.sb-reglette-mois-label{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--roseau); white-space:nowrap;
}
.sb-reglette-mois-cases{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:2px; }
.sb-reglette-mois-mois{
  text-align:center; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; color:var(--roseau);
}
.sb-reglette-mois-case{ display:block; height:22px; border:1px solid var(--filet); }
.sb-case-indetermine{ background:transparent; }
.sb-reglette-mois-note{ margin-top:1rem; font-size:13.5px; color:var(--roseau); }
.sb-reglette-mois-note a{ color:var(--vermillon-txt); text-decoration:underline; text-underline-offset:3px; }
.sb-reglette-mois-bloc{ margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--filet); }

/* ---------- 13. IMPRESSION / RÉDUCTION DE MOUVEMENT ----------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
[hidden]{ display:none !important; }
.sb-corps{ overflow-wrap:anywhere; }

/* ---------- 19. GABARIT ARTICLE — single.php (classes mh-*) --------------
   Verdict design 07/09/2026, relecture désigner : single.php n'avait jamais reçu
   sa passe 2 (le texte tourne sans marges, « En pratique » et « À lire ensuite »
   sortent en liste/rectangles bruts). Fondations posées ici, dans les tokens déjà
   déclarés (§1) et sur le même principe de colonne de lecture que .sb-lecture. */
.mh-enveloppe{ width:min(var(--conteneur), 100% - 2 * var(--gouttiere)); margin-inline:auto; }
.mh-art-tete .mh-enveloppe,
.mh-art-texte{ max-width:var(--colonne-lecture); margin-inline:auto; }
.mh-art-illu .mh-enveloppe{ max-width:var(--conteneur); }
.mh-fil-ariane{ font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--roseau); margin:1.4rem 0 .8rem; }
.mh-fil-ariane a{ color:inherit; }
.mh-art-titre{ font-family:var(--titre); font-weight:800; font-size:clamp(28px,4vw,44px); line-height:1.12; margin:.2rem 0 .7rem; color:var(--encre); }
.mh-type{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--vermillon-txt); border:1px solid currentColor;
  padding:.18rem .55rem; margin-bottom:.8rem;
}
.mh-art-chapo{ font-family:var(--lecture); font-size:19px; font-style:italic; line-height:1.55; color:var(--roseau); margin-bottom:.6rem; }
.mh-meta{ font-family:var(--mono); font-size:13px; color:var(--roseau); margin-bottom:1.4rem; }
.mh-art-illu{ margin-block:1.6rem; }
.mh-art-illu img{ width:100%; height:auto; display:block; }
.mh-art-illu figcaption{ font-size:13px; color:var(--roseau); margin-top:.5rem; }
.mh-art-corps{ padding-block:1.2rem 2.4rem; }
.mh-sommaire{
  background:var(--ecume); border:1px solid var(--filet); padding:1.1rem 1.3rem;
  margin-bottom:2rem;
}
.mh-sommaire-t{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--roseau); margin:0 0 .6rem; }
.mh-sommaire ul{ margin:0; padding:0; list-style:none; display:grid; gap:.4rem; }
.mh-sommaire a{ color:var(--vermillon-txt); font-size:15px; text-decoration:none; }
.mh-sommaire a:hover{ text-decoration:underline; }
.mh-pratique{
  background:var(--ecume); border:1px solid var(--filet); padding:1.3rem 1.4rem;
  margin:2.4rem 0;
}
.mh-pratique-t{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--roseau); margin:0 0 .8rem; }
.mh-pratique dl{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; margin:0 0 1rem; }
.mh-pratique dt{ font-family:var(--mono); font-size:13px; color:var(--roseau); }
.mh-pratique dd{ margin:0; font-size:15px; }
.mh-pratique-note{ font-size:13.5px; line-height:1.6; color:var(--roseau); margin:0; padding-top:.8rem; border-top:1px solid var(--filet); }
.mh-galerie{ margin:2.4rem 0; }
.mh-galerie-grille{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--gouttiere); }
.mh-galerie-grille img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
@media (max-width: 640px){ .mh-galerie-grille{ grid-template-columns:1fr; } }
.mh-autour{ margin:2.4rem 0; }
.mh-autour ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.mh-autour li{ padding-bottom:.6rem; border-bottom:1px solid var(--filet); }
.mh-autour a{ color:var(--encre); text-decoration:none; font-weight:600; }
.mh-autour a:hover{ text-decoration:underline; }
.mh-carnets--trois{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gouttiere); }
@media (max-width: 780px){ .mh-carnets--trois{ grid-template-columns:1fr; } }
.mh-carnet{ position:relative; }
.mh-portrait{ margin:0 0 .8rem; aspect-ratio:4/3; overflow:hidden; }
.mh-portrait img, .mh-portrait .sb-plaque{ width:100%; height:100%; object-fit:cover; display:block; }
.mh-carnet-titre{ font-size:19px; margin:0 0 .3rem; }
.mh-carnet-titre a{ color:var(--encre); text-decoration:none; }
.mh-carnet-titre a:hover{ text-decoration:underline; }
.mh-titre-section{ font-family:var(--titre); font-size:clamp(22px,3vw,30px); margin:0 0 1.4rem; }
.mh-pied-date{ font-family:var(--mono); font-size:13px; color:var(--roseau); }
@media (max-width: 1099px){
  .mh-art-tete .mh-enveloppe, .mh-art-texte{ max-width:var(--colonne-lecture); width:100%; }
}