/* ==========================================================================
   Aux Deux Piments — feuille de style
   Charte arrêtée le 30/08/2026. Toute valeur ici vient du Brief.
   Révision du 31/08/2026 : ajout de la navigation, de l'accueil, de la carte
   et de la grille. Colonne portée à 38 rem (voir « Grille et matière »).
   ========================================================================== */

/* --- Fontes auto-hébergées. Aucun appel à un serveur tiers. ------------- */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var-italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Bitter";
  src: url("../fonts/bitter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Jetons ------------------------------------------------------------- */

:root {
  /* Pas de mode sombre. Le site est un imprimé sur papier crème. */
  color-scheme: light;

  --creme: #f6f0e1;
  --charbon: #22201d;
  --charbon-clair: #5a554c;
  --rouge: #c51a1c;
  --ocre: #e3a21c;
  --vert: #1e6b3a;

  --u: 8px; /* unité de base */

  /* 38 rem — corrigé le 31/08/2026, 34 rem auparavant. À Literata 19 px,
     34 rem donnaient 56 signes par ligne, sous la fourchette 62-68 exigée
     par le Brief. Les deux règles ne pouvaient pas être vraies ensemble. */
  --colonne: 38rem;

  --titres: "Fraunces", Georgia, serif;
  --texte: "Literata", Georgia, serif;
  --mecanique: "Bitter", Georgia, serif;
}

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

/* --- Socle -------------------------------------------------------------- */

html {
  background: var(--creme);
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--charbon);
  font-family: var(--texte);
  font-size: 19px;
  line-height: 1.65;
  font-variation-settings: "opsz" 19, "wght" 400;
  -webkit-text-size-adjust: 100%;
}

/* Grain de papier à 5 %. Posé sur toute la page, ne capte pas la souris. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--rouge);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
}

/* --- Contenance : le texte est contenu, les aplats et images vont au bord */

.contenu {
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: calc(var(--u) * 3);
}

.pleine-largeur {
  width: 100%;
}

/* --- Registre 4 : la mécanique ----------------------------------------- */

.mecanique {
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.09em;
  line-height: 1.4;
}

/* --- En-tête et pied ---------------------------------------------------- */

.bandeau {
  padding: calc(var(--u) * 4) 0 0;
}

.bandeau__nom {
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 14px;
  color: var(--charbon);
  text-decoration: none;
  display: inline-block;
}

.bandeau__signature {
  font-family: var(--texte);
  font-size: 15px;
  color: var(--charbon-clair);
  margin: var(--u) 0 calc(var(--u) * 3);
}

/* --- Navigation principale ----------------------------------------------
   La nav ne suit pas la mesure de lecture : c'est de la mécanique, pas du
   texte courant. Elle prend la largeur de l'écran avec la marge commune.
   Les deux maisons des mères d'abord, dans l'ordre alphabétique — Dar Najoua
   puis Etxea Nicole — et Chez nous ensuite. L'ordre est fixe, pas une
   hiérarchie. */

.nav {
  border-top: 2px solid var(--charbon);
  border-bottom: 2px solid var(--charbon);
  padding: calc(var(--u) * 1.5) 0;
}

.nav > .contenu {
  max-width: none;
}

.nav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--u) * 4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__lien {
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  line-height: 2.2;
  color: var(--charbon);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav__lien:hover,
.nav__lien[aria-current="page"] {
  color: var(--rouge);
  border-bottom-color: var(--rouge);
}

.pied {
  margin-top: calc(var(--u) * 8);
  border-top: 2px solid var(--charbon);
  padding: calc(var(--u) * 3) 0 calc(var(--u) * 6);
}

.pied__sceau {
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--charbon);
  margin: 0;
}

.pied__liens {
  display: flex;
  gap: calc(var(--u) * 3);
  margin: calc(var(--u) * 2) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
}

/* --- Accueil : l'accroche ----------------------------------------------- */

.accueil__accroche {
  font-family: var(--titres);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1, "wght" 800;
  font-weight: 800;
  text-transform: lowercase;
  font-size: clamp(2rem, 7vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--rouge);
  margin: calc(var(--u) * 6) auto calc(var(--u) * 5);
  text-wrap: balance;
}

/* --- Accueil : les trois lignes de propos, en aplat ocre bord à bord ------
   L'ocre ne porte jamais de texte, sauf en charbon (7,3:1). Aucun lien ici :
   le rouge n'y passerait pas le contraste. */

.propos {
  background: var(--ocre);
  border-top: 2px solid var(--charbon);
  border-bottom: 2px solid var(--charbon);
  padding: calc(var(--u) * 5) 0;
}

.propos__ligne {
  color: var(--charbon);
  margin: 0 0 calc(var(--u) * 2.5);
}

.propos__ligne:last-child {
  margin-bottom: 0;
}

/* --- Accueil : les trois maisons ----------------------------------------
   Blocs identiques au pixel. La grille à trois colonnes égales impose la
   même hauteur à toute la rangée : un texte plus long ne peut pas faire
   grandir son bloc. La parité n'est pas surveillée, elle est structurelle.
   Aucune couleur ne les distingue — c'est leur nom qui les distingue. */

.maisons {
  border-bottom: 2px solid var(--charbon);
}

.maisons__grille {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.maison {
  border-bottom: 2px solid var(--charbon);
}

.maison:last-child {
  border-bottom: 0;
}

.maison__lien {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  height: 100%;
  padding: calc(var(--u) * 4) calc(var(--u) * 3);
  color: var(--charbon);
  text-decoration: none;
}

.maison__lien:hover .maison__nom {
  border-bottom-color: var(--rouge);
}

.maison__nom {
  font-family: var(--titres);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1, "wght" 800;
  font-weight: 800;
  text-transform: lowercase;
  font-size: 1.75rem;
  line-height: 1.05;
  color: var(--rouge);
  align-self: flex-start;
  border-bottom: 2px solid transparent;
}

.maison__intro {
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.55;
  color: var(--charbon);
}

@media (min-width: 900px) {
  .maisons__grille {
    grid-template-columns: repeat(3, 1fr);
  }
  .maison {
    border-bottom: 0;
    border-right: 2px solid var(--charbon);
  }
  .maison:last-child {
    border-right: 0;
  }
}

/* --- Grille de cartes ---------------------------------------------------
   1 colonne sous 560, 2 jusqu'à 900, 3 au-delà. Jamais 4. */

.dernieres__titre {
  color: var(--charbon-clair);
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 3);
}

.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--u) * 4) calc(var(--u) * 3);
  margin: 0 0 calc(var(--u) * 4);
  padding-inline: calc(var(--u) * 3);
  list-style: none;
}

@media (min-width: 560px) {
  .grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- La carte ------------------------------------------------------------
   Entièrement cliquable, pas de bouton. L'intro monte haut : c'est ce qu'il
   y a de meilleur sur la carte. La maison descend en pied, c'est de la
   métadonnée. Filet qui épaissit au survol — le seul mouvement prévu ici. */

.carte {
  height: 100%;
}

.carte__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--charbon);
  text-decoration: none;
  border-top: 2px solid var(--charbon);
  padding-top: calc(var(--u) * 2);
}

.carte__lien:hover {
  border-top-width: 6px;
  padding-top: calc(var(--u) * 2 - 4px);
}

.carte__image {
  display: block;
  margin-bottom: calc(var(--u) * 2);
}

/* Le carré. height: 100% est nécessaire : la règle générale img{height:auto}
   plus les attributs width/height du HTML annulent aspect-ratio sans elle. */
.carte__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: 100%;
  object-fit: cover;
}

.carte__titre {
  font-family: var(--titres);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1, "wght" 800;
  font-weight: 800;
  text-transform: lowercase;
  font-size: 1.375rem;
  line-height: 1.08;
  color: var(--rouge);
  margin: 0 0 var(--u);
  text-wrap: balance;
}

.carte__intro {
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 calc(var(--u) * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  margin-top: auto;
  padding-top: var(--u);
  color: var(--charbon-clair);
}

/* Onde de quatre barres. Jamais un haut-parleur, jamais un triangle de
   lecture, jamais posée sur l'image. */
.carte__onde {
  display: inline-flex;
  color: var(--rouge);
}

/* --- Fiche : en-tête ---------------------------------------------------- */

.fiche__titre {
  font-family: var(--titres);
  /* Réglage dur. Jamais les valeurs par défaut : Fraunces devient ronde
     et le site glisse vers le blog culinaire. */
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1, "wght" 800;
  font-weight: 800;
  text-transform: lowercase;
  font-size: clamp(2rem, 7vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--rouge);
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 2);
  text-wrap: balance;
}

.fiche__attributs {
  color: var(--charbon-clair);
  margin: 0 0 calc(var(--u) * 3);
}

/* Registre 2 bis : l'intro, reprise telle quelle sur les cartes */
.fiche__intro {
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  margin: 0 0 calc(var(--u) * 4);
}

/* --- L'image : au bord de l'écran --------------------------------------- */

.fiche__image {
  margin: 0 0 var(--u);
}

.fiche__image img {
  width: 100%;
}

.fiche__legende {
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--charbon-clair);
  margin: 0 0 calc(var(--u) * 5);
}

/* --- Registre 2 : le récit ---------------------------------------------- */

.recit h2 {
  font-family: var(--titres);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1, "wght" 800;
  font-weight: 800;
  text-transform: lowercase;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--rouge);
  margin: calc(var(--u) * 5) 0 var(--u);
}

.recit p {
  margin: 0 0 calc(var(--u) * 2.5);
}

/* Registre 1 : la parole — italique, filet rouge, sans guillemets */
.recit blockquote {
  margin: calc(var(--u) * 4) 0;
  padding-left: calc(var(--u) * 3);
  border-left: 3px solid var(--rouge);
  font-style: italic;
}

.recit blockquote p:last-child {
  margin-bottom: 0;
}

/* Registre 3 : le mot de lexique — Fraunces, rouge, dans le flux.
   Une bosse typographique, pas un lien. */
.mot {
  font-family: var(--titres);
  font-variation-settings: "opsz" 20, "SOFT" 0, "WONK" 1, "wght" 700;
  color: var(--rouge);
  font-size: 1.02em;
}

a.mot {
  text-decoration: none;
  border-bottom: 1px solid var(--rouge);
}

/* --- Bloc froid : de la mécanique --------------------------------------- */

.bloc-froid {
  margin: calc(var(--u) * 6) 0;
  border-top: 2px solid var(--charbon);
  border-bottom: 2px solid var(--charbon);
  padding: calc(var(--u) * 3) 0;
}

.bloc-froid dl {
  margin: 0 0 calc(var(--u) * 3);
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: var(--u) calc(var(--u) * 2);
  align-items: baseline;
}

.bloc-froid dt {
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--charbon-clair);
}

/* Quantité parlée : elle reste du récit. Literata, pas Bitter. */
.bloc-froid dd {
  margin: 0;
  font-family: var(--texte);
}

/* Quantité chiffrée : c'est de la mécanique. */
.chiffre {
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  font-size: 0.92em;
  letter-spacing: 0.02em;
}

.bloc-froid h2 {
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--charbon-clair);
  margin: 0 0 calc(var(--u) * 1.5);
}

.bloc-froid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bloc-froid li {
  padding: var(--u) 0;
  border-bottom: 2px solid rgba(34, 32, 29, 0.15);
}

.bloc-froid li:last-child {
  border-bottom: 0;
}

/* --- Registre 5 : le trou. Élément signature du site. -------------------
   Pointillé réservé à cet usage unique, et à aucun autre. */

.trou {
  display: block;
  margin: calc(var(--u) * 4) 0;
  padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
  border: 2px dashed var(--rouge);
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  line-height: 1.6;
  color: var(--rouge);
}

/* --- Renvoi vers une autre recette -------------------------------------- */

.renvoi {
  margin: calc(var(--u) * 5) 0 0;
  padding-top: calc(var(--u) * 2);
  border-top: 2px solid var(--charbon);
}

/* --- Mouvement : presque rien ------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .carte__lien {
    transition: border-top-width 120ms linear, padding-top 120ms linear;
  }
  .nav__lien,
  .maison__nom {
    transition: border-bottom-color 120ms linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Impression --------------------------------------------------------- */

@media print {
  body::after {
    display: none;
  }
  .bandeau,
  .nav,
  .pied {
    border-color: #000;
  }
  .nav,
  .pied__liens {
    display: none;
  }
  .propos {
    background: none;
  }
  .fiche__titre,
  .accueil__accroche,
  .carte__titre,
  .maison__nom,
  .recit h2,
  .mot {
    color: #000;
  }
}

/* ==========================================================================
   BLOC B (31/08/2026) — gabarit liste, en-tête éditorial, barre de filtres
   Aucune couleur nouvelle. Aucune forme nouvelle.
   ========================================================================== */

.liste__titre {
  font-family: var(--titres);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1, "wght" 800;
  font-weight: 800;
  text-transform: lowercase;
  font-size: clamp(2rem, 7vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--rouge);
  margin: calc(var(--u) * 6) 0 calc(var(--u) * 2);
  text-wrap: balance;
}

.liste__intro {
  font-size: 19px;
  margin: 0 0 calc(var(--u) * 4);
}

/* --- La barre de filtres -------------------------------------------------
   Registre 4 : de la mécanique. Bitter capitales, filets de 2 px, aucun
   arrondi, aucune ombre. Sur une page maison, le filtre maison n'est pas
   émis dans le HTML : il est pré-appliqué et masqué. */

.filtres {
  border-top: 2px solid var(--charbon);
  border-bottom: 2px solid var(--charbon);
  padding: calc(var(--u) * 2) 0;
  margin-bottom: calc(var(--u) * 4);
}

.filtres__contenu {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2) calc(var(--u) * 3);
  align-items: flex-end;
}

.filtres__groupe {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.5);
  margin: 0;
}

.filtres__label {
  color: var(--charbon-clair);
}

.filtres__select {
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--charbon);
  background: var(--creme);
  border: 2px solid var(--charbon);
  border-radius: 0;
  padding: calc(var(--u) * 0.75) calc(var(--u) * 1.5);
  min-height: 44px;
}

/* État actif : le filet passe en rouge ET s'épaissit. Jamais la seule
   couleur — la charte l'impose pour les filtres au clavier. */
.filtres__select:not([value=""]):focus,
.filtres__select:hover {
  border-color: var(--rouge);
}

.filtres__groupe--case .filtres__label {
  flex-direction: row;
  display: flex;
  align-items: center;
  gap: var(--u);
  color: var(--charbon);
  min-height: 44px;
  cursor: pointer;
}

.filtres__groupe--case input {
  width: 20px;
  height: 20px;
  accent-color: var(--vert);
  margin: 0;
}

.filtres__raz {
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--rouge);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--rouge);
  border-radius: 0;
  padding: 0 0 2px;
  min-height: 44px;
  cursor: pointer;
}

/* Le message de grille vide emprunte la forme du trou : c'est une absence,
   et le pointillé est la forme des absences sur ce site. */
.liste__vide {
  margin-bottom: calc(var(--u) * 6);
}

@media print {
  .filtres {
    display: none;
  }
  .liste__titre {
    color: #000;
  }
}

/* ==========================================================================
   MOBILE (31/08/2026) — débordement horizontal et repli des filtres
   Constaté à 375 px en mode appareil, pas déduit d'une capture.
   ========================================================================== */

/* 1. Le débordement. La nav et la barre de filtres passaient en
   max-width:none et poussaient la page au-delà de la largeur de l'écran :
   « LEXIQUE » coupé au bord droit, le sélecteur Terroir tronqué. */

html,
body {
  overflow-x: hidden;
}

.nav__liste {
  gap: 0 calc(var(--u) * 2.5);
}

/* 2. Les filtres se replient sous 700 px. Fermée, la barre prend une ligne
   au lieu de six : sur un iPhone SE, c'est un écran entier regagné avant la
   première carte. Le Brief note lui-même que les filtres sont décoratifs
   sous 25 recettes — ils n'ont pas à occuper l'ouverture de la page.
   Le dépliable est une forme nouvelle, validée par Mathieu le 31/08. */

.filtres__bascule {
  display: none;
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--charbon);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--charbon);
  border-radius: 0;
  padding: 0 0 2px;
  min-height: 44px;
  cursor: pointer;
}

.filtres__bascule[aria-expanded="true"] {
  color: var(--rouge);
  border-bottom-color: var(--rouge);
}

@media (max-width: 700px) {
  .filtres__bascule {
    display: inline-block;
  }

  .filtres__contenu[hidden] {
    display: none;
  }

  /* Deux colonnes de sélecteurs, chacun prenant sa moitié entière.
     Plus de largeur imposée par le contenu, donc plus de débordement. */
  .filtres__contenu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--u) * 2);
    align-items: end;
    padding-top: calc(var(--u) * 2);
  }

  .filtres__select {
    width: 100%;
    min-width: 0;
  }

  .filtres__groupe--case,
  .filtres__groupe:last-child {
    grid-column: 1 / -1;
  }
}

/* 3. Le titre de section « toutes les recettes » redescend d'un cran sur
   mobile : à 375 px il occupait un tiers de l'écran d'ouverture. */

@media (max-width: 560px) {
  .liste__titre,
  .accueil__accroche {
    font-size: 1.875rem;
  }
}

/* L'en-tête du repli n'a pas de largeur de colonne : c'est de la mécanique. */
.filtres__entete {
  max-width: none;
}

@media (min-width: 701px) {
  .filtres__entete {
    display: none;
  }
}

@media print {
  .filtres__entete {
    display: none;
  }
}

/* ==========================================================================
   MOBILE (31/08/2026) — débordement horizontal et repli des filtres
   Constaté à 375 px en mode appareil, pas déduit d'une capture.
   ========================================================================== */

/* 1. Le débordement. La nav et la barre de filtres passaient en
   max-width:none et poussaient la page au-delà de la largeur de l'écran :
   « LEXIQUE » coupé au bord droit, le sélecteur Terroir tronqué. */

html,
body {
  overflow-x: hidden;
}

.nav__liste {
  gap: 0 calc(var(--u) * 2.5);
}

/* 2. Les filtres se replient sous 700 px. Fermée, la barre prend une ligne
   au lieu de six : sur un iPhone SE, c'est un écran entier regagné avant la
   première carte. Le Brief note lui-même que les filtres sont décoratifs
   sous 25 recettes — ils n'ont pas à occuper l'ouverture de la page.
   Le dépliable est une forme nouvelle, validée par Mathieu le 31/08. */

.filtres__bascule {
  display: none;
  font-family: var(--mecanique);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--charbon);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--charbon);
  border-radius: 0;
  padding: 0 0 2px;
  min-height: 44px;
  cursor: pointer;
}

.filtres__bascule[aria-expanded="true"] {
  color: var(--rouge);
  border-bottom-color: var(--rouge);
}

@media (max-width: 700px) {
  .filtres__bascule {
    display: inline-block;
  }

  .filtres__contenu[hidden] {
    display: none;
  }

  /* Deux colonnes de sélecteurs, chacun prenant sa moitié entière.
     Plus de largeur imposée par le contenu, donc plus de débordement. */
  .filtres__contenu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--u) * 2);
    align-items: end;
    padding-top: calc(var(--u) * 2);
  }

  .filtres__select {
    width: 100%;
    min-width: 0;
  }

  .filtres__groupe--case,
  .filtres__groupe:last-child {
    grid-column: 1 / -1;
  }
}

/* 3. Le titre de section « toutes les recettes » redescend d'un cran sur
   mobile : à 375 px il occupait un tiers de l'écran d'ouverture. */

@media (max-width: 560px) {
  .liste__titre,
  .accueil__accroche {
    font-size: 1.875rem;
  }
}

/* L'en-tête du repli n'a pas de largeur de colonne : c'est de la mécanique. */
.filtres__entete {
  max-width: none;
}

@media (min-width: 701px) {
  .filtres__entete {
    display: none;
  }
}

@media print {
  .filtres__entete {
    display: none;
  }
}