/* ============================================================
   CUISINOVORES : la page d'accueil.
   Bandeau d'accroche, filtre, mosaïque, bandes de bas de page.
   Les jetons de couleur viennent de cuisinovores-chrome.css.
   ============================================================ */

/* Les ancres du bas de page (#livres, #aides) sont visées par les pavés de la
   mosaïque. Sans dégagement, l'en-tête collante recouvre leur titre. */
#livres,#aides,#articles,#cuisi-catalogue{scroll-margin-top:calc(var(--hdr) + 12px)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* ---------- Bandeau d'accroche ---------- */
/* padding-block et non padding : le raccourci écraserait la marge de
   gouttière, et le titre collerait au bord de l'écran. */
.cuisi-hero{background:var(--chrome);color:var(--chrome-fg);padding-block:var(--sp-5) var(--sp-6)}
.cuisi-kick{margin:0;font-size:var(--t-xs);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cta-bg)}
.cuisi-hero h1{margin-top:var(--sp-2);font-size:38px;line-height:.98;letter-spacing:-.04em;
  max-width:14ch;color:var(--chrome-fg)}
.cuisi-hero h1 em{font-style:normal;color:var(--cta-bg)}
.cuisi-chercher{display:flex;align-items:center;gap:var(--sp-3);height:56px;margin-top:var(--sp-5);
  padding:0 var(--sp-4);border-radius:var(--r-pill);background:var(--card);color:var(--ink);max-width:560px}
.cuisi-chercher input{flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:var(--t-base);color:var(--ink)}
.cuisi-clr{flex:none;width:36px;height:36px;display:grid;place-items:center;
  border-radius:var(--r-pill);color:var(--ink-3);font-size:18px}
.cuisi-clr[hidden]{display:none}

/* ---------- Zone catalogue ---------- */
.cuisi-cols{display:block}

/* ---------- Mosaïque ----------
   Un seul format de photo, le portrait : c'est celui qui rend le mieux la
   photographie culinaire. Le rythme vient des bandeaux pleine largeur qui
   coupent la grille, pas d'un mélange de tailles. Six recettes, un bandeau. */
.cuisi-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);
  grid-auto-flow:dense;padding-top:var(--sp-5)}
.cuisi-mosaic > li{display:block;min-width:0}
/* Le bandeau traverse la grille entière, quel que soit le nombre de colonnes.
   À deux colonnes il en occupait déjà la largeur ; à trois, il en laissait une
   vide à côté de lui. */
.cuisi-mosaic > li.l2{grid-column:1 / -1}

.cuisi-tuile{position:relative;display:block;width:100%;overflow:hidden;aspect-ratio:1/1;
  border-radius:var(--r-m);color:#fff;background:var(--chrome)}
/* double classe : .cuisi-tuile impose 1/1, il faut passer devant en spécificité */
.cuisi-tuile.cuisi-tuile--haute{aspect-ratio:4/5}
.cuisi-tuile.cuisi-tuile--large{aspect-ratio:16/10}
.cuisi-tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 500ms var(--ease)}
.cuisi-scrim{position:absolute;inset:0;background:var(--scrim)}
.cuisi-info{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:6px;padding:var(--sp-3)}
.cuisi-titre{font-size:var(--t-md);font-weight:800;line-height:1.12;letter-spacing:-.025em;
  text-shadow:0 1px 3px rgba(8,11,18,.6);color:#fff}
.cuisi-tuile--haute .cuisi-titre{font-size:20px}
.cuisi-mosaic > li.l2 .cuisi-titre{font-size:25px;letter-spacing:-.035em}
.cuisi-mosaic > li.l2 .cuisi-info{padding:var(--sp-4)}
@media (hover:hover) and (pointer:fine){ .cuisi-tuile:hover img{transform:scale(1.05)} }

/* Pavé typographique : du rythme sans photo, et un bandeau qui ne mange
   pas un écran de haut. */
.cuisi-pave{position:relative;overflow:hidden;
  background:var(--cta-bg);color:var(--cta-fg);display:flex;flex-direction:column;
  justify-content:center;gap:6px;padding:var(--sp-4) var(--sp-5);aspect-ratio:21/9;
  border-radius:var(--r-m);transition:filter var(--dur-1) var(--ease)}
.cuisi-pave strong{font-size:24px;font-weight:800;line-height:1.04;letter-spacing:-.038em}
.cuisi-pave span{font-size:var(--t-xs);font-weight:800}
.cuisi-pave--nuit{background:var(--chrome);color:var(--chrome-fg)}
.cuisi-pave--nuit span{color:var(--cta-bg)}
.cuisi-pave--creme{background:var(--accent-soft);color:var(--ink)}
.cuisi-pave--creme span{color:var(--accent)}
/* Le rouge de Noël, la seule exception aux deux couleurs du site. Il ne sert
   qu'au livre de fêtes, et seulement d'octobre à décembre. */
.cuisi-pave--noel{background:#DB1702;color:#fff}
.cuisi-pave--noel span{color:#FFD8CF}
/* Le genre annoncé au-dessus du titre : petit, en capitales, discret. Il
   nomme la nature du lien, il ne se dispute pas la vedette au titre. */
.cuisi-pave__genre{font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;opacity:.72;margin-bottom:2px}
.cuisi-pave--nuit .cuisi-pave__genre{color:var(--cta-bg);opacity:.9}
.cuisi-pave--noel .cuisi-pave__genre{color:#FFD8CF;opacity:.95}
/* Sur une seule colonne, le pavé prend le format portrait de ses voisines. */
.cuisi-mosaic > li:not(.l2) .cuisi-pave{aspect-ratio:4/5;padding:var(--sp-4)}
.cuisi-mosaic > li:not(.l2) .cuisi-pave strong{font-size:21px}

/* ---------- L'image du pavé ----------
   Chaque bandeau annonce quelque chose qui a un visage : la couverture d'un
   livre, la vignette d'un article, le logo pour la création de compte. Le
   texte tient la gauche, l'image un cadre à droite, sur toute la hauteur.
   Rien n'est posé sur rien : le texte garde le fond du pavé, donc sa
   lisibilité, dans les deux thèmes et sans voile. */
.cuisi-pave--img{flex-direction:row;align-items:center;gap:var(--sp-4)}
/* Le bandeau ne fait que cent cinquante pixels de haut sur téléphone : le
   titre y descend d'un cran pour laisser sa place à l'image sans se faire
   couper. Il remonte dès la tablette, où la largeur revient. */
.cuisi-pave--img strong{font-size:21px}
.cuisi-pave__txt{display:flex;flex-direction:column;justify-content:center;gap:6px;
  flex:1 1 auto;min-width:0}
/* Le cadre porte le format, l'image le remplit. Jamais de height:100% sur la
   balise img elle-même : une image pas encore chargée n'a aucune dimension,
   et le bloc s'étirait alors sur des milliers de pixels. */
.cuisi-pave__cadre{position:relative;flex:0 0 30%;align-self:stretch;
  overflow:hidden;border-radius:var(--r-s)}
.cuisi-pave__cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Le logo n'est pas une photo : on le montre en entier, avec de l'air autour,
   plutôt que recadré. Sa plaque est en --chrome-fg, le seul jeton clair dans
   les deux thèmes : le logo bleu y reste lisible même en sombre, où le fond
   crème du pavé devient une ardoise. */
/* En clair, le logo se pose à même le pavé.

   Il avait une plaque blanc cassé, posée pour que le logo bleu reste lisible
   quel que soit le thème. Sur le pavé crème, cela mettait deux blancs presque
   pareils côte à côte : un rectangle plus clair, au bord net, qui ressemblait
   à une image mal détourée plutôt qu'à un choix. Le crème est assez clair pour
   porter le bleu tout seul.

   En sombre, en revanche, le fond du pavé devient une ardoise et le logo bleu
   s'y perdrait : la plaque revient, et là elle se lit comme voulue. */
.cuisi-pave__cadre--logo{flex-basis:38%;background:transparent}
html[data-theme="dark"] .cuisi-pave__cadre--logo{background:var(--chrome-fg)}
.cuisi-pave__cadre--logo img{object-fit:contain;padding:var(--sp-3)}
/* Un pavé qui n'a pas la largeur de la grille garde le format portrait de ses
   voisines : côte à côte, l'image n'y serait plus qu'un liseré. Elle passe
   donc sous le texte, en bandeau, et prend ce qui reste de hauteur. */
.cuisi-mosaic > li:not(.l2) .cuisi-pave--img{flex-direction:column;align-items:stretch;
  gap:var(--sp-3)}
.cuisi-mosaic > li:not(.l2) .cuisi-pave--img .cuisi-pave__txt{flex:0 0 auto}
.cuisi-mosaic > li:not(.l2) .cuisi-pave--img .cuisi-pave__cadre{flex:1 1 auto;
  align-self:auto;min-height:0}

/* Un reflet balaie le pavé une fois, à son entrée à l'écran, puis au survol.
   Une seule passe : rien ne clignote en boucle. Le reflet est un ::after du
   pavé, donc le dernier élément peint : il passe par-dessus l'image comme
   par-dessus le texte. */
.cuisi-pave::after{
  content:'';position:absolute;top:-60%;bottom:-60%;left:0;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-320%) rotate(15deg);pointer-events:none;
}
.cuisi-pave--creme::after{background:linear-gradient(100deg,transparent,rgba(240,153,72,.38),transparent)}
@keyframes cuisi-reflet{from{transform:translateX(-320%) rotate(15deg)}
                        to{transform:translateX(620%) rotate(15deg)}}
.cuisi-pave.brille::after{animation:cuisi-reflet 1150ms var(--ease) 1 both}
@media (hover:hover) and (pointer:fine){
  .cuisi-pave:hover{filter:brightness(1.06)}
  .cuisi-pave:hover::after{animation:cuisi-reflet 900ms var(--ease) 1 both}
}
/* Le reflet passait aussi sur les lettres. Sur les pavés bleu nuit, la bande
   blanche à 55 % éclaircit le fond jusqu'à le rapprocher du texte, et le
   titre s'efface pendant la seconde du survol. Le texte monte donc d'un
   cran : la bande traverse le pavé et l'image, elle passe derrière les mots. */
.cuisi-pave__txt,.cuisi-pave > strong,.cuisi-pave > span{position:relative;z-index:1}

/* Le bouton seul, sous la dernière rangée. Pas de bandeau derrière : il
   ferait un bloc de plus au lieu d'en clore un. */
.cuisi-plus{display:flex;justify-content:center;padding:var(--sp-3) var(--sp-4) 0}
.cuisi-plus[hidden]{display:none}
.cuisi-plus .cuisi-ghost{border-color:var(--accent);color:var(--accent);font-weight:800}

/* ---------- Cul-de-sac ---------- */
.cuisi-vide{padding:var(--sp-7) var(--sp-4);text-align:center;border:1px dashed var(--line-2);
  border-radius:var(--r-l);margin-top:var(--sp-3)}
.cuisi-vide[hidden]{display:none}
.cuisi-vide h3{font-size:var(--t-xl)}
.cuisi-vide p{margin:var(--sp-2) 0 var(--sp-4);color:var(--ink-2);font-size:var(--t-s)}
.cuisi-relacher{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center}
.cuisi-relacher button{display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);
  padding:0 15px;border-radius:var(--r-pill);border:1px solid var(--accent);
  color:var(--accent);font-size:var(--t-s);font-weight:800;background:var(--card)}
.cuisi-relacher b{font-weight:800;opacity:.7;font-variant-numeric:tabular-nums}

/* ---------- Filtre ---------- */
.cuisi-fhost{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;
  background:var(--veil);opacity:0;visibility:hidden;
  transition:opacity var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
.cuisi-fhost[data-on="1"]{opacity:1;visibility:visible;transition-delay:0s}
.cuisi-fsheet{width:100%;max-width:520px;max-height:90svh;display:flex;flex-direction:column;
  background:var(--bg);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-2);
  transform:translateY(16px);transition:transform var(--dur-2) var(--ease)}
.cuisi-fhost[data-on="1"] .cuisi-fsheet{transform:none}
.cuisi-fhead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4);border-bottom:1px solid var(--line)}
.cuisi-fhead h2{font-size:var(--t-xl)}
.cuisi-fhead .cuisi-iconbtn{color:var(--ink)}
.cuisi-fbody{overflow-y:auto;padding:var(--sp-3) var(--sp-4) var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-2)}
.cuisi-fsec{border-bottom:1px solid var(--line)}
.cuisi-fsec:last-child{border-bottom:0}
.cuisi-fsec__head{width:100%;display:flex;align-items:center;gap:var(--sp-3);min-height:52px;text-align:left}
/* Le remise à zéro des boutons, dans chrome.css, est écrite en :where() :
   elle ne pèse rien, et n'importe quelle règle étrangère visant les boutons
   la bat, ce qui redonne un cadre aux quatre entêtes. On le redit ici avec
   assez de poids pour tenir. Les pastilles gardent le leur, qui est voulu. */
body.cuisi-chrome .cuisi-fsec__head{border:0;background:none;box-shadow:none}
.cuisi-fsec__head .lbl{font-weight:800;font-size:var(--t-base)}
.cuisi-fsec__head .n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:var(--r-pill);background:var(--accent);color:var(--bg);font-size:13px;font-weight:800}
.cuisi-fsec__head .n[hidden]{display:none}
.cuisi-fsec__head .sum{margin-left:auto;font-size:var(--t-xs);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%}
.cuisi-fsec__head .chev{flex:none;transition:transform var(--dur-2) var(--ease)}
.cuisi-fsec[data-open="1"] .cuisi-fsec__head .chev{transform:rotate(180deg)}
.cuisi-fsec__body{display:none;padding-bottom:var(--sp-4)}
.cuisi-fsec[data-open="1"] .cuisi-fsec__body{display:block}
.cuisi-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.cuisi-chip{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;
  min-height:var(--tap);padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--card);color:var(--ink);font-size:var(--t-s);font-weight:600;
  transition:transform var(--dur-1) var(--ease)}
.cuisi-chip b{font-weight:800;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cuisi-chip:active{transform:scale(.97)}
.cuisi-chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent);font-weight:800}
.cuisi-chip[aria-pressed="true"] b{color:var(--accent)}

/* En thème sombre, le vert des régimes est bien plus lumineux qu'en clair :
   posé sur une puce au repos, il la faisait passer pour déjà cochée, puisque
   c'est la couleur qui signale la sélection. Au repos, encre normale comme
   les autres facettes ; le vert ne revient qu'une fois le régime retenu. */
.cuisi-chip:disabled{opacity:.5;text-decoration:line-through;cursor:not-allowed}
.cuisi-ingsearch{display:flex;align-items:center;gap:10px;height:var(--tap);padding:0 14px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--card);margin-bottom:var(--sp-2)}
.cuisi-ingsearch input{flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:var(--t-s);color:var(--ink)}
.cuisi-ffoot{display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--bg)}
.cuisi-ffoot__ligne{display:flex;gap:var(--sp-2)}
.cuisi-ffoot__ligne .cuisi-cta{flex:1}
.cuisi-ffoot .cuisi-ghost{flex:none}
.cuisi-note-vide{margin:10px 0 0;font-size:var(--t-s);color:var(--ink-3)}

/* Enregistrer ses préférences : le coeur du dispositif. */
.cuisi-pref{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--tap);border-radius:var(--r-pill);border:1px dashed var(--accent);
  color:var(--accent);font-size:var(--t-s);font-weight:800;background:transparent}
.cuisi-pref[hidden]{display:none}
.cuisi-pref--ok{border-style:solid;background:var(--accent-soft)}

/* ---------- Barre flottante ---------- */
/* Elle ne vit que le temps du catalogue : le pied de page utilise la même
   ardoise qu'elle, elle y devenait invisible. */
.cuisi-dock{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;flex-direction:column;
  align-items:center;gap:var(--sp-2);padding:0 var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  pointer-events:none;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.cuisi-dock[data-off="1"]{opacity:0;transform:translateY(130%)}
.cuisi-dock[data-off="1"] *{pointer-events:none!important}
.cuisi-dock__tags{display:flex;gap:var(--sp-2);width:100%;max-width:420px;overflow-x:auto;
  scrollbar-width:none;pointer-events:auto}
.cuisi-dock__tags::-webkit-scrollbar{display:none}
.cuisi-dock__tags[hidden]{display:none}
.cuisi-atag{flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 6px 0 13px;
  border-radius:var(--r-pill);background:var(--card);color:var(--accent);border:1px solid var(--accent);
  font-size:var(--t-xs);font-weight:800;white-space:nowrap;box-shadow:var(--shadow-1)}
.cuisi-atag .x{flex:none;display:grid;place-items:center;width:24px;height:24px;
  border-radius:var(--r-pill);font-size:15px}
.cuisi-atag--clear{color:var(--ink-2);border-color:var(--line-2);font-weight:600;padding:0 15px}
.cuisi-dock__bar{display:flex;align-items:center;gap:var(--sp-2);width:100%;max-width:420px;padding:5px;
  border-radius:var(--r-pill);background:var(--ink);color:var(--bg);pointer-events:auto;
  /* le liseré clair l'empêche de se fondre dans un fond sombre */
  box-shadow:var(--shadow-3), 0 0 0 1px rgba(244,242,238,.18)}
.cuisi-fbtn{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-2);height:var(--tap);border-radius:var(--r-pill);
  font-size:var(--t-s);font-weight:800;color:var(--bg)}
.cuisi-fbtn__txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La contrainte citée change toutes les trois secondes : le bouton dit ce
   qu'il fait au lieu d'un « Filtrer » abstrait. */
.cuisi-fbtn em{font-style:normal;font-weight:600;opacity:.72;transition:opacity 240ms var(--ease)}
.cuisi-fbtn em[hidden]{display:none}
.cuisi-fbtn em.vire{opacity:0}
.cuisi-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:var(--r-pill);background:var(--cta-bg);color:var(--cta-fg);font-size:13px;font-weight:800}
.cuisi-badge[hidden]{display:none}
.cuisi-sep{flex:none;width:1px;height:24px;background:rgba(255,255,255,.22)}
.cuisi-cnt{flex:none;display:inline-flex;align-items:center;height:var(--tap);padding:0 var(--sp-4);
  border-radius:var(--r-pill);background:var(--cta-bg);color:var(--cta-fg);font-size:var(--t-s);
  font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Bandes de bas de page ---------- */
.cuisi-bande{padding-top:var(--sp-8)}
.cuisi-bande > h2{font-size:var(--t-2xl)}
.cuisi-lead{margin:var(--sp-2) 0 0;font-size:var(--t-md);color:var(--ink-2);max-width:60ch}

.cuisi-panneau{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-l);
  box-shadow:var(--shadow-2);padding:var(--sp-5)}
.cuisi-panneau h2{font-size:var(--t-xl)}
.cuisi-panneau > p{margin:var(--sp-2) 0 var(--sp-4);color:var(--ink-2);font-size:var(--t-s)}
/* .cuisi-avantages, .cuisi-ic : dans chrome.css. La fenêtre de compte,
   présente sur toutes les pages, montre la même liste que ce panneau. */
.cuisi-panneau__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* ---------- Les livres ---------- */
.cuisi-livres{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-5)}
.cuisi-livre{color:var(--ink)}
.cuisi-livre img,.cuisi-reserve{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-s);
  box-shadow:var(--shadow-2);transition:transform 320ms var(--ease)}
.cuisi-reserve{display:grid;place-items:center;text-align:center;padding:var(--sp-2);
  background:var(--accent-soft);border:1px dashed var(--line-2);font-size:11px;
  color:var(--ink-3);line-height:1.3}
.cuisi-livre h3{margin-top:var(--sp-3);font-size:var(--t-s)}
.cuisi-livre p{margin:2px 0 0;font-size:var(--t-xs);color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .cuisi-livre:hover img{transform:translateY(-4px) rotate(-1.2deg)}
}
.cuisi-livres__pied{display:flex;justify-content:center;margin-top:var(--sp-5)}

/* ---------- Aides cuisine ---------- */
.cuisi-aides{display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
.cuisi-aide{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-l);
  box-shadow:var(--shadow-1);color:var(--ink);
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-1) var(--ease)}
.cuisi-aide__ic{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-m);
  background:var(--accent-soft);color:var(--accent)}
.cuisi-aide__ic svg{fill:none;stroke:currentColor}
.cuisi-aide b{display:block;font-size:var(--t-md);letter-spacing:-.02em}
.cuisi-aide__txt{font-size:var(--t-xs);color:var(--ink-3);line-height:1.4}
@media (hover:hover) and (pointer:fine){
  .cuisi-aide:hover{transform:translateY(-3px);border-color:var(--accent)}
}

/* ---------- Articles ---------- */
.cuisi-articles{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-3);margin-top:var(--sp-5)}
.cuisi-article{color:var(--ink);transition:transform var(--dur-2) var(--ease)}
.cuisi-article img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-m)}
.cuisi-article h3{margin-top:var(--sp-3);font-size:var(--t-s);line-height:1.22;letter-spacing:-.02em;
  transition:color var(--dur-1) var(--ease)}
.cuisi-article p{margin:4px 0 0;font-size:var(--t-xs);color:var(--ink-3)}
.cuisi-articles__pied{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}
@media (hover:hover) and (pointer:fine){
  .cuisi-article:hover{transform:translateY(-3px)}
  .cuisi-article:hover h3{color:var(--accent)}
}

/* ---------- Le portrait ---------- */
/* La photo n'est pas un médaillon : le portrait de la personne qui tient
   occupe une vraie surface. */
.cuisi-autrice{display:grid;gap:0;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r-l);box-shadow:var(--shadow-2);overflow:hidden}
/* Le cadre porte le format, la photo se contente de le remplir.
   Posé directement sur l'image, height:100% dépendait de dimensions que
   l'image n'a pas encore quand elle est différée : la carte se retrouvait
   étirée sur 1500 pixels. Un cadre vide, lui, n'a aucune hauteur propre :
   c'est le texte d'à côté qui fixe la rangée, et l'image la remplit. */
.cuisi-autrice__cadre{position:relative;display:block;overflow:hidden;aspect-ratio:4/3}
.cuisi-autrice__cadre img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 32%}
.cuisi-autrice__texte{padding:var(--sp-5)}
.cuisi-autrice h2{font-size:var(--t-2xl)}
.cuisi-autrice blockquote{margin:var(--sp-3) 0 0;padding:0;border:0;font-size:var(--t-md);color:var(--ink-2)}
.cuisi-sig{margin:var(--sp-3) 0 var(--sp-4);font-size:var(--t-xs);color:var(--ink-3)}

/* ---------- Apparitions ---------- */
.cuisi-anim .cuisi-reveal{opacity:0;transform:translateY(12px)}
.cuisi-anim .cuisi-reveal.is-in{opacity:1;transform:none;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}

/* Les vignettes ajoutées par « Voir plus » descendent en place, dans le sens
   de lecture. Elles montaient, ce qui donnait l'impression que la page
   remontait pendant que les photos se chargeaient. */
@keyframes cuisi-entree{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.cuisi-mosaic > li.entre{animation:cuisi-entree 420ms var(--ease) both;
  animation-delay:calc(var(--i,0) * 45ms)}

/* Les livres se posent, avec un léger dépassement : c'est le seul endroit de
   la page où l'animation cherche vraiment le regard. */
@keyframes cuisi-poseLivre{
  0%{opacity:0;transform:translateY(38px) rotate(-8deg) scale(.88)}
  55%{opacity:1;transform:translateY(-8px) rotate(2.5deg) scale(1.03)}
  78%{transform:translateY(2px) rotate(-1deg) scale(.995)}
  100%{opacity:1;transform:none}
}
.cuisi-anim .cuisi-bande--livres .cuisi-livre{opacity:0}
.cuisi-anim .cuisi-bande--livres.is-in .cuisi-livre{
  animation:cuisi-poseLivre 780ms var(--ease) both;animation-delay:calc(var(--i,0) * 150ms)}
.cuisi-anim .cuisi-bande--livres .cuisi-livres__pied{opacity:0}
.cuisi-anim .cuisi-bande--livres.is-in .cuisi-livres__pied{
  animation:cuisi-entree 500ms var(--ease) both;animation-delay:640ms}

/* ---------- Tablette ---------- */
@media (min-width:768px){
  .cuisi-hero h1{font-size:52px}
  .cuisi-mosaic{grid-template-columns:repeat(3,1fr)}
  /* Sur un écran large, le 21/9 donnerait un bandeau de plus de trois cents
     pixels de haut : il couperait la mosaïque au lieu de la ponctuer. */
  .cuisi-mosaic > li.l2 .cuisi-pave{aspect-ratio:32/9}
  /* La largeur revenue, le titre retrouve sa taille pleine. */
  .cuisi-mosaic > li.l2 .cuisi-pave--img strong{font-size:24px}
  .cuisi-livres{gap:var(--sp-5)}
  .cuisi-articles{grid-template-columns:repeat(3,1fr);gap:var(--sp-5) var(--sp-4)}
  .cuisi-aides{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  .cuisi-autrice{grid-template-columns:42% 1fr;align-items:stretch}
  .cuisi-autrice__cadre{aspect-ratio:auto;min-height:340px}
  .cuisi-autrice__texte{padding:var(--sp-6);align-self:center}
}

/* ---------- Bureau ---------- */
@media (min-width:1024px){
  .cuisi-hero{padding-block:var(--sp-7) var(--sp-8)}
  .cuisi-hero h1{font-size:64px}

  /* Le filtre cesse d'être une feuille et devient une colonne qui suit le
     défilement. Pas de align-items:start ici : la colonne se réduirait à la
     hauteur du filtre, et un élément collant n'a alors aucune place pour se
     déplacer. Il redescendait donc avec la page, en laissant une grande zone
     vide sous lui. La colonne prend toute la hauteur de la rangée, le filtre
     s'y déplace. */
  .cuisi-cols{display:grid;grid-template-columns:300px 1fr;gap:var(--sp-7);align-items:stretch}
  .cuisi-fhost{position:static;display:block;background:none;opacity:1;visibility:visible;z-index:1}
  /* Le filtre ne dépasse jamais la hauteur de l'écran : quand ses sections
     sont toutes ouvertes, c'est sa liste qui défile, pas la page, et le
     bouton « Voir les N recettes » reste sous les yeux. */
  .cuisi-fsheet{max-width:none;max-height:calc(100svh - var(--hdr) - var(--sp-6));
    transform:none;background:transparent;box-shadow:none;border-radius:0;
    position:sticky;top:calc(var(--hdr) + var(--sp-5))}
  .admin-bar .cuisi-fsheet{top:calc(var(--hdr) + var(--sp-5) + 32px);
    max-height:calc(100svh - var(--hdr) - var(--sp-6) - 32px)}
  .cuisi-fhead{border-bottom:0;padding:var(--sp-5) 0 var(--sp-2)}
  .cuisi-fhead .cuisi-iconbtn{display:none}
  .cuisi-fbody{overflow-y:auto;padding:0;min-height:0;scrollbar-width:thin}
  .cuisi-ffoot{border-top:1px solid var(--line);padding:var(--sp-4) 0 0;background:none}
  .cuisi-dock{display:none}
  .cuisi-autrice{grid-template-columns:38% 1fr}
  .cuisi-autrice__cadre{min-height:420px}
  .cuisi-autrice__texte{padding:var(--sp-7)}
}

@media (prefers-reduced-motion:reduce){
  .cuisi-anim .cuisi-reveal{opacity:1;transform:none}
  .cuisi-anim .cuisi-bande--livres .cuisi-livre,
  .cuisi-anim .cuisi-bande--livres .cuisi-livres__pied{opacity:1}
}

/* Le résumé d'une section ne sert que quand elle est repliée : il dit ce
   qu'on a coché sans avoir à ouvrir. Section ouverte, les puces le montrent
   déjà, et le résumé n'avait plus la place de s'afficher en entier dès deux
   régimes retenus. */
.cuisi-fsec[data-open="1"] .cuisi-fsec__head .sum{display:none}

/* Le bandeau qui comble la dernière rangée occupe une ou deux colonnes selon
   ce qui manque. La règle du portrait 4:5 vise « tout bandeau qui n'est pas
   pleine largeur » et l'attrapait donc aussi : sur deux colonnes, elle lui
   donnait neuf cents pixels de haut. Il prend simplement la hauteur de la
   rangée, celle des vignettes qui l'entourent. */
.cuisi-mosaic > li[data-comble] .cuisi-pave{aspect-ratio:auto;height:100%}