/* =========================================================================
   RECETTES — LA PAGE D'INDEX AVEC SA COLONNE DE FILTRES
   =========================================================================

   Cette feuille ne sert QU'AUX DEUX PAGES `recettes.html` (française et
   anglaise). Elle est chargée après `style.css` et ne redéfinit rien de ce
   que les autres pages emploient : les cartes de recettes elles-mêmes
   (`.recipe-index-card`, `.recipe-index-image`, `.recipe-index-title-card`)
   gardent exactement le style qu'elles avaient — image en haut, nom en
   dessous. Seule la mise en page autour d'elles change.

   VOUS N'AVEZ NORMALEMENT PAS À TOUCHER CE FICHIER.
   Pour ajouter ou modifier un filtre, tout se passe dans
   `assets/js/recettes-index.js`, en haut du fichier.

   Palette reprise de `style.css` : #333 le texte, #777 le texte discret,
   #ecefeb le fond pâle, #eee2d6 les filets.
   ========================================================================= */

/* ---------------------------------------------------- la mise en page --- */

/* PLUS LARGE ET DECALEE VERS LA GAUCHE. La colonne passe de 250 a 285 px —
   assez pour que « Poisson et fruits de mer » tienne sur une ligne, pas assez
   pour manger une colonne de photos. Et la page gagne 160 px de largeur
   maximale avec une marge gauche reduite de 40 a 22 px : sur un grand ecran,
   le bloc entier part donc plus vers le bord, au lieu de flotter au centre. */
.rec-page {
  max-width: 1460px;
  margin: 0 auto;
  padding: 40px 40px 110px 22px;
  display: grid;
  grid-template-columns: 285px 1fr;
  gap: 40px;
  align-items: start;
}

/* La colonne de gauche suit le défilement : sur une page de soixante
   recettes, des filtres qui restent en haut obligent à remonter à chaque
   changement d'avis. `top` laisse la place à l'en-tête collant du site. */
/* UN VRAI PANNEAU, ET NON PLUS UN FOND TRANSPARENT. Mesure avant correction :
   `background-color: rgba(0, 0, 0, 0)` sur la colonne, contre un fond de page
   `rgb(244, 232, 224)` — la colonne n'existait donc pas visuellement, ses
   cases flottaient sur le crème de la page et le champ de recherche blanc
   faisait le seul aplat de la zone. Le vert pâle est celui que le site emploie
   déjà pour son bandeau de filtres (`#ecefeb` dans `style.css`) : la couleur
   n'est pas inventée, elle est reprise. */
.rec-cote {
  position: sticky;
  top: 110px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  background: #ecefeb;
  border: 1px solid #dbe3d7;
  border-radius: 5px;
  padding: 18px 16px 8px;
}

.rec-resultats { min-width: 0; }

/* --------------------------------------------------------- la recherche --- */

.rec-recherche { position: relative; margin-bottom: 26px; }

.rec-recherche input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #c8d3c4;
  /* crème tiède plutôt que blanc pur : le blanc trouait le panneau */
  background: #fbfaf5;
  border-radius: 2px;
  padding: 11px 34px 11px 12px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #333;
}

.rec-recherche input:focus {
  outline: none;
  border-color: #6f7a68;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(111, 122, 104, 0.14);
}

/* La croix qui vide le champ. Elle n'apparaît que s'il y a quelque chose à
   effacer : un bouton toujours visible sur un champ vide se clique pour rien. */
.rec-vider-recherche {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: #777;
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}

.rec-vider-recherche[hidden] { display: none; }

/* ---------------------------------------------------- un groupe de filtre --- */

.rec-groupe {
  border-top: 1px solid #d5ded1;
  padding: 14px 0 4px;
}

.rec-groupe > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Merriweather", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #46543f;
  padding-bottom: 10px;
}

.rec-groupe > summary::-webkit-details-marker { display: none; }

/* Le chevron tourne quand le groupe s'ouvre : c'est le seul indice qu'il y a
   quelque chose de replié. */
.rec-groupe > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #7d8a76;
  border-bottom: 1.5px solid #7d8a76;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s ease;
  flex: none;
}

.rec-groupe[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.rec-choix { display: block; padding-bottom: 12px; }

.rec-choix label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: 3px;
  font-size: 0.88rem;
  color: #3f4a3c;
  cursor: pointer;
  line-height: 1.35;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rec-choix label:hover { background: #e0e8dc; color: #22301f; }

/* UNE CASE COCHEE DOIT SE VOIR SANS CHERCHER LA CASE. Sur une colonne de
   quarante-deux lignes, la seule petite coche ne suffit pas à retrouver d'un
   coup d'œil ce qu'on a demandé : la ligne entière se teinte. `:has()` évite
   d'avoir à poser une classe en JavaScript, et là où il manque, la coche seule
   reste — on perd la teinte, jamais le filtre. */
.rec-choix label:has(input:checked) {
  background: #d7e2d1;
  color: #1f2d1c;
  font-weight: 600;
}

.rec-choix label:has(input:checked) .rec-nb {
  background: #5d6857;
  color: #fff;
}

.rec-choix input[type="checkbox"] {
  flex: none;
  width: 15px;
  height: 15px;
  accent-color: #6f7a68;
  cursor: pointer;
  margin: 0;
}

/* Le nombre de recettes derrière chaque case. Il est calculé à l'ouverture de
   la page à partir des cartes réellement présentes : il ne se saisit pas. */
.rec-nb {
  margin-left: auto;
  flex: none;
  min-width: 22px;
  text-align: center;
  background: #dfe6db;
  color: #4e5b48;
  border-radius: 9px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* UN CHOIX QUI NE CORRESPOND À AUCUNE RECETTE RESTE VISIBLE MAIS ÉTEINT.
   Le masquer ferait croire à une faute de frappe dans le fichier de
   configuration ; grisé, il dit « ce filtre existe, aucune recette ne le
   porte encore ». Il se rallume tout seul le jour où une recette arrive. */
.rec-choix label.rec-vide {
  opacity: 0.4;
  cursor: default;
}

.rec-choix label.rec-vide input { cursor: default; }

/* ------------------------------------------------- l'entête de la colonne --- */

.rec-cote-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.rec-cote-titre {
  font-family: "Merriweather", serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #46543f;
  margin: 0;
}

.rec-effacer {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.78rem;
  color: #a8443c;              /* le rouge du site, pour une action qui défait */
  text-decoration: underline;
  cursor: pointer;
}

.rec-effacer:hover { color: #7d3029; }

.rec-effacer[hidden] { display: none; }

/* ------------------------------------------------------- le compte rendu --- */

.rec-compte {
  display: inline-block;
  font-size: 0.82rem;
  color: #5c6a55;
  background: #e6ece2;
  border-radius: 3px;
  padding: 5px 12px;
  margin: 0 0 22px;
  font-style: italic;
}

/* --------------------------------------- le bouton « Filtres » du mobile --- */

/* Invisible sur grand écran : la colonne y est déjà dépliée. */
.rec-bouton-filtres { display: none; }

/* ========================================================================
   MOBILE ET TABLETTE
   ======================================================================== */

@media (max-width: 980px) {
  .rec-page {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 26px 18px 70px;
  }

  /* La colonne cesse de suivre le défilement et se replie derrière un bouton :
     sur un téléphone, une liste de filtres dépliée pousse les recettes hors
     de l'écran et il faut faire défiler pour voir ne serait-ce qu'une photo. */
  .rec-cote {
    position: static;
    max-height: none;
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 8px;
  }

  .rec-cote.rec-ouvert .rec-panneau {
    background: #ecefeb;
    border: 1px solid #dbe3d7;
    border-radius: 5px;
    padding: 14px 14px 6px;
    margin-bottom: 14px;
  }

  .rec-bouton-filtres {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #cfd9cb;
    background: #e6ece2;
    border-radius: 2px;
    font-family: "Merriweather", serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #333;
    cursor: pointer;
  }

  .rec-bouton-filtres .rec-nb-actifs {
    background: #6f7a68;
    color: #fff;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.7rem;
    letter-spacing: 0;
  }

  .rec-bouton-filtres .rec-nb-actifs[hidden] { display: none; }

  /* Replié par défaut. `hidden` seul ne suffirait pas : `.rec-panneau` est en
     `display: block` plus haut, ce qui l'emporterait. */
  .rec-panneau { display: none; }
  .rec-cote.rec-ouvert .rec-panneau { display: block; }

  /* LE MOT « FILTRES » NE S'ECRIT PAS DEUX FOIS. Le bouton qui déplie la
     colonne le porte déjà ; le titre juste en dessous répétait le même mot à
     deux lignes d'intervalle. On garde l'entête pour « Tout effacer », qui
     doit rester atteignable, et on retire le titre seul. */
  .rec-cote-titre { display: none; }

  .rec-cote-tete {
    justify-content: flex-end;
    margin: 0 0 8px;
    min-height: 0;
  }

  /* L'entête ne prend pas de place tant qu'il n'y a rien à effacer. */
  .rec-cote-tete:not(:has(.rec-effacer:not([hidden]))) { display: none; }

  .rec-groupe > summary { padding: 4px 0 10px; }
  .rec-choix label { padding: 7px 0; }        /* doigts, pas souris */
}

/* Le champ de recherche et les cases restent confortables sur un très petit
   écran : rien ne rétrécit sous 360 px. */
@media (max-width: 400px) {
  .rec-page { padding: 20px 14px 60px; }
}

/* ========================================================================
   LA GRILLE DE RECETTES DANS SA NOUVELLE COLONNE
   ======================================================================== */

/* `style.css` donne quatre colonnes à `.recipes-index-grid` sur toute la
   largeur de la page. Ici la grille partage la place avec la colonne de
   filtres : trois colonnes tiennent, quatre serrent trop. Les paliers plus
   petits restent ceux de `style.css`. */
.rec-resultats .recipes-index-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 28px;
}

@media (max-width: 1180px) {
  .rec-resultats .recipes-index-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .rec-resultats .recipes-index-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 18px;
  }
}

@media (max-width: 460px) {
  .rec-resultats .recipes-index-grid { grid-template-columns: 1fr; }
}

/* La section d'origine imposait ses marges ; elle n'enveloppe plus rien. */
.rec-resultats .recipes-index-grid-section { padding: 0; max-width: none; }


/* =========================================================================
   LA CARTE D'UNE RECETTE : UN CADRE, ET UNE ASSISE SOUS LE NOM
   =========================================================================
   Avant : la photo posée sur le fond de la page, et le nom flottant seul en
   dessous, sans rien autour. La zone sous la photo paraissait vide parce
   qu'elle l'était — rien ne la délimitait.

   On ne rajoute AUCUN texte : la carte devient un panneau, et le nom reçoit
   un trait court au-dessus qui lui donne une assise. Tout tient dans le
   cadre, plus rien ne flotte.

   Ces règles ne visent que la grille de cette page (`.rec-resultats`) :
   `style.css` continue de servir la carte partout ailleurs sans changer.
   ========================================================================= */

.rec-resultats .recipe-index-card {
  background: #fffdf9;
  border: 1px solid #e7ddd0;
  border-radius: 9px;
  padding: 10px 10px 18px;
  box-shadow: 0 2px 10px rgba(60, 50, 40, .05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.rec-resultats .recipe-index-card:hover {
  border-color: #b9d0cd;
  box-shadow: 0 14px 30px rgba(59, 90, 88, .14);
}

/* L'OMBRE PASSE SUR LA CARTE, PLUS SUR LA PHOTO. Les deux ensemble
   dessinaient un double contour à l'intérieur du cadre. */
.rec-resultats .recipe-index-image,
.rec-resultats .recipe-index-card:hover .recipe-index-image {
  border-radius: 6px;
  box-shadow: none;
}

/* la photo avance légèrement au survol, sans déborder de son cadre */
.rec-resultats .recipe-index-image img {
  transition: transform .55s cubic-bezier(.22, .8, .3, 1);
}

.rec-resultats .recipe-index-card:hover .recipe-index-image img {
  transform: scale(1.055);
}

.rec-resultats .recipe-index-title-card {
  position: relative;
  margin: 15px 8px 0;
  padding-top: 13px;
  font-size: .97rem;
  letter-spacing: .012em;
  color: #33403a;
}

/* LE TRAIT COURT AU-DESSUS DU NOM. C'est lui qui remplit l'espace, à la
   place d'un texte qu'on ne veut pas. Il s'allonge et fonce au survol :
   la carte répond sans qu'on ait ajouté un mot. */
.rec-resultats .recipe-index-title-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: #a4c4c3;
  transition: width .35s ease, background-color .35s ease;
}

.rec-resultats .recipe-index-card:hover .recipe-index-title-card::before {
  width: 54px;
  background: #3f6b67;
}

/* La carte d'annonce « Bientôt disponible » suit le même cadre, en retrait. */
.rec-resultats .recipe-index-card--soon {
  background: #faf6f0;
  border-style: dashed;
}

.rec-resultats .recipe-index-card--soon:hover {
  transform: none;
  box-shadow: 0 2px 10px rgba(60, 50, 40, .05);
  border-color: #e7ddd0;
}

@media (prefers-reduced-motion: reduce) {
  .rec-resultats .recipe-index-card,
  .rec-resultats .recipe-index-image img,
  .rec-resultats .recipe-index-title-card::before { transition: none; }
  .rec-resultats .recipe-index-card:hover .recipe-index-image img { transform: none; }
}


/* =========================================================================
   LES DEUX ZONES QUI DÉFILENT, CHACUNE POUR ELLE-MÊME
   =========================================================================
   La page a deux barres : celle de la colonne de filtres (1 586 px de
   contenu dans 768 de haut, mesuré) et celle de la page pour les recettes.

   CE QUI GÊNAIT N'ÉTAIT PAS D'EN AVOIR DEUX, MAIS QUE LA PREMIÈRE PASSE LA
   MAIN À LA SECONDE. `overscroll-behavior` valait `auto` : arrivé au bas de
   la liste des filtres, la molette continuait sur la PAGE, et tout partait
   d'un coup alors qu'on croyait encore régler ses cases.

   `contain` arrête le défilement au bout de la colonne au lieu de le
   transmettre. La molette agit donc sur ce qui est sous le pointeur, et sur
   rien d'autre : sur la colonne quand on la survole, sur la page ailleurs.
   C'est le comportement natif du navigateur, aucun script ne s'en mêle.
   ========================================================================= */

.rec-cote {
  overscroll-behavior: contain;
  /* la barre reste là mais se fait discrète : elle ne doit pas concurrencer
     celle de la page, plus large, juste à côté */
  scrollbar-width: thin;
  scrollbar-color: #bccdb8 transparent;
}

.rec-cote::-webkit-scrollbar { width: 8px; }
.rec-cote::-webkit-scrollbar-track { background: transparent; }

.rec-cote::-webkit-scrollbar-thumb {
  background: #c3d2bf;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.rec-cote::-webkit-scrollbar-thumb:hover { background: #9db098; background-clip: content-box; }

/* Sur téléphone la colonne ne défile plus pour elle-même (elle se déplie
   sous un bouton et pousse la page) : il n'y a alors qu'une seule barre,
   et rien à contenir. */
@media (max-width: 980px) {
  .rec-cote { overscroll-behavior: auto; }
}


/* =========================================================================
   LE BANDEAU DE TÊTE : « Recettes » et sa phrase
   =========================================================================
   Mesuré avant : le bloc n'avait AUCUN fond (`rgba(0,0,0,0)`) et le corps de
   la page est en `rgb(250,250,250)`. C'était donc du texte noir sur du blanc,
   sans rien autour — la zone paraissait vide parce qu'elle l'était.

   Ce qui lui donne de l'appétit, dans l'ordre d'importance :
     1. un fond chaud, pas blanc — le crème du carnet, en dégradé ;
     2. le grain de papier que `carnet.css` emploie déjà sur les pages de
        voyage : c'est ce qui fait « page de carnet » plutôt que « page web » ;
     3. une lueur tiède qui dérive très lentement, pour que le bandeau
        respire au lieu d'être un aplat ;
     4. un ornement dessiné — deux filets et une brindille — qui se trace
        depuis le centre, à la place d'un texte qu'on n'ajoute pas.

   L'ornement est une image en `data:` posée par le CSS : aucune balise à
   ajouter dans les deux pages, et les deux changent ensemble.
   ========================================================================= */

.recipes-index-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: none;              /* le bandeau traverse la page… */
  padding: 74px 24px 56px;
  background:
    radial-gradient(120% 150% at 50% -20%, #fdf6ec 0%, #f6ebdf 46%, #f0e3d5 100%);
  border-bottom: 1px solid #e8d9c8;
}

/* …mais le TEXTE, lui, garde sa largeur de lecture. */
.recipes-index-hero > * {
  max-width: 700px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* LE GRAIN DE PAPIER, repris tel quel de `carnet.css` — même image, même
   fréquence : le bandeau appartient au même carnet que les pages de voyage. */
.recipes-index-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='rn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23rn)' opacity='0.17'/%3E%3C/svg%3E");
}

/* LA LUEUR QUI DÉRIVE. Très lente et très pâle : on ne la remarque pas, on
   remarque seulement que le fond n'est pas mort. */
.recipes-index-hero::after {
  content: "";
  position: absolute;
  inset: -30% -10%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(38% 46% at 30% 40%, rgba(214, 160, 110, .16) 0%, rgba(214, 160, 110, 0) 70%);
  animation: rec-lueur 26s ease-in-out infinite alternate;
}

@keyframes rec-lueur {
  from { transform: translate3d(-6%, -3%, 0) scale(1); }
  to   { transform: translate3d(10%,  4%, 0) scale(1.12); }
}

/* ------------------------------------------------------------ le titre --- */

.recipes-index-title {
  color: #3a2f26;
  animation: rec-monte .8s cubic-bezier(.22, .8, .3, 1) both;
}

.recipes-index-subtitle {
  color: #6d6055;
  animation: rec-monte .8s cubic-bezier(.22, .8, .3, 1) .16s both;
}

@keyframes rec-monte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* L'ORNEMENT. Deux filets et une brindille, dessinés dans le trait du site.
   La boîte s'élargit depuis le centre et le fond reste centré : l'ornement se
   dévoile du milieu vers les bords, comme un trait qu'on tire. */
.recipes-index-hero .recipes-index-subtitle::after {
  content: "";
  display: block;
  height: 24px;
  width: 178px;
  margin: 22px auto 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 178px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='178' height='24' viewBox='0 0 178 24'%3E%3Cg fill='none' stroke='%23c19670' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M3 12H64'/%3E%3Cpath d='M114 12h61'/%3E%3C/g%3E%3Cg fill='none' stroke='%236f8f86' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M89 21V5'/%3E%3Cpath d='M89 12c-6-1-9-4-10-8 4 0 8 3 10 8Z'/%3E%3Cpath d='M89 12c6-1 9-4 10-8-4 0-8 3-10 8Z'/%3E%3Cpath d='M89 18c-5-1-7-3-8-6 3 0 6 2 8 6Z'/%3E%3Cpath d='M89 18c5-1 7-3 8-6-3 0-6 2-8 6Z'/%3E%3C/g%3E%3C/svg%3E");
  animation: rec-ornement .95s cubic-bezier(.22, .8, .3, 1) .42s both;
}

@keyframes rec-ornement {
  from { width: 0; opacity: 0; }
  to   { width: 178px; opacity: 1; }
}

@media (max-width: 640px) {
  .recipes-index-hero { padding: 50px 20px 40px; }
  .recipes-index-hero .recipes-index-subtitle::after { margin-top: 18px; }
}

/* Rien ne bouge pour qui a demandé moins de mouvement — mais tout reste
   visible : l'ornement garde sa largeur, le texte son opacité. */
@media (prefers-reduced-motion: reduce) {
  .recipes-index-title,
  .recipes-index-subtitle,
  .recipes-index-hero::after,
  .recipes-index-hero .recipes-index-subtitle::after { animation: none; }
  .recipes-index-hero .recipes-index-subtitle::after { width: 178px; opacity: 1; }
}