/* ==========================================================================
   BILADI — Feuille de styles principale
   Architecture : @font-face → variables → reset → composants → sections →
   responsive (mobile-first).
   Convention : BEM (.block__element--modifier).
   AUCUNE ombre (box-shadow / drop-shadow / text-shadow) — par requête client.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. @FONT-FACE — Polices locales
   ⚠ HWT Artz est commercial (Hamilton Wood Type) ; le .ttf livré utilise une
   équivalence libre proche (Big Shoulders Display Black). Remplacer le fichier
   `assets/fonts/HWTArtz.ttf` par le vrai fichier si licence disponible.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "HWTArtz";
  src: url("../fonts/HWTArtz.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. VARIABLES (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --color-primary:       #ac291f;
  --color-primary-light: #e30613;
  --color-green-pro:     #458b47;
  --color-yellow:        #eab34a;
  --color-dark:          #373737;
  --color-text:          #2a2a2a;
  --color-kraft:         #e8dcc4;
  --color-kraft-lt:      #f1e7d2;
  --color-white:         #ffffff;

  /* Typographie */
  --font-display: "HWTArtz", "Anton", "Bebas Neue", Impact, sans-serif;
  --font-anton:   "Anton", "Bebas Neue", Impact, sans-serif;
  --font-body:    "Lato", "Inter", system-ui, sans-serif;

  /* Layout */
  --container-max: 1840px;
  --header-height: 88px;

  /* Séparateurs vague */
  --tear-h: 40px;

  /* Chevauchement footer */
  --footer-overlap: clamp(40px, 6vw, 80px);

  /* Effets */
  --radius-md: 14px;
  --radius-lg: 24px;
  --transition: 0.25s ease;

  /* Tokens couleur section — surchargés par chaque section */
  --surtitle-clr: var(--color-dark);
  --title-clr:    var(--color-dark);
  --subtitle-clr: var(--color-text);
  --text-clr:     var(--color-text);
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* L'attribut HTML `hidden` doit toujours masquer l'élément, peu importe
   les autres règles CSS (un `display: flex` plus spécifique peut sinon
   écraser la valeur par défaut du user-agent). */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  /* Police de base un peu plus grosse — toutes les rem en bénéficient */
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

ul {
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. LAYOUT GLOBAL
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  /* Centré et plafonné à 1840 px — au-delà le contenu reste ancré */
  padding-inline: clamp(2rem, 7vw, 8rem);
}

/* --------------------------------------------------------------------------
   5. TYPOGRAPHIE DE SECTION — Système à variables CSS
   Chaque section définit ses propres tokens de couleur (--surtitle-clr,
   --title-clr, --subtitle-clr, --text-clr). Le HTML n'a aucune classe
   de couleur : c'est la section parente qui contrôle tout.
   -------------------------------------------------------------------------- */

/* ── Surtitre <span class="section__surtitle"> ───────────────────────────── */
.section__surtitle {
  display: block;
  font-family: var(--font-anton);
  font-weight: 400;
  font-size: 2.07rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  color: var(--surtitle-clr);
}

/* ── Titre <h2 class="section__title"> ──────────────────────────────────── */
.section__title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  font-size: 5vw;           /* VW uniquement 1400–1840 px — voir §24–§25 */
  color: var(--title-clr);
}

/* ── Sous-titre <p class="section__subtitle"> ────────────────────────────── */
.section__subtitle {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8vw;         /* VW uniquement 1400–1840 px */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0.8rem 0 0.5rem;
  color: var(--subtitle-clr);
}

/* ── Texte / Description <p class="section__text"> ───────────────────────── */
.section__text {
  font-family: var(--font-body);
  font-size: 1.4vw;         /* VW uniquement 1400–1840 px */
  line-height: 1.4;
  margin-top: 1rem;
  margin-bottom: 1.8rem;
  color: var(--text-clr);
}

/* ── Container CTA ───────────────────────────────────────────────────────── */
.section__cta {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}

/* ── Wrapper centré (products, recipes, partners) ────────────────────────── */
.section__header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   6. BOUTONS — Anton Regular, sans ombre
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-anton);
  font-weight: 400;
  font-size: 1.3vw;         /* VW uniquement 1400–1840 px — voir §24–§25 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  /* Forme pilule comme dans la maquette */
  border-radius: 999px;
  transition: transform var(--transition), background-color var(--transition),
    color var(--transition);
  text-align: center;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-primary-light);
  transform: translateY(-2px);
}

.btn--dark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.btn--dark:hover,
.btn--dark:focus-visible {
  background-color: #000;
  transform: translateY(-2px);
}

/* Variante "ghost" : fond transparent, bordure noire fine.
   Hover → fond noir + texte blanc. Utilisé pour le bouton "← RETOUR". */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-text);
  /* Compense l'épaisseur de la bordure pour matcher le padding des autres btn */
  padding: calc(0.7rem - 2px) calc(1.4rem - 2px);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--color-text);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   7. ICÔNES TABLER — réglages globaux
   -------------------------------------------------------------------------- */
.ti {
  display: inline-flex;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   8. HEADER & NAVIGATION
   - Flex space-between : nav gauche à gauche, nav droite à droite, logo absolu centré.
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Couleur kraft unie sans motif */
  /*background: var(--color-kraft-lt);*/
  background: transparent !important;
}

/* Séparateur vague — bas du header, déborde sous la nav vers le hero.
   Forme : double vague S (2 bosses symétriques + vallée centrale).
   Hauteur 32px pour une visibilité prononcée. */

/* Motif kraft texturé — fond du header, fixe avec l'écran */
.header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background-image: url("../img/motifs/kraft-pattern.png");
  background-repeat: repeat-x;
  background-position: bottom center;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
  pointer-events: none;
  z-index: -1; /* derrière le contenu du header */
}

.header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0.6rem clamp(3rem, 7vw, 8rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  position: relative;
  gap: 1rem;
}

/* Logo central : gros + déborde sur la section suivante (slider) */
.header__logo {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -10%);
  display: block;
  z-index: 110;
}

.header__logo img {
  height: clamp(110px, 13vw, 170px);
  width: auto;
  transition: height 0.4s ease, transform var(--transition);
}

/* Logo réduit au scroll — uniquement ≥ 1200px */
@media (min-width: 1200px) {
  .header--scrolled .header__logo img {
    height: 130px;
  }
}

.header__logo:hover img {
  transform: scale(1.04);
}

.header__nav {
  display: flex;
  align-items: center;
}

.header__nav--right {
  gap: 1rem;
}

.nav-list {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  align-items: center;
}

.nav-list__item {
  position: relative;
}

/* nav-list__link → HWTArtz — taille fixe rem (pas de VW) */
.nav-list__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;          /* fixe rem — grand sur PC, tablette et mobile */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 0.5rem 0;
  transition: color var(--transition);
}

.nav-list__link:hover,
.nav-list__link:focus-visible {
  color: var(--color-primary);
}

.nav-list__link--active {
  color: var(--color-primary);
}

.nav-list__chevron {
  font-size: 1rem;
  transition: transform var(--transition);
}

.nav-list__item--has-sub.is-open .nav-list__chevron,
.nav-list__item--has-sub:hover .nav-list__chevron {
  transform: rotate(180deg);
}

/* Sous-menu (dropdown) — fond noir, texte blanc HWTArtz, coins arrondis */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  background-color: var(--color-dark);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.4rem;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
  z-index: 195;
}

.nav-list__item--has-sub:hover .dropdown,
.nav-list__item--has-sub:focus-within .dropdown,
.nav-list__item--has-sub.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown li a {
  display: block;
  padding: 0.25rem 1.2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  transition: color var(--transition), transform var(--transition);
}

.dropdown li a:hover,
.dropdown li a.is-active {
  color: var(--color-primary);
  transform: translateX(4px);
}

/* Bouton recherche */
.header__search {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition), transform var(--transition);
  font-size: 1.15rem;
}

.header__search:hover,
.header__search:focus-visible {
  background-color: var(--color-primary-light);
  transform: scale(1.05);
}

/* Burger (mobile uniquement) */
.header__burger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   9. DRAWER MOBILE
   -------------------------------------------------------------------------- */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}

.mobile-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0; /* derrière le panel */
}

.mobile-drawer__panel {
  z-index: 1; /* au-dessus du backdrop */
}

.mobile-drawer.is-open .mobile-drawer__backdrop {
  opacity: 1;
}

.mobile-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(80%, 340px);
  background: linear-gradient(160deg, #ece1c9 0%, #ddc8a4 100%);
  padding: 5rem 1.5rem 2rem;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  overflow-y: auto;
}

.mobile-drawer.is-open .mobile-drawer__panel {
  transform: translateX(0);
}

.mobile-drawer__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.mobile-drawer__list > li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-drawer__toggle,
.mobile-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: color var(--transition);
}

.mobile-drawer__toggle:hover,
.mobile-drawer__link:hover {
  color: var(--color-primary);
}

.mobile-drawer__plus {
  font-size: 1.2rem;
  transition: transform var(--transition);
}

.mobile-drawer__toggle[aria-expanded="true"] .mobile-drawer__plus {
  transform: rotate(45deg);
}

.mobile-drawer__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding-left: 0.6rem;
}

.mobile-drawer__toggle[aria-expanded="true"] + .mobile-drawer__sub {
  max-height: 400px;
}

.mobile-drawer__sub li a {
  display: block;
  padding: 0.55rem 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  transition: color var(--transition);
}

.mobile-drawer__sub li a:hover {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   10. SECTION HERO / SLIDER
   Architecture track-based (cf. carrousels produits/recettes).
   - .hero__slider  : viewport (overflow:hidden, hauteur fixée).
   - .hero__track   : ruban flex de toutes les slides — translaté en JS.
   - .hero__slide   : 1 image + overlay optionnel ; flex-basis 50% desktop / 100% mobile.
   - .hero__arrow   : flèches prev/next — affichées par JS quand maxIndex > 0.
   Le BO ajoute/retire des <article class="hero__slide"> dans le track ;
   les flèches et l'autoplay s'adaptent automatiquement au nombre de slides.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
}

/* ── Desktop : track flex — 2 slides visibles côte à côte (50% chacune) ── */
.hero__slider {
  position: relative;
  overflow: hidden;
  height: clamp(420px, 52vw, 100%);
}

/* Track : ruban continu de toutes les slides, traduit en JS */
.hero__track {
  display: flex;
  height: 100%;
  /* Transition gérée dynamiquement par JS (inline style) */
}

.hero__slide {
  position: relative;
  flex: 0 0 50%;    /* exactement 50% — 2 slides côte à côte sur desktop */
  overflow: hidden;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Overlay promo : badge + titre + CTA ─────────────────────────────────
   Présent uniquement sur les slides ayant le modifier `hero__slide--promo`.
   Convention back-office : la présence de .hero__overlay dans une slide
   est ce qui distingue une « slide promo » d'une « slide image simple ». */
.hero__overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Desktop : colonne dimensionnée au contenu, centrée horizontalement.
     Les items (badge / titre / CTA) partagent ainsi le même bord gauche
     tout en formant un bloc centré dans le slide. */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - clamp(2rem, 5vw, 5rem) * 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
  z-index: 2;
  pointer-events: none;
}

.hero__badge {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 3.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-primary);
  padding: 0.2em 0.4em;
  transform: rotate(-5deg);
  transform-origin: left center;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 3.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}

.hero__cta {
  pointer-events: auto;
}

/* ── Flèches : cachées sur desktop (les 2 slides sont toujours visibles) ──
   Elles sont réactivées via display:flex dans le breakpoint ≤ 768px. */
.hero__arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-dark);
  color: var(--color-white);
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: background-color var(--transition), transform var(--transition);
  font-size: 1.4rem;
}

.hero__arrow:hover {
  background-color: #000;
  transform: translateY(-50%) scale(1.05);
}

.hero__arrow--prev { left: 2rem; }
.hero__arrow--next { right: 2rem; }

/* --------------------------------------------------------------------------
   11. SÉPARATEURS DE SECTION — propriétés communes aux vagues ::before
   Seuls background-color et mask-image varient par section.
   -------------------------------------------------------------------------- */
.products::before,
.recipes::before,
.community::before,
.locator::before,
.pro::before,
.partners::before,
.story--confidence::before,
.story--vision::before,
.story--ambition::before,
.commitments::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--tear-h);
  pointer-events: none;
  transform: translateY(-99%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   12. SECTION TRUST (marque de confiance — fond sombre)
   -------------------------------------------------------------------------- */
.trust {
  position: relative;
  background-color: var(--color-dark);
  color: var(--color-white);
  padding: 130px 30px;
  overflow: hidden;
  /* ── Couleurs section ── */
  --surtitle-clr:  var(--color-white);
  --title-clr:     var(--color-primary);
  --subtitle-clr:  rgba(255,255,255,0.8);
  --text-clr:      var(--color-white);
}

.trust__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.trust__bg img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  object-position: right center;
  opacity: 1; /* image pleine — le dégradé gère la transition */
}

.trust__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Fondu horizontal : plein à gauche → transparent à droite,
     laisse la photo s'exprimer sur ~40 % droits. */
  background: linear-gradient(90deg, var(--color-dark) 50%, var(--color-dark) 30%, rgba(31, 31, 31, 0.6) 100%, rgba(31, 31, 31, 0) 68%);
}

.trust__inner {
  position: relative;
  z-index: 1;
}

.trust__content {
  max-width: 50%;
}

.trust__text {
  margin: 1.2rem 0 1.8rem;
  /* couleur portée par section__text--white dans le HTML */
}

/* --------------------------------------------------------------------------
   13. SECTION PRODUITS — fond BLANC + vague subtile en haut
   -------------------------------------------------------------------------- */
.products {
  position: relative;
  background-color: var(--color-white);
  padding: clamp(3rem, 7vw, 5rem) 0;
  /* ── Couleurs section ── */
  --surtitle-clr:  var(--color-dark);
  --title-clr:     var(--color-primary);
  --text-clr:      var(--color-text);
}

/* Vague PRODUITS — variante A : 2 bumps doux et symétriques */
.products::before {
  background-color: var(--color-white);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 11 C 200 4 400 4 600 11 C 800 18 1000 18 1200 11 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 11 C 200 4 400 4 600 11 C 800 18 1000 18 1200 11 L 1200 18 Z'/></svg>");
}

/* Wrap : position relative pour ancrer les flèches absolues */
.products__carousel,
.recipes__carousel {
  position: relative;
}

/* Gap uniforme pour les recettes (surcharge le clamp du track générique) */
.recipes__carousel .carousel__track {
  gap: clamp(2rem, 4vw, 4rem);
}

/* Viewport : pleine largeur du wrap (les flèches sont hors du flux) */
.carousel__viewport {
  width: 100%;
  overflow: hidden;
  padding: 0.6rem 0;
}

/* Track = ruban horizontal de cartes, déplacé via translateX par le JS. */
.carousel__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.product-card {
  /* Largeur calculée par le JS pour pile N cartes visibles, sans rognement. */
  flex: 0 0 var(--card-w, 240px);
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: rotate(4deg) translateY(-6px);
}

.product-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.product-card__media img {
  position: relative;
  max-width: 92%;
  max-height: 100%;
  object-fit: contain;
  z-index: 1;
  /* Ombre portée au repos — suit le contour du packaging (drop-shadow) */
  /*filter: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.18));*/
  filter: drop-shadow(10px 10px 12px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.product-card:hover .product-card__media img {
  transform: scale(1.04) rotate(4deg) translateY(-6px);
}

/* Flèches carrousel — même style et position que .hero__arrow */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: background-color var(--transition), transform var(--transition);
  font-size: 1.4rem;
}

.carousel__arrow:hover {
  background-color: #000;
  transform: translateY(-50%) scale(1.05);
}

.carousel__arrow--prev { left: 2rem; }
.carousel__arrow--next { right: 2rem; }

.products__cta,
.recipes__cta {
  text-align: center;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   14. SECTION RECETTES (rouge) — vague subtile en haut
   Surtitre noir, titre blanc, bouton noir.
   -------------------------------------------------------------------------- */
.recipes {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  /* ── Couleurs section ── */
  --surtitle-clr:  var(--color-dark);
  --title-clr:     var(--color-white);
  --text-clr:      var(--color-white);
}

/* Vague RECETTES — variante B : asymétrique, amplitudes variées */
.recipes::before {
  background-color: var(--color-primary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 13 C 200 22 400 4 600 11 C 800 18 1000 6 1200 14 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 13 C 200 22 400 4 600 11 C 800 18 1000 6 1200 14 L 1200 18 Z'/></svg>");
}

/* Carte recette : fond blanc, image arrondie haut, body avec titre + meta
   Élément <a> : la card entière est cliquable vers la page recette. */
.recipe-card {
  /* Largeur calculée par le JS pour pile N cartes visibles, sans rognement. */
  flex: 0 0 var(--card-w, 240px);
  min-width: 0;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;          /* clipping → zoom interne propre */
  display: flex;
  flex-direction: column;
  /* Reset link defaults */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.recipe-card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

.recipe-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0rem 0rem 1.5rem 1.5rem;
  transition: transform 0.5s ease;
}

/* Hover : zoom intérieur uniquement (pas de rotation, pas de translation card) */
.recipe-card:hover .recipe-card__image {
  transform: scale(1.08);
}

.recipe-card__body {
  padding: 1rem;
  text-align: center;
}

.recipe-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-primary);
}

.recipe-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  font-family: var(--font-anton);
  letter-spacing: 0.04em;
  color: var(--color-text);
  font-size: 1.1rem;
}

.recipe-card__meta li {
  display: inline-flex;
  align-items: end;
  gap: 0.5rem;
  font-weight: 300;
  font-family: var(--font-body);
  text-transform: lowercase;
  margin-top: 0.44rem;
}

.recipe-card__meta span {
  font-weight: 300;
}

.recipe-card__meta .ti {
  color: var(--color-text);
  font-size: 2rem;
}

/* Durée : couleur rouge primaire */
.recipe-card__time {
  /*color: var(--color-primary);*/
}

/* --------------------------------------------------------------------------
   15. SECTION COMMUNAUTÉ (jaune) — vague subtile en haut
   @BILADI_HALAL en blanc, titre rouge, description blanche.
   -------------------------------------------------------------------------- */
.community {
  position: relative;
  /* overflow-x clip (pas hidden) : contient le débord horizontal de l'image
     à 130% SANS couper la vague ::before qui déborde vers le haut.
     `overflow: hidden` reste en fallback pour les très vieux navigateurs. */
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--color-yellow);
  padding: 130px 30px;
  /* ── Couleurs section ── */
  --surtitle-clr:  var(--color-white);
  --title-clr:     var(--color-primary);
  --subtitle-clr:  var(--color-dark);
  --text-clr:      var(--color-dark);
}

/* Vague COMMUNAUTÉ — variante D : grande courbe douce */
.community::before {
  background-color: var(--color-yellow);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 400 2 800 2 1200 14 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 400 2 800 2 1200 14 L 1200 18 Z'/></svg>");
}

.community__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* @BILADI_HALAL — layout uniquement, couleur via section__surtitle--white */
.community__handle {
  display: inline-block;
}

/* Texte communauté — layout uniquement, couleur via section__text--* */
.community__text {
  max-width: 540px;
}

/* ── Visuel partagé — community, locator, pro ──────────────────────────────── */
.section__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section__visual img {
  width: 130%;
  max-width: 130%;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   16. SECTION LOCATOR (sombre) — vague subtile en haut
   BILADI blanc, titre rouge, lead + description blancs, bouton rouge.
   -------------------------------------------------------------------------- */
.locator {
  position: relative;
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--color-dark);
  color: var(--color-white);
  padding: 130px 30px;
  /* ── Couleurs section ── */
  --surtitle-clr:  var(--color-white);
  --title-clr:     var(--color-primary);
  --subtitle-clr:  var(--color-white);
  --text-clr:      var(--color-white);
}

/* Vague LOCATOR — variante C : multi-vaguelets */
.locator::before {
  background-color: var(--color-dark);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 12 Q 150 6 300 12 T 600 12 T 900 12 T 1200 12 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 12 Q 150 6 300 12 T 600 12 T 900 12 T 1200 12 L 1200 18 Z'/></svg>");
}

.locator__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* locator label → couleur via section__surtitle--white dans le HTML */

.locator__lead {
  /* couleur via section__subtitle--white dans le HTML */
}

.locator__text {
  max-width: 600px;
  /* couleur via section__text--white dans le HTML */
}

/* --------------------------------------------------------------------------
   17. SECTION PRO (vert) — vague subtile en haut
   Surtitre noir, titre blanc, bouton rouge.
   -------------------------------------------------------------------------- */
.pro {
  position: relative;
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--color-green-pro);
  color: var(--color-white);
  padding: 130px 30px;
  /* ── Couleurs section ── */
  --surtitle-clr:  var(--color-dark);
  --title-clr:     var(--color-white);
  --subtitle-clr:  rgba(255,255,255,0.85);
  --text-clr:      var(--color-white);
}

/* Vague PRO — variante B inversée */
.pro::before {
  background-color: var(--color-green-pro);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 200 6 400 22 600 13 C 800 4 1000 22 1200 11 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 200 6 400 22 600 13 C 800 4 1000 22 1200 11 L 1200 18 Z'/></svg>");
}

.pro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* pro__pre — layout uniquement, couleur via section__surtitle--dark dans le HTML */
.pro__pre {
  display: block;
}

.pro .section__title {
  margin-bottom: 1.6rem;
}

/* --------------------------------------------------------------------------
   18. SECTION PARTENAIRES — fond BLANC + vague subtile en haut
   -------------------------------------------------------------------------- */
.partners {
  position: relative;
  background-color: var(--color-white);
  padding: 130px 30px;
  /* ── Couleurs section ── */
  --surtitle-clr:  var(--color-dark);
  --title-clr:     var(--color-primary);
  --text-clr:      var(--color-text);
}

/* Vague PARTENAIRES — variante D inversée */
.partners::before {
  background-color: var(--color-white);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 6 C 400 24 800 24 1200 6 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 6 C 400 24 800 24 1200 6 L 1200 18 Z'/></svg>");
}

.partners__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.partners__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners__item img {
  max-height: 110px;
  width: auto;
  transition: transform var(--transition);
}

.partners__item:hover img {
  transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   19. FOOTER (incluant le bandeau signature logo + slogan en haut)
   - Bord déchiré kraft à son sommet (pseudo ::before, bumps vers le haut)
   - Fond kraft légèrement plus marqué pour faire ressortir la vague
   - 3 colonnes : SUIVEZ-NOUS (réseaux noirs) | liens | mentions légales
   -------------------------------------------------------------------------- */

/* Bord déchiré kraft — haut du footer, bumps pointant vers le haut (miroir du header) */

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  /* On montre uniquement le bas de l'image (la vague) */
  background: url("../img/motifs/kraft-pattern-2.png") repeat-x center top;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
  pointer-events: none;
  z-index: 0;
}

.footer {
  position: relative;
  /*background-color: var(--color-kraft-lt);*/
  padding-top: clamp(1rem, 1vw, 1rem);
  margin-top: calc(-1 * var(--footer-overlap));
  z-index: 2;
}

.footer > * {
  position: relative;
  z-index: 1;
}

/* La dernière section de chaque page reçoit automatiquement un padding-bottom
   suffisant pour que son fond s'étende sous le kraft du footer sans rogner
   le contenu visible. */
main > *:last-child {
  padding-bottom: calc(var(--footer-overlap) + clamp(2rem, 4vw, 4rem));
}

/* nos-produits.html : les sections sont générées dans un wrapper
   [data-products-sections]. Ce wrapper étant transparent, lui appliquer le
   padding d'overlap créait une bande blanche sous le footer (le fond coloré
   de la section ne descendait pas jusqu'à la vague kraft). On reporte donc
   l'overlap sur la SECTION elle-même (qui porte la couleur + la vague). */
main > [data-products-sections]:last-child {
  padding-bottom: 0;
}
[data-products-sections] > .product-section:last-child {
  padding-bottom: calc(var(--footer-overlap) + clamp(2rem, 4vw, 4rem));
}
/* Vue filtrée : seule la section .is-visible est affichée (peu importe sa
   position) — c'est elle qui doit porter l'overlap coloré. */
.page--products.is-filtered [data-products-sections] > .product-section.is-visible {
  padding-bottom: calc(var(--footer-overlap) + clamp(2rem, 4vw, 4rem));
}

/* Bandeau signature : logo Biladi + image slogan "Fièrement Authentique" */
.footer__signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  flex-wrap: wrap;
  padding: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 5vw, 5rem) clamp(2rem, 4vw, 3rem);
}

.footer__signature-logo {
  height: clamp(210px, 12vw, 380px);
  width: auto;
}

.footer__signature-slogan {
  height: clamp(290px, 18vw, 550px);
  width: auto;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr 1.4fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem;
  align-items: start;
}

.footer__title {
  font-family: var(--font-display);
  font-size: 1.5rem;          /* fixe rem */
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
  color: var(--color-text);
  text-transform: uppercase;
}

.footer__social {
  display: flex;
  gap: 0.7rem;
}

/* Réseaux sociaux : cercles sombres — icône Tabler outline bien visible */
.footer__social a {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: var(--color-dark);
  /*border: 2px solid var(--color-dark);*/
  color: var(--color-kraft-lt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), background-color var(--transition),
    color var(--transition);
  /* Taille suffisamment grande pour que les traits outline Tabler soient lisibles */
  font-size: 2rem;
  line-height: 1;
}
.footer__social a:hover {
  background-color: var(--color-primary);
  /*border-color: var(--color-primary);*/
  color: var(--color-white);
  transform: translateY(-3px);
}

/* Taille mobile gérée dans §24 */

.footer__col--links {
  display: flex;
  gap: 4rem;
  justify-content: center;
  align-items: flex-start;
}

.footer__links li {
  margin-bottom: 0.7rem;
}

.footer__links a {
  font-family: var(--font-display);
  font-size: 1.5rem;          /* fixe rem — grand sur tous les écrans */
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-transform: uppercase;
  transition: color var(--transition);
}

.footer__links a:hover {
  color: var(--color-primary);
}

.footer__legal {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;         /* fixe rem */
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
  color: var(--color-text);
  text-transform: uppercase;
  line-height: 1.5;
}

.footer__bottom {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 1rem clamp(1.5rem, 7vw, 10rem) 2rem;
  font-family: var(--font-body);
  font-weight: 700;
  text-align: start;
  font-size: 0.9rem;          /* fixe rem */
  letter-spacing: 0.12em;
  color: var(--color-text);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   20. ANIMATIONS DE RÉVÉLATION (activées par JS via .js-ready)
   -------------------------------------------------------------------------- */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   21. RESPONSIVE — Petit desktop (max-width: 1399px)
   Typo VW → rem fixe. Légers ajustements layout.
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) {
  /* Typo intermédiaire */
  .section__title    { font-size: 3.5rem; }
  .section__subtitle { font-size: 1.4rem; }
  .section__surtitle { line-height: 1.1; }
	
  .btn               { font-size: 1.3rem; padding: 0.85rem 1.7rem; }

  /* Layout */
  .trust__content { max-width: 60%; }
}

/* --------------------------------------------------------------------------
   22. RESPONSIVE — Tablette paysage (max-width: 1199px)
   Paddings réduits, logo légèrement plus petit.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .header__logo img  { height: clamp(110px, 11vw, 140px); }

  .trust,
  .community,
  .locator,
  .pro,
  .partners { padding-top: 80px; padding-bottom: 80px; }

  /* Typo — uniquement les valeurs spécifiques à ce breakpoint
     (les autres sont héritées du breakpoint 1399px ci-dessus) */
  .section__text { font-size: 1.1rem; }

  .footer__title    { font-size: 1.3rem; }
  .footer__links a  { font-size: 1.3rem; }
  .footer__social a { width: 55px; height: 55px; font-size: 1.8rem; }
}

/* --------------------------------------------------------------------------
   23. RESPONSIVE — Tablette portrait (max-width: 992px)
   Grilles 2 colonnes → 1 colonne, sections empilées.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .hero__arrow,
  .carousel__arrow {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }
  
  .hero__badge { font-size: 1.5rem; }
  .hero__title { font-size: 1.8rem; }
  .hero__cta   { font-size: 1rem; }
	
  .section__visual img { margin-top: -20px; }

  /* Sections 2 col → 1 col */
  .community__inner,
  .locator__inner,
  .pro__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .community__content,
  .locator__content,
  .pro__content,
  .trust__content {
    margin-inline: auto;
  }

  /* TRUST mobile — image en bas du bouton, fondu vers le haut */
  .trust {
    padding: 3rem 0 0;
    min-height: auto;
    display: flex;
    flex-direction: column-reverse;
  }
	
  .trust__inner   { padding-bottom: 2rem; text-align: center; }

  .trust__content { max-width: 100%; margin-inline: auto; }

  .trust__bg {
    position: relative;
    inset: auto;
    width: 100%;
    flex: 1;
    margin-top: 2rem;
    overflow: hidden;
  }
	
  .trust__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Fondu vertical */
    background: linear-gradient(180deg, var(--color-dark) 1%, var(--color-dark) 1%, rgba(31, 31, 31, 0) 100%, rgba(31, 31, 31, 0) 100%);
  }

  /* Typo intermédiaire */
  .section__title    { font-size: 3.5rem; }
  .section__subtitle { font-size: 1.4rem; }
  .section__surtitle { line-height: 1; }
  .section__text    { font-size: 1.2rem; }
	
  /* Footer layout */
  .footer__inner      { grid-template-columns: 1fr; text-align: center; }
  .footer__signature-slogan  { width: 70%; height: auto; margin-top: -80px; }
  .footer__col--social {margin-top: -80px; }
  .footer__social     { justify-content: center; }
  .footer__col--links { justify-content: center; }
  .footer__links      { text-align: left; }       /* centré seulement ≤480px */
  .footer__title      { font-size: 1.6rem; }
  .footer__links a    { font-size: 1.5rem; }
  .footer__legal      { font-size: 0.72rem; }
  .footer__social a   { width: 60px; height: 60px; font-size: 2.2rem; }
  .footer__bottom   { text-align: center; }

  /* Hero/carousels — reset image débordante */
  .section__visual img { width: 100%; max-width: 100%; }
	
}

/* --------------------------------------------------------------------------
   24. RESPONSIVE — Mobile (max-width: 768px)
   Layout + typographie mobile — breakpoint fusionné.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Header */
  .header__inner {
    min-height: 64px;
    padding: 0.4rem 1rem;
  }
	
  .hero__badge { font-size: 1.8rem; }
  .hero__title { font-size: 2.5rem; }
  .hero__cta   { font-size: 1.2rem !important; }

  .header__logo img { height: clamp(120px, 10vw, 120px); }

  .header__burger              { display: inline-flex; }
  .header__nav--left           { display: none; }
  .header__nav--right .nav-list { display: none; }
  .header__nav--right          { gap: 0; }

  /* ── Hero mobile : 1 slide à la fois (track translate via JS) ── */
  .hero__slider {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* Chaque slide prend 100% du slider (1 par vue) */
  .hero__slide {
    flex: 0 0 100%;
  }

  /* Overlay : contenu centré en mobile (badge + titre + CTA).
     Reset du centrage desktop (left/transform/width) pour reprendre
     l'inset:0 et permettre au padding-inline de placer le contenu. */
  .hero__overlay {
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    max-width: none;
    padding-inline: clamp(4.5rem, 10vw, 7rem);
    align-items: center;
    text-align: center;
  }

  .hero__badge {
    align-self: center;
    transform-origin: center center;
  }

  .hero__cta {
    align-self: center;
  }

  /* Flèches hero — taille mobile (visibilité gérée par JS) */
  .hero__arrow {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .carousel__arrow {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  /* Typographie mobile */
  .section__title    { font-size: 3.5rem;  }
  .section__subtitle { font-size: 1.2rem;  }
  .section__text     { font-size: 1.1rem; }
  .section__surtitle { font-size: 1.25rem; }
	
  .btn               { font-size: 1.3rem; padding: 0.85rem 1.7rem; }

  /* Footer typo */
  .footer__signature         { flex-direction: column; text-align: center; }
  .footer__signature-logo    { width: 40%; height: auto; }
  .footer__signature-slogan  { width: 80%; height: auto; margin-top: -40px; }
  .footer__col--social       { margin-top: -40px; }
  .header__search            { font-size: 1.15rem; }

  /* Vagues plus subtiles en mobile */
  :root { --tear-h: 12px; }
}

/* --------------------------------------------------------------------------
   25. RESPONSIVE — Petit mobile (max-width: 480px)
   Téléphones compacts — typographie et espacements resserrés.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Padding-inline resserré pour éviter le débord horizontal causé
     par les boutons à largeur fixe (CTA, btn--primary, etc.). */
  .container.pro__inner { padding-inline: 1rem !important; }

  /* Header */
  .header__inner    { padding: 0.4rem 0.75rem; }
  .header__logo img { height: clamp(110px, 8vw, 120px); }

  .hero__badge { font-size: 1.2rem; }
  .hero__title { font-size: 1.8rem; }
  .hero__cta   { font-size: 0.8rem !important; padding: 0.6rem 1rem !important;  }

  /* Hero / carrousels — flèches plus petites sur petit mobile
     (le ratio 4/5 du slider est déjà hérité du breakpoint 768px) */
  .hero__arrow,
  .carousel__arrow {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  /* Sections — padding resserré */
  
  .community,
  .locator,
  .pro,
  .partners { padding-top: 4.5rem; padding-bottom: 4.5rem; }

  /* Typographie */
  .section__title    { font-size: 2.9rem;  }
  .section__subtitle { font-size: 1.15rem; }
  .section__text     { font-size: 0.9rem;  }
  .section__surtitle { font-size: 1.25rem; }
	
  .btn               { font-size: 1.1rem; padding: 0.85rem 1.7rem; }

  /* Footer */
  .footer__col--links { flex-direction: column; align-items: center; gap: 0; }
  .footer__links      { text-align: center; }
  .footer__legal      { font-size: 0.72rem; }
  .footer__social a   { width: 50px; height: 50px; font-size: 1.5rem; }
  .footer__bottom     { font-size: 0.8rem; }
}

/* --------------------------------------------------------------------------
   26. RESPONSIVE — Grand écran (min-width: 1841px)
   Au-delà de 1840 px le VW est plafonné : tailles calculées à 1840 px.
   -------------------------------------------------------------------------- */
@media (min-width: 1841px) {
  .section__title    { font-size: 5.75rem;  } /* = 5vw   × 1840 / 16 */
  .section__subtitle { font-size: 2.07rem;  } /* = 1.8vw × 1840 / 16 */
  .section__text     { font-size: 1.27rem; line-height: 1.5;  } /* = 1.1vw × 1840 / 16 */
	
  .btn               { font-size: 1.5rem;   } /* = 1.3vw × 1840 / 16 */
	
  .footer__links      { text-align: left; }       /* centré seulement ≤480px */
  .footer__title      { font-size: 1.5rem; }
  .footer__links a    { font-size: 1.5rem; }
  .footer__legal      { font-size: 0.72rem; }
}

/* --------------------------------------------------------------------------
   27. ACCESSIBILITÉ — Respecte la préférence "reduce motion" du système.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   28. PAGE NOS PRODUITS — bannière de page, filtres et grille produits
   Page autonome (nos-produits.html) qui réutilise header/footer et tokens.
   Contient :
   - .page-banner       : bannière kraft sous le header (titre + breadcrumb)
   - .filters           : barre de filtres pilule + bouton "Effacer"
   - .product-section   : section couleur par catégorie (poulet/boeuf/...)
   - .product-grid      : grille 4/3/2/1 colonnes selon viewport
   - .product-tile      : carte produit avec image + bouton "VOIR LE PRODUIT"
   ========================================================================== */

/* ── Bannière de page (sous le header, fond kraft continu) ───────────────── */
.page-banner {
  position: relative;
  padding: clamp(3rem, 9vw, 7.5rem) 0 clamp(2.5rem, 6vw, 5rem);
  text-align: center;
  background-color: var(--color-primary);
  color: var(--color-white);
}

.page-banner__inner {
  position: relative;
  z-index: 1;
}

.page-banner__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 5.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}

.page-banner__breadcrumb {
  margin-top: 0.6rem;
  font-family: var(--font-anton);
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
}

.page-banner__breadcrumb a {
  color: var(--color-dark);
  transition: color var(--transition);
}

.page-banner__breadcrumb a:hover {
  color: var(--color-kraft-lt);
  /*text-decoration: underline;*/
}

.page-banner__sep {
  display: inline-block;
  margin: 0 0.4em;
}

/* ── Barre de filtres ─────────────────────────────────────────────────────── */
.filters {
  background-color: var(--color-white);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
  padding-top: 60px;
  padding-bottom: 60px;
}

.filters__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.filters__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.filter-pill {
  font-family: var(--font-anton);
  font-size: clamp(0.95rem, 1.05vw, 1.15rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  background-color: var(--color-dark);
  color: var(--color-white);
  transition: background-color var(--transition), transform var(--transition);
  white-space: nowrap;
}

.filter-pill:hover,
.filter-pill:focus-visible {
  background-color: #000;
  transform: translateY(-2px);
}

.filter-pill.is-active {
  background-color: var(--color-primary);
}

.filter-pill.is-active:hover,
.filter-pill.is-active:focus-visible {
  background-color: var(--color-primary-light);
}

.filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-anton);
  font-size: clamp(0.85rem, 0.95vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1.3rem;
  border-radius: 999px;
  background-color: var(--color-white);
  color: var(--color-text);
  border: 2px solid var(--color-text);
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.filter-clear:hover,
.filter-clear:focus-visible {
  background-color: var(--color-text);
  color: var(--color-white);
  transform: translateY(-2px);
}

.filter-clear[hidden] {
  display: none;
}

.filter-clear .ti {
  font-size: 1.1rem;
}

/* ── Section produits — pattern commun ────────────────────────────────────── */
.product-section {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
}

/* Vague de transition au-dessus de chaque section (cf. section 11) —
   identique aux sections homepage : ::before positionné en haut, translaté
   de -99% pour déborder vers la section précédente. Couleur héritée de la
   section, le mask SVG dessine la forme de vague. */
.product-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--tear-h);
  pointer-events: none;
  transform: translateY(-99%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 1;
}

.product-section .section__header {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.product-section .section__surtitle {
  font-size: clamp(1rem, 1.2vw, 1.3rem);
  letter-spacing: 0.15em;
}

.product-section .section__title {
  font-size: clamp(2.6rem, 5vw, 5.75rem);
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

/* Icône optionnelle de titre de section (champ `icon` de la catégorie).
   Emoji rendu nativement (couleur propre). Ex : ❄️ pour Le Poulet (surgelé). */
.section__title-icon {
  font-size: 0.7em;
  color: #6ec3e8;
  line-height: 1;
}
/* Alias historique (titre poulet) — conservé pour compat éventuelle */
.snowflake {
  color: #6ec3e8;
  font-size: 0.7em;
  line-height: 1;
}

/* ── Thèmes de section (palette fixe) ──────────────────────────────────────
   Le fond, les couleurs de titre/surtitre et la vague sont déterminés par le
   `theme` de la catégorie (products.js) — appliqué en classe
   `.product-section--theme-{theme}` par initProductsListPage().

   AJOUTER UNE NOUVELLE COULEUR/VAGUE : dupliquer un bloc ci-dessous en
   changeant le nom du thème, la couleur et le path SVG du masque, puis
   ajouter l'option correspondante dans l'éditeur de catégories de l'admin
   (admin/js/products.js → THEME_OPTIONS). Réutiliser un thème existant pour
   une nouvelle catégorie ne demande AUCUNE modification CSS. */

/* BLANC — fond clair, vague A (2 bumps doux et symétriques, cf. .products) */
.product-section--theme-blanc {
  background-color: var(--color-white);
  --surtitle-clr: var(--color-dark);
  --title-clr:    var(--color-primary);
}
.product-section--theme-blanc::before {
  background-color: var(--color-white);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 11 C 200 4 400 4 600 11 C 800 18 1000 18 1200 11 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 11 C 200 4 400 4 600 11 C 800 18 1000 18 1200 11 L 1200 18 Z'/></svg>");
}

/* SOMBRE — fond gris foncé, texte blanc, vague C (multi-vaguelets, cf. .locator) */
.product-section--theme-sombre {
  background-color: var(--color-dark);
  color: var(--color-white);
  --surtitle-clr: var(--color-white);
  --title-clr:    var(--color-primary-light);
}
.product-section--theme-sombre::before {
  background-color: var(--color-dark);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 12 Q 150 6 300 12 T 600 12 T 900 12 T 1200 12 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 12 Q 150 6 300 12 T 600 12 T 900 12 T 1200 12 L 1200 18 Z'/></svg>");
}

/* ROUGE — fond rouge brique, texte blanc, vague B (asymétrique, cf. .recipes) */
.product-section--theme-rouge {
  background-color: var(--color-primary);
  color: var(--color-white);
  --surtitle-clr: var(--color-dark);
  --title-clr:    var(--color-white);
}
.product-section--theme-rouge::before {
  background-color: var(--color-primary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 13 C 200 22 400 4 600 11 C 800 18 1000 6 1200 14 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 13 C 200 22 400 4 600 11 C 800 18 1000 6 1200 14 L 1200 18 Z'/></svg>");
}

/* JAUNE — fond jaune, vague D (grande courbe douce, cf. .community) */
.product-section--theme-jaune {
  background-color: var(--color-yellow);
  --surtitle-clr: var(--color-white);
  --title-clr:    var(--color-primary);
}
.product-section--theme-jaune::before {
  background-color: var(--color-yellow);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 400 2 800 2 1200 14 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 400 2 800 2 1200 14 L 1200 18 Z'/></svg>");
}

/* VERT — fond vert, texte blanc, vague B inversée (cf. .pro homepage) */
.product-section--theme-vert {
  background-color: var(--color-green-pro);
  color: var(--color-white);
  --surtitle-clr: var(--color-dark);
  --title-clr:    var(--color-white);
}
.product-section--theme-vert::before {
  background-color: var(--color-green-pro);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 200 6 400 22 600 13 C 800 4 1000 22 1200 11 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 200 6 400 22 600 13 C 800 4 1000 22 1200 11 L 1200 18 Z'/></svg>");
}

/* ── Grille produits — 4 / 3 / 2 / 1 colonnes selon viewport ─────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
  padding: 0;
}

/* Variante : un seul produit centré (Le Pain) */
.product-grid--single {
  grid-template-columns: repeat(4, 1fr);
}

.product-grid--single .product-grid__item {
  grid-column: 1 / span 1;
}

.product-grid__item {
  display: flex;
}

/* ── Carte produit — image + bouton CTA ──────────────────────────────────── */
.product-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.product-tile__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.product-tile__media img {
  max-width: 92%;
  max-height: 100%;
  object-fit: contain;
  /* Ombre portée — suit le contour du packaging (drop-shadow autorisé) */
  /*filter: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.18));*/
  filter: drop-shadow(10px 10px 12px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.product-tile:hover .product-tile__media img,
.product-tile:focus-visible .product-tile__media img {
  transform: scale(1.04) rotate(4deg) translateY(-6px);
}

.product-tile__cta {
  pointer-events: none;
  font-size: clamp(0.85rem, 1vw, 1rem);
  padding: 0.55rem 1.2rem;
  letter-spacing: 0.06em;
}

.product-tile:hover .product-tile__cta,
.product-tile:focus-visible .product-tile__cta {
  background-color: var(--color-primary-light);
  transform: translateY(-2px);
}

/* Variante "light" du bouton — pour fond rouge (section Pain) */
.btn--light {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.btn--light:hover,
.btn--light:focus-visible {
  background-color: var(--color-kraft-lt);
  color: var(--color-primary-light);
  transform: translateY(-2px);
}

.product-tile:hover .btn--light,
.product-tile:focus-visible .btn--light {
  background-color: var(--color-kraft-lt);
  color: var(--color-primary-light);
}

/* ── Placeholder "bientôt disponible" (sections Asiatique / Pro) ─────────── */
.product-grid__placeholder {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2.5rem) 1rem;
}

.product-grid__placeholder-text {
  font-family: var(--font-anton);
  font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}

/* ── Filtrage actif : masque toutes les sections sauf celle ciblée ────────── */
.page--products.is-filtered .product-section { display: none; }
.page--products.is-filtered .product-section.is-visible { display: block; }

/* Filtres recettes — même comportement que produits */
.page--recipes.is-filtered .recipes-section { display: none; }
.page--recipes.is-filtered .recipes-section.is-visible { display: block; }

/* ── Responsive — grille produits ─────────────────────────────────────────── */
@media (max-width: 1399px) {
  .product-grid           { grid-template-columns: repeat(3, 1fr); }
  .product-grid--single   { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
  .product-grid           { grid-template-columns: repeat(2, 1fr); }
  .product-grid--single   { grid-template-columns: repeat(2, 1fr); }

  .product-section        { padding: 3rem 0; }
  .product-section .section__title { font-size: clamp(2.4rem, 6vw, 3.5rem); }
}

@media (max-width: 768px) {
  /* Filtres : scrollable horizontalement */
  .filters__pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0.4rem 1rem;
    width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filters__pills::-webkit-scrollbar { display: none; }

  .filter-pill {
    flex: 0 0 auto;
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
  }

  .product-grid,
  .product-grid--single   { grid-template-columns: 1fr; gap: 1.5rem; }

  .page-banner            { padding: 5rem 0 2rem; }
  .page-banner__title     { font-size: 2.4rem; }
  .page-banner__breadcrumb { font-size: 0.85rem; }
}

@media (max-width: 480px) {
  .product-section        { padding: 2.5rem 0; }
  .product-section .section__title { font-size: 2.4rem; }
  .filter-pill            { padding: 0.55rem 1rem; font-size: 0.9rem; }
}

/* ==========================================================================
   29. PAGE DÉTAIL PRODUIT (produit.html)
   Layout 2 colonnes :
   - Gauche : packaging produit, fond blanc
   - Droite : titre + description + 3 accordéons, fond gris clair
   + Section "Dans la même gamme" (rouge, carrousel)
   + Section "Nos distributeurs" (sombre, logos)
   ========================================================================== */

/* ── Layout 2 colonnes ───────────────────────────────────────────────────── */
.product-detail {
  position: relative;
  background-color: var(--color-white);
}

/* Bouton "← RETOUR" — premier élément de la colonne droite, auto-dimensionné */
.product-detail__back {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4rem;
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.06em;
}

.product-detail__back .ti {
  font-size: 1.2em;
  line-height: 1;
}

.product-detail__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Colonne gauche — packaging produit */
.product-detail__media {
  background-color: var(--color-white);
  padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  min-height: clamp(360px, 50vw, 640px);
}

.product-detail__media-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.product-detail__media img {
  max-width: 100%;
  max-height: clamp(320px, 42vw, 560px);
  width: auto;
  object-fit: contain;
  /*filter: drop-shadow(6px 12px 24px rgba(0, 0, 0, 0.18));*/
  filter: drop-shadow(10px 10px 12px rgba(0, 0, 0, 0.5));
}

/* ── Étiquettes produit (labels) ─────────────────────────────────────────
   Badges configurables (texte + couleur de fond + couleur de texte) en haut
   à droite de l'image. Présents sur cartes, grille et page détail.
   Données : product.labels = [{ text, bg, color }] (cf. main.js). */
.product-labels {
  position: absolute;
  top: 6rem;
  right: 1.5rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  pointer-events: none;
  transform: rotate(-3deg);
}
.product-detail__media-wrap .product-labels {
  position: absolute;
  top: -0.6rem;
  right: 0.6rem;
}

.product-label {
  display: inline-block;
  padding: 0.3em 0.7em;
  font-family: var(--font-anton);
  font-size: clamp(0.62rem, 0.9vw, 0.8rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  border-radius: 6px;
  white-space: nowrap;
}

/* Variante "inline" : page détail, étiquettes AU-DESSUS du nom (flux normal,
   pas en superposition sur l'image). */
.product-labels--inline {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.9rem;
  pointer-events: auto;
}

.product-labels--inline .product-label {
  font-size: clamp(0.72rem, 1vw, 0.9rem);
}

/* Page détail : conteneur image en relatif + fondu au changement de format */
.product-detail__media-wrap {
  position: relative;
}
.product-detail__media-wrap img {
  transition: opacity 0.3s ease;
}

/* ── Conditionnements (boutons 800 G / 450 G…) — page détail ────────────── */
.product-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
}

.size-btn {
  font-family: var(--font-anton);
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 1.4rem;
  border: 2px solid var(--color-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--color-dark);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.size-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.size-btn.is-active {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.size-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Colonne droite — infos + accordéons */
.product-detail__info {
  background-color: #f5f5f5;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-detail__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.9vw, 3.8rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.product-detail__desc {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.1;
  color: var(--color-text);
  margin: 0 0 1rem;
}

/* ── Accordéons ───────────────────────────────────────────────────────────── */
/* Animation gérée en JS (cf. initAccordionGroup) — interpolation de la
   height en inline-style pour bypass le display:none que le navigateur
   applique aux enfants de <details> fermé. */
.accordion {
  border-radius: 999px;
  overflow: hidden;
  background-color: transparent;
}

.accordion[open] {
  border-radius: var(--radius-lg);
}

.accordion__head {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-anton);
  font-size: clamp(0.95rem, 1.05vw, 1.15rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  cursor: pointer;
  border-radius: 999px;
  transition: background-color var(--transition), border-radius var(--transition);
  user-select: none;
}

.accordion__head::-webkit-details-marker {
  display: none;
}

.accordion--primary > .accordion__head,
.accordion--dark > .accordion__head {
  background-color: var(--color-dark);
}

.accordion--primary > .accordion__head:hover,
.accordion--primary > .accordion__head:focus-visible,
.accordion--dark > .accordion__head:hover,
.accordion--dark > .accordion__head:focus-visible {
  background-color: #000;
}

/* Accordéon ouvert → tête rouge (surcharge les variantes) */
.accordion[open] > .accordion__head {
  background-color: var(--color-primary);
  border-radius: 1.5rem 0 0;
  transition: auto;
}

.accordion[open] > .accordion__head:hover,
.accordion[open] > .accordion__head:focus-visible {
  background-color: var(--color-primary-light);
}

.accordion__icon {
  font-size: 1.4rem;
  line-height: 1;
  transition: transform var(--transition);
  display: inline-flex;
}

.accordion[open] > .accordion__head .accordion__icon {
  transform: rotate(45deg); /* + → × via rotation, mais on garde le glyphe + */
}

/* Pour rendre l'icône "−" quand ouvert, on remplace l'effet rotation par
   une bascule de glyphe : ici on opte pour la rotation 45° qui transforme
   visuellement "+" en "×" (autre lecture). Si "−" strict est requis, voir
   §commentaire dans le JS. */

/* Body : le style visuel (background, padding, font). JS contrôle
   l'animation via inline styles (height, transition, padding, opacity). */
.accordion__body {
  background-color: var(--color-white);
  padding: 1.2rem 1.6rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 0.95vw, 1rem);
  line-height: 1.5;
  color: var(--color-text);
}

.accordion__body strong {
  font-weight: 700;
}

.accordion__allergens {
  margin-top: 0.8rem;
}

/* Liste modes de cuisson */
.cooking-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cooking-list li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #eee;
}

.cooking-list li:last-child {
  border-bottom: none;
}

.cooking-list__method {
  font-weight: 700;
  min-width: 7rem;
}

.cooking-list__detail {
  color: var(--color-text);
  opacity: 0.85;
}

/* Tableau nutrition */
.nutrition {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.85rem, 0.95vw, 1rem);
}

.nutrition th,
.nutrition td {
  padding: 0.55rem 0.6rem;
  text-align: left;
}

.nutrition thead th {
  font-family: var(--font-anton);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  background-color: #f5f5f5;
  border-bottom: 2px solid var(--color-dark);
}

.nutrition tbody tr:nth-child(odd) {
  background-color: #fafafa;
}

.nutrition td:nth-child(2),
.nutrition td:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nutrition th:nth-child(2),
.nutrition th:nth-child(3) {
  text-align: right;
}

.nutrition__note {
  margin-top: 0.8rem;
  font-size: 0.78rem;
  color: var(--color-text);
  opacity: 0.7;
  line-height: 1.4;
}

/* ── Section "Dans la même gamme" — fond rouge, carrousel ────────────────── */
.same-range {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: clamp(3rem, 6vw, 5rem) 0;
  --surtitle-clr: var(--color-dark);
  --title-clr:    var(--color-white);
  --text-clr:     var(--color-white);
}

/* Vague — variante B (cf. .recipes) au-dessus de same-range */
.same-range::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--tear-h);
  pointer-events: none;
  transform: translateY(-99%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 1;
  background-color: var(--color-primary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 13 C 200 22 400 4 600 11 C 800 18 1000 6 1200 14 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 13 C 200 22 400 4 600 11 C 800 18 1000 6 1200 14 L 1200 18 Z'/></svg>");
}

.same-range__cta {
  text-align: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.same-range__empty {
  text-align: center;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: var(--color-white);
  opacity: 0.85;
  max-width: 640px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  line-height: 1.55;
}

/* Carrousel "static" — quand toutes les cartes tiennent dans le viewport.
   Classe ajoutée par initCarousels() ; permet de centrer le ruban au lieu
   de le coller à gauche. */
.carousel__viewport.is-static {
  display: flex;
  justify-content: center;
}
.carousel__viewport.is-static > .carousel__track {
  transform: none !important;
}

/* ── Section "Nos distributeurs" — fond sombre, vague + logos ───────────── */
.distributors {
  position: relative;
  background-color: var(--color-dark);
  color: var(--color-white);
  padding: clamp(3rem, 6vw, 5rem) 0;
  --surtitle-clr: var(--color-white);
  --title-clr:    var(--color-primary);
}

/* Vague — variante C (cf. .locator) au-dessus de distributors */
.distributors::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--tear-h);
  pointer-events: none;
  transform: translateY(-99%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 1;
  background-color: var(--color-dark);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 12 Q 150 6 300 12 T 600 12 T 900 12 T 1200 12 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 12 Q 150 6 300 12 T 600 12 T 900 12 T 1200 12 L 1200 18 Z'/></svg>");
}

.distributors__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0 0 1.5rem;
}

.distributors__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.2rem 1rem;
  min-height: 110px;
  justify-content: center;
  text-align: center;
}

/* Logo distributeur (img réelle) — depuis le champ `image` du JSON */
.distributors__img {
  max-height: clamp(80px, 9vw, 140px);
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition);
}

.distributors__item:hover .distributors__img {
  transform: scale(1.05);
}

/* Logo distributeur (placeholder textuel) — fallback si pas d'image fournie */
.distributors__logo {
  font-family: var(--font-anton);
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.6rem 1.4rem;
  border-radius: 12px;
  background-color: var(--logo-bg, #fff);
  color: var(--logo-fg, #000);
  display: inline-block;
}

.distributors__tagline {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.85;
}

.distributors__note {
  font-family: var(--font-anton);
  text-align: center;
  margin-top: 1rem;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  letter-spacing: 0.04em;
  color: var(--color-white);
  opacity: 0.85;
}

/* ── Page 404 produit ────────────────────────────────────────────────────── */
.product-404 {
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align: center;
  background-color: var(--color-white);
}

.product-404 .section__title {
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.product-404 p {
  margin-bottom: 1.5rem;
}


/* ── Responsive page produit ─────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .accordion__head        { padding: 0.85rem 1.3rem; }
}

@media (max-width: 992px) {
  .product-detail__inner  { grid-template-columns: 1fr; }
  .product-detail__media  { min-height: auto; padding: 2.5rem 2rem; }
  .product-detail__name   { font-size: 2.4rem; }
}

@media (max-width: 768px) {
  .product-detail__media  { padding: 2rem 1.5rem; }
  .product-detail__info   { padding: 2rem 1.5rem; }
  .product-detail__name   { font-size: 2rem; }
  .distributors__list     { gap: 1.5rem; }
  .accordion__head        { font-size: 0.85rem; padding: 0.8rem 1.2rem; }
  .nutrition th, .nutrition td { padding: 0.45rem 0.5rem; font-size: 0.85rem; }
  .same-range__cta .btn   { font-size: 1rem; padding: 0.75rem 1.5rem; }
}

/* ==========================================================================
   30. PAGE CONTACT (contact.html)
   Sections :
   - .page-banner      : bannière kraft continu avec le header (titre rouge)
   - .contact-info     : 3 colonnes coordonnées sur fond blanc
   - .contact-form-section : formulaire centré sur fond blanc
   - .contact-map      : carte Google Maps pleine largeur sans bordure
   La section .pro est réutilisée telle quelle depuis index.html.
   ========================================================================== */

/* ── Utilitaire accessibilité (screen-reader only) ─────────────────────── */
.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;
}

/* ── Section Coordonnées — 3 colonnes avec séparateurs rouges ─────────── */
.contact-info {
  position: relative;
  background-color: var(--color-white);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.contact-info__grid {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.contact-info__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem clamp(1.5rem, 4vw, 3.5rem);
  transition: transform var(--transition);
}

.contact-info__col:hover {
  transform: scale(1.04);
}

/* Séparateur vertical rouge entre colonnes */
.contact-info__sep {
  width: 2px;
  background-color: var(--color-primary);
  align-self: stretch;
  min-height: 120px;
  flex-shrink: 0;
  margin: auto 0;
}

.contact-info__icon {
  font-size: clamp(52px, 6vw, 80px);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: clamp(0.8rem, 2vw, 1.4rem);
  display: block;
}

.contact-info__label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-bottom: 0.45rem;
}

.contact-info__text {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  color: var(--color-dark);
  font-style: normal; /* neutralise <address> */
  transition: color var(--transition);
  line-height: 1.55;
}

a.contact-info__text:hover {
  color: var(--color-primary);
}

/* ── Section Formulaire de contact ────────────────────────────────────── */
.contact-form-section {
  background-color: var(--color-white);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
}

.contact-form-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.9rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: center;
  line-height: 1.1;
  margin-bottom: 1.1rem;
}

.contact-form-section__intro {
  font-family: var(--font-anton);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-align: center;
  line-height: 1.65;
  margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
  text-transform: none;
}

/* Formulaire */
.contact-form {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* Honeypot — invisible pour les humains */
.contact-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Type de demande — Professionnel / Particulier */
.contact-form__type {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}

.contact-form__type-legend {
  font-family: var(--font-anton);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  letter-spacing: 0.04em;
  padding: 0;
}

.contact-form__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 1rem;
}

.contact-form__radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contact-form__group--full {
  /* Pleine largeur quand dans .contact-form directement (pas dans .contact-form__row) */
}

/* Champs texte et email */
.contact-form__input,
.contact-form__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-dark);
  background-color: #f5f5f5;
  border: 1.5px solid #d5d5d5;
  padding: 0.9rem 1.5rem;
  border-radius: 50px;
  transition: border-color var(--transition), background-color var(--transition);
  outline: none;
  appearance: none;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: #aaa;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--color-primary);
  background-color: #fff;
}

/* État invalide */
.contact-form__input.is-invalid,
.contact-form__textarea.is-invalid {
  border-color: var(--color-primary-light);
}

/* Textarea */
.contact-form__textarea {
  border-radius: var(--radius-lg);
  resize: vertical;
  min-height: 190px;
}

/* Message d'erreur sous un champ */
.contact-form__error {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-primary-light);
  padding-left: 1.3rem;
  min-height: 1em;
  line-height: 1.3;
}

/* Actions */
.contact-form__actions {
  margin-top: 0.3rem;
}

.contact-form__btn {
  min-width: 180px;
  letter-spacing: 0.05em;
}

/* État loading */
.contact-form__btn.is-loading {
  opacity: 0.65;
  pointer-events: none;
  cursor: not-allowed;
}

/* Message de succès */
.contact-form__success {
  max-width: 1000px;
  margin: 2rem auto 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-green-pro);
  background-color: rgba(69, 139, 71, 0.08);
  border: 1.5px solid rgba(69, 139, 71, 0.3);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.6rem;
}

.contact-form__success .ti {
  font-size: 1.6rem;
  flex-shrink: 0;
}

/* ── Carte Google Maps — pleine largeur sans bordure ──────────────────── */
.contact-map {
  position: relative;
  line-height: 0; /* supprime l'espace sous l'iframe */
}

.contact-map__link {
  display: block;
  cursor: pointer;
}

.contact-map__iframe {
  width: 100%;
  height: clamp(280px, 32vw, 480px);
  border: none;
  display: block;
  filter: grayscale(100%);
}

/* ── Responsive — contact ─────────────────────────────────────────────── */
@media (max-width: 992px) {
  .contact-form-section__title { font-size: clamp(1.4rem, 2.8vw, 2.2rem); }
}

@media (max-width: 768px) {
  /* Coordonnées : colonnes empilées, séparateurs horizontaux */
  .contact-info__grid {
    flex-direction: column;
    align-items: stretch;
  }
  .contact-info__col {
    padding: 1.8rem 1rem;
  }
  .contact-info__sep {
    width: auto;
    height: 2px;
    min-height: 0;
    margin: 0;
  }

  /* Formulaire : 1 colonne */
  .contact-form__row {
    grid-template-columns: 1fr;
  }
  .contact-form__input,
  .contact-form__textarea {
    padding: 0.8rem 1.2rem;
  }
}

@media (max-width: 480px) {
  .contact-form-section__title { font-size: 1.35rem; }
  .contact-form-section__intro { font-size: 0.9rem; }
  .contact-map__iframe          { height: 280px; }
}

/* ==========================================================================
   31. PAGE NOTRE HISTOIRE (histoire.html)
   4 sections successives (chacune transitionne via une vague ::before, cf. §11) :
   - .page-banner        : bannière rouge avec le header (titre blanc)
   - .story--confidence  : #confiance — fond sombre, 2 colonnes (texte + visuel)
   - .story--vision      : #vision    — fond blanc, accueille le bloc « Certification
                           AVS » (classes .avs-* — voir bloc dédié plus bas)
   - .commitments        : #engagements — fond vert, 4 piliers
   - .story--ambition    : #ambition  — fond rouge, 2 colonnes (texte + visuel)
   ========================================================================== */

/* Bannière : utilise le style par défaut (rouge + titre blanc, comme Nos Produits) */

/* ── Section "story" — pattern 2 colonnes commun ──────────────────────── */
.story {
  position: relative;
  padding: clamp(4rem, 8vw, 8rem) 0;
  /* overflow-x clip (pas hidden) : contient le débord horizontal du visuel
     à 130% SANS couper la vague ::before (positionnée au-dessus via
     translateY(-99%)). `overflow: hidden` reste en fallback (Safari < 16). */
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
}

.story__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.story__content {
  display: flex;
  flex-direction: column;
}

.story__text {
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.5vw, 1.3rem);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: var(--text-clr, var(--color-text));
  text-align: justify;
}

/* La page Histoire utilise .section__visual (BEM unifié).
   Les règles génériques sont déjà définies en section 17 (ligne 1075-1086)
   avec l'override responsive correct (≤992px → width: 100%). */

/* ── Variante 1 — Histoire de confiance (fond sombre) ─────────────────── */
.story--confidence {
  background-color: var(--color-dark);
  color: var(--color-white);
  --surtitle-clr: var(--color-white);
  --title-clr:    var(--color-primary);
  --subtitle-clr: rgba(255, 255, 255, 0.85);
  --text-clr:     var(--color-white);
}

.story--confidence::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 11 C 200 4 400 4 600 11 C 800 18 1000 18 1200 11 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 11 C 200 4 400 4 600 11 C 800 18 1000 18 1200 11 L 1200 18 Z'/></svg>");
}

/* ── Variante 2 — Vision ouverte (fond blanc centré) ──────────────────── */
.story--vision {
  background-color: var(--color-white);
  --surtitle-clr: var(--color-dark);
  --title-clr:    var(--color-primary);
  --text-clr:     var(--color-text);
}

.story--vision::before {
  background-color: var(--color-white);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 13 C 200 22 400 4 600 11 C 800 18 1000 6 1200 14 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 13 C 200 22 400 4 600 11 C 800 18 1000 6 1200 14 L 1200 18 Z'/></svg>");
}

/* Layout centré : .story__content prend toute la largeur centrée */
.story--vision .story__content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.story--vision .section__title {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.story--vision .story__text {
  text-align: left;
  margin-top: 0;
}

/* ── Variante 3 — Ambition (fond rouge) ───────────────────────────────── */
.story--ambition {
  background-color: var(--color-primary);
  color: var(--color-white);
  --surtitle-clr: var(--color-dark);
  --title-clr:    var(--color-white);
  --subtitle-clr: rgba(255, 255, 255, 0.85);
  --text-clr:     var(--color-white);
}

.story--ambition::before {
  background-color: var(--color-primary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 200 6 400 22 600 13 C 800 4 1000 22 1200 11 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 200 6 400 22 600 13 C 800 4 1000 22 1200 11 L 1200 18 Z'/></svg>");
}

/* ── Section Engagements concrets — fond vert ─────────────────────────── */
.commitments {
  position: relative;
  background-color: var(--color-green-pro);
  color: var(--color-white);
  padding: clamp(4rem, 8vw, 8rem) 0;
  --surtitle-clr: var(--color-dark);
  --title-clr:    var(--color-white);
  --text-clr:     var(--color-white);
}

.commitments::before {
  background-color: var(--color-green-pro);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 200 6 400 22 600 13 C 800 4 1000 22 1200 11 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 14 C 200 6 400 22 600 13 C 800 4 1000 22 1200 11 L 1200 18 Z'/></svg>");
}

.commitments__header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.commitments__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  list-style: none;
  padding: 0;
}

.commitment {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--transition);
}

.commitment:hover {
  transform: translateY(-6px);
}

.commitment__icon {
  width: clamp(72px, 7vw, 110px);
  height: clamp(72px, 7vw, 110px);
  object-fit: contain;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.commitment__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.05rem, 1.4vw, 1.4rem);
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.15;
  margin-bottom: 0.6rem;
  letter-spacing: 0.01em;
}

.commitment__desc {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1vw, 1rem);
  color: var(--color-white);
  line-height: 1.5;
  max-width: 22ch;
  margin: 0 auto;
}

/* ── Responsive — page Histoire ───────────────────────────────────────── */
@media (max-width: 1199px) {
  .commitment__title { font-size: clamp(0.95rem, 1.4vw, 1.2rem); }
}

@media (max-width: 992px) {
  /* Sections 2 cols → empilées */
  .story__inner {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
  }
  .story--ambition .section__visual,
  .story--confidence .section__visual {
    max-width: 70%;
    margin: 0 auto;
  }
  /* Piliers : 2 x 2 */
  .commitments__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem);
  }
}

@media (max-width: 768px) {
  .story .section__visual,
  .story--ambition .section__visual,
  .story--confidence .section__visual {
    max-width: 100%;
  }
  .story__text {
    text-align: left;
  }
  /* Piliers : 1 colonne sur petit mobile, sinon 2x2 */
  .commitments__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .commitments__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .commitment__desc { max-width: 28ch; }
}

/* ──────────────────────────────────────────────────────────────────────────
   BLOC « Certification AVS » — vit DANS la section #vision (.story--vision)
   En-tête centré (grand titre rouge + logos Biladi/AVS + 4 badges) puis
   blocs éditoriaux en colonne de lecture. Hydraté depuis about.js (vision.*).
   Le fond blanc, le padding et la vague proviennent de .story / .story--vision.
   ────────────────────────────────────────────────────────────────────────── */

/* ── En-tête : titre + logos + badges (centrés) ───────────────────────── */
.avs-story__head {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.avs-story__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-primary-light);
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 auto;
  max-width: 24ch;
}

.avs-story__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.avs-story__logo {
  display: block;
  width: auto;
  object-fit: contain;
}
.avs-story__logo--biladi { height: clamp(90px, 13vw, 160px); }
.avs-story__logo--avs    { height: clamp(80px, 11vw, 140px); }

/* Rangée des 4 badges (les images intègrent déjà leur texte) */
.avs-badges {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 3rem);
  list-style: none;
  padding: 0;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
}

.avs-badge img {
  display: block;
  height: clamp(78px, 9vw, 120px);
  width: auto;
  object-fit: contain;
}

/* ── Corps éditorial : colonne de lecture centrée, texte aligné à gauche ─ */
.avs-story__body {
  margin: 0 auto;
  text-align: left;
}

.avs-section + .avs-section {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}

.avs-section__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-text);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.avs-section__text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.avs-section__text:last-child { margin-bottom: 0; }

/* Checklist 2 colonnes (remplissage colonne par colonne, puces rouges) */
.avs-section__list {
  list-style: none;
  padding: 0;
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
}

.avs-section__list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.85rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.5;
  break-inside: avoid;
}

.avs-section__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary-light);
}

/* Lien AVS */
.avs-section__link { margin: 0.5rem 0 0; }
.avs-section__link a {
  font-family: var(--font-body);
  color: var(--color-primary-light);
  text-decoration: none;
  word-break: break-word;
}
.avs-section__link a:hover,
.avs-section__link a:focus-visible {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .avs-section__list { columns: 1; }
  .avs-story__title  { max-width: none; }
}

/* ==========================================================================
   32. PAGE NOS RECETTES (recettes.html)
   Sections :
   - .page-banner    : bannière kraft continu avec le header (titre rouge)
   - .recipes-page   : section rouge contenant la grille de cartes
   - .recipe-tile    : carte composite (visuel sombre + corps blanc + produit)
   ========================================================================== */

/* Bannière : utilise le style par défaut (rouge + titre blanc, comme Nos Produits) */

/* ── Section grille — fond sombre ─────────────────────────────────────── */
.recipes-page {
  position: relative;
  background-color: var(--color-dark);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  color: var(--color-white);
}

/* Sections de catégorie sur Nos Recettes — un h2 + une grille par catégorie. */
.recipes-section { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.recipes-section:last-child { margin-bottom: 0; }

.recipes-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-white);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  text-transform: uppercase;
}

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 3vw, 3rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.recipes-grid__item {
  min-width: 0;  /* empêche l'élargissement par le contenu min-content */
}

/* ── Carte recette (recipe-tile) ──────────────────────────────────────── */
.recipe-tile {
  position: relative;
  min-width: 0;
}

/* Carte composite : card blanche rounded + overflow:hidden (pattern identique
   à `.recipe-card` du slider home). L'image dedans a son propre rounded
   bottom qui "creuse" la card vers l'intérieur, exposant le fond blanc. */
.recipe-tile__link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.recipe-tile__link:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

/* — Zone visuelle —
   Plus de fond sombre, plus de propre border-radius : la card parent clip
   le coin supérieur, l'image elle-même porte le rounded bottom (cf. home). */
.recipe-tile__media {
  background-color: transparent;
  height: clamp(220px, 24vw, 320px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.recipe-tile__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  /* Coin inférieur arrondi 1.5rem (cf. `.recipe-card__image` du slider home).
     Au-dessus, le coin supérieur suit le clip du parent `.recipe-tile__link`. */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Hover image recette : zoom intérieur uniquement (pas de rotation) */
.recipe-tile__link:hover .recipe-tile__media-img {
  transform: scale(1.08);
}

/* — Zone corps (transparent : laisse passer le fond blanc de la card) — */
.recipe-tile__body {
  background-color: transparent;
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  min-height: 200px;
}

.recipe-tile__info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  min-width: 0;              /* permet le texte long */
}

.recipe-tile__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 1.8vw, 1.9rem);
  color: var(--color-primary);
  margin: 0;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.recipe-tile__meta {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

.recipe-tile__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}

.recipe-tile__meta .ti {
  font-size: clamp(1.4rem, 1.8vw, 1.7rem);
  color: var(--color-dark);
}

.recipe-tile__cta {
  margin-top: 0.2rem;
  /* Même calibrage que .product-tile__cta (page Nos Produits) */
  font-size: clamp(0.85rem, 1vw, 1rem);
  padding: 0.55rem 1.2rem;
  letter-spacing: 0.06em;
}

/* — Image produit (à droite, à l'intérieur de la carte) — */
.recipe-tile__product {
  flex: 0 0 auto;
  width: clamp(130px, 16vw, 200px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 3;
  pointer-events: none;      /* non cliquable, décoratif */
  transition: transform 0.35s ease;
  /*filter: drop-shadow(4px 8px 14px rgba(0, 0, 0, 0.15));*/
  filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.5));
}

/* Hover image produit : effet slider produit (scale + rotate) */
.recipe-tile__link:hover .recipe-tile__product {
  transform: scale(1.06) rotate(4deg) translateY(-4px);
}

/* ── Responsive page Recettes ─────────────────────────────────────────── */
/* Grand desktop : 3 colonnes */
@media (min-width: 1841px) {
  .recipes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .recipe-tile__product { width: clamp(110px, 14vw, 150px); }
  .recipe-tile__title   { font-size: clamp(1.15rem, 2vw, 1.5rem); }
}

@media (max-width: 768px) {
  .recipes-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .recipe-tile__product { width: clamp(120px, 22vw, 160px); }
}

@media (max-width: 480px) {
  .recipe-tile__body {
    padding: 1.2rem 1.4rem;
    min-height: 0;
    gap: 0.8rem;
  }
  .recipe-tile__product { width: 100px; }
}

/* ==========================================================================
   32b. PAGE DÉTAIL RECETTE (recette.html?slug=...)
   Sections :
   - .page-banner         : titre + breadcrumb (kraft, hérité)
   - .recipe-hero         : image hero pleine largeur
   - .recipe-detail       : 2 colonnes (ingrédients + produit associé)
   - .recipe-preparation  : fond vert, étapes numérotées + tip final
   - .recipe-related      : carrousel "Vous aimerez aussi" (fond rouge)
   ========================================================================== */

/* ── 1) HERO IMAGE ──────────────────────────────────────────────────────── */
.recipe-hero {
  width: 100%;
  position: relative;
}

.recipe-hero__img {
  display: block;
  width: 100%;
  height: clamp(320px, 42vw, 600px);
  object-fit: cover;
}

/* Actions flottantes (Imprimer + Partager) — coin bas-droit du hero */
.recipe-hero__actions {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  display: flex;
  gap: 0.6rem;
  z-index: 2;
}

.recipe-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #1a1a1a;
  color: var(--color-white);
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: background-color var(--transition), transform var(--transition), color var(--transition);
}

.recipe-hero__btn:hover,
.recipe-hero__btn:focus-visible {
  background-color: var(--color-primary);
  transform: translateY(-2px);
}

.recipe-hero__btn:active {
  transform: translateY(0);
}

/* Feedback "lien copié" (fallback de l'API Web Share) */
.recipe-hero__btn.is-copied {
  background-color: var(--color-green-pro);
}

/* ── Menu popover "Partager" (Facebook, X, WhatsApp, LinkedIn, Email, Copier)
   Wrapper relatif autour du bouton Share pour positionner le menu en
   absolute au-dessus à droite du hero. */
.recipe-share {
  position: relative;
  display: inline-block;
}

.recipe-share__menu {
  position: absolute;
  bottom: calc(100% + 0.6rem);   /* juste au-dessus du bouton Share */
  right: 0;
  z-index: 10;
  min-width: 220px;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* État initial caché : invisible + scale 0.95 + translateY 6px */
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  /* Petite bordure subtile pour bien voir le menu sur fond clair éventuel */
  /*border: 1px solid rgba(0, 0, 0, 0.08);*/
}

.recipe-share__menu[hidden] {
  display: none;
}

/* État ouvert : visible + en place */
.recipe-share__menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Petite flèche pointant vers le bouton Share */
/*.recipe-share__menu::after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: 18px;
  width: 14px;
  height: 14px;
  background-color: var(--color-white);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transform: rotate(45deg);
}*/

/* Chaque ligne du menu : icône colorée + label sombre */
.recipe-share__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  background-color: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.recipe-share__item .ti {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}

.recipe-share__item:hover,
.recipe-share__item:focus-visible {
  background-color: #f5f5f5;
  color: var(--color-primary);
}

/* Couleurs de marque sur les icônes (la couleur ne change PAS au hover du
   parent — l'icône garde sa couleur identitaire) */
.recipe-share__item[data-share-on="facebook"] .ti { color: #1877F2; }
.recipe-share__item[data-share-on="x"]        .ti { color: #000000; }
.recipe-share__item[data-share-on="whatsapp"] .ti { color: #25D366; }
.recipe-share__item[data-share-on="linkedin"] .ti { color: #0A66C2; }
.recipe-share__item[data-share-on="email"]    .ti { color: var(--color-dark); }
.recipe-share__item[data-share-on="copy"]     .ti { color: var(--color-dark); }

/* Feedback "lien copié" sur l'item Copy */
.recipe-share__item.is-copied {
  background-color: var(--color-green-pro);
  color: var(--color-white);
}
.recipe-share__item.is-copied .ti {
  color: var(--color-white) !important;
}

@media (max-width: 480px) {
  .recipe-share__menu {
    min-width: 200px;
  }
  .recipe-share__item {
    padding: 0.6rem 0.8rem;
    font-size: 0.88rem;
  }
}

@media (max-width: 480px) {
  .recipe-hero__btn {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
}

/* ── 2) SECTION INGRÉDIENTS + PRODUIT (2 colonnes) ─────────────────────── */
.recipe-detail {
  background-color: var(--color-white);
  color: var(--color-text);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.recipe-detail__inner {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* Colonne gauche : retour + meta + ingrédients */
.recipe-detail__main {
  min-width: 0;
}

.recipe-detail__back {
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  font-size: 0.85rem;
  padding: 0.55rem 1.2rem;
  letter-spacing: 0.08em;
}

.recipe-detail__back .ti {
  font-size: 1.1rem;
  margin-right: 0.4rem;
}

/* Bandeau d'infos en pilule arrondie — display: flex (block) + width fit-content
   pour que la pilule passe à la ligne SOUS le bouton retour. */
.recipe-meta {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  background-color: #f3f3f3;
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  flex-wrap: wrap;
}

.recipe-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.recipe-meta__icon {
  font-size: 1.5rem;
  color: var(--color-dark);
  flex-shrink: 0;
}

.recipe-meta__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* Label : noir gras */
.recipe-meta__label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #000;
  font-weight: 700;
  text-transform: capitalize;
  line-height: 1.1;
}

/* Value : rouge, font body, poids medium (entre 400 et 500) */
.recipe-meta__value {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-primary);
  font-weight: 500;
  line-height: 1.1;
}

.recipe-meta__sep {
  display: inline-block;
  width: 1px;
  height: 32px;
  background-color: rgba(0, 0, 0, 0.15);
}

/* Titre INGRÉDIENTS */
.recipe-detail__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--color-primary);
  margin: 0 0 clamp(1.2rem, 2vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Liste d'ingrédients */
.recipe-ingredients {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recipe-ingredients li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.7rem;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: var(--color-text);
  line-height: 1.45;
}

.recipe-ingredients li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-text);
}

/* Colonne droite : produit Biladi associé */
.recipe-product {
  background-color: #f5f5f5;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 3vw, 2.8rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.recipe-product__intro {
  font-family: var(--font-anton);
  font-size: clamp(0.85rem, 1vw, 1rem);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin: 0;
}

.recipe-product__name {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--color-primary);
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  letter-spacing: 0.02em;
  display: inline-block;
}

.recipe-product__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(180px, 22vw, 280px);
}

.recipe-product__img {
  max-width: 100%;
  max-height: clamp(200px, 25vw, 320px);
  object-fit: contain;
  filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.25));
}

.recipe-product__cta {
  margin-top: 0.4rem;
  /* Légèrement plus petit que .btn--primary par défaut */
  font-size: clamp(0.8rem, 0.9vw, 0.9rem);
  padding: 0.55rem 1.4rem;
  letter-spacing: 0.06em;
}

/* ── 3) SECTION PRÉPARATION — fond vert ─────────────────────────────────── */
.recipe-preparation {
  position: relative;
  background-color: var(--color-green-pro);
  color: var(--color-white);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

/* Vague de transition au-dessus (cf. section 11) — verte, asymétrique douce */
.recipe-preparation::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--tear-h);
  pointer-events: none;
  transform: translateY(-99%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 1;
  background-color: var(--color-green-pro);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 11 C 200 4 400 4 600 11 C 800 18 1000 18 1200 11 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 11 C 200 4 400 4 600 11 C 800 18 1000 18 1200 11 L 1200 18 Z'/></svg>");
}

.recipe-preparation__inner {
  /* container hérite ses styles */
}

.recipe-preparation__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--color-white);
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}

.recipe-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: recipe-step;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.5vw, 2.2rem);
}

.recipe-step {
  min-width: 0;
}

.recipe-step__title {
  font-family: var(--font-anton);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: var(--color-white);
  margin: 0 0 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  line-height: 1.2;
}

.recipe-step__actions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recipe-step__actions li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: var(--color-white);
  line-height: 1.5;
}

.recipe-step__actions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-white);
}

/* Conseil de service centré — Anton italique blanc */
.recipe-preparation__tip {
  text-align: center;
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  max-width: 760px;
  font-family: var(--font-anton);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  letter-spacing: 0.03em;
  color: var(--color-white);
  line-height: 1.45;
}

.recipe-preparation__tip:empty {
  display: none;
}

/* ── 4) SECTION VOUS AIMEREZ AUSSI — fond rouge, carrousel ─────────────── */
.recipe-related {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: clamp(3rem, 6vw, 5rem) 0;
  --surtitle-clr: var(--color-dark);
  --title-clr:    var(--color-white);
}

/* Vague de transition au-dessus (cf. section 11) — rouge, asymétrique (cf. .recipes / .same-range) */
.recipe-related::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--tear-h);
  pointer-events: none;
  transform: translateY(-99%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 1;
  background-color: var(--color-primary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 13 C 200 22 400 4 600 11 C 800 18 1000 6 1200 14 L 1200 18 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 18 L0 13 C 200 22 400 4 600 11 C 800 18 1000 6 1200 14 L 1200 18 Z'/></svg>");
}

/* Carrousel : réutilise .recipes__carousel (section 14).
   Les .recipe-card__meta héritent du style global de la home (cf. section 14
   du CSS) — texte sombre sur fond blanc de la carte, font-body, lowercase. */
.recipe-related .recipes__carousel {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.recipe-related__cta {
  text-align: center;
}

/* ── 5) ÉTAT 404 (slug inconnu) ─────────────────────────────────────────── */
.recipe-404 {
  background-color: var(--color-white);
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align: center;
}

.recipe-404 .section__title {
  color: var(--color-primary);
}

.recipe-404 p {
  margin: 1rem 0 2rem;
  font-family: var(--font-body);
  color: var(--color-text);
}

/* ── 6) RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .recipe-detail__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .recipe-product {
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .recipe-hero__img {
    height: clamp(220px, 50vw, 340px);
  }
  .recipe-meta {
    width: 100%;
    justify-content: center;
  }
  .recipe-detail__back {
    width: auto;
  }
}

@media (max-width: 480px) {
  .recipe-meta {
    padding: 0.7rem 1rem;
    gap: 0.8rem;
  }
  .recipe-meta__icon { font-size: 1.3rem; }
  .recipe-meta__label { font-size: 0.7rem; }
  .recipe-meta__value { font-size: 0.85rem; }
  .recipe-meta__sep { height: 28px; }

  .recipe-detail__title,
  .recipe-preparation__title {
    font-size: 1.8rem;
  }

  .recipe-product {
    padding: 1.5rem 1.2rem;
  }
}

/* ==========================================================================
   33. PAGE MENTIONS LÉGALES (mentions-legales.html)
   Sections :
   - .page-banner    : bannière kraft continu avec le header (titre rouge)
   - .legal-info     : 2 colonnes (Éditeur + Hébergeur) sur fond blanc
   - .legal-sections : sections empilées (Propriété, Données, etc.)
   ========================================================================== */

/* Bannière : utilise le style par défaut (rouge + titre blanc, comme Nos Produits) */

/* ── Section Éditeur / Hébergeur (2 colonnes) ─────────────────────────── */
.legal-info {
  background-color: var(--color-white);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.legal-info__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}

.legal-info__col {
  min-width: 0;
}

.legal-info__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2vw, 2rem);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

.legal-info__list {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.75;
  color: var(--color-text);
}

.legal-info__list p {
  margin: 0;
}

.legal-info__list strong {
  font-weight: 700;
  color: var(--color-dark);
}

.legal-info__list a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.legal-info__list a:hover {
  color: var(--color-primary);
}

/* ── Sections légales (full-width, empilées) ──────────────────────────── */
.legal-sections {
  background-color: var(--color-white);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.legal-section + .legal-section {
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
}

.legal-section__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2vw, 2rem);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0 0 clamp(1rem, 1.8vw, 1.4rem);
}

.legal-section__text {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.75;
  color: var(--color-text);
  text-align: justify;
  margin: 0;
}

.legal-section__text strong {
  font-weight: 700;
  color: var(--color-dark);
}

.legal-section__text a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition);
}

.legal-section__text a:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}

/* ── Responsive — Mentions Légales ────────────────────────────────────── */
@media (max-width: 768px) {
  .legal-info__grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 6vw, 3.5rem);
  }
}

@media (max-width: 480px) {
  .legal-section__text { text-align: left; }
}

/* ==========================================================================
   34. PAGE CATALOGUE PRO (catalogue.html)
   Sections :
   - .page-banner       : bannière rouge + surtitre noir
   - .catalogue-intro   : présentation + 2 CTAs (télécharger / imprimer)
   - .catalogue-flipbook: viewer interactif (StPageFlip + PDF.js) + contrôles
   - .catalogue-related : grille produits associés + CTA "voir tous"
   ========================================================================== */

/* ── Surtitre dans la bannière (spécifique catalogue) ──────────────────── */
.page-banner__surtitle {
  display: block;
  font-family: var(--font-anton);
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.6rem;
}

/* ── Section présentation (fond blanc) ────────────────────────────────── */
.catalogue-intro {
  background-color: var(--color-white);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.catalogue-intro__inner {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

/* Le titre principal de la section présentation passe en rouge */
.catalogue-intro .section__title {
  color: var(--color-primary);
}

.catalogue-intro__text {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  color: var(--color-text);
  margin: clamp(1rem, 2vw, 1.5rem) auto clamp(2rem, 3.5vw, 2.5rem);
  max-width: 700px;
}

.catalogue-intro__actions {
  display: flex;
  justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  flex-wrap: wrap;
}

.catalogue-intro__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.catalogue-intro__actions .btn .ti {
  font-size: 1.2em;
}

/* Variante "outline" : bordure noire, fond transparent (pour Imprimer) */
.btn--outline {
  background-color: transparent;
  color: var(--color-dark);
  border: 2px solid var(--color-dark);
  padding: calc(0.85rem - 2px) calc(1.7rem - 2px);
  transition: background-color var(--transition), color var(--transition);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--color-dark);
  color: var(--color-white);
}

/* Variante "dark" : fond noir + texte blanc (CTA "voir tous les produits") */
.btn--dark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.btn--dark:hover,
.btn--dark:focus-visible {
  background-color: #000;
}

/* ── Section flipbook (fond sombre) ───────────────────────────────────── */
/* Section flipbook — ambiance gris clair (cf. screenshot DearFlip fullscreen) */
.catalogue-flipbook {
  position: relative;
  background-color: #ececec;
  color: var(--color-text);
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.catalogue-flipbook__container {
  position: relative;
}

/* ── Viewer DearFlip — flipbook avec effet page-curl 3D ────────────────
   DearFlip injecte sa propre UI (barre de contrôles + boutons + thumbs)
   à l'intérieur du conteneur #flipbook. On se contente de centrer le
   conteneur et de fixer une hauteur ; tout le reste est rendu par DearFlip.
   ─────────────────────────────────────────────────────────────────────── */

.catalogue-flipbook__viewer,
#flipbook {
  width: 100%;
  max-width: 1500px;
  min-height: 720px;
  margin: 0 auto;
  position: relative;
  background-color: transparent;
}

/* ── Centrage du book DearFlip ─────────────────────────────────────────
   DearFlip centre déjà son `.df-book-wrapper` nativement via
   `margin: 0 auto` (cf. dflip.min.css). Pas besoin d'overrider sa
   position — au contraire, le faire en `position: relative` décale
   le wrapper hors-centre.

   On s'assure juste que le conteneur global est bien centré.
   ─────────────────────────────────────────────────────────────────────── */
.catalogue-flipbook__container {
  display: flex;
  justify-content: center;
}

/* ── Anti-conflit Themify Icons (chargé par DearFlip sur catalogue.html)
   Themify utilise un sélecteur wildcard `[class^="ti-"]:before` qui prend
   le pas sur les classes Tabler (`.ti-xxx:before`). On force la police
   Tabler sur le pseudo `:before` de tous nos icônes Tabler (`.ti.ti-xxx`),
   sans toucher aux icônes internes de DearFlip qui utilisent juste `.ti-xxx`
   seul sans la classe `.ti` standalone.
   ─────────────────────────────────────────────────────────────────────── */
i.ti::before,
.ti[class*=" ti-"]::before,
.ti[class^="ti-"]::before {
  font-family: "tabler-icons" !important;
  speak: none !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Themify Icons (DearFlip) — line-height pour éviter clip dans les boutons */
#flipbook .df-icon,
#flipbook [class^="ti-"],
#flipbook [class*=" ti-"] {
  line-height: 1;
}

/* ── Loader DearFlip — ring spinner #333333 (remplace loading.gif) ─────
   DearFlip positionne les pseudos `.df-loading::before/::after` à
   `top:50%; left:50%` avec `margin: -45px -25px -25px` (50×50px par
   défaut). On dessine un ring CSS plus petit (32px) au même centre
   visuel, et on positionne le pastille blanche derrière (44px).
   Le texte "Chargement WEBGL 3D..." est ajouté dynamiquement par
   DearFlip dans `.loading-info` SOUS la zone du spinner.
   ─────────────────────────────────────────────────────────────────────── */
.df-loading::before {
  width: 44px !important;
  height: 44px !important;
  /* top:50% + margin-top:-42px → top edge ~42px au-dessus du centre,
     ce qui replace le pseudo au visuel center de DearFlip d'origine */
  margin: -42px 0 0 -22px !important;
  background-color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.df-loading::after {
  background-image: none !important;
  width: 32px !important;
  height: 32px !important;
  /* center visuellement à la même position que le pastille */
  margin: -36px 0 0 -16px !important;
  border: 3px solid rgba(51, 51, 51, 0.18) !important;
  border-top-color: #333333 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  animation: catalogue-spin 0.9s linear infinite;
}

@keyframes catalogue-spin {
  to { transform: rotate(360deg); }
}

/* Texte "Chargement..." — DearFlip injecte un .loading-info dans le
   container et NE LE SUPPRIME PAS après chargement, il enlève juste la
   classe .df-loading du parent. On scope donc l'affichage à l'état
   `.df-loading` uniquement. */
.df-container .loading-info {
  display: none !important;
}

.df-container.df-loading .loading-info {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, 18px) !important;
  color: #333333 !important;
  font-family: var(--font-anton, sans-serif) !important;
  font-style: normal !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  background-color: transparent !important;
  white-space: nowrap !important;
  padding: 0 !important;
  z-index: 101 !important;
}

/* ── Section produits associés (fond rouge) ───────────────────────────── */
.catalogue-related {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: clamp(3rem, 6vw, 5rem) 0;
  /* Tokens couleur de section */
  --surtitle-clr: var(--color-dark);
  --title-clr:    var(--color-white);
}

/* Carrousel produits associés (réutilise la mécanique .products__carousel) */
.catalogue-related__carousel {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.catalogue-related__cta {
  text-align: center;
}

/* ── Responsive — Catalogue Pro ───────────────────────────────────────── */
@media (max-width: 992px) {
  .catalogue-flipbook__viewer,
  #flipbook {
    min-height: 560px;
  }
}

@media (max-width: 768px) {
  .catalogue-flipbook__viewer,
  #flipbook {
    min-height: 460px;
  }
  .catalogue-share {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .catalogue-flipbook__viewer,
  #flipbook {
    min-height: 380px;
  }

  /* ── Mobile : remplace l'effet page-curl par un simple fade ─────────
     DearFlip applique des transforms 3D (rotateY, translate) pendant le
     flip. On les neutralise et on force une transition d'opacité.
     ─────────────────────────────────────────────────────────────────── */
  #flipbook .df-book-page,
  #flipbook .df-book-page.df-flipping,
  #flipbook .df-book-page.df-folding,
  #flipbook .df-book-page .df-page-front,
  #flipbook .df-book-page .df-page-back {
    transform: none !important;
    transition: opacity 0.35s ease !important;
    box-shadow: none !important;
  }

  #flipbook .df-book-page.df-flipping {
    opacity: 0 !important;
  }

  /* Masque les ombres/gradients de pliure 3D, inutiles en fade plat */
  #flipbook .df-page-fold-inner-shadow,
  #flipbook .df-page-fold-outer-shadow,
  #flipbook .df-page-front:before,
  #flipbook .df-page-back:before {
    display: none !important;
  }
}

/* ==========================================================================
   35. MODAL DE RECHERCHE (slide-in droite)
   Disponible sur toutes les pages — déclenché par le bouton loupe du header.
   Le HTML est injecté dynamiquement au premier clic (cf. initSearch dans main.js).
   ========================================================================== */

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.search-modal:not([hidden]) {
  pointer-events: auto;
}

.search-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.35s ease;
  cursor: pointer;
}

.search-modal.is-open .search-modal__backdrop {
  background-color: rgba(0, 0, 0, 0.45);
}

.search-modal__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(320px, 90vw, 480px);
  height: 100%;
  background-color: var(--color-white);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}

.search-modal.is-open .search-modal__panel {
  transform: translateX(0);
}

.search-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.4rem, 2.5vw, 1.8rem);
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.search-modal__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1;
}

.search-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--color-dark);
  transition: background-color var(--transition), color var(--transition);
  flex-shrink: 0;
}

.search-modal__close:hover,
.search-modal__close:focus-visible {
  background-color: #f0f0f0;
  color: var(--color-primary);
}

.search-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.4rem, 2.5vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Input avec icône loupe interne (pill, focus rouge) */
.search-modal__input-wrapper {
  position: relative;
  flex-shrink: 0;
}

.search-modal__input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #888;
  pointer-events: none;
}

.search-modal__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-dark);
  padding: 0.85rem 1rem 0.85rem 2.8rem;
  border: 1.5px solid #d5d5d5;
  border-radius: 50px;
  background-color: #f5f5f5;
  outline: none;
  appearance: none;
  transition: border-color var(--transition), background-color var(--transition);
}

.search-modal__input::placeholder {
  color: #aaa;
}

.search-modal__input:focus {
  border-color: var(--color-primary);
  background-color: var(--color-white);
}

/* Cache la croix native du <input type="search"> dans Chrome */
.search-modal__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Résultats */
.search-modal__results {
  display: flex;
  flex-direction: column;
}

/* Hint initial (< 3 caractères) */
.search-modal__hint {
  font-family: var(--font-body);
  color: #888;
  font-size: 0.9rem;
  text-align: center;
  padding: 2rem 1rem;
  line-height: 1.6;
}

/* Item résultat (cliquable) */
.search-modal__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color var(--transition);
  cursor: pointer;
  min-width: 0;
}

.search-modal__item:hover,
.search-modal__item:focus-visible {
  background-color: #f7f3ee;
  outline: none;
}

.search-modal__item-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

.search-modal__item-name {
  flex: 1;
  font-family: var(--font-anton);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  letter-spacing: 0.02em;
  color: var(--color-dark);
  line-height: 1.25;
  min-width: 0;
}

.search-modal__item-type {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #aaa;
  flex-shrink: 0;
  transition: color var(--transition);
}

.search-modal__item:hover .search-modal__item-type {
  color: var(--color-primary);
}

/* État "aucun résultat" */
.search-modal__empty {
  text-align: center;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.search-modal__empty-icon {
  font-size: 3rem;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.search-modal__empty-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.4;
}

.search-modal__empty-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #888;
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

/* Responsive : modal plein écran sur petit mobile */
@media (max-width: 480px) {
  .search-modal__panel {
    width: 100%;
  }
}

/* ==========================================================================
   36. PAGE LOADER — Logo Biladi centré avec fade + zoom doux
   Affiché immédiatement (overlay plein écran), retiré quand la page est prête.
   Animation : entry CSS auto (600ms), exit géré par JS (.is-loaded sur <body>).
   ========================================================================== */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  opacity: 1;
  transition: opacity 0.4s ease;
}

.page-loader__logo {
  width: clamp(140px, 18vw, 220px);
  height: auto;
  opacity: 0;
  transform: scale(0.92);
  animation: pageLoaderIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pageLoaderIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Texte "Chargement…" avec barre de progression indéterminée */
.page-loader__indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  opacity: 0;
  animation: pageLoaderTextIn 0.6s ease 0.3s forwards;
}

@keyframes pageLoaderTextIn {
  to { opacity: 1; }
}

.page-loader__text {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 0;
}

/* Barre indéterminée qui glisse */
.page-loader__bar {
  width: 140px;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.page-loader__bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background-color: var(--color-primary);
  border-radius: 2px;
  animation: pageLoaderBar 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pageLoaderBar {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(180%); }
  100% { transform: translateX(280%); }
}

/* Sortie : déclenchée par JS via .is-loaded sur <body> */
body.is-loaded .page-loader {
  opacity: 0;
  pointer-events: none;
}

/* Respect de la préférence "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  .page-loader__logo,
  .page-loader__indicator {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .page-loader__bar::before {
    animation: none;
    width: 100%;
  }
  .page-loader {
    transition-duration: 0.2s;
  }
}

/* ==========================================================================
   37. BOUTON BACK TO TOP — flottant en bas à droite
   Apparaît dès que scrollY > 300, clic = scroll smooth vers le haut.
   ========================================================================== */

.back-to-top {
  position: fixed;
  bottom: clamp(1rem, 2.5vw, 1.8rem);
  right: clamp(1rem, 2.5vw, 1.8rem);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  z-index: 800;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.3s ease,
              transform 0.3s ease,
              background-color var(--transition);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--color-primary-light);
  outline: none;
}

.back-to-top:active {
  transform: translateY(2px);
}

@media (max-width: 480px) {
  .back-to-top {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   38. SKIP-LINK (accessibilité — aller au contenu principal)
   Lien visible uniquement au focus clavier (sr-only par défaut).
   ========================================================================== */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  padding: 0.85rem 1.4rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-anton);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: 3px solid var(--color-white);
  outline-offset: 2px;
}

/* ==========================================================================
   39. BANDEAU COOKIES / RGPD
   Carte centrée en bas, NE prend PAS toute la largeur de l'écran.
   Fond sombre (--color-dark), bouton "Tout accepter" doré (--color-yellow).
   HTML injecté via initCookieConsent (main.js).
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: clamp(1rem, 2vw, 2rem);
  left: 50%;
  transform: translate(-50%, 200%);   /* hors écran initialement */
  z-index: 9999;
  width: calc(100% - 2rem);
  max-width: 760px;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;               /* la carte gère ses pointer events */
}

.cookie-banner.is-open {
  transform: translate(-50%, 0);
}

.cookie-banner__card {
  background-color: #1e1e1e;
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2.2rem) clamp(1.5rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2vw, 1.6rem);
  pointer-events: auto;
}

.cookie-banner__title {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-white);
}

.cookie-banner__desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.cookie-banner__link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.cookie-banner__link:hover,
.cookie-banner__link:focus-visible {
  color: var(--color-primary-light);
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  flex-wrap: wrap;
}

/* Boutons : style propre, indépendant des .btn globaux */
.cookie-banner__btn {
  font-family: var(--font-anton);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
  white-space: nowrap;
}

/* REFUSER : ghost (texte simple sans fond) */
.cookie-banner__btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.7rem 1rem;
  border-radius: 999px;
}

.cookie-banner__btn--ghost:hover,
.cookie-banner__btn--ghost:focus-visible {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.06);
}

/* TOUT ACCEPTER : pilule pleine dorée — couleur principale du site */
.cookie-banner__btn--accept {
  background-color: var(--color-primary);
  color: white;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  font-weight: 700;
}

.cookie-banner__btn--accept:hover,
.cookie-banner__btn--accept:focus-visible {
  background-color:var(--color-primary-light);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .cookie-banner {
    bottom: 0.75rem;
    width: calc(100% - 1.5rem);
  }
  .cookie-banner__actions {
    justify-content: space-between;
    gap: 0.5rem;
  }
  .cookie-banner__btn--ghost {
    padding: 0.7rem 0.8rem;
  }
  .cookie-banner__btn--accept {
    padding: 0.85rem 1.4rem;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   40. PAGE 404 (404.html)
   ========================================================================== */
.not-found {
  background-color: var(--color-white);
  padding: clamp(3rem, 7vw, 6rem) 0;
  text-align: center;
}

.not-found__inner {
  max-width: 720px;
  margin: 0 auto;
}

.not-found__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--color-primary);
  margin: 0 0 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.not-found__text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  color: var(--color-text);
  line-height: 1.55;
  margin: 0 0 2rem;
}

.not-found__actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.not-found__actions .btn .ti {
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* ==========================================================================
   41. FOCUS RINGS GLOBAUX — accessibilité clavier
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
  border-radius: 4px;
}

.btn:focus-visible,
.nav-list__link:focus-visible,
.header__search:focus-visible,
.header__burger:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* ==========================================================================
   42. REDUCED MOTION étendu — hero slider, catalogue fade, hovers
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__track,
  .carousel__track {
    transition: transform 0.01ms !important;
  }

  #flipbook .df-book-page,
  #flipbook .df-book-page.df-flipping {
    transition: none !important;
  }

  .cookie-banner {
    transition: none !important;
  }

  .product-card:hover,
  .product-card:hover .product-card__media img,
  .recipe-tile__link:hover .recipe-tile__media-img,
  .recipe-tile__link:hover .recipe-tile__product,
  .recipe-card:hover .recipe-card__image,
  .back-to-top:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   43. PRINT (page recette uniquement)
   On imprime seulement :
   - .page-banner       (titre + breadcrumb)
   - .recipe-hero       (image principale)
   - .recipe-detail     (ingrédients + produit associé)
   - .recipe-preparation (étapes + conseil final)
   Tout le reste (header, footer, drawer, cookie banner, carrousel related,
   back-to-top, boutons hero d'action, skip-link) est masqué.
   ========================================================================== */
@media print {
  /* 1. Masque tout ce qui est directement enfant de <body>, sauf <main> */
  body > *:not(main) {
    display: none !important;
  }

  /* 2. Dans <main>, ne garde QUE les 4 sections cibles */
  main > *:not(.page-banner):not(.recipe-hero):not(.recipe-detail):not(.recipe-preparation) {
    display: none !important;
  }

  /* 3. Masque les actions du hero (boutons Imprimer / Partager) */
  .recipe-hero__actions {
    display: none !important;
  }

  /* 4. Masque les boutons de navigation inutiles en impression */
  .recipe-detail__back,
  .recipe-product__cta {
    display: none !important;
  }

  /* 5. Évite que les étapes soient coupées en plein milieu */
  .recipe-step,
  .recipe-product {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 6. Couleurs lisibles à l'impression */
  body {
    background: var(--color-white) !important;
    color: #000 !important;
  }

  /* 7. Reset des animations / transitions pour rendu instantané */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* 8. Force la couleur d'arrière-plan rouge/vert à s'imprimer
        (sinon certains navigateurs suppriment les fonds par défaut).
        Compatible Chrome/Edge/Safari. */
  .page-banner,
  .recipe-preparation {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 9. Page : marges raisonnables */
  @page {
    margin: 1.2cm;
  }
}