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

   Une seule feuille pour les 329 pages. 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. :root porte le thème CLAIR, qui est celui de la majorité des lecteurs ; une
   seule requête média bascule l'ensemble vers « Deep Water ». Aucune couleur n'est déclarée
   ailleurs que dans ces deux blocs : une couleur écrite en dur dans une règle n'existerait que
   dans un thème et donnerait, dans l'autre, du texte d'un thème sur le fond de l'autre. */

/* ── 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, parce que ce sont les
   quatre graisses que cette feuille demande réellement. */
@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 */
  --haut:#ffffff;      /* la surface HAUTE : barres, en-tête collant — le blanc flotte */
  --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 — 8,6: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,6:1 sur blanc */
  --em-plein:#12b886;  /* aplats : pastilles, points de carte */
  --sur-em:#ffffff;

  --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 9,0:1 sur le même orange. */
  --sur-acc:#2b0d03;

  --zebre:rgba(14,42,36,.035);
  --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; --e8:64px;
}

*{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}
a:hover{text-decoration-color:var(--em)}

/* Le lien d'évitement : invisible tant qu'on ne tabule pas, premier arrêt du clavier ensuite.
   Aucune des 329 pages 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 9,0: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:19px;line-height:1.62;color:var(--sub)}
.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. */
strong,b{font-weight:600}
:is(p,li)>:is(strong,b):first-child{font-weight:800;color:var(--fort);letter-spacing:-.006em}
/* …sauf quand le gras est TOUT le paragraphe ou TOUTE la puce : ce n'est plus une attaque,
   c'est une phrase en gras, et la blanchir en 800 en ferait un faux titre. */
:is(p,li)>:is(strong,b):first-child:last-child{font-weight:600;color:inherit;letter-spacing:0}

/* ── 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}

/* LA VIGNETTE D'ESPÈCE.
   Le blog possédait 293 photos de poissons détourées, servies en production depuis des mois,
   et n'en montrait aucune : 279 pages sur 329 n'avaient qu'une carte grise pour 2 000 à
   4 000 mots. Elles sont posées ici, dans la cellule qui portait déjà le lien vers la fiche.
   Boîte FIXE et object-fit:contain : les photos vont de 300×64 (esturgeon) à 300×161 (brème),
   et sans boîte fixe chaque ligne du tableau prendrait une hauteur différente. Rien n'est
   rogné, le poisson se centre dans son cadre. */
td a:has(.pf){display:flex;align-items:center;gap:10px;padding:2px 0}
.pf{
  flex:0 0 auto;width:72px;height:36px;object-fit:contain;object-position:left center;
  /* Fond transparent sur fond sombre : un poisson clair s'y détache, un poisson sombre non.
     Une ombre portée très douce le décolle sans dessiner de cadre. */
  filter:drop-shadow(0 1px 1px rgba(16,40,34,.22));
}
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}
  table[data-fiches] td::before{
    content:attr(data-label);
    font:800 11.5px/1.5 var(--f);text-transform:uppercase;letter-spacing:.07em;
    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;
  }
  /* Sur téléphone la ligne devient une fiche : la photo passe en tête, plus grande. */
  table[data-fiches] td:first-child a:has(.pf){gap:12px}
  table[data-fiches] .pf{width:104px;height:52px}
  table[data-fiches] td:first-child::before{content:none}
  table[data-fiches] td.num{text-align:left}
  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{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin:var(--e6) 0;box-shadow:var(--relief)}
.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 planche d'espèce. Les photos de fish/ sont des détourages sur fond transparent, larges
   de 300 px : on ne les agrandit PAS. Une illustration nette à sa taille bat une grande floue,
   et sur une colonne de 700 px un spécimen centré se lit très bien. Le fond gris de la carte
   sert de plan : sans lui, un poisson détouré flotte sur le blanc de la page. */
.poisson{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--e5) var(--e5) var(--e4);margin:var(--e5) 0 var(--e6);box-shadow:var(--relief)}
.poisson .pp{display:flex;gap:var(--e5);align-items:flex-end;justify-content:center;flex-wrap:wrap}
.poisson .pn{flex:1 1 210px;max-width:300px;text-align:center}
.poisson img{width:100%;max-width:300px;height:auto;display:block;margin:0 auto}
.poisson .pn b{display:block;margin-top:var(--e2);font:700 13px/1.3 var(--f);color:var(--sub)}
.poisson figcaption{margin-top:var(--e4);font-size:14.5px;line-height:1.6;color:var(--sub)}
@media (max-width:480px){.poisson{padding:var(--e4)}.poisson .pp{gap: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(--e6) 0 var(--e3);font-weight:800}
.reg span{color:var(--sub);font-weight:400;font-size:14px}
.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}
.ph{border:2px dashed var(--acc);border-radius:12px;padding:26px 20px;margin:var(--e4) 0 6px;
  color:var(--acc-txt);font-size:14px;background:var(--prudence-fond)}
.ph b{display:block;font-size:15px;margin-bottom:6px}
.ph i{color:var(--sub);font-style:normal;display:block;margin-top:var(--e2);font-size:13px}

/* ── 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 14 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}
/* à 34 % de la hauteur : centré, il cachait « SPOTS » sur l'affiche en mobile (même réglage que styles.css) */
.vid-play{position:absolute;left:50%;top:34%;width:68px;height:68px;margin:-34px 0 0 -34px;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)}

/* affiche « CE QUE TU NE VOIS PAS » (vidéo profondeur) : le bouton lecture se pose sur l'eau bleue, entre le texte et le cercle rouge */
.vid-pr .vid-play { left: 60%; top: 32%; }
.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)}
.schfig{margin:var(--e5) 0}
.schfig a{display:block;text-decoration:none}
.schfig img{display:block;width:100%;height:auto;border-radius:12px;border:0}
/* 🔴 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. */
.schfig{background:var(--plaque);border-radius:var(--r);padding:var(--e2)}
.schhint{font-size:12.5px;color:var(--sub);margin:var(--e2) 0 0;display:none}
@media (max-width:680px){
  .schfig{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
  .schfig img{width:auto;max-width:none;min-width:640px}
  .schhint{display:block}
}

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

footer{border-top:1px solid var(--line);margin-top:var(--e7);padding:22px 0 44px;
  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) ──────────────────────────────
   Juste sous le titre : 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. */
.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)}