/* ============================================================
   Page recette : tout ce qui entoure la fiche.
   Premier écran, carte autrice et livre, suggestions.
   Chargée uniquement sur les articles qui portent une recette.

   Les jetons sont redéclarés ici : la feuille du gabarit les pose sur
   .cuisi, celle-ci les pose sur .cuisi-page. Mêmes valeurs, deux portées,
   pour que chacune des deux tienne debout seule.
   ============================================================ */

/* Les couleurs viennent de cuisinovores-chrome.css, qui les décline en clair
   et en sombre.
   Cette feuille redéfinissait --scrim en un dégradé presque opaque, taillé
   pour que le titre tienne sur la photo du premier écran. Le titre n'est plus
   sur la photo : ce jeton n'a plus d'objet ici, et le retirer évite qu'il
   noircisse par mégarde un élément qui l'emploierait. */
.cuisi-page{
  /* Largeur de la colonne de lecture. Elle est lue à plusieurs endroits, la
     feuille du contenu et la gouttière du premier écran, qui doivent rester
     alignés au pixel près. Un seul jeton, plusieurs lectures. */
  --lecture:1160px;

  /* De combien la feuille de contenu remonte sur la photo. Lue deux fois :
     par la feuille elle-même, et par le bandeau du bas du premier écran, qui
     doit se poser juste au-dessus sous peine de passer dessous. Un seul
     jeton, pour que les deux ne se désaccordent pas. */
  --remontee:28px;

  /* clip et non hidden : la colonne d'ingrédients doit rester collante */
  overflow-x:clip;
}
.cuisi-page *,.cuisi-page *::before,.cuisi-page *::after{box-sizing:border-box}

/* ---------- Premier écran ----------

   AU TÉLÉPHONE ET SUR TABLETTE : la photo occupe quatre-vingts pour cent de
   l'écran, et le texte est posé dessus, en deux bandeaux. Le fil d'Ariane et
   le titre en haut, la note et le signet en bas.

   POURQUOI UNE HAUTEUR FIXE ET NON LE FORMAT DE LA PHOTO

   Deux versions précédentes ont laissé le format décider de la hauteur. La
   page changeait alors d'allure d'une recette à l'autre : sur un téléphone de
   375 sur 812, une verticale occupait soixante et un pour cent de l'écran et
   une horizontale trente et un. Sur trois cent quatre-vingt-douze recettes,
   dont quatre-vingt-dix-huit horizontales, cela fait un site qui ne se
   ressemble pas.

   Toutes les photos occupent donc la même hauteur, et le cadre recadre ce qui
   dépasse. Le recadrage est une affaire d'affichage : le fichier de la
   photothèque garde son format, et dès mille vingt-quatre pixels de large la
   photo le retrouve, à côté du texte, où elle a la place de se montrer.

   POURQUOI DES APLATS ET NON UN DÉGRADÉ

   Le dégradé du prototype montait aux quatre-vingt-treize pour cent de la
   hauteur : il couvrait le plat. Un aplat limité à la hauteur du texte ne
   prend que les deux bords, et il garantit la lisibilité quelle que soit la
   photo. À quatre-vingt-huit pour cent d'opacité sur le pire des cas, une
   photo blanche, le texte blanc reste à 5,4 contre 1, au-dessus des 4,5
   exigés. Un texte simplement ombré n'aurait rien garanti du tout. */
.cuisi-hero{
  position:relative;isolation:isolate;
  /* Pleine largeur, tout simplement : .cuisi-page occupe déjà toute la
     largeur utile.

     La version précédente sortait du conteneur avec « width:100vw » et une
     marge négative. Mais 100vw compte la barre de défilement, quinze pixels
     sur un ordinateur : le bandeau était donc quinze pixels trop large et
     décalé de sept et demi vers la gauche. C'est le décalage du titre noté le
     15 août, visible sous 1160 pixels de large. Sur un téléphone, où la barre
     ne prend pas de place, il n'existait pas. */
  background:var(--chrome);color:var(--chrome-fg);
}
.cuisi-hero__grille{max-width:var(--lecture);margin-inline:auto;position:relative}

/* svh et non vh : sur téléphone, vh compte la barre d'adresse comme si elle
   n'existait pas, et le bas de la photo passait sous elle au chargement. */
.cuisi-hero__cadre{
  position:relative;display:block;margin:0;overflow:hidden;
  width:100%;height:90svh;
  background:var(--card);
}
.cuisi-hero__img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:center}

/* Le panoramique lent du premier écran.

   POURQUOI

   Le cadre du téléphone est deux fois plus haut que large. Une photo prise à
   l'horizontale n'y montre qu'un tiers de sa largeur : les deux autres tiers
   existent, sont téléchargés, et ne sont jamais vus. Le panoramique les fait
   passer devant, lentement, sans que le lecteur ait rien à faire.

   POURQUOI object-position ET NON UN ZOOM

   Un effet Ken Burns classique agrandit l'image et la déplace. Agrandir, c'est
   montrer MOINS de photo et l'étirer. Ici on ne touche pas à l'échelle : on
   déplace seulement le point de cadrage, donc chaque pixel reste à sa taille
   d'origine et on découvre ce qui était coupé.

   POURQUOI L'AMPLITUDE SE RÈGLE TOUTE SEULE

   object-position compte en part du DÉBORDEMENT, pas en pixels. Une photo
   16:9, qui déborde de sept cent vingt pixels, se promène donc sur deux cent
   dix-sept ; une verticale, qui ne déborde que de cent, se promène sur trente.
   Beaucoup coupée, elle bouge beaucoup ; peu coupée, elle bouge à peine. Et
   quand elle ne déborde pas du tout, le navigateur borne la valeur et rien ne
   bouge : jamais de vide au bord.

   Les deux axes sont animés pour la même raison. Sur un téléphone toutes les
   photos débordent en largeur, mais sur une tablette, plus large, une
   verticale déborde en hauteur. Une seule animation couvre les deux cas,
   l'axe qui ne déborde pas étant simplement borné. Le déplacement vertical
   est trois fois plus discret : le titre et la note ne bougent pas, eux, et
   un plat qui monterait sous le titre se verrait.

   Le cycle part et revient au centre : la première impression est le cadrage
   choisi, pas un bord. */
@keyframes cuisi-panoramique{
  0%   {object-position:50% 50%}
  25%  {object-position:82% 42%}
  50%  {object-position:50% 50%}
  75%  {object-position:18% 58%}
  100% {object-position:50% 50%}
}
.cuisi-hero__img{animation:cuisi-panoramique 26s ease-in-out infinite}

/* Sur grand écran la photo est montrée entière, dans son format : il n'y a
   rien de coupé à découvrir, et un cadrage qui bouge sans raison agace. */
@media (min-width:1024px){
  .cuisi-hero__img{animation:none}
}

/* Qui a demandé moins d'animations n'en veut pas non plus ici. */
@media (prefers-reduced-motion:reduce){
  .cuisi-hero__img{animation:none}
}

/* Le bandeau du haut : un aplat, comme convenu, pour le fil d'Ariane et le
   titre. Le bas n'en a pas : la note est posée à même la photo. */
.cuisi-hero__tete,.cuisi-hero__txt{
  position:absolute;left:0;right:0;z-index:2;
}
.cuisi-hero__tete{top:0;padding:var(--sp-3) var(--sp-4) var(--sp-4);
  background:rgba(37,45,68,.88)}
.cuisi-hero__txt{bottom:var(--remontee);padding:var(--sp-2) var(--sp-4) var(--sp-3);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3)}
.cuisi-hero__txt .cuisi-signet__zone{margin-top:0;flex:none}

/* Sans aplat sous la note, il faut détacher chaque signe du fond, sinon un
   plat clair avale le texte blanc et les étoiles vides, qui sont grises.
   Deux ombres portées : une courte et dure qui dessine le contour, une longue
   et douce qui assombrit ce qu'il y a juste derrière. C'est ce que font les
   sous-titres à l'écran, et cela ne pose aucun aplat visible.
   Le titre, lui, garde son bandeau : il est trop gros pour qu'une ombre
   suffise, et Allison le voulait ainsi. */
.cuisi-hero__txt{
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.55);
}
.cuisi-hero__txt .cuisi-etoile__boite{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 2px 10px rgba(0,0,0,.5));
}

/* Photo claire : on écrit en sombre.

   L'ombre ne suffit pas dans tous les cas. La mesure des trois cent
   quatre-vingt-dix-neuf photos donne une luminosité médiane de 79 sur 255
   sous le texte, ce qui va très bien, mais trente-sept dépassent 150 et la
   pire monte à 214 avec quatre-vingt-six pour cent de pixels clairs. Sur
   celles-là le texte blanc s'effaçait, halo compris, et un halo assez épais
   pour tenir sur du blanc serait une salissure.

   On retourne donc le texte plutôt que d'ajouter quelque chose sur la photo :
   encre sombre, halo clair. Rien n'est posé sur l'image dans un cas comme
   dans l'autre. C'est single.php qui pose la classe, d'après la mesure rangée
   par inc/photo-clarte.php.

   Bornée sous 1024 : au-delà, le texte revient sur l'ardoise sombre et n'a
   plus rien à voir avec la photo. */
@media (max-width:1023px){
  .cuisi-hero--clair .cuisi-hero__txt{
    color:#141926;
    text-shadow:0 1px 2px rgba(255,255,255,.92),0 2px 14px rgba(255,255,255,.75);
  }
  .cuisi-hero--clair .cuisi-note__chiffre,
  .cuisi-hero--clair .cuisi-note__mot{color:#141926}
  .cuisi-hero--clair .cuisi-etoile__vide{fill:#5C6376}
  .cuisi-hero--clair .cuisi-hero__txt .cuisi-etoile__boite{
    filter:drop-shadow(0 1px 2px rgba(255,255,255,.92)) drop-shadow(0 2px 10px rgba(255,255,255,.7));
  }
  .cuisi-hero--clair .cuisi-hero__txt .cuisi-signet{
    color:#141926;background:rgba(255,255,255,.55);border-color:rgba(20,25,38,.45)}
  .cuisi-hero--clair .cuisi-hero__txt .cuisi-signet:hover,
  .cuisi-hero--clair .cuisi-hero__txt .cuisi-signet:focus-visible{
    background:rgba(255,255,255,.78);border-color:#141926;color:#141926}
}

/* Le signet en pastille sur les écrans étroits.

   Les cinq étoiles font deux cent vingt pixels, le bouton avec son mot cent
   cinquante-trois, et un téléphone de 375 n'offre que trois cent quarante-
   trois entre ses gouttières. Les deux ne tiennent pas sur une ligne, et le
   bouton passait à la ligne suivante : cinquante-six pixels de photo perdus.

   On retire donc le mot, pas le bouton. Le signet seul est une convention
   comprise, et le mot reste dans la page, invisible mais lu à voix haute par
   les lecteurs d'écran : le bouton garde son nom. La cible tactile reste à
   quarante-quatre pixels, on ne rogne pas là-dessus. */
@media (max-width:399px){
  .cuisi-signet__mot{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cuisi-hero__txt .cuisi-signet{width:44px;padding:0;justify-content:center;gap:0}
}

/* Le fil d'Ariane, collé au titre. Il était une barre de navigation à part
   entière, avec des cibles de quarante-quatre pixels de haut et une marge
   dessous : soixante-dix pixels pour deux mots. Sur le bandeau il n'est plus
   qu'une ligne de contexte, et chaque pixel qu'il prend est un pixel de photo
   en moins. Vingt-huit reste au-dessus des vingt-quatre exigés pour une cible
   tactile. */
.cuisi-fil{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:2px}
.cuisi-fil a,.cuisi-fil span{font-size:var(--t-xs);color:rgba(255,255,255,.82);text-decoration:none;
  min-height:28px;display:inline-flex;align-items:center;padding:0 2px}
.cuisi-fil i{font-style:normal;opacity:.5;padding:0 4px}

/* Sans mesure imposée : sur le bandeau, chaque ligne de plus mange de la
   photo. La limite de dix-huit signes faisait tenir « Recette Smoothie mangue
   cerise » en trois lignes au lieu de deux. */
.cuisi-hero h1{margin:0;font-size:36px;line-height:1.02;letter-spacing:-.035em;
  font-weight:800;color:#fff}


/* ---------- Notation ---------- */
.cuisi-note{max-width:520px}

/* Sur la photo seulement : les étoiles et le chiffre sur une ligne, la phrase
   dessous. Empilés, ils prenaient vingt-huit pixels de plus, pris sur la
   photo.
   La règle est tenue au premier écran, et pas posée sur .cuisi-note tout
   court : le même bloc sert au pied de page, sous « Vous l'avez cuisinée ? »,
   où il est centré dans un encadré. En rangée, ses étoiles s'y collaient à
   gauche. */
.cuisi-hero__txt .cuisi-note{display:flex;flex-wrap:wrap;align-items:center;
  gap:0 var(--sp-3)}
.cuisi-hero__txt .cuisi-note__mot{flex-basis:100%}
.cuisi-etoiles{display:flex}
.cuisi-etoile{width:var(--tap);height:var(--tap);display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer}
.cuisi-etoile__boite{position:relative;width:30px;height:30px}
.cuisi-etoile__boite svg{width:30px;height:30px;display:block}
.cuisi-etoile__vide{fill:var(--star-off)}
.cuisi-etoile__pleine{position:absolute;inset:0 auto 0 0;overflow:hidden;width:0;
  transition:width var(--dur-1) var(--ease)}
.cuisi-etoile__pleine svg{fill:var(--star-on)}
@keyframes cuisi-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
.cuisi-etoile.cuisi-pop .cuisi-etoile__boite{animation:cuisi-pop 320ms var(--ease)}
.cuisi-note__chiffre{margin:0;font-size:var(--t-s);color:rgba(255,255,255,.92)}
.cuisi-note__chiffre b{font-weight:800;font-variant-numeric:tabular-nums}
.cuisi-note__mot{margin:4px 0 0;font-size:var(--t-xs);color:rgba(255,255,255,.78);min-height:22px}
.cuisi-note__mot[data-ok="1"]{color:var(--star-on);font-weight:600}

/* ---------- Le signet ----------
   Il range la recette dans le carnet. Posé sur la photo, il lui faut sa
   propre plaque : une pastille translucide, comme la croix du carnet. */
.cuisi-signet__zone{margin-top:var(--sp-4)}
.cuisi-signet{display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:44px;padding:0 var(--sp-4);cursor:pointer;
  font:inherit;font-size:var(--t-s);font-weight:800;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  border-radius:var(--r-pill);backdrop-filter:blur(6px);
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.cuisi-signet svg{fill:none;flex:none;transition:fill var(--dur-1) var(--ease)}
.cuisi-signet:hover,.cuisi-signet:focus-visible{background:rgba(255,255,255,.24);
  border-color:#fff;color:#fff}
.cuisi-signet:active{transform:scale(.97)}
/* Rangée : le signet se remplit, c'est le seul signal dont on a besoin. */
.cuisi-signet.est-dedans{background:var(--cta-bg);border-color:var(--cta-bg);color:var(--cta-fg)}
.cuisi-signet.est-dedans svg{fill:currentColor}
.cuisi-signet[disabled]{opacity:.6;cursor:wait}

/* ---------- Colonne de lecture ----------
   Elle remonte sur la photo et arrondit ses deux coins hauts : la limite
   entre l'image et le contenu était un trait net, et les repères se
   retrouvaient à cheval dessus.

   La gouttière est posée en padding, jamais en margin : la feuille doit
   continuer d'aller d'un bord à l'autre sur téléphone, sinon son fond et ses
   deux coins arrondis se décollent de l'écran et la remontée sur la photo ne
   veut plus rien dire. Le padding rentre seulement le texte.
   La boîte reste en border-box, donc la feuille tient toujours dans
   --lecture et reste centrée : seule la mesure de lecture perd deux fois
   var(--sp-4). Cette règle sert aussi les sections qui suivent la fiche,
   carte autrice, suggestions, avis : elles portent la même classe. */
.cuisi-corps{position:relative;z-index:1;max-width:var(--lecture);margin-inline:auto;
  background:var(--bg);border-radius:var(--r-l) var(--r-l) 0 0;
  margin-top:calc(-1 * var(--remontee));padding-top:36px;padding-inline:var(--sp-4)}

.cuisi-page .cuisi-sec{margin-top:var(--sp-7)}

/* Sauf la première, qui n'a rien au-dessus d'elle à écarter.

   Les quarante-huit pixels qui séparent deux sections s'ajoutaient aux
   trente-six de la feuille : quatre-vingt-quatre pixels de blanc entre la
   photo et les quatre blocs du temps et de la difficulté, dont cinquante-six
   bien visibles. Une marge sert à séparer deux choses ; ici il n'y avait rien
   à séparer. */
.cuisi-page .cuisi > .cuisi-sec:first-child{margin-top:0}
/* Ce réglage ne vise que les titres de la PAGE, pas ceux de la fiche : posé
   sur « .cuisi-page h2 », il atteignait aussi Ingrédients, Temps et
   Préparation, les grossissait de 22 à 28 pixels et collait leur filet
   orange au bloc suivant. */
/* La marge basse n'est pas décorative : la feuille de la fiche trace un filet
   orange sept pixels sous ces titres. Sans elle, le filet tombait dans le
   premier mot de la phrase qui suit. */
.cuisi-page .cuisi-sec.cuisi-corps > h2{font-size:var(--t-2xl);font-weight:800;
  letter-spacing:-.03em;color:var(--ink);margin:0 0 var(--sp-4)}
.cuisi-page .cuisi-indice{margin:var(--sp-2) 0 0;font-size:var(--t-xs);color:var(--ink-3)}

.cuisi-cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:52px;padding:0 var(--sp-5);border-radius:var(--r-pill);
  background:var(--cta-bg);color:var(--cta-fg);text-decoration:none;font-weight:800;
  transition:transform var(--dur-1) var(--ease)}
.cuisi-cta:hover,.cuisi-cta:focus{color:var(--cta-fg)}
.cuisi-cta:active{transform:scale(.97)}
.cuisi-flg{display:inline-block;transition:transform 200ms var(--ease)}
.cuisi-cta:hover .cuisi-flg{transform:translateX(4px)}

/* ---------- Allison et le livre ---------- */
.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 qu'une image
   différée n'a pas encore, et la carte s'étirait sur toute la page. */
.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__txt{padding:var(--sp-5)}
.cuisi-autrice__txt h2{font-size:var(--t-xl)}
.cuisi-autrice__role{margin:2px 0 var(--sp-3);font-size:var(--t-xs);color:var(--ink-3)}
.cuisi-autrice blockquote{margin:0 0 var(--sp-5);padding:0;border:0;font-size:var(--t-md);color:var(--ink-2)}
.cuisi-livre{display:grid;grid-template-columns:124px 1fr;gap:var(--sp-4);align-items:center;
  margin-bottom:var(--sp-5)}
.cuisi-livre__couv{width:100%;height:auto;border-radius:var(--r-s);box-shadow:var(--shadow-2);
  transition:transform 320ms var(--ease)}
.cuisi-autrice:hover .cuisi-livre__couv{transform:translateY(-3px) rotate(-1.2deg)}
.cuisi-livre h3{margin:0 0 var(--sp-2);font-size:var(--t-lg);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.cuisi-livre p{margin:0;font-size:var(--t-s);color:var(--ink-2)}

/* ---------- Suggestions ---------- */
.cuisi-vignettes{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-4)}
.cuisi-vignette{text-decoration:none;color:var(--ink);display:block;
  transition:transform var(--dur-2) var(--ease)}
.cuisi-vignette__ph{display:block;overflow:hidden;border-radius:var(--r-m)}
.cuisi-vignette img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform 420ms var(--ease)}
.cuisi-vignette b{display:block;margin-top:var(--sp-2);font-size:var(--t-s);font-weight:800;letter-spacing:-.01em}
.cuisi-vignette > span:last-child{font-size:var(--t-xs);color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .cuisi-vignette:hover{transform:translateY(-3px)}
  .cuisi-vignette:hover img{transform:scale(1.05)}
  .cuisi-vignette:hover b{color:var(--accent)}
}


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

/* ---------- Tablette et bureau ---------- */
@media (min-width:768px){
  .cuisi-hero h1{font-size:48px}
  .cuisi-autrice{grid-template-columns:42% 1fr;align-items:stretch}
  .cuisi-autrice__cadre{aspect-ratio:auto;min-height:340px}
  .cuisi-autrice__txt{padding:var(--sp-6);align-self:center}
  .cuisi-vignettes{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){
  /* Les deux de front : la photo dans son carré à gauche, le texte à droite,
     tous deux centrés verticalement. La gouttière reprend celle de la colonne
     de lecture, pour que le titre s'aligne avec la fiche qui suit. */
  /* La gouttière est un padding intérieur, pas un calcul sur cent pour cent :
     la boîte étant en border-box, la formule de la colonne de lecture aurait
     mangé trois cent seize pixels DANS les mille cent soixante, et la colonne
     de texte serait tombée à trois cent trente-six pixels de large. C'est le
     centrage par max-width qui place la grille, comme pour la fiche en
     dessous : les deux s'alignent ainsi au pixel près. */
  /* Trois enfants, deux colonnes : la photo tient les deux rangées de
     gauche, le titre et le reste s'empilent à droite et se rejoignent au
     milieu. L'écart entre rangées est nul, sans quoi le titre et les
     étoiles seraient séparés de quarante-huit pixels. */
  .cuisi-hero__grille{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);
    grid-template-rows:auto auto;column-gap:var(--sp-7);row-gap:0;align-items:center;
    padding:var(--sp-7) var(--sp-4)}
  /* La photo reprend son format et sa borne de hauteur : à côté du texte,
     elle a la largeur qu'il faut pour se montrer entière. Cinq cent vingt
     de haut, pour qu'une verticale ne pousse pas la fiche hors de l'écran. */
  .cuisi-hero__cadre{grid-area:1/1/3/2;align-self:center;
    aspect-ratio:var(--forme,1/1);max-height:520px;
    max-width:100%;width:auto;height:auto;margin:0 auto;
    border-radius:var(--r-l);box-shadow:var(--shadow-3)}
  /* Les bandeaux se défont : plus rien n'est posé sur la photo. */
  .cuisi-hero__tete{grid-area:1/2/2/3;align-self:end;
    position:static;padding:0;background:none}
  .cuisi-hero__txt{grid-area:2/2/3/3;align-self:start;
    position:static;padding:0;background:none;display:block;
    /* Le texte est sur l'ardoise et non sur la photo : les ombres qui le
       détachaient du plat n'ont plus rien à détacher, et elles salissaient. */
    text-shadow:none}
  .cuisi-hero__txt .cuisi-etoile__boite{filter:none}
  .cuisi-hero__txt .cuisi-signet__zone{margin-top:var(--sp-4)}
  .cuisi-hero h1{margin:0 0 var(--sp-4);font-size:52px}
  .cuisi-autrice{grid-template-columns:38% 1fr}
  .cuisi-autrice__cadre{min-height:420px}
}

@media (prefers-reduced-motion:reduce){
  .cuisi-page *,.cuisi-page *::before,.cuisi-page *::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important}
  .cuisi-anim .cuisi-page .cuisi-reveal{opacity:1;transform:none}
}

/* Recette sans aucun avis : les étoiles passent en contour, et le chiffre
   disparaît. Cinq étoiles grises pleines se lisaient comme un zéro alors
   qu'elles voulaient dire « personne n'a encore voté ». */
.cuisi-note--vierge .cuisi-etoile__vide{fill:none;stroke:var(--star-on);stroke-width:1.6}
.cuisi-note--vierge .cuisi-note__chiffre[hidden]{display:none}

/* ---------- Commentaires ----------
   wpDiscuz se borne à 750 px et se centre dans la colonne : il flottait au
   milieu, plus étroit que tout le reste de la page. Il reprend la largeur de
   lecture, et son accent rouge d'origine cède la place au nôtre.
   Ce n'est qu'un replâtrage : la vraie réponse est de le remplacer par les
   commentaires de WordPress, que l'on habille entièrement. */
/* L'éditeur de code source de wpDiscuz, replié.

   wpDiscuz pose en fin de page une petite fenêtre « Insert » qui sert à
   coller du code dans un commentaire. C'est sa propre feuille qui la garde
   fermée, et le thème ne la charge plus : la fenêtre s'affichait donc en
   clair sous le pied de page, avec son bouton, sur toutes les recettes.

   On la referme ici. wpDiscuz l'ouvre en posant un style directement sur
   l'élément, ce qui l'emporte sur cette règle : si quelqu'un s'en sert un
   jour, elle s'ouvrira quand même. */
#wpd-editor-source-code-wrapper,#wpd-editor-source-code-wrapper-bg{display:none}

/* Le blanc au-dessus de « Vous l'avez cuisinée ? » s'empilait en trois
   couches : quarante-huit pixels d'écart entre sections, trente-six de
   remplissage hérités de la feuille de contenu, vingt-quatre de marge propre à
   l'encadré. Cent huit pixels de vide avant même le cadre.

   Les trente-six ne servent qu'à la première feuille, celle qui remonte sur la
   photo et doit rentrer son texte sous le coin arrondi. Ici il n'y a pas de
   photo, et l'encadré n'a rien au-dessus de lui à écarter. Reste l'écart entre
   sections, le même que partout ailleurs sur la page. */
.cuisi-page #comments{margin-top:var(--sp-7);padding-top:0}
.cuisi-page #wpdcom{max-width:none;font-size:var(--t-base)}
.cuisi-page #wpdcom .wpd-thread-head{border-bottom:1px solid var(--line)}
.cuisi-page #wpdcom .wpd-thread-info{border-bottom-color:var(--cta-bg)}
.cuisi-page #wpdcom .wpd-prim-button{background-color:var(--cta-bg);color:var(--cta-fg);
  border-radius:var(--r-pill);font-weight:800}
.cuisi-page #wpdcom .wpd-thread-filter .wpdf-active{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- Commentaires ----------
   Rendus par le thème, plus par wpDiscuz : mêmes commentaires, même base,
   mais un balisage que nous maîtrisons et qui ne pèse rien. */
/* Un retour posé à même le fond, sans rien autour, ressemblait à du texte
   resté là par accident, et le lien de réponse en gras orange criait plus
   fort que le message. Chaque retour tient maintenant dans une carte, comme
   partout ailleurs sur le site. */
.cuisi-avis__liste{display:flex;flex-direction:column;gap:var(--sp-3);
  margin:var(--sp-4) 0 0;padding:0;list-style:none}
.cuisi-avis__item{list-style:none;padding:var(--sp-4);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-m)}
.cuisi-avis__item .children{display:flex;flex-direction:column;gap:var(--sp-3);
  margin:var(--sp-4) 0 0 var(--sp-4);padding:0;border-left:2px solid var(--line)}
.cuisi-avis__item .children .cuisi-avis__item{margin-left:var(--sp-4)}
.cuisi-avis__tete{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.cuisi-avis__ini{flex:none;width:34px;height:34px;display:grid;place-items:center;
  border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);
  font-size:var(--t-s);font-weight:800}
.cuisi-avis__qui{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.cuisi-avis__tete b{font-weight:800;color:var(--ink)}
.cuisi-avis__tete time{font-size:var(--t-xs);color:var(--ink-3)}
.cuisi-avis__texte{color:var(--ink-2);max-width:70ch}
.cuisi-avis__texte p{margin:0 0 var(--sp-2)}
.cuisi-avis__texte p:last-child{margin:0}
/* Sur sa propre ligne : WP Recipe Maker accroche sa note à la fin du
   dernier mot, et « Drôle de recette. » suivi des étoiles se lisait
   d'une seule traite. */
.cuisi-avis__note{display:flex;gap:2px;margin:var(--sp-2) 0 0}
.cuisi-avis__note svg{width:16px;height:16px;display:block;fill:none;
  stroke:var(--star-off);stroke-width:1.6}
.cuisi-avis__note svg.on{fill:var(--star-on);stroke:var(--star-on)}
.cuisi-avis__attente{margin:var(--sp-2) 0 0;font-size:var(--t-xs);color:var(--accent);font-weight:600}
.cuisi-avis__rep{margin:var(--sp-3) 0 0}
.cuisi-avis__rep a{font-size:var(--t-xs);font-weight:700;color:var(--ink-3)}
.cuisi-avis__rep a:hover{color:var(--accent)}

/* L'invitation qui remplace le formulaire quand il faut un compte. */
.cuisi-avis__invite{margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:1px solid var(--line)}
.cuisi-avis__invite p{margin:0 0 var(--sp-4);font-size:var(--t-s);color:var(--ink-3)}
.cuisi-avis__invite-boutons{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center}

/* Le formulaire */
.cuisi-avis .comment-respond{margin-top:var(--sp-6);padding-top:var(--sp-5);
  border-top:1px solid var(--line);max-width:640px}
.cuisi-avis .comment-reply-title{font-size:var(--t-xl);font-weight:800;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 var(--sp-4)}
.cuisi-avis .comment-reply-title small{margin-left:var(--sp-3);font-size:var(--t-xs);font-weight:600}
.cuisi-champ{margin:0 0 var(--sp-4)}
.cuisi-champ label{display:block;margin-bottom:6px;font-size:var(--t-xs);
  font-weight:800;color:var(--ink)}
.cuisi-champ input,.cuisi-champ textarea{width:100%;padding:11px var(--sp-3);
  border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--card);
  color:var(--ink);font:inherit;font-size:var(--t-s)}
.cuisi-champ textarea{resize:vertical;min-height:120px}
.cuisi-champ input:focus,.cuisi-champ textarea:focus{outline:none;border-color:var(--accent)}
.cuisi-aide-champ{display:block;margin-top:5px;font-size:var(--t-xs);color:var(--ink-3)}
.cuisi-avis .form-submit{margin:0}
.cuisi-avis .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:var(--sp-2);
  margin:0 0 var(--sp-4);font-size:var(--t-xs);color:var(--ink-3)}
.cuisi-avis .comment-form-cookies-consent input{width:auto;flex:none;margin-top:3px}
.cuisi-avis .comment-notes,.cuisi-avis .logged-in-as{font-size:var(--t-xs);color:var(--ink-3)}

/* ---------- Le bloc « Vous l'avez cuisinée ? » ----------
   Un encadré, cinq étoiles, un bouton. Le formulaire complet ne se déplie
   qu'à la demande : sur une page recette, personne ne vient pour remplir
   des champs, et le laisser ouvert faisait mille pixels de haut. */
/* Centré dans la colonne : son contenu l'est déjà, mais le cadre lui-même
   restait collé à gauche, et l'encadré paraissait posé de travers. */
.cuisi-avis__bloc{max-width:520px;margin:0 auto;padding:var(--sp-5);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-l);
  box-shadow:var(--shadow-1);text-align:center}
.cuisi-avis__bloc h2{font-size:var(--t-xl);margin:0 0 var(--sp-3)}
.cuisi-avis__bloc .cuisi-etoiles{justify-content:center}
.cuisi-avis__bloc .cuisi-note__mot{margin:var(--sp-2) 0 0;color:var(--ink-3);
  font-size:var(--t-xs);min-height:20px}
.cuisi-avis__bloc .cuisi-note__mot[data-ok="1"]{color:var(--accent);font-weight:700}

.cuisi-avis__plus{margin-top:var(--sp-4);border-top:1px solid var(--line);padding-top:var(--sp-4)}
.cuisi-avis__plus summary{list-style:none;cursor:pointer}
.cuisi-avis__plus summary::-webkit-details-marker{display:none}
.cuisi-avis__plus summary span{display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 var(--sp-5);border-radius:var(--r-pill);border:1px solid var(--line-2);
  color:var(--ink);font-size:var(--t-s);font-weight:700}
.cuisi-avis__plus[open] summary span{border-color:var(--accent);color:var(--accent)}
.cuisi-avis__plus > form{margin-top:var(--sp-4);text-align:left}

.cuisi-avis__titre{margin:var(--sp-7) 0 var(--sp-4);font-size:var(--t-lg);font-weight:800;color:var(--ink)}

/* ============================================================
   LES DEUX BLOCS PARTAGÉS
   Le bandeau des recueils et les quatre portes d'entrée par régime.
   Ils vivaient dans des modèles Elementor, bâtis avec le widget « call
   to action » d'Elementor Pro : c'était le dernier usage payant sur la
   partie visible du site. Ils s'affichent sur les pages recette et, pour
   le bandeau, en fin d'article de fond.
   ============================================================ */

/* ---------- Le bandeau des recueils ----------
   Le cadre porte le format, l'image le remplit : une image différée n'a pas
   encore de dimensions propres, et le bloc s'étirerait le temps du chargement. */
.cuisi-bandeau{margin:0}
.cuisi-bandeau__lien{position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3;border-radius:var(--r-l);background:var(--card);
  box-shadow:var(--shadow-2);color:var(--chrome-fg);text-decoration:none;
  transition:transform var(--dur-2) var(--ease)}
.cuisi-bandeau__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-2) var(--ease)}
/* Le voile n'est pas une coquetterie : le titre est blanc, et sans lui il
   passait sur les zones claires de la photo des livres.
   Il ne reprend surtout pas var(--scrim) : .cuisi-page redéfinit ce jeton en
   un dégradé presque opaque, taillé pour que le grand titre tienne sur la
   photo du premier écran. Appliqué ici, il aurait noirci les vignettes. */
.cuisi-bandeau__voile{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(19,24,38,.88) 0%,rgba(19,24,38,.45) 45%,rgba(19,24,38,.05) 100%)}
.cuisi-bandeau__txt{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--sp-3);padding:var(--sp-5)}
.cuisi-bandeau__txt strong{font-size:var(--t-xl);font-weight:800;line-height:1.2;
  letter-spacing:-.02em;color:#FFF;text-shadow:0 1px 12px rgba(19,24,38,.5)}
.cuisi-bandeau__btn{display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:var(--tap);padding:0 var(--sp-5);border-radius:var(--r-pill);
  background:var(--cta-bg);color:var(--cta-fg);font-weight:800;font-size:var(--t-s)}
.cuisi-bandeau__lien:hover .cuisi-bandeau__img,
.cuisi-bandeau__lien:focus-visible .cuisi-bandeau__img{transform:scale(1.03)}
.cuisi-bandeau__lien:hover .cuisi-flg{transform:translateX(4px)}
.cuisi-bandeau__lien:active{transform:scale(.995)}

@media (min-width:640px){
  .cuisi-bandeau__lien{aspect-ratio:21/9}
  .cuisi-bandeau__txt{padding:var(--sp-6)}
  .cuisi-bandeau__txt strong{font-size:var(--t-2xl);max-width:22ch}
}

/* ---------- Les quatre portes d'entrée par régime ----------
   Deux par ligne sur téléphone, quatre dès qu'il y a la place. Le libellé est
   posé sur la photo, comme dans le modèle d'origine, mais avec un voile
   dégradé plutôt qu'un fond plein : le contraste tient sur les quatre photos,
   qui sont claires en haut et sombres en bas. */
.cuisi-portes{margin:0}
/* Le titre suit celui des autres sections de la page. La règle qui les habille
   ne vise que les enfants directs de la colonne de lecture, pour ne pas
   atteindre « Ingrédients » ou « Préparation » dans la fiche : celui-ci est
   d'un cran plus bas, il lui faut sa propre ligne. */
.cuisi-portes > h2{font-size:var(--t-2xl);font-weight:800;letter-spacing:-.03em;
  color:var(--ink);margin:0 0 var(--sp-4);line-height:1.15}
.cuisi-portes ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.cuisi-porte{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;
  border-radius:var(--r-m);background:var(--card);box-shadow:var(--shadow-1);
  text-decoration:none;transition:transform var(--dur-2) var(--ease)}
.cuisi-porte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-2) var(--ease)}
.cuisi-porte__voile{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(19,24,38,.9) 0%,rgba(19,24,38,.42) 52%,rgba(19,24,38,0) 100%)}
.cuisi-porte__mot{position:absolute;inset:auto 0 0 0;padding:var(--sp-3);
  font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;line-height:1.25;
  color:#FFF;text-shadow:0 1px 10px rgba(19,24,38,.6)}
.cuisi-porte:hover img,.cuisi-porte:focus-visible img{transform:scale(1.05)}
.cuisi-porte:active{transform:scale(.98)}

@media (min-width:640px){
  .cuisi-portes ul{grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
  .cuisi-porte__mot{padding:var(--sp-4);font-size:var(--t-s)}
}

@media (prefers-reduced-motion:reduce){
  .cuisi-bandeau__lien,.cuisi-bandeau__img,.cuisi-porte,.cuisi-porte img{transition:none}
  .cuisi-bandeau__lien:hover .cuisi-bandeau__img,
  .cuisi-porte:hover img{transform:none}
}

/* ---------- L'emplacement partenaire ----------
   Le cadre porte les dimensions du visuel avant qu'il n'arrive : sans
   cela la page saute sous le doigt au chargement de l'image, et le
   lecteur perd sa ligne. Sur un téléphone, un visuel plus large que la
   colonne se réduit sans déborder ni forcer de défilement latéral. */
.cuisi-partenaire{margin:var(--sp-6) auto;padding:0 var(--sp-4);
  max-width:var(--col);text-align:center}
.cuisi-partenaire__mot{margin:0 0 var(--sp-2);font-size:11px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);opacity:.7}
.cuisi-partenaire__lien{display:block;margin:0 auto;
  width:min(100%, calc(var(--l) * 1px));
  aspect-ratio:var(--l) / var(--h);
  border-radius:var(--r-s);overflow:hidden;background:var(--card)}
.cuisi-partenaire__lien img{display:block;width:100%;height:100%;object-fit:contain}
/* Le pavé publicitaire de l'accueil garde le dessin des autres pavés,
   mais reste neutre : ni orange, ni bleu, pour qu'on ne le prenne pas
   pour une recommandation d'Allison. */
.cuisi-pave--pub{background:var(--card);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line)}
.cuisi-pave--pub span{color:var(--ink-3)}
.cuisi-pave--pub .cuisi-pave__genre{color:var(--ink-3);opacity:.8}