/* ============================================================
   CUISINOVORES : le châssis commun.
   Jetons de couleur, en-tête, menu, pied de page, boutons,
   fenêtre de compte, message passager.

   Chargée sur toutes les pages refaites. Les jetons sont posés sur
   body et non sur :root : ils ne peuvent ainsi entrer en conflit avec
   ceux de Porto ou d'un greffon.

   Thème sombre : il ne s'active que sur choix explicite du visiteur,
   jamais d'après le réglage du système. Le reste du site est encore
   en clair, un basculement automatique donnerait un site à deux têtes.
   ============================================================ */

/* ---------- Manrope ----------
   Servie par le site lui-même, pas par Google. Deux raisons : un appel à
   fonts.gstatic.com transmet l'adresse IP du visiteur à un tiers, ce que la
   CNIL sanctionne, et il ajoute une connexion réseau avant le premier texte.
   Un seul fichier couvre toutes les graisses de 400 à 800 : 25 Ko.
   Manrope est sous licence SIL Open Font, l'hébergement est autorisé. */
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(polices/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(polices/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}

body.cuisi-chrome{
  --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;
  --star-on:#F09948; --star-off:#8B8F9C;
  --veil:rgba(19,24,38,.6);
  --shadow-1:0 1px 2px rgba(37,45,68,.07);
  --shadow-2:0 14px 34px -16px rgba(37,45,68,.34);
  --shadow-3:0 18px 40px -14px rgba(37,45,68,.45);
  --scrim:linear-gradient(to top,rgba(19,24,38,.86) 0%,rgba(19,24,38,.42) 34%,rgba(19,24,38,0) 68%);

  --t-3xl:36px; --t-2xl:28px; --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; --sp-8:64px;
  --r-s:8px; --r-m:12px; --r-l:20px; --r-sheet:28px; --r-pill:999px;
  --tap:44px; --hdr:60px; --col:1240px;
  --dur-1:140ms; --dur-2:260ms; --ease:cubic-bezier(.2,.7,.3,1);
  color-scheme:light;
}
html[data-theme="dark"] body.cuisi-chrome{
  --bg:#10141F; --card:#1C2233; --chrome:#252D44; --chrome-fg:#F4F2EE;
  --ink:#EDEFF4; --ink-2:#AEB6C9; --ink-3:#8F98AE;
  --line:#2A3247; --line-2:#78829E;
  --accent:#F5A960; --cta-bg:#F09948; --cta-fg:#252D44; --accent-soft:#26314A;
  --green-fg:#C3D0A0; --green-bg:#292C1E; --star-off:#79839B;
  --veil:rgba(6,9,16,.72);
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 16px 36px -18px rgba(0,0,0,.8);
  --shadow-3:0 18px 40px -14px rgba(0,0,0,.85);
  --scrim:linear-gradient(to top,rgba(11,15,24,.94) 0%,rgba(11,15,24,.64) 45%,rgba(11,15,24,0) 100%);
  color-scheme:dark;
}

/* ---------- Remises à zéro, limitées aux pages refaites ---------- */
body.cuisi-chrome{
  margin:0;background:var(--bg);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;-webkit-font-smoothing:antialiased;
}
body.cuisi-chrome *,body.cuisi-chrome *::before,body.cuisi-chrome *::after{box-sizing:border-box}

/* Ces remises à zéro sont enveloppées dans :where(), qui annule toute leur
   spécificité. Sans cela « body.cuisi-chrome img » pèse une classe et un
   élément, et l'emportait sur la hauteur donnée au logo ou à la photo de la
   carte autrice, pourtant visées par une classe. Le garde-fou reste entier :
   une image sans règle propre ne peut plus être étirée par son attribut
   height, ce qui déformait le premier écran des recettes. */
:where(body.cuisi-chrome img){display:block;max-width:100%;height:auto}
:where(body.cuisi-chrome button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(body.cuisi-chrome a){color:var(--accent);text-decoration:none}
:where(body.cuisi-chrome h1,body.cuisi-chrome h2,body.cuisi-chrome h3){
  margin:0;line-height:1.12;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
:where(body.cuisi-chrome ul,body.cuisi-chrome ol){margin:0;padding:0;list-style:none}
:where(body.cuisi-chrome input,body.cuisi-chrome select){font:inherit}
body.cuisi-chrome :focus-visible{outline:3px solid var(--cta-bg);outline-offset:2px;border-radius:var(--r-s)}

/* Porto pose sa propre police sur les titres et les champs. Une déclaration
   directe l'emporte toujours sur l'héritage, quelle que soit la spécificité :
   il faut donc en poser une nous aussi, sur les pages où Porto reste chargé. */
body.cuisi-chrome h1,body.cuisi-chrome h2,body.cuisi-chrome h3,
body.cuisi-chrome h4,body.cuisi-chrome h5,body.cuisi-chrome h6,
body.cuisi-chrome p,body.cuisi-chrome li,body.cuisi-chrome blockquote,
body.cuisi-chrome a,body.cuisi-chrome b,body.cuisi-chrome strong,
body.cuisi-chrome span,body.cuisi-chrome button,
body.cuisi-chrome input,body.cuisi-chrome select,body.cuisi-chrome output{font-family:inherit}

/* Le texte réservé aux lecteurs d'écran. « cuisi-sr » est le nôtre ;
   « screen-reader-text » est celui de WordPress, que le noyau et les
   extensions posent partout sans jamais fournir la règle qui le cache :
   c'est au thème de le faire. Porto s'en chargeait, le nouveau thème l'avait
   oublié, et les libellés de consentement de Complianz s'affichaient en
   clair sur la politique de cookies, un caractère par ligne faute de place. */
.cuisi-sr,.screen-reader-text{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Sauf au clavier : un lien d'évitement doit se montrer quand on l'atteint. */
.screen-reader-text:focus{position:static;width:auto;height:auto;clip-path:none;
  padding:12px 18px;background:var(--cta-bg);color:var(--cta-fg);font-weight:800;
  border-radius:var(--r-s);z-index:100}
.cuisi-gouttiere{padding-inline:max(var(--sp-4), calc((100% - var(--col)) / 2))}

/* Le lien d'évitement, invisible tant qu'on n'y arrive pas au clavier. */
.cuisi-saut{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
  background:var(--cta-bg);color:var(--cta-fg);font-weight:800;border-radius:0 0 var(--r-s) 0}
.cuisi-saut:focus{left:0}

/* ---------- En-tête ---------- */
.cuisi-hdr{
  position:sticky;top:0;z-index:30;height:var(--hdr);
  background:var(--chrome);color:var(--chrome-fg);
  display:flex;align-items:center;gap:var(--sp-3);
}
/* La barre d'administration, quand on est connecté. Elle ne se comporte pas
   de la même façon selon la largeur, et l'en-tête doit suivre :

     jusqu'à 600 px  elle est en position absolute, donc elle défile et
                     disparaît. L'en-tête se colle tout en haut, sinon il
                     reste un trou de quarante-six pixels sous lequel on
                     voit passer la page.
     601 à 782 px    elle est fixe et haute de quarante-six pixels.
     à partir de 783 elle est fixe et haute de trente-deux.

   C'est la première règle qui manquait : sur téléphone, c'est-à-dire pour
   la quasi-totalité des visiteurs connectés, l'en-tête flottait sous un
   trou vide. */
.admin-bar .cuisi-hdr{top:0}
@media (min-width:601px){ .admin-bar .cuisi-hdr{top:46px} }
@media (min-width:783px){ .admin-bar .cuisi-hdr{top:32px} }

.cuisi-hdr__marque{display:flex;align-items:center;flex:none}
.cuisi-hdr__logo{height:27px;width:auto;flex:none}
.cuisi-hdr__nav{display:none;font-size:var(--t-s);font-weight:600}
.cuisi-hdr__nav > ul{display:flex;gap:var(--sp-5)}
/* Les entrées occupent toute la hauteur de la barre : le déroulant se pose
   ainsi sous elle, et non par-dessus. */
.cuisi-hdr__nav > ul > li{display:flex;align-items:center;height:var(--hdr)}
.cuisi-hdr__nav li{position:relative}
.cuisi-hdr__nav a,.cuisi-hdr__nav button{color:var(--chrome-fg);opacity:.85;
  display:inline-flex;align-items:center;gap:5px;font:inherit}
.cuisi-hdr__nav a:hover,.cuisi-hdr__nav button:hover{opacity:1;color:var(--chrome-fg)}

/* Un déroulant pour les entrées qui n'ont pas de page à elles. Il s'ouvre au
   survol comme au clavier : :focus-within le rend accessible sans script. */
.cuisi-hdr__nav li > ul{
  position:absolute;top:100%;left:calc(var(--sp-3) * -1);z-index:5;min-width:230px;
  padding:var(--sp-2) 0;background:var(--chrome);border-radius:0 0 var(--r-m) var(--r-m);
  box-shadow:var(--shadow-3);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),
             visibility 0s linear var(--dur-1);
}
.cuisi-hdr__nav li:hover > ul,
.cuisi-hdr__nav li:focus-within > ul{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.cuisi-hdr__nav li > ul a{display:flex;padding:9px var(--sp-4);opacity:.85;white-space:nowrap}
.cuisi-hdr__nav li > ul a:hover{opacity:1;background:rgba(244,242,238,.1)}
.cuisi-hdr__nav li:hover > a svg,
.cuisi-hdr__nav li:focus-within > a svg{transform:rotate(180deg)}
.cuisi-hdr__nav a svg{transition:transform var(--dur-1) var(--ease);flex:none}

/* Dans le panneau du téléphone, le groupe est un simple intertitre : ses
   entrées sont listées dessous, sans niveau à ouvrir. */
.cuisi-menu__groupe{margin:var(--sp-3) 0 0;font-size:var(--t-xs);font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cta-bg)}
.cuisi-hdr__search{display:none;align-items:center;gap:10px;height:var(--tap);flex:1;max-width:320px;
  padding:0 var(--sp-4);border-radius:var(--r-pill);background:rgba(244,242,238,.12);color:var(--chrome-fg)}
.cuisi-hdr__search input{flex:1;min-width:0;border:0;background:none;outline:none;
  color:var(--chrome-fg);font-size:var(--t-s)}
.cuisi-hdr__search input::placeholder{color:#C6C9D2}
.cuisi-hdr__droite{margin-left:auto;display:flex;align-items:center;gap:var(--sp-1)}
.cuisi-iconbtn{flex:none;width:var(--tap);height:var(--tap);display:grid;place-items:center;
  border-radius:var(--r-pill);color:var(--chrome-fg);transition:transform var(--dur-1) var(--ease)}
.cuisi-iconbtn:active{transform:scale(.9)}

/* ---------- Menu du téléphone ---------- */
.cuisi-hdr__burger{margin-left:calc(var(--sp-3) * -1)}
.cuisi-menu{
  position:fixed;left:0;right:0;top:var(--hdr);z-index:29;
  background:var(--chrome);color:var(--chrome-fg);
  padding:0 var(--sp-4) var(--sp-3);
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility 0s linear var(--dur-2);
  box-shadow:var(--shadow-3);
}
.admin-bar .cuisi-menu{top:calc(var(--hdr) + 46px)}
@media (min-width:783px){ .admin-bar .cuisi-menu{top:calc(var(--hdr) + 32px)} }
.cuisi-menu[data-on="1"]{transform:none;opacity:1;visibility:visible;transition-delay:0s}
.cuisi-menu a{display:flex;align-items:center;justify-content:space-between;
  min-height:52px;color:var(--chrome-fg);font-weight:600;font-size:var(--t-md);
  border-bottom:1px solid rgba(244,242,238,.14)}
.cuisi-menu a:last-child{border-bottom:0}
.cuisi-menu .cuisi-arw{color:var(--cta-bg)}

/* ---------- Boutons ---------- */
.cuisi-cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-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;
  transition:transform var(--dur-1) var(--ease)}
.cuisi-cta:hover,.cuisi-cta:focus{color:var(--cta-fg)}
.cuisi-cta:active{transform:scale(.97)}
.cuisi-cta--lg{min-height:52px;font-size:var(--t-base);padding:0 var(--sp-5)}
.cuisi-ghost{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--ink);
  font-size:var(--t-s);font-weight:600;background:var(--card)}
.cuisi-ghost:hover,.cuisi-ghost:focus{color:var(--ink)}
.cuisi-arw{display:inline-block;transition:transform 200ms var(--ease)}
.cuisi-arw-bas{flex:none;color:var(--accent);transition:transform 200ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cuisi-cta:hover .cuisi-arw,.cuisi-ghost:hover .cuisi-arw{transform:translateX(4px)}
  .cuisi-ghost:hover .cuisi-arw-bas{transform:translateY(3px)}
}

/* ---------- Pied de page ---------- */
.cuisi-pied{margin-top:var(--sp-7);background:var(--chrome);color:var(--chrome-fg);text-align:center;
  padding:var(--sp-5) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom))}
.cuisi-pied__logo{margin:0 auto var(--sp-3);width:172px;height:auto}
.cuisi-pied__mot{margin:0 auto var(--sp-3);max-width:46ch;font-size:var(--t-xs);opacity:.7}
.cuisi-pied__sociaux{display:flex;justify-content:center;gap:var(--sp-1)}
.cuisi-pied__sociaux a{width:var(--tap);height:var(--tap);display:grid;place-items:center;
  color:var(--chrome-fg);opacity:.8;border-radius:var(--r-pill)}
.cuisi-pied__sociaux a:hover{opacity:1;color:var(--chrome-fg)}
.cuisi-pied__sociaux svg{fill:currentColor}
.cuisi-pied__liens{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--sp-4)}
.cuisi-pied__liens a{color:var(--chrome-fg);opacity:.8;font-size:var(--t-xs);
  min-height:38px;display:inline-flex;align-items:center;padding:0 2px}
.cuisi-pied__liens a:hover{opacity:1;color:var(--chrome-fg)}
.cuisi-pied__copy{margin:var(--sp-2) 0 0;font-size:11px;opacity:.45}

/* ---------- Les listes de recettes, en bas de chaque page ----------
   Seize liens vers les seize pages de listes. Ils tiennent en deux ou trois
   lignes, séparés du reste du pied par un trait. Discrets pour le lecteur,
   décisifs pour un moteur : sans eux, ces pages ne reçoivent aucun lien du
   site et restent au fond du classement. */
.cuisi-pied__listes{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--sp-1) var(--sp-3);max-width:70ch;margin:0 auto var(--sp-4);
  padding-bottom:var(--sp-4);border-bottom:1px solid rgba(244,242,238,.14)}
.cuisi-pied__listes a{color:var(--chrome-fg);opacity:.62;font-size:var(--t-xs);
  min-height:32px;display:inline-flex;align-items:center}
.cuisi-pied__listes a:hover{opacity:1;color:var(--chrome-fg);text-decoration:underline}

/* ---------- Message passager ---------- */
.cuisi-toast{position:fixed;left:50%;bottom:120px;transform:translate(-50%,8px);z-index:60;
  background:var(--ink);color:var(--bg);border-radius:var(--r-pill);padding:11px var(--sp-4);
  font-size:var(--t-xs);font-weight:600;opacity:0;pointer-events:none;max-width:calc(100% - 32px);
  text-align:center;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.cuisi-toast[data-on="1"]{opacity:1;transform:translate(-50%,0)}

/* ---------- Fenêtre de compte ---------- */
.cuisi-veil{position:fixed;inset:0;background:var(--veil);opacity:0;visibility:hidden;z-index:45;
  transition:opacity var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
.cuisi-veil[data-on="1"]{opacity:1;visibility:visible;transition-delay:0s}
.cuisi-modal{position:fixed;left:50%;bottom:0;transform:translate(-50%,14px);width:100%;max-width:440px;
  background:var(--card);border-radius:var(--r-l) var(--r-l) 0 0;padding:var(--sp-5) var(--sp-4);
  padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom));opacity:0;visibility:hidden;z-index:50;
  transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
.cuisi-modal[data-on="1"]{transform:translate(-50%,0);opacity:1;visibility:visible;transition-delay:0s,0s,0s}
.cuisi-modal h2{font-size:var(--t-xl);margin-bottom:var(--sp-2)}
.cuisi-modal p{margin:0 0 var(--sp-4);font-size:var(--t-s);color:var(--ink-2)}
.cuisi-modal .cuisi-cta,.cuisi-modal .cuisi-ghost{width:100%;margin-bottom:var(--sp-2)}
.cuisi-plus-tard{width:100%;min-height:var(--tap);color:var(--ink-3);font-weight:600;font-size:var(--t-s)}
/* Une fenêtre plus haute que l'écran ne se referme plus : on la laisse
   défiler chez elle plutôt que de déborder sous le bord. */
.cuisi-modal{max-height:calc(100svh - 12px);overflow-y:auto;overscroll-behavior:contain}
.cuisi-modal .cuisi-avantages{margin-bottom:var(--sp-3)}
.cuisi-modal .cuisi-modal__note{margin:0 0 var(--sp-4);font-size:var(--t-xs);color:var(--ink-3)}

/* ---------- Les trois avantages du compte ----------
   Écrits ici et non dans la feuille de l'accueil : la même liste sert au
   panneau de la page d'accueil et à la fenêtre du pied de page, qui, elle,
   existe sur toutes les pages. */
.cuisi-avantages{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.cuisi-avantages li{display:flex;gap:var(--sp-3);font-size:var(--t-s);color:var(--ink-2)}
.cuisi-ic{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent);font-size:15px}
/* text-wrap:balance repartit les lignes d'un titre qui en prend deux.
   « Vos preferences et contraintes memorisees » se coupait apres « et »,
   laissant une conjonction seule en fin de ligne : 224 pixels puis 89.
   Reparti, cela donne 136 et 177, et plus aucun mot orphelin. Les
   navigateurs qui ne connaissent pas la propriete coupent comme avant. */
.cuisi-avantages b{display:block;color:var(--ink);text-wrap:balance}

/* ---------- Bureau ---------- */
@media (min-width:1024px){
  /* Le champ de recherche était collé à la dernière entrée du menu, et tout
     se tassait à gauche. Il rejoint la droite, avec les deux boutons, et la
     barre respire : logo, menu, vide, recherche, boutons. */
  .cuisi-hdr{gap:var(--sp-6)}
  .cuisi-hdr__nav,.cuisi-hdr__search{display:flex}
  .cuisi-hdr__nav > ul{gap:var(--sp-6)}
  .cuisi-hdr__search{margin-left:auto;flex:0 1 320px}
  .cuisi-hdr__droite{margin-left:0;gap:var(--sp-2)}
  .cuisi-hdr__burger{display:none}
  .cuisi-menu{display:none}
}

@media (prefers-reduced-motion:reduce){
  body.cuisi-chrome *,body.cuisi-chrome *::before,body.cuisi-chrome *::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Le bandeau de consentement ----------
   Complianz range son en-tête dans une grille qui centre le titre entre
   deux colonnes vides. Résultat : « Votre vie privée nous importe »
   commençait cent quarante pixels à droite du texte qui le suit, et se
   coupait en deux lignes sans raison. On ramène le titre sur la même
   marge que le message, et la croix reste à sa place, à droite.

   La feuille de Complianz est chargée après la nôtre : à spécificité
   égale, c est la sienne qui gagne. On double donc la classe, ce qui
   suffit à passer devant sans recourir à !important. */
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-header{
  grid-template-columns:1fr auto;align-items:start;gap:var(--sp-3)}
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-header .cmplz-title{
  grid-column:1;grid-row:1;text-align:left;margin:0;
  /* justify-self, pas seulement text-align : le titre est une case de
     grille, et Complianz la centre dans sa colonne. Aligner le texte à
     gauche ne sert à rien tant que la case elle-même reste au milieu. */
  justify-self:start;width:100%}
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-header .cmplz-close{
  grid-column:2;grid-row:1;margin:0}