/* ===========================================================================
   Fishera — feuille de style des articles du blog.  MOTEUR UNIQUE.

   Une seule feuille pour toutes les pages du blog. Avant, chaque page portait son CSS en
   ligne, recopié depuis blog/noeud-palomar.html par son générateur : douze
   blocs <style> différents en circulation, et deux familles qui avaient
   divergé sans que personne le voie — les pages départementales stylaient
   <table>, <ul>, <li>, les guides thématiques non. D'où 171 tableaux servis
   avec le rendu par défaut du navigateur sur 157 pages.

   Règle : on ne remet JAMAIS de CSS en ligne dans une page de blog. Ici, et nulle part
   ailleurs — appliquer-style-blog.py fait respecter ça, et check-blog.py le bloque.

   THÈME : « Atelier + relief », un seul, en clair. Les jetons sont ceux de
   styles.css:root[data-theme="light"] (branche theme/jour-blanc du 18/09/2026) : le blog et
   l'application partagent un thème, pas une ressemblance.
   =========================================================================== */

/* LES JETONS. Un seul thème, CLAIR, par choix : il n'existe aucune bascule vers un thème
   sombre, et il ne faut pas en « réparer » une. Les couleurs se déclarent dans :root et nulle
   part ailleurs, pour qu'un changement de teinte se fasse à un seul endroit. */

/* ── LES POLICES ─────────────────────────────────────────────────────────────
   Auto-hébergées dans /fonts/, comme l'application : zéro requête tierce, zéro CDN, et le
   .htaccess les garde une semaine en cache. Quatre fichiers, 48 Ko : 400, 600 et 800 pour le
   texte, 800 pour les titres. Une graisse 700 ou 900 demandée ailleurs est servie en 800. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('/fonts/archivo-latin-800-normal.woff2') format('woff2')}

/* Le repli, aux métriques ajustées. Sans ça, la bascule de la police système vers Jakarta
   déplace chaque ligne de la page — et ce déplacement est mesuré par Google (CLS). On
   déclare donc une police de repli qui occupe la même place que la vraie, le temps qu'elle
   arrive. Les valeurs viennent des métriques des deux faces, pas d'une estimation. */
@font-face{font-family:'Jakarta repli';src:local('Helvetica Neue'),local('Arial'),local('Roboto');
  size-adjust:105.5%;ascent-override:97%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Archivo repli';src:local('Helvetica Neue'),local('Arial'),local('Roboto');
  size-adjust:97%;ascent-override:100%;descent-override:26%;line-gap-override:0%}

:root{
  color-scheme:light;

  /* Les valeurs viennent telles quelles de styles.css, bloc :root[data-theme="light"]
     (branche theme/jour-blanc, 18/09/2026) : le blog et l'application partagent un thème,
     pas une ressemblance. */
  --bg:#ffffff;        /* la page : blanc pur */
  --card:#f3f6f5;      /* le contenu est CREUSÉ dans la page, il ne flotte pas dessus */
  --card-2:#eaeeec;    /* un cran plus creux : en-tête de tableau */
  --card-3:#e1e7e4;    /* le plus creux : une ligne alternée sur fond de carte */
  --card-0:rgba(243,246,245,0);   /* --card transparent, pour les dégradés du rail */

  --line:rgba(14,42,36,.10);
  --line-2:rgba(14,42,36,.18);
  --line-3:#7d908a;    /* le filet qui doit se VOIR : bord d'un élément cliquable (3,1:1) */

  --ink:#1b1b1a;       /* texte courant */
  --fort:#0e2a24;      /* le degré au-dessus : identité de ligne, attaque en gras */
  --sub:#42554f;       /* texte secondaire — 7,9:1 sur blanc */

  /* 🔴 LE VERT DE MARQUE N'EST PAS UN VERT DE TEXTE. #12b886 ne fait que 2,5:1 sur blanc.
     Le thème de l'application avait déjà tranché : --brand-text #087F5B pour le texte,
     #12b886 réservé aux aplats et aux pastilles. On reprend la même séparation. */
  --em:#087F5B;        /* liens, repères — 5,0:1 sur blanc */
  --em-plein:#12b886;  /* aplats : pastilles, points de carte */
  --sur-em:var(--fort); /* le blanc ne faisait que 2,55:1 sur --em-plein, l'encre 6,0:1 */

  --acc:#ff6b3d;       /* l'orange de marque : un APLAT, jamais du texte sur blanc (2,9:1) */
  --acc-txt:#b8380f;   /* l'orange en texte, 5,0:1 */
  /* L'application pose --on-accent:#fff sur cet orange, ce qui ne fait que 2,83:1. Le blog
     ne suit pas sur ce point : son bouton est la seule chose qui doit se lire en plein
     soleil, au bord de l'eau. #2b0d03 donne 6,4:1 sur le même orange. */
  --sur-acc:#2b0d03;

  --sel:rgba(18,184,134,.22);
  --bg-flou:rgba(255,255,255,.88);

  /* LE RELIEF. Une ombre à deux couches : un contact net d'un pixel, puis une diffusion
     large et très faible. C'est ce qui repose la carte sur la page au lieu de la coller. */
  --relief:0 1px 2px rgba(16,40,34,.04), 0 10px 22px -16px rgba(16,40,34,.26);
  --ombre-douce:rgba(16,40,34,.18);
  --ombre-bord:rgba(16,40,34,.20);
  --plaque:#08241d;    /* la plaque sombre des schémas — voir plus bas */

  --prudence-fond:rgba(255,107,61,.09);
  --prudence-bord:rgba(216,74,30,.42);
  --prudence-txt:#7a2e12;
  --repere-fond:rgba(18,184,134,.09);
  --repere-bord:rgba(10,125,90,.34);

  --f:'Plus Jakarta Sans','Jakarta repli',-apple-system,BlinkMacSystemFont,'Segoe UI',
      Roboto,Helvetica,Arial,sans-serif;          /* le texte */
  --ft:'Archivo','Archivo repli',-apple-system,BlinkMacSystemFont,'Segoe UI',
       Roboto,Helvetica,Arial,sans-serif;         /* la voix de titre, et elle seule */

  --r:16px;            /* le rayon des cartes, aligné sur --r-card de l'application */

  /* Échelle d'espacement, base 4. Les valeurs au jugé sont la première cause d'un rythme plat :
     ici on choisit dans cette liste, on n'invente pas. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.7 var(--f);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

/* LA MESURE. Je croyais être à 70 caractères par ligne ; c'est faux, et c'est mesuré :
   box-sizing:border-box retire les 2×20 px de gouttière, la colonne fait donc 720 px, et
   18 956 caractères de nos propres paragraphes donnent 96,5 caractères par ligne. Butterick
   donne 45 à 90 ; au-delà, l'œil perd sa ligne en revenant à la marge — sur un article de
   2 000 mots, ça se paie. 700 px ramène à 88, dans la fourchette.
   Pas moins : à 620 px il se creuse une bande morte entre 660 et 820 px de fenêtre, où la
   colonne est déjà étroite sans qu'aucun objet large ne vienne la compenser. */
.wrap{max-width:700px;margin:0 auto;padding:0 20px}

/* ── LES SURFACES QUE PERSONNE NE DESSINE ──────────────────────────────────
   Sélection, curseur, anneau de focus, soulignement : elles arrivent avec les
   réglages du navigateur, qui n'appartiennent à aucune charte. */
::selection{background:var(--sel);color:var(--fort)}
:root{caret-color:var(--em)}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--em);outline-offset:3px;border-radius:4px;
}
a{color:var(--em);text-underline-offset:.18em;text-decoration-thickness:1px}

/* Le lien d'évitement : invisible tant qu'on ne tabule pas, premier arrêt du clavier ensuite.
   Aucune page n'en avait, ni de <main> : au clavier, atteindre le texte d'un article
   demandait de traverser l'en-tête à chaque page. */
.evite{position:absolute;left:-9999px;top:0;z-index:20;background:var(--em-plein);color:var(--sur-em);
  font:800 15px/1 var(--f);padding:14px 18px;border-radius:0 0 11px 0;text-decoration:none}
.evite:focus{left:0}

/* ── EN-TÊTE ─────────────────────────────────────────────────────────────── */
header{
  border-bottom:1px solid var(--line);padding:var(--e4) 0;
  position:sticky;top:0;background:var(--bg-flou);backdrop-filter:blur(8px);z-index:9;
  /* châssis : ce qui flotte au-dessus du contenu reste BLANC, le gris est au contenu. */
}
header .wrap{display:flex;align-items:center;justify-content:space-between}
.logo{font:800 20px/1 var(--ft);letter-spacing:.3px;color:var(--fort);text-decoration:none}
.logo img{width:26px;height:26px;border-radius:7px;vertical-align:-6px;margin-right:9px}
.logo span{color:var(--em)}
.hnav{display:flex;align-items:center;gap:14px}
.hnav>a:not(.btn){color:var(--sub);text-decoration:none;font:600 15px/1 var(--f);white-space:nowrap}
.hnav>a:not(.btn):hover,.hnav>a:not(.btn):focus-visible{color:var(--em)}
/* 🔴 L'ENCRE DU BOUTON N'EST PAS BLANCHE. #fff sur #ff6b3d ne fait que 2,83:1 — sous le
   seuil de 4,5:1, et illisible en plein soleil, qui est la situation exacte du lecteur.
   #2b0d03 donne 6,4:1 sur le même orange. 1 396 boutons dans le blog. */
.btn{display:inline-block;background:var(--acc);color:var(--sur-acc);text-decoration:none;
  font:800 15px/1 var(--f);padding:var(--e3) 20px;border-radius:11px}
.btn-2{background:transparent;border:1px solid var(--em);color:var(--em)}
@media (max-width:520px){
  .hnav{gap:10px}.hnav .btn{padding:10px 14px;font-size:14px}
  .hnav>a:not(.btn){font-size:14px}.logo{font-size:18px}.logo img{margin-right:6px}
}
@media (max-width:380px){
  .hnav{gap:var(--e2)}.hnav .btn{padding:10px 12px;font-size:13.5px}
  .hnav>a:not(.btn){font-size:13.5px}.logo{font-size:17px}
  .logo img{width:22px;height:22px;margin-right:5px;vertical-align:-5px}
}

/* ── HIÉRARCHIE ──────────────────────────────────────────────────────────────
   Plus d'air AU-DESSUS d'un titre qu'en dessous : c'est ce qui rattache le
   titre à son texte plutôt qu'au paragraphe qu'il vient de clore. */
h1{font:800 clamp(35px,5.6vw,46px)/1.12 var(--ft);margin:var(--e7) 0 14px;letter-spacing:-.022em;text-wrap:balance}
h2{font:800 27px/1.22 var(--ft);margin:var(--e7) 0 var(--e3);letter-spacing:-.014em;text-wrap:balance}
h3{font:800 20px/1.35 var(--f);margin:var(--e6) 0 var(--e2);letter-spacing:-.008em}
h2+p,h3+p,h2+ul,h2+ol{margin-top:0}
p{margin:0 0 var(--e5)}
.chapo{font-size:18px;line-height:1.55;color:var(--ink)}
.maj{font-size:13px;color:var(--sub)}
.bc{font-size:13px;color:var(--sub);padding-top:18px}
.bc a{color:var(--sub);text-decoration:none}
.bc a:hover{color:var(--em)}

/* L'EMPHASE, et sa hiérarchie retrouvée.
   Le corpus porte 15 546 gras pour 10 925 paragraphes — un gras et demi par
   paragraphe. À cette densité le gras ne distingue plus rien. On le calme en
   plein texte (650 au lieu de 700) et on réserve la vraie force à l'ATTAQUE :
   1 230 paragraphes et 607 puces s'ouvrent sur un terme suivi d'un point,
   c'est une entrée de dictionnaire, pas de l'insistance.
   🔴 .att EST POSÉE PAR appliquer-style-blog.py, PAS DEVINÉE PAR :first-child. :first-child ne
   voit pas le texte : il grossissait le premier gras de la phrase où qu'il soit (« Eybens » et
   pas « Claix »). Le script pose .att sur le gras qui ouvre le paragraphe et qui est suivi de
   texte ; un gras qui fait tout le paragraphe reste en 600. */
strong,b{font-weight:600}
:is(p,li)>.att{font-weight:800;color:var(--fort);letter-spacing:-.006em}

/* ── LISTES ──────────────────────────────────────────────────────────────────
   Puce dessinée, pas un glyphe de police : un filet court en émeraude, aligné
   optiquement sur la hauteur d'x plutôt que sur la ligne de base. */
ul,ol{margin:0 0 var(--e4);padding-left:0}
ul{list-style:none}
ol{padding-left:24px}
ul>li,ol>li{margin:0 0 10px;padding-left:24px;position:relative}
ol>li{padding-left:var(--e2)}
ul>li::before{
  content:"";position:absolute;left:2px;top:.72em;
  width:10px;height:2px;border-radius:1px;background:var(--em);
}
li>ul{margin:10px 0 0}
ol>li::marker{color:var(--em);font-weight:800}
/* Les listes qui sont des NAVIGATIONS, pas des énumérations : pas de tiret. */
:is(.deps,.menu,.vois,.kpis,.sommaire) li{padding-left:0}
:is(.deps,.menu,.vois,.kpis,.sommaire) li::before{content:none}

/* ── TABLEAUX ────────────────────────────────────────────────────────────────
   Le défaut le plus coûteux du blog. Mesuré en production sur un tableau à
   trois colonnes : à 375 px, colonne 1 = 78 px, lignes de 95 px de haut parce
   que chaque mot retourne à la ligne. À 760 px, des lignes séparées par un
   filet à 11 % de contraste et rien d'autre.

   Deux régimes, et c'est le cœur du moteur :
   · au-dessus de 640 px, un vrai tableau encadré, de la famille des panneaux ;
   · en dessous, chaque LIGNE devient une fiche, et chaque cellule porte le nom
     de sa colonne. Zéro défilement horizontal. L'intitulé vient de data-label,
     posé dans le HTML par appliquer-style-blog.py depuis la ligne d'en-tête.
   Un tableau SANS en-tête ne peut pas se replier : il reste un tableau et
   défile dans son rail. C'est pour cela que le rail existe dans les deux cas. */
.rail{
  margin:var(--e5) 0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--card);box-shadow:var(--relief);
}
.rail>div{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  /* Le geste de retour arrière d'iOS part du bord : pousser un tableau ne doit pas faire
     perdre la page. */
  overscroll-behavior-x:contain;
  /* Deux ombres de bord qui n'apparaissent QUE s'il reste à défiler de ce côté : les caches
     opaques voyagent avec le contenu (local), les ombres restent collées au cadre (scroll),
     donc elles se découvrent d'elles-mêmes. Aucun JavaScript. */
  background:
    linear-gradient(to right,var(--card) 30%,var(--card-0)) left center/28px 100% no-repeat local,
    linear-gradient(to left,var(--card) 30%,var(--card-0)) right center/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--ombre-bord),transparent) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--ombre-bord),transparent) right center/14px 100% no-repeat scroll;
}
table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.55}
/* Le parent direct d'une table encadrée est le <div> INTÉRIEUR du rail, jamais .rail :
   « :not(.rail)>table » attrapait donc AUSSI les tables du rail, à spécificité égale et plus
   bas dans la source — la marge revenait dedans et décollait le tableau de son cadre. */
.rail table{margin:0}
:not(.rail):not(.rail *)>table{margin:var(--e5) 0}

/* 🔴 PAS DE CAPITALES, PAS D'INTERLETTRAGE, PAS DE nowrap SUR UN th — MESURÉ.
   « Spots concernés » en capitales espacées à 13px pèse 115 à 221 px pour afficher « 107 ».
   Dans 158 colonnes sur 173, l'en-tête est ainsi plus de 1,5 fois plus large que sa donnée la
   plus large (rapport médian 5,5) : c'est l'EN-TÊTE, pas la donnée, qui dictait la largeur et
   écrasait les deux autres colonnes — d'où les 78 px de la colonne 1 mesurés en production.
   Avec nowrap en plus, les trois en-têtes se chevauchaient. Ils retournent à la ligne. */
thead th,tr:first-child th{
  background:var(--card-2);color:var(--sub);
  font:600 13px/1.35 var(--f);
  text-align:left;vertical-align:bottom;padding:var(--e3) 14px;
  border-bottom:1px solid var(--line-2);
}
td{
  padding:var(--e3) 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
tbody tr:last-child td{border-bottom:0}
/* Alternance très légère : assez pour suivre une ligne du regard sur toute sa largeur, pas
   assez pour qu'on la remarque. On compte dans <tbody>, que le script ajoute partout : sans
   lui la ligne d'en-tête comptait comme la ligne 1 et l'alternance partait à contretemps. */
tbody tr:nth-child(even) td{background:var(--card-3)}
/* Première colonne = l'identité de la ligne. Un nom propre insécable (« Alpes-de-Haute-Provence »,
   « Seine-Saint-Denis ») bloquait 26 tableaux au-dessus de 375 px : on l'autorise à se couper. */
td:first-child{color:var(--fort);font-weight:600;hyphens:auto}
/* Au-dessus de 600 px la place ne manque plus : la césure y coupait des noms de marque courts
   (« Decath-lon ») pour rien, la colonne se réduisant à ses fragments. */
@media (min-width:600px){td:first-child{hyphens:manual}}
td:first-child a{color:var(--fort)}
td:first-child a:hover{color:var(--em)}
/* Une colonne entièrement numérique, marquée par le script. width:1% la rétracte sur son
   contenu au lieu de lui laisser un tiers de la largeur, et la chasse tabulaire aligne les
   unités les unes sous les autres. */
/* 🔴 UN ATTRIBUT, PAS UNE CLASSE « num ». .num existe déjà dans ce blog : c'est la pastille
   ronde émeraude des étapes numérotées des pages de nœuds. Marquer les cellules de chiffres
   avec cette classe leur collait la pastille — un rond vert de 30 px derrière « 107 » sur les
   147 tableaux à colonne numérique. Un attribut ne peut entrer en collision avec rien. */
td[data-num],th[data-num]{font-variant-numeric:tabular-nums;text-align:right;width:1%;white-space:nowrap}
td[data-num]{font-weight:600;color:var(--ink)}
/* Un lien dans une cellule doit rester attrapable au pouce. */
td a{display:inline-block;padding:3px 0}
/* Les vignettes .pf (photos de fish/) et la planche .poisson ont été retirées le 16/10/2026 :
   provenance des photos non établie. Ne pas les remettre sans licence. */
caption{caption-side:bottom;text-align:left;font-size:12.5px;color:var(--sub);padding:10px 2px 0}

/* La barre de défilement du rail, quand il en faut une. */
.rail>div::-webkit-scrollbar{height:9px}
.rail>div::-webkit-scrollbar-track{background:var(--card)}
.rail>div::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.rail>div{scrollbar-width:thin;scrollbar-color:var(--line-2) var(--card)}

/* 🔴 CINQ TABLEAUX NE DOIVENT PAS SE REPLIER, et le script les marque .cmp.
   On les lit VERTICALEMENT, colonne par colonne : le classement des départements par densité,
   la matrice d'identification des poissons de mer, les tailles Manche contre Méditerranée.
   Empiler chaque ligne en fiche supprime exactement la comparaison qui fait leur utilité.
   Ils défilent donc, mais leur première colonne reste figée pour qu'on sache toujours de
   quelle ligne on lit la valeur. */
@media (max-width:640px){
  .cmp{min-width:max-content}
  .cmp :is(td,th):first-child{
    position:sticky;left:0;z-index:2;background:var(--card);
    box-shadow:8px 0 10px -10px var(--ombre-bord);max-width:42vw;
  }
  .cmp tbody tr:nth-child(even) td:first-child{background:var(--card-3)}
  .cmp thead th:first-child{background:var(--card-2)}
}

@media (max-width:640px){
  /* Le repli en fiches. Il ne s'applique QU'AUX tableaux étiquetés : les
     autres gardent le rail et défilent. */
  table[data-fiches]{display:block;font-size:16px}
  /* Masquer les cellules d'en-tête ne suffit pas : le <tr> reste un bloc avec son
     padding et son filet, soit une bande vide de 29 px en tête du tableau. C'est la
     LIGNE qu'il faut retirer. La règle sur th sert de repli aux navigateurs sans :has. */
  table[data-fiches] thead,table[data-fiches] tr:first-child th{display:none}
  table[data-fiches] tr:first-child:has(>th){display:none}
  table[data-fiches] tbody,table[data-fiches] tr,table[data-fiches] td{display:block;width:auto}
  table[data-fiches] tr{
    padding:14px var(--e4);border-bottom:1px solid var(--line);
  }
  table[data-fiches] tr:last-child{border-bottom:0}
  table[data-fiches] tr:nth-child(even){background:var(--card-3)}
  table[data-fiches] td{
    padding:0 0 var(--e2);border:0;background:none !important;
    display:grid;grid-template-columns:minmax(78px,34%) 1fr;gap:var(--e3);align-items:baseline;
  }
  table[data-fiches] td:last-child{padding-bottom:0}
  /* Minuscules, comme les th (voir plus haut) : en capitales espacées de 11,5 px dans 34 % de
     la largeur, « CE QUE LE PRÉFET PEUT FIXER » passait sur trois lignes. */
  table[data-fiches] td::before{
    content:attr(data-label);
    font:600 13px/1.35 var(--f);
    color:var(--sub);
  }
  /* La première cellule redevient le titre de la fiche : son intitulé de
     colonne n'apprend rien quand la valeur le dit déjà. */
  table[data-fiches] td:first-child{
    display:block;font:800 17px/1.35 var(--f);color:var(--fort);padding-bottom:10px;
  }
  table[data-fiches] td:first-child::before{content:none}
  /* En fiche, la valeur suit son intitulé : alignée à droite et sur une ligne, elle formait un
     escalier (« 467 » à droite, « 495 en 1972 » à gauche dans la même fiche). */
  table[data-fiches] td[data-num]{text-align:left;width:auto;white-space:normal}
  table[data-fiches] caption{display:block;text-align:left}
  .rail{border-radius:12px}
}

/* ── ENCADRÉS ────────────────────────────────────────────────────────────────
   Trois, pas quatre. Chacun répond à un besoin qu'on peut montrer dans le
   corpus ; un quatrième serait une nuance de rédaction, pas une catégorie de
   lecture, et le lecteur cesse de distinguer au-delà de trois.
     .prudence — le danger physique. Berge en enrochement mouillé, palplanche
       sans prise, écluse en service, vague qui rince une digue. C'est
       aujourd'hui noyé dans le texte courant, à l'endroit exact où l'on ne
       relit pas. Orange, et l'orange ne sert qu'à ça.
     .chiffre  — la donnée qu'on retient et qu'on peut refaire.
     .repere   — la règle de terrain, ce qu'un ancien dirait en deux phrases. */
.prudence,.chiffre,.repere{
  position:relative;
  margin:var(--e5) 0;padding:var(--e4) 18px var(--e4) 52px;
  border:1px solid;border-radius:var(--r);font-size:15.5px;line-height:1.62;
}
.prudence>:last-child,.chiffre>:last-child,.repere>:last-child{margin-bottom:0}
/* 🔴 LE TITRE, ET LUI SEUL. Écrit « .prudence b », ce sélecteur frappait TOUS les <b> de
   l'encadré : une phrase extraite contenant un mot en gras aurait affiché un second faux
   titre, en bloc et en capitales, au milieu de la phrase — coupée en trois lignes. Le titre
   est le PREMIER enfant, et c'est la seule chose qu'on met en capitales. */
.prudence>b:first-child,.chiffre>b:first-child,.repere>b:first-child{
  display:block;font:800 12.5px/1.4 var(--f);text-transform:uppercase;letter-spacing:.07em;
  margin-bottom:6px;
}
.prudence p b,.chiffre p b,.repere p b{font-weight:800;color:inherit}

.prudence{border-color:var(--prudence-bord);background-color:var(--prudence-fond);color:var(--prudence-txt)}
.prudence b{color:var(--acc-txt)}
.prudence::after{content:"";position:absolute;left:18px;top:18px;width:20px;height:20px;background-color:var(--acc-txt);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") no-repeat center/20px 20px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") no-repeat center/20px 20px}

.chiffre{border-color:var(--line);background-color:var(--card);color:var(--ink);box-shadow:var(--relief)}
.chiffre b{color:var(--sub)}
.chiffre strong{color:var(--em);font-weight:800}
.chiffre::after{content:"";position:absolute;left:18px;top:18px;width:20px;height:20px;background-color:var(--sub);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M7 15l4-5 3 3 4-6'/%3E%3C/svg%3E") no-repeat center/20px 20px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M7 15l4-5 3 3 4-6'/%3E%3C/svg%3E") no-repeat center/20px 20px}

.repere{border-color:var(--repere-bord);background-color:var(--repere-fond);color:var(--ink)}
.repere b{color:var(--em)}
.repere::after{content:"";position:absolute;left:18px;top:18px;width:20px;height:20px;background-color:var(--em);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E") no-repeat center/20px 20px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E") no-repeat center/20px 20px}

/* ── PANNEAUX DE LA PAGE ─────────────────────────────────────────────────── */
.cles{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin:var(--e6) 0;box-shadow:var(--relief)}
.cles>b{display:block;font:800 12.5px/1.4 var(--f);color:var(--em);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:var(--e3)}
.cles ul{margin:0}
.cles li{margin:0 0 10px;font-size:16px}
.cles li:last-child{margin-bottom:0}
.cles li b{color:var(--fort)}

.tool{position:relative;background:var(--bg);border:2px solid var(--em);border-radius:var(--r);
  padding:18px 20px;margin:var(--e6) 0}
.tool p{margin:0 0 var(--e3)}
.tool b{color:var(--fort)}

.final{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--e6) 26px;margin:var(--e7) 0 10px;text-align:center;box-shadow:var(--relief)}
.final h2{margin:0 0 var(--e3)}

/* La signature. Volontairement SANS fond : elle suit le panneau final, et deux cartes
   pleines l'une sous l'autre feraient deux appels à l'action là où la seconde n'en est
   pas un. Un filet et de l'air suffisent à dire « colophon ». */
.signature{display:flex;gap:16px;align-items:flex-start;
  margin:var(--e7) 0 var(--e5);padding-top:var(--e5);border-top:1px solid var(--line)}
.sig-p{flex:0 0 auto;width:56px;height:56px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line);
  font:800 17px/1 var(--ft);color:var(--em);letter-spacing:.02em}
.sig-t b{display:block;font:800 16px/1.3 var(--f);color:var(--fort)}
.sig-t>span{display:block;font-size:13px;color:var(--em);margin-top:2px}
.sig-t p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--sub);max-width:52ch}
@media (max-width:480px){.sig-p{width:48px;height:48px;font-size:15px}}

.faq h3{font-size:19px}
.faq h3+p{margin-bottom:var(--e5)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--e3);margin:var(--e5) 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--relief)}
.kpi b{display:block;font:800 25px/1.1 var(--ft);color:var(--em);font-variant-numeric:tabular-nums}
.kpi span{font-size:13px;color:var(--sub)}

.vois{color:var(--sub)}
.vois a{text-decoration:none;white-space:nowrap}
.vois a:hover{text-decoration:underline}

.deps{list-style:none;padding:0}
.deps li{margin:0 0 var(--e2);padding-left:0}
.deps li::before{content:none}
.deps a{text-decoration:none}
.deps a b{color:var(--fort)}
.deps a:hover b{color:var(--em)}
.deps span{color:var(--sub);font-size:14px}
.reg{margin:var(--e1) 0 var(--e3);font-size:15px;line-height:1.55;color:var(--sub)}
.reg span{display:block;white-space:nowrap;font-size:13px}
.menu{display:flex;flex-wrap:wrap;gap:var(--e2);margin:var(--e5) 0}
.menu a{display:inline-block;padding:var(--e2) 14px;border:1px solid var(--line-3);
  border-radius:999px;text-decoration:none;font-size:14.5px;background:var(--card)}
.menu a:hover,.menu a:focus-visible{border-color:var(--em)}

.etape{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin:0 0 18px;box-shadow:var(--relief)}
.etape h3{margin:0 0 var(--e2)}
.num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--em-plein);color:var(--sur-em);font:800 16px/1 var(--ft);
  margin-right:10px;vertical-align:middle}

/* ── LA COUPE DU MILIEU ──────────────────────────────────────────────────────
   L'eau vue en travers. Premier module du blog, désigné par le recensement : 193 articles
   emploient au moins deux termes de coupe (cassure, herbier, fosse, marnage, sous-berge) et
   aucun ne la dessine. Le corpus décrit l'eau DE CÔTÉ et ne sert que des vues DE DESSUS.

   🔴 LE DESSIN DANS LE SVG, LES MOTS DANS LA LISTE. Un viewBox de 600 unités affiché dans
   335 px est réduit de 44 % : un texte de 12 px y tomberait à 6,7 px. Le SVG ne porte donc que
   les cotes et des pastilles numérotées ; les noms de bandes sont du HTML, à leur taille
   réelle. C'est ce qui sépare un schéma qu'on lit sur la berge d'une image qu'on saute. */
.coupe{margin:var(--e6) 0}
.coupe-d{display:block;width:100%;height:auto;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.coupe-cles{
  margin:0;padding:var(--e4) 18px;list-style:none;counter-reset:c;
  background:var(--card);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r) var(--r);box-shadow:var(--relief);
}
.coupe-cles li{
  position:relative;margin:0 0 10px;padding-left:34px;font-size:15.5px;line-height:1.55;
  counter-increment:c;
}
.coupe-cles li:last-child{margin-bottom:0}
.coupe-cles li::before{
  content:counter(c);position:absolute;left:0;top:1px;
  width:23px;height:23px;border-radius:50%;
  background:var(--em-plein);color:var(--sur-em);
  font:800 13px/23px var(--f);text-align:center;
}
/* La bande qui porte la pêche : le seul accent du dessin, et il ne sert qu'à ça. */
.coupe-cles li.poste::before{background:var(--acc);color:var(--sur-acc)}
.coupe-cles li b{color:var(--fort)}
.coupe figcaption{font-size:13px;color:var(--sub);margin:10px 2px 0;line-height:1.55}

/* ── SOMMAIRE DE L'ARTICLE ───────────────────────────────────────────────────
   Une page du blog porte 13 titres de section en médiane, jusqu'à 18, pour 2 000 à 4 000 mots.
   Avant aujourd'hui, 1 page sur 330 portait un id sur ses h2, et le corpus entier comptait
   12 liens d'ancre : aucun moyen d'atteindre la section cherchée autrement qu'en faisant
   défiler. Le plus beau tableau du monde placé au quatrième écran coûte plus cher en temps de
   lecture que n'importe quel réglage typographique.
   Volontairement PAS une carte : le blog en compte déjà dix familles au même rayon de 16 px,
   un onzième panneau se serait fondu dans le décor. Une bande tenue par deux filets — un
   appareil de navigation, pas un contenu. */
.sommaire{
  margin:var(--e6) 0;padding:var(--e4) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.sommaire>b{
  display:block;font:800 12px/1.4 var(--f);text-transform:uppercase;letter-spacing:.08em;
  color:var(--sub);margin-bottom:var(--e3);
}
.sommaire ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:2px var(--e5)}
@media (min-width:600px){.sommaire ol{grid-template-columns:1fr 1fr}}
.sommaire li{margin:0}
.sommaire a{display:block;padding:5px 0;font-size:15px;line-height:1.45;color:var(--sub);text-decoration:none}
.sommaire a:hover,.sommaire a:focus-visible{color:var(--em)}

/* ── IMAGES ET SCHÉMAS ─────────────────────────────────────────────────────
   🔴 LA FIGURE DE LA CARTE ÉTAIT ÉCRITE EN STYLE EN LIGNE, avec les couleurs du thème sombre
   en dur : border 1px #1b4438 et figcaption #9fbdb1, sur 239 pages. Invisible tant que le blog
   n'avait qu'un thème ; le jour où la page passe en blanc, la légende tombe à 2:1 et le cadre
   disparaît. Un style en ligne ne peut PAS suivre un thème — c'est la raison de fond pour
   laquelle tout doit vivre dans la feuille. */
.carte{margin:var(--e5) 0}
.carte img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--relief)}
.carte figcaption{font-size:13px;color:var(--sub);margin-top:10px;line-height:1.55}

/* ── IMAGES ET SCHÉMAS ───────────────────────────────────────────────────── */
.hero{margin:22px 0 var(--e6)}
/* Photo de corps : même traitement que l'ouverture, autre respiration. Elle s'insère
   sous un titre de section et doit s'en détacher sans couper la lecture. */
.corps{margin:var(--e5) 0 var(--e6)}
.corps img{display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--relief)}
.corps figcaption{font-size:13px;color:var(--sub);margin:10px 2px 0;line-height:1.55}
.hero img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--relief)}
.hero figcaption{font-size:13px;color:var(--sub);margin:10px 2px 0;line-height:1.55}
/* LA VIDÉO, « clic pour charger ». Même composant que la landing (styles.css, .vid), piloté par
   /video.js, ici sur les jetons du blog. Rien de YouTube avant le clic : l'affiche est notre copie
   /brand/video-tour-*.jpg ; au clic, l'iframe youtube-nocookie prend la MÊME boîte 16:9, que
   aspect-ratio réserve d'avance (aucun décalage mesuré par Google). Cadre et légende = ceux de
   .hero ; le bouton est un aplat --em-plein encré --fort (5,9:1), le triangle un bord CSS.
   L'anneau de focus est celui de la feuille (:where(a,…):focus-visible), rien à redéclarer. */
.vid{margin:var(--e5) 0 var(--e6)}
.vid-box{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card);box-shadow:var(--relief);color:var(--fort)}
.vid-box img,.vid-box iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.vid-box img{object-fit:cover}
/* UNE ZONE LIBRE FIXE, LE COIN HAUT DROIT : les cinq affiches y ont du décor (vitre, arbres, ciel,
   eau) et aucun mot. Plus de réglage par affiche ; une affiche nouvelle laisse ce coin libre. */
.vid-play{position:absolute;right:3%;top:4.5%;width:68px;height:68px;border-radius:50%;
  background:var(--em-plein);box-shadow:0 8px 22px -8px var(--ombre-douce);transition:transform .22s ease-out}
.vid-play::before{content:"";position:absolute;left:26px;top:21px;border-style:solid;
  border-width:13px 0 13px 22px;border-color:transparent transparent transparent currentColor}
.vid-box:hover .vid-play,.vid-box:focus-visible .vid-play{transform:scale(1.08)}
@media (max-width:700px){.vid-play{width:56px;height:56px}.vid-play::before{left:21px;top:16px;border-width:12px 0 12px 19px}}
.vid-cap{font-size:13px;color:var(--sub);margin:10px 2px 0;line-height:1.55}
.sch{width:100%;height:auto;background:var(--plaque);border:1px solid var(--line-2);
  border-radius:12px;margin:14px 0 var(--e1)}
.schnote{font-size:13px;color:var(--sub);margin:0 0 var(--e1)}
/* 🔴 Les 138 schémas sont des PNG dont le fond sombre est GRAVÉ dans le fichier : aucune
   requête média ne les rattrapera. Sur page claire, ils reçoivent leur propre plaque, et se
   lisent comme une planche dans un manuel plutôt que comme une tache.
   🔴 LA PLAQUE EST SUR L'IMAGE, PAS SUR LA FIGURE (16/10/2026). Posée sur la figure, elle passait
   sous la légende, qui héritait de --ink : noir sur vert nuit, 1,05:1, 149 légendes invisibles. */
.schfig{margin:var(--e5) 0}
.schfig a{display:block;text-decoration:none}
.schfig img{display:block;width:100%;height:auto;margin:0;border:0;border-radius:var(--r);
  background:var(--plaque);padding:var(--e2)}
.schfig figcaption{font-size:13px;color:var(--sub);margin:10px 2px 0;line-height:1.55}
/* À 8 px sous sa figure (marges fusionnées : 24 − 16), à 24 px du texte qui suit. */
.schhint{font-size:12.5px;color:var(--sub);margin:calc(var(--e2) - var(--e5)) 0 var(--e5);display:none}
/* 🔴 640 px, PAS width:auto. width:auto reprenait la largeur du PNG (1 200 px) : on voyait 29 %
   du schéma, agrandi deux fois donc flou. À 640 px on en voit la moitié, net. Le défilement
   est sur le lien : la légende reste sous les yeux pendant qu'on fait glisser l'image. */
@media (max-width:680px){
  .schfig a{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:var(--r)}
  .schfig img{width:640px;max-width:none}
  .schhint{display:block}
}

/* Une ancre ne doit pas glisser sous l'en-tête collant. */
h2[id],h3[id]{scroll-margin-top:76px}

/* 🔴 LE PIED DE PAGE EST HORS DE .wrap sur toutes les pages : </main> referme la colonne avant
   lui. Il reprend donc la colonne de lui-même — 660 px de texte, 20 px de marge de chaque côté
   sur téléphone — au lieu de partir du bord de l'écran. */
footer{width:calc(100% - 40px);max-width:660px;margin:var(--e7) auto 0;padding:22px 0 44px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--sub)}
footer a{color:var(--sub)}
footer a:hover{color:var(--em)}

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

/* ── L'ENCART « EN CE MOMENT » DES PAGES DE STATION (29/09/2026) ──────────────────────────────
   En tête de la section « en direct », après le sommaire (décision d'Arthur du 29/09) : le chiffre
   du jour d'abord, la tendance, l'état pour la saison, puis le bouton vers l'app. Rempli par
   /blog/station-direct.js ; sans script, il dit qu'il charge. Suite au bloc « L01 » en fin de fichier. */
.direct{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--e5);margin:var(--e5) 0;display:grid;gap:var(--e2)}
.direct-t{margin:0;font:600 .82rem/1.3 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.direct-v{margin:0;display:flex;align-items:baseline;gap:var(--e2);flex-wrap:wrap}
.direct-v b{font:900 clamp(2.4rem,7vw,3.4rem)/1 var(--ft);color:var(--fort);font-variant-numeric:tabular-nums}
.direct-v span{font:600 1rem/1.3 var(--f);color:var(--sub)}
.direct-s{margin:0;color:var(--ink);font-size:.98rem}
.direct-p{margin:0;justify-self:start;font:700 .85rem/1 var(--f);padding:.45em .8em;border-radius:999px;border:1px solid var(--repere-bord);background:var(--repere-fond);color:var(--em)}
.direct-p.bas,.direct-p.haut{border-color:var(--prudence-bord);background:var(--prudence-fond);color:var(--prudence-txt)}
.direct .btn{justify-self:start;margin-top:var(--e2)}

/* ── L01 Pages de station (16/10/2026) ──────────────────────────────────────────────────────
   Audit des modèles, chantier 2. Tout est rempli par /blog/station-direct.js ; la page statique
   n'écrit jamais le mois en cours (il serait figé au jour de la génération). */
/* Le relevé dans le chapô, au premier écran. */
.direct-chapo b{color:var(--fort);font-weight:800}
/* Deux lignes de bouton qui ne se touchent plus (line-height 1 hérité de .btn). */
.direct .btn{line-height:1.25}
/* Ce qu'il faut faire de ce relevé, sous la pastille. */
.direct-f{margin:0;color:var(--ink);font-size:.98rem;line-height:1.5}
/* La réglette : la moitié des jours du mois en bande, le relevé en point orange. */
.direct-rb{position:relative;height:10px;border-radius:99px;background:var(--card-3);margin:var(--e2) 0 var(--e1)}
.direct-rh{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--em-plein);opacity:.4}
.direct-rp{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:var(--acc);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--ombre-bord)}
.direct-rl{margin:0;font-size:13.5px;line-height:1.45;color:var(--sub)}
.direct-src{margin:0;font-size:13px;line-height:1.45;color:var(--sub)}
/* Méthode et source, repliées sous l'encart. */
details.methode{margin:0 0 var(--e5);border-bottom:1px solid var(--line)}
details.methode summary{cursor:pointer;min-height:44px;padding:11px 0;font:600 15px/1.4 var(--f);color:var(--sub)}
details.methode summary:hover{color:var(--em)}
details.methode p{font-size:15.5px}
/* La courbe de l'année, en SVG dans la page : mois et graduations à environ 12 px sur téléphone.
   « st-saison » : « .saison » est la frise des mois des pages où pêcher (L05). */
figure.st-saison{margin:var(--e5) 0}
.st-saison svg{display:block;width:100%;max-width:460px;height:auto;overflow:visible}
.st-saison .g{stroke:var(--line-2);stroke-width:1}
.st-saison .ax{font:600 12.5px var(--f);fill:var(--sub)}
.st-saison .ax.u{font-weight:800}
.st-saison .ax.maintenant{fill:var(--fort);font-weight:800}
.st-saison .bande{fill:var(--em-plein);fill-opacity:.2}
.st-saison .med{fill:none;stroke:var(--em);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.st-saison .auj{fill:var(--acc);stroke:var(--bg);stroke-width:2}
.st-saison figcaption{font-size:13px;line-height:1.55;color:var(--sub);margin:var(--e2) 2px 0}
/* Le tableau des mois tient dans 350 px une fois rendu en vrai tableau (pas en fiches) : en-têtes
   avec unité sur deux lignes, et pas de césure dans le nom du mois (« Sep-tembre »). */
table.mois th[data-num]{white-space:normal}
table.mois td:first-child{hyphens:manual}
/* Le mois en cours dans le tableau des mois, en tableau comme en fiches. */
table.mois tbody tr.maintenant td{background:var(--repere-fond);font-weight:800}
table.mois:not([data-fiches]) tbody tr.maintenant td:first-child{box-shadow:inset 3px 0 0 var(--em-plein)}
table.mois[data-fiches] tr.maintenant{background:var(--repere-fond);box-shadow:inset 3px 0 0 var(--em-plein)}
/* Tant que le tableau des mois reste en fiches sur téléphone (dépliage : L02), des intitulés en
   casse normale (« BAS (M) » se lisait « méga ») et des valeurs alignées sous leur intitulé. */
@media (max-width:640px){
  table.mois[data-fiches] td::before{text-transform:none;letter-spacing:0}
  table.mois[data-fiches] td[data-num]{text-align:left;width:auto}
}
/* ── L02 Nettoyage et système commun ── */
/* Les tableaux COURTS restent des tableaux sur téléphone : appliquer-style-blog.py ne leur pose
   plus data-fiches (4 colonnes au plus, 14 caractères au plus hors 1re colonne, et assez étroits
   pour tenir à 360 px : voir traite_tableau). Un cran plus petits, ils tiennent dans la largeur et
   se comparent d'un coup d'œil. */
@media (max-width:640px){
  .rail table:not([data-fiches]):not(.cmp){font-size:14px}
  .rail table:not([data-fiches]):not(.cmp) :is(td,th){padding:8px 10px}
  /* Un intitulé de colonne de chiffres retourne à la ligne : en nowrap, « Records battus »
     poussait le tableau hors de l'écran et écrasait la 1re colonne. */
  .rail table:not([data-fiches]):not(.cmp) th{white-space:normal}
  /* Nom · nombre · « où la chercher » (.compact, posée par le script) : une ligne par espèce
     au lieu d'une fiche qui répète « Spots concernés / Où la chercher » à chaque fois. */
  table.compact[data-fiches] tr{display:grid;grid-template-columns:1fr auto;column-gap:var(--e3);
    align-items:baseline;padding:10px var(--e4)}
  table.compact[data-fiches] td{display:block;padding:0}
  table.compact[data-fiches] td::before{content:none}
  table.compact[data-fiches] td:first-child{grid-column:1;grid-row:1;padding:0;font-size:16px}
  /* --fort et pas --em : en 17 px gras, le vert tombait à 4:1 sur les lignes paires (--card-3). */
  table.compact[data-fiches] td[data-num]{grid-column:2;grid-row:1;text-align:right;
    font:800 17px/1.3 var(--ft);color:var(--fort)}
  table.compact[data-fiches] td:last-child:not([data-num]){grid-column:1/-1;grid-row:2;
    margin-top:2px;font-size:14px;line-height:1.45;color:var(--sub)}
  /* L'en-tête, UNE fois, sur la même grille : sans lui « Carpe 179 » ne dit pas ce que compte
     179 (« Spots concernés », « Signalements », « Spots dans le rayon » selon la page). La 3e colonne
     se lit d'elle-même sous le nom. */
  table.compact[data-fiches] thead{display:block}
  table.compact[data-fiches] thead tr:first-child{display:grid;grid-template-columns:1fr auto;
    column-gap:var(--e3);padding:8px var(--e4);background:var(--card-2);border-bottom:1px solid var(--line-2)}
  table.compact[data-fiches] thead th{display:block;width:auto;padding:0;border:0;background:none}
  table.compact[data-fiches] thead th:nth-child(n+3){display:none}
  /* Un mois ne se coupe pas (« Sep-tembre ») : la 1re colonne d'un tableau court a la place. */
  .rail table:not([data-fiches]):not(.cmp) td:first-child{hyphens:manual}
}
/* Cibles tactiles : 14 à 17 px de haut pour « Boutique », le fil d'Ariane et le pied de page ;
   un bouton sur deux lignes dont les lignes se touchaient (font:800 15px/1). */
.btn{line-height:1.25;min-height:44px;text-align:center}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
/* L'en-tête collant garde sa hauteur sur téléphone : le bouton grandit, la marge rétrécit. */
@media (max-width:520px){.hnav .btn{padding-block:13px}header{padding:11px 0}}
.hnav>a:not(.btn){padding:12px 0}
.bc a,footer a{display:inline-block;padding:6px 0}
@media (max-width:600px){.sommaire a{padding:9px 0}}
/* Sur une ligne alternée (--card-3), le lien --em tombe à 4:1 : il passe à l'encre forte. */
tbody tr:nth-child(even) td a{color:var(--fort)}
/* Tuiles chiffrées : l'intitulé ne prend plus l'interligne du corps quand il passe à la ligne,
   et une tuile seule sur sa ligne prend toute la largeur. */
.kpi span{display:block;line-height:1.35}
@media (max-width:480px){.kpi:last-child:nth-child(odd){grid-column:1/-1}}
/* ── L03 La carte en tête mène à l'app ──
   L'image est un lien vers /carte cadrée sur le lieu (mark-blog-links.py), et la pastille
   qui la suit dit où il mène. Contour vert, pas d'orange : l'orange reste au bouton. */
.carte-app{display:block}
.carte-voir{margin-top:calc(var(--e3) - var(--e5))}
@media (max-width:680px){.schhint+.carte-voir{margin-top:var(--e3)}}
.carte-voir .btn{line-height:1.25}
/* ── L04 Où pêcher : sommaire replié, FAQ repliée, bloc « Autour de <lieu> » ──
   Un seul chevron (masque SVG), partagé par les trois. Sur téléphone, le sommaire est un
   <details> fermé ; au-dessus de 600 px la feuille l'ouvre d'office (::details-content), et un
   navigateur qui ne connaît pas ce pseudo-élément garde simplement le sommaire repliable. */
.sommaire summary,.faq summary,details.methode summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--e3)}
.sommaire summary::-webkit-details-marker,.faq summary::-webkit-details-marker,details.methode summary::-webkit-details-marker{display:none}
.sommaire summary::after,.faq summary::after,details.methode summary::after{content:"";flex:0 0 auto;width:20px;height:20px;margin-left:auto;
  background-color:var(--em);transition:transform .2s ease-out;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center/20px 20px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center/20px 20px}
.sommaire details[open]>summary::after,.faq details[open]>summary::after,details.methode[open]>summary::after{transform:rotate(180deg)}
.sommaire{padding:var(--e1) 0}
.sommaire summary{min-height:48px;font:800 12px/1.4 var(--f);text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}
.sommaire ol{padding-bottom:var(--e3)}
@supports selector(::details-content){@media (min-width:600px){
  .sommaire details::details-content{content-visibility:visible}
  .sommaire summary{pointer-events:none;min-height:0;padding:var(--e3) 0}
  .sommaire summary::after{display:none}
}}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{min-height:48px;padding:var(--e3) 0}
.faq summary h3{margin:0;font-size:18px;line-height:1.4}
.faq summary:hover h3{color:var(--em)}
.faq details>p{margin:0 0 var(--e4)}
/* Le bloc de fin « Autour de <lieu> » : rangées de pastilles, après le panneau final, hors sommaire. */
.autour{margin:var(--e7) 0 0}
.autour-t{font:800 22px/1.25 var(--ft);color:var(--fort);margin:0 0 var(--e4);letter-spacing:-.01em}
.autour>div{margin:0 0 var(--e4)}
.autour>div>b{display:block;font:800 12px/1.4 var(--f);text-transform:uppercase;letter-spacing:.08em;color:var(--sub);margin-bottom:var(--e2)}
.autour ul{display:flex;flex-wrap:wrap;gap:var(--e2);margin:0;padding:0}
.autour li{margin:0;padding:0}
.autour li::before{content:none}
.autour li>*{display:inline-flex;align-items:center;min-height:44px;padding:var(--e2) 14px;border:1px solid var(--line-3);
  border-radius:999px;background:var(--card);font-size:15px;line-height:1.3;text-decoration:none}
.autour a:hover,.autour a:focus-visible{border-color:var(--em)}
.autour li>span{color:var(--sub)}
/* « Le guide détaillé autour de <ville> », posé dans le texte du département : cible de 44 px. */
.vers-ville a{display:inline-flex;align-items:center;min-height:44px}
.sig-l{display:inline-block;margin-top:var(--e2);padding:var(--e2) 0;font-size:14px;font-weight:600}
.maj a{color:inherit}
/* ── L05 Où pêcher : niveaux en direct, saisons, plans d'eau ───────────────────────────────────
   .niveaux : les pages de station PUBLIÉES, posées par drafts/lier-stations.py. Département : à la
   place de l'encart vers /niveaux-eau (même habillage que .tool), une ligne par station. Ville
   (.niveaux-v) : sous la carte, des cartes rivière · commune · distance. Cibles de 48 px au moins. */
.niveaux{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin:var(--e6) 0;box-shadow:var(--relief)}
.niveaux>p{margin:0 0 var(--e3)}
.niveaux b{color:var(--fort)}
.niveaux ul{margin:0 0 var(--e2);display:grid;gap:var(--e2)}
.niveaux li{margin:0;padding-left:0}
.niveaux li::before{content:none}
.niveaux li a{display:block;min-height:48px;padding:12px 40px 12px 14px;
  position:relative;background:var(--bg);border:1px solid var(--line-3);border-radius:12px;
  color:var(--sub);text-decoration:none;line-height:1.35}
.niveaux li a::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-5px;
  border:solid var(--em);border-width:0 2px 2px 0;transform:rotate(-45deg)}
.niveaux li a:hover,.niveaux li a:focus-visible{border-color:var(--em)}
.niveaux .niveaux-tous{margin:0;font-size:14.5px}
.niveaux .niveaux-tous a{display:inline-block;padding:10px 0}
.niveaux>.btn{line-height:1.3}
.niveaux-v{padding:14px;margin:var(--e5) 0}
.niveaux-t{font:800 12.5px/1.4 var(--f);color:var(--em);text-transform:uppercase;letter-spacing:.07em}
.niveaux-v ul{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.niveaux-v li a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:64px}
.niveaux-seul{background:none;border:0;box-shadow:none;padding:0}
.niveaux-seul ul{margin:0}
.niveaux-v li a span{font-size:14px}
/* .saison : la frise des 12 mois de « Quand y aller » (drafts/visuel-saison.py). Trois états, et la
   HAUTEUR double la couleur, comme sur les frises en image : lisible en daltonisme. */
.saison{margin:var(--e2) 0 var(--e5)}
.saison ol{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;align-items:end;margin:0;padding:0;list-style:none}
.saison li{margin:0;padding:0;display:flex;flex-direction:column;justify-content:flex-end;height:68px;text-align:center}
.saison li::before{content:"";display:block;border-radius:5px 5px 2px 2px}
.saison li span{display:block;margin-top:6px;font:700 13px/1 var(--f);color:var(--sub)}
.saison .s-b::before{height:44px;background:var(--em)}
.saison .s-p::before{height:26px;background:var(--em-plein);opacity:.45}
.saison .s-d::before{height:8px;background:var(--line-3)}
.saison figcaption{margin-top:var(--e3);font-size:13px;line-height:1.7;color:var(--sub)}
.saison .sw{display:inline-block;width:10px;margin:0 5px 0 0;border-radius:2px;vertical-align:baseline}
.saison .sw+.sw,.saison figcaption .sw:not(:first-child){margin-left:10px}
.saison .sw.s-b{height:14px;background:var(--em)}
.saison .sw.s-p{height:9px;background:var(--em-plein);opacity:.45}
.saison .sw.s-d{height:4px;background:var(--line-3)}
/* ul.spots : les plans d'eau qu'une partie vient de nommer, en liste « nom · commune · type »
   (drafts/passes/L05-6-plans-d-eau.py). Une ligne par plan d'eau, pour comparer sans relire. */
.spots{margin:var(--e4) 0 var(--e5);padding:var(--e2) 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.spots::before{content:"Plans d'eau cités";display:block;padding:var(--e2) 0 var(--e1);font:800 12.5px/1.4 var(--f);color:var(--em);text-transform:uppercase;letter-spacing:.07em}
.spots li{margin:0;padding:10px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;line-height:1.4}
.spots li:first-child{border-top:0}
.spots li::before{content:none}
.spots li>b:first-child{color:var(--fort);font-weight:700}
.spots li span{font-size:14px;color:var(--sub)}
/* ── L06 Hubs, accueil du blog et navigation ─────────────────────────────────────────────────
   Les listes de lieux sont des CASES à toucher, pas des liens de 22 px : le nom en gras, le code et
   le nombre de spots dessous (« 01 · 1 442 spots » se lisait « Ain 01 1 442 », trois nombres).
   Deux colonnes sur téléphone, trois sur ordinateur, 48 px au moins. Les listes de guides restent
   sur une colonne : leurs titres sont longs. */
.deps.grille{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e4);margin:0 0 var(--e5)}
@media (min-width:700px){.deps.grille{grid-template-columns:repeat(3,1fr)}}
.deps.grille li,.deps.guides li{margin:0}
.deps.grille :is(a,[data-file]){display:flex;flex-direction:column;justify-content:center;min-height:48px;height:100%;
  padding:var(--e2) 0;border-bottom:1px solid var(--line);color:var(--fort);text-decoration:none}
.deps.grille b,.deps.guides b{color:var(--fort);font-weight:700;line-height:1.3}
.deps.grille small,.deps.guides small{font-size:13px;line-height:1.4;color:var(--sub)}
.deps :is(a:hover,a:focus-visible) b{color:var(--em)}
.deps.guides a{display:block;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none}
.deps.guides b{display:block}
.deps.guides small{display:block;margin-top:2px;font-size:14px}

/* La recherche du sommaire : 48 px, une loupe dessinée, aucun autofocus. Pendant une recherche,
   seuls les blocs de listes restent (body.cherche, posé par le script de la page). */
.recherche{margin:var(--e5) 0 var(--e4)}
.recherche label{display:block;font:800 12.5px/1.4 var(--f);color:var(--sub);text-transform:uppercase;letter-spacing:.07em;margin-bottom:var(--e2)}
.q-champ{position:relative}
.q-champ::before{content:"";position:absolute;left:14px;top:50%;margin-top:-10px;width:20px;height:20px;background-color:var(--sub);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E") no-repeat center/20px 20px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E") no-repeat center/20px 20px}
.recherche input{width:100%;min-height:48px;padding:10px 14px 10px 44px;border:1px solid var(--line-3);border-radius:12px;
  background:var(--bg);font:400 16px/1.4 var(--f);color:var(--ink);-webkit-appearance:none;appearance:none}
.recherche input:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.recherche p{margin:var(--e2) 0 0;min-height:1.4em;font-size:14px;color:var(--sub)}
.cherche main .wrap>:not(.bc):not(h1):not(.chapo):not(.maj):not(.recherche):not(.bloc){display:none}
.bloc[hidden],.bloc li[hidden],.tiroirs details[hidden]{display:none}

/* Les six portes d'entrée du sommaire, et les quatre outils publics de l'app : même tuile. */
.entrees,.outils{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3);margin:var(--e4) 0 var(--e5)}
@media (min-width:600px){.entrees{grid-template-columns:repeat(3,1fr)}}
.entrees a,.outils a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;
  padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--relief);text-decoration:none}
.entrees svg,.outils svg{width:24px;height:24px;fill:var(--em);margin-bottom:6px}
.entrees b,.outils b{color:var(--fort);font-weight:700;font-size:15px;line-height:1.3}
.entrees small,.outils small{font-size:13px;line-height:1.4;color:var(--sub)}
.entrees a:hover,.outils a:hover,.entrees a:focus-visible,.outils a:focus-visible{border-color:var(--em)}
.entrees+.menu{margin-top:0}

/* « À lire en ce moment » : quatre guides, une vignette chacun. */
.une{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3);margin:0 0 var(--e5)}
@media (min-width:700px){.une{grid-template-columns:repeat(4,1fr)}}
.une a{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--relief);text-decoration:none;padding-bottom:var(--e3)}
.une img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin-bottom:var(--e2)}
.une small{padding:0 var(--e3);font-size:12px;line-height:1.35;color:var(--sub)}
.une b{padding:0 var(--e3);font:800 16px/1.25 var(--ft);color:var(--fort)}
.une a:hover b,.une a:focus-visible b{color:var(--em)}

/* Les tiroirs des stations : une ligne de 48 px qui nomme les rivières, un chevron dessiné. */
.tiroirs details{border-bottom:1px solid var(--line)}
.tiroirs summary{list-style:none;display:block;min-height:48px;padding:12px 32px 12px 0;
  position:relative;cursor:pointer;color:var(--fort);font-size:15.5px;line-height:1.5}
.tiroirs summary::-webkit-details-marker{display:none}
.tiroirs summary b{color:var(--sub);font-weight:600}
.tiroirs summary::after,.secteur summary::after{content:"";position:absolute;right:4px;top:50%;width:18px;height:18px;margin-top:-9px;background-color:var(--em);
  transition:transform .2s ease-out;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat center/18px 18px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat center/18px 18px}
.tiroirs details[open]>summary::after{transform:rotate(180deg)}
.tiroirs details>.deps{margin:0 0 var(--e3);padding-left:var(--e3)}

/* Hubs : « Choisir un secteur », entre le chapô et « Ce qu'il faut retenir ». Des pastilles .menu
   qui portent le nombre de spots, sur trois lignes titrées. */
.secteur{margin:var(--e5) 0}
.secteur>b{display:block;font:800 12.5px/1.4 var(--f);color:var(--em);text-transform:uppercase;letter-spacing:.07em;margin-bottom:var(--e2)}
.secteur p{margin:var(--e3) 0 var(--e1);font-size:13px;font-weight:600;color:var(--sub)}
.secteur .menu{margin:0}
.secteur .menu :is(a,[data-file]){display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--fort)}
.secteur .menu small{font-size:12.5px;color:var(--sub)}
/* Une page encore en file (relier-pays.py en fera un lien à sa sortie) : la pastille, en pointillé, sans lien. */
.secteur .menu [data-file]{padding:var(--e2) 14px;border:1px dashed var(--line-3);border-radius:999px;font-size:14.5px;color:var(--sub)}
.secteur summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:var(--e1);cursor:pointer;color:var(--em);font-size:14.5px}
.secteur summary::-webkit-details-marker{display:none}
.secteur summary::after{position:static;margin:0}
.secteur details[open]>summary::after{transform:rotate(180deg)}
.secteur details .menu{margin-top:var(--e1)}

/* Hubs régionaux : les « mondes » en cartes HTML (ils étaient une image à texte gravé, coupée et
   illisible sur téléphone). Une colonne sur téléphone, deux au-delà. */
.mondes{display:grid;grid-template-columns:1fr;gap:var(--e3);margin:var(--e5) 0}
@media (min-width:600px){.mondes{grid-template-columns:1fr 1fr}}
.mondes>b{grid-column:1/-1;font:800 19px/1.3 var(--ft);color:var(--fort)}
.monde{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--relief)}
.monde p{margin:0 0 6px;font-size:15px;line-height:1.5}
.monde p:last-child{margin:0}
.monde .m-t{font:800 17px/1.3 var(--ft);color:var(--fort)}
.monde .m-o,.monde .m-e{font-size:14px;color:var(--sub)}
.mondes>p{grid-column:1/-1;margin:0;font-size:14px;color:var(--sub)}
.mondes>.m-s{margin-top:-6px;font-size:16px;color:var(--ink)}
/* ── L07 Guides : ouverture, encart vers l'app, liens, sources, heures du jour ── */
/* Le titre sur 4 lignes au lieu de 6 sur téléphone : le plancher de 35 px s'appliquait toujours. */
@media (max-width:520px){h1{font-size:clamp(27px,7.6vw,35px);margin-top:var(--e5)}}
/* L'encart vers l'app dit d'où il vient : une étiquette et l'icône de la fonction, par masque. */
.tool::before{content:"Dans l'app Fishera";display:block;margin:0 0 var(--e2);padding-left:26px;
  font:800 12.5px/18px var(--f);letter-spacing:.07em;text-transform:uppercase;color:var(--em)}
.tool::after{content:"";position:absolute;left:20px;top:18px;width:18px;height:18px;background-color:var(--em);
  -webkit-mask:var(--ic-outil) no-repeat center/18px 18px;mask:var(--ic-outil) no-repeat center/18px 18px}
.tool{--ic-outil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12s-8-7-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.tool:has(a[href^="/meteo"]){--ic-outil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2M4.9 4.9l1.4 1.4M2 12h2M19.1 4.9l-1.4 1.4'/%3E%3Cpath d='M15.9 12.7A4 4 0 1 0 8.6 9.5'/%3E%3Cpath d='M13 22H7a4 4 0 1 1 1-7.9 5 5 0 0 1 9.6 1.9H18a3 3 0 0 1 0 6Z'/%3E%3C/svg%3E")}
.tool:is(:has(a[href^="/niveaux-eau"]),:has(a[href^="/marees"])){--ic-outil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6c2 0 2-2 5-2s3 2 5 2 2-2 5-2 3 2 5 2M2 12c2 0 2-2 5-2s3 2 5 2 2-2 5-2 3 2 5 2M2 18c2 0 2-2 5-2s3 2 5 2 2-2 5-2 3 2 5 2'/%3E%3C/svg%3E")}
.tool:has(a[href^="/boutique"]){--ic-outil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E")}
.tool:has(a[href^="/boutique"])::before{content:"Dans la boutique Fishera"}
/* TEST A/B (16/10/2026) : le premier encart d'une page sur deux en habillage sombre de l'app.
   Bras tiré par gabarit-guide.bras_outil(), mesuré par le code ?s= « -os » contre « -oc ». */
:root{--sur-plaque:#eaf3ef;--sur-plaque-2:#9fbdb1}
.tool-sombre{background:var(--plaque);border-color:var(--plaque);color:var(--sur-plaque)}
.tool.tool-sombre p b{color:var(--sur-plaque)}
.tool-sombre a:not(.btn){color:var(--sur-plaque)}
.tool-sombre::before{color:var(--sur-plaque-2)}
.tool-sombre::after{background-color:var(--sur-plaque-2)}
/* « À lire ensuite » : des cartes-liens au pouce (48 px) au lieu d'une ligne de liens coupés. */
.liens{display:grid;gap:var(--e2);margin:0 0 var(--e5)}
@media (min-width:600px){.liens{grid-template-columns:1fr 1fr}}
.liens li{margin:0;padding-left:0}
.liens li::before{content:none}
.liens li:has(>span[data-file]){display:none}   /* page encore en file (relier-pays.py) */
.liens a{display:flex;align-items:center;gap:var(--e3);min-height:48px;height:100%;padding:10px 14px;
  border:1px solid var(--line-3);border-radius:12px;background:var(--bg);color:var(--fort);
  font-weight:600;line-height:1.35;text-decoration:none}
.liens a::after{content:"";flex:0 0 auto;margin-left:auto;width:7px;height:7px;
  border-top:2px solid var(--em);border-right:2px solid var(--em);transform:rotate(45deg)}
.liens a:hover,.liens a:focus-visible{border-color:var(--em);color:var(--em)}
/* Sources et méthode, repliées avant la FAQ. */
.sources{margin:var(--e6) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sources summary{min-height:48px;display:flex;align-items:center;cursor:pointer;list-style:none;
  font:800 15px/1.3 var(--f);color:var(--fort)}
.sources summary::-webkit-details-marker{display:none}
.sources summary::after{content:"";margin:0 6px 4px auto;width:8px;height:8px;
  border-right:2px solid var(--em);border-bottom:2px solid var(--em);transform:rotate(45deg)}
.sources[open] summary::after{margin-bottom:-4px;transform:rotate(-135deg)}
.sources>p,.sources li{font-size:14.5px;line-height:1.6;color:var(--sub)}
.sources ul{margin:0 0 var(--e4)}
/* Le titre d'un tableau de guide, avec son unité, au-dessus du tableau. */
.tbl caption{caption-side:top;font:600 14px/1.4 var(--f);color:var(--fort);text-align:left;padding:12px 14px 4px}
/* Les heures de pêche du jour (blog/conditions-direct.js) : même encart que le direct des stations. */
.direct-n{margin:0;font-size:14px;line-height:1.55;color:var(--sub)}
.direct .direct-pos{justify-self:start;cursor:pointer;min-height:48px}
/* ── L08 Guides d'espèces : « Le matériel de ce guide » et « Où le pêcher » ──
   Le bloc matériel ferme la partie « Avec quoi » (poser-materiel.py) : vignette, nom, geste.
   Chaque ligne est un lien entier, d'au moins 44 px de haut au doigt. Pas de prix. */
.materiel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--e4) 20px var(--e2);margin:var(--e5) 0;box-shadow:var(--relief)}
.materiel>b{display:block;font:800 12.5px/1.4 var(--f);color:var(--em);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:var(--e1)}
.materiel ul{list-style:none;margin:0;padding:0}
.materiel li{margin:0;padding-left:0;border-top:1px solid var(--line)}
.materiel li::before{content:none}
.materiel li:first-child{border-top:0}
.materiel a{display:flex;align-items:center;gap:var(--e3);min-height:44px;padding:var(--e3) 0;
  color:var(--ink);text-decoration:none}
.materiel img{flex:none;width:64px;height:64px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg);object-fit:cover}
.materiel span{font-size:15px;line-height:1.5}
.materiel span b{display:block;font-weight:800;color:var(--em)}
.materiel a:hover span b,.materiel a:focus-visible span b{text-decoration:underline}
.ou-pecher{font-size:15.5px;line-height:1.65}
/* ── L10 Schémas, nœuds, affiches vidéo ── */
/* Visuel de données : sous 600 px, <picture> sert la version portrait (1 080 × 1 350) ;
   sans version portrait, l'image est un lien pour l'ouvrir en grand. */
.corps>picture,.corps>a{display:block}
/* PLANCHES DE NŒUDS : le dessin ne porte que des pastilles numérotées, les noms des brins sont
   dans la liste .coupe-cles posée dessous. La planche se lit donc entière à la largeur du
   téléphone : plus de défilement horizontal, et elle déborde sur la marge de la carte. */
.schfig .coupe-cles{border-top:1px solid var(--line);border-radius:var(--r);margin-top:var(--e2)}
@media (max-width:680px){
  .etape .schfig{margin-left:-14px;margin-right:-14px}
  .etape .schfig img{width:100%;min-width:0;max-width:100%}
}
.etape[id]{scroll-margin-top:76px}
/* La clé de lecture, une fois, avant la première étape ; échantillons sur la plaque des schémas. */
.cle-lecture{font-size:15px;line-height:1.8;color:var(--sub);margin:0 0 var(--e4)}
.cle-lecture span{display:block}
.cle-lecture span:not(:has(svg)){padding-left:40px}
.cle-lecture svg{display:inline-block;width:34px;height:18px;margin:0 6px 0 0;vertical-align:-4px;
  border-radius:5px;background:var(--plaque)}
.suivante{margin:var(--e3) 0 0}
.suivante a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
/* « Le Palomar en 4 gestes » : la liste des étapes, chaque ligne mène à la sienne. */
.cles ol{margin:0;padding-left:22px}
.cles ol li{margin:0 0 4px;font-size:16px}
.cles ol a{display:block;padding:6px 0}
/* « Quel nœud pour quoi » : la ligne de la page en cours. */
tr.ici td{background:var(--repere-fond);font-weight:600}
tr.ici td:first-child{box-shadow:inset 4px 0 0 var(--em-plein)}
@media (max-width:640px){
  /* En fiches (data-fiches), le fond des cellules est neutralisé : la fiche entière porte le repère. */
  table[data-fiches] tbody tr.ici{background:var(--repere-fond);box-shadow:inset 4px 0 0 var(--em-plein)}
  table[data-fiches] tr.ici td:first-child{box-shadow:none}
}
/* ── Corrections après contrôle (17/10/2026) ── */
/* Stations : « (compte gratuit) » ne se coupe plus en deux dans le bouton (Lez, Orb, Sarthe…). */
.direct .btn .nw{white-space:nowrap}
/* Stations sur ordinateur : la colonne « Mois » prenait 70 % du tableau, valeurs tassées à droite. */
@media (min-width:641px){table.mois :is(th,td):first-child{width:34%}}
/* Villes : la rangée des départements voisins (.vois, « Haute-Garonne (31) · Gers (32) ») en pastilles
   de 44 px, comme le bloc « Autour » ; les « · » de la ligne ne s'affichent plus (taille nulle). */
.vois{display:flex;flex-wrap:wrap;gap:var(--e2);font-size:0}
.vois>*{font-size:15px}
.vois a{display:inline-flex;align-items:center;min-height:44px;padding:var(--e2) 14px;border:1px solid var(--line-3);
  border-radius:999px;color:var(--fort);white-space:normal}
.vois a:hover,.vois a:focus-visible{border-color:var(--em);text-decoration:none}
.vois b{display:flex;align-items:center;min-height:44px}
/* Cibles tactiles relevées à 390 px : « Boutique » de l'en-tête (38 px), noms d'espèces du tableau
   compact (28 px), titres de région du sommaire (25 px), liens des cartes « mondes » (18 px). */
.hnav>a:not(.btn){padding:16px 4px}
@media (max-width:640px){table.compact[data-fiches] td:first-child a{display:inline-block;padding:8px 0}}
.bloc h3 a{display:inline-block;padding:10px 0}
.monde .m-o a,.maj a{display:inline-block;padding:13px 0;margin:-13px 0}   /* 44 px à toucher, sans décaler la ligne */
/* Hubs : une pastille pointillée (page encore en file) dit qu'elle n'est pas encore un lien. */
.secteur .menu [data-file]::after{content:"bientôt";font-size:12px;color:var(--sub)}
/* Schémas de l'ancienne génération (PNG de 900 px, data-natif posé par appliquer-style-blog.py) : à leur
   taille native sur téléphone, comme avant la règle des 640 px, pour que leurs textes restent lisibles. */
@media (max-width:680px){.schfig img[data-natif]{width:auto;min-width:640px}}
/* Un schéma servi en portrait sous 600 px (<picture>, L10-2) tient dans la largeur : pas de défilement. */
@media (max-width:600px){.schfig picture img{width:100%;min-width:0;max-width:100%}}
/* Tableau .cmp (défile, 1re colonne figée) : sa légende reste dans l'écran au lieu de défiler et d'être
   coupée (« …arrêté du 26 octobre 201 », regles-peche-mer à 360 px). */
@media (max-width:640px){table.cmp caption{position:sticky;left:0;max-width:calc(100vw - 42px)}}

/* ── affiche « TA SORTIE SANDRE » (vidéo du tour, 18/10/2026) : bouton lecture sur l’eau, en bas à gauche ── */
.vid-sa .vid-play{right:auto;left:12%;top:76%;margin:-34px 0 0 -34px}
@media (max-width:700px){.vid-sa .vid-play{margin:-28px 0 0 -28px}}