/* =========================================================================
   La Food Compagnie — feuille de style unique
   Direction artistique : éditoriale, chaleureuse, contrastée.
   Palette dérivée des fonds des photographies produits (jaune, orange, vert).
   ========================================================================= */

/* ------------------------------ 1. Jetons ------------------------------ */
:root {
  /* Couleurs */
  --ink: #1a1712;
  --ink-2: #554e40;
  --ink-3: #767061;   /* 4,61:1 sur crème */
  --creme: #fbf7ef;
  --creme-2: #f3ebdb;
  --ligne: #e2d8c4;
  --discret-sombre: #9a9282; /* 5,79:1 sur l'encre */
  --blanc: #ffffff;
  --ambre: #f2a81c;
  --ambre-clair: #fde5b0;
  --terre: #b8431a;
  --terre-fonce: #8f3312;
  --vert: #1e6a4a;
  --vert-clair: #e3f0e8;
  --rouge: #a3231b;

  /* Typographie */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-base: 1.0625rem;
  --t-m: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --t-l: clamp(1.35rem, 1vw + 1.1rem, 1.7rem);
  --t-xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  --t-2xl: clamp(2.1rem, 3.4vw + 1.2rem, 3.6rem);

  /* Rythme */
  --gouttiere: clamp(1.15rem, 4vw, 2.5rem);
  --largeur: 1180px;
  --section: clamp(3.5rem, 8vw, 6.5rem);

  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;
  --ombre-s: 0 1px 2px rgba(26, 23, 18, .06), 0 4px 14px rgba(26, 23, 18, .05);
  --ombre-m: 0 2px 6px rgba(26, 23, 18, .07), 0 18px 40px -18px rgba(26, 23, 18, .22);
  --transition: 180ms cubic-bezier(.2, .6, .3, 1);
}

/* ------------------------------ 2. Base ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }
p { margin: 0 0 1.1em; max-width: 68ch; }
a { color: var(--terre-fonce); text-underline-offset: .18em; }
a:hover { color: var(--terre); }

ul, ol { padding-left: 1.15em; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--ligne); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--terre);
  outline-offset: 2px;
  border-radius: 3px;
}

.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--creme);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--r-s) 0; font-weight: 600;
}
.lien-evitement:focus { left: 0; color: var(--creme); }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------- 3. Structure ---------------------------- */
.enveloppe { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.enveloppe--etroite { max-width: 780px; }
.section { padding-block: var(--section); }
.section--creme2 { background: var(--creme-2); }
.section--ink { background: var(--ink); color: var(--creme); }
.section--ink h2, .section--ink h3 { color: var(--blanc); }
.section--ink p { color: #d9d2c4; }

.entete-section { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.surtitre {
  font-family: var(--sans);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--terre); margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .6rem;
}
.surtitre::before { content: ""; width: 28px; height: 2px; background: var(--ambre); flex: none; }
.section--ink .surtitre { color: var(--ambre); }
.chapeau { font-size: var(--t-m); color: var(--ink-2); }
.section--ink .chapeau { color: #cfc7b8; }

/* ----------------------------- 4. Boutons ----------------------------- */
.btn {
  --btn-fond: var(--terre); --btn-texte: #fff; --btn-bord: var(--terre);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.5rem;
  background: var(--btn-fond); color: var(--btn-texte);
  border: 1.5px solid var(--btn-bord); border-radius: 999px;
  font: inherit; font-size: var(--t-s); font-weight: 650; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { color: var(--btn-texte); background: var(--terre-fonce); border-color: var(--terre-fonce); transform: translateY(-1px); box-shadow: var(--ombre-s); }
.btn:active { transform: translateY(0); }
.btn--secondaire { --btn-fond: transparent; --btn-texte: var(--ink); --btn-bord: var(--ink); }
.btn--secondaire:hover { background: var(--ink); color: var(--creme); border-color: var(--ink); }
.btn--clair { --btn-fond: var(--creme); --btn-texte: var(--ink); --btn-bord: var(--creme); }
.btn--clair:hover { background: var(--ambre); color: var(--ink); border-color: var(--ambre); }
.btn--fantome { --btn-fond: transparent; --btn-texte: var(--creme); --btn-bord: rgba(251,247,239,.45); }
.btn--fantome:hover { background: rgba(251,247,239,.12); color: var(--creme); border-color: var(--creme); }
.btn--large { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .6; cursor: progress; }
.groupe-btn { display: flex; flex-wrap: wrap; gap: .75rem; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 650; font-size: var(--t-s); text-decoration: none;
  color: var(--terre-fonce); border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
}
.lien-fleche svg { transition: transform var(--transition); }
.lien-fleche:hover svg { transform: translateX(3px); }

/* ------------------------------ 5. Entête ----------------------------- */
.entete {
  /* Jetons locaux : l'état transparent de l'accueil ne redéfinit que ceux-ci. */
  --entete-fond: rgba(251, 247, 239, .94);
  --entete-texte: var(--ink);
  --entete-sous: var(--ink-3);
  --entete-filet: var(--ligne);
  --entete-survol: var(--creme-2);
  --entete-flou: saturate(140%) blur(8px);
  position: sticky; top: 0; z-index: 100;
  background: var(--entete-fond);
  color: var(--entete-texte);
  border-bottom: 1px solid var(--entete-filet);
  backdrop-filter: var(--entete-flou);
  transition: background .35s ease, border-color .35s ease;
}
/* La barre est plus large que la colonne de contenu : marque + navigation +
   actions demandent environ 1290 px, contre 1180 pour le texte. Sans cela le
   bouton de droite était rogné — « overflow-x: hidden » masquait la coupe. */
.entete__interieur {
  max-width: 1340px;
  display: flex; align-items: center; gap: clamp(.6rem, 1.5vw, 1.4rem);
  min-height: 72px; padding-block: .6rem;
}
.marque { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; flex: none; }
.marque__logos { display: inline-flex; flex: none; }
.marque__logo { width: 48px; height: auto; flex: none; }
/* Deux versions du symbole : couverts noirs sur fond clair, couverts crème sur
   fond sombre. On n'affiche que celle qui convient au fond du moment. */
.marque__logo--clair { display: none; }
.pied .marque__logo--fonce { display: none; }
.pied .marque__logo--clair { display: block; }
.marque__nom { font-family: var(--serif); font-size: 1.15rem; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; }
.marque__sous { display: block; font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--entete-sous, var(--ink-3)); }

.nav { margin-left: auto; }
.nav__liste { display: flex; align-items: center; gap: clamp(.1rem, .8vw, .75rem); list-style: none; margin: 0; padding: 0; }
.nav__lien {
  display: block; padding: .55rem .7rem; white-space: nowrap; border-radius: var(--r-s);
  color: inherit; text-decoration: none; font-size: var(--t-s); font-weight: 550;
  transition: background var(--transition), color var(--transition);
}
.nav__lien:hover { background: var(--entete-survol); color: inherit; }
.nav__lien[aria-current="page"] { color: var(--entete-actif, var(--terre-fonce)); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ambre); }

.entete__actions { display: flex; align-items: center; gap: .5rem; flex: none; }

/* Réseaux sociaux : boutons ronds, sans étiquette visible. Ils empruntent les
   jetons de l'en-tête, donc ils restent lisibles sur la barre transparente de
   l'accueil comme sur la barre crème des autres pages. */
.reseaux { display: flex; align-items: center; gap: .25rem; flex: none; }
.reseau {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  color: inherit; text-decoration: none;
  border: 1.5px solid transparent;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.reseau:hover { color: inherit; background: var(--entete-survol, var(--creme-2)); border-color: var(--entete-filet, var(--ligne)); transform: translateY(-1px); }
.reseaux--pied { margin-top: 1rem; }
.reseaux--pied .reseau { width: 42px; height: 42px; border-color: rgba(251, 247, 239, .22); }
.reseaux--pied .reseau:hover { background: rgba(251, 247, 239, .12); border-color: rgba(251, 247, 239, .5); }
.entete__actions .btn { padding: .6rem 1.1rem; min-height: 44px; }

/* Menu « Nous contacter » */
.menu-contact { position: relative; }
.menu-contact__panneau {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 120;
  min-width: 268px; padding: .4rem;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m);
  box-shadow: var(--ombre-m);
  display: none;
}
.menu-contact__panneau[data-ouvert="true"] { display: block; }
.menu-contact__lien {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .8rem; border-radius: var(--r-s);
  color: var(--ink); text-decoration: none; font-size: var(--t-s); line-height: 1.35;
}
.menu-contact__lien:hover, .menu-contact__lien:focus-visible { background: var(--creme-2); color: var(--ink); }
.menu-contact__lien svg { flex: none; color: var(--terre); }
.menu-contact__lien b { display: block; font-weight: 650; }
.menu-contact__lien span { color: var(--ink-3); font-size: var(--t-xs); }

/* Bascule mobile */
.bascule-menu {
  display: none; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; min-width: 44px; padding: .5rem .8rem;
  background: transparent; border: 1.5px solid currentColor; border-radius: 999px;
  color: inherit; font: inherit; font-size: var(--t-xs); font-weight: 650; cursor: pointer;
}
.bascule-menu__barres { display: grid; gap: 3.5px; }
.bascule-menu__barres i { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }

/* En dessous de 940px : l'en-tête passe sur deux rangées.
   Le menu déroulant s'insère dans le flux de l'en-tête (pas de hauteur codée
   en dur) et les deux appels à l'action restent visibles en permanence. */
@media (max-width: 1369px) {
  .bascule-menu { display: inline-flex; order: 3; }
  .entete__interieur { flex-wrap: wrap; row-gap: .45rem; padding-block: .55rem; }
  .marque { order: 1; flex: 1 1 auto; min-width: 0; }
  /* Les réseaux rejoignent la ligne du logo (entre le nom et le bouton Menu)
     plutôt que d'occuper leur propre rangée pleine largeur : c'est ce qui
     allongeait le plus la barre sur téléphone. Réduits eux aussi, pour ne
     pas dépasser la ligne du logo. */
  .entete__interieur > .reseaux { order: 2; flex: none; gap: .15rem; }
  .entete__interieur > .reseaux .reseau { width: 32px; height: 32px; }
  /* Bouton Menu réduit à son icône : le mot "Menu" prenait à lui seul assez
     de place pour faire déborder toute la ligne du logo sur les écrans de
     téléphone les plus étroits (~375px). L'icône seule reste compréhensible,
     et le texte demeure lisible par les lecteurs d'écran. */
  .bascule-menu [data-bascule-texte] {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .bascule-menu { padding-inline: .7rem; }

  .entete__actions {
    order: 4; flex-basis: 100%;
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  }
  .entete__actions > * { width: 100%; }
  .entete__actions .menu-contact > .btn { width: 100%; }
  .entete__actions .btn--devis-entete { display: inline-flex; }
  .entete__actions .btn { padding: .55rem .8rem; min-height: 40px; }
  .menu-contact__panneau { left: 0; right: auto; min-width: min(300px, calc(100vw - 2.5rem)); }

  .nav {
    order: 5; flex-basis: 100%;
    display: none; max-height: 62dvh; overflow-y: auto;
    border-top: 1px solid var(--ligne); padding-top: .25rem;
  }
  .nav[data-ouvert="true"] { display: block; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lien { padding: .95rem .2rem; border-bottom: 1px solid var(--ligne); border-radius: 0; font-size: var(--t-m); }
  .nav__lien[aria-current="page"] { box-shadow: none; }
  .nav__liste li:last-child .nav__lien { border-bottom: 0; }
}

@media (max-width: 420px) {
  .marque__sous { display: none; }
  .marque__nom { font-size: 1.02rem; }
  .marque__logo { width: 40px; }
  .entete__actions .btn { padding: .6rem .7rem; font-size: var(--t-xs); }
}

/* ------------------------------- 6. Héro ------------------------------ */
.hero { position: relative; background: var(--creme); padding-block: clamp(2.5rem, 5vw, 4.5rem) 0; overflow: hidden; }
.hero__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .hero__grille { grid-template-columns: 1.05fr .95fr; } }
/* Le héro en vidéo n'a plus de colonne d'images : le texte tient seul, cadré
   pour rester lisible sans s'étirer sur les grands écrans. */
.hero--video .hero__grille { grid-template-columns: 1fr; }
.hero--video .hero__grille > div { max-width: 46rem; }

.hero__titre { margin-bottom: .5em; }
.hero__titre em { font-style: normal; color: var(--terre); }
.hero__chapeau { font-size: var(--t-m); color: var(--ink-2); max-width: 52ch; }

.bande-metiers {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--ligne);
  padding-block: 1.1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.6rem;
  font-size: var(--t-s); color: var(--ink-2);
}
.bande-metiers b { font-weight: 650; color: var(--ink); }
.bande-metiers ul { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; margin: 0; padding: 0; }

/* ---------------------------- 7. Catégories --------------------------- */
.grille-categories { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 720px) { .grille-categories { grid-template-columns: repeat(3, 1fr); } }

.carte-categorie {
  position: relative; display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-l);
  overflow: hidden; box-shadow: var(--ombre-s);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-categorie:hover { transform: translateY(-3px); box-shadow: var(--ombre-m); }
.carte-categorie__media { aspect-ratio: 4 / 3; background: var(--creme-2); overflow: hidden; }
.carte-categorie__media img { width: 100%; height: 100%; object-fit: cover; }
.carte-categorie__media--motif { background: linear-gradient(135deg, var(--vert) 0%, #17513a 100%); display: grid; place-items: center; }
.carte-categorie__media--motif svg { width: 42%; height: auto; color: rgba(255,255,255,.9); }
.carte-categorie__corps { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.carte-categorie__corps h3 { margin-bottom: .4rem; }
.carte-categorie__corps p { font-size: var(--t-s); color: var(--ink-2); margin-bottom: 1.1rem; }
.carte-categorie__corps .lien-fleche { margin-top: auto; align-self: flex-start; }
.carte-categorie a::after { content: ""; position: absolute; inset: 0; }

/* ----------------------------- 8. Produits ---------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtre {
  min-height: 44px; padding: .5rem 1.05rem;
  background: var(--blanc); border: 1.5px solid var(--ligne); border-radius: 999px;
  color: var(--ink-2); font: inherit; font-size: var(--t-s); font-weight: 600; cursor: pointer;
  transition: all var(--transition);
}
.filtre:hover { border-color: var(--ink-3); color: var(--ink); }
.filtre[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--creme); }

.grille-produits { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px) { .grille-produits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grille-produits { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grille-produits { grid-template-columns: repeat(4, 1fr); } }

.carte-produit {
  display: flex; flex-direction: column; height: 100%;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m);
  overflow: hidden; box-shadow: var(--ombre-s);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-produit:hover { transform: translateY(-2px); box-shadow: var(--ombre-m); }
.carte-produit__media { position: relative; aspect-ratio: 4 / 5; background: var(--creme-2); overflow: hidden; }
.carte-produit__media img { width: 100%; height: 100%; object-fit: cover; }
.carte-produit__corps { padding: 1rem 1.05rem 1.15rem; display: flex; flex-direction: column; flex: 1; gap: .45rem; }
.carte-produit__nom { font-size: 1.05rem; line-height: 1.25; margin: 0; }
.carte-produit__desc { font-size: var(--t-s); color: var(--ink-2); margin: 0; }
.carte-produit__cond { font-size: var(--t-xs); color: var(--ink-3); margin: 0; }
/* Le bouton est chassé vers le bas de la carte. Les cartes d'une même rangée
   ayant la même hauteur, tous les boutons s'alignent, quelle que soit la
   longueur des noms et des descriptions au-dessus. */
.carte-produit .btn { margin-top: auto; font-size: var(--t-xs); min-height: 44px; padding: .6rem 1rem; }

.liste-references { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.liste-references li {
  padding: .5rem 1rem; background: var(--blanc); border: 1px solid var(--ligne);
  border-radius: 999px; font-size: var(--t-s); color: var(--ink-2);
}
.encart {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--ambre-clair); border-radius: var(--r-m);
  border-left: 4px solid var(--ambre);
}
.encart p:last-child { margin-bottom: 0; }
.encart--vert { background: var(--vert-clair); border-left-color: var(--vert); }

/* ---------------------------- 9. Atouts ------------------------------- */
.grille-atouts { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 700px) { .grille-atouts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-atouts { grid-template-columns: repeat(4, 1fr); } }
.atout__icone {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 1rem;
  display: grid; place-items: center; background: rgba(242,168,28,.18); color: var(--ambre);
}
.section--ink .atout__icone { background: rgba(242,168,28,.16); }
.atout h3 { font-size: var(--t-m); margin-bottom: .35rem; }
.atout p { font-size: var(--t-s); margin: 0; }

.grille-metiers { display: grid; gap: 1rem; }
@media (min-width: 640px) { .grille-metiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-metiers { grid-template-columns: repeat(4, 1fr); } }
.metier {
  padding: 1.4rem 1.3rem; background: var(--blanc);
  border: 1px solid var(--ligne); border-radius: var(--r-m); box-shadow: var(--ombre-s);
}
.metier h3 { font-size: var(--t-m); margin-bottom: .3rem; }
.metier p { font-size: var(--t-s); color: var(--ink-2); margin: 0; }

.etapes { counter-reset: etape; display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 800px) { .etapes { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem; } }
.etape { position: relative; padding-left: 3.5rem; }
.etape::before {
  counter-increment: etape; content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: -.15rem;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--ambre);
}
.etape h3 { font-size: var(--t-m); margin-bottom: .3rem; }
.etape p { font-size: var(--t-s); color: var(--ink-2); margin: 0; }

/* ------------------------- 10. Bande d'appel -------------------------- */
.appel {
  background: var(--ink); color: var(--creme);
  border-radius: var(--r-l); padding: clamp(2rem, 5vw, 3.5rem);
  display: grid; gap: 1.75rem; align-items: center;
}
@media (min-width: 860px) { .appel { grid-template-columns: 1.4fr auto; } }
.appel h2 { color: var(--blanc); margin-bottom: .4rem; }
.appel p { color: #d5cec0; margin: 0; }
.appel__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------- 11. Formulaire --------------------------- */
.formulaire { display: grid; gap: 1.25rem; }
.champs { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .champs--2 { grid-template-columns: 1fr 1fr; } }
.bloc-champs {
  border: 1px solid var(--ligne); border-radius: var(--r-m);
  padding: clamp(1.15rem, 3vw, 1.75rem); margin: 0; background: var(--blanc);
}
.bloc-champs > legend {
  padding: 0 .5rem; margin-left: -.5rem;
  font-family: var(--serif); font-size: var(--t-m); font-weight: 650;
}
.champ { display: flex; flex-direction: column; gap: .4rem; }
.champ label { font-size: var(--t-s); font-weight: 650; }
.champ .indice { font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; }
.champ .facultatif { color: var(--ink-3); font-weight: 500; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  background: var(--creme); color: var(--ink);
  border: 1.5px solid var(--ligne); border-radius: var(--r-s);
  font: inherit; font-size: var(--t-s);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23554e40' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--terre); box-shadow: 0 0 0 3px rgba(184,67,26,.16); outline: none;
}
.champ[data-erreur="true"] input, .champ[data-erreur="true"] select, .champ[data-erreur="true"] textarea { border-color: var(--rouge); background: #fdf5f4; }
.champ__erreur { display: none; font-size: var(--t-xs); font-weight: 600; color: var(--rouge); }
.champ[data-erreur="true"] .champ__erreur { display: flex; align-items: center; gap: .3rem; }

.cases { display: grid; gap: .55rem; }
@media (min-width: 560px) { .cases { grid-template-columns: repeat(2, 1fr); } }
.case {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem .85rem; min-height: 48px;
  background: var(--creme); border: 1.5px solid var(--ligne); border-radius: var(--r-s);
  font-size: var(--t-s); cursor: pointer; transition: all var(--transition);
}
.case:hover { border-color: var(--ink-3); }
.case input { width: 20px; height: 20px; min-height: 0; margin: .1rem 0 0; accent-color: var(--terre); flex: none; }
.case:has(input:checked) { border-color: var(--terre); background: #fdf3ef; }
.case:has(input:focus-visible) { outline: 3px solid var(--terre); outline-offset: 2px; }

.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.message-formulaire { padding: 1.1rem 1.25rem; border-radius: var(--r-m); font-size: var(--t-s); display: none; }
.message-formulaire[data-etat="succes"] { display: block; background: var(--vert-clair); border-left: 4px solid var(--vert); }
.message-formulaire[data-etat="erreur"] { display: block; background: #fbeceb; border-left: 4px solid var(--rouge); }
.message-formulaire h3 { font-size: var(--t-m); margin-bottom: .3rem; }
.message-formulaire p:last-child { margin-bottom: 0; }

.mention-rgpd { font-size: var(--t-xs); color: var(--ink-3); }
.mention-rgpd a { color: var(--ink-2); }

.chargeur {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: tourner .7s linear infinite; display: none;
}
.btn[aria-disabled="true"] .chargeur { display: block; }
@keyframes tourner { to { transform: rotate(360deg); } }

/* ----------------------------- 12. Contact ---------------------------- */
.grille-contact { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .grille-contact { grid-template-columns: 1fr 1.15fr; } }
.fiche-contact { display: grid; gap: 1.15rem; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.fiche-contact li { display: flex; gap: .9rem; align-items: flex-start; }
.fiche-contact svg { color: var(--terre); flex: none; margin-top: .2rem; }
.fiche-contact b { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fiche-contact a { font-size: var(--t-m); font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ambre); }
.fiche-contact a:hover { color: var(--terre); }
.fiche-contact address { font-style: normal; font-size: var(--t-m); }

/* ------------------------------ 13. Pied ------------------------------ */
.pied { background: var(--ink); color: #cbc4b6; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; margin-top: var(--section); }
.pied a { color: #cbc4b6; text-decoration: none; }
.pied a:hover { color: var(--ambre); text-decoration: underline; }
.pied__grille { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .pied__grille { grid-template-columns: 1.5fr 1fr 1fr; } }
.pied h2, .pied h3 { color: var(--blanc); font-size: var(--t-xs); font-family: var(--sans); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: var(--t-s); }
.pied .marque__nom { color: var(--blanc); }
.pied .marque__sous { color: var(--discret-sombre); }
.pied p { font-size: var(--t-s); max-width: 40ch; }
.pied__bas {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(251,247,239,.14);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: var(--t-xs); color: var(--discret-sombre);
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* --------------------------- 14. Pages texte -------------------------- */
.page-entete { background: var(--creme-2); border-bottom: 1px solid var(--ligne); padding-block: clamp(2.5rem, 5vw, 4rem); }
.page-entete h1 { margin-bottom: .3em; }
.page-entete p { font-size: var(--t-m); color: var(--ink-2); margin: 0; max-width: 60ch; }
.fil { font-size: var(--t-xs); color: var(--ink-3); margin-bottom: 1rem; }
.fil ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.fil li + li::before { content: "›"; margin-right: .4rem; color: var(--ink-3); }
.fil a { color: var(--ink-2); }

.contenu h2 { margin-top: 2.5rem; }
.contenu h3 { margin-top: 1.75rem; font-size: var(--t-m); }
.contenu > :first-child { margin-top: 0; }
.contenu ul, .contenu ol { max-width: 68ch; margin-bottom: 1.1em; }
.contenu li { margin-bottom: .4em; }
.contenu dl { max-width: 68ch; }
.contenu dt { font-weight: 650; margin-top: 1rem; }
.contenu dd { margin: 0 0 .5rem; color: var(--ink-2); }

/* --------------------------- 15. Animations --------------------------- */
/* Le contenu n'est masqué que si les scripts peuvent effectivement le
   révéler : sans JavaScript (ou sur un navigateur sans « scripting »),
   tout reste visible. */
@media (scripting: enabled) {
  .apparition { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
}
.apparition.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .apparition { opacity: 1; transform: none; }
}

@media print {
  .entete, .pied, .appel, .btn { display: none !important; }
  body { background: #fff; }
}

/* Carte de catalogue sans photo, cliquable (Autres fruits secs) */
.carte-produit--lien { position: relative; }
.carte-produit__lien { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.carte-produit__media--motif { display: grid; place-items: center; background: linear-gradient(135deg, var(--vert) 0%, #17513a 100%); }
.carte-produit__media--motif svg { width: 38%; height: auto; color: rgba(255,255,255,.9); }
.carte-produit--lien .lien-fleche { margin-top: auto; align-self: flex-start; }
.carte-produit--lien:hover .lien-fleche { text-decoration: underline; text-underline-offset: 3px; }

/* Carte « Autres références » : dernière de la grille, elle occupe toute la
   largeur et se centre, pour se lire comme une invitation et non comme un
   produit de plus. En dessous de 560px la grille est déjà sur une colonne. */
.carte-produit--large { grid-column: 1 / -1; width: 100%; max-width: 44rem; margin-inline: auto; }
@media (min-width: 560px) {
  .carte-produit--large .carte-produit__lien { flex-direction: row; align-items: stretch; }
  .carte-produit--large .carte-produit__media { flex: 0 0 40%; aspect-ratio: auto; }
  .carte-produit--large .carte-produit__corps { justify-content: center; gap: .5rem; padding: 1.6rem 1.8rem; }
  .carte-produit--large .carte-produit__nom { font-size: 1.3rem; }
  .carte-produit--large .carte-produit__desc { font-size: 1rem; }
  .carte-produit--large .lien-fleche { margin-top: .4rem; }
}


/* ------------------- 16. Héro avec vidéo de fond ---------------------- */
/* Quatre plans macro s'enchaînent en fondu derrière le titre. L'image fixe
   reste seule si le visiteur a demandé moins d'animations ou économise ses
   données : la page reste alors exactement aussi lisible. */
.hero--video { position: relative; overflow: hidden; background: #17150f; padding-bottom: clamp(1rem, 3vw, 2rem); }
.hero--video > .enveloppe { position: relative; z-index: 1; }

/* Plus AUCUNE photo dans le héros. La photo de repli — un bol sur fond jaune —
   finissait toujours par se montrer une fraction de seconde avant la vidéo,
   quel que soit le moment où on la posait. Le repli est désormais un dégradé
   sombre, cousin de la teinte moyenne des cinq plans. */
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  background: #17150f;
}
.hero__media.repli-photo {
  background: radial-gradient(120% 90% at 70% 40%, #3a2e1d 0%, #211b12 55%, #14120c 100%);
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  /* Léger flou et agrandissement : masque la définition réduite des fichiers
     et fait reculer le fond derrière le texte. */
  transform: scale(1.07); filter: blur(3px) saturate(1.06);
  transition: opacity .45s ease;
}
.hero__video.est-visible { opacity: 1; }
/* Le plan qui s'en va passe au premier plan et se dissout : celui qui arrive,
   déjà opaque en dessous, est révélé progressivement. Jamais de noir, et
   jamais deux images à demi transparentes l'une sur l'autre. */
.hero__video { z-index: 1; }
.hero__video.se-retire { z-index: 2; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: rgba(14, 12, 8, .88);
}
@media (min-width: 900px) {
  /* Le voile reste dense sur toute la largeur du texte et ne s'éclaircit
     qu'au-delà : c'est ce qui garantit la lisibilité quel que soit le plan. */
  .hero__media::after {
    background: linear-gradient(90deg,
      rgba(14,12,8,.94) 0%,
      rgba(14,12,8,.92) 40%,
      rgba(14,12,8,.84) 62%,
      rgba(14,12,8,.72) 100%);
  }
}

/* Le héro passe en palette claire sur fond sombre. */
.hero--video .surtitre { color: var(--ambre); }
.hero--video .surtitre::before { background: var(--ambre); }
.hero--video .hero__titre { color: #fff; text-shadow: 0 2px 18px rgba(10, 8, 5, .55); }
.hero--video .hero__titre em { color: var(--ambre); }
.hero--video .hero__chapeau { color: #efe8da; text-shadow: 0 1px 14px rgba(10, 8, 5, .8); }
.hero--video .bande-metiers { color: #ece5d8; text-shadow: 0 1px 10px rgba(10, 8, 5, .7); border-top-color: rgba(251, 247, 239, .22); }
.hero--video .bande-metiers b { color: #fff; }
.hero--video .btn--secondaire { --btn-texte: var(--creme); --btn-bord: rgba(251, 247, 239, .5); }
.hero--video .btn--secondaire:hover { background: var(--creme); color: var(--ink); border-color: var(--creme); }
/* Sans animation : pas de vidéo du tout, et la photo prend la place. Le
   sélecteur orphelin qui traînait ici avalait ce bloc entier. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__media { background: radial-gradient(120% 90% at 70% 40%, #3a2e1d 0%, #211b12 55%, #14120c 100%); }
}

/* --------- 17. Accueil : en-tête transparent au-dessus de la vidéo ------- */
/* La vidéo passe sous la barre, qui redevient crème dès qu'on a dépassé le
   héro. Seuls les jetons de l'en-tête changent : aucune règle en double. */
.a-fond-video .entete:not(.est-opaque) {
  --entete-fond: transparent;
  --entete-texte: var(--creme);
  --entete-sous: rgba(251, 247, 239, .72);
  --entete-filet: rgba(251, 247, 239, .18);
  --entete-survol: rgba(251, 247, 239, .14);
  --entete-actif: #fff;
  --entete-flou: none;
}
/* Dégradé sous la barre : garantit la lisibilité là où la vidéo est claire. */
.a-fond-video .entete::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14, 12, 8, .62), rgba(14, 12, 8, 0));
  opacity: 1; transition: opacity .35s ease; pointer-events: none;
}
.a-fond-video .entete.est-opaque::before { opacity: 0; }
.a-fond-video .entete:not(.est-opaque) .marque__logo--fonce { display: none; }
.a-fond-video .entete:not(.est-opaque) .marque__logo--clair { display: block; }
.a-fond-video .entete:not(.est-opaque) .btn--secondaire {
  --btn-texte: var(--creme); --btn-bord: rgba(251, 247, 239, .5);
}
.a-fond-video .entete:not(.est-opaque) .btn--secondaire:hover {
  background: var(--creme); color: var(--ink); border-color: var(--creme);
}
@media (max-width: 1369px) {
  /* Sur téléphone, "Nous contacter" restait un simple contour : la vidéo se
     voyait à travers. Un fond plein, posé sur le voile déjà présent derrière
     la barre, règle ça sans toucher à son apparence sur ordinateur. */
  .a-fond-video .entete:not(.est-opaque) .btn--secondaire {
    --btn-fond: var(--ink); --btn-bord: var(--ink);
  }
}

/* Le héro remonte sous la barre, pour que le fond vidéo passe derrière elle.
   La hauteur réelle de la barre est mesurée en JS (initEnteteAccueil) et posée
   dans --hauteur-entete : sur mobile, où la barre s'étale sur plusieurs lignes
   (logo, réseaux, boutons), elle dépasse largement les ~73px d'une seule ligne
   desktop. Une valeur figée laissait alors une bande crème visible sous la
   barre transparente, entre le bas réel de la barre et le haut du fond vidéo.
   73px reste le repli tant que le script n'a pas encore mesuré. */
.a-fond-video .hero--video {
  margin-top: calc(-1 * var(--hauteur-entete, 73px));
  padding-top: calc(var(--hauteur-entete, 73px) + clamp(2.5rem, 5vw, 4.5rem));
}
@media (max-width: 940px) {
  /* Menu mobile déplié : la barre redevient opaque, sinon le menu flotte. */
  .a-fond-video .entete:has(.nav[data-ouvert="true"]) { --entete-fond: var(--creme); --entete-texte: var(--ink); }
}