/* Scanteam · page d'accueil, version 3 (26/10/2026) : l'ouverture, la maison, l'esprit scandinave et « Comment commander »
   de la version 2 « La table des fêtes » ; la carte, les tables de fêtes, le calendrier, l'arrivée et le rail des chapitres
   de la version 1 « Voyage dans le fjord » (fin du fichier). */
/* ---------- Jetons ---------- */
:root {
  --nuit: #161412;
  --nuit-2: #1f1b18;
  --nuit-3: #2a2420;
  --creme: #f5ede0;
  --creme-2: #efe5d4;
  --creme-3: #e3d6c1;
  --doux: #cfc3b2;          /* texte secondaire sur fond sombre : 10,6:1 */
  --or: #d9b779;            /* or discret sur sombre : 9,6:1 */
  --or-trait: rgba(217, 183, 121, .42);
  --or-encre: #765828;      /* or sur crème : 5,5:1 */
  --saumon: #f3946a;
  --saumon-clair: #f8ae8c;
  --saumon-encre: #9a3f26;  /* saumon sur crème : 5,8:1 */
  --encre: #232527;         /* anthracite du logo, texte sur crème : 13:1 */
  --encre-douce: #57504a;   /* 6,9:1 sur crème */
  --bleu-nuit: #13202c;
  --ruban-r: #eb3340;
  --ruban-j: #f1e93b;
  --ruban-c: #2ec2ee;

  /* « EB Garamond » ne couvre ici que E, e, Ê et ê (assets/css/polices-accueil.css) : le reste vient de Cormorant. */
  --serif: "EB Garamond", "Cormorant Garamond", "Cormorant", Garamond, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gouttiere: clamp(16px, 5vw, 64px);
  --entete: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --vide: clamp(3rem, 8vh, 5rem);      /* respiration verticale des sections */
  --chair: url("../img/hero-filet-sel-700.jpg");
}
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  :root {
    --chair: image-set(url("../img/hero-filet-sel-700.avif") type("image/avif"), url("../img/hero-filet-sel-700.webp") type("image/webp"), url("../img/hero-filet-sel-700.jpg") type("image/jpeg"));
  }
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--nuit); }
html.anime { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--creme);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main, footer { overflow-x: clip; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
sup { font-size: .55em; line-height: 0; vertical-align: .9em; }
.insec { white-space: nowrap; }
[hidden] { display: none !important; }
.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;
}
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 4px; }
.papier :focus-visible { outline-color: var(--saumon-encre); }
.conteneur { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gouttiere); }
.evitement {
  position: fixed; left: 12px; top: -80px; z-index: 100;
  background: var(--creme); color: var(--encre); padding: 12px 18px; border-radius: 8px;
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.evitement:focus { top: 12px; }
/* ---------- Typographie ---------- */
.surtitre {
  font: 700 .875rem/1.3 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 18px;
}
.papier .surtitre { color: var(--or-encre); }
.titre-1, .titre-2, .titre-3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
.titre-1 { font-size: clamp(3rem, 1.9rem + 4.4vw, 6.6rem); line-height: .95; }
.titre-2 { font-size: clamp(2.5rem, 1.7rem + 3vw, 4.75rem); line-height: 1; }
.titre-3 { font-size: clamp(1.75rem, 1.5rem + .8vw, 2.25rem); line-height: 1.1; font-weight: 600; }
.titre-1 em, .titre-2 em { font-style: italic; color: var(--or); }
.papier .titre-2 em { color: var(--saumon-encre); }
.chapo { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--doux); max-width: 38em; }
.papier .chapo { color: var(--encre-douce); }
.discret { font-size: .9375rem; color: var(--doux); }
.papier .discret { color: var(--encre-douce); }
.texte p + p { margin-top: 1em; }
/* La chair du saumon dans la lettre : la vraie photo, découpée par le texte */
.chair { color: var(--saumon); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .chair {
    background-image: var(--chair);
    background-size: 240% auto;
    background-position: 46% 47%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding-inline: .06em .12em;
    margin-inline: -.06em -.12em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  /* Sur papier crème : la chair est assombrie d'un voile cuivré, pour rester lisible (contraste ≥ 3:1 en grand) */
  .papier .chair {
    background-image: linear-gradient(rgba(140, 54, 30, .42), rgba(140, 54, 30, .42)), var(--chair);
    background-size: 100% 100%, 240% auto;
    background-position: 0 0, 46% 47%;
  }
}
/* Rubans du logo, en touches fines */
.rubans { display: inline-flex; flex-direction: column; gap: 3px; width: 38px; }
.rubans i { display: block; height: 2px; border-radius: 2px; }
.rubans i:nth-child(1) { background: var(--ruban-r); }
.rubans i:nth-child(2) { background: var(--ruban-j); width: 80%; }
.rubans i:nth-child(3) { background: var(--ruban-c); width: 60%; }
.lisiere { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; gap: 3px; z-index: 2; }
.lisiere i { display: block; height: 3px; }
.lisiere i:nth-child(1) { background: var(--ruban-r); }
.lisiere i:nth-child(2) { background: var(--ruban-j); width: 72%; }
.lisiere i:nth-child(3) { background: var(--ruban-c); width: 44%; }
.legende {
  font: 600 .8125rem/1.3 var(--sans);
  letter-spacing: .06em;
  color: rgba(245, 237, 224, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
/* ---------- Boutons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: 14px 28px;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 700 1.0625rem/1.2 var(--sans); letter-spacing: .01em;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.bouton:hover { transform: translateY(-2px); }
.bouton--plein { background: var(--saumon); color: #1a1210; }
.bouton--plein:hover { background: var(--saumon-clair); }
.bouton--trait { border-color: var(--or-trait); color: var(--creme); }
.bouton--trait:hover { border-color: var(--or); background: rgba(217, 183, 121, .08); }
.bouton--encre { background: var(--encre); color: var(--creme); }
.bouton--encre:hover { background: #34373a; }
.lien-fleche { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; color: var(--or-encre); text-underline-offset: .25em; padding-block: 8px; }
/* Flèche dessinée (masque SVG, couleur du lien) : le caractère « → » n'est dans aucune police du site
   et s'affichait dans la police du système. */
.lien-fleche::after {
  content: ""; flex: none; width: 1.15em; height: .8em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1.5 7h15.5M11.5 2l5.5 5-5.5 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1.5 7h15.5M11.5 2l5.5 5-5.5 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s;
}
.lien-fleche:hover::after { transform: translateX(4px); }
/* ---------- En-tête (fond sombre par défaut : lisible même sans JavaScript) ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgba(22, 20, 18, .94);
  box-shadow: 0 1px 0 rgba(217, 183, 121, .16);
  transition: background-color .4s, box-shadow .4s;
}
.entete__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--entete); max-width: 1480px; margin-inline: auto; padding-inline: var(--gouttiere);
}
.entete::before {
  content: ""; position: absolute; inset: 0 0 -30px; pointer-events: none; z-index: -1; opacity: 0;
  background: linear-gradient(180deg, rgba(14, 12, 10, .6), rgba(14, 12, 10, 0));
  transition: opacity .4s;
}
.js .entete:not(.entete--pleine) { background: transparent; box-shadow: none; }
.js .entete:not(.entete--pleine)::before { opacity: 1; }
.entete--pleine { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(22, 20, 18, .9); }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.marque__rubans { width: 34px; height: auto; }
.marque__mot { width: 116px; height: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav__lien, .nav__tel {
  display: none; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 999px;
  font: 600 .9375rem/1 var(--sans); text-decoration: none; color: var(--creme);
}
.nav__lien:hover, .nav__tel:hover { color: var(--or); }
.nav__tel { gap: 8px; color: var(--or); margin-right: 6px; }
.nav__tel::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Le bouton de commande : plein saumon, comme le bouton principal du héros */
.nav__bon {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 0;
  background: var(--saumon); color: #1a1210;
  font: 800 .9375rem/1 var(--sans); text-decoration: none;
  box-shadow: 0 8px 24px -10px rgba(243, 148, 106, .7);
  transition: background-color .25s, transform .25s var(--ease);
}
.nav__bon:hover { background: var(--saumon-clair); transform: translateY(-1px); }
.nav__compteur {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px; background: var(--nuit); color: var(--saumon-clair); font-size: .875rem; font-weight: 800;
}
.nav__compteur[hidden] { display: none; }
.nav__compteur.pouls { animation: pouls .6s var(--ease); }
@keyframes pouls { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* ---------- Fonds de fjords : bleu nuit froid, voilés, grain léger, flou doux ---------- */
/* position + z-index : contexte d'empilement, donc groupe isolé pour les fondus de couleur (pas de « isolation », qui casse le rendu sans GPU) */
.fjord { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bleu-nuit); }
.fjord picture { position: absolute; inset: 0; }
.fjord img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* le flou lisse les stries d'agrandissement des photos d'origine */
  filter: var(--fjord-filtre, saturate(.45) brightness(.88) contrast(1.12) blur(1.5px));
  transform: scale(1.05);
  transform-origin: 50% 50%;
}
/* Teinte : bleu nuit dans les ombres et les tons moyens, l'eau garde son bleu */
.fjord picture::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--fjord-teinte, #2a4563);
  mix-blend-mode: color; opacity: var(--fjord-teinte-force, .6);
}
/* Hautes lumières crème, discrètes */
.fjord picture::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 60% at 60% 22%, rgba(239, 228, 208, .2), transparent 70%);
  mix-blend-mode: screen;
}
/* Grain : calque séparé, pour régler sa force */
.fjord::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url("../img/grain.png");
  opacity: .45;
}
.fjord::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 20, 18, .35) 0%, rgba(22, 20, 18, 0) 30%, rgba(22, 20, 18, .55) 78%, var(--nuit) 100%);
}
/* ---------- 1 · Ouverture ---------- */
.ouverture { position: relative; background: var(--nuit); }
.ouverture__scene { position: relative; }
.ouverture__fond { display: none; }
.ouverture__grille { display: flex; flex-direction: column; }
.ouverture__ancre, .ouverture__halo { display: none; }
.ouverture__cadre {
  order: -1; position: relative; overflow: hidden;
  margin-inline: calc(-1 * var(--gouttiere));
  height: 56vh; height: 56svh; min-height: 360px; max-height: 760px;
}
.ouverture__media { position: absolute; inset: 0; transform-origin: 50% 50%; }
.ouverture__media picture, .ouverture__media img { width: 100%; height: 100%; }
.ouverture__media img { object-fit: cover; object-position: 50% 32%; }
/* Zoom lent au chargement (1 à 1,05 en 6 s) : piloté par table.js sur le transform de .ouverture__media */
.ouverture__cadre::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 20, 18, .55) 0%, rgba(22, 20, 18, 0) 22%, rgba(22, 20, 18, 0) 50%, rgba(22, 20, 18, .85) 86%, var(--nuit) 100%);
}
.ouverture__voile { display: none; }
.ouverture__cadre .legende { position: absolute; right: var(--gouttiere); top: calc(var(--entete) + 10px); z-index: 2; }
.ouverture__texte { position: relative; z-index: 2; margin-top: -5.5rem; padding-bottom: 52px; }
.ouverture__texte .titre-1 { margin-bottom: 18px; }
.ouverture__texte .titre-1 .chair { font-style: italic; }
.ligne { display: block; }
.signature {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  font: italic 500 1.5rem/1.1 var(--serif); color: var(--or);
}
.ouverture__texte .chapo { margin-bottom: 26px; color: #ded3c3; }
/* La carte en bouton plein, le bon à côté, de même largeur. Seul (avant l'ouverture des commandes),
   le bouton de la carte garde la largeur d'une case ; sur un écran étroit, ils s'empilent. */
.ouverture__texte .actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.ouverture__texte .actions .bouton { padding-inline: 12px; font-size: 1rem; }
.ouverture__texte .actions .bouton--plein { box-shadow: 0 14px 32px -14px rgba(243, 148, 106, .8); }
.reperes { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font-size: .9375rem; color: var(--doux); }
.reperes li::before { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: -2px 10px 0 0; border-radius: 50%; background: var(--saumon); }
.reperes__restants { color: var(--saumon-clair); font-weight: 700; }
.reperes__restants::before { content: " · "; color: var(--doux); font-weight: 400; }
.ouverture__tel { margin-top: 14px; font-size: .9375rem; color: var(--doux); }
.ouverture__tel a { display: inline-block; padding: 6px 0; color: var(--creme); font-weight: 700; text-underline-offset: .2em; white-space: nowrap; }
.ouverture__phrase, .ouverture__legende, .ouverture__nuit, .ouverture__indice { display: none; }
/* ---------- 2 · La maison (crème) ---------- */
.papier { background: var(--creme); color: var(--encre); }
.maison { position: relative; z-index: 5; padding: calc(var(--vide) + 12px) 0 var(--vide); }
.maison__grille { display: grid; gap: 28px; }
.maison__gauche { position: relative; }
/* Petit écran : le « 40 », puis le texte, puis la photo (on ne fait pas défiler un écran entier avant le premier titre) */
.maison__gauche { display: contents; }
.maison__photo { order: 2; }
.maison__quarante {
  display: flex; align-items: flex-end; gap: 14px;
  font: 600 clamp(9rem, 4rem + 22vw, 24rem)/.8 var(--serif); letter-spacing: -.04em; font-variant-numeric: lining-nums;
}
@media (max-width: 599px) { .maison__quarante { margin-bottom: 28px; } }   /* 27/10 : en défilant, le « 40 » touchait « La maison » */
.maison__quarante small {
  font: 700 .875rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--or-encre); padding-bottom: .8em; max-width: 7em;
}
/* Sous le « 40 » : des tranches qui brillent sous une lumière rasante (photo d'illustration).
   Marge haute : le « 40 » flotte (parallaxe) sans jamais mordre sur la photo. */
.maison__photo { margin-top: 6px; }
.maison__cadre {
  --rayon: 18px;
  position: relative; overflow: hidden; border-radius: var(--rayon);
  aspect-ratio: 3 / 2; background: #3a2216;
}
.maison__cadre picture { position: absolute; inset: -14% 0; }
.maison__cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.88) contrast(1.02); }
.maison__cadre::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(35, 37, 39, .08);
  background: radial-gradient(120% 90% at 30% 30%, transparent 55%, rgba(40, 18, 10, .28) 100%);
}
.maison__legende { margin-top: 10px; text-align: right; font: 600 .8125rem/1.3 var(--sans); letter-spacing: .04em; color: var(--encre-douce); }
.maison .titre-2 { margin-bottom: 26px; }
.maison .texte { font-size: 1.125rem; color: #3b3632; max-width: 36em; }
.lieux { display: grid; gap: 12px; margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(35, 37, 39, .14); }
.lieux li { display: flex; gap: 14px; align-items: baseline; font-weight: 600; }
.lieux span {  min-width: 5.5em; font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--or-encre); font-weight: 700;}
/* ---------- 3 · L'esprit scandinave ---------- */
.esprit { position: relative; background: var(--nuit); }
.tableau {
  position: relative; overflow: hidden;
  min-height: 76vh; min-height: 76svh;
  display: flex; align-items: flex-end;
  padding: 104px 0 var(--vide);
}
.tableau .fjord::after {
  background:
    radial-gradient(90% 80% at 78% 40%, rgba(120, 160, 200, .1), transparent 65%),
    linear-gradient(90deg, rgba(22, 20, 18, .8) 0%, rgba(22, 20, 18, .5) 36%, rgba(22, 20, 18, .06) 72%, rgba(22, 20, 18, 0) 100%),
    linear-gradient(180deg, rgba(22, 20, 18, .7) 0%, rgba(22, 20, 18, 0) 22%, rgba(22, 20, 18, 0) 58%, var(--nuit) 100%);
}
.tableau__texte { position: relative; z-index: 2; }
.tableau__texte > * { max-width: 640px; }
.tableau__texte .titre-2 { margin-bottom: 22px; }
.tableau__texte .chapo { color: #e4ddd2; }
.origines { display: grid; gap: 16px; margin-top: 8px; }
.origines li { display: grid; gap: 2px; padding-left: 20px; border-left: 2px solid var(--or-trait); }
.origines span { font: italic 600 1.875rem/1.1 var(--serif); color: var(--creme); }
.origines small { font-size: 1rem; color: #ddd5c8; }
/* ---------- Ajout au bon : bouton, puis compteur − / + ---------- */
.ajout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bouton--ajout {
  min-height: 50px; width: 100%;
  background: transparent; border-color: var(--or-trait); color: var(--creme); font-size: 1rem;
}
.bouton--ajout:hover { background: var(--saumon); border-color: var(--saumon); color: #1a1210; }
/* Sur la table aux bougies : un fond de nuit sous le libellé, le contraste ne dépend pas des reflets de la photo */
.ajout--mini .bouton--ajout { width: auto; min-height: 44px; padding: 8px 18px; font-size: .9375rem; border-color: rgba(243, 148, 106, .6); background: rgba(16, 12, 10, .62); color: var(--saumon-clair); }
.ajout--mini .bouton--ajout:hover { background: var(--saumon); color: #1a1210; }
.ajout--ligne .bouton--ajout { width: auto; min-height: 48px; padding: 10px 22px; background: var(--encre); border-color: var(--encre); color: var(--creme); }
.ajout--ligne .bouton--ajout:hover { background: var(--saumon-encre); border-color: var(--saumon-encre); color: #fff; }
.pas { display: inline-flex; align-items: center; border-radius: 999px; background: var(--saumon); color: #1a1210; padding: 3px; }
.pas__btn {
  position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0;
  background: transparent; color: inherit; cursor: pointer;
}
.pas__btn:hover { background: rgba(26, 18, 16, .12); }
.pas__btn::before, .pas__btn--plus::after {  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: currentColor;}
.pas__btn--plus::after { transform: rotate(90deg); }
.pas__val { min-width: 2.2em; text-align: center; font: 800 1.125rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.ajout__voir { font-weight: 700; font-size: .9375rem; color: var(--saumon-clair); text-underline-offset: .2em; padding: 10px 2px; }
.papier .pas { background: var(--encre); color: var(--creme); }
.papier .pas__btn:hover { background: rgba(255, 255, 255, .12); }
.papier .ajout__voir { color: var(--saumon-encre); }
/* ---------- 6 · Comment commander (crème plus soutenu) ---------- */
.commander { position: relative; padding: var(--vide) 0; background: var(--creme-2); }
.entete-section { max-width: 760px; margin-bottom: 40px; }
.ficelle { display: none; }
.gestes { display: grid; gap: 28px; }
.geste { position: relative; padding-top: 6px; }
.geste__num { position: relative; display: inline-block; padding: 0 18px 0 4px; margin-left: -4px; background: var(--creme-2); font: italic 600 4.5rem/.8 var(--serif); color: var(--saumon-encre); margin-bottom: 14px; font-variant-numeric: lining-nums; }
.geste .titre-3 { margin-bottom: 10px; }
.geste p:last-child { color: #3b3632; max-width: 26em; }
.commander__appel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 44px; }
.commander__appel .discret a { color: var(--encre); font-weight: 700; display: inline-block; padding: 6px 0; }
/* ---------- Pied de page ---------- */
.pied { background: #100e0d; color: var(--doux); padding: 64px 0 28px; font-size: 1rem; border-top: 1px solid rgba(217, 183, 121, .14); }
.pied__grille { display: grid; gap: 30px; }
.pied__logo { width: 180px; height: auto; margin-bottom: 16px; }
.pied h2 { font: 700 .875rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin-bottom: 6px; }
.pied__h2-suite { margin-top: 20px; }
.pied a { color: var(--creme); text-underline-offset: .2em; }
.pied__liens a { display: inline-block; padding: 12px 0; }
.pied address { line-height: 1.6; }
.pied__bas { display: grid; gap: 8px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(217, 183, 121, .14); font-size: .875rem; }
.pied__bas a { display: inline-block; padding: 8px 0; }
/* Mention de réalisation : discrète, sur sa propre ligne, à gauche */
.pied__credit { grid-column: 1 / -1; justify-self: start; }
/* ---------- Le bon flottant ---------- */
.bon-flottant {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 55;
  display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100% - 24px); padding: 8px 8px 8px 22px;
  border-radius: 999px; background: var(--creme); color: var(--encre);
  border: 1px solid rgba(154, 63, 38, .25);
  box-shadow: 0 22px 50px -14px rgba(0, 0, 0, .7);
  opacity: 0; pointer-events: none; transform: translate(-50%, 140%);
  transition: opacity .35s ease, transform .5s var(--ease);
}
.bon-flottant.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.bon-flottant__corps { display: grid; gap: 6px; min-width: 0; }
.bon-flottant__resume { font-size: .9375rem; line-height: 1.3; color: var(--encre-douce); }
.bon-flottant__resume strong { display: block; font-size: 1rem; color: var(--encre); font-variant-numeric: tabular-nums; }
.bon-flottant__jauge { display: block; height: 4px; border-radius: 4px; background: rgba(35, 37, 39, .12); overflow: hidden; }
.bon-flottant__jauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--saumon-encre), var(--saumon)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.bon-flottant__lien { flex: none; min-height: 48px; padding: 10px 20px; font-size: 1rem; white-space: nowrap; }
.bon-flottant__flash {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 8px);
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  background: var(--encre); color: var(--creme); font-weight: 700; font-size: .9375rem;
  opacity: 0; transition: opacity .3s ease, transform .4s var(--ease); pointer-events: none;
}
.bon-flottant__flash.visible { opacity: 1; transform: translate(-50%, 0); }
html.avec-bon body { padding-bottom: 92px; }
@media (max-width: 559px) {
  .bon-flottant { left: 10px; right: 10px; width: auto; max-width: none; border-radius: 20px; padding: 10px 10px 10px 16px; transform: translateY(140%); }
  .bon-flottant.visible { transform: none; }
  .bon-flottant__corps { flex: 1; }
  .bon-flottant__resume { font-size: .875rem; }
}
/* ---------- Apparitions au défilement ---------- */
@keyframes revele {
  from { opacity: 0; transform: translate3d(0, 46px, 0); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  .anime [data-revele] {
    animation: revele linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  .anime .geste:nth-child(2) { animation-range: entry 8% entry 68%; }
  .anime .geste:nth-child(3) { animation-range: entry 16% entry 76%; }
}
.anime.sans-sda [data-revele] { opacity: 0; transform: translate3d(0, 46px, 0); transition: opacity .9s ease, transform 1s var(--ease); }
.anime.sans-sda [data-revele].vu { opacity: 1; transform: none; }
/* Dévoilement des photos d'illustration : le cadre s'ouvre, la photo se pose (de 1,18 à 1) */
@keyframes devoile-cadre {
  from { clip-path: inset(16% 12% 16% 12% round 28px); }
  to { clip-path: inset(0 0 0 0 round var(--rayon, 4px)); }
}
@keyframes devoile-photo {
  from { transform: scale(1.18); }
  to { transform: scale(1); }
}
@supports (animation-timeline: view()) {
  .anime .devoile[data-revele] { animation: none; }
  /* Frise nommée portée par le cadre : la photo, enfermée dans un cadre à débordement masqué, suit le défilement de la page */
  .anime .devoile__cadre {
    view-timeline-name: --devoile;
    view-timeline-axis: block;
    animation: devoile-cadre linear both;
    animation-timeline: --devoile;
    animation-range: entry 5% cover 42%;
  }
  .anime .devoile__cadre img {
    animation: devoile-photo linear both;
    animation-timeline: --devoile;
    animation-range: entry 0% cover 55%;
  }
}
.anime.sans-sda .devoile[data-revele] { opacity: 1; transform: none; }
.anime.sans-sda .devoile__cadre { clip-path: inset(16% 12% 16% 12% round 28px); transition: clip-path 1.3s var(--ease); }
.anime.sans-sda .devoile__cadre img { transform: scale(1.18); transition: transform 1.6s var(--ease); }
.anime.sans-sda .devoile.vu .devoile__cadre { clip-path: inset(0 0 0 0 round var(--rayon, 4px)); }
.anime.sans-sda .devoile.vu .devoile__cadre img { transform: scale(1); }
.anime.sans-sda .geste:nth-child(2) { transition-delay: .12s; }
.anime.sans-sda .geste:nth-child(3) { transition-delay: .24s; }
/* ====================================================================
   Petit écran : grain plus léger, cartes de la carte complète plus serrées
   ==================================================================== */
/* Très petit écran (320 px) : logo et bouton resserrés, le compteur du bon tient dans l'en-tête */
@media (max-width: 389px) {
  .marque { gap: 6px; }
  .marque__rubans { width: 28px; }
  .marque__mot { width: 92px; }
  .nav__bon { padding: 8px 12px; gap: 6px; font-size: .875rem; }
  .nav__compteur { min-width: 22px; height: 22px; padding: 0 5px; }
}
@media (max-width: 699px) {
  /* Téléphone : le bouton de la carte dans le premier écran, juste sous le titre ; la photo garde sa hauteur et le texte vient après. */
  .ouverture__texte { display: flex; flex-direction: column; }
  .ouverture__texte .actions { order: 1; }
  .ouverture__texte .chapo, .ouverture__texte .reperes, .ouverture__texte .ouverture__tel { order: 2; }
  .ouverture__texte .chapo { margin: 24px 0 0; }
  .fjord::before { opacity: .25; }
  .geste__num { font-size: 4rem; }
  .tableau { min-height: 68vh; min-height: 68svh; padding-top: 96px; }
}
/* ====================================================================
   Tablette et plus
   ==================================================================== */
@media (min-width: 700px) {
  :root { --entete: 76px; }
  .marque__rubans { width: 42px; }
  .marque__mot { width: 150px; }
  .gestes { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .geste__num { font-size: 6.5rem; }
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .pied__bas { grid-template-columns: auto 1fr; justify-items: end; }
  .tableau__texte .chapo { font-size: 1.25rem; }
}
@media (min-width: 560px) {
  .nav__lien--carte { display: inline-flex; }
}
@media (min-width: 1000px) {
  .nav__lien { display: inline-flex; }
}
@media (min-width: 1240px) {
  .nav__tel { display: inline-flex; }
}
/* ====================================================================
   Grand écran : mises en page larges (avec ou sans animation)
   ==================================================================== */
@media (min-width: 900px) and (min-height: 600px) {
  .ouverture__scene { min-height: 100vh; display: flex; align-items: center; padding: calc(var(--entete) + 24px) 0 40px; overflow: hidden; }
  .ouverture__fond { display: block; }
  /* Le fjord existe dès le premier écran (froid, en retrait), le filet chaud s'en détache */
  .ouverture__fond::after {
    background:
      linear-gradient(90deg, rgba(22, 20, 18, .9) 0%, rgba(22, 20, 18, .62) 38%, rgba(22, 20, 18, .2) 66%, rgba(22, 20, 18, .35) 100%),
      linear-gradient(180deg, rgba(22, 20, 18, .55) 0%, rgba(22, 20, 18, 0) 32%, rgba(22, 20, 18, .2) 70%, var(--nuit) 100%);
  }
  .ouverture__grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 4vw, 80px); max-width: 1480px; }
  .ouverture__cadre {
    order: 0; grid-column: 2; grid-row: 1; margin: 0;
    width: min(46vw, 740px, calc((100vh - var(--entete) - 84px) * .95)); height: min(calc(100vh - var(--entete) - 84px), 900px); min-height: 0; max-height: none;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9);
  }
  .ouverture__cadre::after { background: linear-gradient(180deg, rgba(22, 20, 18, 0) 70%, rgba(22, 20, 18, .45) 100%); }
  .ouverture__media img { object-position: 50% 46%; }
  .ouverture__cadre .legende { top: auto; bottom: 12px; right: 14px; }
  .ouverture__ancre, .ouverture__halo { grid-column: 2; grid-row: 1; width: min(46vw, 740px, calc((100vh - var(--entete) - 84px) * .95)); height: min(calc(100vh - var(--entete) - 84px), 900px); }
  /* Arche lumineuse, version ambre : un halo chaud derrière la fenêtre du filet */
  .ouverture__halo {
    display: block; position: relative; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(243, 160, 110, .5) 58%, rgba(214, 140, 90, .2) 78%, transparent 100%);
    transform: scale(1.4);
  }
  .ouverture__texte { margin: 0; padding: 0; max-width: 600px; }
  .ouverture__texte .titre-1 { font-size: clamp(3.75rem, 1.6rem + 4.4vw, 6.4rem); }
  .maison { padding: calc(var(--vide) + 40px) 0 calc(var(--vide) + 30px); }
  .maison__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
  .maison__gauche { display: block; }
  .tableau { padding: 140px 0 110px; align-items: center; }
  /* Maison : le « 40 » et la photo à gauche, le texte à droite */
  .maison__photo { margin-top: 58px; max-width: 620px; }
}
/* ====================================================================
   Grand écran animé : scènes épinglées
   ==================================================================== */
@media (min-width: 900px) and (min-height: 600px) {
  /* Ouverture : le cadre s'ouvre en plein écran, zoom lent */
  .anime .ouverture { height: 300vh; }
  .anime .ouverture__scene { position: sticky; top: 0; height: 100vh; }
  .anime .ouverture__ancre { display: block; position: relative; z-index: 1; outline: 1px solid rgba(217, 183, 121, .6); outline-offset: 16px; border-radius: 2px; }
  .anime .ouverture__cadre {
    position: absolute; inset: 0; z-index: 1; width: auto; height: auto; min-height: 0; max-height: none;
    transform-origin: 50% 50%; will-change: transform; box-shadow: none;
  }
  .anime:not(.pret) .ouverture__cadre { visibility: hidden; }
  .anime .ouverture__cadre::after { display: none; }
  .anime .ouverture__cadre .legende { display: none; }
  .anime .ouverture__media { inset: auto; will-change: transform; }
  .anime .ouverture__voile {
    display: block; position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background:
      radial-gradient(75% 60% at 18% 82%, rgba(14, 12, 10, .82), rgba(14, 12, 10, 0) 70%),
      linear-gradient(90deg, rgba(22, 20, 18, .55) 0%, rgba(22, 20, 18, .2) 45%, rgba(22, 20, 18, 0) 70%),
      linear-gradient(180deg, rgba(22, 20, 18, .55) 0%, rgba(22, 20, 18, 0) 22%, rgba(22, 20, 18, 0) 55%, rgba(22, 20, 18, .75) 100%);
  }
  .anime .ouverture__texte, .anime .ouverture__fond, .anime .ouverture__halo { will-change: transform, opacity; }
  .anime .ouverture__phrase {
    display: block; position: absolute; z-index: 3; left: var(--gouttiere); bottom: 14vh;
    max-width: 11em; opacity: 0; will-change: transform, opacity;
    font: 500 clamp(3.25rem, 1.6rem + 3.8vw, 6rem)/.98 var(--serif); letter-spacing: -.01em;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
  }
  .anime .ouverture__phrase span { display: block; }
  .anime .ouverture__phrase em { display: block; color: #f0d3a0; }
  .anime .ouverture__legende { display: block; position: absolute; z-index: 3; right: var(--gouttiere); bottom: 22px; opacity: 0; }
  .anime .ouverture__nuit { display: block; position: absolute; inset: 0; z-index: 4; background: #0b0a09; opacity: 0; pointer-events: none; }
  .anime .ouverture__indice {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    position: absolute; z-index: 3; left: var(--gouttiere); bottom: 22px; flex-direction: row; gap: 14px;
    font: 700 .75rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--doux); text-decoration: none;
  }
  .anime .ouverture__indice::after { content: ""; width: 48px; height: 1px; background: linear-gradient(90deg, var(--or), transparent); animation: indice 2.2s var(--ease) infinite; transform-origin: left; }
  @keyframes indice { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
  /* La maison glisse par-dessus le filet, comme une feuille posée sur la table */
  .anime .maison { margin-top: -100vh; box-shadow: 0 -50px 90px rgba(0, 0, 0, .55); }
  /* L'esprit scandinave : deux fjords en fondu enchaîné (2,2 écrans) */
  .anime .esprit { height: 220vh; }
  .anime .esprit__scene { position: sticky; top: 0; height: 100vh; overflow: hidden; overflow: clip; }
  .anime .tableau { position: absolute; inset: 0; min-height: 0; padding: 0; display: flex; align-items: center; }
  .anime .tableau + .tableau .tableau__fond { opacity: 0; }
  .anime .tableau__fond, .anime .tableau__fond img, .anime .tableau__texte { will-change: transform, opacity; }
  .anime .tableau + .tableau .tableau__texte { opacity: 0; }
  .anime .tableau + .tableau .tableau__texte { visibility: hidden; }
  .anime .tableau__texte { padding-top: var(--entete); }
  .anime .ficelle { display: block; position: relative; height: 1px; margin: 0 0 -40px; background: rgba(35, 37, 39, .1); }
  .anime .ficelle span { display: block; height: 2px; margin-top: -.5px; background: linear-gradient(90deg, #c8a35f, #e6cf9a); transform: scaleX(0); transform-origin: left; will-change: transform; }
}
/* Écrans grands mais bas (ordinateur portable 1280 x 720) : cartes plus compactes */
@media (min-width: 900px) and (min-height: 600px) and (max-height: 800px) {
  .anime .ouverture__indice { display: none; }
  .ouverture__texte .chapo { font-size: 1.0625rem; }
  .ouverture__texte .titre-1 { font-size: clamp(3.5rem, 1.4rem + 4vw, 5.4rem); }
  .ouverture__tel { display: none; }
  .ouverture__texte .surtitre { margin-bottom: 12px; }
  .signature { margin-bottom: 14px; }
  .ouverture__texte .chapo { margin-bottom: 20px; }
  .reperes { margin-top: 18px; }
}
/* Petit écran (scène non épinglée) : la mention « Photo d'illustration » posée sur le bois clair du filet
   reçoit un fond voilé, comme les autres légendes sur photo ; celle de la planche des mi-cuits descend sous
   la planche, sur le fond sombre, au lieu de chevaucher son bord. */
@media not all and (min-width: 900px) and (min-height: 600px) {
  .ouverture__cadre .legende { padding: 5px 10px; border-radius: 999px; background: rgba(22, 18, 16, .55); }
}
/* ====================================================================
   Moins d'animations / ?static=1 : tout est visible, rien ne bouge
   ==================================================================== */
.statique *, .statique *::before, .statique *::after { animation: none !important; transition: none !important; }
.statique [data-revele] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media print {
  .entete, .bon-flottant, .ouverture__fond, .fjord { display: none !important; }
  body, .papier { background: #fff; color: #000; }
}

/* ====================================================================
   V3 (25-26/10/2026) · chapitres repris de la V1 « Voyage dans le fjord »
   La carte, Vos tables de fêtes, le calendrier, l'arrivée et le rail des chapitres, aux polices et aux couleurs
   de la V2. Les photos de fond restent à l'écran pendant tout leur chapitre (position: sticky, sans script) :
   même effet que les fonds fixes de la V1, sans moteur de défilement de plus.
   ==================================================================== */
:root {
  --pad: clamp(5rem, 3rem + 7vw, 9rem);
  --ease-doux: cubic-bezier(.16, 1, .3, 1);
  --brume: #c9bfb2;          /* texte secondaire sur les fonds bruns : 9:1 */
  --peche: #ffc9a3;          /* italiques sur les photos chaudes (bougies, aurore) */
  --bruit: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Ouverture : le paysage de Scanteam, net (le flou et la teinte des fjords agrandis ne s'appliquent pas) ---------- */
.fjord--net { --fjord-filtre: saturate(.92) brightness(.8) contrast(1.05); --fjord-teinte: #1d3550; --fjord-teinte-force: .18; }
.fjord--net::before { opacity: .12; }
.fjord--net img { object-position: 50% 58%; }
.ouverture__media img { object-position: 42% 50%; }
@media (min-width: 900px) and (min-height: 600px) { .ouverture__media img { object-position: 46% 50%; } }

/* ---------- Rail des chapitres (grand écran) ---------- */
.rail { display: none; }
@media (min-width: 1280px) {
  .rail { display: block; position: fixed; right: .75rem; top: 50%; transform: translateY(-50%); z-index: 45; transition: opacity .5s; }
  .rail ol { list-style: none; margin: 0; padding: .4rem 0; display: grid; gap: .15rem; border-radius: 999px; background: rgba(22, 20, 18, .62); }
  .rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 34px; padding-right: .4rem; text-decoration: none; color: #d8cfc2; }
  .rail__num { width: 2.6rem; text-align: center; font: italic 600 1.0625rem/1 var(--serif); transition: color .3s, transform .3s var(--ease); }
  .rail__nom {
    position: absolute; right: 2.9rem; white-space: nowrap; padding: .4rem .8rem; border-radius: 999px;
    background: rgba(22, 20, 18, .95); color: var(--creme); font: 700 .875rem/1.2 var(--sans); letter-spacing: .04em;
    opacity: 0; transform: translateX(8px); transition: opacity .25s, transform .25s var(--ease); pointer-events: none;
  }
  .rail a::before {
    content: ""; position: absolute; right: .2rem; top: 50%; width: 3px; height: 0; border-radius: 3px;
    background: var(--saumon); transform: translateY(-50%); transition: height .3s var(--ease);
  }
  .au-depart .rail { opacity: 0; }
  .au-depart .rail:focus-within { opacity: 1; }
  .rail a:hover .rail__nom, .rail a:focus-visible .rail__nom { opacity: 1; transform: none; }
  .rail a[aria-current="true"] { color: var(--saumon-clair); }
  .rail a[aria-current="true"] .rail__num { transform: scale(1.25); }
  .rail a[aria-current="true"]::before { height: 18px; }
}

/* ---------- Chapitres et photos de fond ---------- */
/* overflow: clip (et non hidden) : la section ne devient pas un conteneur de défilement, la photo reste épinglée ;
   elle ne déborde jamais sur le chapitre suivant ni sur le pied de page (la marge négative le lui permettrait). */
.chapitre { position: relative; overflow: hidden; overflow: clip; background: var(--nuit); scroll-margin-top: var(--entete); }   /* arrivée par un lien : la légende du chapitre reste sous l'en-tête */
.chapitre__contenu { position: relative; z-index: 1; width: min(100% - 2 * var(--gouttiere), 1360px); margin-inline: auto; padding-block: var(--pad); }
.fond {
  position: sticky; top: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--nuit);
  height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh;
}
.fond__zoom { position: absolute; inset: 0; }
.fond__zoom picture, .fond__zoom img { width: 100%; height: 100%; }
.fond__zoom img { object-fit: cover; filter: saturate(.86) brightness(.8) contrast(1.08); }
.fond__voile { position: absolute; inset: 0; background: var(--voile); }
.fond__lumiere { position: absolute; inset: 0; }
/* 27/10 : la légende n'est plus dans le fond collant (elle passait sur les titres et les boutons en défilant) :
   posée en haut à droite de son chapitre, dans la marge du haut, elle défile avec lui */
.legende--coin {
  position: absolute; z-index: 2; right: var(--gouttiere); top: 14px; max-width: calc(100% - 2 * var(--gouttiere));
  padding: 5px 12px; border-radius: 999px; background: rgba(22, 18, 16, .62); text-shadow: none; text-align: right;
}

/* Surtitre des chapitres de la V1 : les trois rubans du logo, puis le nom du chapitre */
.cap {
  display: flex; align-items: center; gap: .85rem; margin-bottom: 1.2rem;
  font: 700 .875rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #fcc8ab;
}
.filets { display: inline-grid; gap: 3px; width: 42px; flex: none; }
.filets i { display: block; height: 2px; border-radius: 2px; }
.filets i:nth-child(1) { background: var(--ruban-r); }
.filets i:nth-child(2) { background: var(--ruban-j); width: 78%; }
.filets i:nth-child(3) { background: var(--ruban-c); width: 56%; }
.chapitre .titre-2 em { color: var(--saumon-clair); }

/* Légende posée sur une photo : pastille sombre, lisible sur un fond blanc comme sur la chair */
.legende--pastille {
  position: absolute; z-index: 3; top: .7rem; right: .7rem; max-width: calc(100% - 1.4rem);
  padding: .22rem .7rem; border-radius: 999px; background: rgba(16, 12, 10, .76);
  color: var(--creme); text-shadow: none; font-size: .8125rem; line-height: 1.3; letter-spacing: .02em;
}
/* Le code du bon posé sur une photo (crème, ombre serrée : jamais de chair sur la chair) */
.sceau {
  position: absolute; z-index: 2; left: 1.1rem; bottom: .5rem; margin: 0; pointer-events: none;
  font: 600 clamp(3.25rem, 2.4rem + 1.8vw, 4.5rem)/.9 var(--serif); letter-spacing: -.02em; color: var(--creme);
  text-shadow: 0 2px 18px rgba(10, 6, 4, .8), 0 1px 2px rgba(10, 6, 4, .55);
}
.sceau sup { font-size: .42em; vertical-align: 1.15em; margin-left: .04em; }

/* ---------- 4 · La carte : le gros plan tient l'écran, le titre en bas ; un rideau de nuit monte avec les plats ---------- */
.fond--carte .fond__zoom img { object-position: 50% 56%; filter: saturate(1.08) brightness(.98) contrast(1.06); }
.fond--carte { --voile: linear-gradient(180deg, rgba(22, 20, 18, .85) 0%, rgba(22, 20, 18, 0) 22%), linear-gradient(0deg, rgba(22, 20, 18, .4) 0%, rgba(22, 20, 18, 0) 30%); }
.carte__contenu { padding-bottom: calc(.45 * var(--pad)); }
.carte__entete {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; align-content: flex-end; gap: 1.5rem 3rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem); min-height: calc(86vh - var(--pad)); min-height: calc(86svh - var(--pad));
}
.carte__entete .titre-2, .carte__entete .cap, .carte__chapo { text-shadow: 0 2px 24px rgba(12, 9, 8, .8), 0 1px 3px rgba(12, 9, 8, .6); }
.carte__contenu::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0;
  top: calc(86vh - var(--pad) - var(--rideau, 22rem)); top: calc(86svh - var(--pad) - var(--rideau, 22rem));
  background: linear-gradient(180deg, rgba(12, 9, 8, 0) 0, rgba(12, 9, 8, .55) 8rem, rgba(12, 9, 8, .86) 14rem, rgba(12, 9, 8, .82) 22rem, rgba(12, 9, 8, .82) calc(100% - 30rem), rgba(12, 9, 8, .72) calc(100% - 12rem), rgba(12, 9, 8, .9) 100%);
}
.carte__chapo { max-width: 30rem; color: var(--creme); font-size: 1.125rem; }
.carte__h3 { font: 500 clamp(1.75rem, 1.4rem + 1.2vw, 2.6rem)/1.1 var(--serif); margin-bottom: 1.2rem; color: var(--creme); }
.carte__h3 em { font-style: italic; color: var(--saumon-clair); }
.carte__accroche { color: #e4ddd2; margin-bottom: 1.4rem; }

/* La famille des mi-cuits : une photo, une famille, quatre prix */
.micuits { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.micuits__medias { position: relative; margin: 0 -2vw 0 calc(-1 * clamp(0rem, 3vw, 3rem)); }
.micuits__planche { position: relative; }
.micuits__tirage {
  position: relative; z-index: 3; overflow: hidden; width: min(44%, 340px); aspect-ratio: 3 / 2;
  margin: -17% 4% 0 auto; border-radius: 18px; background: #1a0f0a; rotate: 2.5deg;
  box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(246, 178, 147, .24);
}
.micuits__tirage picture, .micuits__tirage img { position: absolute; inset: 0; width: 100%; height: 100%; }
.micuits__tirage img { object-fit: cover; filter: saturate(1.1) contrast(1.05) brightness(1.06) sepia(.05); }
.micuits__tirage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(16, 10, 7, .88) 0%, rgba(16, 10, 7, 0) 48%); }
.sceau--tirage { font-size: clamp(2.2rem, 1.7rem + 1vw, 3rem); left: .9rem; bottom: .45rem; }
.micuits__planche picture, .micuits__planche img { position: relative; z-index: 1; width: 100%; }
.micuits__planche img { filter: saturate(1.06) sepia(.06) drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); }
.micuits__lueur { position: absolute; inset: -18% -10% -10%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 170, 110, .42), rgba(243, 148, 106, .14) 55%, rgba(243, 148, 106, 0)); }
.micuits__planche .legende { position: relative; z-index: 2; margin-top: .4rem; padding-left: 5%; padding-right: 50%; }
.micuits__liste { list-style: none; padding: 0; border-top: 1px solid rgba(246, 178, 147, .25); }
.micuit {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; grid-template-areas: "code corps prix" "code corps ajout";
  gap: .2rem 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid rgba(246, 178, 147, .25);
}
.micuit__code { grid-area: code; font: 600 2.25rem/1 var(--serif); color: var(--saumon-clair); }
.micuit__code sup, .aussi__code sup { font-size: .5em; vertical-align: .9em; margin-left: .02em; }
.micuit__corps { grid-area: corps; }
.micuit__nom { font: 600 1.0625rem/1.4 var(--sans); color: var(--creme); }
.micuit__meta, .aussi__meta { margin-top: .25rem; font-size: .9375rem; color: var(--brume); }
.micuit__prix { grid-area: prix; justify-self: end; font: 500 1.875rem/1 var(--serif); white-space: nowrap; font-variant-numeric: lining-nums; }
.micuit__prix small, .aussi__prix small { font: 700 .875rem var(--sans); color: var(--brume); margin-left: .3rem; letter-spacing: .06em; }
.micuit .ajout { grid-area: ajout; justify-self: end; margin-top: .5rem; }

/* Quatre vedettes en photo : les cartes en brun nuit, comme le rideau */
.vedettes-bloc { margin-top: clamp(4rem, 8vw, 7rem); }
.vedettes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
.plat {
  position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden;
  background: linear-gradient(170deg, rgba(46, 27, 18, .94), rgba(16, 10, 7, .97));
  box-shadow: inset 0 0 0 1px rgba(246, 178, 147, .16), 0 30px 60px -30px rgba(0, 0, 0, .7);
}
.plat__media {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; display: flex; align-items: flex-end; padding: 0 1.4rem;
  background: radial-gradient(80% 70% at 30% 100%, rgba(238, 138, 102, .34), rgba(238, 138, 102, 0) 72%), linear-gradient(180deg, rgba(16, 10, 7, .2), rgba(16, 10, 7, 0));
}
.plat__lettre { font: 700 clamp(7rem, 3rem + 8vw, 13rem)/.78 var(--serif); letter-spacing: -.03em; padding: 0 .06em .08em 0; margin-bottom: -.04em; }
.plat__media--photo { display: block; padding: 0; background: #1a0f0a; }
.plat__media--photo picture, .plat__media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.plat__media--photo img { object-fit: cover; filter: saturate(1.1) contrast(1.05) brightness(1.04) sepia(.06); transform: scale(var(--zoom, 1)); transition: transform 1.1s var(--ease-doux); }
.plat__media--photo img, .aussi__vignette img, .micuits__tirage img { object-position: var(--pos, 50% 50%); transform-origin: var(--pos, 50% 50%); }
.plat:hover .plat__media--photo img { transform: scale(calc(var(--zoom, 1) * 1.05)); }
.plat__media--photo img[data-ton="clair"], .aussi__vignette img[data-ton="clair"] { filter: saturate(1.28) contrast(1.12) brightness(.98) sepia(.1); }
.plat__media--photo img[data-ton="vif"], .aussi__vignette img[data-ton="vif"] { filter: saturate(1.22) contrast(1.18) brightness(.92) hue-rotate(-12deg); }
.photo--clair::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 55%, rgba(120, 52, 22, 0) 50%, rgba(60, 26, 12, .5) 100%), rgba(236, 146, 96, .2);
  mix-blend-mode: multiply;
}
.plat__media--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(16, 10, 7, .96) 0%, rgba(16, 10, 7, .5) 20%, rgba(16, 10, 7, 0) 44%), radial-gradient(70% 50% at 80% 0%, rgba(255, 196, 140, .16), rgba(255, 196, 140, 0) 70%);
}
.plat__corps { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.4rem 1.5rem; }
.plat__code { font: 700 .875rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--saumon-clair); }
.plat__code strong { font-size: 1.05rem; }
.plat__nom { margin-top: .55rem; font: 500 clamp(1.25rem, 1.1rem + .35vw, 1.45rem)/1.25 var(--serif); color: var(--creme); font-variant-numeric: lining-nums; }
.plat__accroche { margin-top: .6rem; font: italic 500 1.0625rem/1.4 var(--serif); color: var(--peche); }
.plat__pied { margin-top: auto; padding-top: 1.3rem; display: grid; gap: 1rem; }
.prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.prix__montant { font: 500 2.25rem/1 var(--serif); color: var(--creme); font-variant-numeric: lining-nums; }
.prix__ttc { font: 700 .875rem var(--sans); letter-spacing: .08em; color: var(--brume); }
.prix__kilo { flex-basis: 100%; font-size: .9375rem; color: var(--brume); }

/* Et aussi à la carte : la désignation exacte de Scanteam, en entier */
.aussi { margin-top: clamp(3.5rem, 6vw, 5.5rem); padding: clamp(1.4rem, 1rem + 1.5vw, 2.6rem); border-radius: 24px; background: rgba(20, 12, 8, .86); box-shadow: inset 0 0 0 1px rgba(245, 238, 227, .1); }
.aussi__liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.6rem; }
.aussi__item {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "vig corps" "vig bas"; gap: .2rem 1.3rem; align-items: start;
  padding: 1.3rem 0; border-top: 1px solid rgba(245, 238, 227, .14);
}
.aussi__vignette {
  grid-area: vig; position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 16px; display: flex; align-items: flex-end;
  background: radial-gradient(90% 90% at 30% 100%, rgba(238, 138, 102, .36), rgba(238, 138, 102, 0) 72%), linear-gradient(170deg, #2e1b12, #120b07);
  box-shadow: inset 0 0 0 1px rgba(246, 178, 147, .18), 0 18px 34px -20px rgba(0, 0, 0, .85);
}
.aussi__vignette picture, .aussi__vignette img { position: absolute; inset: 0; width: 100%; height: 100%; }
.aussi__vignette img { object-fit: cover; filter: saturate(1.1) contrast(1.04) brightness(1.04) sepia(.05); transform: scale(var(--zoom, 1)); transition: transform 1s var(--ease-doux); }
.aussi__item:hover .aussi__vignette img { transform: scale(calc(var(--zoom, 1) * 1.06)); }
.aussi__vignette--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(16, 10, 7, .85) 0%, rgba(16, 10, 7, 0) 46%); }
.sceau--vignette { left: .6rem; bottom: .3rem; font-size: 2.1rem; }
.aussi__code { font: 700 clamp(5rem, 4rem + 1.4vw, 6.25rem)/.8 var(--serif); letter-spacing: -.03em; padding: 0 .06em .12em .55rem; }
.aussi__corps { grid-area: corps; }
.aussi__nom { font: 600 1.0625rem/1.4 var(--sans); color: var(--creme); }
.aussi__note { margin-top: .3rem; font: 600 .8125rem/1.3 var(--sans); letter-spacing: .02em; color: var(--brume); }
.aussi__bas { grid-area: bas; align-self: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .7rem; }
.aussi__prix { font: 500 1.75rem/1 var(--serif); white-space: nowrap; font-variant-numeric: lining-nums; }
.carte__pied { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.mention { color: var(--brume); font-size: .9375rem; max-width: 48em; }
.carte .lien-fleche { color: var(--saumon-clair); }

/* 26/10 · Le produit tel que livré (photos de Scanteam) et une courte description pour chaque référence */
.plat__accroche, .micuit__conseil, .aussi__conseil { margin-top: .5rem; font: 400 .9375rem/1.5 var(--sans); color: #e4ddd2; }
.plat__livre {
  position: absolute; z-index: 3; right: .9rem; bottom: .9rem; width: 30%; max-width: 120px; aspect-ratio: 1;
  overflow: hidden; border-radius: 14px; rotate: 3deg; background: #f2f4f7;
  box-shadow: 0 0 0 3px var(--creme), 0 18px 30px -12px rgba(0, 0, 0, .8);
}
.plat__livre picture, .plat__livre img { width: 100%; height: 100%; }
.plat__livre img { object-fit: cover; }
.plat__livre-legende {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px 4px; text-align: center;
  font: 700 .6875rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--creme); background: rgba(16, 12, 10, .8);
}
.micuit { grid-template-columns: 3.4rem 4.5rem minmax(0, 1fr) auto; grid-template-areas: "code photo corps prix" "code photo corps ajout"; }
.micuit__photo { grid-area: photo; width: 4.5rem; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #f2f4f7; box-shadow: 0 0 0 1px rgba(246, 178, 147, .3), 0 12px 24px -12px rgba(0, 0, 0, .8); }
.micuit__photo picture, .micuit__photo img { width: 100%; height: 100%; }
.micuit__photo img { object-fit: cover; }
.aussi__vignette--produit { background: #f2f4f7; }
.aussi__vignette--produit img { filter: saturate(1.04) brightness(.97); }
/* Le fumoir de Scanteam, seul et en grand à côté des mi-cuits : un tirage en hauteur, la lueur du feu derrière */
.micuits { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.micuits__medias { --largeur-fumoir: min(100%, 460px); margin: 0; display: flex; flex-direction: column; align-items: center; }
.micuits__fumoir { position: relative; width: var(--largeur-fumoir); }
.micuits__fumoir-cadre {
  position: relative; z-index: 1; overflow: hidden; aspect-ratio: 1329 / 1835; border-radius: 22px; background: #1a0f0a;
  box-shadow: 0 0 0 1px rgba(246, 178, 147, .22), 0 50px 90px -40px rgba(0, 0, 0, .95);
}
.micuits__fumoir-cadre picture, .micuits__fumoir-cadre img { width: 100%; height: 100%; }
.micuits__fumoir-cadre img { object-fit: cover; filter: saturate(1.05) contrast(1.05); }
.micuits__fumoir-cadre::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 60px rgba(16, 10, 7, .55); }
.micuits__fumoir .legende { position: relative; z-index: 2; margin-top: .8rem; text-align: center; color: var(--brume); text-shadow: none; }
.micuits__fumoir .micuits__lueur { inset: -12% -22%; }
/* Fumé à froid, fumé à chaud : sous la légende, même largeur que la photo, au-dessus de la lueur */
.micuits__fumage { position: relative; z-index: 2; width: var(--largeur-fumoir); margin-top: .7rem; font-size: 1rem; line-height: 1.5; color: var(--brume); text-wrap: pretty; }
.micuits__fumage strong { font-weight: 700; color: var(--saumon-clair); }
/* Grand écran : trois lignes dans les 460 px de la photo, à la taille des précisions voisines (.micuit__meta) ; 16 px au téléphone */
@media (min-width: 1101px) { .micuits__fumage { font-size: .9375rem; } }
/* Photos des produits : posées sur un passe-partout crème, comme des tirages (le fond bleu clair des photos ne heurte plus la nuit) */
.micuit__photo, .aussi__vignette--produit { padding: 5px; background: var(--creme); }
.micuit__photo img, .aussi__vignette--produit img { border-radius: 8px; }
.aussi__vignette--produit picture { position: absolute; inset: 5px; width: auto; height: auto; }
.aussi__vignette--produit::after { inset: 5px; border-radius: 8px; }
@media (max-width: 680px) {
  .plat__livre { width: 26%; right: .7rem; bottom: .7rem; }
  .micuits__medias { --largeur-fumoir: min(100%, 360px); }
}

/* ---------- 5 · Sur vos tables de fêtes : la mosaïque à trois vitesses (dix photos d'ambiance) ---------- */
.tables {
  z-index: 2; margin-top: calc(-.3 * var(--pad));
  background:
    radial-gradient(34% 22% at 14% 22%, rgba(255, 168, 98, .2), rgba(255, 168, 98, 0) 72%),
    radial-gradient(30% 22% at 88% 60%, rgba(255, 150, 88, .16), rgba(255, 150, 88, 0) 72%),
    radial-gradient(46% 26% at 50% 100%, rgba(238, 138, 102, .14), rgba(238, 138, 102, 0) 70%),
    linear-gradient(180deg, rgba(12, 9, 8, 0) 0, #0e0906 12rem, #130b07 60%, #0b0705 100%);
}
.tables > .chapitre__contenu { padding-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(3.25rem, 2.25rem + 2vw, 5rem); }
.tables::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--bruit); opacity: .07; mix-blend-mode: overlay; }
.tables__lueur { position: absolute; left: 50%; top: 22%; width: min(70rem, 120vw); height: 40rem; margin-left: min(-35rem, -60vw); pointer-events: none; background: radial-gradient(closest-side, rgba(255, 176, 112, .12), rgba(255, 176, 112, 0)); }
.tables__mosaique {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.36fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr; grid-template-areas: "c1 tete c3" "c1 c2 c3";
  column-gap: clamp(1rem, 2.2vw, 2rem); align-items: start;
}
.tables__tete { grid-area: tete; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(.5rem, 2vw, 2rem) 0 clamp(2rem, 3.2vw, 3.2rem); }
.tables__tete .cap { justify-content: center; }
.tables__titre { font-size: clamp(2.75rem, 1rem + 3.7vw, 4.9rem); line-height: .98; text-shadow: 0 6px 40px rgba(10, 6, 4, .6); }
.tables__titre em { display: block; color: var(--peche); }
.tables__chapo { margin-top: 1.3rem; max-width: 29rem; color: #e4ddd2; font-size: 1.0625rem; }
.tables__col { display: grid; gap: clamp(1rem, 2.2vw, 2rem); }
.tables__col--1 { grid-area: c1; padding-top: clamp(1rem, 4vw, 4.5rem); }
.tables__col--2 { grid-area: c2; }
.tables__col--3 { grid-area: c3; padding-top: clamp(4rem, 13vw, 13rem); }
.tuile { position: relative; overflow: hidden; border-radius: 22px; background: #1a0f0a; box-shadow: 0 46px 80px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(246, 178, 147, .12); }
.tuile--23 { aspect-ratio: 2 / 3; }
.tuile--45 { aspect-ratio: 4 / 5; }
.tuile--11 { aspect-ratio: 1; }
.tuile--32 { aspect-ratio: 3 / 2; }
.tuile--1610 { aspect-ratio: 16 / 10; }
.tuile picture, .tuile img { width: 100%; height: 100%; }
.tuile img { object-fit: cover; filter: saturate(1.08) contrast(1.04) brightness(1.03); }
.tuile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(14, 9, 6, .55) 0%, rgba(14, 9, 6, 0) 30%); }
.tuile .legende--pastille { top: auto; right: auto; left: .75rem; bottom: .7rem; }
.tables__legende { display: none; margin-top: 1rem; }

/* ---------- 7 · Le calendrier : la table de fête aux bougies (le texte à gauche, les bougies à droite) ---------- */
.calendrier { background: radial-gradient(70% 24% at 50% 100%, rgba(255, 150, 80, .18), rgba(255, 150, 80, 0) 72%), linear-gradient(180deg, #0e0905 0%, #120a06 72%, #160c07 100%); }
.fond--calendrier { background: #0e0905; }
.fond--calendrier .fond__zoom img { object-position: 50% 50%; filter: saturate(1.06) brightness(.9) contrast(1.05); }
.fond--calendrier {
  --voile:
    linear-gradient(90deg, rgba(20, 12, 6, .9) 0%, rgba(20, 12, 6, .72) 30%, rgba(20, 12, 6, .18) 60%, rgba(20, 12, 6, .05) 100%),
    linear-gradient(180deg, rgba(20, 12, 6, .72) 0%, rgba(20, 12, 6, .08) 30%, rgba(20, 12, 6, .2) 66%, rgba(14, 9, 5, .9) 100%);
}
.fond--calendrier .fond__lumiere { background: radial-gradient(34% 40% at 84% 42%, rgba(255, 190, 120, .2), rgba(255, 190, 120, 0) 70%); mix-blend-mode: screen; }
.calendrier__contenu { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.calendrier .titre-2 { text-shadow: 0 6px 40px rgba(20, 12, 6, .6), 0 2px 18px rgba(20, 12, 6, .8), 0 1px 3px rgba(20, 12, 6, .6); }
.calendrier .cap { text-shadow: 0 2px 20px rgba(20, 12, 6, .85), 0 1px 3px rgba(20, 12, 6, .75); }
.calendrier .titre-2 em { color: var(--peche); }
.limite { display: grid; gap: .3rem; justify-self: start; padding: 1.4rem 1.7rem; border-radius: 20px; background: rgba(24, 14, 8, .8); box-shadow: inset 0 0 0 1px rgba(255, 196, 150, .4), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.limite__etiquette { font: 700 .875rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--peche); }
.limite__date { font: italic 500 clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem)/1.1 var(--serif); color: var(--creme); }
.limite__note { color: #efe4d6; }
.limite__note strong { color: var(--peche); }
.limite__restants { color: var(--peche); font-weight: 700; }
.limite__restants::before { content: ", "; color: #efe4d6; font-weight: 400; }
.jours { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.75rem); }
.jour {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden;
  padding: clamp(1.3rem, 1rem + 1.5vw, 2.4rem) .5rem clamp(1.1rem, .9rem + 1vw, 2rem); border-radius: 22px; color: var(--encre);
  background: radial-gradient(90% 70% at 50% 0%, #fffaf2, var(--creme) 60%, var(--creme-2));
  box-shadow: inset 0 0 0 1px rgba(154, 63, 38, .25), 0 30px 60px -28px rgba(0, 0, 0, .7);
}
.jour::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #f8ac8a, var(--saumon), #e57a55); }
.jour__nom { font: 700 clamp(.875rem, .8rem + .3vw, 1rem)/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--saumon-encre); }
.jour__num { font: 600 clamp(4.2rem, 2.5rem + 7vw, 9.5rem)/.95 var(--serif); letter-spacing: -.02em; color: var(--encre); font-variant-numeric: lining-nums; }
.jour__mois { font: italic 500 clamp(1.15rem, 1rem + .6vw, 1.6rem)/1.2 var(--serif); color: var(--encre-douce); }
.calendrier__bas { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.notes { list-style: none; padding: 1.5rem 1.7rem; border-radius: 20px; background: rgba(24, 14, 8, .82); display: grid; gap: .9rem; color: #efe4d6; box-shadow: inset 0 0 0 1px rgba(255, 196, 150, .2); }
.notes li { position: relative; padding-left: 1.4rem; }
.notes li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--saumon); }
.notes strong { color: var(--creme); }
.ticket { position: relative; color: var(--encre); background: var(--creme); border-radius: 22px; padding: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.ticket::before {
  content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 0; height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--ruban-r) 0 33%, var(--ruban-j) 33% 66%, var(--ruban-c) 66%);
}
.ticket__etiquette { font: 700 .875rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--saumon-encre); }
.ticket h3 { font: italic 600 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.15 var(--serif); margin: .6rem 0 1rem; }
.ticket address { font-size: 1.125rem; font-weight: 600; }
.ticket dl { margin: 1.2rem 0 1rem; display: grid; gap: .6rem; }
.ticket dl div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .6rem; border-top: 1px dashed rgba(35, 37, 39, .25); padding-top: .6rem; }
.ticket dt { font-weight: 700; color: var(--encre-douce); }
.ticket dd { margin: 0; }
.papier :focus-visible, .ticket :focus-visible, .jour :focus-visible { outline-color: var(--saumon-encre); }

/* ---------- 8 · L'arrivée : l'aurore sur les Lofoten, la planche dans une lumière de table chaude ---------- */
.arrivee { background: radial-gradient(64% 36vh at 50% 0%, rgba(255, 150, 80, .16), rgba(255, 150, 80, 0) 72%), linear-gradient(180deg, #160c07 0, #0b0a0c 45vh, #100e0d 90vh); }
.fond--arrivee .fond__zoom img { object-position: 50% 47%; filter: saturate(1.02) brightness(.86) contrast(1.05); }
.fond--arrivee .fond__lumiere { background: radial-gradient(46% 30% at 50% 96%, rgba(255, 168, 98, .26), rgba(255, 168, 98, 0) 72%), radial-gradient(30% 18% at 50% 70%, rgba(255, 180, 120, .1), rgba(255, 180, 120, 0) 70%); mix-blend-mode: screen; }
.fond--arrivee {
  --voile:
    radial-gradient(48% 46% at 50% 52%, rgba(3, 10, 18, .66), rgba(3, 10, 18, .26) 70%, rgba(3, 10, 18, 0) 100%),
    linear-gradient(180deg, rgba(3, 10, 18, .6) 0%, rgba(3, 10, 18, .04) 26%, rgba(3, 10, 18, 0) 50%, rgba(3, 10, 18, .4) 72%, rgba(16, 14, 13, .9) 100%);
}
.arrivee__contenu {
  min-height: 100vh; min-height: 100svh; padding-block: clamp(4.5rem, 3rem + 6vh, 7rem) clamp(7rem, 5rem + 8vh, 10rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.arrivee .cap { justify-content: center; text-shadow: 0 2px 24px rgba(3, 10, 18, .85), 0 1px 3px rgba(3, 10, 18, .7); }
.arrivee__titre { font: 500 clamp(2.75rem, 1rem + 5.6vw, 6.5rem)/.98 var(--serif); letter-spacing: -.02em; text-shadow: 0 6px 40px rgba(3, 10, 18, .7); }
.arrivee__titre em { display: block; font-style: italic; color: var(--peche); }
.arrivee__contenu .chapo { margin: 1.4rem auto 0; max-width: 34em; color: var(--creme); text-shadow: 0 1px 12px rgba(3, 10, 18, .9), 0 0 2px rgba(3, 10, 18, .6); }
.arrivee__planche { position: relative; width: min(30rem, 92vw); margin: 1.4rem auto 0; }
.arrivee__planche picture, .arrivee__planche img { position: relative; z-index: 1; width: 100%; }
.arrivee__planche img { filter: saturate(1.06) sepia(.06) drop-shadow(0 24px 26px rgba(0, 0, 0, .55)); }
.arrivee__halo { position: absolute; z-index: 0; left: -55%; right: -55%; top: -55%; bottom: -95%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 170, 110, .52), rgba(236, 146, 96, .3) 45%, rgba(236, 146, 96, .1) 72%, rgba(236, 146, 96, 0)); }
.legende--arrivee { position: relative; z-index: 1; margin-top: .2rem; text-align: right; }
.actions--centre { justify-content: center; }
.arrivee__contenu .actions { position: relative; z-index: 1; margin-top: 1.2rem; }
.bouton--grand { min-height: 62px; padding: 18px 36px; font-size: 1.1875rem; }
.arrivee__contact {
  margin-top: 1.6rem; padding: .4rem 1.6rem; color: var(--creme);
  text-shadow: 0 1px 12px rgba(3, 10, 18, .9), 0 0 6px rgba(3, 10, 18, .7);
  background: radial-gradient(closest-side, rgba(3, 10, 18, .55), rgba(3, 10, 18, .35) 70%, rgba(3, 10, 18, 0));
}
.arrivee__contact a { display: inline-block; padding: 6px 0; color: var(--peche); font-weight: 700; text-underline-offset: .2em; }
.fils { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; height: clamp(90px, 14vw, 200px); pointer-events: none; }
.fils path { fill: none; stroke-width: 2; stroke-linecap: round; opacity: .85; vector-effect: non-scaling-stroke; }
.fils .r { stroke: var(--ruban-r); }
.fils .j { stroke: var(--ruban-j); }
.fils .c { stroke: var(--ruban-c); }

/* ---------- Apparitions propres aux chapitres de la V1 ---------- */
.anime .jour:nth-child(2) { animation-range: entry 8% entry 68%; }
.anime .jour:nth-child(3) { animation-range: entry 16% entry 76%; }
.anime.sans-sda .jour:nth-child(2) { transition-delay: .12s; }
.anime.sans-sda .jour:nth-child(3) { transition-delay: .24s; }
@keyframes tuile-pose { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes fil-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.anime .fils path { stroke-dasharray: 1; }
@supports (animation-timeline: view()) {
  .anime .tuile img { animation: tuile-pose linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  .anime .fils path { animation: fil-trace linear both; animation-timeline: view(); animation-range: entry 10% cover 60%; }
  .anime .fils .c { animation-range: entry 20% cover 66%; }
  .anime .fils .j { animation-range: entry 30% cover 72%; }
}
.anime.sans-sda .tuile img { transform: scale(1.14); transition: transform 2.2s var(--ease-doux); }
.anime.sans-sda .tuile.vu img { transform: none; }
.anime.sans-sda .fils path { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-doux); }
.anime.sans-sda .fils.vu path { stroke-dashoffset: 0; }

/* ---------- Adaptations des chapitres de la V1 ---------- */
@media (max-width: 1200px) {
  .plat__media--photo img { object-position: var(--pos-m, var(--pos, 50% 50%)); transform-origin: var(--pos-m, var(--pos, 50% 50%)); transform: scale(var(--zoom-m, var(--zoom, 1))); }
  .plat:hover .plat__media--photo img { transform: scale(calc(var(--zoom-m, var(--zoom, 1)) * 1.05)); }
  .vedettes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plat__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 1100px) {
  .micuits { grid-template-columns: minmax(0, 1fr); }
  .micuits__medias { margin: 0 -2vw; max-width: 760px; justify-self: center; width: 100%; }
  .aussi__liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .fond--carte .fond__zoom img { object-position: 46% 56%; }
  .carte__contenu { --rideau: 34rem; }
  .fond--calendrier .fond__zoom img { object-position: 55% 50%; }
  .fond--calendrier { --voile: linear-gradient(180deg, rgba(20, 12, 6, .84) 0%, rgba(20, 12, 6, .6) 30%, rgba(20, 12, 6, .5) 50%, rgba(20, 12, 6, .52) 64%, rgba(14, 9, 5, .92) 100%); }
  .fond--calendrier .fond__lumiere { background: radial-gradient(46% 28% at 70% 30%, rgba(255, 190, 120, .14), rgba(255, 190, 120, 0) 70%); }
  .fond--arrivee .fond__zoom img { object-position: 50% 50%; }
  .fond--arrivee { --voile: radial-gradient(80% 36% at 50% 48%, rgba(3, 10, 18, .72), rgba(3, 10, 18, .2) 80%), linear-gradient(180deg, rgba(3, 10, 18, .55) 0%, rgba(3, 10, 18, 0) 28%, rgba(3, 10, 18, 0) 58%, rgba(3, 10, 18, .72) 78%, rgba(16, 14, 13, .9) 100%); }
  .calendrier__bas { grid-template-columns: minmax(0, 1fr); }
  .tables__mosaique { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "tete tete" "c1 c3" "c2 c2"; column-gap: .8rem; }
  .tables__tete { padding: 0 0 2rem; }
  .tables__col { gap: .8rem; }
  .tables__col--1 { padding-top: 0; }
  .tables__col--3 { padding-top: 2.75rem; }
  .tables__col--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: .8rem; }
  .tables__col--2 .tuile { aspect-ratio: 1; }
  .tables__col--2 .tuile--finale { grid-column: 1 / -1; order: 1; aspect-ratio: 16 / 9; }
  .tuile { border-radius: 16px; }
  .tuile .legende--pastille { left: .45rem; bottom: .45rem; padding: .15rem .5rem; font-size: .75rem; }
  .legende--coin { padding: 3px 10px; }
  /* téléphone : la mosaïque ne glisse pas (la légende unique, sous le texte, reste lisible) */
  .tables__col { transform: none !important; }
}
@media (max-width: 680px) {
  .vedettes { grid-template-columns: minmax(0, 1fr); }
  .actions .bouton { flex: 1 1 100%; }
  .jour__nom { letter-spacing: .04em; font-size: .8125rem; }
  .micuit { grid-template-columns: 3.1rem minmax(0, 1fr) auto; grid-template-areas: "code corps corps" "code prix ajout"; column-gap: .7rem; row-gap: .7rem; align-items: center; }
  .micuit__code { align-self: start; font-size: 1.875rem; }
  .micuit__prix { justify-self: start; }
  .micuit .ajout { margin-top: 0; }
  .aussi__item { grid-template-columns: 5.75rem minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "vig corps" "bas bas"; column-gap: .95rem; }
  .aussi__code { font-size: 4.25rem; padding-left: .4rem; }
  .sceau--vignette { font-size: 1.6rem; left: .45rem; bottom: .25rem; }
  .aussi { padding-inline: 1.1rem; }
  .micuits__tirage { width: 74%; margin: .9rem 3% 0 auto; }
  .micuits__planche .legende { padding-right: 4%; }
  .plat__media { aspect-ratio: 3 / 2; }
  .plat__lettre { font-size: 9rem; }
  .ticket dl div { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .legende__plus { display: none; }
}
@media (max-width: 600px) {
  .tables__legende { display: block; }
  .tuile .legende--pastille { display: none; }
}
@media (max-width: 360px) {
  .aussi__item { grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: .8rem; }
  .aussi__code { font-size: 3.6rem; }
}
@media print {
  .rail, .fond { display: none !important; }
}
.pied { position: relative; z-index: 2; }
/* téléphone (après les adaptations de la V1, qu'elle complète) : la photo du produit garde sa colonne à côté du code */
@media (max-width: 680px) {
  .micuits__liste .micuit { grid-template-columns: 3.1rem 3.6rem minmax(0, 1fr) auto; grid-template-areas: "code photo corps corps" "code photo prix ajout"; }
  .micuit__photo { width: 3.6rem; align-self: start; }
}
/* 360 px et moins (beaucoup de téléphones Android) : « + Ajouter » couvrait la fin du prix ; le prix passe sous la photo */
@media (max-width: 380px) {
  .micuits__liste .micuit { grid-template-areas: "code photo corps corps" "code prix prix ajout"; }
}