/* ============================================================
   Gabarit de recette Cuisinovores
   Chargé automatiquement par WP Recipe Maker avec le gabarit.
   Tous les sélecteurs sont préfixés .cuisi pour ne jamais entrer
   en conflit avec Porto ni avec le CSS du plugin.
   ============================================================ */

.cuisi{
  --bg:#FBF9F6; --card:#FFFFFF;
  --chrome:#252D44; --chrome-fg:#F4F2EE;
  --ink:#252D44; --ink-2:#525A70; --ink-3:#5F6779;
  --line:#EAE5DD; --line-2:#8A8279;
  --accent:#AA5A0B; --cta-bg:#F09948; --cta-fg:#252D44; --accent-soft:#FDF0E2;
  --green-fg:#4A6132; --green-bg:#EBEFDF;
  --shadow-1:0 1px 2px rgba(37,45,68,.07);
  --shadow-2:0 14px 34px -16px rgba(37,45,68,.34);
  --t-xl:22px; --t-lg:20px; --t-md:17px; --t-base:16px; --t-s:15px; --t-xs:14px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:18px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-s:8px; --r-m:12px; --r-l:20px; --r-pill:999px;
  --tap:44px; --dur-1:140ms; --dur-2:260ms; --ease:cubic-bezier(.2,.7,.3,1);

  color:var(--ink);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--t-base);line-height:1.6;text-wrap:pretty;
}
/* Pas de bascule automatique sur le réglage du système : le reste du site
   n'a pas encore de thème sombre, et la fiche se retrouvait en encre claire
   sur une page blanche. Le sombre ne s'active que sur demande explicite,
   c'est-à-dire quand tout le site saura le faire. */
html[data-theme="dark"] .cuisi{
  --bg:#10141F; --card:#1C2233; --chrome:#252D44; --chrome-fg:#EDEFF4;
  --ink:#EDEFF4; --ink-2:#AEB6C9; --ink-3:#8F98AE;
  --line:#2A3247; --line-2:#78829E;
  --accent:#F5A960; --accent-soft:#26314A;
  --green-fg:#C3D0A0; --green-bg:#292C1E;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 16px 36px -18px rgba(0,0,0,.8);
}

.cuisi *,.cuisi *::before,.cuisi *::after{box-sizing:border-box}
.cuisi h2,.cuisi h3,.cuisi h4{margin:0;line-height:1.15;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.cuisi p{margin:0 0 var(--sp-3)}
.cuisi ul,.cuisi ol{margin:0;padding:0;list-style:none}
.cuisi button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.cuisi a{color:var(--accent)}
.cuisi img{display:block;max-width:100%;height:auto}
.cuisi :focus-visible{outline:3px solid var(--cta-bg);outline-offset:2px;border-radius:var(--r-s)}

.cuisi-sec{margin-bottom:var(--sp-6)}
/* Le filet orange descend dix pixels sous le titre. Avec var(--sp-4) il ne
   restait que huit pixels avant le bloc suivant, et le trait semblait lui
   appartenir plutôt qu'au titre. */
.cuisi-sec > h2{font-size:var(--t-xl);margin-bottom:var(--sp-5);position:relative}
.cuisi-entete{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.cuisi-entete h2{font-size:var(--t-xl);position:relative}
.cuisi-groupe{font-size:var(--t-md);margin:var(--sp-4) 0 var(--sp-2);color:var(--ink-2)}
.cuisi-indice{font-size:var(--t-xs);color:var(--ink-3);margin:var(--sp-3) 0 0}
.cuisi-legal{font-size:var(--t-xs);color:var(--ink-3);margin:var(--sp-2) 0 0}

/* Filet d'accent sous les titres, tracé de gauche à droite */
.cuisi-sec > h2::after,.cuisi-entete h2::after{
  content:'';position:absolute;left:0;bottom:-7px;width:32px;height:3px;
  border-radius:2px;background:var(--cta-bg);
}

/* ---------- Repères ---------- */
.cuisi-reperes{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin:0}
.cuisi-repere{border:1px solid var(--line-2);border-radius:var(--r-m);padding:10px var(--sp-3)}
.cuisi-repere dt{font-size:var(--t-xs);color:var(--ink-3);margin-bottom:2px}
.cuisi-repere dd{margin:0;font-size:var(--t-md);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cuisi-euro{letter-spacing:1px}
.cuisi-euro i{font-style:normal;color:var(--line-2)}
.cuisi-euro b{color:var(--accent)}

/* ---------- Régimes ---------- */
.cuisi-regimes{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
/* Ce sont des liens vers le catalogue filtré. La cible fait au moins
   vingt-quatre pixels de haut, le minimum exigé pour un doigt, sans grossir
   la pastille : c'est le padding qui monte, pas le texte. */
.cuisi-regime{display:inline-flex;align-items:center;min-height:26px;
  background:var(--green-bg);color:var(--green-fg);border-radius:var(--r-s);
  padding:6px 10px;font-size:var(--t-xs);font-weight:600;
  text-decoration:none;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.cuisi-regime:hover,.cuisi-regime:focus-visible{
  background:var(--green-fg);color:var(--green-bg)}

/* ---------- Chapô ---------- */
/* Couleurs posées explicitement partout : dans un thème existant, tout ce
   qui repose sur l'héritage finit par être repeint par le thème. */
.cuisi-chapo{margin:var(--sp-5) auto 0;max-width:56ch;text-align:center;
  font-size:19px;line-height:1.55}
.cuisi-chapo,.cuisi-chapo p,.cuisi-chapo span{color:var(--ink)}
.cuisi-chapo p{margin:0;font-size:19px;line-height:1.55}
.cuisi-chapo::before{content:'';display:block;width:44px;height:3px;border-radius:2px;
  background:var(--cta-bg);margin:0 auto var(--sp-4)}

/* ---------- Portions ---------- */
.cuisi-portions{display:flex;align-items:center;border:1px solid var(--ink);
  border-radius:var(--r-m);overflow:hidden;flex:none}
.cuisi-portions button{width:var(--tap);height:var(--tap);display:grid;place-items:center;
  font-size:20px;font-weight:800;transition:transform var(--dur-1) var(--ease)}
.cuisi-portions button:disabled{opacity:.3;cursor:not-allowed}
.cuisi-portions button:active{transform:scale(.9)}
.cuisi-portions output{min-width:34px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Une ligne d'ingrédient ----------
   Trois colonnes : la coche, la quantité, le nom.

   Elle était en flex, et un nom trop long pour tenir à côté de sa quantité
   passait à la ligne suivante collé au bord gauche, sous la coche : « 250 g »
   restait seul en haut et « de nouilles de patates douces » commençait sous
   le rond. En grille, le nom occupe sa colonne et se replie à l'intérieur.

   Reste que la colonne des quantités doit avoir la MÊME largeur sur toutes
   les lignes, sinon les noms partent en escalier ; et chaque ligne étant sa
   propre grille, « auto » la fait calculer sa largeur dans son coin. On la
   borne donc entre 64 et 124 pixels : le « 1fr » voisin l'oblige à prendre sa
   largeur maximale, et toutes les lignes s'alignent. Elle est parfois plus
   large que nécessaire, c'est le prix de l'alignement sans subgrid. */
.cuisi-ingredients li button{width:100%;display:grid;
  grid-template-columns:auto minmax(64px,124px) minmax(0,1fr);
  align-items:baseline;column-gap:.45em;text-align:left;padding:11px 0;
  min-height:var(--tap);border-radius:var(--r-s);
  transition:background var(--dur-1) var(--ease)}

/* LE PRIX DE L'ALIGNEMENT, RENDU.

   Ce que dit le commentaire ci-dessus était vrai tant que chaque ligne était
   une grille isolée : il fallait figer la colonne des quantités, donc la
   prendre assez large pour la plus longue. Résultat, « 2 aubergines » laissait
   cent pixels de vide au milieu, et le nom se repliait dans une colonne de
   170 pixels alors qu'il y avait la place.

   Subgrid fait ce qu'il fallait : les trois colonnes sont définies une fois,
   sur la liste, et chaque ligne s'y accroche. Elles s'alignent donc toutes
   sur la plus longue quantité RÉELLE de cette recette, pas sur une valeur
   décidée d'avance.

   L'ancienne règle reste au-dessus : un navigateur qui ne connaît pas subgrid
   la garde, et retrouve l'affichage d'avant. */
@supports (grid-template-columns: subgrid) {
  .cuisi-ingredients{display:grid;
    grid-template-columns:auto minmax(48px,max-content) minmax(0,1fr)}
  .cuisi-ingredients li,
  .cuisi-ingredients li button{grid-column:1 / -1;
    display:grid;grid-template-columns:subgrid}
}
.cuisi-ingredients .cuisi-coche{margin-right:var(--sp-3)}
.cuisi-coche{width:20px;height:20px;border:2px solid var(--line-2);border-radius:50%;
  align-self:center;display:grid;place-items:center;font-size:12px;color:var(--bg);
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.cuisi-coche-marque{transform:scale(0);transition:transform 240ms cubic-bezier(.34,1.56,.64,1)}
.cuisi-quantite{font-size:18px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.cuisi-nom{font-size:var(--t-base);color:var(--ink)}
/* Certains ingrédients sont des liens posés par le plugin. Ils gardent une
   affordance discrète : l'accent reste réservé aux quantités, sinon les deux
   se confondent et la ligne devient illisible. */
.cuisi-nom a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--line-2);text-underline-offset:3px}
.cuisi-nom a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.cuisi-nom em{font-style:normal;color:var(--ink-3);font-size:var(--t-s)}
.cuisi-nom-txt{position:relative;display:inline}
.cuisi-nom-txt::after{content:'';position:absolute;left:0;right:0;top:.62em;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 240ms var(--ease)}
.cuisi-ingredients [aria-pressed="true"] .cuisi-coche{background:var(--accent);border-color:var(--accent)}
.cuisi-ingredients [aria-pressed="true"] .cuisi-coche-marque{transform:scale(1)}
.cuisi-ingredients [aria-pressed="true"] .cuisi-nom-txt::after{transform:scaleX(1)}
.cuisi-ingredients [aria-pressed="true"] .cuisi-quantite,
.cuisi-ingredients [aria-pressed="true"] .cuisi-nom{opacity:.45}
@keyframes cuisi-maj{0%{opacity:.25;transform:translateY(-3px)}100%{opacity:1;transform:none}}
.cuisi-quantite.cuisi-change{animation:cuisi-maj 260ms var(--ease)}

/* ---------- Ustensiles ---------- */
.cuisi-ustensiles li{border-bottom:1px solid var(--line)}
.cuisi-ustensiles a,.cuisi-sans-lien{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);min-height:var(--tap);padding:10px 0;color:var(--ink);text-decoration:none}
.cuisi-ustensiles svg{flex:none;stroke:var(--accent);fill:none}

/* ---------- Temps ---------- */
.cuisi-temps{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;margin:0}
.cuisi-temps div{padding:var(--sp-3);border-bottom:1px solid var(--line)}
.cuisi-temps div:nth-child(odd){border-right:1px solid var(--line)}
.cuisi-temps div:nth-last-child(-n+2){border-bottom:0}
.cuisi-temps dt{font-size:var(--t-xs);color:var(--ink-3)}
.cuisi-temps dd{margin:0;font-size:var(--t-md);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.cuisi-temps .cuisi-total dd{color:var(--accent)}

/* ---------- Étapes ---------- */
.cuisi-etapes li{display:grid;grid-template-columns:40px 1fr;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line);align-items:center}
.cuisi-etapes li:last-child{border-bottom:0}
.cuisi-no{font-size:26px;font-weight:800;color:var(--accent);line-height:1.1;
  text-align:center;font-variant-numeric:tabular-nums}
.cuisi-etapes h4{font-size:var(--t-base);margin-bottom:2px;color:var(--ink)}
.cuisi-etapes p{margin:0;font-size:var(--t-md);color:var(--ink)}
.cuisi-etape-image{margin-top:var(--sp-3)}
.cuisi-etape-image img{border-radius:var(--r-m)}

/* ---------- Conseils ---------- */
/* ---------- Conseils ----------
   Les 392 recettes en ont, et certaines font deux mille signes : c'était un
   pavé crème de huit cents pixels de haut, en petit texte serré, sans rien
   pour accrocher l'œil.

   Trois choses le remettent d'aplomb, sans toucher au texte d'Allison.

   D'abord la taille : le conseil se lisait en quinze quand le reste de la
   fiche se lit en seize. Un encadré n'est pas une note de bas de page.

   Ensuite l'air : ses paragraphes tiennent chacun un conseil distinct, ils
   ont besoin d'être séparés pour se lire comme une liste et non comme un
   bloc.

   Enfin la structure, qui existe déjà dans son texte sans se voir. Elle
   commence presque toujours son conseil par une amorce en gras, « Montage : »,
   « Pour la cuisson : ». En la passant à la couleur d'accent, on rend visible
   le plan qu'elle a écrit, sans ajouter un mot.

   La barre à gauche remplace le remplissage plein : elle signale l'encadré
   sans peser huit cents pixels de crème. */
.cuisi-conseils{background:var(--accent-soft);border-radius:var(--r-m);
  border-left:3px solid var(--cta-bg);
  padding:var(--sp-4) var(--sp-5);max-width:68ch}
.cuisi-conseils,.cuisi-conseils p,.cuisi-conseils span{color:var(--ink)}
.cuisi-conseils p{margin:0 0 var(--sp-3);font-size:var(--t-base);line-height:1.6}
.cuisi-conseils p:last-child{margin:0}
/* L'amorce en gras devient le titre du conseil. Elle est parfois enveloppée
   dans un span coloré par l'ancien éditeur : la règle vise le gras lui-même,
   qui l'emporte alors sur la couleur héritée du span. */
.cuisi-conseils strong,.cuisi-conseils b{color:var(--accent);font-weight:800}
/* Un paragraphe qui ouvre un nouveau conseil respire davantage. Les
   navigateurs qui ignorent :has() perdent l'espace, rien d'autre. */
.cuisi-conseils p:has(strong):not(:first-child){margin-top:var(--sp-4)}
.cuisi-conseils ul,.cuisi-conseils ol{margin:0 0 var(--sp-3);padding-left:var(--sp-5);
  font-size:var(--t-base);line-height:1.6}
.cuisi-conseils li{margin-bottom:var(--sp-2)}
.cuisi-conseils a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  overflow-wrap:break-word}

/* ---------- Lien ingrédients / étapes ---------- */
.cuisi-lien{background:none;color:inherit;cursor:default;border-radius:4px;
  box-shadow:inset 0 -2px 0 var(--accent-soft);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             box-shadow var(--dur-1) var(--ease)}
.cuisi-lien.cuisi-actif{background:var(--accent-soft);color:var(--accent);font-weight:600;
  box-shadow:0 0 0 4px var(--accent-soft)}
.cuisi-ingredients li.cuisi-actif button{background:var(--accent-soft)}
.cuisi-ingredients li.cuisi-actif .cuisi-nom{font-weight:600}

/* ---------- Apparitions ---------- */
.cuisi-anim .cuisi-reveal{opacity:0;transform:translateY(12px)}
.cuisi-anim .cuisi-reveal.cuisi-vu{opacity:1;transform:none;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.cuisi-anim .cuisi-reveal .cuisi-cascade > *{opacity:0;transform:translateY(8px)}
.cuisi-anim .cuisi-reveal.cuisi-vu .cuisi-cascade > *{opacity:1;transform:none;
  transition:opacity 300ms var(--ease) calc(var(--i,0) * 35ms),
             transform 300ms var(--ease) calc(var(--i,0) * 35ms)}
.cuisi-anim .cuisi-reveal > h2::after,
.cuisi-anim .cuisi-reveal .cuisi-entete h2::after{transform:scaleX(0);transform-origin:left}
.cuisi-anim .cuisi-reveal.cuisi-vu > h2::after,
.cuisi-anim .cuisi-reveal.cuisi-vu .cuisi-entete h2::after{
  transform:scaleX(1);transition:transform 420ms var(--ease) 140ms}
/* Sans JavaScript, le barré reste un vrai barré. */
html:not(.cuisi-anim) .cuisi-ingredients [aria-pressed="true"] .cuisi-nom{text-decoration:line-through}

/* ---------- Bureau : les ingrédients restent à l'écran ---------- */
@media (min-width:1024px){
  .cuisi-cuisine{display:grid;grid-template-columns:minmax(280px,340px) 1fr;
    gap:var(--sp-7);align-items:start}
  .cuisi-colonne{position:sticky;top:var(--sp-5)}
  .cuisi-etapes p{font-size:18px}
}

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

/* ---------- Grilles sans case vide ----------
   Les repères et les temps étaient figés sur deux colonnes. Avec trois
   éléments, la seconde rangée laissait un trou, et sur grand écran chaque
   case s'étirait sur la moitié de la fiche pour y écrire « 30 min ».
   À partir de la tablette, tout tient sur une rangée, quel qu'en soit le
   nombre, et le bloc est borné pour rester lisible. */
@media (min-width:768px){
  .cuisi-reperes{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);max-width:760px}

  .cuisi-temps{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);max-width:620px}
  .cuisi-temps div{border-bottom:0;border-right:1px solid var(--line)}
  .cuisi-temps div:nth-child(odd){border-right:1px solid var(--line)}
  .cuisi-temps div:last-child{border-right:0}
}

/* L'unité est dans le sélecteur : « 4 personnes » se lit d'un bloc, et le
   nombre n'est plus répété sur une ligne en dessous. */
.cuisi-portions__val{display:inline-flex;align-items:baseline;gap:5px;
  padding:0 var(--sp-2);white-space:nowrap}
.cuisi-portions output{min-width:auto}
.cuisi-portions__unite{font-size:var(--t-s);font-weight:600;color:var(--ink-3)}