/* ------------------------------------------------------------ police
   Montserrat est servie depuis notre domaine, plus depuis Google Fonts.
   Une requête tierce de moins avant le premier rendu, ce qui compte quand
   la visiteuse est à Dakar en données mobiles.

   Un seul fichier de 39 Ko couvre toutes les graisses : c'est une police
   variable, l'axe « wght » va de 100 à 900 et le navigateur y prend le
   400, le 600, le 700 et le 800 dont le site se sert.

   Le fichier est fabriqué par outils/generer-police.py, qui découpe la
   police complète aux seuls caractères utiles. Montserrat est sous SIL
   Open Font License 1.1 ; la licence part avec le site, dans
   assets/fonts/LICENCE-montserrat.txt.

   « font-display: swap » garde le texte lisible pendant le chargement :
   il s'affiche tout de suite dans la police de repli, puis bascule. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-variable.woff2') format('woff2-variations'),
       url('../fonts/montserrat-variable.woff2') format('woff2');
}

/* ==================================================================
   OKO LANQ — Feuille de style
   Charte : Teal #005959 · Jaune #FEBE10 · Vert #A1CE57 · Bleu #76CFE7
   Typographie de marque : Gotham HTF (sous licence).
   Substitut libre utilisé ici : Montserrat, très proche du dessin
   géométrique de Gotham. Si la licence Gotham est acquise, il suffit
   de déposer les fichiers de police dans assets/fonts/ et de
   remplacer la valeur de --police-titre ci-dessous.
   ================================================================== */

:root {
  /* ------------------------------------------------------------------
     COULEURS DE MARQUE — surfaces
     Les quatre valeurs de la charte, relevées sur la planche Pantone du
     document de marque. Elles ne changent pas. Elles servent de fonds,
     de pastilles et d'aplats.
     ------------------------------------------------------------------ */
  --teal: #005959;          /* PANTONE P 126-16 U */
  --teal-fonce: #003c3c;
  --teal-clair: #0a7373;
  --jaune: #febe10;         /* PANTONE P 10-8 U   */
  --jaune-fonce: #d99d00;
  --vert: #a1ce57;          /* PANTONE P 157-7 U  */
  --vert-fonce: #7ba63a;
  --bleu: #76cfe7;          /* PANTONE P 118-4 U  */
  --bleu-clair: #e3f5fa;

  /* ------------------------------------------------------------------
     COULEURS DE MARQUE — texte
     Mesure faite : sur les dix couleurs de la charte, le teal est la
     seule qui donne un texte lisible sur fond clair. Le jaune tombe à
     1,67 sur blanc, le vert à 1,83, le bleu à 1,77 — très loin des 4,5
     exigés par le niveau AA.
     On ne change donc pas les couleurs, on change leur rôle : le jaune,
     le vert et le bleu deviennent des surfaces, et le texte utilise des
     variantes assombries de la MÊME teinte. Teinte et saturation
     conservées, seule la luminosité descend.
     ------------------------------------------------------------------ */
  --vert-texte: #567428;    /* dérivé de --vert-fonce  · 5,12 sur crème */
  --jaune-texte: #8a6400;   /* dérivé de --jaune-fonce · 5,15 sur crème */
  --vert-profond: #4d7a17;  /* fond « pleine saison »  · 5,11 avec du blanc */
  --vert-encre: #2f5410;    /* texte sur fond vert clair · 4,79 */

  /* Neutres */
  --blanc: #ffffff;
  --creme: #fbfaf5;
  --sable: #f2f0e6;
  --gris-texte: #33403f;    /* 10,33 sur crème */
  --gris-doux: #5e6c6b;     /* assombri depuis #6b7b7a · 5,24 sur crème */
  --gris-ligne: #e2e5e0;

  /* ------------------------------------------------------------------
     TYPOGRAPHIE
     Une seule échelle, de --t-2xs à --t-h1. Toute taille de texte du
     site sort de cette liste : sans elle, chaque composant réinventait
     sa propre valeur et 78 % du texte passait sous 16 px en mobile.
     Le plancher est --t-xs (13,9 px), réservé aux étiquettes en
     capitales. Rien de ce qui se lit en continu ne descend sous --t-sm.
     ------------------------------------------------------------------ */
  --police-titre: 'Montserrat', 'Gotham HTF', 'Helvetica Neue', Arial, sans-serif;
  --police-texte: 'Montserrat', 'Gotham HTF', 'Helvetica Neue', Arial, sans-serif;

  --t-2xs: .76rem;          /* 12,9 px — pastilles, en capitales grasses  */
  --t-xs: .82rem;           /* 13,9 px — méta, légendes, fil d'Ariane     */
  --t-sm: .91rem;           /* 15,5 px — texte secondaire, résumés        */
  --t-md: 1rem;             /* 17 px   — texte courant                    */
  --t-lg: 1.12rem;          /* 19 px   — chapô, accroche                  */
  --t-h3: 1.2rem;
  --t-h2: clamp(1.5rem, 2.8vw, 2.1rem);
  --t-h1: clamp(1.95rem, 4.4vw, 3.1rem);

  --lh-titre: 1.15;
  --lh-dense: 1.5;          /* cartes, tableaux, listes serrées */
  --lh-lecture: 1.65;       /* paragraphes                      */
  --mesure: 68ch;           /* longueur de ligne du texte courant */

  /* ------------------------------------------------------------------
     ESPACEMENTS
     Une gamme unique, chaque cran valant environ 1,5 fois le précédent.
     Les valeurs isolées (26px, 34px, 44px…) semées dans la feuille
     étaient la première cause d'irrégularité verticale.
     ------------------------------------------------------------------ */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 18px;
  --e5: 26px;
  --e6: 38px;
  --e7: 56px;
  --e8: 78px;

  /* Cible tactile minimale, recommandation WCAG 2.5.5. */
  --touche: 44px;

  /* Mesures */
  --largeur: 1180px;
  --rayon: 14px;
  --rayon-sm: 8px;
  --ombre: 0 2px 4px rgba(0, 60, 60, 0.04), 0 8px 24px rgba(0, 60, 60, 0.06);
  --ombre-forte: 0 4px 10px rgba(0, 60, 60, 0.08), 0 18px 40px rgba(0, 60, 60, 0.12);
}

/* ------------------------------------------------------------------ base */
*,
*::before,
*::after { box-sizing: border-box; }

/* La base de l'échelle est ici, PAS sur body : les tokens --t-* sont en
   rem, donc ils se calculent sur la racine. Tant que body portait seul
   le 17 px, chaque --t-* valait 6 % de moins qu'annoncé et --t-2xs
   tombait à 12,2 px au lieu de 12,9.
   En pourcentage plutôt qu'en px : un lecteur qui a augmenté la taille
   par défaut de son navigateur garde son réglage. */
html {
  font-size: 106.25%;   /* 17 px avec une base navigateur à 16 px */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 1rem;
  line-height: var(--lh-lecture);
  color: var(--gris-texte);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 800;
  line-height: var(--lh-titre);
  color: var(--teal);
  margin: 0 0 .6em;
  letter-spacing: -0.01em;
  /* Un titre ne doit pas laisser un mot seul sur la dernière ligne :
     c'est fréquent en français, où les mots sont longs. */
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.28; }
h4 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .07em; }

p { margin: 0 0 1.1em; }
/* Longueur de ligne. Au-delà d'environ 68 signes, l'œil perd le début
   de la ligne suivante. Les conteneurs qui ont déjà leur propre mesure
   (cartes, tableaux, encarts) la rétablissent localement. */
.section > .conteneur > p,
.entete-section p,
.article__corps p,
.article__corps li { max-width: var(--mesure); }
a { color: var(--teal-clair); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }
/* La hauteur DOIT être libre.
   Sans « height: auto », l'attribut height="…" du HTML reste appliqué
   comme hauteur CSS pendant que la largeur, elle, est contrainte par
   max-width. L'image est alors écrasée. C'est ce qui déformait le logo
   du pied de page et la photo de choux-fleurs de l'accueil, tous deux
   signalés. Une seule règle, deux bugs. */
img,
svg { max-width: 100%; display: block; }
img { height: auto; }
/* <picture> ne sert qu'à porter les variantes de format : il ne doit
   pas s'interposer entre la boîte de mise en page et l'image. */
picture { display: contents; }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: .45em; }
strong { font-weight: 700; color: var(--teal-fonce); }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.section { padding: var(--e8) 0; }
.section + .section { padding-top: var(--e8); }
.section--sable { background: var(--sable); }
.section--teal { background: var(--teal); color: #d9ecec; }
.section--teal h2, .section--teal h3 { color: var(--blanc); }
.section--teal a { color: var(--jaune); }
/* Les boutons gardent leurs propres couleurs dans un bandeau teal :
   sans cette règle, la règle ci-dessus rendait le libellé jaune sur
   un fond jaune, donc invisible. */
.section--teal .bouton--principal { color: var(--teal-fonce); }
.section--teal .bouton--clair { color: var(--teal); }

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--jaune); color: var(--teal); padding: 12px 20px;
  font-weight: 700; z-index: 200; border-radius: 0 0 var(--rayon-sm) 0;
}
.saut-contenu:focus { left: 0; }

:focus-visible { outline: 3px solid var(--jaune-fonce); outline-offset: 2px; border-radius: 4px; }

/* Une ancre ne doit pas amener le titre sous l'entête collante. */
[id] { scroll-margin-top: 92px; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--police-titre); font-weight: 700; font-size: var(--t-md);
  /* min-height plutôt que du padding seul : la cible reste à 44 px même
     si le libellé passe sur une ligne courte. */
  min-height: var(--touche);
  padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton--principal { background: var(--jaune); color: var(--teal-fonce); box-shadow: 0 4px 14px rgba(254, 190, 16, .35); }
.bouton--principal:hover { background: #ffcb3a; color: var(--teal-fonce); }
.bouton--secondaire { background: transparent; color: var(--teal); border-color: var(--teal); }
.bouton--secondaire:hover { background: var(--teal); color: var(--blanc); }
.bouton--clair { background: var(--blanc); color: var(--teal); }
.bouton--clair:hover { background: var(--bleu-clair); color: var(--teal); }

/* ---------------------------------------------------------------- entête */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gris-ligne);
}
.entete__interieur { display: flex; align-items: center; gap: var(--e5); min-height: 74px; }
/* Le logo est désormais vectoriel : net à toute densité d'écran, et
   4,4 Ko au lieu de 99 Ko. La largeur suit la hauteur.
   Zone de protection : la moitié de la hauteur du logo sur ses quatre
   côtés, tenue ici par le gap de .entete__interieur et le padding du
   conteneur. */
.entete__logo { display: flex; align-items: center; min-height: var(--touche); padding: 4px 0; }
.entete__logo img { height: 40px; width: auto; }
@media (max-width: 400px) {
  /* Sur un écran étroit, le logo cède la place au bouton de menu.
     On garde le bloc complet — l'icône seule ne dit pas le nom. */
  .entete__logo img { height: 32px; }
}
.entete__nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.entete__nav a {
  display: inline-flex; align-items: center; min-height: var(--touche);
  font-family: var(--police-titre); font-weight: 600; font-size: var(--t-sm);
  color: var(--teal); text-decoration: none; padding: 9px 13px; border-radius: 999px;
}
.entete__nav a:hover { background: var(--sable); }
.entete__nav a[aria-current='page'] { background: var(--teal); color: var(--blanc); }
.entete__nav .bouton { margin-left: 8px; padding: 10px 18px; }
.entete__burger {
  margin-left: auto; display: none; background: none; border: 2px solid var(--teal);
  border-radius: 10px; width: var(--touche); height: var(--touche); cursor: pointer; color: var(--teal);
  align-items: center; justify-content: center;
}
.entete__burger span, .entete__burger span::before, .entete__burger span::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
}
.entete__burger span::before, .entete__burger span::after { content: ''; position: absolute; left: 0; }
.entete__burger span::before { top: -6px; }
.entete__burger span::after { top: 6px; }

@media (max-width: 900px) {
  .entete__burger { display: flex; }
  .entete__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanc); border-bottom: 1px solid var(--gris-ligne);
    padding: 10px 20px 20px; display: none; box-shadow: var(--ombre);
  }
  .entete__nav.est-ouvert { display: flex; }
  .entete__nav a { padding: 12px 10px; border-radius: var(--rayon-sm); }
  .entete__nav .bouton { margin: 10px 0 0; justify-content: center; }
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; color: var(--blanc);
  background: linear-gradient(135deg, var(--teal-fonce) 0%, var(--teal) 45%, var(--teal-clair) 100%);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; opacity: .26; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Le voile ne descend plus sous 0,72. En dessous, sur une photo claire
   — un ciel, une bâche blanche — l'accroche tombait à 3,81 : sous le
   seuil. Le dégradé garde sa direction et son allure, il ne s'éclaircit
   simplement plus assez pour que le texte décroche. */
.hero__voile { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 60, 60, .94) 0%, rgba(0, 89, 89, .84) 55%, rgba(0, 89, 89, .74) 100%); }
.hero__interieur { position: relative; padding: 84px 0 92px; max-width: 720px; }
.hero h1 { color: var(--blanc); }
.hero h1 em { font-style: normal; color: var(--jaune); }
.hero__accroche { font-size: var(--t-lg); color: #cfe6e6; max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
/* Le vert de la charte sur le voile du hero plafonnait à 3,3 : sous AA.
   On garde la teinte et on éclaircit — c'est un texte sur fond sombre,
   donc l'ajustement se fait vers le haut, pas vers le bas. */
.hero__badge {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(0, 42, 34, .58); border: 1px solid rgba(161, 206, 87, .55);
  color: #c3de8c; padding: 7px 13px; border-radius: 999px;
}

/* ----------------------------------------------------------- fil d'ariane */
.ariane { font-size: var(--t-xs); color: var(--gris-doux); padding: var(--e4) 0 0; display: flex; flex-wrap: wrap; align-items: center; }
.ariane a { color: var(--gris-doux); display: inline-flex; align-items: center; min-height: var(--touche); padding: 0 2px; }
.ariane span { margin: 0 6px; opacity: .5; }

/* -------------------------------------------------------------- bandeaux */
.note {
  border-left: 4px solid var(--bleu); background: var(--bleu-clair);
  padding: var(--e4) var(--e4); border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  font-size: var(--t-sm); color: #1d4b56; margin: 0 0 var(--e5); line-height: var(--lh-dense);
}
.note strong { color: #12313a; }
.note--jaune { border-left-color: var(--jaune); background: #fff8e2; color: #6a4e00; }
.note--jaune strong { color: #4a3600; }

/* --------------------------------------------------------------- grilles */
.grille { display: grid; gap: var(--e5); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.carte {
  background: var(--blanc); border: 1px solid var(--gris-ligne);
  border-radius: var(--rayon); padding: var(--e5); box-shadow: var(--ombre);
}
.carte p { line-height: var(--lh-dense); }
.carte h3 { margin-bottom: .4em; }
.carte p:last-child { margin-bottom: 0; }
/* Le lien de fin de carte est la seule cible de tout le bloc :
   il doit être atteignable au pouce. */
.carte p:last-child a {
  display: inline-flex; align-items: center; min-height: var(--touche);
  font-weight: 700;
}

.entete-section { max-width: 680px; margin-bottom: var(--e6); }
.entete-section p { color: var(--gris-doux); margin-bottom: 0; }
.surtitre {
  font-family: var(--police-titre); font-weight: 800; font-size: var(--t-xs);
  letter-spacing: .13em; text-transform: uppercase; color: var(--vert-texte);
  margin: 0 0 .55em;
}
.section--teal .surtitre { color: var(--vert); }

/* -------------------------------------------------------- carte produit */
.produits-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--e4); }

.produit-carte {
  display: flex; flex-direction: column; background: var(--blanc);
  border: 1px solid var(--gris-ligne); border-radius: var(--rayon);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.produit-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); border-color: var(--vert); color: inherit; }
.produit-carte__visuel { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sable); }
.produit-carte__visuel img { width: 100%; height: 100%; object-fit: cover; }
.produit-carte__corps { padding: var(--e4); display: flex; flex-direction: column; flex: 1; gap: 2px; }
.produit-carte__nom { font-family: var(--police-titre); font-weight: 800; font-size: 1.06rem; color: var(--teal); margin: 0; line-height: 1.25; }
.produit-carte__wolof { font-size: var(--t-xs); color: var(--vert-texte); font-weight: 700; margin: 0 0 6px; }
.produit-carte__resume { font-size: var(--t-sm); color: var(--gris-doux); line-height: var(--lh-dense); margin: 0 0 var(--e3); flex: 1; }
.produit-carte__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); font-size: var(--t-xs); }
.produit-carte__prix { font-weight: 800; color: var(--teal); font-family: var(--police-titre); }
.produit-carte__prix small { font-weight: 600; color: var(--gris-doux); }

/* Pastille de saison */
/* Chaque état porte une pastille de couleur ET un libellé : la couleur
   seule ne suffit ni pour un daltonien ni pour une lecture rapide.
   Les teintes de texte sont les variantes assombries de la charte. */
.pastille {
  display: inline-flex; align-items: center; gap: .42em;
  font-size: var(--t-2xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap; line-height: 1.35;
}
.pastille::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pastille--pleine { background: rgba(161, 206, 87, .24); color: #446c14; }
.pastille--dispo { background: rgba(118, 207, 231, .25); color: #14647a; }
.pastille--import { background: rgba(254, 190, 16, .25); color: #7d5800; }
.pastille--non { background: #eceeea; color: #5b6968; }
/* La pastille « indisponible » est carrée : sur une capture en noir et
   blanc, ou pour un œil qui distingue mal les verts, la forme tranche
   là où la teinte ne tranche plus. */
.pastille--non::before { border-radius: 2px; }

.produit-carte__visuel .pastille { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(0,60,60,.14); }

/* ---------------------------------------------------------------------
   PLAQUE DE SAISON
   Le repli des 56 fiches sans photo. Elle ne cherche pas à imiter une
   image : elle porte la donnée du site — les douze mois de
   disponibilité — dans les couleurs du calendrier. À côté d'une vraie
   photo, elle lit comme un deuxième type de tuile, pas comme un trou.
   --------------------------------------------------------------------- */
.plaque, .vignette { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.plaque svg, .vignette svg { width: 100%; height: 100%; }

/* Photo posée dans une colonne de texte, arrondie et détachée du fond. */
.photo-encadree { border-radius: var(--rayon); box-shadow: var(--ombre-forte); }

/* ------------------------------------------------------------- filtres */
.filtres { background: var(--blanc); border: 1px solid var(--gris-ligne); border-radius: var(--rayon); padding: var(--e4); margin-bottom: var(--e5); box-shadow: var(--ombre); }
.filtres__ligne { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end; }
.champ { display: flex; flex-direction: column; gap: 6px; flex: 1 1 190px; }
.champ label { font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gris-doux); }
.champ input, .champ select {
  font-family: var(--police-texte); font-size: var(--t-md); color: var(--gris-texte);
  /* 16 px au minimum : en deçà, iOS zoome tout seul à la mise au point
     et l'utilisatrice se retrouve à faire défiler de côté. */
  min-height: var(--touche);
  padding: 11px 13px; border: 1.5px solid var(--gris-ligne); border-radius: var(--rayon-sm);
  background: var(--blanc); width: 100%;
}
.champ input:focus, .champ select:focus { border-color: var(--teal-clair); outline: none; box-shadow: 0 0 0 3px rgba(10, 115, 115, .12); }
.filtres__compteur { font-size: var(--t-sm); color: var(--gris-doux); margin-top: var(--e3); }
.filtres__compteur strong { color: var(--teal); }
.lien-reinit { background: none; border: none; color: var(--teal-clair); font-family: var(--police-texte); font-size: var(--t-sm); cursor: pointer; text-decoration: underline; min-height: var(--touche); padding: 0 4px; }

.aucun-resultat { text-align: center; padding: var(--e8) var(--e5); color: var(--gris-doux); }

/* ----------------------------------------------------- calendrier 12 mois */
/* ---------------------------------------------------------------------
   Le calendrier est l'argument central du site. Il doit se lire en une
   seconde sur un téléphone, sans zoom. Trois changements, aucun ne
   touche à la structure :
     1. les cases passent à 38 px de haut et les initiales de 11,6 px à
        12,9 px — la frise devient lisible au premier coup d'œil ;
     2. le fond « pleine saison » descend à --vert-profond, ce qui fait
        passer le blanc de 2,85 à 5,11 et creuse l'écart avec
        « disponible » : la frise se lit comme une intensité ;
     3. « import » reçoit des hachures. Import et indisponible avaient
        1,06 d'écart de luminosité, donc rien qui les sépare en gris.
   --------------------------------------------------------------------- */
.calendrier { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.calendrier__mois {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 5px; min-height: 38px;
  font-size: var(--t-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  padding: 6px 1px; color: #fff;
}
.calendrier__mois[data-etat='pleine'] { background: var(--vert-profond); }
.calendrier__mois[data-etat='dispo'] { background: var(--vert); color: var(--vert-encre); }
.calendrier__mois[data-etat='import'] {
  color: #6d4d00;
  background: repeating-linear-gradient(45deg, #ffe9a8 0 5px, #f3d888 5px 10px);
}
.calendrier__mois[data-etat='non'] { background: #eceeea; color: #5b6968; }
.calendrier__mois--actuel { box-shadow: 0 0 0 2.5px var(--teal); z-index: 1; }

.calendrier-legende { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4); margin-top: var(--e3); font-size: var(--t-xs); color: var(--gris-doux); }
.calendrier-legende span { display: inline-flex; align-items: center; gap: 7px; }
.calendrier-legende i { width: 15px; height: 15px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
.calendrier-legende i[data-etat='import'] { background: repeating-linear-gradient(45deg, #ffe9a8 0 4px, #f3d888 4px 8px); }

/* Grand tableau calendrier */
/* Le grand calendrier fait 760 px de large minimum : sur un téléphone,
   on n'en voit que 42 %. On ne le refond pas — il reste un tableau, ce
   qui est la bonne forme pour 128 lignes × 12 mois. On le rend
   navigable : la colonne du produit reste collée à gauche pendant qu'on
   fait défiler les mois, sinon on perd la ligne qu'on lit. */
.tableau-enveloppe {
  overflow-x: auto; background: var(--blanc); border: 1px solid var(--gris-ligne);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  overscroll-behavior-x: contain;
}
table.tableau td.produit-cellule,
table.tableau th.produit-cellule {
  position: sticky; left: 0; z-index: 1;
  background: var(--blanc);
  box-shadow: 1px 0 0 var(--gris-ligne);
}
table.tableau thead th.produit-cellule { background: var(--teal); z-index: 3; }
table.tableau tbody tr:hover td.produit-cellule { background: #f6f9f4; }

/* Indication de défilement, visible seulement quand elle sert. */
.tableau-indice {
  display: none; align-items: center; gap: 7px;
  font-size: var(--t-xs); color: var(--gris-doux); margin: 0 0 var(--e3);
}
@media (max-width: 900px) { .tableau-indice { display: flex; } }
table.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 760px; }
table.tableau th, table.tableau td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--gris-ligne); }
table.tableau thead th {
  background: var(--teal); color: var(--blanc);
  font-family: var(--police-titre); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  /* L'en-tête reste visible pendant qu'on fait défiler les 128 lignes :
     sans lui, on ne sait plus quel mois on regarde. */
  position: sticky; top: 0; z-index: 2;
}
table.tableau tbody tr:hover { background: #f6f9f4; }
table.tableau td.cellule-mois { padding: 4px 3px; text-align: center; width: 46px; }
table.tableau .produit-cellule { min-width: 190px; }
/* Dans un tableau de 128 lignes, une cible de 44 px par ligne
   ajouterait plus de 1 500 px de hauteur. On monte à 36 px, ce qui
   dépasse le minimum AA de 24 px (WCAG 2.5.8) sans rendre le tableau
   impraticable, et on élargit la zone cliquable à toute la cellule. */
table.tableau .produit-cellule a { font-weight: 700; color: var(--teal); text-decoration: none; display: flex; align-items: center; min-height: 36px; }
table.tableau td.produit-cellule, table.tableau th.produit-cellule { padding-top: 6px; padding-bottom: 6px; }
table.tableau .produit-cellule a:hover { text-decoration: underline; }
table.tableau .produit-cellule small { display: block; color: var(--vert-texte); font-weight: 600; font-size: var(--t-xs); }
table.tableau th.colonne-mois-actuel, table.tableau td.colonne-mois-actuel { background: rgba(254, 190, 16, .12); }
table.tableau thead th.colonne-mois-actuel { background: var(--teal-fonce); }

.pastille-mois { display: block; height: 28px; border-radius: 5px; }
.pastille-mois[data-etat='pleine'] { background: var(--vert-profond); }
.pastille-mois[data-etat='dispo'] { background: var(--vert); }
.pastille-mois[data-etat='import'] { background: repeating-linear-gradient(45deg, #ffe9a8 0 5px, #f3d888 5px 10px); }
.pastille-mois[data-etat='non'] { background: #eff1ed; }

/* ------------------------------------------------------ courbe des prix */
.prix-graphe { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; height: 180px; margin-top: 6px; }
.prix-colonne { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.prix-colonne__barre {
  background: linear-gradient(180deg, var(--vert) 0%, var(--vert-fonce) 100%);
  border-radius: 5px 5px 2px 2px; min-height: 4px; position: relative;
}
.prix-colonne--haut .prix-colonne__barre { background: linear-gradient(180deg, #ffd25e 0%, var(--jaune-fonce) 100%); }
.prix-colonne--bas .prix-colonne__barre { background: linear-gradient(180deg, var(--bleu) 0%, #3ba9c8 100%); }
.prix-colonne__valeur { font-size: .68rem; font-weight: 800; color: var(--teal); margin-bottom: 4px; font-family: var(--police-titre); }
.prix-colonne__mois { font-size: .68rem; font-weight: 700; color: var(--gris-doux); margin-top: 7px; text-transform: uppercase; }
.prix-colonne--actuel .prix-colonne__mois { color: var(--teal); background: var(--jaune); border-radius: 4px; }
.prix-resume { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--gris-ligne); }
.prix-resume div { font-size: var(--t-xs); color: var(--gris-doux); }
.prix-resume b { display: block; font-family: var(--police-titre); font-size: 1.15rem; color: var(--teal); font-weight: 800; }

/* ------------------------------------------------------- fiche produit */
/* L'identité du produit (le h1) vient AVANT le visuel dans le HTML : un
   h3 « Disponibilité au Sénégal » ne doit pas précéder le h1 de la page.
   L'ordre affiché, lui, ne change pas — la colonne de gauche reste à
   gauche grâce à « order ». */
.fiche__haut { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e6); align-items: start; }
.fiche__gauche { order: 1; }
.fiche__droite { order: 2; }
.fiche__cal { margin-top: var(--e4); }
.fiche__pleine { margin: var(--e3) 0 0; font-size: var(--t-sm); }
.section--haut-court { padding-top: var(--e5); }

/* En dessous de 860 px la grille se replie sur une colonne. Sans
   réordonnancement, on obtenait : photo, calendrier, PUIS le nom du
   produit — on découvrait de quoi parlait la fiche après avoir fait
   défiler deux blocs. Les deux colonnes deviennent transparentes le
   temps du repli, ce qui permet de remettre les quatre morceaux dans
   l'ordre de lecture : on nomme, on montre, on date, on explique. */
@media (max-width: 860px) {
  .fiche__haut { grid-template-columns: 1fr; gap: var(--e5); }
  .fiche__gauche, .fiche__droite { display: contents; order: 0; }
  /* Tout ce qui n'est pas explicitement placé passe après : sans cette
     ligne, les blocs de la colonne droite (« Au catalogue », le bouton
     WhatsApp) prenaient l'ordre 0 et remontaient devant le titre. */
  .fiche__gauche > *, .fiche__droite > * { order: 5; }
  .fiche__identite { order: 1; }
  .fiche__visuel { order: 2; }
  .fiche__cal { order: 3; margin-top: 0; }
  .fiche__texte { order: 4; }
}
.fiche__visuel { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sable); box-shadow: var(--ombre); }
.fiche__visuel img { width: 100%; height: 100%; object-fit: cover; }
.fiche__titre { margin-bottom: .15em; }
.fiche__wolof { font-family: var(--police-titre); font-weight: 700; color: var(--vert-texte); font-size: 1.05rem; margin: 0 0 var(--e3); }
.fiche__wolof span { color: var(--gris-doux); font-weight: 600; }
.fiche__resume { font-size: var(--t-lg); color: var(--gris-texte); max-width: var(--mesure); }
.fiche__meta { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e4) 0 var(--e5); }
.etiquette {
  display: inline-flex; align-items: center;
  font-size: var(--t-xs); font-weight: 700; color: var(--teal);
  background: var(--sable); border-radius: 999px; padding: 7px 14px;
}
/* Une étiquette cliquable est une cible : elle passe à 44 px. */
a.etiquette { min-height: var(--touche); }
.fiche__bloc { margin-top: var(--e6); }
.fiche__bloc p, .fiche__bloc li { max-width: var(--mesure); }
.fiche__bloc h2 { font-size: 1.35rem; display: flex; align-items: center; gap: 10px; }
.fiche__bloc h2::before { content: ''; width: 6px; height: 22px; background: var(--jaune); border-radius: 3px; display: inline-block; }

.encart {
  background: var(--blanc); border: 1px solid var(--gris-ligne);
  border-radius: var(--rayon); padding: var(--e5); box-shadow: var(--ombre);
}
.encart + .encart { margin-top: var(--e4); }
.encart p, .encart li { line-height: var(--lh-dense); }
.encart h3, .encart .encart__titre { font-size: 1.05rem; margin-bottom: .5em; display: flex; align-items: center; gap: 9px; }
.encart h3 .puce, .encart .encart__titre .puce { width: 26px; height: 26px; border-radius: 8px; background: var(--bleu-clair); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.encart p:last-child, .encart ul:last-child { margin-bottom: 0; }

.liste-faits { list-style: none; padding: 0; margin: 0; }
.liste-faits li { position: relative; padding-left: 26px; margin-bottom: .7em; }
.liste-faits li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--jaune);
}

.nutrition-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.nutrition-liste li { background: var(--bleu-clair); border-radius: var(--rayon-sm); padding: var(--e3) var(--e3); font-size: var(--t-sm); margin: 0; line-height: var(--lh-dense); }
.nutrition-liste b { display: block; color: var(--teal); font-family: var(--police-titre); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }

/* -------------------------------------------------------------- CTA WA */
.bloc-commande {
  background: linear-gradient(120deg, var(--teal-fonce), var(--teal-clair));
  color: var(--blanc); border-radius: var(--rayon); padding: var(--e6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.bloc-commande h3, .bloc-commande__titre { color: var(--blanc); margin-bottom: .3em; font-size: 1.35rem; }
.bloc-commande p { color: #d3eaea; margin: 0; font-size: var(--t-sm); line-height: var(--lh-dense); max-width: 52ch; }

/* ------------------------------------------------------------- pied de page */
.pied { background: var(--teal-fonce); color: #a9c9c9; padding: var(--e7) 0 var(--e5); font-size: var(--t-sm); }
.pied a { color: #cfe6e6; text-decoration: none; }
.pied a:hover { color: var(--jaune); text-decoration: underline; }
.pied__grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--e6); }
@media (max-width: 800px) { .pied__grille { grid-template-columns: 1fr 1fr; gap: var(--e5) var(--e6); } }
@media (max-width: 520px) { .pied__grille { grid-template-columns: 1fr; gap: var(--e5); } }
.pied h4, .pied__titre { color: var(--blanc); margin-bottom: .9em; font-size: var(--t-xs); }
.pied ul { list-style: none; padding: 0; margin: 0; }
/* Chaque lien du pied est une cible tactile à part entière. C'est là que
   se trouvent le numéro WhatsApp et l'adresse : ils doivent s'atteindre
   du pouce sans viser. */
.pied li { margin: 0; }
.pied li a, .pied li { display: flex; align-items: center; min-height: 38px; }
.pied li a { min-height: var(--touche); }

/* Le logo du pied de page.
   C'est le bug signalé : la hauteur était imposée sans libérer la
   largeur, donc l'attribut width="900" du HTML étirait le logo sur
   toute la colonne. Le correctif « img { height: auto } » plus haut
   traite la cause ; ici on ne fixe plus qu'une largeur maximale, et on
   laisse la hauteur suivre. Zone de protection : au moins la moitié de
   la hauteur du logo avant le texte voisin. */
.pied__logo { margin: 0 0 var(--e4); }
.pied__logo img { width: 190px; max-width: 62%; height: auto; }
@media (max-width: 520px) { .pied__logo img { width: 168px; max-width: 70%; } }

.pied__accroche { max-width: 42ch; line-height: var(--lh-dense); margin: 0 0 1em; }
.pied__bas {
  margin-top: var(--e6); padding-top: var(--e4); border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: space-between; font-size: var(--t-xs); color: #92b6b6;
}

/* --------------------------------------------------------------- divers */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.chiffre { text-align: center; padding: 8px; }
.chiffre b { display: block; font-family: var(--police-titre); font-weight: 800; font-size: 2.2rem; color: var(--jaune); line-height: 1.1; }
.chiffre span { font-size: var(--t-sm); color: #b6d3d3; line-height: var(--lh-dense); }

.ancres { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e6); }
.ancres a {
  display: inline-flex; align-items: center; min-height: var(--touche);
  font-size: var(--t-sm); font-weight: 700; text-decoration: none; color: var(--teal);
  background: var(--blanc); border: 1px solid var(--gris-ligne); border-radius: 999px; padding: 7px 16px;
}
.ancres a:hover { background: var(--teal); color: var(--blanc); border-color: var(--teal); }

.pagination-produits { display: flex; justify-content: space-between; gap: var(--e4); margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid var(--gris-ligne); font-size: var(--t-sm); }
.pagination-produits a { text-decoration: none; font-weight: 700; display: flex; flex-direction: column; justify-content: center; min-height: var(--touche); }
.pagination-produits span { display: block; font-size: var(--t-xs); color: var(--gris-doux); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

@media print {
  .entete, .pied, .bloc-commande, .filtres, .ancres { display: none; }
  body { background: #fff; }
}

/* --------------------------------------------------- variantes produit */
table.variantes { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.variantes th {
  text-align: left; font-weight: 600; color: var(--gris-texte);
  padding: 9px 0; border-bottom: 1px solid var(--gris-ligne);
}
table.variantes td {
  text-align: right; white-space: nowrap; padding: 9px 0;
  border-bottom: 1px solid var(--gris-ligne);
  font-family: var(--police-titre); font-weight: 800; color: var(--teal);
}
table.variantes td small { font-weight: 600; color: var(--gris-doux); }
table.variantes tr:last-child th, table.variantes tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------ journal */
.conteneur--article { max-width: 760px; }

.journal-carte {
  display: block; text-decoration: none; color: inherit;
  background: var(--blanc); border: 1px solid var(--gris-ligne);
  border-radius: var(--rayon); padding: var(--e5); box-shadow: var(--ombre);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.journal-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); border-color: var(--vert); }
.journal-carte__meta {
  font-size: var(--t-xs); color: var(--gris-doux); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 var(--e2);
}
.journal-rubrique {
  display: inline-block; background: var(--bleu-clair); color: var(--teal);
  border-radius: 999px; padding: 3px 11px; margin-right: 8px; letter-spacing: .04em;
}
.journal-carte__titre { font-size: var(--t-h3); margin: 0 0 var(--e2); line-height: 1.25; }
.journal-carte__chapo { font-size: var(--t-sm); color: var(--gris-doux); margin: 0 0 var(--e3); line-height: var(--lh-dense); max-width: var(--mesure); }
.journal-carte__lien { font-size: var(--t-sm); font-weight: 700; color: var(--teal); }

.journal-carte--une {
  background: linear-gradient(140deg, var(--teal-fonce) 0%, var(--teal) 55%, var(--teal-clair) 100%);
  border-color: transparent; color: #fff; padding: 38px 40px;
}
.journal-carte--une .journal-carte__meta { color: #9dc7c7; }
.journal-carte--une .journal-rubrique { background: rgba(255, 255, 255, .14); color: #fff; }
.journal-carte--une .journal-carte__titre { font-size: 1.9rem; color: #fff; }
.journal-carte--une .journal-carte__chapo { color: #cfe6e6; font-size: var(--t-md); max-width: 62ch; }
.journal-carte--une .journal-carte__lien { color: var(--jaune); }
.journal-carte--une:hover { border-color: transparent; }

.article__entete { border-bottom: 1px solid var(--gris-ligne); padding-bottom: 24px; margin-bottom: 30px; }
.article__entete h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 14px; }
.article__chapo { font-size: var(--t-lg); color: var(--gris-doux); margin: 0; max-width: 62ch; }

.article__corps { font-size: var(--t-md); }
.article__corps h2 { margin: 2em 0 .6em; font-size: 1.45rem; }
.article__corps h3 { margin: 1.6em 0 .4em; font-size: 1.1rem; color: var(--teal); }
.article__corps p { margin: 0 0 1.1em; }
.article__corps ul { margin: 0 0 1.4em; }
.article__corps > *:first-child { margin-top: 0; }

.citation {
  margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--jaune);
  font-family: var(--police-titre); font-weight: 700; font-size: 1.18rem;
  color: var(--teal); line-height: 1.45;
}

.etiquette--lien { text-decoration: none; }
.etiquette--lien:hover { background: var(--teal); color: var(--blanc); border-color: var(--teal); }

.article__sources { margin-top: 38px; padding: 22px 24px; background: var(--sable); border-radius: var(--rayon); }
.article__sources h2 { font-size: 1rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .06em; }
.article__sources ul { margin: 0; padding-left: 1.1em; font-size: .9rem; color: var(--gris-doux); }
.article__sources li { margin-bottom: .4em; }
.article__sources-note { margin: 14px 0 0; font-size: .84rem; color: var(--gris-doux); font-style: italic; }

@media (max-width: 640px) {
  .journal-carte--une { padding: 26px 22px; }
  .journal-carte--une .journal-carte__titre { font-size: 1.45rem; }
}

/* Liste des intitulés du catalogue sur une fiche produit, utilisée quand
   le volet prix est masqué (data/site.js → ENABLE_PRICING). */
.liste-variantes { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.liste-variantes li { padding: 9px 0; border-bottom: 1px solid var(--gris-ligne); color: var(--gris-texte); }
.liste-variantes li:last-child { border-bottom: none; }
.liste-variantes small { color: var(--gris-doux); }

/* Note explicative sous la légende du calendrier : convention « import ». */
.calendrier-note { margin: var(--e3) 0 0; font-size: var(--t-xs); line-height: var(--lh-dense); color: var(--gris-doux); max-width: 74ch; }
.calendrier-note strong { color: var(--vert-texte); }

/* ------------------------------------------------- bandeaux photo */
/* Bandeau pleine largeur de la page d'accueil : les photos des parcelles
   et des lieux de conditionnement de nos producteurs partenaires. */
.bandeau-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px; background: var(--gris-ligne); }
.bandeau-photos__vue { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sable); }
.bandeau-photos__vue img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.bandeau-photos__vue:hover img { transform: scale(1.04); }
/* Le dégradé monte plus haut et plus opaque : la légende doit rester
   lisible quelle que soit la photo derrière, y compris sur un ciel.
   Mesuré dans le pire cas — blanc sur un ciel blanc — le voile doit
   atteindre 0,72 à la hauteur où commence le texte, sans quoi on tombe
   à 3,95. Il vaut 0,88 dès 55 %, et le texte commence à 62 %. */
.bandeau-photos figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 38px var(--e3) var(--e3);
  font-size: var(--t-xs); font-weight: 700; color: #fff; letter-spacing: .02em;
  background: linear-gradient(transparent, rgba(0, 32, 32, .55) 32%, rgba(0, 28, 28, .88) 55%, rgba(0, 26, 26, .94));
}

/* Portraits de producteurs, sur la page Notre démarche. */
.producteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 26px; }
.producteurs figure { margin: 0; }
.producteurs img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); box-shadow: var(--ombre); display: block; }
.producteurs figcaption { margin-top: var(--e3); font-size: var(--t-sm); color: #cfe6e6; line-height: var(--lh-dense); max-width: 46ch; }

/* Bande photo pleine largeur, utilisée entre deux sections.
   Une photo où figure une personne n'est jamais décorative : elle est
   légendée. La légende dit qui, où et pourquoi. */
.bande-large { position: relative; height: clamp(220px, 34vw, 420px); overflow: hidden; margin: 0; }
.bande-large img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bande-large figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 52px var(--e5) var(--e4);
  font-size: var(--t-xs); color: #fff; line-height: var(--lh-dense);
  background: linear-gradient(transparent, rgba(0, 32, 32, .58) 34%, rgba(0, 28, 28, .9) 58%, rgba(0, 26, 26, .95));
}
.bande-large figcaption::before { content: ''; }
@media (min-width: 700px) { .bande-large figcaption { padding-left: max(var(--e5), calc((100vw - var(--largeur)) / 2 + 20px)); max-width: 80ch; } }

@media (max-width: 560px) {
  .bandeau-photos { grid-template-columns: repeat(2, 1fr); }
  .bandeau-photos figcaption { font-size: .74rem; padding: 20px 10px 9px; }
}

/* ------------------------------------------------- pages ajoutées (SEO)
   Index A-Z, listes de liens des fiches, bandeaux de familles et de mois.
   Rien de décoratif : ces blocs existent pour être lus et cliqués. */

/* Masqué à l'écran, lu par les lecteurs d'écran et les moteurs. */
.sr-seulement {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Index alphabétique. Colonnes fluides : trois sur desktop, une à 360 px. */
.az { columns: 3 220px; column-gap: var(--e6); }
.az__groupe { break-inside: avoid; margin-bottom: var(--e5); }
.az__lettre {
  font-size: var(--t-lg); color: var(--teal); margin: 0 0 .4em;
  border-bottom: 2px solid var(--gris-ligne); padding-bottom: .2em;
}
.az__liste { list-style: none; margin: 0; padding: 0; }
.az__liste li {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid var(--gris-ligne);
  min-height: var(--touche); align-content: center;
}
.az__liste a { font-weight: 600; }
.az__liste small { color: var(--gris-doux); }
.az__etat {
  margin-left: auto; font-size: var(--t-2xs); font-weight: 700;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}

/* Listes de liens des blocs « continuer par là » et « le journal en parle ». */
.liste-liens { list-style: none; margin: 0; padding: 0; }
.liste-liens li { padding: 7px 0; border-bottom: 1px solid var(--gris-ligne); }
.liste-liens li:last-child { border-bottom: 0; }
.liste-liens small { color: var(--gris-doux); }

/* Bandeaux d'étiquettes : les autres familles, les autres mois. */
.liste-familles, .liste-mois { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.liste-mois .etiquette[aria-current='page'] {
  background: var(--teal); color: var(--blanc); border-color: var(--teal);
}

@media (max-width: 640px) { .az { columns: 1; } }

/* La carte du journal n'est plus un lien géant : seul le titre l'est.
   La surcouche rend malgré tout la carte entière cliquable, sans polluer
   l'intitulé du lien avec la rubrique, la date et le temps de lecture. */
.journal-carte { position: relative; }
.journal-carte__titre a { color: inherit; text-decoration: none; }
.journal-carte__titre a::after { content: ''; position: absolute; inset: 0; }
.journal-carte:hover .journal-carte__titre a,
.journal-carte__titre a:focus-visible { text-decoration: underline; }

/* Liste des produits d'un mois : une ligne par produit, cible tactile
   pleine. En colonnes dès qu'il y a la place. */
.liste-produits-mois { list-style: none; margin: 0; padding: 0; columns: 2 200px; column-gap: var(--e5); }
.liste-produits-mois li {
  break-inside: avoid; display: flex; align-items: center; gap: 8px;
  min-height: var(--touche); padding: 4px 0;
  border-bottom: 1px solid var(--gris-ligne);
}
.liste-produits-mois li:last-child { border-bottom: 0; }
.liste-produits-mois a { flex: 1 1 auto; }

/* ------------------------------------------- bandeau de saison, accueil
   Ce que le mois en cours a de particulier, en haut de l'accueil. Aucun
   carrousel, aucune animation : quatre chiffres et deux phrases, qui
   changent tout seuls au passage d'un mois. */
.bandeau-saison { background: var(--sable); border-bottom: 1px solid var(--gris-ligne); padding: var(--e5) 0; }
.bandeau-saison__interieur { display: grid; gap: var(--e4); }
.bandeau-saison__titre { font-size: var(--t-lg); margin: 0; color: var(--teal); }
/* Le nom du mois est écrit en minuscules par le script, qui sert aussi
   les libellés en milieu de phrase. La capitale se met ici. */
.bandeau-saison__titre [data-saison-mois]::first-letter { text-transform: uppercase; }
.bandeau-saison__chiffres {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e4);
}
.bandeau-saison__chiffres li { display: flex; align-items: baseline; gap: 9px; }
.bandeau-saison__chiffres b { font-family: var(--police-titre); font-size: var(--t-h3); line-height: 1; }
.bandeau-saison__chiffres span { font-size: var(--t-xs); color: var(--gris-doux); }
.bandeau-saison__mouvement { margin: 0; max-width: var(--mesure); font-size: var(--t-sm); }
.bandeau-saison__mouvement strong { color: var(--teal); }

/* Tableau d'identité de la page de confidentialité : deux colonnes,
   l'intitulé et la valeur. Il n'emprunte PAS la classe .tableau, qui
   porte une largeur minimale taillée pour les douze colonnes du tableau
   des prix et déborderait ici. Passe en liste empilée sous 520 px. */
.tableau--identite { width: 100%; border-collapse: collapse; margin: var(--e4) 0; }
.tableau--identite th { text-align: left; font-weight: 600; color: var(--gris-doux); font-size: var(--t-xs); padding: 9px 16px 9px 0; vertical-align: top; white-space: nowrap; }
.tableau--identite td { padding: 9px 0; border-bottom: 1px solid var(--gris-ligne); }
.tableau--identite tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) {
  .tableau--identite th, .tableau--identite td { display: block; white-space: normal; padding: 0; }
  .tableau--identite th { padding-top: 12px; }
  .tableau--identite td { padding-bottom: 12px; border-bottom: 1px solid var(--gris-ligne); }
}