/* ════════════════════════════════════════════════════════════
   rte.css — SOURCE A PART ENTIERE, MAINTENUE A LA MAIN
   ════════════════════════════════════════════════════════════

   Ce fichier n'est plus genere. Il a ete produit une fois, le
   2026-09-12, par tools/extract-rte.py (aujourd'hui archive dans
   tools/archive/extract-rte.py, cf. le README a cote pour le detail
   et pourquoi ce script ne doit plus jamais tourner) — un outil de
   MIGRATION a usage unique, pas un generateur permanent. Il a copie
   depuis style.css les regles de style du contenu editorial (blocs
   de l'editeur, typographie riche, tableaux, FAQ, etc.), scopees et
   doublees pour le theme sombre (voir plus bas).

   Etape suivante, immediatement apres cette generation : le RETRAIT
   (7 lots, cf. tools/retrait-analyse.md) a supprime ces memes regles
   de style.css, une fois leur equivalent ici verifie identique. A
   partir de ce moment-la, style.css a cesse d'etre une source
   complete pour le contenu editorial — il ne porte plus que le
   chrome du site, le reset/la typographie de base (jamais scopee,
   cf. tools/retrait-analyse.md §1), et du code mort pas encore
   nettoye. C'est pour ca que ce fichier ne peut plus etre regenere
   depuis style.css : le script relu aujourd'hui ne retrouverait plus
   les regles que le retrait a deplacees, et ecraserait ce fichier
   avec une version appauvrie (verifie empiriquement avant d'archiver
   le script : un essai a blanc a produit 183 regles au lieu de 498).

   rte.css est donc maintenant, au meme titre que style.css, une
   source geree a la main. Toute correction de style de contenu se
   fait ICI directement (et, si le meme defaut existe cote chrome,
   separement dans style.css — les deux fichiers n'ont plus de lien
   automatique entre eux).

   Conventions a respecter pour toute regle ajoutee ou modifiee ici
   (celles que le script appliquait automatiquement) :

   1. Scope (.rte) — un selecteur sans classe ni id doit etre prefixe
      `.rte` (`p` -> `.rte p`, `body.dark h2` -> `body.dark .rte h2`) :
      un selecteur nu s'appliquerait a toute la page admin, pas
      seulement a la zone d'edition. Les selecteurs qui portent deja
      une classe n'ont pas besoin de ce prefixe.

   2. Theme sombre — le front bascule en classe (`body.dark`), l'admin
      en attribut (`body[data-theme="dark"]`) ; toute regle `body.dark X`
      doit donc etre doublee `body.dark X, body[data-theme="dark"] X`,
      memes declarations, meme specificite. Toujours JUSTE APRES la
      regle claire correspondante (jamais regroupees dans une section
      dediee) : `body.dark X` a toujours une specificite strictement
      superieure a `X`, sa position dans le fichier n'affecte donc
      jamais qui gagne — autant la garder lisible à côté de la règle
      qu'elle assombrit.

   Etat au moment du gel (avant le retrait, pour memoire historique) :
   498 regles issues de style.css, generees avec 25 selecteurs nus
   prefixes et 172 jumeaux sombres. Le detail complet de cette
   extraction est archive dans tools/archive/rte-extraction-report.md
   (document historique, plus jamais regenere).
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   SOMMAIRE
   1. Typographie de contenu — reset + styles de base des balises
      HTML émises par l'éditeur.
   2. Éléments — tableaux, images, embeds : réutilisables par tout
      contenu, indépendamment de tout bloc de l'éditeur.
   3. Blocs éditeur — un bloc par sous-section, regroupés par
      catégorie puis triés comme dans la palette admin (colonnes
      `category`, `sort_order` de `content_blocks`, vérifiées au
      2026-09-19 — à revérifier en base si la palette a bougé).
   (Pas de section « pages spécifiques » pour l'instant : le seul
   contenu qui y avait été rangé était en fait le doublon buggé de
   .bloc-checklist ci-dessous — supprimé, pas déplacé. À réintroduire
   le jour où du CSS vraiment lié à un template précis apparaît ici.)
   ════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   1. TYPOGRAPHIE DE CONTENU
   Reset des listes/citations natives, puis styles de base des balises
   HTML émises par l'éditeur (titres, paragraphes, liens, listes,
   citations, code, séparateurs).
   ══════════════════════════════════════════════════════════════════════ */

/******************** Reset v1 ********************/
.rte ol,
.rte ul {
	list-style: none;
}
.rte blockquote,
.rte q {
	quotes: none;
}
.rte blockquote:before,
.rte blockquote:after,
.rte q:before,
.rte q:after {
	content: '';
	content: none;
}
.rte table {
	border-collapse: collapse;
	border-spacing: 0;
}

/******************** Typography ********************/
.rte p {
	margin-bottom: 1rem;
}
.rte em {
	font-style: italic;
}
body.dark .rte h1,
body[data-theme="dark"] .rte h1,
body.dark .rte h2,
body[data-theme="dark"] .rte h2,
body.dark .rte h3,
body[data-theme="dark"] .rte h3,
body.dark .rte h4,
body[data-theme="dark"] .rte h4,
body.dark .rte h5,
body[data-theme="dark"] .rte h5,
body.dark .rte h6,
body[data-theme="dark"] .rte h6 {
	color: #fff;
}
.rte h1 { font-size: calc(1.375rem + 1.5vw); }
.rte h2 { font-size: calc(1.325rem + .9vw); }
.rte h3 { font-size: calc(1.3rem + .6vw); }
.rte h4 { font-size: calc(1.275rem + .3vw); }
.rte h5 { font-size: 1.25rem; }
.rte h6 { font-size: 1rem; }
.rte strong,
.rte b {
	font-weight: 700;
}

.rte > *:first-child { margin-top: 0; }
.rte > *:last-child { margin-bottom: 0; }

/* font-weight du reset global (style.css:96, `h1,h2,h3,h4,h5,h6{...}`) :
ce bloc combine html/body/nav/form et consorts, classe PARTAGE a
raison, jamais extrait. Les .rte hN ci-dessous reprennent deja
font-family/couleur/marges de ce meme reset ; il ne leur manquait
que font-weight. */
.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
  font-weight: 500;
}
.rte h2 {
  font-family: 'recoletabold';
  font-size: calc(1.2rem + 0.4vw);
  line-height: 1.25;
  margin: 3rem 0 1rem;
  padding-top: 1rem;
  color: #000;
  scroll-margin-top: 100px;
}
body.dark .rte h2,
body[data-theme="dark"] .rte h2 { color: #fff; }
.rte h3 {
  font-family: 'recoletabold';
  font-size: 1.12rem;
  margin: 2rem 0 0.75rem;
  color: #133331;
  scroll-margin-top: 100px;
}
body.dark .rte h3,
body[data-theme="dark"] .rte h3 { color: #cbd8ac; }
.rte h4 {
  font-family: 'recoletabold';
  font-size: 1.05rem;
  margin: 1.75rem 0 0.6rem;
  color: #133331;
  scroll-margin-top: 100px;
}
body.dark .rte h4,
body[data-theme="dark"] .rte h4 { color: #cbd8ac; }
.rte h5 {
  font-family: 'recoletabold';
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
  color: #133331;
  scroll-margin-top: 100px;
}
body.dark .rte h5,
body[data-theme="dark"] .rte h5 { color: #cbd8ac; }
.rte h6 {
  font-family: 'recoletabold';
  font-size: 0.9rem;
  margin: 1.25rem 0 0.5rem;
  color: #133331;
  scroll-margin-top: 100px;
}
body.dark .rte h6,
body[data-theme="dark"] .rte h6 { color: #cbd8ac; }
.rte p {
  font-size: 1.05rem; line-height: 1.8;
  color: #525252; margin-bottom: 1.25rem;
}
body.dark .rte p,
body[data-theme="dark"] .rte p { color: rgba(255, 255, 255, 0.8); }

/* Lien de contenu — absent en global (style.css:2007 `a{...}` n'est
jamais scope), donc jamais extrait vers rte.css : sans cette regle,
admin.css:70 (`a{color:inherit;text-decoration:none}`, pense pour
le chrome de l'admin) rend un lien de contenu invisible dans la
zone d'edition. */
.rte a {
  color: #133331;
  text-decoration: underline;
  text-decoration-color: #7dad65;
  text-underline-offset: 0.15em;
}
.rte a:hover {
  color: #7dad65;
  text-decoration-color: #7dad65;
}
.rte a:focus-visible {
  outline: 2px solid #c85032;
  outline-offset: 2px;
  border-radius: 0.15em;
}
.rte a[target="_blank"]::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.75em;
  color: #f9d87f;
  text-decoration: none;
}
body.dark .rte a,
body[data-theme="dark"] .rte a {
  color: #7dad65;
  text-decoration-color: #7dad65;
}
body.dark .rte a:hover,
body[data-theme="dark"] .rte a:hover {
  color: #f9d87f;
  text-decoration-color: #f9d87f;
}
.rte strong { color: #133331; }
body.dark .rte strong,
body[data-theme="dark"] .rte strong { color: #fff; }
.rte ul,
.rte ol {
  margin: 1.25rem 0; padding-left: 1.25rem;
}
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte ul ul { list-style: circle; }
.rte ul ul ul { list-style: square; }
.rte ol ol { list-style: lower-alpha; }
.rte ol ol ol { list-style: lower-roman; }
.rte li {
  font-size: 1rem; line-height: 1.75;
  color: #525252; margin-bottom: 0.6rem;
  padding-left: 0.25rem;
}
body.dark .rte li,
body[data-theme="dark"] .rte li { color: rgba(255, 255, 255, 0.8); }
.rte li strong { color: #133331; }
body.dark .rte li strong,
body[data-theme="dark"] .rte li strong { color: #fff; }
.rte li > ul,
.rte li > ol {
  margin: 0.5rem 0 0;
}
.rte blockquote:not([class]) {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 4px solid #7dad65;
  font-style: italic;
  color: #133331;
}
body.dark .rte blockquote:not([class]),
body[data-theme="dark"] .rte blockquote:not([class]) { color: rgba(255, 255, 255, 0.85); }
.rte blockquote:not([class]) p:last-child { margin-bottom: 0; }
.rte code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em;
  background: rgba(19, 51, 49, 0.08);
  color: #133331;
  padding: 0.15em 0.4em;
  border-radius: 0.35em;
}
body.dark .rte code,
body[data-theme="dark"] .rte code {
  background: rgba(255, 255, 255, 0.12);
  color: #cbd8ac;
}
.rte hr {
  border: none;
  border-top: 2px solid #7dad65;
  width: 4rem;
  margin: 3rem auto;
}
.rte u {
  text-decoration: underline;
  text-decoration-color: #7dad65;
  text-underline-offset: 0.15em;
}
.rte s {
  text-decoration: line-through;
  text-decoration-color: #c85032;
  opacity: 0.75;
}
body.dark .rte s,
body[data-theme="dark"] .rte s {
  text-decoration-color: #f0916a;
}

/* ══════════════════════════════════════════════════════════════════════
   2. ÉLÉMENTS
   Sous-composants réutilisables émis par l'éditeur, indépendamment de
   tout bloc : tableaux, images, embeds.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tableaux ──────────────────────────────────────────────────────────
   Cible :
   · <figure class="table"><table> ... (output éditeur Tiptap)
   · <div class="table-wrap"><table class="table-styled"> (composants manuels)
   · .rte table (tables brutes dans le rte)
   ──────────────────────────────────────────────────────────────────── */

/* ── 1. Wrapper scrollable ── */
figure.table {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
figure.table,
.rte figure.table {
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: 0.75rem;
  /* border: 1px solid rgba(19, 51, 49, 0.10); */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(19, 51, 49, 0.15) transparent;
}
body.dark figure.table,
body[data-theme="dark"] figure.table,
body.dark .rte figure.table,
body[data-theme="dark"] .rte figure.table {
  border-color: rgba(203, 216, 172, 0.12);
  scrollbar-color: rgba(203, 216, 172, 0.2) transparent;
}

/* ── 2. Table de base ── */
figure.table table,
.rte figure.table table,
.rte table,
.table-styled {
  width: 100%;
  min-width: 400px;           /* force le scroll plutôt que l'écrasement */
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #fff;
}
body.dark figure.table table,
body[data-theme="dark"] figure.table table,
body.dark .rte figure.table table,
body[data-theme="dark"] .rte figure.table table,
body.dark .rte table,
body[data-theme="dark"] .rte table,
body.dark .table-styled,
body[data-theme="dark"] .table-styled {
  background: #0d2321;
}

/* table brute dans le rte, en enfant direct (sans figure.table) : sans
conteneur pour absorber un `min-width`, on le retire plutôt que de
le faire scroller — un `overflow-x` sur l'element qui porte lui-meme
son `min-width` ne peut rien contenir, la boite grandit, point
(cf. tools/archive/rte-extraction-report.md et l'historique de ce fichier).
Un tableau nu se comprime donc au lieu de deborder ; moins soigne
qu'un scroll, mais ca ne concerne que les fiches anterieures a
l'enveloppe <figure class="table"> de l'editeur. Doit rester APRES
la regle « Table de base » ci-dessus : meme specificite (.rte table
et .rte > table valent toutes deux 0,1,1), donc c'est l'ordre dans
le fichier qui decide, et c'est ce `min-width: 0` qui doit gagner. */
.rte > table {
  min-width: 0;
  display: block;
  overflow-x: auto;
  border-radius: 0.75rem;
  border: 1px solid rgba(19, 51, 49, 0.10);
  margin: 2rem 0;
  -webkit-overflow-scrolling: touch;
}
body.dark .rte > table,
body[data-theme="dark"] .rte > table {
  border-color: rgba(203, 216, 172, 0.12);
}

/* ── 3. En-tête ── */
figure.table table thead tr,
.rte figure.table table thead tr,
.rte table thead tr,
.table-styled thead tr {
  background: #133331;
}
figure.table table th,
.rte figure.table table th,
.rte table th,
.table-styled th {
  padding: 0.85rem 1.1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
  border-bottom: none;
}

/* première colonne d'en-tête arrondie à gauche */
figure.table table thead tr th:first-child,
.rte figure.table table thead tr th:first-child,
.rte table thead tr th:first-child,
.table-styled thead tr th:first-child {
  border-radius: 0.65rem 0 0 0;
}

/* dernière colonne d'en-tête arrondie à droite */
figure.table table thead tr th:last-child,
.rte figure.table table thead tr th:last-child,
.rte table thead tr th:last-child,
.table-styled thead tr th:last-child {
  border-radius: 0 0.65rem 0 0;
}

/* ── 4. Corps ── */
figure.table table td,
.rte figure.table table td,
.rte table td,
.table-styled td {
  padding: 0.75rem 1.1rem;
  color: #525252;
  border-bottom: 1px solid rgba(19, 51, 49, 0.07);
  vertical-align: top;
  line-height: 1.6;
}
body.dark figure.table table td,
body[data-theme="dark"] figure.table table td,
body.dark .rte figure.table table td,
body[data-theme="dark"] .rte figure.table table td,
body.dark .rte table td,
body[data-theme="dark"] .rte table td,
body.dark .table-styled td,
body[data-theme="dark"] .table-styled td {
  color: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(203, 216, 172, 0.08);
}

/* Pas de bordure sur la dernière ligne */
figure.table table tbody tr:last-child td,
.rte figure.table table tbody tr:last-child td,
.rte table tbody tr:last-child td,
.table-styled tbody tr:last-child td {
  border-bottom: none;
}

/* Lignes paires — zèbre léger */
figure.table table tbody tr:nth-child(even),
.rte figure.table table tbody tr:nth-child(even),
.rte table tbody tr:nth-child(even),
.table-styled tbody tr:nth-child(even) {
  background: rgba(203, 216, 172, 0.05);
}
body.dark figure.table table tbody tr:nth-child(even),
body[data-theme="dark"] figure.table table tbody tr:nth-child(even),
body.dark .rte figure.table table tbody tr:nth-child(even),
body[data-theme="dark"] .rte figure.table table tbody tr:nth-child(even),
body.dark .rte table tbody tr:nth-child(even),
body[data-theme="dark"] .rte table tbody tr:nth-child(even),
body.dark .table-styled tbody tr:nth-child(even),
body[data-theme="dark"] .table-styled tbody tr:nth-child(even) {
  background: rgba(203, 216, 172, 0.04);
}

/* Hover sur les lignes */
figure.table table tbody tr,
.rte figure.table table tbody tr,
.rte table tbody tr,
.table-styled tbody tr {
  transition: background 0.18s ease;
}
figure.table table tbody tr:hover,
.rte figure.table table tbody tr:hover,
.rte table tbody tr:hover,
.table-styled tbody tr:hover {
  background: rgba(203, 216, 172, 0.10);
}
body.dark figure.table table tbody tr:hover,
body[data-theme="dark"] figure.table table tbody tr:hover,
body.dark .rte figure.table table tbody tr:hover,
body[data-theme="dark"] .rte figure.table table tbody tr:hover,
body.dark .rte table tbody tr:hover,
body[data-theme="dark"] .rte table tbody tr:hover,
body.dark .table-styled tbody tr:hover,
body[data-theme="dark"] .table-styled tbody tr:hover {
  background: rgba(203, 216, 172, 0.07);
}

/* première colonne en gras/foncée (label) */
figure.table table td:first-child,
.rte figure.table table td:first-child,
.rte table td:first-child,
.table-styled td:first-child {
  font-weight: 600;
  color: #133331;
}
body.dark figure.table table td:first-child,
body[data-theme="dark"] figure.table table td:first-child,
body.dark .rte figure.table table td:first-child,
body[data-theme="dark"] .rte figure.table table td:first-child,
body.dark .rte table td:first-child,
body[data-theme="dark"] .rte table td:first-child,
body.dark .table-styled td:first-child,
body[data-theme="dark"] .table-styled td:first-child {
  color: #cbd8ac;
}

/* strong à l'intérieur d'une cellule */
figure.table table td strong,
.rte figure.table table td strong,
.rte table td strong,
.table-styled td strong {
  color: #133331;
  font-weight: 700;
}
body.dark figure.table table td strong,
body[data-theme="dark"] figure.table table td strong,
body.dark .rte figure.table table td strong,
body[data-theme="dark"] .rte figure.table table td strong,
body.dark .rte table td strong,
body[data-theme="dark"] .rte table td strong,
body.dark .table-styled td strong,
body[data-theme="dark"] .table-styled td strong {
  color: #fff;
}

/* ── 6. pied de tableau optionnel ── */
figure.table table tfoot td,
.rte figure.table table tfoot td,
.rte table tfoot td,
.table-styled tfoot td {
  padding: 0.65rem 1.1rem;
  font-size: 0.82rem;
  color: #999;
  font-style: italic;
  border-top: 1px solid rgba(19, 51, 49, 0.10);
  border-bottom: none;
  background: rgba(19, 51, 49, 0.02);
}
body.dark figure.table table tfoot td,
body[data-theme="dark"] figure.table table tfoot td,
body.dark .rte figure.table table tfoot td,
body[data-theme="dark"] .rte figure.table table tfoot td,
body.dark .rte table tfoot td,
body[data-theme="dark"] .rte table tfoot td,
body.dark .table-styled tfoot td,
body[data-theme="dark"] .table-styled tfoot td {
  border-top-color: rgba(203, 216, 172, 0.10);
  background: rgba(203, 216, 172, 0.02);
  color: rgba(255, 255, 255, 0.4);
}

/* ── 7. Légende (figcaption sous figure.table) ── */
figure.table figcaption {
  font-size: 0.80rem;
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 0.6rem 1rem 0.9rem;
  border-top: 1px solid rgba(19, 51, 49, 0.07);
  background: rgba(19, 51, 49, 0.01);
  border-radius: 0 0 0.65rem 0.65rem;
}
body.dark figure.table figcaption,
body[data-theme="dark"] figure.table figcaption {
  border-top-color: rgba(203, 216, 172, 0.08);
  background: rgba(203, 216, 172, 0.02);
  color: rgba(255, 255, 255, 0.4);
}

/* Usage : <td><span class="tbl-badge tbl-badge--ok">Oui</span></td> */
.tbl-badge {
  display: inline-block;
  padding: 0.18rem 0.65rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tbl-badge--ok {
  background: rgba(125, 173, 101, 0.12);
  color: #4a8a2e;
}
body.dark .tbl-badge--ok,
body[data-theme="dark"] .tbl-badge--ok {
  background: rgba(125, 173, 101, 0.15);
  color: #9dcf78;
}
.tbl-badge--warn {
  background: rgba(232, 167, 78, 0.12);
  color: #a06c20;
}
body.dark .tbl-badge--warn,
body[data-theme="dark"] .tbl-badge--warn {
  background: rgba(232, 167, 78, 0.15);
  color: #e8a74e;
}
.tbl-badge--no {
  background: rgba(200, 80, 50, 0.10);
  color: #c85032;
}
body.dark .tbl-badge--no,
body[data-theme="dark"] .tbl-badge--no {
  background: rgba(200, 80, 50, 0.15);
  color: #e8734f;
}
.tbl-badge--neutral {
  background: rgba(82, 82, 82, 0.08);
  color: #525252;
}
body.dark .tbl-badge--neutral,
body[data-theme="dark"] .tbl-badge--neutral {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

/* Indicateur visuel de scroll horizontal */

@media (max-width: 600px) {
  figure.table::after {
      content: '';
      display: block;
      height: 2px;
      margin: 0 1rem 0.75rem;
      border-radius: 1px;
      background: linear-gradient(to right, #cbd8ac 0%, transparent 100%);
      opacity: 0.4;
    }
  figure.table table th,
    .rte figure.table table th,
    .rte table th,
    .table-styled th {
      padding: 0.7rem 0.85rem;
      font-size: 0.70rem;
    }
  figure.table table td,
    .rte figure.table table td,
    .rte table td,
    .table-styled td {
      padding: 0.65rem 0.85rem;
      font-size: 0.88rem;
    }
}

/* Définition complète et autonome de .table-styled (tableau manuel,
   voie d'édition conservée par PurifierWhitelistCache::baseClasses()).
   Remplace les deux définitions partielles et contradictoires qui
   existaient ici (une repliée dans le sélecteur groupé figure.table/
   .rte table ci-dessus, une autre autonome plus bas qui la recouvrait
   partiellement) : chaque valeur ci-dessous est celle qui gagnait déjà
   aujourd'hui dans la cascade, reprise telle quelle pour ne plus
   dépendre de deux blocs à la fois. */
.table-styled {
  width: 100%;
  min-width: 400px;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #fff;
}
body.dark .table-styled,
body[data-theme="dark"] .table-styled { background: #0d2321; }

.table-styled thead tr { background: #133331; }
.table-styled th {
  text-align: left; padding: 0.75rem 1rem;
  background: #133331; color: #fff;
  font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: none;
}
.table-styled thead tr th:first-child { border-radius: 0.65rem 0 0 0; }
.table-styled thead tr th:last-child { border-radius: 0 0.65rem 0 0; }

.table-styled td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(19, 51, 49, 0.06);
  color: #525252; line-height: 1.5;
  vertical-align: top;
}
body.dark .table-styled td,
body[data-theme="dark"] .table-styled td { border-bottom-color: rgba(203, 216, 172, 0.08); color: rgba(255, 255, 255, 0.8); }

.table-styled tbody tr:last-child td { border-bottom: none; }

.table-styled tbody tr:nth-child(even) { background: rgba(203, 216, 172, 0.05); }
body.dark .table-styled tbody tr:nth-child(even),
body[data-theme="dark"] .table-styled tbody tr:nth-child(even) { background: rgba(203, 216, 172, 0.04); }

.table-styled tbody tr { transition: background 0.2s ease; }
.table-styled tbody tr:hover { background: rgba(203, 216, 172, 0.06); }
body.dark .table-styled tbody tr:hover,
body[data-theme="dark"] .table-styled tbody tr:hover { background: rgba(203, 216, 172, 0.07); }

.table-styled td:first-child { font-weight: 600; color: #133331; }
body.dark .table-styled td:first-child,
body[data-theme="dark"] .table-styled td:first-child { color: #cbd8ac; }

.table-styled td strong { color: #133331; font-weight: 700; }
body.dark .table-styled td strong,
body[data-theme="dark"] .table-styled td strong { color: #fff; }

.table-styled tfoot td {
  padding: 0.65rem 1.1rem;
  font-size: 0.82rem;
  color: #999;
  font-style: italic;
  border-top: 1px solid rgba(19, 51, 49, 0.10);
  border-bottom: none;
  background: rgba(19, 51, 49, 0.02);
}
body.dark .table-styled tfoot td,
body[data-theme="dark"] .table-styled tfoot td {
  border-top-color: rgba(203, 216, 172, 0.10);
  background: rgba(203, 216, 172, 0.02);
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 600px) {
  .table-styled th { padding: 0.7rem 0.85rem; font-size: 0.70rem; }
  .table-styled td { padding: 0.65rem 0.85rem; font-size: 0.88rem; }
}

/* ── Images ── */
.article-image {
  margin: 2.5rem -1.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
}
.article-image img { width: 100%; display: block; border-radius: inherit; }
.article-image figcaption {
  font-size: 0.82rem; color: #999;
  text-align: center; padding: 0.75rem 1.5rem 0;
  font-style: italic; line-height: 1.5;
}

@media (max-width: 600px) {
  .article-image { margin-left: -16px; margin-right: -16px; border-radius: 0; }
}

.plant-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}

@media (max-width: 599px) {
  .plant-gallery { grid-template-columns: repeat(2, 1fr); }
}
.plant-gallery__item {
  margin: 0;
}
.plant-gallery__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
}
.plant-gallery__item:hover img { transform: scale(1.03); }
.plant-gallery__item figcaption {
  font-size: 0.75rem;
  font-weight: 600;
  color: #525252;
  text-align: center;
  margin-top: 0.35rem;
}
body.dark .plant-gallery__item figcaption,
body[data-theme="dark"] .plant-gallery__item figcaption { color: rgba(255, 255, 255, 0.6); }

/* ── Embeds ── */
.embed-responsive {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 2.5rem -1.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #000;
}
.embed-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 600px) {
  .embed-responsive { margin-left: -16px; margin-right: -16px; border-radius: 0; }
}
.embed-social { margin: 1.75rem 0; }
.embed-social blockquote,
.embed-social .fb-post {
  display: block;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(19, 51, 49, 0.12);
  border-radius: 0.75rem;
  background: rgba(19, 51, 49, 0.03);
  font-size: 0.9rem;
  line-height: 1.5;
}
body.dark .embed-social blockquote,
body[data-theme="dark"] .embed-social blockquote,
body.dark .embed-social .fb-post,
body[data-theme="dark"] .embed-social .fb-post {
  border-color: rgba(203, 216, 172, 0.15);
  background: rgba(203, 216, 172, 0.05);
}
.embed-social blockquote a,
.embed-social .fb-post a {
  color: #7dad65;
  font-weight: 600;
  text-decoration: none;
}
.embed-social blockquote a:hover,
.embed-social .fb-post a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   3. BLOCS ÉDITEUR
   Un bloc par sous-section, regroupés par catégorie puis triés comme
   dans la palette admin (category, sort_order de content_blocks, tel
   que vérifié le 2026-09-19 — à revérifier en base si la palette a
   bougé depuis).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Acquisition ── */

/* Bloc : Newsletter (inline) */
.bloc-newsletter {
  background: #133331;
  border-radius: 0.75rem;
  padding: 2rem;
  margin: 2.5rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .bloc-newsletter {
      grid-template-columns: 1.2fr 1fr;
      align-items: center;
      padding: 2rem 2.5rem;
    }
}
.bloc-newsletter__title {
  font-family: 'recoletabold';
  font-size: 1.2rem; color: #fff;
  display: block; margin-bottom: 0.35rem;
}
.bloc-newsletter__desc {
  font-size: 0.9rem; color: rgba(255, 255, 255, 0.7);
  line-height: 1.55; margin-bottom: 0;
}
.bloc-newsletter__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem; margin-bottom: 0.5rem;
}

@media (max-width: 400px) {
  .bloc-newsletter__fields { grid-template-columns: 1fr; }
}
.bloc-newsletter__btn { width: 100%; }
.bloc-newsletter__note {
  display: block; text-align: center;
  font-size: 0.72rem; color: rgba(255, 255, 255, 0.4);
  margin-top: 0.4rem;
}

/* Bloc : Lead Magnet (PDF + form) — pas de CSS dédié ici pour l'instant. */

/* ── Alertes ── */

/* Bloc : Callout (info / warning / danger) */
.callout {
  display: flex;
  align-items: flex-start; gap: 0.85rem;
  padding: 1.15rem 1.35rem;
  border-radius: 10px;
  border-left: 4px solid;
  margin: 1.5rem 0;
}
.callout__icon {
  flex-shrink: 0;
  font-size: 1.15rem;
  margin-top: 1px;
}
.callout__body { flex: 1; min-width: 0; }
.callout__title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: #133331;
}
body.dark .callout__title,
body[data-theme="dark"] .callout__title { color: #fff; }
.callout__body p {
  font-size: 0.85rem;
  line-height: 1.65;
  margin: 0;
}

/* Info */
.callout--info {
  background: rgba(100, 149, 237, 0.04);
  border-left-color: #6495ed;
}
body.dark .callout--info,
body[data-theme="dark"] .callout--info { background: rgba(100, 149, 237, 0.05); }
.callout--info .callout__icon { color: #6495ed; }

/* Warning */
.callout--warning {
  background: rgba(232, 167, 78, 0.04);
  border-left-color: #e8a74e;
}
body.dark .callout--warning,
body[data-theme="dark"] .callout--warning { background: rgba(232, 167, 78, 0.05); }
.callout--warning .callout__icon { color: #e8a74e; }

/* Danger */
.callout--danger {
  background: rgba(200, 80, 50, 0.04);
  border-left-color: #c85032;
}
body.dark .callout--danger,
body[data-theme="dark"] .callout--danger { background: rgba(200, 80, 50, 0.05); }
.callout--danger .callout__icon { color: #c85032; }

/* ── Commerce ── */

/* Bloc : Produits recommandés — carte individuelle, puis grille.
   .bloc-produits* et .bloc-etapes* (plus bas) n'existent que dans ce
   fichier : ces styles ont transité par style.css un temps puis en ont
   été retirés (lot 4, cf. tools/retrait-analyse.md) — contrairement aux
   autres blocs, pas de version cross-file à garder en tête ici. */
.bloc-produit {
  margin: 2rem 0;
  border: 1px solid rgba(19, 51, 49, 0.08);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.bloc-produit:hover {
  box-shadow: 0 8px 24px rgba(19, 51, 49, 0.06);
}
body.dark .bloc-produit,
body[data-theme="dark"] .bloc-produit { border-color: rgba(203, 216, 172, 0.1); }
.bloc-produit__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
}

@media (max-width: 560px) {
  .bloc-produit__inner {
      flex-direction: column;
      align-items: flex-start;
    }
}
.bloc-produit__img {
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #f4f2ee;
}
body.dark .bloc-produit__img,
body[data-theme="dark"] .bloc-produit__img { background: rgba(19, 51, 49, 0.3); }
.bloc-produit__body { flex: 1; }
.bloc-produit__eyebrow {
  display: block;
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #f9d87f;
  margin-bottom: 0.2rem;
}
.bloc-produit__name {
  display: block;
  font-family: 'recoletabold';
  font-size: 1rem;
  line-height: 1.3;
  color: #133331;
  margin-bottom: 0.3rem;
}
body.dark .bloc-produit__name,
body[data-theme="dark"] .bloc-produit__name { color: #fff; }
.bloc-produit__desc {
  font-size: 0.88rem; color: #999;
  line-height: 1.5; margin-bottom: 0.35rem;
}
.bloc-produit__price {
  font-weight: 700;
  font-size: 0.95rem;
  color: #133331;
}
body.dark .bloc-produit__price,
body[data-theme="dark"] .bloc-produit__price { color: #cbd8ac; }

.bloc-produits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 2.5rem 0;
}
.bloc-produits .bloc-produit {
  margin: 0; /* reset — la marge verticale est sur le wrapper */
}

/* Si un seul produit, on laisse l'affichage pleine largeur comme avant */
.bloc-produits:has(> .bloc-produit:only-child) {
  grid-template-columns: 1fr;
}

/* Cap à 2 colonnes sur tablet */

@media (max-width: 900px) {
  .bloc-produits {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* 1 colonne sur mobile */

@media (max-width: 600px) {
  .bloc-produits {
      grid-template-columns: 1fr;
    }
}

/* ── Contenu ── */

/* Bloc : Conseil de Tom */
.bloc-conseil {
  background: rgba(203, 216, 172, 0.1);
  border: 1px solid rgba(203, 216, 172, 0.25);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 2rem 0;
}
body.dark .bloc-conseil,
body[data-theme="dark"] .bloc-conseil {
  background: rgba(203, 216, 172, 0.05);
  border-color: rgba(203, 216, 172, 0.12);
}
.bloc-conseil__header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(203, 216, 172, 0.2);
}
body.dark .bloc-conseil__header,
body[data-theme="dark"] .bloc-conseil__header { border-bottom-color: rgba(203, 216, 172, 0.1); }
.bloc-conseil__avatar {
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(203, 216, 172, 0.4);
}
.bloc-conseil__name {
  display: block; font-family: 'recoletabold';
  font-size: 0.95rem; color: #133331;
}
body.dark .bloc-conseil__name,
body[data-theme="dark"] .bloc-conseil__name { color: #cbd8ac; }
.bloc-conseil__subtitle { display: block; font-size: 0.78rem; color: #999; }
.bloc-conseil__body p {
  font-size: 0.98rem; line-height: 1.7;
  color: #525252; margin-bottom: 0; font-style: italic;
}
body.dark .bloc-conseil__body p,
body[data-theme="dark"] .bloc-conseil__body p { color: rgba(255, 255, 255, 0.8); }

/* Bloc : Chiffre clé */
.bloc-chiffre {
  text-align: center;
  padding: 2rem 1.5rem;
  margin: 2.5rem 0;
  border-top: 1px solid rgba(19, 51, 49, 0.08);
  border-bottom: 1px solid rgba(19, 51, 49, 0.08);
}
body.dark .bloc-chiffre,
body[data-theme="dark"] .bloc-chiffre {
  border-color: rgba(203, 216, 172, 0.1);
}
.bloc-chiffre__number {
  display: block;
  font-family: 'recoletabold';
  font-size: 3rem;
  line-height: 1;
  color: #133331;
  margin-bottom: 0.35rem;
}
body.dark .bloc-chiffre__number,
body[data-theme="dark"] .bloc-chiffre__number { color: #cbd8ac; }
.bloc-chiffre__label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: #133331;
  margin-bottom: 0.35rem;
}
body.dark .bloc-chiffre__label,
body[data-theme="dark"] .bloc-chiffre__label { color: #fff; }
.bloc-chiffre__context {
  display: block;
  font-size: 0.88rem;
  color: #999;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Bloc : Checklist */
.bloc-checklist {
  margin: 1.75rem 0;
  padding: 1.5rem;
  background: rgba(19, 51, 49, 0.02);
  border: 1px solid rgba(19, 51, 49, 0.06);
  border-radius: 0.75rem;
}
body.dark .bloc-checklist,
body[data-theme="dark"] .bloc-checklist {
  background: rgba(203, 216, 172, 0.03);
  border-color: rgba(203, 216, 172, 0.08);
}
.bloc-checklist__title {
  font-family: 'recoletabold';
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #133331;
}
body.dark .bloc-checklist__title,
body[data-theme="dark"] .bloc-checklist__title { color: #cbd8ac; }
.bloc-checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bloc-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(19, 51, 49, 0.04);
  font-size: 0.95rem;
  line-height: 1.6;
  color: #525252;
}
.bloc-checklist__item:last-child { border-bottom: none; }
body.dark .bloc-checklist__item,
body[data-theme="dark"] .bloc-checklist__item {
  border-bottom-color: rgba(203, 216, 172, 0.06);
  color: rgba(255, 255, 255, 0.8);
}
.bloc-checklist__check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 2px solid rgba(203, 216, 172, 0.5);
  border-radius: 4px;
  margin-top: 3px;
  position: relative;
  background: rgba(203, 216, 172, 0.08);
}
.bloc-checklist__check::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 8px; height: 12px;
  border: solid #cbd8ac;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0.5;
}
body.dark .bloc-checklist__check,
body[data-theme="dark"] .bloc-checklist__check {
  border-color: rgba(203, 216, 172, 0.3);
  background: rgba(203, 216, 172, 0.05);
}
.bloc-checklist__item strong { color: #133331; }
body.dark .bloc-checklist__item strong,
body[data-theme="dark"] .bloc-checklist__item strong { color: #fff; }

/* Bloc : Avant / Après */
.bloc-avant-apres {
  margin: 2.5rem 0;
}
.bloc-avant-apres__title {
  font-family: 'recoletabold';
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 1.25rem;
  color: #000;
}
body.dark .bloc-avant-apres__title,
body[data-theme="dark"] .bloc-avant-apres__title { color: #fff; }
.bloc-avant-apres__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 560px) {
  .bloc-avant-apres__grid { grid-template-columns: 1fr; }
}
.bloc-avant-apres__col {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(19, 51, 49, 0.06);
}
.bloc-avant-apres__col--avant {
  border-color: rgba(200, 80, 50, 0.15);
}
.bloc-avant-apres__col--apres {
  border-color: rgba(61, 122, 62, 0.15);
}
body.dark .bloc-avant-apres__col--avant,
body[data-theme="dark"] .bloc-avant-apres__col--avant { border-color: rgba(200, 80, 50, 0.2); }
body.dark .bloc-avant-apres__col--apres,
body[data-theme="dark"] .bloc-avant-apres__col--apres { border-color: rgba(203, 216, 172, 0.2); }
.bloc-avant-apres__badge {
  display: inline-block;
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  z-index: 1;
}
.bloc-avant-apres__badge--avant {
  background: rgba(200, 80, 50, 0.9);
  color: #fff;
}
.bloc-avant-apres__badge--apres {
  background: rgba(61, 122, 62, 0.9);
  color: #fff;
}
.bloc-avant-apres__col {
  position: relative;
}
.bloc-avant-apres__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.bloc-avant-apres__desc {
  padding: 1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #525252;
  margin: 0;
}
body.dark .bloc-avant-apres__desc,
body[data-theme="dark"] .bloc-avant-apres__desc { color: rgba(255, 255, 255, 0.75); }
.bloc-avant-apres__desc strong { color: #133331; }
body.dark .bloc-avant-apres__desc strong,
body[data-theme="dark"] .bloc-avant-apres__desc strong { color: #fff; }

/* Bloc : FAQ (Questions / Réponses) — design .faq-section, seul survivant
   après nettoyage (deux autres versions concurrentes de .faq-item,
   "People Also Ask" et une variante générique avec .faq-list, ont été
   retirées : mortes, jamais gagnantes contre celle-ci). */
.faq-section {
  margin: 1rem 0 2rem;
}
.faq-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(19, 51, 49, 0.06);
}
body.dark .faq-item,
body[data-theme="dark"] .faq-item { border-bottom-color: rgba(203, 216, 172, 0.06); }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item__question {
  font-family: 'recoletabold';
  font-size: 1rem;
  color: #133331;
  margin-bottom: 0.5rem;
}
body.dark .faq-item__question,
body[data-theme="dark"] .faq-item__question { color: #fff; }
.faq-item__answer {
  display: block; /* always visible, no accordion */
}
.faq-item__answer p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #525252;
  margin: 0;
}
body.dark .faq-item__answer p,
body[data-theme="dark"] .faq-item__answer p { color: rgba(255, 255, 255, 0.6); }

/* Bloc : Étapes (How-To)
   Structure :
   .bloc-etapes
   [.bloc-etapes__title — optionnel]
   ol.bloc-etapes__list
   li.bloc-etape
   .bloc-etape__number  ← cercle numéroté (via {{@index}})
   .bloc-etape__body
   .bloc-etape__title
   img.bloc-etape__image (optionnel)
   .bloc-etape__desc */
.bloc-etapes {
  margin: 2.5rem 0;
  padding: 1.5rem 1.5rem 1.5rem 1rem;
  background: rgba(125, 173, 101, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(125, 173, 101, 0.12);
}
body.dark .bloc-etapes,
body[data-theme="dark"] .bloc-etapes {
  background: rgba(125, 173, 101, 0.06);
  border-color: rgba(125, 173, 101, 0.18);
}
.bloc-etapes__title {
  font-family: 'recoletabold', 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #133331;
  margin-bottom: 1.25rem;
  padding-left: 0.5rem;
}
body.dark .bloc-etapes__title,
body[data-theme="dark"] .bloc-etapes__title { color: #fff; }
.bloc-etapes__list {
  list-style: none;
  counter-reset: none; /* on utilise notre propre numérotation via JS template */
  padding: 0;
  margin: 0;
  position: relative;
}

/* Ligne verticale reliant les étapes */
.bloc-etapes__list::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 19px;
  width: 2px;
  background: rgba(125, 173, 101, 0.25);
  z-index: 0;
}
body.dark .bloc-etapes__list::before,
body[data-theme="dark"] .bloc-etapes__list::before {
  background: rgba(125, 173, 101, 0.35);
}
.bloc-etape {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1rem;
  position: relative;
  padding: 0 0 1.5rem;
  align-items: start;
}
.bloc-etape:last-child {
  padding-bottom: 0;
}
.bloc-etape__number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #7dad65;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'recoletabold', serif;
  font-size: 1.1rem;
  font-weight: 700;
  position: relative;
  z-index: 1; /* au-dessus de la ligne verticale */
  box-shadow: 0 0 0 4px rgba(125, 173, 101, 0.04);
}
body.dark .bloc-etape__number,
body[data-theme="dark"] .bloc-etape__number {
  box-shadow: 0 0 0 4px rgba(125, 173, 101, 0.06);
}
.bloc-etape__body {
  padding-top: 6px;
  min-width: 0; /* évite overflow sur les grids */
}
.bloc-etape__title {
  font-family: 'recoletabold', 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #133331;
  line-height: 1.35;
  margin-bottom: 0.5rem;
}
body.dark .bloc-etape__title,
body[data-theme="dark"] .bloc-etape__title { color: #fff; }
.bloc-etape__image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0.75rem 0;
  border: 1px solid rgba(19, 51, 49, 0.08);
}
body.dark .bloc-etape__image,
body[data-theme="dark"] .bloc-etape__image {
  border-color: rgba(255, 255, 255, 0.08);
}
.bloc-etape__desc p {
  margin: 0;
  color: rgba(19, 51, 49, 0.75);
  line-height: 1.65;
  font-size: 0.98rem;
}
body.dark .bloc-etape__desc p,
body[data-theme="dark"] .bloc-etape__desc p {
  color: rgba(255, 255, 255, 0.7);
}
.bloc-etape__desc p + p {
  margin-top: 0.5rem;
}
.bloc-etape__desc strong {
  color: #133331;
  font-weight: 600;
}
body.dark .bloc-etape__desc strong,
body[data-theme="dark"] .bloc-etape__desc strong { color: #fff; }

/* Liens dans les descriptions d'étapes */
.bloc-etape__desc a {
  color: #5a8a3c;
  text-decoration: underline;
  text-decoration-color: rgba(125, 173, 101, 0.4);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}
.bloc-etape__desc a:hover {
  text-decoration-color: #5a8a3c;
}
body.dark .bloc-etape__desc a,
body[data-theme="dark"] .bloc-etape__desc a { color: #a4d38c; }

/* Mobile : resserrer les marges */

@media (max-width: 600px) {
  .bloc-etapes {
      padding: 1.25rem 1rem 1.25rem 0.75rem;
    }
  .bloc-etape {
      grid-template-columns: 34px 1fr;
      gap: 0.75rem;
    }
  .bloc-etape__number {
      width: 34px;
      height: 34px;
      font-size: 0.95rem;
    }
  .bloc-etapes__list::before {
      left: 16px;
    }
  .bloc-etape__title {
      font-size: 1.05rem;
    }
}

/* ── Jardinage ── */

/* Bloc : Comparaison deux cartes */
.task-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.75rem 0;
}

@media (max-width: 767px) {
  .task-compare { grid-template-columns: 1fr; }
}
.task-compare__card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(19, 51, 49, 0.06);
  transition: box-shadow 0.3s ease;
}
body.dark .task-compare__card,
body[data-theme="dark"] .task-compare__card { border-color: rgba(203, 216, 172, 0.06); }
.task-compare__card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.task-compare__header {
  display: flex;
  align-items: center; gap: 0.5rem;
  padding: 0.9rem 1.25rem;
  font-family: 'recoletabold';
  font-size: 1rem;
}
.task-compare__header small { font-weight: 400; opacity: 0.5; font-size: 0.78rem; margin-left: 0.15rem; }
.task-compare__header i { font-size: 1.25rem; }
.task-compare__card--non-rem .task-compare__header {
  background: linear-gradient(135deg, rgba(232, 167, 78, 0.08), rgba(232, 167, 78, 0.03));
  color: #b8860b;
  border-bottom: 2px solid rgba(232, 167, 78, 0.15);
}
.task-compare__card--rem .task-compare__header {
  background: linear-gradient(135deg, rgba(125, 173, 101, 0.08), rgba(125, 173, 101, 0.03));
  color: #5a8a3c;
  border-bottom: 2px solid rgba(125, 173, 101, 0.15);
}
body.dark .task-compare__card--non-rem .task-compare__header,
body[data-theme="dark"] .task-compare__card--non-rem .task-compare__header { color: #e8a74e; border-bottom-color: rgba(232, 167, 78, 0.12); }
body.dark .task-compare__card--rem .task-compare__header,
body[data-theme="dark"] .task-compare__card--rem .task-compare__header { color: #cbd8ac; border-bottom-color: rgba(125, 173, 101, 0.12); }
.task-compare__body {
  padding: 1.25rem;
}
.task-compare__body p {
  font-size: 0.88rem; line-height: 1.65;
  margin-bottom: 0.5rem;
}
.task-compare__highlight {
  font-size: 0.95rem !important;
  font-weight: 600;
  margin-bottom: 0.6rem !important;
}
.task-compare__card--non-rem .task-compare__highlight { color: #b8860b; }
.task-compare__card--rem .task-compare__highlight { color: #5a8a3c; }
body.dark .task-compare__card--non-rem .task-compare__highlight,
body[data-theme="dark"] .task-compare__card--non-rem .task-compare__highlight { color: #e8a74e; }
body.dark .task-compare__card--rem .task-compare__highlight,
body[data-theme="dark"] .task-compare__card--rem .task-compare__highlight { color: #cbd8ac; }
.task-compare__varieties {
  display: flex;
  align-items: center; gap: 0.3rem;
  font-size: 0.75rem !important;
  color: #999 !important;
  margin-top: 0.85rem !important;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(19, 51, 49, 0.05);
}
.task-compare__varieties i { font-size: 0.78rem; opacity: 0.5; }
body.dark .task-compare__varieties,
body[data-theme="dark"] .task-compare__varieties { border-top-color: rgba(203, 216, 172, 0.04); }

/* Bloc : Calendrier mensuel (plante) */
.plant-calendar {
  background: rgba(19, 51, 49, 0.02);
  border: 1px solid rgba(19, 51, 49, 0.06);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}
body.dark .plant-calendar,
body[data-theme="dark"] .plant-calendar {
  background: rgba(203, 216, 172, 0.03);
  border-color: rgba(203, 216, 172, 0.08);
}
.plant-calendar__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.plant-calendar__row:last-of-type { margin-bottom: 0.75rem; }
.plant-calendar__label {
  font-size: 0.75rem; font-weight: 600;
  color: #525252;
  min-width: 110px;
  flex-shrink: 0;
}
body.dark .plant-calendar__label,
body[data-theme="dark"] .plant-calendar__label { color: rgba(255, 255, 255, 0.6); }
.plant-calendar__months {
  display: flex;
  gap: 3px;
  flex: 1;
}
.plant-calendar__title {
  font-family: 'recoletabold', 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #133331;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(19, 51, 49, 0.06);
}
body.dark .plant-calendar__title,
body[data-theme="dark"] .plant-calendar__title {
  color: #fff;
  border-bottom-color: rgba(203, 216, 172, 0.08);
}
.plant-cal-m {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 28px;
  height: 32px;
  border-radius: 4px;
  font-size: 0.68rem; font-weight: 700;
  color: transparent;
  background: rgba(19, 51, 49, 0.04);
  user-select: none;
}
body.dark .plant-cal-m,
body[data-theme="dark"] .plant-cal-m { background: rgba(203, 216, 172, 0.04); }

/* Correctif manuel (miroir de style.css, cf. tools/retrait-analyse.md) :
   .plant-cal-m--variant double la classe de base pour battre
   body.dark .plant-cal-m / .plant-cal-m par specificite, dans les deux
   modes — l'ancienne regle a une seule classe, a egalite avec la regle
   generique et donc dependante de l'ordre du fichier. */

/* Semis intérieur — warm orange */
.plant-cal-m.plant-cal-m--semis-in {
  background: #e8a74e;
  color: #fff;
}
body.dark .plant-cal-m.plant-cal-m--semis-in,
body[data-theme="dark"] .plant-cal-m.plant-cal-m--semis-in {
  background: #f0cb83;
  color: #0a1f1e;
}

/* Semis extérieur — light green */
.plant-cal-m.plant-cal-m--semis-out {
  background: #7dad65;
  color: #fff;
}
body.dark .plant-cal-m.plant-cal-m--semis-out,
body[data-theme="dark"] .plant-cal-m.plant-cal-m--semis-out {
  background: #e9f5e1;
  color: #0a1f1e;
}

/* Plantation — green */
.plant-cal-m.plant-cal-m--plant {
  background: #4d9a5c;
  color: #fff;
}
body.dark .plant-cal-m.plant-cal-m--plant,
body[data-theme="dark"] .plant-cal-m.plant-cal-m--plant {
  background: #3ea862;
  color: #0a1f1e;
}

/* Récolte — rich red */
.plant-cal-m.plant-cal-m--harvest {
  background: #c85032;
  color: #fff;
}
body.dark .plant-cal-m.plant-cal-m--harvest,
body[data-theme="dark"] .plant-cal-m.plant-cal-m--harvest {
  background: #e88870;
  color: #0a1f1e;
}

/* Floraison — rose */
.plant-cal-m.plant-cal-m--floraison {
  background: #d96c8a;
  color: #fff;
}
body.dark .plant-cal-m.plant-cal-m--floraison,
body[data-theme="dark"] .plant-cal-m.plant-cal-m--floraison {
  background: #f5d6e2;
  color: #0a1f1e;
}

/* Taille — brun (sécateur / bois) */
.plant-cal-m.plant-cal-m--taille {
  background: #8a5a3c;
  color: #fff;
}
body.dark .plant-cal-m.plant-cal-m--taille,
body[data-theme="dark"] .plant-cal-m.plant-cal-m--taille {
  background: #d1aa83;
  color: #0a1f1e;
}

/* Dormance — bleu acier (hiver / repos) */
.plant-cal-m.plant-cal-m--dormance {
  background: #5a7a9e;
  color: #fff;
}
body.dark .plant-cal-m.plant-cal-m--dormance,
body[data-theme="dark"] .plant-cal-m.plant-cal-m--dormance {
  background: #a9c4dc;
  color: #0a1f1e;
}

/* Legend */
.plant-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(19, 51, 49, 0.06);
}
body.dark .plant-calendar__legend,
body[data-theme="dark"] .plant-calendar__legend { border-top-color: rgba(203, 216, 172, 0.08); }
.plant-calendar__legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem; font-weight: 600;
  color: #525252;
}
body.dark .plant-calendar__legend-item,
body[data-theme="dark"] .plant-calendar__legend-item { color: rgba(255, 255, 255, 0.6); }
.plant-cal-dot {
  width: 10px; height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.plant-cal-dot.plant-cal-dot--semis-in { background: #e8a74e; }
body.dark .plant-cal-dot.plant-cal-dot--semis-in,
body[data-theme="dark"] .plant-cal-dot.plant-cal-dot--semis-in { background: #f0cb83; }

.plant-cal-dot.plant-cal-dot--semis-out { background: #7dad65; }
body.dark .plant-cal-dot.plant-cal-dot--semis-out,
body[data-theme="dark"] .plant-cal-dot.plant-cal-dot--semis-out { background: #e9f5e1; }

.plant-cal-dot.plant-cal-dot--plant { background: #4d9a5c; }
body.dark .plant-cal-dot.plant-cal-dot--plant,
body[data-theme="dark"] .plant-cal-dot.plant-cal-dot--plant { background: #3ea862; }

.plant-cal-dot.plant-cal-dot--harvest { background: #c85032; }
body.dark .plant-cal-dot.plant-cal-dot--harvest,
body[data-theme="dark"] .plant-cal-dot.plant-cal-dot--harvest { background: #e88870; }

.plant-cal-dot.plant-cal-dot--floraison { background: #d96c8a; }
body.dark .plant-cal-dot.plant-cal-dot--floraison,
body[data-theme="dark"] .plant-cal-dot.plant-cal-dot--floraison { background: #f5d6e2; }

.plant-cal-dot.plant-cal-dot--taille { background: #8a5a3c; }
body.dark .plant-cal-dot.plant-cal-dot--taille,
body[data-theme="dark"] .plant-cal-dot.plant-cal-dot--taille { background: #d1aa83; }

.plant-cal-dot.plant-cal-dot--dormance { background: #5a7a9e; }
body.dark .plant-cal-dot.plant-cal-dot--dormance,
body[data-theme="dark"] .plant-cal-dot.plant-cal-dot--dormance { background: #a9c4dc; }

/* Bloc : Associations (bonnes / mauvaises) */
.plant-companions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .plant-companions { grid-template-columns: 1fr 1fr; }
}
.plant-companions__group { }
.plant-companions__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'recoletabold';
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.plant-companions__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 0.75rem; font-weight: 800;
  flex-shrink: 0;
}
.plant-companions__group--good .plant-companions__icon {
  background: rgba(125, 173, 101, 0.15);
  color: #3d7a3e;
}
.plant-companions__group--good .plant-companions__heading { color: #3d7a3e; }
body.dark .plant-companions__group--good .plant-companions__heading,
body[data-theme="dark"] .plant-companions__group--good .plant-companions__heading { color: #7dad65; }
body.dark .plant-companions__group--good .plant-companions__icon,
body[data-theme="dark"] .plant-companions__group--good .plant-companions__icon { background: rgba(125, 173, 101, 0.12); color: #7dad65; }
.plant-companions__group--bad .plant-companions__icon {
  background: rgba(200, 80, 50, 0.1);
  color: #c85032;
}
.plant-companions__group--bad .plant-companions__heading { color: #c85032; }
body.dark .plant-companions__group--bad .plant-companions__heading,
body[data-theme="dark"] .plant-companions__group--bad .plant-companions__heading { color: #e07b5e; }
body.dark .plant-companions__group--bad .plant-companions__icon,
body[data-theme="dark"] .plant-companions__group--bad .plant-companions__icon { background: rgba(200, 80, 50, 0.12); color: #e07b5e; }
.plant-companions__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plant-companion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  border: 1px solid rgba(19, 51, 49, 0.06);
  transition: background 0.2s ease, border-color 0.2s ease;
}
body.dark .plant-companion,
body[data-theme="dark"] .plant-companion { border-color: rgba(203, 216, 172, 0.08); }
.plant-companion:hover {
  background: rgba(19, 51, 49, 0.02);
  border-color: rgba(19, 51, 49, 0.12);
}
body.dark .plant-companion:hover,
body[data-theme="dark"] .plant-companion:hover {
  background: rgba(203, 216, 172, 0.04);
  border-color: rgba(203, 216, 172, 0.15);
}
.plant-companion img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.plant-companion strong {
  display: block;
  font-size: 0.88rem;
  color: #133331;
}
body.dark .plant-companion strong,
body[data-theme="dark"] .plant-companion strong { color: #cbd8ac; }
.plant-companion span {
  display: block;
  font-size: 0.78rem;
  color: #999;
  line-height: 1.3;
}

/* Bloc : Grille de plantes — pas de CSS dédié dans ce fichier
   (.plant-similar-grid / .plant-similar-card vivent dans style.css). */