/* Huilor — landing page
   The mockups carried their layout as inline styles and their hover states in
   a `style-hover` attribute that only their own JS understood. The layout is
   kept inline; everything that needed that JS lives here instead. */

/* Fonts, served from /fonts/site (SIL Open Font License). Signika and Nunito
   are variable: one file holds every weight. Latin subset only: French needs
   nothing more, and Arabic text falls back to the system font as before. */
@font-face { font-family: 'Signika'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/site/signika-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: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/site/nunito-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: 'Kaushan Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/site/kaushan-script-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; }

:root {
  --vert: #26603f;
  --vert-fonce: #1c2b20;
  --jaune: #ffd600;
  --creme: #f6f9ef;
  --vert-clair: #e9f1dc;
  --texte-doux: #5b6b5f;
}

*, *::before, *::after { box-sizing: border-box; }

/* Links and buttons that used to swap colours through `style-hover`. */
.lien-nav:hover { color: var(--vert) !important; }
.lien-pied:hover { color: var(--jaune) !important; }
.btn-vert:hover { background: var(--jaune) !important; color: var(--vert-fonce) !important; }
.btn-jaune:hover { background: #fff !important; color: var(--vert-fonce) !important; }
.carte:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, .16) !important; }
.carte:hover .carte-photo { transform: rotate(14deg) scale(1.05); }
.carte-titre:hover { color: var(--vert) !important; }

/* The mockups revealed blocks on scroll. Without JS they must still be
   visible, so the hidden state is only applied once the observer is running. */
.reveal.pret { opacity: 0; translate: 0 44px; }
.reveal.vu { opacity: 1; translate: 0 0; }
.reveal { transition: opacity .8s cubic-bezier(.2,.7,.2,1), translate .8s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.pret, .reveal.vu { opacity: 1; translate: none; transition: none; }
}

/* Range input, styled to the brand in both engines. */
input[type=range] { accent-color: var(--vert); }

/* Screen-reader-only, for labels the design shows as icons. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Corps d’un conseil : le HTML vient de l’éditeur du dashboard, déjà assaini. */
.prose-conseil { font-size: 17px; line-height: 1.75; color: #3f4a38; }
.prose-conseil > :first-child { margin-top: 0; }
.prose-conseil > :last-child { margin-bottom: 0; }
.prose-conseil p { margin: 0 0 1.1em; }
.prose-conseil h2,
.prose-conseil h3 { font-family: Signika, sans-serif; font-weight: 700; color: #1c2b20; line-height: 1.2; margin: 1.9em 0 .6em; }
.prose-conseil h2 { font-size: 28px; }
.prose-conseil h3 { font-size: 22px; }
.prose-conseil ul,
.prose-conseil ol { margin: 0 0 1.1em; padding-inline-start: 1.3em; }
.prose-conseil li { margin: .35em 0; }
.prose-conseil a { color: #26603f; text-decoration: underline; text-underline-offset: 2px; }
.prose-conseil blockquote { margin: 1.4em 0; padding: 2px 0 2px 18px; border-inline-start: 3px solid #ffd600; color: #5b6b5f; font-style: italic; }
.prose-conseil code { background: #e9f1dc; border-radius: 4px; padding: 1px 5px; font-size: .9em; }
.prose-conseil hr { border: 0; border-top: 1px solid #dfe8d2; margin: 2em 0; }
.prose-conseil table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; }
.prose-conseil th,
.prose-conseil td { border: 1px solid #dfe8d2; padding: 9px 12px; text-align: start; }
.prose-conseil th { background: #e9f1dc; font-family: Signika, sans-serif; font-weight: 700; color: #1c2b20; }
.prose-conseil mark { background: #ffe97a; padding: 0 2px; }
.prose-conseil img { max-width: 100%; height: auto; border-radius: 12px; }

/* Fiche recette — la maquette V4 pilotait ces colonnes en JS (ResizeObserver) ;
   des media queries font la même chose sans script. */
.fiche-hero { grid-template-columns: minmax(0, 1fr); }
.fiche-corps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.fiche-astuce { grid-template-columns: minmax(0, 1fr); }
.fiche-astuce img { justify-self: start; }

@media (min-width: 960px) {
    .fiche-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
    .fiche-corps { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; }
    .fiche-aside { position: sticky; top: 92px; }
    .fiche-astuce { grid-template-columns: minmax(0, 1fr) auto; }
    .fiche-astuce img { justify-self: end; }
}



/* ---------------------------------------------------------------------------
   Shared pieces. Form controls do not inherit the page font on their own; the
   recipe steps and ingredient lines are buttons, so without this they printed
   in the system face while every other page used Nunito.
   ------------------------------------------------------------------------- */
button, input, select, textarea { font-family: inherit; }

/* Phones paint a grey box over whatever link or button is tapped, which on
   the round recipe photos flashed just before the next page loaded. The press
   is acknowledged by the card itself instead. */
a, button, label, summary { -webkit-tap-highlight-color: transparent; }
.carte:active .carte-photo { transform: scale(.96); transition-duration: .15s; }

/* On a touch screen :hover sticks after a tap, leaving the photo turned. */
@media (hover: none) {
  .carte:hover { box-shadow: 0 10px 40px rgba(0, 0, 0, .07) !important; }
  .carte:hover .carte-photo { transform: none; }
  .carte:active .carte-photo { transform: scale(.96); }
}
[x-cloak] { display: none !important; }
.opacity-60 { opacity: .6; transition: opacity .2s; }

.titre-section { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.titre-section > span { font-family: 'Kaushan Script', cursive; font-size: 24px; color: #527030; }
.titre-section h2 { margin: 0; font-family: Signika, sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; color: var(--vert-fonce); text-wrap: balance; }
.titre-section img { width: 210px; max-width: 60%; height: auto; margin-top: 6px; }
.entete-logo img { width: auto; }

/* Header: logo, menu, and the V2 search bar. On a phone the search drops to
   its own full-width row, which is where a thumb expects it. */
.entete { position: sticky; top: 0; z-index: 40; background: #fff; box-shadow: 0 1px 0 rgba(28, 43, 32, .08); }
.entete-grille { max-width: 1320px; margin: 0 auto; padding: 10px 24px; display: grid; grid-template-columns: auto 1fr minmax(240px, 340px); align-items: center; gap: 24px; }
.entete-logo { display: flex; }
.entete-logo img { height: 66px; width: auto; display: block; }
.entete-nav { display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 34px); white-space: nowrap; font-family: Signika, sans-serif; font-weight: 700; font-size: clamp(14px, 1.2vw, 16px); text-transform: uppercase; }
.entete-recherche { display: flex; align-items: center; background: #f4f1ea; border-radius: 30px; padding: 4px 4px 4px 20px; min-width: 0; }
.entete-recherche input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 15px; color: #1e1d23; padding: 10px 0; }
.entete-recherche button { flex: none; width: 42px; height: 42px; border: none; border-radius: 50%; background: var(--jaune); color: #1e1d23; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.entete-recherche:focus-within { box-shadow: 0 0 0 2px var(--vert); }

/* Desktop: the wrapper steps aside and nav and search sit in the grid. */
.entete-menu { display: contents; }
.entete-burger { display: none; }

/* Phones and tablets: logo and burger; the menu opens as a panel below. */
@media (max-width: 960px) {
  /* 1fr then auto: the burger stays on the edge even while the open panel,
     which spans both columns, would otherwise widen the first one. */
  .entete-grille { grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; padding: 8px 16px; }
  .entete-logo { justify-self: start; }
  .entete-logo img { height: 52px; }
  .entete-burger { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: none; border-radius: 14px; background: var(--vert-clair); cursor: pointer; }
  .entete-burger span, .entete-burger span::before, .entete-burger span::after { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--vert-fonce); transition: transform .25s, background .25s; }
  .entete-burger span { position: relative; }
  .entete-burger span::before, .entete-burger span::after { content: ''; position: absolute; left: 0; }
  .entete-burger span::before { top: -7px; }
  .entete-burger span::after { top: 7px; }
  .entete-burger span.ouvert { background: transparent; }
  .entete-burger span.ouvert::before { transform: translateY(7px) rotate(45deg); }
  .entete-burger span.ouvert::after { transform: translateY(-7px) rotate(-45deg); }
  .entete-menu { display: none; grid-column: 1 / -1; flex-direction: column; gap: 14px; padding: 14px 0 8px; }
  .entete-menu.ouvert { display: flex; }
  .entete-nav { flex-direction: column; gap: 2px; font-size: 17px; letter-spacing: .06em; }
  /* Centred, each item between two short lines — the section titles'
     ornament, in miniature. The page you are on gets longer, green lines. */
  .entete-nav a { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 4px; }
  .entete-nav a::before, .entete-nav a::after { content: ''; width: 28px; height: 1.5px; border-radius: 2px; background: rgba(28, 43, 32, .18); transition: width .25s, background .25s; }
  .entete-nav a[aria-current="page"]::before, .entete-nav a[aria-current="page"]::after { width: 46px; background: var(--vert); }
  .entete-nav a:active::before, .entete-nav a:active::after { width: 46px; }
  /* Spacing letters apart breaks the joins of Arabic script. */
  [dir=rtl] .entete-nav { letter-spacing: 0; }
}


/* Chips: fridge families, ingredients found, difficulty levels. */
.puce { font-family: Signika, sans-serif; font-weight: 700; border: none; cursor: pointer; font-size: 14px; padding: 9px 15px; border-radius: 30px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--vert-fonce); box-shadow: 0 2px 8px rgba(28, 43, 32, .06); transition: background .2s, color .2s; }
.puce:hover { background: var(--vert-clair); }
.puce-signe { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--vert-clair); color: var(--vert-fonce); }
.puce.cochee, .puce-case:has(input:checked) { background: var(--vert); color: #fff; }
.puce.cochee .puce-signe, .puce-case:has(input:checked) .puce-signe { background: var(--jaune); }
.puce-case .puce-signe::before { content: '+'; }
.puce-case:has(input:checked) .puce-signe::before { content: '✓'; }
.puce-case:focus-within { outline: 2px solid var(--vert); outline-offset: 2px; }

.barre-recherche { flex: 1 1 380px; min-width: 0; display: flex; align-items: center; gap: 8px; background: #f4f1ea; border-radius: 30px; padding: 5px 5px 5px 22px; }
.barre-recherche input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 15px; color: var(--vert-fonce); padding: 12px 0; }
.barre-recherche-btn { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--vert); color: #fff; display: flex; align-items: center; justify-content: center; }
.barre-recherche-btn svg { width: 22px; height: 22px; }

/* Home — hero slider. */
/* Swipeable: horizontal gestures belong to the slider, vertical ones still
   scroll the page. */
.hero-accueil { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.hero-accueil:active { cursor: grabbing; }
.hero-accueil a, .hero-accueil button { cursor: pointer; }
.hero-accueil-grille { position: relative; max-width: 1320px; margin: 0 auto; padding: 70px 24px 130px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 40px; align-items: center; }
.hero-feuille { position: absolute; left: 3%; top: 10%; width: 110px; animation: bobY 5s ease-in-out infinite; pointer-events: none; }
.hero-feuille-2 { position: absolute; left: 44%; bottom: 8%; width: 90px; animation: bobX 6s ease-in-out infinite; pointer-events: none; opacity: .9; }
.hero-tournesol { position: absolute; right: 2%; bottom: -30px; width: 150px; pointer-events: none; }
/* Slides travel sideways: in from one side as the previous one leaves by the
   other. --sens is 1 going forward, -1 going back. */
.diapos { display: grid; }
.diapos > * { grid-area: 1 / 1; }
.diapo { opacity: 0; visibility: hidden; translate: calc(var(--sens, 1) * 120px) 0; transition: none; }
.diapo.active { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .65s ease, translate .65s cubic-bezier(.22, .7, .2, 1), visibility 0s; }
.diapo.sortie:not(.active) { opacity: 0; visibility: hidden; translate: calc(var(--sens, 1) * -120px) 0; transition: opacity .65s ease, translate .65s cubic-bezier(.22, .7, .2, 1), visibility 0s .65s; }
@media (prefers-reduced-motion: reduce) {
  .diapo, .diapo.sortie:not(.active) { translate: 0 0; }
}
/* The dot is drawn inside a 28px button: easy to hit with a thumb. */
.point-diapo { border: none; cursor: pointer; padding: 0; min-width: 28px; height: 28px; background: none; display: inline-flex; align-items: center; justify-content: center; }
.point-diapo::before { content: ''; height: 12px; width: 12px; border-radius: 6px; background: rgba(30, 29, 35, .25); transition: all .3s; }
.point-diapo.actif::before { width: 36px; background: var(--vert); }

/* The yellow stamp pinned on a round photo: "ready in 20′", "13 recipes". */
.pastille { position: absolute; top: 2%; inset-inline-end: 0; width: clamp(104px, 11vw, 136px); aspect-ratio: 1; border-radius: 50%; background: var(--jaune); color: var(--vert-fonce); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 14px 30px rgba(0, 0, 0, .18); outline: 2px dashed rgba(28, 43, 32, .45); outline-offset: -9px; text-align: center; }
.pastille span { font-family: Signika, sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pastille strong { font-family: Signika, sans-serif; font-size: clamp(28px, 3vw, 38px); line-height: 1; color: var(--vert); }

/* Home — "what is in your fridge", lifted over the bottom of the hero. */
.frigo-accueil .barre-recherche { flex: none; width: 100%; }
.frigo-accueil { margin-top: -70px; background: #fff; border-radius: 26px; box-shadow: 0 24px 60px rgba(28, 43, 32, .12); padding: clamp(20px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 18px; }

/* Home — recipes of the moment: tabs, four cards, arrows. */
.onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.onglets button { font-family: Signika, sans-serif; font-weight: 700; cursor: pointer; font-size: 15px; text-transform: uppercase; padding: 12px 24px; border-radius: 30px; border: 1px solid rgba(30, 29, 35, .15); background: #fff; color: #1e1d23; transition: background .2s, color .2s; }
.onglets button.actif { background: var(--vert); border-color: var(--vert); color: #fff; }
.grille-moment { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.fleche { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(30, 29, 35, .15); background: #fff; color: var(--vert-fonce); font-size: 20px; cursor: pointer; transition: background .2s, color .2s; }
.fleche { transition: background .2s, color .2s, border-color .2s, translate .25s cubic-bezier(.22, .7, .2, 1); }
.fleche:hover { background: var(--vert); border-color: var(--vert); color: #fff; }
/* Each arrow leans the way it goes. */
.fleche-suivante:hover { translate: 4px 0; }
.fleche-precedente:hover { translate: -4px 0; }
[dir=rtl] .fleche-suivante:hover { translate: -4px 0; }
[dir=rtl] .fleche-precedente:hover { translate: 4px 0; }
.fleche:active { scale: .92; }
.grille-moment { overflow: visible; }
[dir=rtl] .fleche { transform: scaleX(-1); }

/* Recipe card, grid and list. */
.grille-recettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 28px; }
.grille-liste { display: flex; flex-direction: column; gap: 16px; }
.carte-recette { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 20px 22px; border-radius: 22px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .07); transition: box-shadow .35s, scale .35s cubic-bezier(.22, .7, .2, 1), opacity .8s cubic-bezier(.2, .7, .2, 1), translate .8s cubic-bezier(.2, .7, .2, 1); min-width: 0; }
/* On a mouse, the card hovered grows and lifts above its neighbours. Touch
   screens skip it: a hover there sticks after the tap. */
@media (hover: hover) and (pointer: fine) {
  .carte-recette:hover { scale: 1.05; z-index: 2; box-shadow: 0 26px 60px rgba(28, 43, 32, .18) !important; }
  .carte-liste:hover { scale: 1.015; }
}
@media (prefers-reduced-motion: reduce) {
  .carte-recette:hover { scale: 1; }
}
.carte-ruban { position: absolute; top: 0; inset-inline-start: 18px; width: 34px; padding: 10px 0 14px; background: var(--vert); color: var(--jaune); font-family: Signika, sans-serif; font-weight: 700; font-size: 14px; text-align: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.carte-photo { display: block; margin-top: 30px; width: min(100%, 180px); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--vert-clair); box-shadow: 0 14px 30px rgba(28, 43, 32, .16); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.carte-corps { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; flex: 1; }
.carte-titre { font-family: Signika, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--vert-fonce); text-wrap: pretty; margin-top: 6px; }
.carte-resume { font-size: 14px; line-height: 1.5; color: var(--texte-doux); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Every card is the same size whatever the recipe: the title and the
   summary always take two lines, clipped when longer, reserved when shorter. */
.carte-recette .carte-titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.carte-recette .carte-resume { min-height: 3em; }
.carte-liste .carte-titre, .carte-liste .carte-resume { min-height: 0; }
.grille-moment > .carte-recette { height: 100%; }
.carte-pied { min-height: 46px; margin-top: auto; align-self: stretch; padding-top: 14px; border-top: 1px dashed rgba(28, 43, 32, .15); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.carte-chip { font-size: 13px; font-weight: 800; color: var(--vert-fonce); background: #f4f1ea; padding: 6px 12px; border-radius: 8px; }
.carte-temps { font-family: Signika, sans-serif; font-weight: 700; font-size: 16px; color: var(--vert); }
.carte-pied > :only-child { margin-inline: auto; }

.carte-liste { flex-direction: row; text-align: start; align-items: center; gap: 22px; padding: 16px 22px 16px 16px; }
.carte-liste .carte-photo { margin: 0; flex: none; width: 110px; }
.carte-liste .carte-corps { align-items: flex-start; }
.carte-liste .carte-ruban { display: none; }

/* Tip card. */
.carte-conseil { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .07); display: flex; flex-direction: column; transition: box-shadow .3s; }
.carte-conseil-photo { position: relative; display: block; aspect-ratio: 16 / 10; }
.carte-conseil-date { position: absolute; top: 16px; inset-inline-start: 16px; background: var(--jaune); color: var(--vert-fonce); font-family: Signika, sans-serif; font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 8px; }
.carte-conseil-corps { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-conseil-meta { font-size: 14px; color: var(--texte-doux); }
.carte-conseil .carte-resume { flex: 1; }
.carte-conseil-lien { align-self: flex-start; font-family: Signika, sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; color: var(--vert); }

/* Recipe index. */
.hero-recettes-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.barre-outils { position: relative; z-index: 2; margin-top: -70px; background: #fff; border-radius: 26px; box-shadow: 0 24px 60px rgba(28, 43, 32, .12); padding: clamp(16px, 2.2vw, 24px); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.barre-droite { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bouton-vue { width: 50px; height: 50px; border-radius: 14px; border: none; background: #f4f1ea; color: var(--vert-fonce); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.bouton-vue:not(.actif):hover { background: var(--vert-clair); }
.bouton-vue.actif { background: var(--vert); color: #fff; }
/* The sort listbox. */
.tri { position: relative; }
.tri-bouton { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px 0 20px; border: 1.5px solid rgba(28, 43, 32, .14); border-radius: 14px; background: #fff; color: var(--vert-fonce); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.tri-bouton:hover, .tri-bouton[aria-expanded=true] { border-color: var(--vert); }
.tri-bouton:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(38, 96, 63, .25); border-color: var(--vert); }
.tri-libelle { font-size: 13px; color: var(--texte-doux); }
.tri-valeur { font-family: Signika, sans-serif; font-weight: 700; font-size: 15px; white-space: nowrap; }
.tri-chevron { flex: none; margin-inline-start: 6px; color: var(--vert); transition: transform .2s; }
.tri-chevron.ouvert { transform: rotate(180deg); }
.tri-liste { position: absolute; z-index: 20; top: calc(100% + 8px); inset-inline-end: 0; min-width: 100%; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 14px; box-shadow: 0 18px 44px rgba(28, 43, 32, .18); border: 1px solid rgba(28, 43, 32, .06); }
.tri-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; border: none; border-radius: 10px; background: transparent; color: var(--vert-fonce); font-size: 15px; text-align: start; white-space: nowrap; cursor: pointer; }
.tri-option:hover { background: #f6f9ef; }
.tri-option.actif { background: var(--vert-clair); color: var(--vert); font-weight: 700; }
.rond-chargement { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: hSpin .7s linear infinite; }
.recettes-colonnes { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 34px; align-items: start; }
.recettes-filtres-corps { display: flex; flex-direction: column; gap: 20px; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 34px; }
.page { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: none; border-radius: 20px; font-family: Signika, sans-serif; font-weight: 700; font-size: 14px; background: #fff; color: var(--vert-fonce); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); cursor: pointer; transition: background .2s, color .2s, scale .2s; }
button.page:hover { background: var(--vert-clair); }
button.page:active { scale: .92; }
.page-courante { background: var(--vert); color: #fff; box-shadow: none; cursor: default; }
.page-fleche { background: var(--vert-clair); color: #9aa89c; box-shadow: none; cursor: default; }
.page-fleche.page-active { color: var(--vert); cursor: pointer; }
.page-points { background: transparent; box-shadow: none; color: #9aa89c; cursor: default; }
.page:disabled { opacity: .6; }
.recettes-resultats { scroll-margin-top: 110px; }
.recettes-resultats { min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.bouton-filtres { display: none; }

.panneau { background: #fff; border-radius: 22px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .06); }
details.panneau { display: block; }
.panneau-titre { font-family: Signika, sans-serif; font-weight: 700; font-size: 21px; color: var(--vert-fonce); }
summary.panneau-titre { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(28, 43, 32, .08); }
summary.panneau-titre::-webkit-details-marker { display: none; }
summary.panneau-titre::after { content: '⌃'; font-size: 16px; color: var(--vert); transition: transform .2s; }
details:not([open]) > summary.panneau-titre { padding-bottom: 0; border-bottom: none; }
details:not([open]) > summary.panneau-titre::after { transform: rotate(180deg); }
.panneau-frigo { background: var(--vert-clair); box-shadow: none; }
.panneau-courses { background: var(--vert-fonce); color: #e9f1dc; }
.champ-ingredient { width: 100%; border: 1px solid rgba(28, 43, 32, .14); background: #fff; border-radius: 30px; padding: 12px 18px; font-size: 15px; color: var(--vert-fonce); outline: none; }
.champ-ingredient:focus { border-color: var(--vert); }
/* The two shopping-list actions: equal halves, copy as the quiet outline,
   WhatsApp as the filled primary — it is where most readers send the list. */
.actions-courses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.btn-courses { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 14px; border: none; border-radius: 12px; cursor: pointer; font-family: Signika, sans-serif; font-weight: 700; font-size: 15px; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.btn-courses svg { flex: none; }
.btn-courses-copier { background: transparent; color: var(--jaune); box-shadow: inset 0 0 0 1.5px rgba(255, 214, 0, .55); }
.btn-courses-copier:hover { background: rgba(255, 214, 0, .12); box-shadow: inset 0 0 0 1.5px var(--jaune); }
.btn-courses-wa { background: #25d366; color: #0b2912; }
.btn-courses-wa:hover { background: #1ebe5a; color: #0b2912; }
.btn-courses:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; }
.aimee { display: flex; align-items: center; gap: 14px; }
.lien-effacer { border: none; cursor: pointer; background: transparent; font-family: Signika, sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; color: var(--vert); text-decoration: underline; text-underline-offset: 4px; padding: 4px; }

/* Recipe page — the same panels and type as the rest of the site. */
.fiche-chip { background: #fff; color: var(--vert-fonce); font-family: Signika, sans-serif; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 999px; box-shadow: 0 2px 8px rgba(28, 43, 32, .06); }
.fiche-chip-jaune { background: var(--jaune); }
.btn-whatsapp { display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #0b2912; font-family: Signika, sans-serif; font-weight: 700; font-size: 15px; padding: 15px 24px; border-radius: 30px; white-space: nowrap; }
.btn-whatsapp:hover { background: #1ebe5a; color: #0b2912; }
.btn-contour:hover { background: rgba(38, 96, 63, .08); }
.bouton-portion { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--vert); color: #fff; font-size: 19px; font-weight: 700; cursor: pointer; line-height: 1; }
.ligne-ingredient { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: none; border-radius: 12px; cursor: pointer; text-align: start; background: transparent; color: var(--vert-fonce); font-size: 16px; line-height: 1.45; }
.ligne-ingredient:hover { background: #f6f9ef; }
.ligne-ingredient .case { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 2px solid rgba(38, 96, 63, .45); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; }
.ligne-ingredient.coche { color: #8a968c; text-decoration: line-through; }
.ligne-ingredient.coche .case { background: var(--vert); border-color: var(--vert); }
.etape { width: 100%; display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; border-radius: 18px; cursor: pointer; text-align: start; background: #fff; border: 2px solid transparent; box-shadow: 0 8px 30px rgba(0, 0, 0, .05); transition: background .2s, border-color .2s; }
.etape:hover { border-color: rgba(38, 96, 63, .2); }
.etape-numero { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: Signika, sans-serif; font-weight: 700; font-size: 20px; background: var(--jaune); color: var(--vert-fonce); }
.etape-texte { flex: 1; font-size: 17px; line-height: 1.6; padding-top: 8px; color: var(--vert-fonce); text-wrap: pretty; }
.etape.faite { background: var(--vert-clair); }
.etape.faite .etape-numero { background: var(--vert); color: #fff; }
.etape.faite .etape-texte { opacity: .55; }

@media (max-width: 1100px) {
  .grille-moment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .hero-recettes-grille { grid-template-columns: minmax(0, 1fr); }
  .hero-recettes-photo { display: none !important; }
  .recettes-colonnes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .bouton-filtres { display: flex; width: 100%; justify-content: space-between; align-items: center; border: none; cursor: pointer; background: var(--vert); color: #fff; font-family: Signika, sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; padding: 15px 22px; border-radius: 16px; }
  .recettes-filtres-corps { margin-top: 14px; }
}

@media (max-width: 760px) {
  .hero-accueil-grille { padding: 34px 16px 110px; gap: 26px; }
  .hero-accueil-grille > :last-child { order: -1; }
  .hero-accueil-grille > :last-child > div { width: min(78%, 320px) !important; }
  .hero-feuille-2, .hero-tournesol { display: none; }
  .frigo-accueil { margin-top: -60px; }
  .grille-moment { gap: 14px; }
  .carte-recette { padding: 0 12px 16px; }
  .carte-photo { margin-top: 18px; border-width: 4px; }
  .carte-titre { font-size: 16px; }
  .carte-resume { font-size: 13px; }
  .carte-pied { justify-content: center; }
  .carte-liste { padding: 12px; gap: 14px; }
  .carte-liste .carte-photo { width: 84px; }
  .barre-outils { margin-top: -80px; }
  .barre-droite { width: 100%; justify-content: space-between; gap: 10px; }
  .barre-droite > .num { flex-basis: 100%; font-size: 14px; }
  .tri { flex: 1; min-width: 0; }
  .tri-bouton { width: 100%; }
  /* The label stays for screen readers; on a phone the value needs the room. */
  .tri-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tri-valeur { overflow: hidden; text-overflow: ellipsis; }
  .tri-chevron { margin-inline-start: auto; }
  .etape { padding: 16px; gap: 14px; }
  .onglets { width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .onglets button { flex: none; padding: 10px 18px; font-size: 14px; }
  .frigo-accueil .barre-recherche { flex-wrap: wrap; border-radius: 20px; padding: 6px; }
  .frigo-accueil .barre-recherche input { padding: 12px 14px; }
  .frigo-accueil .barre-recherche button { width: 100%; }
  .etape-texte { font-size: 16px; padding-top: 6px; }
}

/* Cookie banner. A card in the corner on a computer, a sheet along the bottom
   on a phone. Accept and refuse carry the same weight, as consent rules ask. */
/* Outside #top, which sets the page font, so it names its own. */
.cookies { font-family: Nunito, system-ui, sans-serif; position: fixed; z-index: 60; inset-inline-start: 20px; bottom: 20px; width: min(440px, calc(100% - 40px)); background: #fff; color: var(--vert-fonce); border-radius: 22px; box-shadow: 0 24px 70px rgba(28, 43, 32, .28); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.cookies[hidden] { display: none; }
.cookies-corps { display: flex; flex-direction: column; gap: 8px; }
.cookies-titre { font-family: Signika, sans-serif; font-weight: 700; font-size: 20px; }
.cookies-texte { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texte-doux); }
.cookies-categories { display: none; flex-direction: column; gap: 10px; margin-top: 6px; }
.cookies-detail .cookies-categories { display: flex; }
.cookies-categorie { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--texte-doux); cursor: pointer; }
.cookies-categorie strong { display: block; color: var(--vert-fonce); font-size: 14px; }
.cookies-categorie input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--vert); flex: none; }
.cookies-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.cookies-bouton { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--vert); background: #fff; color: var(--vert); font-family: Signika, sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .2s, color .2s; }
.cookies-bouton:hover { background: var(--vert-clair); }
.cookies-principal { background: var(--vert); color: #fff; }
.cookies-principal:hover { background: #1c4a30; color: #fff; }
.cookies-lien { flex-basis: 100%; order: 3; border: none; background: none; padding: 4px; font-size: 14px; font-weight: 700; color: var(--vert); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookies-seulement-detail { display: none; }
.cookies-detail .cookies-seulement-detail { display: block; }
.cookies-detail .cookies-seulement-court { display: none; }
.cookies button:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }

@media (max-width: 760px) {
  .cookies { inset-inline: 0; bottom: 0; width: 100%; border-radius: 22px 22px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
}

/* Tip cards, on the home page and under a tip: auto-fit, so three cards fill
   the row instead of leaving an empty fourth column. A shadow at rest; on a
   mouse the card grows and lifts, like the recipe cards. */
.grille-conseils { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px; }
.carte-conseil { position: relative; box-shadow: 0 10px 30px rgba(28, 43, 32, .10) !important; transition: box-shadow .35s, scale .35s cubic-bezier(.22, .7, .2, 1), opacity .8s cubic-bezier(.2, .7, .2, 1), translate .8s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  .carte-conseil:hover { scale: 1.05; z-index: 2; box-shadow: 0 26px 60px rgba(28, 43, 32, .22) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .carte-conseil:hover { scale: 1; }
}

/* The whole card is a link: the title's link is stretched over the card, so
   a click anywhere on it opens the recipe or the tip. The photo keeps its own
   link (same target) above it for screen readers. */
.carte-recette .carte-titre::after,
.carte-conseil .carte-titre::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.carte-recette, .carte-conseil { cursor: pointer; }
.carte-recette .carte-titre, .carte-conseil .carte-titre { position: static; }

/* "Cuisinez léger": the sunburst turns slowly on its centre and breathes in
   and out. It is a square well past the section's diagonal, so no corner ever
   shows while it turns; the section clips it. */
.fond-rayons { position: absolute; left: 50%; top: 50%; width: hypot(100vw, 150vh); aspect-ratio: 1; translate: -50% -50%; background-position: 50% 50%; background-size: cover; opacity: .35; pointer-events: none; animation: rayonsTour 90s linear infinite, rayonsSouffle 9s ease-in-out infinite alternate; will-change: rotate, scale; }
@keyframes rayonsTour { to { rotate: 360deg; } }
@keyframes rayonsSouffle { from { scale: 1; } to { scale: 1.18; } }
@media (prefers-reduced-motion: reduce) {
  .fond-rayons { animation: none; }
}

/* Photographs as images (x-site.photo): they fill the shape their parent draws. */
.photo { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The <picture> around a photo must not become a box of its own. */
.photo-cadre { display: contents; }
.photo-vide { object-fit: contain; padding: 18%; background: var(--vert-clair); }
.carte-photo, .carte-conseil-photo { overflow: hidden; }
.carte-photo { background: var(--vert-clair); }

/* Recipe page actions. On a computer they sit in a row; on a phone they
   become one block: the main action full width, the shopping list and the
   share button as two equal halves beneath it. */
.fiche-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.fiche-actions > a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.texte-court { display: none; }

@media (max-width: 760px) {
  /* The dish first: readers arriving from Instagram or TikTok see the photo,
     then the title, then what to do. */
  .fiche-hero { padding: 26px 16px 34px !important; gap: 22px !important; }
  .fiche-hero-photo { order: -1; }
  .fiche-hero-photo > div { max-width: 280px !important; border-width: 9px !important; }
  .fiche-hero-photo > img { width: 120px !important; top: -34px !important; right: 6% !important; }
  .fiche-hero h1 { font-size: clamp(34px, 10vw, 44px) !important; }
  .fiche-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fiche-actions > a { padding: 14px 12px !important; font-size: 14px !important; min-height: 50px; }
  .fiche-actions > a:first-child { grid-column: 1 / -1; }
  .fiche-actions .texte-long { display: none; }
  .fiche-actions .texte-court { display: inline; }
}

/* "Commencer la recette" goes to the top of the recipe body: the ingredients
   on a phone (they come first there), both columns on a computer. Anything
   jumped to stops below the sticky header rather than under it. */
#courses, #etapes { scroll-margin-top: 110px; }
/* #corps carries its own 50px of top padding, hence the smaller margin. */
#corps { scroll-margin-top: 70px; }
@media (max-width: 960px) {
  #courses, #etapes { scroll-margin-top: 84px; }
  #corps { scroll-margin-top: 40px; }
}

/* The open phone menu is a layer above the page, not part of it: a shadow
   under the header and a veil over what lies beneath. */
.entete { transition: box-shadow .25s; }
.entete-voile { display: none; }
@media (max-width: 960px) {
  .entete.ouvert { box-shadow: 0 18px 40px rgba(28, 43, 32, .22), 0 2px 0 rgba(28, 43, 32, .06); }
  .entete-voile { display: block; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: rgba(20, 32, 24, .35); z-index: -1; cursor: pointer; }
  .entete-voile[style*="display: none"] { display: none; }
}

/* Ingredient chips: a scrollable cloud on a computer so the panel keeps its
   size, the count of recipes after each name. */
.puces-ingredients { display: flex; flex-wrap: wrap; gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.puce-nombre { font-size: 12px; font-weight: 700; color: var(--texte-doux); background: var(--vert-clair); border-radius: 999px; padding: 1px 7px; }
.puce.cochee .puce-nombre { background: rgba(255, 255, 255, .2); color: #fff; }