/* ============================================================
   CUISINOVORES : le calendrier des fruits et légumes de saison.
   Douze onglets, ouverts par des boutons radio et cette feuille.
   Aucun script : le mois en cours est déjà ouvert à l'arrivée,
   et les onze autres sont dans la page, à un clic.
   ============================================================ */

/* ---------- Le texte d'introduction ---------- */
.cuisi-cal__intro{max-width:62ch;margin-bottom:var(--sp-6)}
.cuisi-cal__intro p{margin:0 0 var(--sp-4);color:var(--ink-2);font-size:var(--t-md)}
.cuisi-cal__intro p:last-child{margin-bottom:0}
.cuisi-cal__intro strong{color:var(--ink);font-weight:800}
.cuisi-cal__intro a{font-weight:800;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:2px}
.cuisi-cal__intro a strong{color:inherit}

/* ---------- La barre des mois ----------
   Douze étiquettes qui restent collées sous l'en-tête du site : sur un
   téléphone, changer de mois ne demande pas de remonter la page. Deux rangées
   de six sur les petits écrans, une seule rangée de douze dès qu'elle tient.

   Elles n'ont pas de conteneur à elles, et ce n'est pas un oubli : une feuille
   de style ne sait viser que ce qui suit un élément, jamais ce qui l'entoure.
   Boutons, étiquettes et panneaux doivent donc rester au même niveau pour que
   cocher un mois puisse à la fois allumer son étiquette et ouvrir son panneau.
   C'est la rangée d'étiquettes qui fait la barre, chacune apportant son fond et
   son filet pour qu'aucun texte ne défile au travers. */
.cuisi-cal{position:relative;display:flex;flex-wrap:wrap}

.cuisi-cal__onglet{position:sticky;top:var(--hdr);z-index:10;
  flex:1 1 16.6%;display:flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 var(--sp-1);text-align:center;
  font-size:var(--t-xs);font-weight:700;line-height:1.15;
  color:var(--ink-2);background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
/* La seconde rangée se pose sous la première au lieu de la recouvrir. */
.cuisi-cal__onglet:nth-of-type(n+7){top:calc(var(--hdr) + var(--tap))}
.cuisi-cal__long{display:none}

/* Les boutons eux-mêmes ne se voient pas, mais restent accessibles au clavier :
   les flèches passent d'un mois à l'autre comme dans n'importe quel groupe de
   choix. Un display:none les sortirait de la tabulation. */
.cuisi-cal__radio{position:absolute;width:1px;height:1px;opacity:0;
  pointer-events:none;margin:0}

.cuisi-cal__radio:checked + .cuisi-cal__onglet{
  background:var(--chrome);color:var(--chrome-fg);
  box-shadow:inset 0 0 0 1px var(--chrome)}
.cuisi-cal__radio:focus-visible + .cuisi-cal__onglet{
  outline:3px solid var(--accent);outline-offset:-3px}

/* Le panneau du mois choisi. Douze règles presque identiques : c'est le prix
   d'un fonctionnement sans JavaScript, la feuille de style ne sachant pas
   compter. */
#cuisi-m1:checked  ~ #cuisi-p1,
#cuisi-m2:checked  ~ #cuisi-p2,
#cuisi-m3:checked  ~ #cuisi-p3,
#cuisi-m4:checked  ~ #cuisi-p4,
#cuisi-m5:checked  ~ #cuisi-p5,
#cuisi-m6:checked  ~ #cuisi-p6,
#cuisi-m7:checked  ~ #cuisi-p7,
#cuisi-m8:checked  ~ #cuisi-p8,
#cuisi-m9:checked  ~ #cuisi-p9,
#cuisi-m10:checked ~ #cuisi-p10,
#cuisi-m11:checked ~ #cuisi-p11,
#cuisi-m12:checked ~ #cuisi-p12{display:block}

@media (hover:hover) and (pointer:fine){
  .cuisi-cal__onglet:hover{background:var(--accent-soft);color:var(--ink)}
  .cuisi-cal__radio:checked + .cuisi-cal__onglet:hover{
    background:var(--chrome);color:var(--chrome-fg)}
}

/* ---------- Un mois ----------
   Onze mois sur douze sont repliés. Ils restent dans la page : les moteurs de
   recherche les lisent, et le passage de l'un à l'autre ne recharge rien.
   Un panneau occupe une ligne entière sous la barre. */
.cuisi-mois{display:none;flex:0 0 100%;min-width:0;padding-top:var(--sp-6)}
.cuisi-mois__titre{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3);
  font-size:var(--t-2xl);margin-bottom:var(--sp-5)}
.cuisi-mois__ici{font-size:var(--t-xs);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}

.cuisi-mois__bacs{display:grid;gap:var(--sp-5)}

/* ---------- Légumes et fruits ----------
   Le vert et l'orange sont ceux des bandeaux des tableaux d'origine : on
   retrouve la page qu'on connaissait, en texte.

   La couleur est portée par le bandeau, jamais par les lettres. L'accent sur
   son fond crème ne tient que 4,49 pour 1, sous le seuil de lisibilité ; posé
   en fond derrière de l'encre, il passe largement, et le repère vert ou orange
   reste aussi net. */
.cuisi-bac{border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--card);overflow:hidden}
.cuisi-bac__titre{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);font-size:var(--t-lg);letter-spacing:-.02em;
  color:var(--ink)}
.cuisi-bac__nb{font-size:var(--t-xs);font-weight:800;
  padding:2px var(--sp-2);border-radius:var(--r-pill);
  background:var(--card);color:var(--ink-2)}
.cuisi-bac--leg .cuisi-bac__titre{background:var(--green-bg)}
.cuisi-bac--fru .cuisi-bac__titre{background:var(--accent-soft)}
/* Le troisième bac, celui des herbes. Il n'a pas de couleur à lui dans les
   jetons du site : il reprend le vert des légumes, dont il est proche, mais
   sans le fond plein, pour qu'on distingue les deux d'un coup d'œil. */
.cuisi-bac--her .cuisi-bac__titre{background:transparent;
  box-shadow:inset 0 0 0 2px var(--green-bg)}

.cuisi-bac__liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:var(--sp-1);margin:0;padding:var(--sp-3);list-style:none}

/* ---------- Un produit ----------
   Lien ou non, la case fait la même taille : la liste ne doit pas se lire
   comme deux listes selon que la recette existe ou pas. */
.cuisi-prod{display:flex;align-items:center;gap:var(--sp-2);
  min-height:var(--tap);padding:var(--sp-1) var(--sp-3);
  font-size:var(--t-s);line-height:1.25;color:var(--ink);
  border-radius:var(--r-s);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.cuisi-prod--seul{color:var(--ink-2)}
a.cuisi-prod{font-weight:700}
.cuisi-prod__nb{flex:none;margin-left:auto;font-size:var(--t-xs);font-weight:700;
  color:var(--ink-2)}
/* Au survol, c'est le fond qui change et non les lettres : l'accent sur crème
   ne serait plus assez lisible. */
a.cuisi-prod:hover,a.cuisi-prod:focus-visible{background:var(--accent-soft);color:var(--ink)}
a.cuisi-prod:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.cuisi-cal__note{margin:var(--sp-5) 0 0;font-size:var(--t-xs);color:var(--ink-2);
  max-width:62ch}

/* ---------- Apparition au défilement ----------
   Seuls les blocs toujours visibles la portent. Un panneau replié n'entre
   jamais dans le champ de l'observateur : il resterait transparent une fois
   déplié, et le mois serait vide. */
.cuisi-anim .cuisi-simple .cuisi-cal__intro{opacity:0;transform:translateY(12px)}
.cuisi-anim .cuisi-simple .cuisi-cal__intro.is-in{opacity:1;transform:none;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}

/* ---------- Écrans plus larges ---------- */
@media (min-width:640px){
  .cuisi-cal__court{display:none}
  .cuisi-cal__long{display:inline}
  .cuisi-bac__liste{padding:var(--sp-4)}
}
@media (min-width:768px){
  .cuisi-mois__titre{font-size:var(--t-3xl)}
  .cuisi-mois__bacs{grid-template-columns:1fr 1fr;align-items:start;gap:var(--sp-4)}
  .cuisi-bac__titre{padding:var(--sp-4) var(--sp-5)}
}
/* Les douze mois tiennent enfin sur une rangée : plus de seconde rangée à
   décaler. */
@media (min-width:1080px){
  .cuisi-cal__onglet{flex-basis:8.3%;font-size:var(--t-s)}
  .cuisi-cal__onglet:nth-of-type(n+7){top:var(--hdr)}
  .cuisi-mois__bacs{gap:var(--sp-5)}
}

@media (prefers-reduced-motion:reduce){
  .cuisi-anim .cuisi-simple .cuisi-cal__intro{opacity:1;transform:none}
  .cuisi-prod,.cuisi-cal__onglet{transition:none}
}