:root{
  --paper:#fafafa;
  --white:#ffffff;
  --ink:#0c0c0c;
  --ink-soft:#5b5b5b;
  --line:#e2e2e2;
  --line-strong:#c4c4c4;
  --accent:#111111;
  --accent-soft:#ececec;
  --accent-on-dark:#9a9a9a;
  /* Palette noir et blanc : plus de bordeaux distinct pour alarmer, on
     garde le rouge ici uniquement, seule couleur du site. */
  --alerte:#b3261e;
  --alerte-soft:#fdecea;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Karla',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:'Athelas','Fraunces',Georgia,serif;}
.mono{font-family:'Space Mono',monospace;}
.wrap{max-width:1220px;margin:0 auto;padding:0 40px;}
a{color:inherit;text-decoration:none;}

nav{
  /* Sous le bandeau de contexte quand il y en a un : les deux restent
     collés en haut, et le bandeau recouvrirait la navigation s'ils se
     calaient tous deux à zéro. La hauteur est mesurée par script.js, la
     valeur de repli servant tant qu'aucun bandeau n'est affiché. */
  position:sticky;top:var(--hauteur-bandeau,0px);z-index:50;
  background:rgba(251,250,248,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:104px;}
.logo{display:flex;align-items:center;}
.logo img{height:92px;width:92px;object-fit:contain;display:block;}
.nav-menu{display:flex;align-items:center;gap:44px;}
.nav-links{display:flex;gap:44px;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;}
/* Le bouton n'existe que sur téléphone ; ses trois barres deviennent une
   croix à l'ouverture, sans image ni police d'icônes. */
.nav-bascule{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;background:none;border:none;cursor:pointer;
}
.nav-bascule span{
  display:block;width:22px;height:1.5px;background:var(--ink);
  transition:transform .25s ease,opacity .2s ease;
}
nav.ouvert .nav-bascule span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
nav.ouvert .nav-bascule span:nth-child(2){opacity:0;}
nav.ouvert .nav-bascule span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav-links a{position:relative;padding-bottom:4px;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ink);transition:width .25s;}
.nav-links a:hover::after{width:100%;}
/* Page courante : le trait du survol, mais permanent. */
.nav-links a.on{color:var(--ink);}
.nav-links a.on::after{width:100%;}

/* Sous-menu des familles, sous Collections et sous Boutique. Il s'ouvre au
   survol et au passage du clavier — :focus-within suffit, sans script — et
   le lien parent reste un lien : qui clique « Collections » veut le
   catalogue entier, pas une famille en particulier. Aucun espace entre le
   parent et le panneau, sans quoi le menu se referme en le traversant. */
.nav-groupe{position:relative;}
.nav-sous-menu{
  display:none;position:absolute;top:100%;left:-18px;z-index:60;
  min-width:236px;padding:10px 0;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(12,12,12,0.12);
}
.nav-groupe:hover .nav-sous-menu,
.nav-groupe:focus-within .nav-sous-menu{display:block;}
.nav-links .nav-sous-menu a{display:block;padding:9px 18px;}
.nav-links .nav-sous-menu a::after{display:none;}
.nav-links .nav-sous-menu a:hover{background:var(--accent-soft);}
/* Les coffrets ferment le menu, détachés par un filet : on n'y cherche pas
   une recette mais une boîte à offrir. */
.nav-sous-menu a[data-rayon="coffret"]{
  margin-top:9px;padding-top:15px;border-top:1px solid var(--line);
}
/* Les liens réservent 4 pixels sous le texte pour leur soulignement. Comme
   tout est centré sur la hauteur de la barre, ce padding remonte leur texte
   d'autant : sans le même retrait, « Bonjour… », « Back-office » et « Panier »
   retombaient deux pixels plus bas que « Collections ». */
.nav-account{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);margin-right:20px;padding-bottom:4px;}
.nav-account:hover{color:var(--ink-soft);}
.nav-pro{font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);margin-right:28px;padding-left:20px;padding-bottom:4px;border-left:1px solid var(--line);}
.nav-pro:hover{color:var(--ink);}

/* 48 pixels et non 100 : la barre de navigation en occupe déjà une
   centaine, et les deux additionnés creusaient un vide entre le logo et le
   premier mot de la page. */
.hero{padding:48px 0 0;position:relative;overflow:hidden;}
.hero-label{
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;align-items:center;gap:14px;margin-bottom:34px;
}
.hero-label::before{content:'';width:32px;height:1px;background:var(--ink-soft);}
.hero-title{
  font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(52px,8.4vw,124px);
  line-height:0.92;letter-spacing:-0.01em;
}
.hero-title em{font-style:italic;color:var(--accent);}
.hero-title-sub{
  font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(28px,4.2vw,56px);line-height:1;letter-spacing:-0.01em;
  color:var(--accent);margin-top:4px;
}

/* Le titre d'un côté, une recette entièrement ouverte de l'autre : la
   transparence se démontre d'emblée au lieu d'être annoncée. */
.hero-grille{
  /* Alignés par le haut : centrer le texte face à une carte bien plus
     haute que lui le faisait descendre de près de 300 pixels, ouvrant un
     vide entre le logo et le premier mot. Le titre commence donc là où
     commence le pot. */
  display:grid;grid-template-columns:1fr 0.85fr;gap:70px;align-items:start;
  padding-bottom:110px;
}
.hero-phrase{
  margin-top:32px;max-width:440px;
  color:var(--ink-soft);font-size:16.5px;line-height:1.8;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px;}

.preuve{background:var(--white);border:1px solid var(--line);padding:32px;}
/* « contain » et non « cover » : le pot est détouré et carré, le rogner
   pour remplir un cadre reviendrait à le décapiter. */
.preuve-photo{
  display:block;width:100%;aspect-ratio:1;object-fit:contain;
  background:var(--paper);margin-bottom:28px;
}
.preuve-tete{display:flex;justify-content:space-between;align-items:baseline;gap:16px;}
.preuve-tete h2{font-size:27px;}
.preuve-tete span{font-size:12px;color:var(--ink-soft);white-space:nowrap;}
.preuve-accroche{font-size:13.5px;color:var(--ink-soft);margin:10px 0 24px;}
.preuve-lien{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);
}
.preuve-lien:hover{color:var(--ink);}

/* Le padding est écrit en quatre valeurs et non deux : cet élément porte
   aussi la classe « wrap », dont il écrasait la marge horizontale — les
   titres se retrouvaient collés au bord de l'écran. */
.page-header{padding:48px 40px 44px;border-bottom:1px solid var(--line);}
.page-header h1{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,64px);}
.page-header p{color:var(--ink-soft);margin-top:16px;max-width:520px;font-size:15px;}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:24px;}
.back-link:hover{color:var(--ink);}

section{padding:120px 0;}
.eyebrow{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px;}
h2{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:clamp(32px,4vw,52px);line-height:1.05;}
h2 em{font-style:italic;color:var(--accent);}

.manifeste{padding:60px 0 130px;}
.manifeste blockquote{
  font-family:'Athelas','Fraunces',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(26px,3.4vw,42px);line-height:1.35;max-width:900px;
  text-align:center;margin:0 auto;
}
.manifeste-foot{text-align:center;margin-top:36px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);}

/* La démonstration vit maintenant dans l'en-tête : il ne reste ici que
   l'argument, en deux colonnes de texte. */
.parti-pris{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.parti-pris-grille{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:start;}
.parti-pris-texte p{color:var(--ink-soft);font-size:15.5px;line-height:1.8;margin-bottom:20px;}
/* La ligne de chute, détachée par un filet : une signature à la taille du
   texte, pas une note en bas de colonne. */
.parti-pris-texte .parti-pris-chute{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink);
}
.fline-row{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);}
.fline-row .fname{font-size:14.5px;}
.fline-row .fpct{font-family:'Space Mono',monospace;font-size:14.5px;color:var(--ink);}
/* Mention de traces : sous la composition, sans bordure de ligne. */
.fline-traces{padding:13px 0 0;font-size:13px;line-height:1.5;color:var(--ink-soft);}

/* Aperçu du catalogue : des pots alignés, sans leur composition — la page
   des collections la publie déjà, la répéter allongeait l'accueil de mille
   pixels pour rien. */
.grille-recettes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;margin-top:56px;
}
.carte-recette{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:26px 18px 24px;background:var(--white);border:1px solid var(--line);
  transition:border-color .25s ease,transform .25s ease;
}
.carte-recette:hover{border-color:var(--ink);transform:translateY(-3px);}
.carte-recette img{width:118px;height:118px;object-fit:contain;}
.carte-nom{
  font-family:'Athelas','Fraunces',Georgia,serif;font-size:18px;
  margin-top:16px;line-height:1.25;
}
.carte-prix{font-size:13px;color:var(--ink-soft);margin-top:8px;}
.collection-suite{margin-top:44px;}

/* Les avis Google, après les pots. Sobres : la note se lit d'un coup
   d'œil, le texte fait le reste, et rien n'imite les bandeaux colorés
   que les widgets d'avis posent d'ordinaire sur les pages. */
.avis{background:var(--accent-soft);}
.avis-tete{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:36px;
}
.avis-note{display:flex;align-items:baseline;gap:14px;}
.avis-note b{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:40px;}
.avis-total{font-size:13.5px;color:var(--ink-soft);}
.avis-etoiles{letter-spacing:0.1em;font-size:15px;line-height:1;}
.avis-tete a{font-size:14px;border-bottom:1px solid var(--line-strong);}
.avis-tete a:hover{border-bottom-color:var(--ink);}
.avis-liste{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.avis-carte{background:var(--white);border:1px solid var(--line);padding:26px 28px;margin:0;}
.avis-carte p{
  font-size:15px;line-height:1.7;margin:14px 0 18px;
  /* Un avis fleuve ne doit pas décaler les deux autres : au-delà, on
     coupe et le lecteur va le lire chez Google, comme le veut la règle. */
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;
}
.avis-carte cite{
  font-style:normal;font-size:13.5px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
}
.avis-carte cite span{font-size:12px;color:var(--ink-soft);}
.avis-tri{margin-top:22px;font-size:12.5px;color:var(--ink-soft);}

.noir{background:var(--ink);color:var(--white);}
.noir .eyebrow{color:#a3a39c;}
.stage-list{border-top:1px solid #2c2c2a;margin-top:60px;}
.stage-row{
  display:grid;grid-template-columns:80px 1fr 1.4fr;gap:40px;
  padding:34px 0;border-bottom:1px solid #2c2c2a;align-items:baseline;
}
.stage-row .roman{font-family:'Athelas','Fraunces',Georgia,serif;font-style:italic;font-size:20px;color:var(--accent-on-dark);}
.stage-row h4{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:24px;}
.stage-row p{color:#c4c4bd;font-size:14.5px;line-height:1.7;}

/* Deux recettes par rangée : la composition restant dépliée, une seule
   colonne donnait une page interminable. Les intitulés de catégorie, eux,
   gardent la pleine largeur et séparent les groupes. */
.collection-list{
  display:grid;grid-template-columns:1fr 1fr;column-gap:52px;
}
/* Le nom de la catégorie se lit comme un bandeau plein : c'est lui qui sépare
   les groupes, la bordure qui coiffait la liste ferait doublon. */
.eyebrow-categorie{
  display:block;margin:64px 0 0;padding:14px 20px;
  background:var(--accent);color:#fff;
  font-size:15px;font-weight:600;letter-spacing:0.14em;
}
/* Ce qu'il y a dans le pot, dit en un mot : praliné, pâte à tartiner ou
   crème gastronomique. La distinction ne se lisait jusqu'ici qu'en
   déduisant du chocolat ou du miso dans la composition. Étiquette discrète
   et non colorée : c'est un repère de lecture, pas une réclame, et trois
   familles côte à côte dans une grille se distinguent par le mot, pas par
   la couleur. */
.badge-famille{
  display:inline-block;margin-top:10px;padding:3px 9px;
  border:1px solid var(--line-strong);
  font-family:'Space Mono',monospace;font-size:10px;line-height:1.5;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);
}
/* Dans une carte en colonne, l'étiquette s'étirerait sur toute la largeur. */
.lp-pot .badge-famille{align-self:flex-start;margin-top:18px;}
.lp-pot .badge-famille + h3{margin-top:10px;}
.fiche-produit .badge-famille{margin:0 0 16px;}

.prod-row{padding:30px 0;border-bottom:1px solid var(--line);}
/* La composition reste dépliée : la formule complète est l'argument de la
   maison, la cacher derrière un clic la rendait facultative. La ligne n'est
   donc plus cliquable — ni curseur, ni fond au survol qui le laisserait
   croire. */
.prod-row-top{
  display:grid;grid-template-columns:96px 1fr auto;
  gap:20px;align-items:center;
}
/* Ruban « Salée » ---------------------------------------------------- */
/* Une bande en travers du coin haut gauche, comme un cachet posé sur la
   photo. Rouge franc et non bordeaux : ce n'est pas un ornement de charte,
   c'est un avertissement — une crème au miso achetée pour un praliné fait
   une déception, et un retour. Le cadre rogne les pointes qui dépassent.

   Le mot est répété dans le texte de la page (badge de famille, accroche),
   d'où l'aria-hidden : un lecteur d'écran l'entendrait deux fois. */
.visuel-cadre{position:relative;display:block;overflow:hidden;line-height:0;}

/* Le texte doit tomber au milieu de la diagonale, pas quelque part sur la
   bande : la bande est donc centrée sur la bissectrice du coin. Son centre
   est posé à (--ruban-ecart, --ruban-ecart) — deux fois la même valeur,
   donc sur la diagonale — par un décalage de la moitié de sa largeur et de
   la moitié de sa hauteur. La hauteur est fixée plutôt que déduite d'un
   padding, sans quoi ce recentrage vertical n'aurait rien à quoi se
   raccrocher. Un côté de bande vaut la largeur du cadre : de quoi traverser
   un coin coupé à 20 %, qui n'en mesure que 56 %.

   Ces 56 % commandent tout : 85 pixels sur une vignette de catalogue de 150.
   « Crème gastronomique » fait dix-neuf caractères, et Space Mono avance de
   0,6 cadratin — d'où des corps petits et un interlettrage nul, seuls
   réglages qui laissent la phrase entière traverser le coin. */
.visuel-cadre,
.fiche-visual{--ruban-hauteur:24px;--ruban-ecart:20%;}
.ruban-salee{
  position:absolute;
  top:var(--ruban-ecart);left:calc(var(--ruban-ecart) - 50%);
  width:100%;height:var(--ruban-hauteur);margin-top:calc(var(--ruban-hauteur) / -2);
  transform:rotate(-45deg);
  /* Rouge et non noir : sur la photo d'un pot, une bande noire en travers
     du coin a l'air d'un deuil plutôt que d'un avertissement. Le rouge est
     la seule couleur de la charte, et c'est bien un avertissement — une
     crème au miso achetée pour un praliné fait une déception, et un retour. */
  background:var(--alerte);color:#fff;
  font-family:'Space Mono',monospace;
  text-transform:uppercase;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(12,12,12,0.25);
}
/* <b> et <i> pour leur brièveté dans le balisage, sans intention de gras ni
   d'italique : la hiérarchie se fait à la taille. */
.ruban-salee b{font-weight:400;font-size:8.5px;letter-spacing:0;line-height:1.2;}
.ruban-salee i{font-style:normal;font-size:7px;letter-spacing:0;line-height:1.2;opacity:0.9;}

/* Sur la grande image d'une fiche, le coin coupé mesure plus de 300 pixels :
   la phrase y respire, et la bande retrouve une taille de bande. */
.fiche-visual{--ruban-hauteur:44px;--ruban-ecart:21%;}
.fiche-visual .ruban-salee b{font-size:15px;letter-spacing:0.04em;}
.fiche-visual .ruban-salee i{font-size:12px;letter-spacing:0.02em;}

/* Vignettes de 96 pixels : le coin n'en offre que 54, et la phrase entière
   y débordait de neuf. Elle tient au corps le plus petit qui reste lisible,
   et le nom de la famille l'accompagne de toute façon en clair, à côté. */
.ruban-salee-court{--ruban-hauteur:16px;}
.ruban-salee-court b{font-size:6px;}
.ruban-salee-court i{font-size:5px;}
/* Les pots de la page d'accueil font 150 pixels comme la grille : le corps
   par défaut leur va, seule la hauteur de bande change avec l'écart. */
.lp-pot .visuel-cadre{--ruban-hauteur:22px;--ruban-ecart:22%;}

.prod-thumb{width:96px;height:96px;object-fit:cover;border:1px solid var(--line);}
.prod-thumb-cadre{width:96px;height:96px;flex-shrink:0;}
.prod-row .name{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:24px;}
.prod-row .name a{border-bottom:1px solid transparent;}
.prod-row .name a:hover{border-bottom-color:var(--ink);}
.prod-row .name span{display:block;font-family:'Karla',sans-serif;font-size:12.5px;color:var(--ink-soft);margin-top:6px;letter-spacing:0.01em;}
.prod-row .price{font-family:'Athelas','Fraunces',Georgia,serif;font-size:17px;text-align:right;}
.prod-detail{padding-top:18px;padding-left:116px;}
.prod-detail .dline{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px dotted var(--line-strong);}
.prod-detail .dline .n{font-family:'Space Mono',monospace;}

.prod-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px;padding-left:116px;}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  /* 44 pixels de haut au minimum : en dessous, la cible devient difficile
     à viser au pouce, et une bonne part du trafic vient du téléphone. */
  padding:12px 24px;min-height:44px;font-family:'Karla',sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-principal{background:var(--accent);color:var(--white);border-color:var(--accent);}
.btn-principal:hover{background:transparent;color:var(--accent);}
.btn-secondaire{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-secondaire:hover{border-color:var(--ink);background:var(--white);}
.btn-fleche{display:inline-block;transition:transform .2s;}
.btn:hover .btn-fleche{transform:translateX(4px);}
.btn:disabled{opacity:.55;cursor:default;}
.btn-principal:disabled:hover{background:var(--accent);color:var(--white);}
/* Attente d'un ajout au panier : un anneau qui tourne à la place du
   libellé, en currentColor pour suivre le bouton, principal comme
   secondaire. La largeur du bouton est figée en JS avant l'échange, rien
   ne bouge autour. */
.btn-spinner{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:1.5px solid currentColor;border-top-color:transparent;
  animation:btn-tourne .7s linear infinite;
}
@keyframes btn-tourne{to{transform:rotate(360deg);}}
/* Le mouvement reste, très ralenti : c'est le seul signe que l'attente
   n'est pas un blocage. */
@media (prefers-reduced-motion:reduce){
  .btn-spinner{animation-duration:2.4s;}
}

/* ---------- fiche produit individuelle ---------- */
.fiche-produit{padding:80px 0 120px;}
/* Sans règle à elle, la fiche héritait des 120 pixels de padding des
   sections et démarrait bien plus bas que les autres pages. */
.fiche-produit{padding-top:48px;}
.fiche-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.fiche-visual{position:relative;aspect-ratio:1/1;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:var(--white);overflow:hidden;}
.fiche-visual img{width:100%;height:100%;object-fit:cover;}
.fiche-visual .jar-mark{font-family:'Athelas','Fraunces',Georgia,serif;font-style:italic;font-size:15px;color:var(--ink-soft);}
.fiche-cta[href]{cursor:pointer;}
.fiche-titre{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:clamp(34px,4vw,50px);line-height:1.05;}
.fiche-accroche{color:var(--ink-soft);margin-top:14px;font-size:16px;}
/* Description longue : ce qu'un coffret contient, ou ce qu'une recette
   mérite qu'on en dise au-delà de son accroche. Saisie au back-office,
   affichée seulement si elle existe. */
.fiche-visual-mention{
  margin-top:10px;text-align:center;font-style:italic;
  font-size:12.5px;color:var(--ink-soft);
}
.fiche-nav-recettes{
  display:flex;justify-content:space-between;gap:16px;margin-top:18px;
  font-size:12px;letter-spacing:0.04em;text-transform:uppercase;
}
.fiche-nav-recettes a{color:var(--ink-soft);}
.fiche-nav-recettes a:hover{color:var(--ink);}
.fiche-description{margin-top:32px;font-size:15px;line-height:1.75;color:var(--ink-soft);text-align:justify;}
.fiche-prix{font-family:'Athelas','Fraunces',Georgia,serif;font-size:24px;margin-top:24px;}
.fiche-cta{margin-top:30px;display:inline-block;background:var(--accent);color:var(--white);padding:15px 34px;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;border:1px solid var(--accent);transition:all .2s;}
.fiche-cta:hover{background:transparent;color:var(--accent);}
/* Composeur de coffret ---------------------------------------------- */
/* Les recettes se choisissent à la vignette : c'est un cadeau qu'on
   compose, l'œil compte autant que le nom. La case elle-même est masquée,
   c'est la vignette entière qui se coche — et son état se lit au cadre,
   jamais à la seule couleur. */
.coffret-composeur{margin-top:34px;}
.coffret-titre{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:20px;}
.coffret-consigne{font-size:14px;color:var(--ink-soft);margin-top:8px;}
.coffret-grille{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:14px;margin-top:22px;
}
.coffret-option{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:10px 8px 12px;cursor:pointer;
  border:1px solid var(--line);background:var(--white);
  transition:border-color .2s, box-shadow .2s;
}
.coffret-option input{position:absolute;opacity:0;width:0;height:0;}
.coffret-option img{width:66px;height:66px;object-fit:contain;}
.coffret-option .visuel-cadre{width:66px;height:66px;}
/* Vignettes de 66 pixels du composeur : le coin n'offre que 39 pixels, où
   la phrase ne tient à aucune taille lisible — il faudrait 4 pixels de
   corps. La bande y reste, muette : elle signale la recette salée d'un coup
   d'œil, et la famille inscrite juste dessous la nomme en clair. */
.coffret-option .visuel-cadre{--ruban-hauteur:7px;--ruban-ecart:19%;}
.coffret-option .ruban-salee b,
.coffret-option .ruban-salee i{display:none;}
.coffret-option-nom{font-size:12.5px;line-height:1.35;}
.coffret-option-famille{
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-soft);
}
/* Le tarif du pot, sous sa famille : discret, mais lisible avant le clic. */
.coffret-option-prix{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.04em;
  color:var(--ink);
}
.coffret-option:hover{border-color:var(--line-strong);}
/* Choisie : cadre bordeaux épais et fond teinté. Le focus clavier se voit
   au même endroit, sans quoi la case masquée rendrait la navigation aveugle. */
.coffret-option:has(input:checked){
  border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);
  background:var(--accent-soft);
}
.coffret-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
/* Quota atteint : ce qui reste ne se coche plus, et le dit. */
.coffret-option.coffret-option-bloquee{opacity:0.45;cursor:not-allowed;}
.coffret-compteur{font-size:13px;color:var(--ink-soft);margin:20px 0 14px;}
.coffret-compteur.coffret-compteur-pret{color:var(--accent);}
/* Le conseil de gamme : la même sélection, moins chère ailleurs. Ton posé,
   pas d'alarme — c'est un service rendu, pas une erreur du client. */
.coffret-conseil{
  margin:0 0 16px;padding:12px 14px;background:var(--white);
  border:1px solid var(--line-strong);font-size:13.5px;line-height:1.6;
}
.coffret-conseil a{border-bottom:1px solid var(--accent);color:var(--accent);}
/* Les autres gammes, sous le composeur : une fois la boîte choisie, c'est
   la question suivante — et la seule façon de savoir qu'il en existe
   d'autres sans repasser par la boutique. */
.coffret-autres{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);}
.coffret-autres h3{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:17px;}
.coffret-autres ul{list-style:none;margin-top:12px;}
.coffret-autres li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-bottom:1px dotted var(--line-strong);font-size:14px;
}
.coffret-autres li:last-child{border-bottom:none;}
.coffret-autres a{border-bottom:1px solid transparent;}
.coffret-autres a:hover{border-bottom-color:var(--ink);}
.coffret-autres span{font-size:12.5px;color:var(--ink-soft);text-align:right;}
.coffret-alerte{
  margin-top:30px;padding:14px 16px;background:var(--accent-soft);
  border-left:3px solid var(--accent);font-size:14px;
}

.fiche-formule{margin-top:50px;border-top:1px solid var(--line);padding-top:30px;}
/* Tableau encadré, dans l'esprit de celui d'un emballage : la composition
   qui précède est une liste de lignes pointillées, les deux blocs doivent
   se distinguer au premier regard. */
.fiche-nutrition{margin-top:44px;}
.fiche-nutrition h3{
  font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:18px;
  margin-bottom:16px;
}
.nutri{width:100%;max-width:360px;border-collapse:collapse;border:1px solid var(--ink);background:var(--white);}
.nutri th,.nutri td{padding:7px 12px;text-align:left;font-weight:400;}
.nutri thead th{
  font-family:'Karla',sans-serif;font-size:9.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--ink);
}
.nutri thead th:last-child{text-align:right;}
.nutri tbody th{font-size:12.5px;}
.nutri tbody td{
  text-align:right;font-family:'Space Mono',monospace;font-size:11.5px;white-space:nowrap;
}
.nutri tbody tr + tr{border-top:1px solid var(--line);}
/* Les « dont » se rangent sous la ligne qu'ils détaillent. */
.nutri .nutri-detail th{padding-left:26px;font-size:11.5px;color:var(--ink-soft);}
.nutri .nutri-detail td{color:var(--ink-soft);}
.nutri-second{color:var(--ink-soft);}
.fiche-nutrition-note{margin-top:12px;max-width:360px;font-size:11.5px;color:var(--ink-soft);line-height:1.6;}

.fiche-formule h3{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:18px;margin-bottom:20px;}

.terroir .wrap{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start;}
.terroir blockquote{font-family:'Athelas','Fraunces',Georgia,serif;font-style:italic;font-size:clamp(24px,2.6vw,32px);line-height:1.4;}
.facts{display:flex;gap:0;margin-top:40px;border-top:1px solid var(--line);}
.fact{flex:1;padding:24px 0;border-right:1px solid var(--line);}
.fact:last-child{border-right:none;}
.fact b{display:block;font-family:'Athelas','Fraunces',Georgia,serif;font-size:30px;font-weight:400;}
.fact span{font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);}

.terroir-texte{
  margin-top:26px;max-width:520px;
  color:var(--ink-soft);font-size:15.5px;line-height:1.8;
}
.terroir-texte + .terroir-texte{margin-top:16px;}

.map-card{border:1px solid var(--line);padding:0;}
/* Carte OpenStreetMap assemblée puis stockée localement : pas de requête
   vers un service tiers à chaque visite, donc pas de traceur, et un rendu
   qui ne dépend pas de la disponibilité d'autrui.
   Le fond passe par un pseudo-élément pour que l'atténuation qui l'accorde
   au papier n'atteigne pas les repères posés dessus. */
.map-visual{aspect-ratio:2/1;position:relative;border-bottom:1px solid var(--line);overflow:hidden;}
.map-visual::before{
  content:'';position:absolute;inset:0;
  background:url('/assets/carte-gers.jpg') center/cover no-repeat;
  filter:grayscale(0.5) sepia(0.22) brightness(1.04) contrast(0.94);
}
/* Décalé de sa demi-largeur : sans cela « left » place le bord gauche du
   repère, et le point atterrit à côté de ses coordonnées, d'autant plus
   loin que son étiquette est longue. */
.map-pin{
  position:absolute;display:flex;flex-direction:column;align-items:center;
  gap:6px;z-index:1;transform:translateX(-50%);
}
.map-pin .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(255,255,255,0.85);}
.map-pin.atelier{top:30%;left:23%;}
.map-pin.noisette{top:30%;left:69%;}
.map-pin.noisette .dot{background:var(--ink);}
.map-pin .plabel{font-size:11px;white-space:nowrap;font-family:'Space Mono',monospace;background:rgba(251,250,248,0.92);padding:3px 7px;}
.map-legend{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 24px;font-size:11.5px;color:var(--ink-soft);}
.map-credit{font-size:10.5px;}
.map-credit a{border-bottom:1px solid var(--line-strong);}
.map-legend .item{display:flex;align-items:center;gap:8px;}

/* Le pied de page se confondait avec la page : même fond, un simple filet
   pour l'annoncer. Le beige rosé de la charte le détache sans l'assombrir,
   et sert déjà aux panneaux professionnels et à la carte de contact. */
footer{padding:80px 0 40px;background:var(--accent-soft);}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px;}
.foot-top h5{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px;}
.foot-top a,.foot-top p{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:11px;}
.foot-top a:hover{color:var(--ink);}
.foot-logo{margin-bottom:16px;}
.foot-logo img{height:64px;width:64px;object-fit:contain;display:block;}
.foot-bottom a{border-bottom:1px solid var(--line-strong);}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:30px;border-top:1px solid rgba(82,14,9,0.14);font-size:11.5px;letter-spacing:0.03em;color:var(--ink-soft);}

/* Connexion à gauche, création de compte à droite — l'un sous l'autre dès
   que l'écran se resserre. */
.compte-acces{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:900px;padding-bottom:120px;}
.form-connexion{display:flex;flex-direction:column;gap:20px;}
.form-connexion label{display:flex;flex-direction:column;gap:8px;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);}
.form-connexion input{border:1px solid var(--line-strong);padding:13px 14px;font-family:'Karla',sans-serif;font-size:15px;background:var(--white);color:var(--ink);}
.form-connexion input:focus{outline:none;border-color:var(--ink);}
/* Le mot que le client nous laisse : même trait que les autres champs, mais
   redimensionnable — on ne sait pas d'avance ce qu'il a à dire. */
.form-connexion textarea{
  border:1px solid var(--line-strong);padding:13px 14px;resize:vertical;
  font-family:'Karla',sans-serif;font-size:15px;letter-spacing:0;text-transform:none;
  background:var(--white);color:var(--ink);
}
.form-connexion textarea:focus{outline:none;border-color:var(--ink);}
/* Afficher le mot de passe en clair : un lien sobre aligné à droite, sous
   les champs, plutôt qu'un œil dans le champ — le formulaire en compte
   deux, que ce bouton dévoile ensemble. */
.mdp-bascule{
  align-self:flex-end;margin-top:-8px;padding:4px 0;
  background:none;border:none;cursor:pointer;
  font-family:'Karla',sans-serif;font-size:12px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--line-strong);
}
.mdp-bascule:hover{color:var(--ink);border-bottom-color:var(--ink);}
.mdp-bascule:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* Supprimer son compte : détaché du reste par un filet, sans rouge criard
   — l'action est grave, la page n'a pas à l'être. Seul le bouton, au
   moment de le viser, prend la couleur de l'avertissement. */
.compte-suppression{
  margin-top:70px;padding-top:30px;border-top:1px solid var(--line-strong);
  max-width:560px;
}
.compte-suppression p{color:var(--ink-soft);font-size:14px;line-height:1.7;margin:0 0 14px;}
.compte-suppression-erreur{color:#a3251f!important;}
.compte-suppression .form-connexion{margin-top:22px;gap:16px;}
.compte-suppression-bouton{
  align-self:flex-start;padding:12px 22px;min-height:44px;
  font-family:'Karla',sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;
  background:transparent;color:#a3251f;border:1px solid #a3251f;
}
.compte-suppression-bouton:hover{background:#a3251f;color:var(--white);}
.compte-supprime{
  max-width:560px;margin:0 0 40px;padding:14px 16px;
  background:var(--accent-soft);color:var(--ink);font-size:14px;line-height:1.6;
}

/* Créer un compte ou non, au moment de commander : deux options encadrées,
   détachées des coordonnées qui les précèdent — c'est une décision, pas un
   champ de plus à remplir. */
.compte-choix{
  border:1px solid var(--line-strong);padding:18px 20px;margin:6px 0 4px;
  display:flex;flex-direction:column;gap:12px;
}
.compte-choix legend{
  padding:0 8px;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-soft);
}
.compte-option{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:14px;letter-spacing:normal;text-transform:none;color:var(--ink);
}
.compte-option em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.compte-mdp{display:flex;flex-direction:column;gap:14px;margin:2px 0 6px 26px;}
@media(max-width:860px){
  .compte-mdp{margin-left:0;}
}

.coord-2col{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin:10px 0 10px;}
.coord-2col .form-connexion{gap:20px;}
.coord-titre{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:17px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.coord-2col label{display:flex;flex-direction:column;gap:8px;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px;}
.coord-2col input{width:100%;border:1px solid var(--line-strong);padding:13px 14px;font-family:'Karla',sans-serif;font-size:15px;background:var(--white);color:var(--ink);}
.coord-2col input:focus{outline:none;border-color:var(--ink);}

@media(max-width:860px){
  .coord-2col{grid-template-columns:1fr;gap:30px;}
}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

.compte-titre{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:22px;}

/* Page professionnels : deux offres, la revente et les comités, chacune
   sous son titre. Plus modeste que les titres de section du site, qui
   montent à 52 px et écraseraient une colonne de 760 px.

   Le rythme vertical se règle ici, et pas au fil du HTML : le titre ne
   porte aucune marge basse, c'est le bloc qui suit qui pose son écart,
   selon qu'il s'agit d'un paragraphe ou d'une grille. Les deux sections
   respirent ainsi de la même façon, quelle que soit leur composition.

   Le padding remplace les 120 px que le site donne à toute <section> :
   c'est la respiration d'une page pleine largeur, et dans une colonne de
   760 px il creusait un trou de trois cents pixels entre les deux
   offres. */
.pro-section{padding:40px 0;}
.pro-section + p{margin-top:16px;}
.pro-section .eyebrow{margin-bottom:10px;}
.pro-section h2{font-size:27px;margin-bottom:0;}
.pro-section h2 + p{margin-top:20px;}
.pro-section p + p{margin-top:18px;}
.pro-section .lp-points{margin-top:52px;}
.pro-section .lp-points + p{margin-top:44px;}
.pro-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px;margin-top:40px;}
.pro-etape{border-top:1px solid var(--line);padding-top:20px;}
.pro-num{
  font-family:'Space Mono',monospace;font-size:12px;color:var(--accent);
  display:block;margin-bottom:12px;
}
.pro-etape h3{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:19px;margin-bottom:10px;}
.pro-etape p{font-size:14px;color:var(--ink-soft);line-height:1.7;}

/* Boutiques CSE ---------------------------------------------------- */
/* Le bandeau reprend la mécanique de celui de la prise en main : le
   visiteur navigue dans un contexte particulier, et doit le voir partout. */
.bandeau-cse{
  position:sticky;top:0;z-index:60;
  background:var(--ink);color:#fff;font-size:13.5px;
}
.bandeau-cse .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px;
}
.bandeau-cse b{font-weight:500;}
.bandeau-cse a{
  color:#fff;border:1px solid rgba(255,255,255,0.45);
  padding:5px 14px;font-size:12px;letter-spacing:0.06em;
  text-transform:uppercase;white-space:nowrap;
}
.bandeau-cse a:hover{background:#fff;color:var(--ink);}
/* Deux liens possibles dans le bandeau : ils restent groupés à droite. */
.bandeau-cse-liens{display:flex;gap:10px;flex-wrap:wrap;}

.cse-tete .eyebrow{margin-bottom:10px;}

.cse-faits{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:26px 34px;padding:30px 34px;background:var(--accent-soft);
}
.cse-fait{display:flex;flex-direction:column;gap:5px;}
.cse-fait span{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}
.cse-fait b{font-size:20px;font-weight:500;color:var(--accent);}
.cse-fait b.cse-fait-vide{color:var(--ink-soft);}
.cse-fait em{font-style:normal;font-size:12.5px;color:var(--ink-soft);}

.cse-encart{margin-top:26px;padding:22px 24px;border:1px solid var(--line-strong);}
.cse-encart > span{
  display:block;font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;
}
.cse-encart p{font-size:14.5px;}
.cse-encart b{font-weight:500;}
/* Ce qui doit arrêter l'œil : conditions d'un autre comité, boutique sans
   date de livraison. */
.cse-encart-alerte{border-color:var(--accent);background:var(--accent-soft);}
/* Un cran au-dessus : commander ici sous les conditions d'un autre comité
   envoie le colis ailleurs. Cela ne se signale pas dans les couleurs de la
   maison, où l'œil ne s'arrête plus. */
.cse-encart-danger{
  border:1px solid var(--alerte);border-left-width:4px;
  background:var(--alerte-soft);
}
.cse-encart-danger > span{color:var(--alerte);font-weight:700;}
.cse-encart-danger b{color:var(--alerte);}

.pro-panneau-pied{
  margin-top:22px;padding-top:18px;font-size:13px;color:var(--ink-soft);
  border-top:1px solid rgba(82,14,9,0.14);
}

/* Espace client professionnel ------------------------------------- */
.pro-panneau{background:var(--accent-soft);padding:32px 34px;margin-top:44px;}
.pro-panneau-tete{
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid rgba(82,14,9,0.14);
}
.pro-panneau-tete h3{
  font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;
  font-size:26px;margin-top:8px;
}
.pro-panneau-tete .fiche-cta{margin-top:0;}
.pro-badge{
  display:inline-block;padding:3px 10px;background:var(--accent);color:#fff;
  font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
}
.pro-panneau-faits{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:26px 34px;margin-top:24px;
}
.pro-fait{display:flex;flex-direction:column;gap:5px;}
.pro-fait span{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}
.pro-fait b{font-size:20px;font-weight:500;color:var(--accent);}
.pro-fait b.mono{font-family:'Space Mono',monospace;font-size:15px;}
.pro-fait em{font-style:normal;font-size:12.5px;color:var(--ink-soft);}
.pro-fait em a{border-bottom:1px solid var(--line-strong);}
.pro-fait em a:hover{color:var(--ink);}
.pro-reglement{margin-top:28px;padding-top:24px;border-top:1px solid rgba(82,14,9,0.14);}
.pro-reglement > span{
  display:block;font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-soft);
}
.pro-reglement p{margin-top:8px;font-size:14px;}
.pro-reglement strong{font-weight:500;color:var(--accent);}
/* Libellé étroit + valeur : les blocs restent alignés quelle que soit la
   longueur de l'IBAN, et passent l'un sous l'autre sur mobile. */
.pro-reglement dl{
  display:grid;grid-template-columns:auto 1fr;
  gap:6px 18px;margin-top:14px;align-items:baseline;
}
.pro-reglement dt{
  font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-soft);
}
/* anywhere plutôt que break-all : sur mobile l'IBAN se coupe entre deux
   blocs de 4 et reste recopiable, au lieu de casser au milieu d'un bloc. */
.pro-reglement dd{font-size:15px;color:var(--accent);overflow-wrap:anywhere;}
.pro-reglement em{
  display:block;font-style:normal;
  margin-top:14px;font-size:12.5px;color:var(--ink-soft);
}

/* Historique de commandes ------------------------------------------*/
/* Colonnes figées pour que l'en-tête s'aligne avec toutes les lignes :
   chaque <details> forme sa propre grille, des colonnes auto ne
   tomberaient pas en face les unes des autres. */
.commandes-entete,
.commande summary{
  display:grid;grid-template-columns:110px 1fr 220px 110px;gap:20px;
  align-items:center;
}
.commandes-entete{
  padding:0 4px 10px;border-bottom:1px solid var(--line-strong);
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);
}
.commandes-entete-total{text-align:right;}
.commandes-liste{border-top:1px solid var(--line);}
.commandes-entete + .commandes-liste{border-top:none;}
.commande{border-bottom:1px solid var(--line);}
.commande summary{
  padding:18px 4px;cursor:pointer;font-size:14px;list-style:none;
}
.commande summary::-webkit-details-marker{display:none;}
.commande summary:hover{background:var(--white);}
.commande-date{font-family:'Space Mono',monospace;font-size:13px;color:var(--ink-soft);}
.commande-date em{display:block;font-style:normal;font-size:11.5px;opacity:0.7;margin-top:3px;}
.commande-ref{color:var(--ink-soft);font-size:13px;}
.commande-statut{
  font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--line);padding:4px 10px;
}
.commande-total{font-weight:500;font-variant-numeric:tabular-nums;text-align:right;}
.commande-detail{padding:6px 4px 24px;}
.commande-ligne{
  display:flex;justify-content:space-between;gap:20px;
  padding:8px 0;font-size:14px;color:var(--ink-soft);
}
.commande-remise{color:#1a1a1a;}
.commande-ligne-total{
  border-top:1px solid var(--line);margin-top:8px;padding-top:14px;
  color:var(--ink);font-weight:500;
}
/* Prise en main : bandeau permanent en tête de toutes les pages boutique.
   Il doit rester visible au défilement — le risque, sinon, est de croire
   qu'on agit en son propre nom et de passer commande pour un client. */
.bandeau-prise-en-main{
  position:sticky;top:0;z-index:60;
  background:var(--accent);color:#fff;font-size:13.5px;
}
.bandeau-prise-en-main .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px;
}
.bandeau-prise-en-main b{font-weight:500;}
.bandeau-prise-en-main a{
  color:#fff;border:1px solid rgba(255,255,255,0.45);
  padding:5px 14px;font-size:12px;letter-spacing:0.06em;
  text-transform:uppercase;white-space:nowrap;
}
.bandeau-prise-en-main a:hover{background:#fff;color:var(--accent);}

.commande-reglement{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--ink-soft);
}
.commande-reglement b{font-weight:400;color:var(--accent);}
.commande-reglement a{border-bottom:1px solid var(--line-strong);white-space:nowrap;}
.commande-reglement a:hover{color:var(--ink);}

/* Recette retirée de la vente : le motif prend la place du bouton, dans un
   ton sourd — c'est une information, pas une invitation. */
.produit-retire{
  display:inline-block;padding:12px 18px;background:var(--accent-soft);
  color:var(--accent);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
}
.produit-retire-fiche{margin-top:30px;}

/* Allergènes : la mise en évidence est une obligation, pas un effet de
   style — elle doit rester perceptible même en petit corps. */
.allergene{font-weight:600;color:var(--ink);}

.prix-public{color:var(--ink-soft);font-size:0.78em;margin-right:8px;text-decoration:line-through;}
.prix-mention{
  font-family:'Karla',sans-serif;font-size:10.5px;
  letter-spacing:0.08em;color:var(--ink-soft);margin-left:4px;
}
.tarif-pro{
  margin-top:12px;font-size:13px;color:var(--accent);
  background:var(--accent-soft);display:inline-block;padding:8px 14px;
}
.nav-badge-pro{
  display:inline-block;margin-left:6px;padding:1px 6px;
  background:var(--accent);color:#fff;border-radius:2px;
  font-size:9.5px;letter-spacing:0.06em;vertical-align:middle;
}

/* Retour en haut : discret au repos, il ne se montre qu'une fois la page
   défilée, et jamais sur une page qui tient déjà à l'écran. */
.haut-de-page{
  position:fixed;right:28px;bottom:28px;z-index:90;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border:none;border-radius:50%;
  cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease;
}
.haut-de-page.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.haut-de-page:hover{background:var(--ink);}
.haut-de-page:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
@media(max-width:860px){
  .haut-de-page{right:16px;bottom:16px;}
}

/* ---------- Pages légales ---------- */
.page-legale{max-width:760px;padding:56px 40px 110px;}
/* La règle générale donne 120 pixels de padding vertical à toute section :
   ici, chaque article de la page en héritait et s'espaçait démesurément. */
.page-legale section{padding:0 10px 0;}
.page-legale section + section{margin-top:44px;}
.page-legale h2{font-size:24px;margin-bottom:16px;}
.page-legale h3{
  font-family:'Karla',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);
  margin:24px 0 10px;
}
.page-legale p{color:var(--ink-soft);font-size:15.5px;line-height:1.8;margin-bottom:14px;}
.page-legale ul{margin:0 0 16px 20px;color:var(--ink-soft);font-size:15.5px;line-height:1.9;}
.page-legale a{border-bottom:1px solid var(--line-strong);}
.page-legale a:hover{color:var(--ink);}
.page-legale-adresse{line-height:2;}
.page-legale-table{width:100%;border-collapse:collapse;margin:18px 0 20px;font-size:14px;}
.page-legale-table th{
  text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line-strong);
  font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;
}
.page-legale-table td{
  padding:12px 12px 12px 0;border-bottom:1px solid var(--line);
  color:var(--ink-soft);line-height:1.65;vertical-align:top;
}
/* Mention en attente d'une information : visible, pour ne pas laisser
   croire que la rubrique est complète. */
.page-legale-attente{
  padding:14px 18px;background:var(--accent-soft);
  border-left:2px solid var(--accent);color:var(--ink)!important;
}

@media(max-width:860px){
  .page-legale{padding:36px 24px 80px;}
}

/* ---------- À propos ---------- */
.apropos-exergue{padding:70px 0;background:var(--white);border-bottom:1px solid var(--line);}
.apropos-exergue blockquote{
  font-family:'Athelas','Fraunces',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(24px,3.2vw,38px);line-height:1.4;max-width:900px;
  text-align:center;margin:0 auto;
}
.apropos-corps,.apropos-suite{padding:90px 0;}
.apropos-grille{display:grid;gap:50px;align-items:start;}
.apropos-texte h2{margin-bottom:26px;}
.apropos-texte p{color:var(--ink-soft);font-size:16px;line-height:1.85;margin-bottom:20px;max-width:640px;}
.apropos-citation{
  margin-top:34px;padding-left:22px;border-left:2px solid var(--accent);
  font-family:'Athelas','Fraunces',Georgia,serif;font-style:italic;
  font-size:20px;line-height:1.5;color:var(--ink);
}
.apropos-cote{display:flex;flex-direction:column;gap:26px;}
.apropos-portrait img{
  display:block;width:100%;height:auto;border:1px solid var(--line);
}
.apropos-portrait figcaption{
  margin-top:12px;font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* Encarts latéraux : ce qu'on ne fait pas, et ceux qui revendent. */
.apropos-encart{background:var(--accent-soft);padding:28px 26px;}
.apropos-encart > span{
  display:block;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.apropos-encart p{font-size:14.5px;line-height:1.75;}
.apropos-revendeurs{list-style:none;font-size:14px;line-height:1.6;}
.apropos-revendeurs li{padding:9px 0;border-bottom:1px solid rgba(82,14,9,0.14);}
.apropos-revendeurs li:last-child{border-bottom:none;}
.apropos-revendeurs a{display:block;border-bottom:none;}
.apropos-revendeurs a:hover{color:var(--accent);}

.apropos-geste{padding:90px 0;}
.apropos-geste-texte{margin-top:36px;columns:2;column-gap:60px;}
.apropos-geste-texte p{color:#c8c5be;font-size:15.5px;line-height:1.85;margin-bottom:18px;break-inside:avoid;}
.apropos-fin{display:flex;gap:14px;flex-wrap:wrap;margin-top:50px;}

@media(min-width:861px){
  .apropos-grille{grid-template-columns:1.5fr 0.75fr;gap:70px;}
}
@media(max-width:860px){
  .apropos-geste-texte{columns:1;}
}

/* ---------- Contact ---------- */
.contact-grille{display:grid;gap:56px;padding-bottom:120px;align-items:start;}
.contact-form{max-width:560px;}
/* Le champ multiligne et la liste déroulante reprennent l'habillage des
   autres champs, que seul « input » couvrait jusqu'ici. */
.contact-form textarea,
.contact-form select{
  border:1px solid var(--line-strong);padding:13px 14px;
  font-family:'Karla',sans-serif;font-size:15px;
  background:var(--white);color:var(--ink);width:100%;
}
.contact-form textarea{resize:vertical;min-height:150px;line-height:1.6;}
.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--ink);}
.champ-libre{font-style:normal;text-transform:none;letter-spacing:0;color:var(--line-strong);}

.contact-origine{border:none;padding:26px 0 0;margin-top:6px;border-top:1px solid var(--line);}
.contact-origine legend{
  font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);padding:0;
}
.contact-origine-note{font-size:13px;color:var(--ink-soft);margin-top:8px;}
.contact-choix{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;margin-top:16px;}
.contact-radio{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  font-size:14.5px;color:var(--ink);cursor:pointer;
  text-transform:none;letter-spacing:0;
}
.contact-radio input{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0;}
.contact-precision{margin-top:14px;}

/* Hors écran plutôt que masqué : un champ en display:none est reconnu des
   robots un peu sérieux, qui l'évitent. */
.contact-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.contact-erreurs{
  border-left:2px solid var(--accent);background:var(--accent-soft);
  padding:18px 22px;margin-bottom:30px;
}
.contact-erreurs p{font-size:14.5px;}
.contact-erreurs p + p{margin-top:8px;}

.contact-merci{border:1px solid var(--line-strong);padding:36px 34px;max-width:560px;}
.contact-merci h2{font-size:30px;margin-bottom:14px;}
.contact-merci p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin-bottom:26px;}
.contact-mention{font-size:12.5px;color:var(--ink-soft);line-height:1.7;margin-top:4px;}

/* Blanche et bordée, et non plus beige : le pied de page ayant pris cette
   teinte, la carte s'y fondait dès qu'elle en approchait. */
.contact-carte{background:var(--white);border:1px solid var(--line);padding:32px 30px;}
.contact-carte h2{font-size:24px;}
.contact-carte h3{
  font-family:'Karla',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:28px;margin-bottom:10px;
}
.contact-carte p{font-size:14.5px;line-height:1.8;margin-top:12px;}
.contact-carte a{border-bottom:1px solid var(--line-strong);}
.contact-carte a:hover{border-bottom-color:var(--ink);}

@media(min-width:861px){
  .contact-grille{grid-template-columns:1.35fr 0.65fr;gap:70px;}
}

/* ---------- Page d'atterrissage des réseaux ----------
   Pensée pour le pouce : une colonne, des cibles larges, et l'essentiel
   avant le premier défilement. Les deux colonnes n'arrivent qu'au-delà du
   téléphone, où la place le permet. */
.lp-hero{padding:48px 0 80px;border-bottom:1px solid var(--line);}
.lp-hero .wrap{display:grid;gap:44px;align-items:center;}
.lp-hero h1{
  font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(38px,6.4vw,72px);line-height:1.02;letter-spacing:-0.01em;
}
.lp-hero h1 em{font-style:italic;color:var(--accent);}
.lp-hero-texte p{margin-top:26px;max-width:520px;color:var(--ink-soft);font-size:16.5px;line-height:1.8;}
.lp-hero-photo{
  width:100%;max-width:420px;aspect-ratio:1;object-fit:contain;
  justify-self:center;
}
.lp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;}

.lp-choix{background:var(--white);border-bottom:1px solid var(--line);}
.lp-trio{display:grid;gap:20px;margin-top:44px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.lp-choix-note{margin-top:18px;color:var(--ink-soft);font-size:14.5px;}
.lp-choix-note a{border-bottom:1px solid var(--line-strong);}
/* Les coffrets ouvrent leur propre grille : une seconde file de cartes qui
   reprendrait sans rien dire passerait pour un défaut d'affichage. */
.lp-trio-titre{
  font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:24px;
  margin-top:72px;padding-top:26px;border-top:1px solid var(--line);
}
.lp-trio-titre + .lp-trio{margin-top:26px;}
.lp-pot{
  display:flex;flex-direction:column;
  border:1px solid var(--line);padding:26px 24px 24px;background:var(--paper);
}
.lp-pot img{width:150px;height:150px;object-fit:contain;align-self:center;}
.lp-pot .visuel-cadre{align-self:center;width:150px;height:150px;}
.lp-pot h3{font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:23px;margin-top:18px;}
.lp-pot-accroche{font-size:14px;color:var(--ink-soft);line-height:1.65;margin-top:8px;flex:1;}
.lp-pot-pied{margin-top:22px;}
.lp-pot-prix{
  display:block;font-family:'Athelas','Fraunces',Georgia,serif;font-size:21px;margin-bottom:14px;
}
.lp-pot-prix em{
  display:block;font-style:normal;font-family:'Karla',sans-serif;
  font-size:11.5px;letter-spacing:0.06em;color:var(--ink-soft);margin-top:3px;
}
.lp-pot .btn{width:100%;text-align:center;justify-content:center;}

.lp-preuve-intro{margin-top:26px;max-width:560px;color:var(--ink-soft);font-size:15.5px;line-height:1.8;}
.lp-preuve-liste{margin-top:34px;max-width:620px;}

.lp-reassurance{background:var(--white);border-top:1px solid var(--line);}
.lp-points{display:grid;gap:28px;}
.lp-point b{display:block;font-weight:500;font-size:15px;margin-bottom:7px;}
.lp-point span{font-size:14px;color:var(--ink-soft);line-height:1.7;}
.lp-final{margin-top:52px;}

@media(min-width:861px){
  .lp-hero .wrap{grid-template-columns:1.15fr 0.85fr;gap:64px;}
  .lp-trio{gap:24px;}
  .lp-points{grid-template-columns:repeat(3,1fr);gap:44px;}
}

.toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);
  background:var(--ink);color:var(--white);padding:14px 26px;
  font-size:13px;letter-spacing:0.04em;z-index:100;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
.toast.toast-in{opacity:1;transform:translate(-50%,0);}

.nav-panier{position:relative;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);margin-right:28px;padding-bottom:4px;}
.nav-panier:hover{color:var(--ink-soft);}
.nav-panier-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;margin-left:4px;
  background:var(--ink);color:var(--white);border-radius:50%;
  font-size:10px;font-family:'Karla',sans-serif;letter-spacing:0;vertical-align:middle;
}

.promo-banner{
  background:#f0f0f0;border:1px solid #c4c4c4;color:#3a3a3a;
  padding:16px 22px;font-size:14px;line-height:1.6;margin:24px 0 0;
}

.panier-bonus{
  background:var(--accent-soft);color:var(--accent);
  padding:14px 18px;margin:24px 0 4px;font-size:13.5px;line-height:1.6;
}
.panier-bonus strong{font-weight:600;}
.panier-regime{margin-top:14px;font-size:13.5px;color:var(--ink-soft);}
.panier-regime strong{color:var(--ink);font-weight:500;}
/* Reprend colonne pour colonne la grille de .panier-ligne. */
.panier-entete{
  display:grid;grid-template-columns:64px 1fr 130px 90px 32px;gap:20px;
  align-items:center;margin-top:34px;padding-bottom:10px;
  border-bottom:1px solid var(--line-strong);
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);
}
.panier-entete span:first-child{grid-column:2;}
.panier-entete-total{text-align:right;}
.panier-entete + .panier-liste{border-top:none;margin-top:0;}
.panier-liste{border-top:1px solid var(--line);margin-top:30px;}
.panier-ligne{
  display:grid;grid-template-columns:64px 1fr 130px 90px 32px;
  gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);
}
.panier-ligne-recap{grid-template-columns:64px 1fr 90px;}
/* Les trois recettes d'un coffret, sous son nom : c'est ce qui distingue
   deux lignes qui portent par ailleurs le même intitulé et le même prix. */
.panier-composition{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
.panier-thumb{width:64px;height:64px;object-fit:cover;border:1px solid var(--line);}
.panier-nom{display:flex;flex-direction:column;gap:4px;font-size:15px;}
.panier-nom a{font-family:'Athelas','Fraunces',Georgia,serif;font-size:18px;}
.panier-nom span{color:var(--ink-soft);font-size:13px;}
.panier-qte{display:flex;gap:6px;}
.panier-qte input{width:56px;border:1px solid var(--line-strong);padding:8px;text-align:center;font-family:'Karla',sans-serif;}
.sans-ascenceur{-moz-appearance:textfield;}
.sans-ascenceur::-webkit-outer-spin-button,.sans-ascenceur::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.panier-sous-total{font-family:'Athelas','Fraunces',Georgia,serif;font-size:17px;text-align:right;}
.panier-retirer{background:none;border:none;color:var(--ink-soft);font-size:20px;cursor:pointer;line-height:1;}
.panier-retirer:hover{color:var(--ink);}
.panier-total{display:flex;justify-content:space-between;gap:20px;padding:14px 0;font-size:15px;border-bottom:1px dotted var(--line-strong);}
.panier-transporteur{
  display:block;font-style:normal;font-size:12px;color:var(--ink-soft);margin-top:3px;
}
.panier-franco{font-style:normal;color:#1a1a1a;}
.panier-franco-motif{
  display:block;font-style:normal;font-size:12px;
  color:var(--ink-soft);margin-top:3px;
}
.panier-port-inconnu{font-style:normal;font-size:13px;color:var(--ink-soft);}
.panier-comparateur-transport{
  font-size:12px;color:var(--ink-soft);padding:2px 0 12px;
  border-bottom:1px dotted var(--line-strong);
}
.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;
}
.livraison-choix{
  border:none;padding:10px 0 14px;margin:0;
  display:flex;flex-direction:column;gap:8px;
  border-bottom:1px dotted var(--line-strong);
}
.livraison-option{
  display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;
}
.livraison-option em{font-style:normal;color:var(--ink-soft);font-size:12.5px;}
.point-relais-bloc{
  margin:6px 0 0 24px;padding:14px;background:var(--accent-soft);
  display:flex;flex-direction:column;gap:10px;
}
.point-relais-cp{display:flex;flex-direction:column;gap:4px;font-size:12px;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);max-width:160px;
}
.point-relais-cp input{
  text-transform:none;letter-spacing:normal;font-size:14px;
  padding:9px 10px;border:1px solid var(--line-strong);font-family:'Karla',sans-serif;
}
.point-relais-message{font-size:12.5px;color:var(--ink-soft);}
.point-relais-liste{display:flex;flex-direction:column;gap:8px;}
.point-relais-item{
  display:block;width:100%;text-align:left;padding:10px 12px;
  border:1px solid var(--line-strong);background:var(--white);
  font-family:'Karla',sans-serif;font-size:13px;cursor:pointer;
}
.point-relais-item strong{display:block;font-size:13.5px;}
.point-relais-item[aria-pressed="true"]{border-color:var(--ink);background:var(--accent-soft);}
.panier-cp{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px;}
.panier-cp label{font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);}
.panier-cp input{
  width:110px;border:1px solid var(--line-strong);padding:11px 12px;
  font-family:'Karla',sans-serif;font-size:15px;background:var(--white);color:var(--ink);
}
.panier-cp input:focus{outline:none;border-color:var(--ink);}
.panier-cp-compte{margin-top:20px;font-size:13.5px;color:var(--ink-soft);}
.panier-cp-compte strong{color:var(--ink);font-weight:500;}
.panier-cp-compte a{border-bottom:1px solid var(--line-strong);}
.panier-cp-compte a:hover{color:var(--ink);}
.panier-total-final{font-family:'Athelas','Fraunces',Georgia,serif;font-size:22px;border-bottom:none;padding-top:18px;}
/* Recalcul en cours : demander un tarif à MBE prend près d'une seconde,
   pendant laquelle les montants affichés sont périmés. Ils pulsent, au
   lieu de se donner pour acquis. */
.panier-attente .panier-sous-total,
.panier-attente .panier-total > span:last-child{
  animation:panier-pulse 1s ease-in-out infinite;
}
@keyframes panier-pulse{50%{opacity:.3;}}

/* Choix du mode de livraison, dans le panier : une ligne par mode, le prix
   aligné à droite comme les autres montants pour qu'ils se comparent d'un
   coup d'œil. Le mode retenu s'appuie sur le fond doux plutôt que sur une
   couleur, la palette étant en noir et blanc. */
.panier-modes{border:none;padding:0;margin:4px 0 0;}
.panier-modes fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;}
.panier-modes legend{
  padding:0;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;
}
.panier-mode{
  display:flex;align-items:baseline;gap:12px;cursor:pointer;
  padding:10px 12px;border:1px solid transparent;font-size:14px;
}
.panier-mode:hover{border-color:var(--line);}
.panier-mode.est-retenu{background:var(--accent-soft);border-color:var(--line-strong);}
.panier-mode-nom{flex:1;}
.panier-mode-nom small{display:block;color:var(--ink-soft);font-size:12.5px;margin-top:2px;}
/* « le moins cher » : une mention, pas un badge criard — le prix à côté
   suffit à la démontrer. */
.panier-mode-fanion{
  font-style:normal;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line-strong);padding:1px 6px;margin-left:8px;
}
.panier-mode-prix{font-variant-numeric:tabular-nums;white-space:nowrap;}
.panier-mode-note{font-size:12.5px;color:var(--ink-soft);margin:8px 0 0;}
@media (prefers-reduced-motion:reduce){
  .panier-attente .panier-sous-total,
  .panier-attente .panier-total > span:last-child{animation:none;opacity:.45;}
}

@media(max-width:860px){
  .panier-entete{display:none;}
  .panier-entete + .panier-liste{border-top:1px solid var(--line);margin-top:30px;}
  .panier-ligne{grid-template-columns:56px 1fr;row-gap:10px;}
  .panier-ligne .panier-qte,.panier-ligne .panier-sous-total,.panier-ligne form:last-child{grid-column:2;}
}

@media(max-width:860px){
  .wrap{padding:0 24px;}
  .hero{padding-top:28px;}
  .fiche-produit{padding-top:28px;}
  .lp-hero{padding-top:28px;}
  .page-header{padding:28px 24px 32px;}
  .compte-acces{grid-template-columns:1fr;gap:44px;padding-bottom:80px;}
  .contact-choix{grid-template-columns:1fr;}
  .nav-bascule{display:flex;order:2;}
  nav .wrap{height:76px;}
  .logo img{height:60px;width:60px;}
  /* Sur téléphone le menu se replie derrière le bouton, mais le panier
     reste une action immédiate : on le place juste avant le bouton plutôt
     que de le laisser disparaître avec le reste de la nav. */
  .nav-panier{order:1;margin-right:16px;}

  /* Déplié sous la barre, en pleine largeur : chaque entrée est une ligne
     assez haute pour être touchée sans viser.

     Fond bordeaux : le papier l'aurait fondu dans la page, et l'encre le
     fondait dans la section « Quatre étapes », qui est noire. Le bordeaux
     est la seule des trois couleurs de la charte qui tranche sur les deux.
     L'ombre le pose au-dessus du contenu, ce qui le distingue aussi des
     bandeaux de catégorie, qui sont de la même teinte mais à plat. */
  .nav-menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px 24px 22px;background:var(--accent);
    box-shadow:0 18px 40px rgba(12,12,12,0.28);
  }
  nav.ouvert .nav-menu{display:flex;}
  .nav-menu .nav-links{flex-direction:column;gap:0;}
  .nav-menu .nav-links a,
  .nav-menu .nav-account,
  .nav-menu .nav-pro{
    padding:15px 0;border-bottom:1px solid rgba(255,255,255,0.18);
    font-size:12.5px;letter-spacing:0.12em;color:var(--white);
  }
  .nav-menu .nav-links a::after{display:none;}
  .nav-menu .nav-links a.on{display:flex;align-items:center;gap:12px;}
  .nav-menu .nav-links a.on::before{
    content:'';width:18px;height:1px;background:currentColor;flex-shrink:0;
  }
  /* Menu déplié : personne à survoler ici. Les familles se lisent en
     retrait sous leur entrée, ouvertes en permanence. */
  .nav-menu .nav-groupe{display:flex;flex-direction:column;}
  .nav-menu .nav-sous-menu{
    display:block;position:static;min-width:0;padding:0;
    background:none;border:none;box-shadow:none;
  }
  .nav-menu .nav-links .nav-sous-menu a{
    padding:13px 0 13px 22px;font-size:11.5px;color:rgba(255,255,255,0.82);
  }
  .nav-menu .nav-links .nav-sous-menu a:hover{background:none;}
  /* Déplié sur fond bordeaux, le filet reprend la teinte des séparateurs
     du panneau ; la marge en ferait un trou dans une colonne de lignes. */
  .nav-menu .nav-sous-menu a[data-rayon="coffret"]{
    margin-top:0;padding-top:13px;border-top:1px solid rgba(255,255,255,0.38);
  }
  .nav-menu .nav-account,.nav-menu .nav-pro{
    text-transform:uppercase;color:var(--white);
    margin:0;padding-left:0;border-left:none;
  }
  .nav-menu > :last-child{border-bottom:none;}
  .hero-grille{grid-template-columns:1fr;gap:44px;padding-bottom:70px;}
  .parti-pris-grille{grid-template-columns:1fr;gap:32px;}
  .grille-recettes{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
  .stage-row{grid-template-columns:1fr;gap:10px;}
  .collection-list{grid-template-columns:1fr;column-gap:0;}
  .prod-row-top{grid-template-columns:72px 1fr;row-gap:8px;}
  .prod-row .price{grid-column:2;text-align:left;}
  .prod-detail{padding-left:0;}
  .prod-actions{padding-left:0;gap:10px;}
  .prod-actions .btn{flex:1 1 100%;}
  .fiche-grid{grid-template-columns:1fr;gap:40px;}
  .terroir .wrap{grid-template-columns:1fr;}
  .map-pin .plabel{font-size:10px;padding:2px 5px;}
  .facts{flex-wrap:wrap;}
  .fact{flex:1 1 50%;border-bottom:1px solid var(--line);}
  .foot-top{grid-template-columns:1fr 1fr;}
  .pro-panneau{padding:24px 22px;}
  .cse-faits{padding:24px 22px;}
  .commandes-entete{display:none;}
  .commandes-entete + .commandes-liste{border-top:1px solid var(--line);}
  .commande summary{grid-template-columns:1fr auto;row-gap:8px;}
  .commande-ref{grid-column:1;}
  .commande-statut{justify-self:start;}
  .commande-total{grid-column:2;grid-row:1;}
}

/* Règle du carton de six : un rappel, pas une alerte. */
.panier-carton{margin-top:26px;padding:14px 16px;background:var(--accent-soft);font-size:13.5px;line-height:1.5;color:var(--ink);}

/* « En cuisine », sur une fiche produit : les recettes où ce pot entre.
   Un encadré sobre, en fin de fiche — c'est une invitation, pas un
   argument de vente, et elle vient après la composition qui, elle, engage. */
.fiche-encuisine{
  border-top:1px solid var(--line);margin-top:56px;padding:32px 40px 8px;
}
.fiche-encuisine h2{
  font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:24px;
}
.fiche-encuisine > p{color:var(--ink-soft);font-size:14.5px;margin:8px 0 18px;}
.fiche-encuisine ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px;}
.fiche-encuisine li{display:flex;align-items:baseline;gap:10px;font-size:15.5px;}
.fiche-encuisine a{border-bottom:1px solid var(--line-strong);}
.fiche-encuisine a:hover{border-bottom-color:var(--ink);}
.fiche-encuisine li span{
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-soft);
}
@media (max-width:780px){ .fiche-encuisine{padding:28px 20px 4px;} }

/* Recettes et accords fromages, repris de l'ancien site ---------------- */
/* Les recettes se lisent en colonnes sur grand écran, l'une sous l'autre
   sur téléphone : chacune tient d'un bloc, ingrédients puis préparation. */
.recettes{padding:56px 40px 96px;}
.recettes-gamme + .recettes-gamme{margin-top:64px;}
.recettes-gamme > h2{
  font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(24px,3vw,32px);padding-bottom:14px;margin-bottom:32px;
  border-bottom:1px solid var(--line);
}
.recettes-liste{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.recette{border:1px solid var(--line);padding:26px 28px;background:var(--white);}
.recette-visuel{display:block;width:calc(100% + 56px);height:auto;margin:-26px -28px 22px;aspect-ratio:4/3;object-fit:cover;}
.recette h3{
  font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;font-size:20px;
  line-height:1.3;margin-bottom:18px;
}
.recette h4{
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);
  margin:18px 0 8px;
}
.recette ul,.recette ol{margin:0;padding-left:20px;font-size:14.5px;line-height:1.65;}
.recette li{margin-bottom:6px;}
.recette a{border-bottom:1px solid var(--line-strong);}
.recette a:hover{border-bottom-color:var(--ink);}

/* Un accord par praliné : son visuel d'un côté, ce qu'il appelle de
   l'autre, et l'on alterne pour que la page ne défile pas en colonne. */
.accords{padding:56px 40px 96px;display:flex;flex-direction:column;gap:56px;}
.accord{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:40px;align-items:start;}
.accord:nth-child(even) .accord-visuel{order:2;}
.accord-visuel img{width:100%;height:auto;display:block;}
.accord-corps h2{
  font-family:'Athelas','Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(22px,2.6vw,28px);
}
.accord-accroche{color:var(--ink-soft);font-style:italic;margin:8px 0 20px;}
.accord-corps h3{
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);
  margin:22px 0 8px;
}
.accord-corps ul{margin:0;padding-left:20px;font-size:14.5px;line-height:1.7;}
.accord-corps p{font-size:14.5px;line-height:1.7;}
.accord-pourquoi{color:var(--ink-soft);margin-top:10px;}
@media (max-width:780px){
  .recettes,.accords{padding:40px 20px 72px;}
  .accord{grid-template-columns:1fr;gap:20px;}
  .accord:nth-child(even) .accord-visuel{order:0;}
}