/* Scanteam · feuille de style du site (s'appuie sur tokens.css) */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hauteur-entete) + 1rem); }
/* Barres collantes : le champ qui reçoit le focus doit rester visible au-dessus d'elles (WCAG 2.4.11). */
html:has(body.avec-barre) { scroll-padding-bottom: 116px; }
html.avec-barre-carte { scroll-padding-bottom: 104px; }
html:has(body.page-carte) { scroll-padding-top: calc(var(--hauteur-entete) + 80px); }
@media (min-width: 1040px) { html:has(body.avec-barre) { scroll-padding-bottom: 1rem; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  padding-top: var(--hauteur-entete);
  background: var(--creme);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: var(--fs-base);
  line-height: var(--lh-texte);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.accueil { padding-top: 0; }
img, svg, picture { display: block; max-width: 100%; }
.heros__photo picture, .mosaique picture, .plat__media picture { width: 100%; height: 100%; }
.plat__media--tirage picture { width: auto; height: auto; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: var(--lh-titre); letter-spacing: -0.005em; font-variant-numeric: lining-nums; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
strong, b { font-weight: 650; }
:focus-visible { outline: 3px solid var(--saumon-fonce); outline-offset: 3px; border-radius: 4px; }
.sombre :focus-visible, .entete :focus-visible, .pied :focus-visible, .recap :focus-visible, .barre-bon :focus-visible { outline-color: var(--saumon-clair); }
::selection { background: var(--saumon-clair); color: var(--anthracite-profond); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: var(--s-4); top: -100px; z-index: 200; background: var(--papier); color: var(--encre); padding: var(--s-3) var(--s-4); border-radius: var(--rayon-s); font-weight: 600; text-decoration: none; }
.evitement:focus { top: var(--s-3); }

.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.conteneur--etroit { width: min(100% - 2 * var(--gouttiere), 62rem); margin-inline: auto; }
.conteneur--texte { width: min(100% - 2 * var(--gouttiere), 48rem); margin-inline: auto; position: relative; z-index: 1; }
.section { padding-block: var(--section); position: relative; }
.sombre { background: var(--anthracite); color: var(--sur-sombre); }
.fjord { background: var(--fjord); color: var(--sur-sombre); }
.papier { background: var(--papier); }
.sable { background: var(--creme-2); }

/* Grain discret sur les fonds sombres */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Typographie éditoriale ---------- */
.surtitre {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-texte); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--saumon-fonce);
}
.surtitre::before { content: ""; width: 24px; height: 1px; flex: none; background: var(--saumon); }
.sombre .surtitre, .fjord .surtitre { color: var(--saumon-clair); }
.titre-1 { font-size: var(--fs-h1); line-height: var(--lh-serre); letter-spacing: -0.015em; }
.titre-2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.01em; }
.titre-3 { font-size: var(--fs-h3); font-weight: 600; }
.titre-1 em, .titre-2 em { font-style: italic; color: var(--saumon-fonce); }
.sombre .titre-1 em, .sombre .titre-2 em, .fjord .titre-1 em, .fjord .titre-2 em { color: var(--saumon-clair); }
.chapo { font-size: var(--fs-lg); line-height: 1.6; color: var(--encre-2); max-width: var(--largeur-texte); }
.sombre .chapo, .fjord .chapo { color: var(--sur-sombre-2); }
.texte > * + * { margin-top: var(--s-5); }
.texte p { max-width: var(--largeur-texte); }
.discret { color: var(--encre-3); font-size: var(--fs-sm); }
.sombre .discret, .fjord .discret { color: var(--sur-sombre-2); }
.nowrap { white-space: nowrap; }
.prix-nb { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 52px; padding: 0.8rem 1.6rem; border-radius: var(--rayon-pilule);
  border: 1px solid transparent; font-weight: 650; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none; text-align: center; letter-spacing: 0.005em;
  transition: background-color var(--duree) var(--ease), color var(--duree) var(--ease), border-color var(--duree) var(--ease), transform var(--duree) var(--ease), box-shadow var(--duree) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--plein { background: var(--saumon-fonce); color: #fff8f0; }
.btn--plein:hover { background: var(--saumon-profond); box-shadow: 0 10px 24px rgba(140, 55, 32, 0.25); }
.sombre .btn--plein, .fjord .btn--plein, .recap .btn--plein, .barre-bon .btn--plein { background: var(--saumon); color: var(--anthracite-profond); }
.sombre .btn--plein:hover, .fjord .btn--plein:hover, .recap .btn--plein:hover, .barre-bon .btn--plein:hover { background: var(--saumon-clair); box-shadow: 0 10px 30px rgba(238, 138, 102, 0.25); }
.btn--trait { background: transparent; color: var(--encre); border-color: rgba(31, 35, 38, 0.35); }
.btn--trait:hover { border-color: var(--encre); background: rgba(31, 35, 38, 0.04); }
.sombre .btn--trait, .fjord .btn--trait { color: var(--sur-sombre); border-color: rgba(245, 238, 227, 0.4); }
.sombre .btn--trait:hover, .fjord .btn--trait:hover { border-color: var(--sur-sombre); background: rgba(245, 238, 227, 0.06); }
.btn--large { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.lien-fleche { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 650; text-decoration: none; color: var(--saumon-fonce); min-height: 44px; }
.lien-fleche::after { content: "→"; transition: transform var(--duree) var(--ease); }
.lien-fleche:hover::after { transform: translateX(4px); }
.sombre .lien-fleche, .fjord .lien-fleche { color: var(--saumon-clair); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--hauteur-entete);
  background: rgba(26, 28, 30, 0.94); color: var(--sur-sombre);
  -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(245, 238, 227, 0.08);
  transition: background-color 400ms var(--ease), border-color 400ms var(--ease);
}
.entete--transparente { background: rgba(15, 34, 52, 0); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.entete__barre { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.marque { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; text-decoration: none; flex: none; }
.marque__rubans { width: 40px; height: auto; }
.marque__mot { width: 112px; height: auto; }
.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav__lien {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); white-space: nowrap;
  text-decoration: none; font-weight: 600; font-size: var(--fs-sm); color: var(--sur-sombre-2); border-radius: var(--rayon-pilule);
  transition: color var(--duree) var(--ease);
}
.nav__lien:hover, .nav__lien[aria-current="page"] { color: var(--sur-sombre); }
.nav__lien[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--saumon); text-underline-offset: 0.45em; text-decoration-thickness: 2px; }
.nav__bon {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 0.6rem 0 1.1rem; margin-left: var(--s-2);
  border-radius: var(--rayon-pilule); background: var(--saumon); color: var(--anthracite-profond);
  font-weight: 700; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
  transition: background-color var(--duree) var(--ease);
}
.nav__bon:hover { background: var(--saumon-clair); }
.nav__bon[aria-current="page"] { background: var(--sur-sombre); }
.compteur {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: var(--rayon-pilule);
  background: var(--anthracite-profond); color: var(--sur-sombre); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.compteur--vide { display: none; }
.nav__bon:has(.compteur--vide) { padding-right: 1.1rem; }
.compteur.pulse { animation: pulse 520ms var(--ease-doux); }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.court { display: none; }
@media (max-width: 719px) {
  .nav__lien--maison { display: none; }
  .long { display: none; }
  .court { display: inline; }
  .marque__rubans { width: 34px; }
  .marque__mot { width: 84px; }
  .marque { gap: 0.45rem; }
  .nav__lien { padding: 0 var(--s-2); }
  .nav__bon { padding: 0 0.45rem 0 0.9rem; margin-left: var(--s-1); }
}
@media (max-width: 519px) { .nav__lien--recettes { display: none; } }
@media (max-width: 359px) { .marque__mot { display: none; } }
/* 27/10 : 360 à 379 px (Android courants) : la pastille « Mon bon » touchait le bord, « TTC » passait sous le sélecteur */
@media (min-width: 360px) and (max-width: 379px) { .marque__mot { width: 70px; } }
@media (max-width: 379px) { .ligne__prix { white-space: normal; } .ligne__prix::after { display: block; } }

/* ---------- Fils (rubans du logo) ---------- */
.fils { position: absolute; pointer-events: none; overflow: visible; }
.fils path { fill: none; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fils .r { stroke: var(--ruban-rouge); }
.fils .j { stroke: var(--ruban-jaune); }
.fils .c { stroke: var(--ruban-cyan); }
.js .fils--trace path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-doux); }
.js .fils--trace path.j { transition-delay: 180ms; }
.js .fils--trace path.c { transition-delay: 360ms; }
.js .fils--trace.vu path { stroke-dashoffset: 0; }
.filet-tricolore { height: 2px; width: 100%; background: linear-gradient(90deg, var(--ruban-rouge) 0 33.3%, var(--ruban-jaune) 0 66.6%, var(--ruban-cyan) 0); opacity: 0.9; }

/* Lignes de fjord (motif de fond) */
.lignes { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--sur-sombre); opacity: 0.07; pointer-events: none; z-index: 0; }
.lignes path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---------- Apparitions ---------- */
.js [data-apparition] { opacity: 0; transform: translateY(18px); transition: opacity var(--duree-lente) var(--ease-doux), transform var(--duree-lente) var(--ease-doux); }
.js [data-apparition].vu { opacity: 1; transform: none; }
.js [data-apparition="2"] { transition-delay: 120ms; }
.js [data-apparition="3"] { transition-delay: 240ms; }
.js [data-apparition="4"] { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js [data-apparition] { opacity: 1; transform: none; }
  .js .fils--trace path { stroke-dashoffset: 0; }
}

/* ---------- Héros (accueil) ---------- */
.heros {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(33, 72, 107, 0.85) 0%, rgba(21, 48, 74, 0.55) 34%, rgba(15, 34, 52, 0) 70%),
    linear-gradient(180deg, var(--fjord) 0%, #12283d 55%, var(--anthracite-profond) 100%);
  color: var(--sur-sombre);
  padding-top: calc(var(--hauteur-entete) + var(--s-8));
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem);
}
.heros__grille { position: relative; z-index: 1; display: grid; gap: var(--s-8); }
.heros__texte { position: relative; z-index: 2; }
.heros__titre { margin-top: var(--s-5); }
.heros__titre em { font-style: italic; color: var(--saumon-clair); }
.heros .chapo { margin-top: var(--s-6); max-width: 33rem; }
.heros .actions { margin-top: var(--s-8); }
.reperes-heros { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-8); list-style: none; font-size: var(--fs-sm); color: var(--sur-sombre-2); }
.reperes-heros li { display: block; }
.reperes-heros li::before { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: -2px var(--s-2) 0 0; border-radius: 50%; background: var(--saumon); }
.heros__visuel { position: relative; }
.heros__cadre { position: relative; }
.heros__cadre::before {
  content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid rgba(245, 238, 227, 0.28); z-index: -1;
}
.heros__photo { position: relative; overflow: hidden; background: #2a2622; box-shadow: var(--ombre-forte); }
.heros__photo img { width: 100%; height: 100%; object-fit: cover; }
.heros__legende { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; padding: 0.2rem 0.6rem; border-radius: var(--rayon-pilule); background: rgba(15, 34, 52, 0.62); font-size: 0.9375rem; font-style: italic; color: var(--sur-sombre); line-height: 1.4; }
.heros .fils { left: 0; bottom: 0; width: 100%; height: 38%; z-index: 0; opacity: 0.9; }
/* Sur ordinateur, les rubans s'arrêtent avant la photo (ils ne repassent plus dessous). */
@media (min-width: 900px) {
  /* Une ligne d'horizon calme au pied du héros, sous la photo et sous les repères : jamais étirée (slice), extrémités fondues. */
  .heros .fils { height: 120px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
}

@media (max-width: 899px) {
  .heros { padding-top: var(--hauteur-entete); }
  .heros__grille { gap: 0; }
  /* Photo pleine largeur, d'un bord à l'autre ; le titre vient se poser sur son fondu. */
  .heros__visuel { order: -1; width: auto; margin-inline: calc(-1 * var(--gouttiere)); }
  .heros__cadre::before { display: none; }
  .heros__photo { aspect-ratio: auto; width: 100%; height: min(50svh, 125vw); box-shadow: none; }
  /* Le titre chevauche le bas de la photo : long fondu vers le bleu fjord, sans jointure visible. */
  .heros__photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(180deg, rgba(18, 40, 61, 0) 0%, rgba(18, 40, 61, 0.35) 30%, rgba(18, 40, 61, 0.86) 68%, #12283d 100%); pointer-events: none; }
  .heros__texte { margin-top: -4rem; display: flex; flex-direction: column; }
  .heros__titre { margin-top: 0; text-shadow: 0 2px 18px rgba(10, 18, 28, 0.55); }
  .heros__texte .surtitre { display: none; }
  /* Date limite et port offert juste sous le titre, visibles dans le premier écran. */
  .heros .reperes-heros { order: 1; margin-top: var(--s-3); gap: 0 var(--s-4); font-size: 0.9375rem; }
  .heros .actions { order: 2; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
  .heros .chapo { order: 3; margin-top: var(--s-6); }
  .heros .actions .btn { width: 100%; justify-content: center; }
  .heros .fils { display: none; }
}
@media (min-width: 900px) {
  .heros { min-height: min(100svh, 1000px); display: flex; align-items: center; }
  .heros > .conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); }
  .heros__grille { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; gap: clamp(2.5rem, 5vw, 6rem); }
  .heros__photo { aspect-ratio: 2 / 3; max-height: calc(100svh - var(--hauteur-entete) - 7rem); margin-left: auto; }
  .heros__cadre { width: min(100%, 520px); margin-left: auto; }
}

/* ---------- La maison (40 ans) ---------- */
.maison__grille { display: grid; gap: var(--s-10); align-items: center; }
.quarante { position: relative; display: flex; align-items: flex-end; gap: var(--s-4); line-height: 0.8; }
.quarante__nombre { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-geant); letter-spacing: -0.04em; color: var(--saumon-fonce); font-variant-numeric: lining-nums; }
.quarante__mot { font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); color: var(--encre); padding-bottom: 0.25em; line-height: 1.1; }
.quarante__mot small { display: block; font-family: var(--font-texte); font-style: normal; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--encre-2); margin-top: var(--s-2); }
.quarante .fils { left: -4%; bottom: -34%; width: 108%; height: 46%; }
.maison .titre-2 { margin-top: var(--s-4); }
.maison .texte { margin-top: var(--s-6); }
.lieux { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-8); padding-top: var(--s-5); border-top: var(--filet); list-style: none; font-size: var(--fs-sm); color: var(--encre-2); }
.lieux strong { color: var(--encre); font-weight: 650; }
@media (min-width: 900px) {
  .maison__grille { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 7rem); }
}

/* ---------- Avant-goût (vitrine) ---------- */
.entete-section { display: grid; gap: var(--s-4); margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.entete-section .titre-2 { max-width: 24ch; }
@media (min-width: 900px) {
  .entete-section--ligne { grid-template-columns: 1fr auto; align-items: end; }
}
.vitrine__grille { display: grid; gap: var(--s-5); }
.plat {
  position: relative; display: flex; flex-direction: column; background: var(--papier); border: var(--filet); border-radius: var(--rayon);
  overflow: hidden; transition: transform 400ms var(--ease-doux), box-shadow 400ms var(--ease-doux);
}
.plat:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.plat__media { position: relative; background: #fff; aspect-ratio: 16 / 10; overflow: hidden; }
.plat__media img { width: 100%; height: 100%; object-fit: cover; }
/* Photo de la vedette : jamais agrandie au-delà de sa source, fondue dans le papier (fond retouché). */
.plat__media--multiplie { background: var(--papier); }
.plat__media--multiplie img { mix-blend-mode: multiply; object-fit: contain; }
.plat--vedette .plat__media { aspect-ratio: auto; width: 100%; max-width: 520px; margin-inline: auto; padding: var(--s-5) var(--s-5) var(--s-8); }
.plat--vedette .plat__media img { height: auto; object-fit: contain; }
.plat__legende { position: absolute; left: var(--s-5); bottom: var(--s-3); font-size: 0.9375rem; color: var(--encre-3); font-style: italic; }
.plat__corps { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6); flex: 1; }
/* Une seule échelle pour toutes les cartes. */
.plat__code { font-family: var(--font-display); font-weight: 600; font-size: 4.4rem; line-height: 0.9; color: var(--saumon-fonce); letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.plat__code sup { font-size: 0.42em; vertical-align: super; color: var(--encre-2); }
.plat--typo .plat__code sup { color: var(--saumon-clair); }
.plat__nom { font-family: var(--font-display); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.9rem); font-weight: 600; line-height: 1.15; }
.plat__cond { font-size: var(--fs-sm); color: var(--encre-2); }
.plat__desc { color: var(--encre-2); margin-top: var(--s-2); }
.plat--typo .plat__desc { color: var(--sur-sombre-2); }
.plat__pied { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-top: auto; padding-top: var(--s-5); flex-wrap: wrap; }
.plat--typo { background: var(--anthracite); color: var(--sur-sombre); border-color: transparent; }
.plat--typo .plat__code { color: var(--saumon-clair); }
.plat--typo .plat__cond { color: var(--sur-sombre-2); }
.plat--typo .prix__kilo, .plat--typo .prix__ttc { color: var(--sur-sombre-2); }
.plat--fjord { background: var(--fjord-2); }
@media (min-width: 720px) {
  .vitrine__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plat--vedette { grid-column: 1 / -1; }
}
/* La vedette passe sur deux colonnes (photo | texte) dès 900 px. */
@media (min-width: 900px) {
  .plat--vedette { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
  .plat--vedette .plat__media { padding: var(--s-6) var(--s-4) var(--s-10) var(--s-6); }
}
@media (min-width: 1040px) {
  .vitrine__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .plat--vedette { grid-column: span 8; }
  .plat--a { grid-column: span 4; }
  .plat--tiers { grid-column: span 4; }
}

/* Prix */
.prix { display: flex; align-items: baseline; gap: 0.4rem; }
.prix__montant { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.prix__ttc { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--encre-2); }
.prix__kilo { font-size: var(--fs-sm); color: var(--encre-2); margin-top: 0.15rem; font-variant-numeric: lining-nums; }

/* Ajouter au bon / quantité */
.ajout { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; min-height: 48px; }
.btn--ajout { min-height: 48px; padding: 0.6rem 1.2rem; font-size: 1rem; background: var(--anthracite); color: var(--sur-sombre); border-color: var(--anthracite); }
.btn--ajout:hover { background: var(--saumon-fonce); border-color: var(--saumon-fonce); color: #fff8f0; }
.btn--ajout::before { content: "+"; font-size: 1.2em; line-height: 1; font-weight: 500; }
/* Un seul style de bouton : anthracite sur fond clair, contour crème sur fond sombre. */
.plat--typo .btn--ajout, .sombre .btn--ajout { background: transparent; color: var(--sur-sombre); border-color: rgba(245, 238, 227, 0.6); }
.plat--typo .btn--ajout:hover, .sombre .btn--ajout:hover { background: rgba(245, 238, 227, 0.1); border-color: var(--sur-sombre); color: var(--sur-sombre); }
.pas { display: inline-flex; align-items: center; border: 1px solid var(--anthracite); border-radius: var(--rayon-pilule); height: 48px; background: var(--papier); color: var(--encre); }
.pas__btn { width: 46px; height: 46px; border: 0; background: transparent; border-radius: var(--rayon-pilule); font-size: 1.35rem; line-height: 1; display: grid; place-items: center; color: var(--encre); }
.pas__btn:hover { background: var(--creme-2); }
.pas__val { min-width: 2.2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ajout__note { font-size: var(--fs-sm); font-weight: 600; color: var(--succes); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.ajout__note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--succes); }
.plat--typo .pas { border-color: rgba(245, 238, 227, 0.6); background: transparent; color: var(--sur-sombre); }
.plat--typo .pas__btn { color: var(--sur-sombre); }
.plat--typo .pas__btn:hover { background: rgba(245, 238, 227, 0.1); }
.plat--typo .ajout__note { color: var(--saumon-clair); }
.plat--typo .ajout__note::before { background: var(--saumon-clair); }

/* ---------- L'esprit scandinave ---------- */
.esprit { overflow: hidden; }
.esprit__grille { position: relative; z-index: 1; display: grid; gap: var(--s-12); align-items: center; }
.esprit .texte { margin-top: var(--s-6); }
.esprit .texte p { color: var(--sur-sombre-2); }
.mosaique { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(70px, 9vw, 120px); gap: var(--s-3); }
.mosaique figure { margin: 0; position: relative; overflow: hidden; background: var(--fjord-3); border-radius: 2px; }
.mosaique img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.02); mix-blend-mode: luminosity; opacity: 0.92; transform: scale(1.02); transition: transform 1.6s var(--ease-doux), filter 900ms var(--ease), mix-blend-mode 900ms; }
.mosaique figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 34, 52, 0) 50%, rgba(15, 34, 52, 0.55) 100%); }
.mosaique figure:hover img { transform: scale(1.06); }
.mosaique__a { grid-column: 1 / 5; grid-row: 1 / 4; }
.mosaique__b { grid-column: 5 / 7; grid-row: 1 / 3; }
.mosaique__c { grid-column: 5 / 7; grid-row: 3 / 6; }
.mosaique__d { grid-column: 1 / 3; grid-row: 4 / 6; }
.mosaique__e { grid-column: 3 / 5; grid-row: 4 / 6; }
.mosaique__legende { grid-column: 1 / -1; font-family: var(--font-display); font-style: italic; font-size: 1.125rem; color: var(--sur-sombre-3); margin-top: var(--s-2); }
.origines { display: grid; gap: var(--s-3); margin-top: var(--s-8); list-style: none; }
.origines li { display: flex; align-items: baseline; gap: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid rgba(245, 238, 227, 0.14); }
.origines span { font-family: var(--font-display); font-size: 1.5rem; color: var(--sur-sombre); min-width: 7.5rem; }
.origines small { font-size: var(--fs-sm); color: var(--sur-sombre-2); }
@media (min-width: 960px) {
  .esprit__grille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(3rem, 6vw, 6rem); }
}

/* ---------- Étapes (comment commander) ---------- */
.etapes__liste { position: relative; display: grid; gap: var(--s-10); list-style: none; counter-reset: etape; }
.etape-cmd { position: relative; padding-top: var(--s-8); }
.etape-cmd .etape-cmd__num { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 4.6rem; line-height: 0.8; color: var(--saumon-fonce); font-variant-numeric: lining-nums; }
.etape-cmd h3 { margin-top: var(--s-4); }
.etape-cmd p { margin-top: var(--s-3); color: var(--encre-2); max-width: 30rem; }
.etape-cmd::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--lin); }
.etape-cmd::after { content: ""; position: absolute; top: -1px; left: 0; width: 46px; height: 3px; background: var(--saumon); border-radius: 3px; }
.etapes__appel { margin-top: var(--s-12); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .etapes__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
}

/* ---------- Calendrier des fêtes ---------- */
.calendrier__grille { position: relative; z-index: 1; display: grid; gap: var(--s-12); }
.limite { margin-top: var(--s-8); display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); border: 1px solid rgba(245, 238, 227, 0.2); border-radius: var(--rayon); background: rgba(245, 238, 227, 0.04); }
.limite__icone { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--saumon); color: var(--anthracite-profond); }
.limite__icone svg { width: 22px; height: 22px; }
.limite p { color: var(--sur-sombre-2); font-size: var(--fs-sm); }
.limite strong { display: block; color: var(--sur-sombre); font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1.15; font-variant-numeric: lining-nums; }
.jours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); list-style: none; }
.jour { text-align: center; padding: var(--s-5) var(--s-2) var(--s-4); border-radius: var(--rayon); background: var(--papier); color: var(--encre); position: relative; overflow: hidden; }
.jour::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--saumon); }
.jour__nom { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-2); }
.jour__num { display: block; font-family: var(--font-display); font-size: clamp(3rem, 2.4rem + 2.4vw, 4.4rem); font-weight: 600; line-height: 1; margin-top: var(--s-2); font-variant-numeric: lining-nums; }
.jour__mois { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--encre-2); }
.notes { display: grid; gap: var(--s-3); margin-top: var(--s-6); list-style: none; color: var(--sur-sombre-2); font-size: var(--fs-sm); }
.notes li { display: flex; gap: var(--s-3); }
.notes li::before { content: ""; flex: none; width: 14px; height: 1px; margin-top: 0.8em; background: var(--saumon); }
.notes strong { color: var(--sur-sombre); }
.ticket { position: relative; background: var(--papier); color: var(--encre); border-radius: var(--rayon-l); padding: var(--s-8) var(--s-6); box-shadow: var(--ombre-forte); }
.ticket::before { content: ""; position: absolute; left: var(--s-6); right: var(--s-6); top: 0; height: 3px; background: var(--saumon); border-radius: 0 0 3px 3px; }
.ticket .surtitre { color: var(--saumon-fonce); }
.ticket h3 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem); margin-top: var(--s-3); line-height: 1.05; }
.ticket address { font-style: normal; margin-top: var(--s-5); font-size: var(--fs-lg); line-height: 1.5; }
.ticket dl { margin: var(--s-6) 0 0; display: grid; gap: var(--s-4); }
.ticket dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-2); }
.ticket dd { margin: var(--s-1) 0 0; }
.ticket .actions { margin-top: var(--s-6); }
.ticket .lien-fleche { color: var(--saumon-fonce); }
@media (min-width: 960px) {
  .calendrier__grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: clamp(3rem, 6vw, 6rem); }
  .ticket { padding: var(--s-10) var(--s-8); }
}

/* ---------- Appel final ---------- */
.appel { position: relative; overflow: hidden; text-align: center; background: radial-gradient(90% 120% at 50% 0%, var(--fjord-3) 0%, var(--fjord-2) 35%, var(--fjord) 75%); color: var(--sur-sombre); }
.appel__corps { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-6); }
.appel .titre-2 { max-width: 22ch; }
.appel .chapo { margin-inline: auto; }
.appel .actions { justify-content: center; }
.appel .fils { left: 0; width: 100%; bottom: -6%; height: 34%; opacity: 0.75; }
.appel__contact { font-size: var(--fs-sm); color: var(--sur-sombre-2); }
.appel__contact a { color: var(--sur-sombre); font-weight: 600; }

/* ---------- Pied de page ---------- */
.pied { background: var(--anthracite-profond); color: var(--sur-sombre-2); padding-block: var(--s-16) var(--s-8); font-size: var(--fs-sm); }
.pied__grille { display: grid; gap: var(--s-10); }
.pied__logo { width: 168px; }
.pied__signature { margin-top: var(--s-4); max-width: 22rem; }
.pied h2 { font-family: var(--font-texte); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sur-sombre); margin-bottom: var(--s-4); }
.pied address { font-style: normal; line-height: 1.7; }
.pied a { color: var(--sur-sombre); text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__liens { list-style: none; display: grid; gap: 0; }
.pied__liens a { display: inline-flex; align-items: center; min-height: 44px; }
.pied__bas { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid rgba(245, 238, 227, 0.1); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); justify-content: space-between; font-size: var(--fs-xs); color: var(--sur-sombre-3); }
.pied__credit { flex-basis: 100%; }
@media (min-width: 720px) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- Tête de page (pages internes) ---------- */
.tete-page { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--anthracite) 0%, #1f2a33 100%); color: var(--sur-sombre); padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.tete-page .conteneur, .tete-page .conteneur--etroit { position: relative; z-index: 1; }
.tete-page .titre-1 { margin-top: var(--s-4); }
.tete-page .chapo { margin-top: var(--s-5); }
.tete-page .fils { right: 0; top: 12%; width: 30%; height: 70%; opacity: 0.8; }
@media (max-width: 899px) { .tete-page .fils { display: none; } }
/* Bon de commande : la tâche commence vite, la tête de page reste courte. */
.page-bon .tete-page { padding-block: var(--s-6); }
.page-bon .tete-page .titre-1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); margin-top: var(--s-2); }
.page-bon .tete-page .chapo { margin-top: var(--s-3); }
.page-bon .statut { margin-top: var(--s-4); }
@media (max-width: 719px) { .page-bon .tete-page .chapo { display: none; } }
.legende-carte { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--sur-sombre-2); list-style: none; }
.legende-carte strong { color: var(--saumon-clair); font-family: var(--font-display); font-size: 1.3rem; line-height: 0; }

/* ---------- La carte (catalogue) ---------- */
.sommaire { position: sticky; top: var(--hauteur-entete); z-index: 20; background: rgba(245, 238, 227, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: var(--filet); }
.sommaire__liste { display: flex; gap: var(--s-2); list-style: none; overflow-x: auto; padding-block: var(--s-3); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sommaire__liste::-webkit-scrollbar { display: none; }
.sommaire a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--rayon-pilule); border: 1px solid var(--lin); background: var(--papier); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; color: var(--encre-2); transition: all var(--duree) var(--ease); }
.sommaire a:hover, .sommaire a.actif { border-color: var(--anthracite); color: var(--encre); }
.sommaire a.actif { background: var(--anthracite); color: var(--sur-sombre); }
@media (min-width: 900px) { .sommaire__liste { flex-wrap: wrap; overflow: visible; } }
.famille { padding-block: clamp(3rem, 2rem + 4vw, 6rem); border-bottom: var(--filet); scroll-margin-top: calc(var(--hauteur-entete) + 70px); }
.famille:last-of-type { border-bottom: 0; }
.famille__tete { display: grid; gap: var(--s-6); margin-bottom: var(--s-8); align-items: end; }
.famille__num { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--saumon-fonce); }
.famille__tete .titre-2 { margin-top: var(--s-1); font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem); }
.famille__tete .chapo { margin-top: var(--s-3); font-size: var(--fs-base); }
/* La liste garde une mesure de lecture, alignée à gauche sur le logo ; deux colonnes à partir de 1100 px. */
.carte__corps { max-width: 992px; }
.famille__infos { margin-top: var(--s-6); }
.famille__infos dl { background: var(--papier); }
.designations { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.designations li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: baseline; }
.designations b { color: var(--saumon-fonce); font-family: var(--font-display); font-size: 1.15rem; }

/* Une référence : la photo du produit tel que livré, sur un passe-partout papier (comme à l'accueil, où il est crème sur la nuit),
   puis le code du bon, le nom, le conditionnement, la courte description et le prix. La photo vient après le titre dans le code
   (navigation par titres) et se place à gauche par les zones de la grille. Largeur de la photo : --photo, moins 2 x 6 px de
   passe-partout = SIZES_PRODUIT de outils/construire.py (100 px, puis 164 px dès 720 px). */
.mets-liste { list-style: none; border-top: 1px solid var(--encre); }
.mets {
  --photo: 7rem;
  display: grid; grid-template-columns: var(--photo) minmax(0, 1fr); column-gap: var(--s-4);
  grid-template-areas: "photo code" "photo corps" "texte texte" "infos infos" "achat achat";
  grid-template-rows: auto 1fr; align-items: start;
  padding-block: var(--s-6); border-bottom: var(--filet); position: relative;
}
.mets:not(.mets--photo) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "code" "corps" "texte" "infos" "achat"; }
.mets:target { background: linear-gradient(90deg, var(--saumon-voile), transparent 70%); }
.mets__code { grid-area: code; margin-bottom: var(--s-2); font-family: var(--font-display); font-weight: 600; font-size: 2.3rem; line-height: 0.85; color: var(--saumon-fonce); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.mets__code sup { font-size: 0.42em; color: var(--encre-2); margin-left: 1px; }
.mets__corps { grid-area: corps; min-width: 0; }
.mets__nom { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem); line-height: 1.15; }
.mets__cond { font-size: var(--fs-sm); color: var(--encre-2); font-weight: 600; letter-spacing: 0.01em; margin-top: var(--s-1); }
/* La photo : un tirage posé sur la carte, coins arrondis, ombre courte ; le fond bleu clair des prises de vue reste dans son cadre. */
.mets__photo { grid-area: photo; margin: 0; min-width: 0; }
.mets__cadre {
  aspect-ratio: 1; padding: 6px; border-radius: var(--rayon); background: var(--papier);
  box-shadow: 0 0 0 1px var(--lin), 0 1px 2px rgba(31, 35, 38, 0.05), 0 10px 20px -14px rgba(31, 35, 38, 0.38);
}
.mets__cadre picture { width: 100%; height: 100%; overflow: hidden; border-radius: 7px; background: var(--creme-2); }
.mets__cadre img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) brightness(0.98); transition: transform 1.2s var(--ease-doux); }
@media (hover: hover) { .mets:hover .mets__cadre img { transform: scale(1.05); } }
.mets__legende { margin-top: var(--s-2); font-size: 0.9375rem; line-height: 1.35; font-style: italic; text-align: center; text-wrap: balance; color: var(--encre-3); }
/* La description : une phrase de carte de restaurant, en italique, sous le nom. */
.mets__texte { grid-area: texte; margin-top: var(--s-4); max-width: 34rem; }
.mets__conseil { font-family: var(--font-display); font-style: italic; font-size: 1.1875rem; line-height: 1.45; color: var(--encre-2); }
.mets__decongele { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--saumon-fonce); font-weight: 600; }
.mets__achat { grid-area: achat; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); }
.mets > .mets__infos { grid-area: infos; }
.mets__infos { margin-top: var(--s-2); min-width: 0; }
.mets__infos summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; cursor: pointer; font-size: var(--fs-sm); font-weight: 650; color: var(--encre-2); list-style: none; }
.mets__infos summary::-webkit-details-marker { display: none; }
.mets__infos summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: 0.95rem; line-height: 1; transition: transform var(--duree) var(--ease); }
.mets__infos[open] summary::before { content: "−"; }
/* Mobile : une seule colonne (libellé au-dessus de la valeur), rien ne déborde même à 320 px ou en zoom 120 %. */
.mets__infos dl { margin: var(--s-2) 0 var(--s-2); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; font-size: var(--fs-sm); padding: var(--s-4) var(--s-5); background: var(--papier); border-radius: var(--rayon-s); border: var(--filet); }
.mets__infos dt { font-weight: 650; color: var(--encre); margin-top: var(--s-3); }
.mets__infos dt:first-child { margin-top: 0; }
.mets__infos dd { margin: 0; color: var(--encre-2); overflow-wrap: anywhere; min-width: 0; }
.mets__infos .attente { font-style: italic; color: var(--encre-3); }
/* Tablette et ordinateur : la photo garde toute la hauteur de la fiche, le texte et le prix s'alignent à sa droite. */
@media (min-width: 720px) {
  .mets { --photo: 11rem; column-gap: var(--s-6); padding-block: var(--s-8); grid-template-areas: "photo code" "photo corps" "photo texte" "photo infos" "photo achat"; grid-template-rows: auto auto auto auto 1fr; }
  .mets:not(.mets--photo) { grid-template-areas: "code" "corps" "texte" "infos" "achat"; }
  .mets__code { font-size: 2.9rem; }
  .mets__texte { margin-top: var(--s-3); }
  .mets__achat { align-self: end; }
  .mets__infos dl { grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-5); }
  .mets__infos dt { margin-top: 0; }
}
/* Grand écran : la carte se lit comme celle d'un restaurant, sur deux colonnes. */
@media (min-width: 1100px) {
  .carte__corps { max-width: none; }
  .mets-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-12); }
}

.barre-carte { position: fixed; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5); border-radius: var(--rayon-pilule); background: var(--anthracite-profond); color: var(--sur-sombre); box-shadow: var(--ombre-forte); transform: translateY(140%); visibility: hidden; transition: transform 500ms var(--ease-doux), visibility 0s linear 500ms; }
.barre-carte.visible { transform: none; visibility: visible; transition: transform 500ms var(--ease-doux), visibility 0s; }
.barre-carte__texte { font-size: var(--fs-sm); line-height: 1.3; text-wrap: balance; }
.barre-carte__texte strong { display: block; font-size: 1.05rem; }
.barre-carte .btn { min-height: 48px; padding: 0.5rem 1.2rem; background: var(--saumon); color: var(--anthracite-profond); font-size: var(--fs-sm); white-space: nowrap; flex: none; }
@media (min-width: 900px) { .barre-carte { left: auto; right: var(--s-6); bottom: var(--s-6); width: 420px; } }
/* Barre visible : le pied de page laisse la place, les derniers liens restent atteignables au-dessus d'elle. */
.avec-barre-carte .pied { padding-bottom: calc(var(--s-8) + 88px); }

/* ---------- Bon de commande ---------- */
.bandeau-demo { background: var(--anthracite-profond); color: var(--sur-sombre); border-bottom: 1px solid rgba(245, 238, 227, 0.12); font-size: var(--fs-sm); font-weight: 500; text-align: center; padding: var(--s-3) var(--gouttiere); line-height: 1.45; }
.bandeau-demo strong { font-weight: 700; }
.bandeau-demo strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ruban-jaune); margin-right: 0.5rem; vertical-align: middle; }
.statut { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-6); padding: 0.45rem 0.95rem; border-radius: var(--rayon-pilule); border: 1px solid rgba(245, 238, 227, 0.25); font-size: var(--fs-sm); font-weight: 600; color: var(--sur-sombre); }
.statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6fd39b; box-shadow: 0 0 0 4px rgba(111, 211, 155, 0.18); }
.statut--ferme::before { background: var(--ruban-rouge); box-shadow: 0 0 0 4px rgba(235, 51, 64, 0.2); }
/* Avant l'ouverture des commandes (vitrine seule) */
.statut--attente::before { background: var(--ruban-jaune); box-shadow: 0 0 0 4px rgba(241, 233, 59, 0.2); }

.bon { padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem) var(--section); }
.bon__grille { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 1040px) { .bon__grille { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-10); } }
.formulaire { display: grid; gap: var(--s-6); }
.etape { margin: 0; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border: var(--filet); border-radius: var(--rayon-l); background: var(--papier); min-width: 0; }
.etape__titre { display: flex; align-items: center; gap: var(--s-4); padding: 0; margin-bottom: var(--s-6); font-family: var(--font-display); font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem); font-weight: 600; line-height: 1.1; float: left; width: 100%; }
.etape__titre + * { clear: both; }
.etape__num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--anthracite); color: var(--sur-sombre); font-family: var(--font-texte); font-size: 1rem; font-weight: 700; }
.etape__intro { color: var(--encre-2); margin-bottom: var(--s-5); max-width: 44rem; }

/* Tableau des produits */
.tableau { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.tableau caption { text-align: left; }
.tableau thead th { white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-2); text-align: left; padding: 0 var(--s-3) var(--s-3); border-bottom: 1px solid var(--encre); }
.tableau thead th.num, .tableau td.num { text-align: right; }
.tableau thead th.centre { text-align: center; }
.ligne td, .ligne th { padding: var(--s-4) var(--s-3); border-bottom: var(--filet); vertical-align: middle; }
.ligne__code { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--saumon-fonce); line-height: 1; width: 4.2rem; text-align: left; }
.ligne__nom { display: block; font-weight: 550; line-height: 1.4; }
.ligne__etoile { color: var(--saumon-fonce); font-weight: 700; }
.ligne__kilo { display: block; font-size: var(--fs-sm); color: var(--encre-2); margin-top: 2px; }
.ligne__prix { white-space: nowrap; font-weight: 600; }
.ligne__total { white-space: nowrap; font-weight: 700; min-width: 5.5rem; }
.ligne--active { background: linear-gradient(90deg, rgba(248, 227, 214, 0.75), rgba(248, 227, 214, 0.25)); }
.ligne--active .ligne__total { color: var(--saumon-fonce); }
.qte { display: inline-flex; align-items: center; border: 1px solid #7d705d; border-radius: var(--rayon-pilule); background: #fff; height: 48px; }
.qte__btn { width: 46px; height: 46px; border: 0; background: transparent; border-radius: var(--rayon-pilule); font-size: 1.4rem; line-height: 1; display: grid; place-items: center; color: var(--encre); }
.qte__btn:hover { background: var(--creme-2); }
.qte__btn:disabled { color: #b5ab9b; cursor: default; background: transparent; }
.qte__champ { width: 3rem; min-width: 3rem; height: 44px; border: 0; background: transparent; text-align: center; font-weight: 700; font-size: 1.0625rem; -moz-appearance: textfield; appearance: textfield; padding: 0; }
.qte__champ::-webkit-outer-spin-button, .qte__champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qte__champ:focus-visible { outline-offset: 0; }
.mention-decongele { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--saumon-fonce); font-weight: 600; }
.note-qte { margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--encre); }
.note-qte:empty { display: none; }
.totaux { margin-top: var(--s-5); margin-left: auto; max-width: 26rem; display: grid; gap: var(--s-2); font-variant-numeric: lining-nums tabular-nums; }
.totaux div { display: flex; justify-content: space-between; gap: var(--s-4); }
.totaux dt { color: var(--encre-2); }
.totaux dd { margin: 0; font-weight: 650; }
.totaux .totaux__total { padding-top: var(--s-3); margin-top: var(--s-1); border-top: 1px solid var(--encre); font-size: var(--fs-lg); }
.totaux .totaux__total dt { color: var(--encre); font-weight: 700; }
.totaux .totaux__total dd { font-family: var(--font-display); font-size: 2rem; line-height: 1; font-weight: 600; }
.port { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--rayon); background: var(--creme); border: var(--filet); }
.port__texte { font-size: var(--fs-sm); color: var(--encre-2); }
.port__texte strong { color: var(--encre); }
.jauge { position: relative; margin-top: var(--s-3); height: 6px; border-radius: 6px; background: var(--lin-doux); overflow: hidden; }
/* La jauge va jusqu'au seuil du saumon offert ; le repère marque le seuil du port (--repere : commande.js). */
.jauge::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--repere, 100%); width: 2px; background: currentColor; opacity: 0.45; }
.jauge__barre { height: 100%; width: 0; border-radius: inherit; background: var(--saumon); transition: width 600ms var(--ease-doux); }
.port--atteint .jauge__barre { background: var(--succes); }
.offre-groupe { margin-bottom: var(--s-5); }

@media (max-width: 719px) {
  .tableau thead { display: none; }
  .tableau, .tableau tbody { display: block; }
  .ligne { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; grid-template-areas: "code nom nom" "code prix qte" "code total total"; column-gap: var(--s-3); row-gap: var(--s-2); padding: var(--s-4) var(--s-2); border-bottom: var(--filet); }
  .ligne td, .ligne th { padding: 0; border: 0; }
  .ligne__code { grid-area: code; font-size: 1.9rem; width: auto; }
  .ligne__des { grid-area: nom; }
  .ligne__prix { grid-area: prix; align-self: center; font-size: var(--fs-sm); }
  .ligne__prix::after { content: " TTC"; font-size: var(--fs-xs); font-weight: 600; color: var(--encre-2); }
  .ligne__qte { grid-area: qte; justify-self: end; }
  .ligne__total { grid-area: total; text-align: right !important; font-size: var(--fs-sm); color: var(--encre-2); display: none; }
  .ligne--active .ligne__total { display: block; }
  .ligne__total::before { content: "Total : "; font-weight: 500; }
}

/* Champs */
.champs { display: grid; gap: var(--s-5); }
@media (min-width: 720px) {
  .champs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champs--cp { grid-template-columns: 10rem minmax(0, 1fr); }
  .champ--plein { grid-column: 1 / -1; }
}
.champ { display: grid; gap: var(--s-2); align-content: start; }
.champ > label, .champ__label { font-weight: 650; font-size: var(--fs-base); color: var(--encre); }
.facultatif { font-weight: 500; color: var(--encre-3); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ select, .champ textarea {
  width: 100%; min-height: 52px; padding: 0.75rem 0.95rem; border: 1px solid #7d705d; border-radius: var(--rayon-s); background: #fff; color: var(--encre); font-size: 1.0625rem; line-height: 1.4;
  transition: border-color var(--duree) var(--ease), box-shadow var(--duree) var(--ease);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231f2326' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: none; border-color: var(--saumon-fonce); box-shadow: 0 0 0 3px rgba(168, 68, 42, 0.25); }
.champ .aide { font-size: var(--fs-sm); color: var(--encre-3); }
.champ [aria-invalid="true"], .groupe-choix[aria-invalid="true"] { border-color: var(--erreur) !important; }
.erreur-champ { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); font-weight: 600; color: var(--erreur); }
.erreur-champ::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--erreur); color: #fff; font-size: 0.75rem; font-weight: 800; }
.erreur-champ:empty { display: none; }

/* Choix (cartes radio) */
.groupe-choix { border: 0; margin: 0; padding: 0; min-width: 0; }
.groupe-choix > legend { font-weight: 650; font-size: var(--fs-base); padding: 0; margin-bottom: var(--s-3); }
.choix-liste { display: grid; gap: var(--s-3); }
/* Les trois jours restent côte à côte à toutes les largeurs, comme le calendrier de l'accueil. */
.choix-liste--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 560px) { .choix-liste--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choix-liste--3 { gap: var(--s-3); } }
.choix { position: relative; display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); border: 1px solid #b6a891; border-radius: var(--rayon); background: #fff; cursor: pointer; min-height: 56px; transition: border-color var(--duree) var(--ease), background-color var(--duree) var(--ease), box-shadow var(--duree) var(--ease); }
.choix:hover { border-color: var(--encre-2); }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix__puce { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 1.5px solid #7d705d; background: #fff; display: grid; place-items: center; transition: all var(--duree) var(--ease); }
.choix__puce::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--saumon-fonce); transform: scale(0); transition: transform var(--duree) var(--ease-doux); }
.choix input:checked ~ .choix__puce { border-color: var(--saumon-fonce); }
.choix input:checked ~ .choix__puce::after { transform: scale(1); }
/* Choisi : contour anthracite net sur fond blanc (le voile saumon se confondait avec les alertes). */
.choix input:checked ~ .choix__puce { border-color: var(--anthracite); }
.choix:has(input:checked) { border-color: var(--anthracite); background: #fff; box-shadow: inset 0 0 0 2px var(--anthracite); }
.choix:has(input:focus-visible) { outline: 3px solid var(--saumon-fonce); outline-offset: 2px; }
.choix:has(input:disabled) { opacity: 0.5; cursor: not-allowed; background: var(--creme); }
.choix__texte { display: grid; gap: 2px; }
.choix__titre { font-weight: 700; line-height: 1.3; }
.choix__detail { font-size: var(--fs-sm); color: var(--encre-2); line-height: 1.45; }
.choix--jour { flex-direction: column; align-items: center; gap: var(--s-1); text-align: center; padding: var(--s-3) var(--s-1); }
.choix--jour .choix__puce { position: static; margin: 0 0 var(--s-1); }
.choix--jour .choix__titre { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); }
.choix--jour .choix__num { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
@media (min-width: 560px) {
  .choix--jour { padding: var(--s-4) var(--s-3); }
  .choix--jour .choix__puce { position: absolute; top: var(--s-3); left: var(--s-3); margin: 0; }
  .choix--jour .choix__titre { letter-spacing: 0.14em; }
  .choix--jour .choix__num { font-size: 2.6rem; }
}
.choix--jour .choix__detail { font-style: italic; font-family: var(--font-display); font-size: 1.05rem; }
.choix--carre { flex-direction: row; }
.choix--large { grid-column: 1 / -1; }
.groupe-choix > .aide { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--encre-3); }
.case { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; min-height: 44px; padding: var(--s-2) 0; }
.case input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--saumon-fonce); cursor: pointer; }
.case span { line-height: 1.5; }
.case a { color: var(--saumon-fonce); font-weight: 600; }
.sous-panneau { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px dashed var(--lin); display: grid; gap: var(--s-5); }
.encart { padding: var(--s-4) var(--s-5); border-radius: var(--rayon); background: var(--creme); border-left: 3px solid var(--ruban-cyan); font-size: var(--fs-sm); color: var(--encre-2); }
.encart strong { color: var(--encre); }
/* Alerte = vraie erreur seulement. Attention = information à lire (hors Rhône, zone). Info = neutre. */
.encart--alerte { border-left-color: var(--ruban-rouge); background: var(--erreur-voile); color: var(--encre); }
.encart--attention { border-left-color: var(--saumon-fonce); background: var(--creme-2); color: var(--encre); }
.encart--info { border-left-color: var(--anthracite); background: var(--creme-2); color: var(--encre); }
.heures { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.heures .champ { min-width: 8.5rem; }
.heures__sep { padding-bottom: 0.9rem; color: var(--encre-2); }
.iban { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.iban code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; background: #fff; border: var(--filet); border-radius: var(--rayon-s); padding: 0.55rem 0.8rem; word-break: keep-all; overflow-wrap: normal; }
.btn--petit { min-height: 44px; padding: 0.45rem 1rem; font-size: var(--fs-sm); }
.pot-de-miel { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Vérification */
.verif { border: 1px solid var(--encre); border-radius: var(--rayon); overflow: hidden; background: #fff; }
.verif__lignes { list-style: none; padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-2); font-variant-numeric: lining-nums; }
.verif__lignes li { display: flex; justify-content: space-between; gap: var(--s-4); }
.verif__detail { display: block; font-size: var(--fs-sm); color: var(--encre-2); }
.verif__detail strong { color: var(--saumon-fonce); }
.verif__lignes .vide { color: var(--encre-3); font-style: italic; }
.ligne-cadeau, .bloc .ligne-cadeau dt, .bloc .ligne-cadeau dd { color: var(--saumon-fonce); font-weight: 650; }
.verif__totaux { padding: var(--s-4) var(--s-5); background: var(--creme); border-top: var(--filet); display: grid; gap: var(--s-2); }
.verif__totaux div { display: flex; justify-content: space-between; gap: var(--s-4); }
.verif__totaux .fort { font-weight: 800; font-size: var(--fs-lg); }
.verif__infos { margin: 0; padding: var(--s-4) var(--s-5); border-top: var(--filet); display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.verif__infos dt { font-weight: 700; display: inline; }
.verif__infos dd { display: inline; margin: 0; color: var(--encre-2); }
/* Adresse de l'accusé de réception, en évidence avant l'envoi */
.verif__ar { padding: var(--s-4) var(--s-5); border-top: var(--filet); background: var(--saumon-voile); display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--encre); }
.verif__ar:focus { outline: none; }
.verif__ar:focus-visible { outline: 3px solid var(--saumon-fonce); outline-offset: -3px; }
.verif__ar-adresse { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.verif__ar-manque { font-size: var(--fs-sm); font-weight: 600; color: var(--erreur); }
.verif__ar-attente { font-size: var(--fs-sm); font-weight: 600; color: var(--encre-2); }   /* bon pas encore rempli : une étape à faire, pas une erreur */
.verif__ar small { font-size: var(--fs-sm); color: var(--encre-2); }
.verif__ar a { color: var(--saumon-fonce); font-weight: 600; }
/* Faute de frappe probable dans l'adresse e-mail : une suggestion, jamais un refus */
.suggestion-email { font-size: var(--fs-sm); color: var(--encre); overflow-wrap: anywhere; }
.lien-bouton { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--saumon-fonce); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.lien-bouton:hover { text-decoration-thickness: 2px; }
/* Bon Excel habituel (canal historique), proposé au-dessus de l'étape 1 */
.bon-excel { font-size: var(--fs-sm); line-height: 1.5; color: var(--encre-2); }
.bon-excel a { color: var(--saumon-fonce); font-weight: 600; }
.ambassadeur { margin-top: var(--s-6); }
/* Code promotionnel : champ et « Appliquer » alignés sur une ligne, jusqu'à 320 px ; texte agrandi, le bouton passe dessous, en pleine largeur. */
.code-ligne { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-2); }
.code-ligne input[type="text"] { flex: 1000 1 7.5rem; width: auto; min-width: 0; }
.code-ligne .btn { flex: 1 0 auto; min-height: 44px; padding-inline: 0.85rem; }
.code-ligne .btn[aria-busy="true"], .fenetre__actions .btn[aria-busy="true"] { cursor: progress; opacity: 0.75; }
/* Ligne d'état : le texte porte le sens, la marque et la couleur le soulignent. */
.code-etat { font-size: var(--fs-sm); font-weight: 600; color: var(--encre-2); overflow-wrap: anywhere; }
/* Vide : elle reste en place pour être annoncée quand son texte arrive, et ne creuse pas d'écart. */
.code-etat:empty { margin-top: calc(-1 * var(--s-2)); }
.code-etat--ok, .code-etat--attention { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--encre); }
.code-etat--ok::before, .code-etat--attention::before { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; color: #fff; font-size: 0.75rem; font-weight: 800; }
.code-etat--ok::before { content: "✓"; background: var(--succes); }
.code-etat--attention::before { content: "!"; background: var(--saumon-fonce); }
.consentements { display: grid; gap: var(--s-1); margin-top: var(--s-6); }
.perissables { margin-top: var(--s-5); background: var(--creme-2); border-left: 3px solid var(--encre-3); color: var(--encre); }
.envoi { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.envoi .btn { min-height: 60px; font-size: 1.125rem; }
.envoi__note { font-size: var(--fs-sm); color: var(--encre-3); text-align: center; }
.resume-erreurs { padding: var(--s-5) var(--s-6); border-radius: var(--rayon); border: 2px solid var(--erreur); background: var(--erreur-voile); color: var(--encre); }
.resume-erreurs:focus { outline: 3px solid var(--erreur); outline-offset: 3px; }
.resume-erreurs h2 { font-family: var(--font-texte); font-size: 1.0625rem; font-weight: 800; color: var(--erreur); }
.resume-erreurs ul { margin-top: var(--s-3); padding-left: 1.2rem; display: grid; gap: var(--s-1); }
.resume-erreurs a { color: var(--erreur); font-weight: 600; }
.erreur-envoi { margin-top: var(--s-4); }

/* Récapitulatif collant (ordinateur) */
/* Plus haut que l'écran (beaucoup de références) : il défile seul, le bas du panneau reste accessible. */
.recap { position: sticky; top: calc(var(--hauteur-entete) + var(--s-6)); max-height: calc(100vh - var(--hauteur-entete) - 2 * var(--s-6)); background: var(--anthracite); color: var(--sur-sombre); border-radius: var(--rayon-l); padding: var(--s-8) var(--s-6) var(--s-6); overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgba(245, 238, 227, 0.3) transparent; isolation: isolate; box-shadow: var(--ombre-forte); }
.recap::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--ruban-rouge) 0 33.3%, var(--ruban-jaune) 0 66.6%, var(--ruban-cyan) 0); }
.recap h2 { font-size: 2rem; font-weight: 600; }
.recap__vide { margin-top: var(--s-3); color: var(--sur-sombre-2); font-size: var(--fs-sm); }
.recap__lignes { list-style: none; margin-top: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--fs-sm); max-height: 34vh; overflow-y: auto; font-variant-numeric: lining-nums; }
.recap__lignes li { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--sur-sombre-2); }
.recap__lignes b { color: var(--saumon-clair); font-weight: 700; margin-right: 0.35rem; }
.recap dl { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid rgba(245, 238, 227, 0.15); display: grid; gap: var(--s-2); font-variant-numeric: lining-nums tabular-nums; }
.recap dl div { display: flex; justify-content: space-between; }
.recap dt { color: var(--sur-sombre-2); }
.recap dd { margin: 0; font-weight: 650; }
.recap .recap__total { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid rgba(245, 238, 227, 0.15); align-items: baseline; }
.recap .recap__total dt { color: var(--sur-sombre); font-weight: 700; }
.recap .recap__total dd { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
.recap .port { background: rgba(245, 238, 227, 0.06); border-color: rgba(245, 238, 227, 0.12); }
.recap .port__texte { color: var(--sur-sombre-2); }
.recap .port__texte strong { color: var(--sur-sombre); }
.recap .jauge { background: rgba(245, 238, 227, 0.12); }
.recap__mode { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--sur-sombre-2); }
.recap__cadeau { margin-top: var(--s-4); font-size: var(--fs-sm); font-weight: 650; color: var(--saumon-clair); }
.recap .btn { margin-top: var(--s-5); width: 100%; }
@media (max-width: 1039px) { .recap { display: none; } }

/* Fenêtre « Avez-vous un ambassadeur ? » (dernière étape avant l'envoi) */
.fenetre { width: min(100% - 2 * var(--gouttiere), 34rem); max-width: none; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; border-radius: var(--rayon-l); background: var(--papier); color: var(--encre); box-shadow: var(--ombre-forte); overflow: auto; scroll-padding-bottom: 14rem; }
.fenetre:not([open]) { display: none; }
.fenetre::backdrop { background: rgba(16, 18, 20, 0.62); }
.fenetre__corps { position: relative; display: grid; gap: var(--s-4); padding: var(--s-8) clamp(1.25rem, 0.9rem + 2vw, 2.25rem) clamp(1.25rem, 0.9rem + 2vw, 2.25rem); background: var(--papier); }
.fenetre__corps::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--saumon); }
.fenetre h2 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.15; }
.fenetre h2:focus { outline: none; }
.fenetre__total { flex: 1 1 100%; font-size: var(--fs-lg); }
.fenetre__total strong { font-weight: 800; }
/* La ligne d'état garde sa place : « Vérification du code… » ne fait pas descendre « Confirmer mon achat » sous la souris entre l'appui et le relâchement. */
.fenetre [data-code-etat] { min-height: 1.6em; min-height: 1lh; margin-top: 0; }
/* Total changé au clic sur « Confirmer mon achat » : rien n'est parti, la phrase le dit, près du bouton. */
.fenetre__message { flex: 1 1 100%; }
.fenetre__message:empty { margin-top: calc(-1 * var(--s-3)); }
.fenetre__message:empty::before { content: none; }
/* Fenêtre plus haute que l'écran (petit téléphone, téléphone couché) : le total et les boutons restent visibles, le contenu défile dessous. */
.fenetre__actions { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--s-3); padding-block: var(--s-2); background: var(--papier); }
.fenetre__actions .btn { flex: 1 1 13rem; }
/* Écran bas (iPhone SE dans Safari, petit Android, téléphone couché) : le bloc collant recouvrirait le champ du code, sa ligne d'état et l'erreur. Tout défile, le total reste juste au-dessus du bouton. */
@media (max-height: 639.98px) {
  .fenetre { scroll-padding-bottom: 0; }
  .fenetre__actions { position: static; }
}
/* Vieux navigateur sans dialog.showModal : même fenêtre, en surcouche pleine page */
.fenetre--repli { position: fixed; top: 0; left: 0; z-index: 300; width: 100%; height: 100%; max-height: none; margin: 0; padding: 1rem; border-radius: 0; display: flex; background: rgba(16, 18, 20, 0.62); box-shadow: none; }
.fenetre--repli .fenetre__corps { width: 100%; max-width: 34rem; margin: auto; border-radius: var(--rayon-l); }
.fenetre--repli .fenetre__actions { position: static; }

/* Barre collante (mobile) */
.barre-bon { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--anthracite-profond); color: var(--sur-sombre); padding: var(--s-3) var(--gouttiere) calc(var(--s-3) + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); border-top: 1px solid rgba(245, 238, 227, 0.12); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2); transition: transform 400ms var(--ease-doux), visibility 0s; }
/* À l'étape 5, la barre s'efface : elle ne cache plus le récapitulatif ni le bouton final. */
.barre-bon.cachee { transform: translateY(110%); visibility: hidden; transition: transform 400ms var(--ease-doux), visibility 0s linear 400ms; }
.barre-bon__total { display: block; font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.barre-bon__total small { font-family: var(--font-texte); font-size: var(--fs-xs); font-weight: 700; color: var(--sur-sombre-2); margin-left: 0.25rem; letter-spacing: 0.08em; }
.barre-bon__port { display: block; font-size: 0.875rem; color: var(--sur-sombre-2); margin-top: 4px; line-height: 1.3; text-wrap: balance; }
.barre-bon .btn { min-height: 48px; padding: 0.5rem 1.15rem; font-size: var(--fs-sm); flex: none; }
body.avec-barre { padding-bottom: 92px; }
@media (min-width: 1040px) { .barre-bon { display: none; } body.avec-barre { padding-bottom: 0; } }

/* Confirmation / fermeture */
.confirmation, .ferme { background: var(--papier); border: var(--filet); border-radius: var(--rayon-l); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); position: relative; overflow: hidden; }
.confirmation::before, .ferme::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--saumon); }
.confirmation__sceau { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--anthracite); color: var(--saumon-clair); }
.confirmation__sceau svg { width: 30px; height: 30px; }
.confirmation h2, .ferme h2 { font-size: var(--fs-h2); margin-top: var(--s-5); line-height: 1.05; }
.confirmation h2:focus { outline: none; }
.confirmation__haut { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.confirmation__ambassadeur { padding-top: var(--s-3); border-top: var(--filet); overflow-wrap: anywhere; }
.confirmation__client p { overflow-wrap: anywhere; }
.confirmation__sous-total { margin-top: var(--s-2); padding-top: var(--s-3); border-top: var(--filet); }
.confirmation__total { font-size: var(--fs-lg); }
.bloc .confirmation__total dt { color: var(--encre); font-weight: 700; }
.confirmation__notes { margin-top: var(--s-8); }
.confirmation__commentaire { overflow-wrap: anywhere; }
.confirmation__papier, .confirmation__pied-papier { display: none; }
.numero { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-top: var(--s-5); padding: var(--s-3) var(--s-5); border-radius: var(--rayon); background: var(--anthracite); color: var(--sur-sombre); }
.numero small { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sur-sombre-2); }
.numero strong { font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; font-variant-numeric: lining-nums; white-space: nowrap; }
.bon__grille--seul { grid-template-columns: minmax(0, 1fr) !important; max-width: 64rem; }
.confirmation__grille { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
@media (min-width: 820px) { .confirmation__haut, .confirmation__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bloc { padding: var(--s-5) var(--s-6); border: var(--filet); border-radius: var(--rayon); background: #fff; }
.bloc h3 { font-size: 1.6rem; font-weight: 600; }
.bloc p, .bloc dl { margin-top: var(--s-3); }
.bloc dl { display: grid; gap: var(--s-2); margin-bottom: 0; }
.bloc dl div { display: flex; justify-content: space-between; gap: var(--s-4); }
.bloc dt { color: var(--encre-2); }
.bloc dd { margin: 0; font-weight: 650; white-space: nowrap; }
.confirmation .actions { margin-top: var(--s-8); }
.confirmation__ar { margin-top: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--fs-base); overflow-wrap: anywhere; }
.confirmation__ar a { color: var(--saumon-fonce); font-weight: 600; white-space: nowrap; }

/* ---------- Pages de texte (légales) ---------- */
.texte-long { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) var(--section); }
.texte-long article { max-width: 46rem; }
.texte-long h2 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); font-weight: 600; margin-top: var(--s-12); padding-top: var(--s-6); border-top: var(--filet); }
.texte-long h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.texte-long h3 { font-size: 1.45rem; font-weight: 600; margin-top: var(--s-8); }
.texte-long p, .texte-long ul, .texte-long dl, .texte-long table { margin-top: var(--s-4); }
.texte-long ul { padding-left: 1.25rem; display: grid; gap: var(--s-2); }
.texte-long dl { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: var(--s-2) var(--s-6); }
.texte-long dt { font-weight: 650; }
.texte-long dd { margin: 0; color: var(--encre-2); }
.texte-long a { color: var(--saumon-fonce); font-weight: 600; }
.texte-long dd > a { display: inline-flex; align-items: center; min-height: 44px; }
.texte-long table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.texte-long th, .texte-long td { text-align: left; padding: var(--s-3); border-bottom: var(--filet); vertical-align: top; }
.texte-long th { font-weight: 700; }
@media (max-width: 559px) { .texte-long dl { grid-template-columns: 1fr; gap: 0; } .texte-long dd { margin-bottom: var(--s-3); } }
.a-completer { display: inline-block; padding: 0.05rem 0.5rem; border-radius: var(--rayon-s); background: var(--ruban-jaune); color: var(--anthracite-profond); font-weight: 700; font-size: 0.9em; }
.encart-doc { margin-top: var(--s-8); padding: var(--s-6); border: 2px dashed var(--saumon-fonce); border-radius: var(--rayon); background: var(--saumon-voile); }
.encart-doc strong { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.encart-doc p { margin-top: var(--s-2); color: var(--encre-2); }
.maj { margin-top: var(--s-12); font-size: var(--fs-sm); color: var(--encre-3); }

/* ---------- 404 ---------- */
.introuvable { min-height: calc(100svh - var(--hauteur-entete)); display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(90% 90% at 50% 20%, var(--fjord-2), var(--fjord) 60%, var(--anthracite-profond)); color: var(--sur-sombre); padding-block: var(--s-16); }
.introuvable__code { font-family: var(--font-display); font-size: var(--fs-geant); line-height: 0.85; color: var(--saumon-clair); font-weight: 500; font-variant-numeric: lining-nums; }
.introuvable .titre-2 { margin-top: var(--s-4); }
.introuvable .chapo { margin: var(--s-5) auto 0; }
.introuvable .actions { justify-content: center; margin-top: var(--s-8); }
.introuvable .fils { left: 0; width: 100%; top: auto; bottom: 0; height: 26%; }

/* ---------- Impression (bon confirmé) ---------- */
@media print {
  .entete, .pied, .barre-bon, .barre-carte, .recap, .tete-page .fils, .bandeau-demo, .confirmation .actions, .evitement { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
  .tete-page { background: none; color: #000; padding: 0 0 1rem; }
  .tete-page .chapo, .tete-page .surtitre { color: #000; }
  .confirmation, .bloc { border-color: #999; box-shadow: none; }
  .numero { background: none; color: #000; border: 1px solid #000; }
  .numero small { color: #000; }
  /* La carte imprimée : une référence ne se coupe pas entre deux pages, la photo garde son filet sans ombre. */
  .mets { break-inside: avoid; }
  .mets__cadre { box-shadow: 0 0 0 1px #bbb; }
  .fenetre { display: none !important; }

  /* Bon confirmé : une seule page A4, même avec les 15 références, 1000 caractères de commentaire et un ambassadeur.
     En haut : le numéro, les coordonnées du client et l'ambassadeur. Tailles en pt : les vw dépendent de la feuille. */
  body.bon-confirme { page: bon-confirme; }
  .bon-confirme .tete-page, .bon-confirme .confirmation__sceau, .bon-confirme .confirmation__ar:not(.confirmation__ar--demo), .bon-confirme .iban button { display: none !important; }
  .bon-confirme .bon { padding: 0; }
  .bon-confirme .bon .conteneur { width: 100%; max-width: none; display: block; }
  .bon-confirme .confirmation { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8mm; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; color: #000; font-size: 10pt; line-height: 1.32; }
  .bon-confirme .confirmation::before { content: none; }
  .bon-confirme .confirmation > * { grid-column: 1 / -1; margin-top: 2.5mm; }
  .bon-confirme .confirmation > .confirmation__papier { grid-column: 1; grid-row: 1; margin: 0; display: flex; align-items: center; gap: 2.5mm; }
  .confirmation__papier img { width: auto; height: 13mm; }
  .confirmation__papier div img { height: 5mm; }
  .confirmation__papier p { margin-top: 1mm; font-size: 8.5pt; line-height: 1.2; white-space: nowrap; }
  .bon-confirme .confirmation > .numero { grid-column: 2; grid-row: 1; margin: 0; padding: 1.5mm 3mm; border-radius: 1.5mm; }
  .bon-confirme .numero small { font-size: 7pt; }
  .bon-confirme .numero strong { font-size: 15pt; }
  .bon-confirme .confirmation h2 { font-size: 16pt; font-weight: 600; }
  .bon-confirme .confirmation__ar { padding: 1.5mm 3mm; font-size: 8.5pt; }
  .bon-confirme .confirmation__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5mm; }
  .bon-confirme .confirmation__grille { display: flex; flex-direction: column; gap: 2.5mm; }
  .bon-confirme .confirmation__bon { order: -1; }
  .bon-confirme .bloc { padding: 1.5mm 3mm 2mm; border: 0.5pt solid #999; border-radius: 1.5mm; background: none; }
  .bon-confirme .bloc h3 { font-size: 11.5pt; }
  .bon-confirme .bloc p, .bon-confirme .bloc dl { margin-top: 0.8mm; }
  .bon-confirme .bloc dl { gap: 0; }
  .bon-confirme .bloc dt { color: #000; }
  .bon-confirme .ligne-cadeau, .bon-confirme .bloc .ligne-cadeau dt, .bon-confirme .bloc .ligne-cadeau dd { color: #000; }
  .bon-confirme .confirmation__ambassadeur { padding-top: 0.8mm; }
  .bon-confirme .confirmation__sous-total { margin-top: 0.8mm; padding-top: 0.8mm; border-top-color: #999; }
  .bon-confirme .confirmation__total { font-size: 11pt; }
  .bon-confirme .iban { margin-top: 0.8mm; }
  .bon-confirme .iban code { padding: 0.3mm 1.5mm; border: 0.5pt solid #999; font-size: 10pt; }
  .bon-confirme .confirmation__notes { font-size: 8.5pt; line-height: 1.28; }
  .bon-confirme .confirmation__notes > * + * { margin-top: 0.8mm; }
  .bon-confirme .confirmation__notes p { max-width: none; }
  .bon-confirme .confirmation--dense { font-size: 8.5pt; line-height: 1.16; }
  .bon-confirme .confirmation--dense h2 { display: none; }
  .bon-confirme .confirmation--dense > * { margin-top: 1.5mm; }
  .bon-confirme .confirmation--dense .confirmation__haut, .bon-confirme .confirmation--dense .confirmation__grille { gap: 1.5mm; }
  .bon-confirme .confirmation--dense .bloc { padding: 1mm 3mm; }
  .bon-confirme .confirmation--dense .confirmation__haut { grid-template-columns: minmax(0, 1fr); }
  .bon-confirme .confirmation--dense .confirmation__notes { font-size: 7.5pt; }
  .bon-confirme .confirmation--dense .iban code { font-size: 9pt; }
  .bon-confirme .confirmation > .confirmation__pied-papier { display: block; padding-top: 1.2mm; border-top: 0.5pt solid #999; font-size: 8pt; text-align: center; }
}
@page bon-confirme { size: A4 portrait; margin: 10mm 12mm; }