/* =========================================================
   Maison Trémeaux — feuille de style
   Couleurs, polices et espacements : variables dans :root
   ========================================================= */

@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --blanc: #f7f6f2;        /* fond : blanc émail, légèrement chaud */
  --blanc-2: #ecebe5;      /* filets, fonds secondaires */
  --carte: #ffffff;
  --noir: #141312;
  --noir-2: #4b4944;       /* texte secondaire sur blanc */
  --noir-3: #34332f;       /* filets sur noir */
  --gris-clair: #e4e1d8;   /* texte secondaire sur noir (bien lisible) */
  --or: #d4ad45;           /* doré du logo, sur fond noir */
  /* doré métallique du logo : reflets clairs et ombres cuivrées */
  --or-metal: linear-gradient(118deg, #9c6c1c 0%, #d9a93a 18%, #f7e39a 34%, #e0b54a 48%, #b8862a 66%, #f1d47c 84%, #a9771f 100%);
  --or-texte: #85680f;     /* doré lisible sur fond blanc */
  --or-pale: #f1dfa4;
  --vert: #2d6a3e;
  --rouge: #9a3b2b;

  --titre: "Bricolage Grotesque", system-ui, sans-serif;
  --texte: "Figtree", system-ui, sans-serif;

  --marge: clamp(16px, 4vw, 56px);
  --section: clamp(64px, 8vw, 112px);
  --largeur: 1320px;
  --rayon: 18px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete-h, 80px) + 16px); }
body { margin: 0; background: var(--blanc); color: var(--noir); font: 400 1.0625rem/1.6 var(--texte); -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--titre); font-weight: 800; line-height: 1; letter-spacing: -.03em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6.2vw, 5.9rem); letter-spacing: -.035em; line-height: .95; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
h1 em, h2 em { font-style: normal; color: var(--or-texte); }
.sombre h2 em, .sombre h1 em { color: var(--or); }
::selection { background: var(--noir); color: var(--or-pale); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.lead { font-size: clamp(1.1rem, 1.4vw, 1.2rem); color: var(--noir-2); max-width: 46ch; }
.sombre .lead, .sombre p { color: var(--gris-clair); }
.contenu { width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; }
.evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--noir); color: var(--blanc); padding: 10px 16px; border-radius: 8px; }
.evitement:focus { left: 8px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 1rem/1.1 var(--texte); text-decoration: none; padding: 15px 24px; min-height: 48px; border-radius: 999px; border: 1.5px solid var(--noir); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn-plein { background: var(--noir); color: var(--blanc); }
.btn-plein:hover { background: #000; color: var(--or-pale); }
.btn-creux { background: transparent; color: var(--noir); }
.btn-creux:hover { background: var(--noir); color: var(--blanc); }
.btn-or { background: var(--or); border-color: var(--or); color: var(--noir); }
.btn-or:hover { background: var(--or-pale); border-color: var(--or-pale); }
.btn-creux-clair { background: transparent; border-color: rgba(247, 246, 242, .55); color: var(--blanc); }
.btn-creux-clair:hover { background: var(--blanc); color: var(--noir); }
.btn .fleche { color: var(--or); transition: transform .3s var(--ease); }
.btn:hover .fleche { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lien-fleche { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--or); padding-bottom: 2px; }
.lien-fleche:hover { color: var(--or-texte); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 10px var(--marge); background: var(--blanc); box-shadow: 0 1px 0 transparent; transition: box-shadow .35s, padding .35s var(--ease); }
.entete.defile { padding-top: 6px; padding-bottom: 6px; box-shadow: 0 1px 0 var(--blanc-2), 0 12px 32px -20px rgba(20, 19, 18, .28); }
.entete-logo img { height: 60px; width: auto; transition: height .35s var(--ease); }
.entete.defile .entete-logo img { height: 46px; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nav a { display: block; font-weight: 500; text-decoration: none; padding: 10px 12px; border-radius: 8px; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 7px; text-decoration-thickness: 2px; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 7px; text-decoration-thickness: 2px; }
.nav-mobile-seul { display: none; }
.burger { display: none; width: 48px; height: 48px; border: 0; background: none; padding: 12px; cursor: pointer; border-radius: 50%; }
.burger span { display: block; height: 2px; background: var(--noir); margin: 6px 0; transition: transform .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.ariane { padding: 8px var(--marge) 0; font-size: .92rem; color: var(--noir-2); }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ariane li + li::before { content: "/"; margin-right: 6px; color: #a7a49c; }
.ariane a { text-decoration: none; }
.ariane a:hover { text-decoration: underline; }

/* ---------- Accueil : première vue ---------- */
.accueil { overflow: hidden; }
.accueil-texte { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding: clamp(8px, 2vw, 28px) var(--marge) 0; }
.accueil-texte .lead { margin-bottom: 20px; max-width: 36ch; }
.freres { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; padding: 0 clamp(16px, 7vw, 140px); }
.frere { position: relative; display: block; text-decoration: none; }
.frere img { width: 100%; aspect-ratio: 733 / 860; object-fit: cover; object-position: 50% 0; filter: drop-shadow(0 18px 24px rgba(20, 19, 18, .10)); transition: transform .7s var(--ease); transform-origin: 50% 100%; }
.frere:hover img, .frere:focus-visible img { transform: translateY(-10px); }
.frere-carte { position: absolute; left: 50%; bottom: clamp(16px, 3vw, 36px); transform: translateX(-50%); width: max-content; max-width: 92%; text-align: center; background: var(--noir); color: var(--blanc); border-radius: 16px; padding: 11px 20px 12px; box-shadow: 0 12px 28px rgba(20, 19, 18, .22); transition: transform .5s var(--ease); }
.frere:hover .frere-carte { transform: translateX(-50%) translateY(-6px); }
.frere-carte strong { display: block; font: 700 1.25rem/1.1 var(--titre); letter-spacing: -.01em; }
.frere-carte .role { display: block; font-size: .92rem; color: var(--gris-clair); }
.frere-carte .vers { display: block; font-weight: 600; font-size: .9rem; margin-top: 4px; color: var(--or); }

.bandeau { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: center; align-items: center; padding: 15px var(--marge); background: var(--noir); color: #d9d6cd; font-size: .98rem; }
.bandeau a { text-decoration: none; }
.bandeau a:hover { text-decoration: underline; }
.bandeau strong { color: var(--or-pale); font-weight: 600; }
.etoiles { color: var(--or); letter-spacing: 2px; }

/* ---------- Statut d'ouverture ---------- */
.statut { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 0 0 18px; }
.statut .pastille { width: 10px; height: 10px; border-radius: 50%; background: #3f9a5a; box-shadow: 0 0 0 4px rgba(63, 154, 90, .18); flex: none; }
.statut.ferme .pastille { background: #c4614d; box-shadow: 0 0 0 4px rgba(196, 97, 77, .18); }

/* ---------- Sections ---------- */
.section { padding: var(--section) var(--marge); }
.section-tete { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.section-tete h2 { margin: 0; max-width: 18ch; }
.section-tete p { margin: 0; max-width: 42ch; color: var(--noir-2); }
.sombre { background: var(--noir); color: var(--blanc); }

/* ---------- L'étal : produits à étiquettes-piques ---------- */
.bac a { position: relative; display: block; text-decoration: none; }
.bac figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--blanc-2); border-radius: 6px; }
.bac img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.bac a:hover img { transform: scale(1.04); }
.pique { position: absolute; left: 16px; top: -68px; display: flex; flex-direction: column; align-items: flex-start; transform-origin: 18px 100%; transition: transform .35s var(--ease); }
.pique-tag { background: var(--noir); color: var(--blanc); padding: 8px 13px 9px; border-top: 2px solid var(--or); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.pique-tag strong { display: block; font: 700 1.02rem/1.1 var(--titre); }
.pique-tag small { display: block; font-size: .8rem; color: var(--or-pale); margin-top: 2px; }
.pique-tige { width: 3px; height: 36px; margin-left: 18px; background: linear-gradient(90deg, #dcdcd6, #8f908b); }
.rebord { height: 14px; margin: 0 calc(-1 * var(--marge)); background: linear-gradient(180deg, #dcdcd6, #a9aaa5 60%, #8f908b); }

/* ---------- Avis : carrousel ---------- */
.avis { padding: var(--section) 0; }
.avis-tete { display: flex; align-items: end; gap: 16px 40px; flex-wrap: wrap; padding: 0 var(--marge); }
.avis-tete h2 { margin: 0; max-width: 14ch; }
.avis-note { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; color: var(--noir-2); }
.avis-note strong { color: var(--noir); font-weight: 600; }
.avis-nav { display: flex; gap: 10px; margin-left: auto; }
.rond { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--noir); background: transparent; color: var(--noir); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s, opacity .2s; }
.rond:hover { background: var(--noir); color: var(--or-pale); }
.rond:disabled { opacity: .3; cursor: default; background: transparent; color: var(--noir); }
.rond svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.avis-piste { list-style: none; margin: 36px 0 0; padding: 4px var(--marge) 12px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 24vw, 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); scrollbar-width: none; overscroll-behavior-x: contain; }
.avis-piste::-webkit-scrollbar { display: none; }
.avis-carte { scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; background: var(--carte); border: 1px solid var(--blanc-2); border-radius: var(--rayon); padding: 22px 22px 18px; box-shadow: 0 10px 30px rgba(20, 19, 18, .05); }
.avis-carte blockquote { margin: 0; font-size: 1rem; line-height: 1.55; flex: 1; }
.avis-auteur { margin: 0; padding-top: 12px; border-top: 1px solid var(--blanc-2); display: flex; flex-direction: column; }
.avis-auteur strong { font-weight: 600; }
.avis-auteur span { font-size: .9rem; color: var(--noir-2); }
.avis-pied { padding: 0 var(--marge); margin: 16px 0 0; font-size: .95rem; color: var(--noir-2); }
.avis-pied a { color: var(--noir); font-weight: 600; text-decoration-color: var(--or); }

/* ---------- Bloc traiteur (fond noir) ---------- */
.bloc-traiteur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.bloc-traiteur figure, .duo figure { margin: 0; }
.bloc-traiteur img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.etapes { list-style: none; margin: 24px 0 32px; padding: 0; border-top: 1px solid var(--noir-3); counter-reset: etape; }
.etapes li { display: grid; grid-template-columns: 7ch 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--noir-3); }
.etapes strong { font-weight: 600; color: var(--or); }
.etapes span { color: var(--gris-clair); }
.clair .etapes { border-top-color: var(--blanc-2); }
.clair .etapes li { border-bottom-color: var(--blanc-2); }
.clair .etapes strong { color: var(--or-texte); }
.clair .etapes span { color: var(--noir-2); }

/* ---------- Pages intérieures ---------- */
.page-tete { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(24px, 4vw, 56px) var(--marge) var(--section); }
.page-tete h1 { font-size: clamp(2.5rem, 5.4vw, 5rem); }
.page-tete figure { margin: 0; }
.page-tete img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.page-tete .detoure img { aspect-ratio: auto; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(20, 19, 18, .12)); max-height: 640px; margin-inline: auto; width: auto; }
.page-tete-simple { padding: clamp(24px, 4vw, 56px) var(--marge) clamp(40px, 5vw, 64px); max-width: 980px; }
.page-tete-simple h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.duo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 6px; }
.duo.inverse > :first-child { order: 2; }
.texte-riche { max-width: 62ch; }
.texte-riche p, .texte-riche li { color: var(--noir-2); }
.texte-riche strong { color: var(--noir); font-weight: 600; }
.texte-riche ul { padding-left: 1.1em; margin: 0 0 1.2em; }
.texte-riche li { margin-bottom: .45em; }
.texte-riche li::marker { color: var(--or-texte); }
.sombre .texte-riche p, .sombre .texte-riche li { color: var(--gris-clair); }
.sombre .texte-riche strong { color: var(--blanc); }

.liste-filets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--blanc-2); }
.liste-filets li { display: grid; grid-template-columns: minmax(0, 15ch) 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--blanc-2); }
.liste-filets strong { font: 700 1.1rem/1.3 var(--titre); }
.liste-filets span { color: var(--noir-2); }
.sombre .liste-filets { border-top-color: var(--noir-3); }
.sombre .liste-filets li { border-bottom-color: var(--noir-3); }
.sombre .liste-filets span { color: var(--gris-clair); }

/* Équipe */
.equipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.membre { margin: 0; text-align: center; }
.membre img { width: 100%; aspect-ratio: 733 / 900; object-fit: cover; object-position: 50% 0; background: var(--carte); border-radius: var(--rayon); }
.membre figcaption { padding-top: 12px; }
.membre strong { display: block; font: 700 1.2rem/1.2 var(--titre); }
.membre span { color: var(--noir-2); font-size: .95rem; }

/* Chiffre mis en avant */
.chiffre-cle { font: 800 clamp(3rem, 7vw, 5.5rem)/1 var(--titre); letter-spacing: -.04em; color: var(--or); margin: 0; }

/* Questions fréquentes */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--blanc-2); }
.faq details:first-of-type { border-top: 1px solid var(--blanc-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 700 1.15rem/1.3 var(--titre); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--noir); border-bottom: 2px solid var(--noir); transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details p { margin: 0 0 22px; max-width: 70ch; color: var(--noir-2); }

/* ---------- Carte traiteur ---------- */
.carte-nav { position: sticky; top: var(--entete-h, 80px); z-index: 10; display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--marge); background: var(--blanc); border-bottom: 1px solid var(--blanc-2); scrollbar-width: none; transition: top .35s var(--ease); }
.carte-nav::-webkit-scrollbar { display: none; }
.carte-nav a { flex: none; text-decoration: none; font-weight: 500; padding: 8px 16px; border: 1.5px solid var(--blanc-2); border-radius: 999px; background: var(--carte); }
.carte-nav a:hover { border-color: var(--noir); }
.carte-nav a.actif { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.carte-rubrique { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding: clamp(48px, 6vw, 80px) var(--marge); border-bottom: 1px solid var(--blanc-2); }
.carte-rubrique figure { margin: 0; position: sticky; top: calc(var(--entete-h, 80px) + 76px); align-self: start; }
.carte-rubrique figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.carte-rubrique h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.carte-rubrique .intro { color: var(--noir-2); max-width: 52ch; }
.plats { list-style: none; margin: 20px 0 0; padding: 0; }
.plat { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 16px 0; border-bottom: 1px dashed #d7d4cb; }
.plat-nom { font-weight: 600; font-size: 1.08rem; }
.plat-prix { font-weight: 600; white-space: nowrap; text-align: right; }
.plat-desc { grid-column: 1 / -1; color: var(--noir-2); font-size: .97rem; }
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.formule { background: var(--carte); border: 1px solid var(--blanc-2); border-radius: var(--rayon); padding: 22px; }
.formule h3 { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.formule h3 .num { color: var(--or-texte); }
.formule ul { margin: 0; padding-left: 1.1em; color: var(--noir-2); }
.formule li { margin-bottom: .4em; }
.note-carte { color: var(--noir-2); font-size: .95rem; }

/* ---------- Formulaire de devis ---------- */
.devis { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.devis-aside { position: sticky; top: 110px; }
.form { background: var(--carte); border: 1px solid var(--blanc-2); border-radius: var(--rayon); padding: clamp(22px, 3vw, 40px); }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ-large { grid-column: 1 / -1; }
.champ label, .champ legend { font-weight: 600; font-size: .97rem; padding: 0; }
.champ .aide { font-weight: 400; color: var(--noir-2); font-size: .9rem; }
.req { color: var(--rouge); }
fieldset.champ { border: 0; margin: 0; padding: 0; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=date], .form input[type=number], .form textarea {
  font: inherit; color: var(--noir); width: 100%; min-height: 50px; padding: 12px 14px; background: var(--blanc); border: 1.5px solid #d9d6cd; border-radius: 12px; transition: border-color .2s, background .2s; }
.form textarea { min-height: 130px; resize: vertical; }
.form input:hover, .form textarea:hover { border-color: #b9b5aa; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--noir); background: var(--carte); box-shadow: 0 0 0 3px rgba(207, 168, 58, .35); }
.form ::placeholder { color: #8a877f; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.choix label { position: relative; cursor: pointer; }
.choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix span { display: inline-block; padding: 10px 16px; border: 1.5px solid #d9d6cd; border-radius: 999px; font-weight: 500; font-size: .95rem; background: var(--blanc); transition: background .2s, color .2s, border-color .2s; }
.choix input:checked + span { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.choix input:focus-visible + span { outline: 3px solid var(--or); outline-offset: 2px; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mention-rgpd { font-size: .88rem; color: var(--noir-2); margin: 18px 0; }
.alerte { border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; }
.alerte-erreur { background: #fbeae6; color: #6d2416; border: 1px solid #efc3b8; }
.alerte ul { margin: 6px 0 0; padding-left: 1.2em; }

/* ---------- Bloc « Venir en boutique » ---------- */
.visite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); padding: var(--section) var(--marge); background: var(--noir); color: var(--blanc); }
.visite h2 { margin-bottom: .4em; }
.visite p { color: var(--gris-clair); max-width: 42ch; }
.visite .statut { color: var(--blanc); }
.visite-infos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; }
.visite h3 { font-size: 1.05rem; color: var(--or); margin-bottom: 14px; letter-spacing: 0; }
.horaires { margin: 0; }
.horaires div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--noir-3); }
.horaires dt { font-weight: 500; }
.horaires dd { margin: 0; color: var(--gris-clair); text-align: right; }
.visite address { font-style: normal; line-height: 1.8; color: var(--gris-clair); }
.visite address a { color: var(--blanc); }

/* ---------- Pied de page ---------- */
.pied { background: #0c0b0b; color: var(--gris-clair); padding: 56px var(--marge) 24px; font-size: .97rem; }
.pied-haut { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: start; padding-bottom: 32px; border-bottom: 1px solid #2a2926; }
.pied-logo img { width: 96px; height: auto; }
.pied-resume { max-width: 36ch; margin: 0; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: var(--blanc); text-decoration: none; }
.pied a:hover { text-decoration: underline; text-decoration-color: var(--or); }
.pied-contact { margin: 0; line-height: 1.9; }
.pied-bas { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; font-size: .9rem; }
.pied-bas p { margin: 0; }

/* ---------- Pages simples (merci, 404, légal) ---------- */
.page-simple { padding: clamp(40px, 6vw, 96px) var(--marge) var(--section); max-width: 880px; }
.page-simple h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 1.6em; }
.page-simple p, .page-simple li { color: var(--noir-2); }
.code-erreur { font: 800 clamp(5rem, 14vw, 9rem)/1 var(--titre); color: var(--or-texte); margin: 0 0 12px; letter-spacing: -.05em; }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 1100px) {
  .pied-haut { grid-template-columns: auto 1fr; }
  .equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .burger { display: block; margin-left: auto; }
  .entete-devis { display: none; }
  .entete-logo img { height: 52px; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; background: var(--blanc); border-bottom: 1px solid var(--blanc-2); padding: 8px var(--marge) 24px; box-shadow: 0 20px 40px rgba(20, 19, 18, .12); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .3s var(--ease), visibility .25s; }
  .nav.ouvert { opacity: 1; transform: none; visibility: visible; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { font: 700 1.4rem/1.2 var(--titre); padding: 14px 0; border-bottom: 1px solid var(--blanc-2); border-radius: 0; }
  .nav-mobile-seul { display: block; }
  .nav-mobile-seul a { color: var(--or-texte); border-bottom: 0; }
  .accueil-texte, .page-tete, .bloc-traiteur, .duo, .devis, .visite, .carte-rubrique { grid-template-columns: 1fr; }
  .duo.inverse > :first-child { order: 0; }
  .devis-aside, .carte-rubrique figure { position: static; }
  .carte-rubrique figure img { aspect-ratio: 16 / 9; }
  .page-tete figure { order: -1; }
  .page-tete img { aspect-ratio: 4 / 3; }
  .freres { padding: 0 4px; margin-top: 28px; }
  .frere-carte { position: relative; left: auto; bottom: auto; transform: none; display: block; width: auto; max-width: none; margin: -26px 4px 16px; padding: 8px 4px; border-radius: 12px; }
  .frere:hover .frere-carte { transform: none; }
  .frere-carte strong { font-size: 1rem; }
  .frere-carte .role { display: none; }
  .frere-carte .vers { font-size: .8rem; }
  .avis-piste { grid-auto-columns: 82vw; }
  .avis-nav { display: none; }
  .visite-infos { grid-template-columns: 1fr; }
  .champs { grid-template-columns: 1fr; }
  .liste-filets li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 560px) {
  .pied-haut { grid-template-columns: 1fr; }
  .equipe { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* plus de déplacement : les animations sautent à leur état final, seules les transitions
     d'opacité et de couleur restent (elles aident à comprendre ce qui change) */
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, box-shadow !important; }
}


/* =========================================================
   Signature dorée (v2) : ornement du logo, touches d'or
   ========================================================= */

/* Portrait détouré posé sur un fond de studio sobre (pages intérieures) */
.studio { position: relative; isolation: isolate; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; border-radius: var(--rayon); background: radial-gradient(120% 90% at 50% 100%, #e3e0d6 0%, #ecebe5 55%, #f1f0ea 100%); aspect-ratio: 4 / 5; margin: 0; }
.page-tete .studio img { width: 86%; max-height: none; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; filter: drop-shadow(0 20px 26px rgba(20, 19, 18, .16)); margin-bottom: -2px; }

/* Mot-clé du titre souligné d'un trait d'or métallique */
h1 em { background: var(--or-metal) no-repeat 0 92% / 100% .09em; padding-bottom: .02em; }

/* Ornement du logo (couperets et volutes) */

/* Touches d'or */
.bandeau { border-top: 2px solid transparent; border-bottom: 2px solid transparent; background: linear-gradient(var(--noir), var(--noir)) padding-box, var(--or-metal) border-box; }
.pique-tag { border-top: 0; position: relative; }
.pique-tag::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--or-metal); }
.btn-or, .traiteur .btn-or { background: var(--or-metal); border-color: transparent; background-size: 160% 100%; background-position: 0 0; transition: background-position .6s var(--ease), color .2s; }
.btn-or:hover { background: var(--or-metal); background-size: 160% 100%; background-position: 100% 0; color: var(--noir); }
.btn-plein .fleche, .btn-plein:hover { color: var(--or-pale); }
.sombre .etapes strong, .visite h3 { color: var(--or); }

/* Piques : la tige passe derrière la photo, comme plantée dans le produit */
.bac figure { position: relative; z-index: 1; }
.pique { z-index: 0; }
.pique-tige { height: 40px; }

/* Lecture plus confortable sur fond noir */
.sombre p, .sombre .lead, .sombre .liste-filets span, .sombre .etapes span { color: var(--gris-clair); }
.sombre .liste-filets span { font-size: 1.05rem; line-height: 1.65; }

/* Photo du comptoir (boucherie) : cadrée sur le visage */
.cadre-portrait img { aspect-ratio: 4 / 5; object-position: 50% 18%; }

/* ---------- Formules mises en avant (fond noir, prix en or) ---------- */
.formules { gap: 18px; }
.formule { position: relative; overflow: hidden; background: var(--noir); color: var(--blanc); border: 1px solid #3a352a; border-radius: var(--rayon); padding: 30px 26px 26px; box-shadow: 0 24px 50px -30px rgba(20, 19, 18, .6); }
.formule h3 { display: block; margin: 0 0 4px; font-size: 1.35rem; }
.formule .formule-prix { display: block; font: 800 2.1rem/1.1 var(--titre); letter-spacing: -.02em; color: var(--or); margin: 6px 0 2px; white-space: nowrap; }
.formule .formule-unite { display: block; font-size: .9rem; color: var(--gris-clair); margin-bottom: 16px; }
.formule ul { list-style: none; padding: 16px 0 0; margin: 0; border-top: 1px solid var(--noir-3); color: var(--gris-clair); }
.formule li { position: relative; padding-left: 18px; margin-bottom: .55em; line-height: 1.5; }
.formule li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--or); }

/* ---------- Carte : lecture fluide ---------- */
.plat { grid-template-columns: 1fr auto; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--blanc-2); }
.plat-nom { font-weight: 500; font-size: 1.06rem; }
.plat-prix { font-weight: 600; color: var(--or-texte); white-space: nowrap; }
.plat-desc { font-size: .96rem; line-height: 1.55; margin-top: 2px; }
.carte-rubrique .intro { font-size: 1.08rem; }

/* ---------- Pied de page compact (logo or et blanc) ---------- */
.pied { background: #0c0b0b; color: var(--gris-clair); padding: 44px var(--marge) 18px; font-size: .96rem; border-top: 2px solid transparent; background: linear-gradient(#0c0b0b, #0c0b0b) padding-box, var(--or-metal) border-box; }
.pied-grille { display: grid; grid-template-columns: auto minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr); gap: 28px 52px; align-items: start; padding-bottom: 26px; border-bottom: 1px solid #2a2926; }
.pied-logo img { width: 140px; height: auto; }
.pied-titre { font: 700 .95rem/1.2 var(--texte); letter-spacing: .02em; color: var(--or); margin: 0 0 12px; }
.pied .statut { color: var(--blanc); margin: 14px 0 0; font-size: .95rem; }
.horaires-mini { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; }
.horaires-mini dt { color: var(--blanc); font-weight: 500; }
.horaires-mini dd { margin: 0; }
.horaires-mini .plage { white-space: nowrap; }
.pied address { font-style: normal; line-height: 1.75; overflow-wrap: anywhere; }
.pied .actions { margin-top: 14px; }
.pied .btn { min-height: 42px; padding: 10px 18px; font-size: .92rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pied a { color: var(--blanc); text-decoration: none; }
.pied a:hover { text-decoration: underline; text-decoration-color: var(--or); }
.pied .btn-or { color: var(--noir); }
.pied-bas { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; font-size: .88rem; }
.pied-bas p { margin: 0; }

@media (max-width: 1100px) {
  .pied-grille { grid-template-columns: auto 1fr; }
}
@media (max-width: 900px) {
  .page-tete .studio { max-width: 420px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
  .pied-grille { grid-template-columns: 1fr; gap: 24px; }
  .pied-logo img { width: 120px; }
}

/* =========================================================
   Mouvement (v3) : transitions entre pages, récit, révélations
   Tout reste visible sans JavaScript ; rien ne bouge si
   « réduire les animations » est activé.
   ========================================================= */

/* Transitions entre pages : fondu court, en-tête fixe, portraits qui glissent d'une page à l'autre */
@view-transition { navigation: auto; }
.entete { view-transition-name: entete; }
::view-transition-group(*) { animation-duration: .65s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(root) { animation: .2s cubic-bezier(.23, 1, .32, 1) both vt-sortie; }
::view-transition-new(root) { animation: .55s cubic-bezier(.16, 1, .3, 1) .05s both vt-entree; }
@keyframes vt-sortie { to { opacity: 0; } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(14px); } }



/* Récit « Du comptoir à votre table » : le texte défile, la photo reste et change */
.recit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); padding: var(--section) var(--marge); }
.recit h2 { margin-bottom: clamp(24px, 4vw, 48px); }
.recit-etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.recit-etape { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 28px; border-left: 2px solid var(--blanc-2); position: relative; transition: border-color .5s; }
.recit-etape::before { counter-increment: etape; content: "0" counter(etape); display: block; margin-bottom: 14px; font: 600 .9rem/1 var(--texte); color: var(--or-texte); letter-spacing: .08em; }
.recit-etape::after { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--or-metal); transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease); }
.recit-etape.actif::after { transform: scaleY(1); }
.recit-etape h3 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: .4em; transition: color .5s; }
.recit-etape p { max-width: 38ch; font-size: 1.12rem; color: var(--noir-2); margin: 0; }
.js .recit-etape:not(.actif) h3, .js .recit-etape:not(.actif) p { color: #77746d; }
.recit-visuel { position: sticky; top: 96px; height: calc(100vh - 140px); max-height: 760px; align-self: start; border-radius: var(--rayon); overflow: hidden; background: var(--noir); }
.recit-img { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease); }
.recit-img.actif { clip-path: inset(0 0 0 0); z-index: 1; }
.recit-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.recit-img.actif img { transform: scale(1); }
.recit-compteur { position: absolute; z-index: 2; right: 18px; bottom: 16px; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(20, 19, 18, .72); color: var(--or-pale); font-size: .9rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.recit-img-mobile { display: none; }

/* Révélations au défilement (seulement si JS et page visible) */
.revelation [data-reveal="image"] { clip-path: inset(14% 0 0 0 round 6px); transition: clip-path 1.1s var(--ease); }
.revelation [data-reveal="image"] img { transform: scale(1.1); transition: transform 1.6s var(--ease); }
.revelation [data-reveal="image"].vu { clip-path: inset(0 0 0 0 round 6px); }
.revelation [data-reveal="image"].vu img { transform: none; }
/* Étiquettes-piques : plantées une à une dans les produits */
@keyframes plante {
  0% { opacity: 0; transform: translateY(-26px) rotate(-9deg); }
  55% { opacity: 1; transform: translateY(2px) rotate(calc(var(--rot, 0deg) + 2.5deg)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }
}

@media (max-width: 900px) {
  .recit { grid-template-columns: 1fr; }
  .recit-visuel { display: none; }
  .recit-etape { min-height: 0; padding: 0 0 40px 20px; }
  .recit-img-mobile { display: block; margin: 0 0 18px; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; }
  .recit-img-mobile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
  .js .recit-etape:not(.actif) h3, .js .recit-etape:not(.actif) p { color: inherit; }
  .recit-etape p { color: var(--noir-2); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .recit-img { clip-path: none; opacity: 0; transition: opacity .4s; }
  .recit-img.actif { opacity: 1; }
}

/* =========================================================
   Calibrage (v4) : une seule grille, un seul système d'images
   ========================================================= */
:root {
  /* marge latérale qui centre le contenu sur 1320 px max, quel que soit l'écran */
  --gouttiere: max(var(--marge), calc((100vw - var(--largeur)) / 2));
  --rayon-photo: 10px;
}
.entete, .ariane, .accueil-texte, .section, .page-tete, .page-tete-simple, .recit,
.avis-tete, .avis-pied, .carte-nav, .carte-rubrique, .pied { padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
.page-tete-simple { max-width: none; }
.page-tete-simple > * { max-width: 980px; }
.avis-piste { padding-left: var(--gouttiere); padding-right: var(--gouttiere); scroll-padding-inline: var(--gouttiere); }
.page-simple { padding-left: var(--gouttiere); max-width: calc(880px + var(--gouttiere)); }
.contenu { width: 100%; max-width: var(--largeur); margin-inline: auto; }


/* Photos : mêmes proportions et mêmes angles partout */
.duo figure, .bloc-traiteur figure, .page-tete figure:not(.studio) { border-radius: var(--rayon-photo); overflow: hidden; }
.duo img, .bloc-traiteur img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.cadre-portrait img { aspect-ratio: 4 / 3; object-position: 50% 24%; }
.bac figure, .carte-rubrique figure img, .recit-img-mobile, .membre img { border-radius: var(--rayon-photo); }
.revelation [data-reveal="image"] { clip-path: inset(14% 0 0 0 round var(--rayon-photo)); }
.revelation [data-reveal="image"].vu { clip-path: inset(0 0 0 0 round var(--rayon-photo)); }

/* En-têtes de pages : texte et visuel à la même hauteur, visuel de taille fixe */
.page-tete { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; padding-top: clamp(16px, 3vw, 40px); }
.page-tete .studio { width: 100%; max-width: 460px; justify-self: end; }
.page-tete figure:not(.studio) { width: 100%; justify-self: end; }
.page-tete figure:not(.studio) img { aspect-ratio: 3 / 2; border-radius: 0; }
.h1-lieu { display: block; font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--noir-2); margin-bottom: .5em; }

/* Récit : photo fixe centrée dans l'écran, hauteur maîtrisée */
.recit-visuel { top: 14vh; height: min(72vh, 660px); }

/* ---------- La vitrine qu'on longe ---------- */
.vitrine { position: relative; }
.vitrine-scene { padding-top: var(--section); }
.vitrine .section-tete { padding-inline: var(--gouttiere); margin-bottom: 0; }
.vitrine-cadre { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); overscroll-behavior-x: contain; }
.vitrine-cadre::-webkit-scrollbar { display: none; }
.vitrine-piste { list-style: none; margin: 0; display: flex; gap: 14px; width: max-content; padding: 100px var(--gouttiere) 0; }
.vitrine .bac { flex: none; width: clamp(230px, 23vw, 330px); scroll-snap-align: start; }
.vitrine .bac figure { aspect-ratio: 4 / 5; }
.vitrine .bac img { transform: scale(1.1); transition: transform 240ms var(--ease-out); }
.vitrine .bac a:hover img { transform: scale(1.15); }
.pique { transform: rotate(var(--rot, 0deg)); }
.vitrine .bac:nth-child(3n+2) { --rot: -2deg; }
.vitrine .bac:nth-child(3n) { --rot: 1.5deg; }
.bac a:hover .pique, .bac a:focus-visible .pique { transform: translateY(-6px) rotate(0deg); }
.bac-fin a { display: flex; align-items: flex-end; aspect-ratio: 4 / 5; padding: 26px; border-radius: var(--rayon-photo); background: var(--noir); color: var(--blanc); text-decoration: none; transition: background .3s; }
.bac-fin a:hover { background: #000; }
.bac-fin-texte strong { display: block; font: 800 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--titre); letter-spacing: -.03em; margin-bottom: 10px; }
.bac-fin-texte > span { display: block; color: var(--gris-clair); font-size: .98rem; }
.bac-fin-texte .fleche { color: var(--or); font-size: 1.8rem; margin-top: 16px; transition: transform .4s var(--ease); }
.bac-fin a:hover .fleche { transform: translateX(6px); }
.vitrine .rebord { position: relative; margin: 0; }
.rebord-progression { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--or-metal); transform-origin: left center; transform: scaleX(0); opacity: 0; transition: opacity .4s; }

/* Version « on longe le comptoir » : ordinateur, mouvement autorisé */
.vitrine.vitrine-active { height: var(--hauteur-vitrine, auto); }
.vitrine.vitrine-active .vitrine-scene { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 40px; overflow: hidden; }
.vitrine.vitrine-active .vitrine-cadre { overflow: visible; scroll-snap-type: none; }
.vitrine.vitrine-active .vitrine-piste { will-change: transform; }
.vitrine.vitrine-active .vitrine-piste, .vitrine.vitrine-active .bac img { transition: none; }
.vitrine.vitrine-active .bac a:hover img { transform: scale(1.14); transition: transform 240ms var(--ease-out); }
.vitrine.vitrine-active .rebord-progression { opacity: 1; }
/* Étiquettes plantées une à une quand le produit arrive */
.vitrine.js-vitrine .bac:not(.bac-fin):not(.vu) .pique { opacity: 0; transform: translateY(-26px) rotate(-9deg); }
.vitrine.js-vitrine .bac.vu .pique { animation: plante .9s var(--ease) both; }

@media (max-width: 900px) {
  .vitrine .bac { width: 64vw; }
  .page-tete .studio { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .vitrine .bac img, .vitrine .bac a:hover img { transform: none; }
}

.liste-filets span { max-width: 68ch; }

/* =========================================================
   Finitions (v5) : photos qui filent jusqu'au bord, profondeur,
   fonds noirs moins plats, détails de lecture
   ========================================================= */
p, li, dd { text-wrap: pretty; }

/* Photos des sections : l'image file jusqu'au bord de l'écran, le texte reste dans la grille */
@media (min-width: 901px) {
  .duo > figure, .bloc-traiteur > figure { border-radius: var(--rayon-photo); overflow: hidden; }
  .duo:not(.inverse) > figure { margin-left: calc(-1 * var(--gouttiere)); border-radius: 0 var(--rayon-photo) var(--rayon-photo) 0; }
  .duo.inverse > figure, .bloc-traiteur > figure { margin-right: calc(-1 * var(--gouttiere)); border-radius: var(--rayon-photo) 0 0 var(--rayon-photo); }
  .duo > figure img, .bloc-traiteur > figure img { aspect-ratio: 5 / 4; }
  /* la révélation ne doit pas arrondir le bord qui touche l'écran */
  .revelation .duo > [data-reveal="image"], .revelation .bloc-traiteur > [data-reveal="image"] { clip-path: inset(14% 0 0 0); }
  .revelation .duo > [data-reveal="image"].vu, .revelation .bloc-traiteur > [data-reveal="image"].vu { clip-path: inset(0); }
}

/* Profondeur douce sous les photos posées sur fond clair */
.section:not(.sombre) .duo > figure, .page-tete figure:not(.studio), .recit-visuel, .recit-img-mobile { box-shadow: 0 28px 56px -34px rgba(20, 19, 18, .45); }
.page-tete .studio { box-shadow: inset 0 0 0 1px rgba(20, 19, 18, .05); }

/* Fonds noirs : léger dégradé chaud, moins plat qu'un aplat */
.sombre, .bandeau, .formule, .bac-fin a { background-color: var(--noir); }
.section.sombre { background: linear-gradient(180deg, #1a1816 0%, var(--noir) 38%, var(--noir) 100%); }

/* Rebord du comptoir : inox brossé, reflet en haut */
.rebord { height: 12px; background: linear-gradient(180deg, #f2f1ec 0%, #d6d5cf 18%, #b8b8b2 55%, #9c9d98 82%, #c4c4bf 100%); box-shadow: 0 6px 14px -8px rgba(20, 19, 18, .35); }

/* Boutons : un cran de relief au survol */
.btn { transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(20, 19, 18, .5); }
.btn:active { transform: none; box-shadow: none; }

/* Fil d'Ariane et textes secondaires : un gris plus chaud */
.ariane, .ariane li + li::before { color: #6f6c64; }

/* Listes à filets : le libellé en or sur fond noir, net sur fond clair */
.sombre .liste-filets strong { color: var(--or-pale); }

/* Hauts de page sur mobile : une seule colonne, le visuel au-dessus du titre */
@media (max-width: 900px) {
  .page-tete { grid-template-columns: 1fr; }
  .page-tete figure:not(.studio) { justify-self: stretch; }
}

/* =========================================================
   Demande de devis en trois étapes
   ========================================================= */
.devis-etapes { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.devis-etapes li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; color: #6f6c64; padding-top: 10px; border-top: 2px solid var(--blanc-2); transition: color .3s, border-color .3s; }
.devis-etapes li .num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; font-size: .85rem; }
.devis-etapes li.actif { color: var(--noir); border-top-color: var(--noir); }
.devis-etapes li.fait { color: var(--or-texte); border-top-color: var(--or); }
.devis-etapes li.fait .num { background: var(--or); border-color: var(--or); color: var(--noir); }
html:not(.js) .devis-etapes { display: none; }

.etape { border: 0; margin: 0; padding: 0; min-width: 0; }
.etape + .etape { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--blanc-2); }
.etape-titre { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 18px; font: 800 1.5rem/1.1 var(--titre); letter-spacing: -.02em; }
.etape-num { width: 34px; height: 34px; border-radius: 50%; background: var(--noir); color: var(--or-pale); display: grid; place-items: center; font: 700 1rem/1 var(--texte); }
.etape-intro { color: var(--noir-2); margin-bottom: 14px; }
.etape-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.etape-actions .btn-plein { margin-left: auto; }
.js .devis-form .etape:not(.actif) { display: none; }
.js .devis-form .etape + .etape { margin-top: 0; padding-top: 0; border-top: 0; }
.js .devis-form .etape-num { display: none; }
html:not(.js) [data-suivant], html:not(.js) [data-precedent] { display: none; }
.devis-form [hidden] { display: none; }

/* Choix de l'événement : cartes à deux lignes */
.choix-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choix-cartes label { display: block; }
.choix-cartes span { display: block; width: 100%; border-radius: 14px; padding: 13px 16px; }
.choix-cartes strong { display: block; font-weight: 600; }
.choix-cartes small { display: block; font-size: .85rem; color: var(--noir-2); margin-top: 2px; line-height: 1.4; }
.choix-cartes input:checked + span small { color: var(--gris-clair); }
.choix-simple { display: flex; gap: 10px; align-items: center; font-weight: 500; margin: 0 0 16px; cursor: pointer; }
.choix-simple input { width: 20px; height: 20px; accent-color: var(--noir); margin: 0; flex: none; }

/* Le menu, repris de la carte */
.menu-rubriques { border-top: 1px solid var(--blanc-2); }
.menu-rubrique { border-bottom: 1px solid var(--blanc-2); }
.menu-rubrique summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 0; font: 700 1.1rem/1.3 var(--titre); letter-spacing: -.01em; }
.menu-rubrique summary::-webkit-details-marker { display: none; }
.menu-rubrique summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--noir); border-bottom: 2px solid var(--noir); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease); }
.menu-rubrique[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.menu-compte { margin-left: auto; font: 500 .85rem/1 var(--texte); color: var(--or-texte); }
.menu-note { font-size: .9rem; color: var(--noir-2); margin: 0 0 8px; }
.menu-plats { list-style: none; margin: 0 0 14px; padding: 0; }
.menu-plat { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px dashed #e4e1d8; }
.menu-choix { display: flex; gap: 12px; align-items: flex-start; flex: 1; min-width: 0; cursor: pointer; }
.menu-choix input { width: 20px; height: 20px; accent-color: var(--noir); margin: 2px 0 0; flex: none; }
.menu-nom { font-weight: 500; }
.menu-nom small { display: block; font-weight: 400; font-size: .86rem; color: var(--noir-2); line-height: 1.4; }
.menu-qte { display: flex; align-items: center; gap: 6px; flex: none; transition: opacity .2s; }
.form .menu-qte input { width: 68px; min-height: 40px; padding: 6px 8px; text-align: center; border-radius: 10px; }
.menu-plat:not(.choisi) .menu-qte { opacity: .45; }
.menu-unite { font-size: .85rem; color: var(--noir-2); min-width: 3.2em; }
.menu-lien { font-size: .92rem; color: var(--noir-2); margin: 16px 0 0; }
.devis-recap { background: var(--blanc); border: 1px solid var(--blanc-2); border-radius: 12px; padding: 12px 16px; font-size: .95rem; margin: 0 0 18px; color: var(--noir-2); }
.devis-recap strong { color: var(--noir); }

@media (max-width: 560px) {
  .choix-cartes { grid-template-columns: 1fr; }
  .devis-etapes li { font-size: .78rem; gap: 6px; }
  .menu-plat { flex-wrap: wrap; }
  .menu-qte { margin-left: 32px; }
}

/* =========================================================
   Direction « façon Apple » (v6) : un seul langage de mouvement,
   des retours immédiats, un haut de page mis en scène.
   ========================================================= */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);      /* entrées, sorties, réponses */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);  /* ce qui se déplace à l'écran */
  --ease: var(--ease-out);
  --duree-appui: 160ms;
  --duree-survol: 200ms;
  --duree-ui: 240ms;
  --section: clamp(72px, 9vw, 136px);
}

/* ---------- Typographie : l'approche suit la taille ---------- */
body { letter-spacing: -.003em; }
h2 { letter-spacing: -.032em; line-height: 1.02; }
h3 { letter-spacing: -.018em; }
small, .aide, .ariane, .avis-auteur span, .menu-nom small, .plat-desc, .frere-carte .role { letter-spacing: .005em; }
.lead { line-height: 1.55; }

/* ---------- En-tête : verre dépoli dense, hauteur fixe ---------- */
.entete { padding-top: 8px; padding-bottom: 8px; background: rgba(247, 246, 242, .86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); transition: box-shadow var(--duree-ui) var(--ease-out); }
.entete.defile { padding-top: 8px; padding-bottom: 8px; box-shadow: 0 1px 0 rgba(20, 19, 18, .07), 0 10px 30px -22px rgba(20, 19, 18, .35); }
.entete-logo img, .entete.defile .entete-logo img { height: 52px; transform-origin: left center; transition: transform var(--duree-ui) var(--ease-out); }
.entete.defile .entete-logo img { transform: scale(.88); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .entete { background: var(--blanc); } }
@media (prefers-reduced-transparency: reduce) { .entete { background: var(--blanc); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .entete { background: var(--blanc); box-shadow: 0 1px 0 var(--noir); } }

/* ---------- Retours : survol bref, appui immédiat ---------- */
.btn { transition: background-color var(--duree-survol) ease, color var(--duree-survol) ease, border-color var(--duree-survol) ease, transform var(--duree-appui) var(--ease-out); }
.btn:hover { transform: none; box-shadow: none; }
.btn .fleche, .bac-fin-texte .fleche { transition: transform var(--duree-survol) var(--ease-out); }
.btn-or, .traiteur .btn-or { background-size: 100% 100%; background-position: 0 0; transition: filter var(--duree-survol) ease, transform var(--duree-appui) var(--ease-out); }
.btn-or:hover { background-size: 100% 100%; background-position: 0 0; filter: brightness(1.07) saturate(1.05); }
.btn:active, .rond:active { transform: scale(.97); }
.rond { transition: background-color var(--duree-survol) ease, color var(--duree-survol) ease, opacity var(--duree-survol) ease, transform var(--duree-appui) var(--ease-out); }
.choix span, .carte-nav a { transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform var(--duree-appui) var(--ease-out); }
.choix label:active span, .carte-nav a:active { transform: scale(.97); }
.frere-carte { transition: transform var(--duree-ui) var(--ease-out); }
.pique { transition: transform var(--duree-survol) var(--ease-out); }
.bac img { transition: transform var(--duree-ui) var(--ease-out); }
.burger span, .faq summary::after, .menu-rubrique summary::after { transition: transform var(--duree-ui) var(--ease-out); }
.frere:active img { transform: scale(.985); }

/* Les survols qui déplacent quelque chose : seulement avec une souris (au doigt, ils restent « collés ») */
@media (hover: none), (pointer: coarse) {
  .frere:hover img, .frere:focus-visible img, .bac a:hover img, .vitrine .bac a:hover img,
  .btn:hover .fleche, .bac-fin a:hover .fleche { transform: none; }
  .vitrine .bac a:hover img { transform: scale(1.1); }
  .bac a:hover .pique { transform: rotate(var(--rot, 0deg)); }
}
@media ((hover: none) or (pointer: coarse)) and (min-width: 901px) {
  .frere:hover .frere-carte { transform: translateX(-50%); }
}
@media (hover: hover) and (pointer: fine) {
  .accueil:not(.en-scene) .freres:has(.frere:hover) .frere:not(:hover) img { opacity: .5; }
}

/* ---------- Ouvertures douces (FAQ, rubriques du devis) ---------- */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content, .menu-rubrique::details-content {
    block-size: 0; overflow: clip;
    transition: block-size 280ms var(--ease-out), content-visibility 280ms allow-discrete;
  }
  .faq details[open]::details-content, .menu-rubrique[open]::details-content { block-size: auto; }
}

/* ---------- Étapes du devis : on avance vers la gauche, on revient vers la droite ---------- */
.js .devis-form .etape.actif { animation: etape-avance var(--duree-ui) var(--ease-out) both; }
.js .devis-form.retour .etape.actif { animation-name: etape-revient; }
@keyframes etape-avance { from { opacity: 0; transform: translateX(14px); } }
@keyframes etape-revient { from { opacity: 0; transform: translateX(-14px); } }

/* =========================================================
   Haut de page : les frères en scène
   ========================================================= */
.freres .frere img { transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out); }

/* Titre : chaque mot monte de derrière un masque */
.titre-mots .mot { display: inline-block; overflow: hidden; overflow: clip; vertical-align: bottom; padding: 0 .03em .16em; margin: 0 -.03em -.16em; }
.titre-mots .mot > span { display: inline-block; }

/* Séquence d'arrivée (une fois par visite, voir site.js) :
   le titre mène, le texte et les boutons le suivent en chevauchement,
   Baptiste au centre monte le premier, puis la vague s'ouvre vers les côtés.
   Écarts décroissants : la séquence se lit comme un geste, pas comme une file. */
.intro .titre-mots .mot > span { animation: mot-monte 780ms var(--ease-out) both; }
.intro .titre-mots .mot:nth-child(2) > span { animation-delay: 45ms; }
.intro .titre-mots .mot:nth-child(3) > span { animation-delay: 85ms; }
.intro .titre-mots .mot:nth-child(4) > span { animation-delay: 120ms; }
.intro .titre-mots .mot:nth-child(5) > span { animation-delay: 150ms; }
.intro .titre-mots .mot:nth-child(6) > span { animation-delay: 175ms; }
.intro .titre-mots .mot:nth-child(7) > span { animation-delay: 195ms; }
.intro .titre-mots .mot:nth-child(8) > span { animation-delay: 210ms; }
.intro .titre-mots em { background-size: 0% .09em; animation: trait-or 620ms var(--ease-out) 560ms forwards; }
.intro .accueil-texte > div:not(.chapitres) { animation: fondu-monte 640ms var(--ease-out) 240ms both; }
.intro .frere img { animation: frere-monte 920ms var(--ease-out) both; }
.intro .frere:nth-child(2) img { animation-delay: 160ms; }
.intro .frere:nth-child(1) img { animation-delay: 250ms; }
.intro .frere:nth-child(3) img { animation-delay: 310ms; }
.intro .frere-carte { animation: carte-apparait 420ms var(--ease-out) both; }
.intro .frere:nth-child(2) .frere-carte { animation-delay: 640ms; }
.intro .frere:nth-child(1) .frere-carte { animation-delay: 720ms; }
.intro .frere:nth-child(3) .frere-carte { animation-delay: 770ms; }
@keyframes mot-monte { from { transform: translateY(112%); } }
@keyframes trait-or { to { background-size: 100% .09em; } }
@keyframes fondu-monte { from { opacity: 0; transform: translateY(12px); } }
/* sans opacité : les portraits sont visibles dès la première image (meilleur temps d'affichage pour Google) */
@keyframes frere-monte { from { transform: translateY(64px); } }
@keyframes carte-apparait { from { opacity: 0; } }

/* La scène figée (ordinateur, mouvement autorisé ; activée par site.js) */
.chapitres { display: none; }
.accueil.scene-active { height: 300vh; overflow: visible; overflow: clip; }
.scene-active .scene { position: sticky; top: var(--entete-h, 68px); height: calc(100vh - var(--entete-h, 68px)); display: flex; flex-direction: column; }
.scene-active .accueil-texte { flex: none; }
.scene-active .accueil-texte > h1, .scene-active .chapitres { grid-column: 1; grid-row: 1; }
.scene-active .titre-mots { will-change: opacity, transform; }
.scene-active .freres { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 56px); padding: 18px var(--gouttiere) 0; }
.scene-active .frere { height: 100%; display: flex; align-items: flex-end; transform-origin: 50% 100%; transition: opacity 420ms var(--ease-out), transform 560ms var(--ease-out); }
.scene-active .frere img { height: 100%; width: auto; max-width: 28vw; }

/* Les chapitres prennent la place du titre, dans la même case de la grille */
.scene-active .chapitres { display: grid; align-self: stretch; align-content: end; pointer-events: none; }
.chapitre { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(6px);
  transition: opacity var(--duree-ui) var(--ease-out), transform var(--duree-ui) var(--ease-out), filter var(--duree-ui) var(--ease-out); }
.chapitre.actif { opacity: 1; transform: none; filter: blur(0); transition-duration: 560ms; transition-delay: 90ms; }
.chapitre-titre { display: block; font: 800 clamp(2.6rem, 5.6vw, 5.4rem)/.95 var(--titre); letter-spacing: -.038em; color: var(--noir); }
.chapitre-titre em { font-style: normal; color: var(--or-texte); }
.chapitre-texte { display: block; margin-top: 18px; max-width: 40ch; font-size: 1.15rem; line-height: 1.55; color: var(--noir-2); }
.chapitres-points { grid-area: 2 / 1; display: flex; gap: 6px; margin-top: 24px; opacity: 0; transition: opacity var(--duree-ui) var(--ease-out); }
.chapitres-points span { width: 28px; height: 3px; border-radius: 3px; background: #dcd9cf; transition: background-color var(--duree-ui) ease; }
.en-scene .chapitres-points { opacity: 1; }
.accueil[data-chapitre="1"] .chapitres-points span:nth-child(1),
.accueil[data-chapitre="2"] .chapitres-points span:nth-child(2),
.accueil[data-chapitre="3"] .chapitres-points span:nth-child(3) { background: var(--or); }

/* Le frère du chapitre s'avance, les deux autres reculent */
.accueil.en-scene .frere { opacity: .26; transform: scale(.965); }
.accueil.en-scene .frere.en-avant { opacity: 1; transform: scale(1.025); }
.accueil.en-scene .frere.en-avant img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .chapitre { filter: none; }
}

/* Récit : photo plus contenue, le texte reprend la place principale */
@media (min-width: 901px) {
  .recit-visuel { top: calc(var(--entete-h, 68px) + 9vh); height: min(60vh, 540px); width: 100%; max-width: 480px; justify-self: end; }
}

/* Récit : étapes plus compactes et plus riches, photo rapprochée du texte */
@media (min-width: 901px) {
  .recit { grid-template-columns: minmax(0, 560px) minmax(0, 480px); justify-content: space-between; column-gap: clamp(48px, 7vw, 120px); }
  .recit-etape { min-height: 42vh; padding-top: 32px; padding-bottom: 32px; }
}
.recit-etape p { max-width: 44ch; }
.recit-points { list-style: none; margin: 20px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.recit-points li { font-size: .92rem; font-weight: 500; padding: 6px 13px; border-radius: 999px; background: var(--carte); border: 1px solid var(--blanc-2); color: var(--noir); }
.recit-etape .lien-fleche { align-self: flex-start; }
.js .recit-etape:not(.actif) .recit-points li { color: #77746d; }
.js .recit-etape:not(.actif) .lien-fleche { opacity: .55; }
.recit-points li, .recit-etape .lien-fleche { transition: color .5s, opacity .5s; }
@media (max-width: 900px) {
  .js .recit-etape:not(.actif) .recit-points li { color: var(--noir); }
  .js .recit-etape:not(.actif) .lien-fleche { opacity: 1; }
}

/* Page Merci : récapitulatif de la demande */
.merci-recap { margin: 28px 0 0; padding: 4px 22px; background: var(--carte); border: 1px solid var(--blanc-2); border-radius: var(--rayon-photo); max-width: 640px; }
.merci-recap div { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--blanc-2); }
.merci-recap div:last-child { border-bottom: 0; }
.merci-recap dt { color: var(--noir-2); }
.merci-recap dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.merci-erreur { margin-top: 16px; max-width: 60ch; color: var(--noir-2); }
@media (max-width: 560px) { .merci-recap div { grid-template-columns: 1fr; gap: 2px; } }

.btn.envoi { opacity: .7; pointer-events: none; }

/* ---------- Calendrier du formulaire (ordinateur) ---------- */
.champ-date, .champ-adresse { position: relative; }
.form .date-affiche { cursor: pointer; text-transform: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385680f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; }
.form .date-affiche::first-letter { text-transform: uppercase; }
.calendrier, .suggestions { position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); background: var(--carte); border: 1px solid var(--blanc-2); border-radius: 16px; box-shadow: 0 24px 48px -24px rgba(20, 19, 18, .35), 0 2px 6px rgba(20, 19, 18, .06); transform-origin: 24px 0; animation: pop-ouvre 180ms var(--ease-out) both; }
@keyframes pop-ouvre { from { opacity: 0; transform: scale(.97) translateY(-4px); } }
.calendrier { width: 316px; padding: 14px; }
.cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-tete strong { font: 700 1.05rem/1 var(--titre); letter-spacing: -.01em; }
.cal-tete strong::first-letter { text-transform: uppercase; }
.cal-nav { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--noir); transition: background-color 150ms ease, transform var(--duree-appui) var(--ease-out); }
.cal-nav:hover { background: var(--blanc-2); }
.cal-nav:active { transform: scale(.94); }
.cal-nav:disabled { opacity: .25; cursor: default; background: transparent; }
.cal-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-grille > span { font-size: .78rem; font-weight: 600; color: #6f6c64; padding: 6px 0; }
.cal-jour { aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; font: 500 .95rem/1 var(--texte); color: var(--noir); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color 150ms ease, color 150ms ease, transform var(--duree-appui) var(--ease-out); }
.cal-jour:hover { background: var(--blanc-2); }
.cal-jour:active { transform: scale(.92); }
.cal-jour.auj { box-shadow: inset 0 0 0 1.5px var(--or); }
.cal-jour.choisi { background: var(--noir); color: var(--or-pale); font-weight: 700; }
.cal-jour:disabled { color: #c9c6bd; cursor: default; background: transparent; }
.cal-jour:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }
.cal-pied { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--blanc-2); font-size: .85rem; color: #6f6c64; }
.cal-effacer { border: 0; background: none; padding: 4px 0; font: 600 .88rem var(--texte); color: var(--noir); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px; cursor: pointer; }

/* ---------- Suggestions d'adresse ---------- */
.suggestions { right: 0; list-style: none; margin: 0; padding: 6px; }
.suggestions [role="option"] { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.suggestions [role="option"] strong { font-weight: 600; }
.suggestions [role="option"] span { font-size: .86rem; color: var(--noir-2); }
.suggestions [role="option"]:hover, .suggestions [aria-selected="true"] { background: var(--blanc); }
.suggestions [aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--blanc-2); }
.suggestions-source { padding: 6px 12px 2px; font-size: .76rem; color: #6f6c64; }
@media (prefers-reduced-motion: reduce) { .calendrier, .suggestions { animation: none; } }

/* Cartes d'événement : toutes de la même taille */
.choix-cartes { grid-auto-rows: 1fr; }
.choix-cartes label { display: flex; }
.choix-cartes span { height: 100%; display: flex; flex-direction: column; justify-content: center; }
/* Champs nombre : sans les petites flèches du navigateur */
.form input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.form input[type=number]::-webkit-inner-spin-button, .form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* =========================================================
   Carte des fêtes : même charte, direction de saison
   (nuit vert sapin, or du logo, touches de houx)
   ========================================================= */
:root {
  --nuit: #0f1813;          /* fond de saison : noir teinté vert sapin */
  --nuit-2: #1a2a22;
  --houx: #c0392f;          /* rouge de Noël : boules, rubans, boutons */
  --houx-fonce: #9b2620;    /* rouge profond, texte blanc lisible dessus */
  --creme-fete: #f4efe2;
}

/* Lien « Fêtes » du menu, visible du 1er novembre au 31 décembre */
.nav-fetes a { display: flex; align-items: center; gap: 6px; color: var(--or-texte); font-weight: 600; }
.nav-fetes .etincelle { width: 13px; height: 13px; fill: var(--or); flex: none; animation: scintille 3.2s var(--ease-in-out) infinite; }
@keyframes scintille { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.7) rotate(45deg); opacity: .6; } }

/* Haut de page */
.fetes-tete { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(48px, 7vw, 104px) var(--marge); background: radial-gradient(ellipse 60% 70% at 78% 45%, rgba(212, 173, 69, .16), transparent 70%), radial-gradient(ellipse 50% 60% at 10% 100%, rgba(26, 42, 34, .9), transparent 70%), linear-gradient(165deg, #142019, var(--nuit) 60%); color: var(--blanc); }
.fetes-tete-texte { position: relative; z-index: 1; }
.fetes-sur { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 600 .82rem/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.fetes-sur::before { content: ""; width: 28px; height: 1px; background: var(--or); }
.fetes-tete h1 { font-size: clamp(2.9rem, 7vw, 6.2rem); margin-bottom: .35em; }
.fetes-tete h1 em { background: var(--or-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fetes-tete .lead { color: var(--gris-clair); margin-bottom: 28px; }
.fetes-retour { color: var(--or-pale); max-width: 46ch; }
.fetes-ciel { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fetes-ciel .etoile { position: absolute; width: 14px; fill: var(--or); opacity: .5; animation: scintille 4s var(--ease-in-out) var(--d) infinite; }
.fetes-ciel .etoile:nth-child(3n) { width: 9px; opacity: .35; }
.fetes-ciel .etoile:nth-child(4n) { width: 20px; }

/* Dates à retenir */
.fetes-dates { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(100% - 2 * var(--marge), var(--largeur)); margin: -44px auto 0; }
.fetes-date { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; background: var(--carte); border: 1px solid var(--blanc-2); border-radius: var(--rayon); box-shadow: 0 24px 40px -28px rgba(15, 24, 19, .45); }
.fetes-date strong { font: 800 clamp(1.4rem, 2.2vw, 1.75rem)/1.15 var(--titre); letter-spacing: -.02em; }
.fetes-date span:last-child { color: var(--noir-2); font-size: .95rem; }
.fetes-date-sur { font: 600 .78rem/1.2 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--or-texte); }
.fetes-date-limite { background: var(--houx-fonce); border-color: var(--houx-fonce); color: var(--blanc); }
.fetes-date-limite .fetes-date-sur { color: #f6d9a8; }
.fetes-date-limite strong { color: var(--or-pale); }
.fetes-date-limite span:last-child { color: #f3dcd8; }
.fetes-horaires { width: min(100% - 2 * var(--marge), var(--largeur)); margin: 14px auto 0; font-size: .92rem; color: var(--noir-2); }

/* Menus */
.fetes-menus { padding: var(--section) var(--marge) clamp(40px, 5vw, 64px); width: min(100%, calc(var(--largeur) + 2 * var(--marge))); margin-inline: auto; }
.fetes-menus-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.menu-fete { position: relative; overflow: hidden; padding: clamp(26px, 3vw, 40px); background: var(--creme-fete); border: 1px solid #e7dfc9; border-radius: var(--rayon); }
.menu-fete h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; margin: 18px 0 6px; }
.menu-fete-prix { font: 700 1.25rem/1 var(--texte); color: var(--or-texte); margin-bottom: 22px; }
.menu-fete-prix span { font-weight: 500; font-size: .95rem; color: var(--noir-2); }
.menu-fete ol { list-style: none; margin: 0; padding: 0; counter-reset: plat; }
.menu-fete li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid rgba(20, 19, 18, .1); counter-increment: plat; }
.menu-fete li::before { content: counter(plat); position: absolute; left: 0; top: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font: 600 .75rem/1 var(--texte); color: var(--or-texte); }
.menu-fete li:last-child { font-weight: 600; }
.menu-fete-icone { width: 34px; height: 34px; fill: none; stroke: var(--or-texte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.menu-fete-signature { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.menu-fete-signature .menu-fete-icone { stroke: var(--or); }
.menu-fete-signature .menu-fete-prix { color: var(--or); }
.menu-fete-signature .menu-fete-prix span { color: var(--gris-clair); }
.menu-fete-signature li { border-top-color: rgba(247, 246, 242, .14); }
.menu-fete-signature li::before { color: var(--or); }

/* Rubriques de la carte */
.fetes-rubrique-tete { position: sticky; top: calc(var(--entete-h, 80px) + 92px); align-self: start; }
.fetes-pastille { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 20px; background: var(--nuit); box-shadow: inset 0 0 0 1px rgba(212, 173, 69, .45); }
.icone { width: 28px; height: 28px; fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fetes-note { font-size: .92rem; color: var(--noir-2); margin: 0 0 .4em; padding-left: 14px; border-left: 2px solid var(--or); }
.fetes-sous { font: 700 .82rem/1.2 var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--or-texte); margin: 32px 0 0; }
.fetes-sous:first-child { margin-top: 6px; }
.fetes-option { font-weight: 400; color: var(--noir-2); }
.fetes-rubrique .plats { margin-top: 8px; }

/* Commande */

.pas-a-pas { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.pas-a-pas button { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #d9d6cd; background: var(--carte); font: 500 1.25rem/1 var(--texte); color: var(--noir); cursor: pointer; display: grid; place-items: center; transition: background-color 150ms ease, border-color 150ms ease, transform var(--duree-appui) var(--ease-out); }
.pas-a-pas button:hover { border-color: var(--noir); }
.pas-a-pas button:active { transform: scale(.92); }
.pas-a-pas .pas-plus { background: var(--noir); border-color: var(--noir); color: var(--or-pale); }
.form .pas-a-pas input { width: 46px; min-height: 38px; padding: 4px; text-align: center; border: 0; background: transparent; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: none; }
.pas-unite { min-width: 5.2em; font-size: .82rem; color: var(--noir-2); }
.commande-erreur { margin: 12px 0 0; color: var(--rouge); font-weight: 600; }
.recap-lignes { list-style: none; margin: 18px 0 0; padding: 0; }
.recap-lignes li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px dashed #e4e1d8; }
.recap-lignes .num { white-space: nowrap; font-weight: 600; }

@media (max-width: 900px) {
  .fetes-tete { grid-template-columns: 1fr; padding-bottom: 88px; }
  .fetes-sapin { width: min(64%, 280px); order: -1; }
  .fetes-dates { grid-template-columns: 1fr; }
  .fetes-menus-grille { grid-template-columns: 1fr; }
  .fetes-rubrique-tete { position: static; }
  .fetes-pastille { width: 52px; height: 52px; margin-bottom: 14px; }
}
@media (max-width: 560px) {
  .pas-unite { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-fetes .etincelle, .fetes-ciel .etoile { animation: none; }
  .fetes-sapin * { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* Bandeau des fêtes en haut de l'accueil */
.bandeau-fetes { display: flex; justify-content: center; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 11px var(--marge); background: var(--nuit); color: var(--gris-clair); font-size: .95rem; text-align: center; text-decoration: none; }
.bandeau-fetes strong { color: var(--or-pale); font-weight: 600; }
.bandeau-fetes .etincelle { width: 13px; height: 13px; fill: var(--or); }
.bandeau-fetes .lien-fleche { color: var(--blanc); }
.bandeau-fetes:hover .lien-fleche { color: var(--or-pale); }
@media (max-width: 700px) {
  .bandeau-fetes { flex-wrap: nowrap; gap: 10px; font-size: .9rem; text-align: left; }
  .bandeau-fetes-date { display: none; }
  .bandeau-fetes .lien-fleche { flex: none; }
  .bandeau-fetes { margin-bottom: 14px; }
}

/* ---------- Fêtes v2 : sapin, flocons, rouge de Noël, apparitions ---------- */
.btn-rouge { background: var(--houx-fonce); border-color: var(--houx-fonce); color: #fff; }
.btn-rouge:hover { background: #7f1d18; border-color: #7f1d18; color: #fff; }
.btn-rouge .fleche { color: #f6d9a8; }

/* sapin : les branches se tracent du sommet vers le bas, la guirlande s'enroule,
   un reflet la parcourt, les lumières respirent, l'étoile s'éclaire en dernier */
.fetes-sapin { position: relative; justify-self: center; width: min(100%, 420px); }
.fetes-sapin svg { width: 100%; height: auto; overflow: visible; }
.sapin-lueur { fill: rgba(212, 173, 69, .09); filter: blur(34px); }
.sapin-ombre { fill: rgba(0, 0, 0, .35); filter: blur(6px); }
.branche { fill: none; stroke: var(--or); stroke-width: 1.15; stroke-linecap: round; opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 900ms var(--ease-out) calc(120ms + var(--i) * 55ms) forwards; }
.branche:nth-of-type(4n) { stroke: var(--or-pale); opacity: .7; }
.tige { stroke-width: 1.4; opacity: .55; animation-duration: 1500ms; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.guirlande { fill: none; stroke: rgba(247, 227, 154, .55); stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 2000ms var(--ease-in-out) 1300ms forwards; }
.guirlande-reflet { fill: none; stroke: #fff6d6; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .035 .965; stroke-dashoffset: 1; opacity: 0; animation: reflet 6s linear 3400ms infinite; }
@keyframes reflet { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: .9; } 92% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.lumiere { fill: #fff3c4; opacity: 0; animation: allume 600ms ease-out calc(1500ms + var(--i) * 12ms) forwards, respire 3.6s ease-in-out calc(3400ms + var(--i) * 37ms) infinite; }
@keyframes allume { to { opacity: 1; } }
@keyframes respire { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.boule { animation: boule-pend 900ms var(--ease-out) calc(2600ms + var(--i) * 110ms) both; }
.boule-fil { stroke: rgba(212, 173, 69, .7); stroke-width: .8; }
@keyframes boule-pend { from { opacity: 0; translate: 0 -10px; } }
.etoile-halo { fill: rgba(247, 227, 154, .16); filter: blur(6px); opacity: 0; transform-box: fill-box; transform-origin: center; animation: allume 900ms ease-out 3200ms forwards, halo 4.5s ease-in-out 4200ms infinite; }
@keyframes halo { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.35; opacity: .55; } }
.sapin-etoile { fill: var(--or-pale); transform-box: fill-box; transform-origin: center; animation: etoile-arrive 1100ms var(--ease-out) 3000ms both; }
@keyframes etoile-arrive { from { opacity: 0; scale: .3; rotate: -45deg; } }
@keyframes feuille-pousse { from { opacity: 0; scale: .2; } }

/* ruban rouge et blanc, comme la plaquette */
.ruban { height: 10px; background: repeating-linear-gradient(-45deg, var(--houx) 0 12px, #fff 12px 24px); }
.menu-fete-signature { box-shadow: inset 0 6px 0 var(--houx); }
.fetes-pastille { position: relative; }
.fetes-pastille::after { content: ""; position: absolute; right: 2px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--houx); box-shadow: 0 0 0 3px var(--blanc); }
.fetes-sous { color: var(--houx-fonce); }

/* apparitions au défilement (gérées par le même observateur que les photos) */
.revelation [data-reveal="monte"] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.revelation [data-reveal="monte"].vu { opacity: 1; transform: none; }
.revelation .fetes-dates [data-reveal="monte"]:nth-child(2), .revelation .fetes-menus-grille [data-reveal="monte"]:nth-child(2) { transition-delay: 90ms; }
.revelation .fetes-dates [data-reveal="monte"]:nth-child(3) { transition-delay: 180ms; }
.revelation [data-reveal="monte"] .fetes-pastille { transition: transform 700ms var(--ease-out) 150ms; }
.revelation [data-reveal="monte"]:not(.vu) .fetes-pastille { transform: scale(.6) rotate(-30deg); }
.revelation [data-reveal="cascade"] > li { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.revelation [data-reveal="cascade"].vu > li { opacity: 1; transform: none; }
.revelation [data-reveal="cascade"].vu > li:nth-child(2) { transition-delay: 45ms; }
.revelation [data-reveal="cascade"].vu > li:nth-child(3) { transition-delay: 90ms; }
.revelation [data-reveal="cascade"].vu > li:nth-child(4) { transition-delay: 135ms; }
.revelation [data-reveal="cascade"].vu > li:nth-child(5) { transition-delay: 180ms; }
.revelation [data-reveal="cascade"].vu > li:nth-child(6) { transition-delay: 225ms; }
.revelation [data-reveal="cascade"].vu > li:nth-child(7) { transition-delay: 270ms; }
.revelation [data-reveal="cascade"].vu > li:nth-child(8) { transition-delay: 315ms; }
.revelation [data-reveal="cascade"].vu > li:nth-child(9) { transition-delay: 360ms; }
.revelation [data-reveal="cascade"].vu > li:nth-child(10) { transition-delay: 405ms; }
.revelation [data-reveal="cascade"].vu > li:nth-child(11) { transition-delay: 450ms; }
.revelation [data-reveal="cascade"].vu > li:nth-child(12) { transition-delay: 495ms; }

/* accueil pendant les fêtes : photos détourées des frères en bonnet ; image entière pour que l'ardoise ne passe pas sous la carte du nom */
.accueil-fetes .frere img { aspect-ratio: 733 / 1100; }
.accueil-fetes-pastille { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 14px; border-radius: 999px; background: var(--houx-fonce); color: #fff; font: 600 .9rem/1.1 var(--texte); }
.accueil-fetes-pastille .etincelle { width: 13px; height: 13px; fill: #f6d9a8; animation: scintille 3.2s var(--ease-in-out) infinite; }
.accueil-fetes .titre-mots em { color: var(--houx-fonce); }
@media (prefers-reduced-motion: reduce) {
  .revelation [data-reveal="monte"], .revelation [data-reveal="cascade"] > li { transform: none; }
  .accueil-fetes-pastille .etincelle { animation: none; }
}
.accueil-fetes .chapitre-titre em { color: var(--houx-fonce); }

/* ---------- Neige : flocons sur toute la page (site.js), neige posée sur les pictos et le formulaire ---------- */
.neige-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 45; }
/* chapeau de neige : sa hauteur suit --neige (0 à 1), augmentée par les flocons qui se posent */
[data-neige] { --neige: .4; }
.fetes-pastille::before, .menu-fete-picto::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 0; width: calc(62% + var(--neige) * 22%); height: calc(7px + var(--neige) * 12px); translate: -50% -28%; background: radial-gradient(ellipse 70% 60% at 45% 35%, #fff 60%, #e6edf1 100%); border-radius: 50% 50% 46% 46% / 100% 100% 55% 55%; box-shadow: 0 1px 2px rgba(15, 24, 19, .22); transition: width 500ms var(--ease-out), height 500ms var(--ease-out); }
.menu-fete-picto { position: relative; display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(212, 173, 69, .12); }
.menu-fete-signature .menu-fete-picto { background: rgba(212, 173, 69, .16); }
/* toit enneigé du formulaire */
@media (prefers-reduced-motion: reduce) { [data-neige] { --neige: .6; } }

/* Accueil des fêtes : ardoises lisibles. Photos recadrées sous l'ardoise, carte du prénom réduite et collée en bas */
.accueil-fetes .frere img { aspect-ratio: 733 / 989; }
.accueil-fetes .frere-carte { bottom: 0; padding: 7px 16px 8px; border-radius: 12px; }
.accueil-fetes .frere-carte .role { display: none; }
.accueil-fetes .frere-carte strong { font-size: 1.05rem; }
.accueil-fetes .frere-carte .vers { margin-top: 1px; font-size: .84rem; }
.accueil-fetes.en-scene .frere { opacity: .5; }
.scene-active.accueil-fetes .frere img { max-width: 31vw; }
@media (max-width: 900px) {
  /* sur téléphone : un frère à la fois, en grand, on fait glisser ; Hugo (« Commandes ouvertes ! ») en premier */
  .accueil-fetes .freres { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 18vw 6px; scrollbar-width: none; }
  .accueil-fetes .freres::-webkit-scrollbar { display: none; }
  .accueil-fetes .frere { flex: 0 0 64vw; scroll-snap-align: center; }
  .accueil-fetes .frere:nth-child(3) { order: -1; }
  .accueil-fetes .frere-carte { margin: -18px 18px 12px; }
  .accueil-fetes .frere-carte .role { display: none; }
}

/* ---------- « On s'occupe de tout » : ruban de satin, paquet cadeau ---------- */
.tout-fetes { padding: var(--section) var(--marge); text-align: center; background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(192, 57, 47, .07), transparent 70%); }
.tout-fetes-tete { max-width: 900px; margin: 0 auto; }
.tout-fetes .fetes-sur { color: var(--houx-fonce); }
.tout-fetes .fetes-sur::before { background: var(--houx-fonce); }
.tout-fetes h2 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); margin-bottom: 0; }
.tout-fetes h2 em { display: block; color: var(--houx-fonce); }
.ruban-titre { width: min(100%, 980px); margin: clamp(14px, 2vw, 24px) auto clamp(24px, 3vw, 40px); }
.tout-fetes-etapes { list-style: none; margin: 0 auto; padding: 0; max-width: var(--largeur); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.tout-fetes-etapes li { position: relative; padding: clamp(24px, 3vw, 36px); background: var(--carte); border: 1px solid var(--blanc-2); border-radius: var(--rayon); box-shadow: 0 24px 40px -32px rgba(15, 24, 19, .35); }
.tout-fetes-etapes li:last-child { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.tout-fetes-etapes li:last-child p { color: var(--gris-clair); }
.tout-fetes-etapes h3 { margin: 18px 0 8px; }
.tout-fetes-etapes p { margin: 0; color: var(--noir-2); }
.tout-fetes-num { position: absolute; top: 22px; right: 24px; font: 700 .9rem/1 var(--texte); color: var(--or-texte); }
.tout-fetes-etapes li:last-child .tout-fetes-num { color: var(--or); }
.tout-fetes-icone { width: 48px; height: 48px; padding: 11px; border-radius: 50%; background: rgba(192, 57, 47, .09); fill: none; stroke: var(--houx-fonce); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tout-fetes-cadeau { display: block; width: 64px; height: 64px; margin: -8px 0 -8px -6px; }
.tout-fetes-actions { justify-content: center; margin-top: clamp(28px, 3vw, 40px); }
.revelation .tout-fetes-etapes li:nth-child(2) { transition-delay: 100ms; }
.revelation .tout-fetes-etapes li:nth-child(3) { transition-delay: 200ms; }

/* ruban : le nœud apparaît, puis le ruban se déroule vers les deux bords */
.ruban-noeud svg { width: 100%; height: auto; overflow: visible; }
.ruban-bande { fill: none; stroke: url(#satin); stroke-width: 11; stroke-linecap: round; }
.ruban-lustre { fill: none; stroke: rgba(255, 210, 200, .55); stroke-width: 1.4; stroke-linecap: round; }
.noeud { transform-origin: 0 0; }
.tout-fetes { overflow-x: clip; }
.revelation [data-reveal="ruban"] .ruban-bande, .revelation [data-reveal="ruban"] .ruban-lustre { stroke-dasharray: 1; stroke-dashoffset: 1; }
.revelation [data-reveal="ruban"] .noeud > * { opacity: 0; scale: .2; transform-origin: 0 0; }
.revelation [data-reveal="ruban"].vu .noeud > * { animation: noeud-fait 700ms var(--ease-out) forwards; }
.revelation [data-reveal="ruban"].vu .ruban-bande, .revelation [data-reveal="ruban"].vu .ruban-lustre { animation: trace 1400ms var(--ease-in-out) 450ms forwards; }
@keyframes noeud-fait { 0% { opacity: 0; scale: .2; rotate: -12deg; } 70% { opacity: 1; scale: 1.06; rotate: 2deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
/* le nœud ondule à peine, comme un satin qui bouge */
.ruban-noeud.vu .noeud { animation: satin 5s ease-in-out 1.6s infinite; }
@keyframes satin { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.5deg; } }

/* paquet cadeau : le couvercle se soulève, des étincelles s'échappent */
.cadeau { width: 100%; height: 100%; overflow: visible; }
.cadeau-boite { fill: #f4efe2; }
.cadeau-ruban, .cadeau-noeud { fill: var(--houx); }
.cadeau-etincelles path { fill: var(--or); opacity: 0; transform-box: fill-box; transform-origin: center; }
.cadeau-couvercle { transform-box: fill-box; transform-origin: 20% 100%; }
.revelation [data-reveal="cadeau"].vu .cadeau-couvercle { animation: couvercle 1.6s var(--ease-out) 500ms both; }
.revelation [data-reveal="cadeau"].vu .cadeau-etincelles path { animation: etincelle 1.4s var(--ease-out) calc(900ms + var(--k, 0ms)) both; }
.cadeau-etincelles path:nth-child(2) { --k: 150ms; }
.cadeau-etincelles path:nth-child(3) { --k: 300ms; }
@keyframes couvercle { 0% { transform: none; } 35% { transform: translateY(-14px) rotate(-14deg); } 60% { transform: translateY(-14px) rotate(-14deg); } 100% { transform: none; } }
@keyframes etincelle { 0% { opacity: 0; scale: .2; translate: 0 18px; } 40% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .6; translate: 0 -8px; } }
/* sans animation (ou sans JS), tout est simplement affiché */
html:not(.revelation) .cadeau-etincelles path { opacity: 1; }

@media (max-width: 900px) {
  .tout-fetes-etapes { grid-template-columns: 1fr; }
  .ruban-titre { width: 140%; margin-left: -20%; }
}
@media (prefers-reduced-motion: reduce) { .ruban-noeud.vu .noeud { animation: none; } }

/* Fêtes : espacements resserrés entre les blocs */
.tout-fetes { padding: clamp(48px, 6vw, 80px) var(--marge) clamp(36px, 4vw, 56px); }
.ruban-titre { margin: clamp(8px, 1.5vw, 16px) auto clamp(16px, 2vw, 28px); }
.tout-fetes-actions { margin-top: clamp(22px, 2.5vw, 32px); }
.fetes-menus { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 48px); }
.fetes-menus .section-tete { margin-bottom: clamp(20px, 3vw, 32px); }
.fetes-rubrique { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.fetes-dates + .fetes-horaires + .tout-fetes { padding-top: clamp(40px, 5vw, 64px); }

/* Haut de la carte des fêtes : moins d'espace au-dessus du titre */
.fetes-tete { padding-top: clamp(28px, 4vw, 56px); }
@media (max-width: 900px) { .fetes-tete { padding-top: 24px; } }
/* lueurs du sapin : dégradés radiaux (le flou CSS sur une forme SVG laissait un ovale net) */
.sapin-lueur { filter: none; fill: url(#sapin-lueur); }
.etoile-halo { filter: none; fill: url(#etoile-halo); }
/* feux d'artifice (site.js) : derrière le texte, dans le fond vert */
.feux { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Pictos ronds en boules de Noël : verre rouge laqué, reflet doux, petite attache dorée ---------- */
.fetes-pastille, .menu-fete-picto, .tout-fetes-boule {
  position: relative; display: inline-grid; place-items: center; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5) 0 5%, rgba(255, 255, 255, .14) 16%, transparent 38%),
    radial-gradient(circle at 70% 82%, rgba(255, 170, 150, .18), transparent 30%),
    radial-gradient(circle at 46% 42%, #cf4136 0%, #9b2620 55%, #5c120e 100%);
  box-shadow: inset -5px -7px 12px rgba(40, 6, 4, .45), inset 3px 3px 8px rgba(255, 255, 255, .06), 0 12px 18px -10px rgba(70, 12, 8, .6);
}
.fetes-pastille { width: 64px; height: 64px; margin-top: 10px; }
.menu-fete-picto { width: 56px; height: 56px; margin-top: 10px; }
.tout-fetes-boule { width: 52px; height: 52px; margin-top: 10px; }
.fetes-pastille .icone, .menu-fete-picto .menu-fete-icone, .tout-fetes-boule .tout-fetes-icone { position: relative; z-index: 1; stroke: #f7e39a; filter: drop-shadow(0 1px 1px rgba(40, 6, 4, .5)); }
.tout-fetes-boule .tout-fetes-icone { width: 26px; height: 26px; padding: 0; background: none; }
.menu-fete-picto .menu-fete-icone { width: 28px; height: 28px; }
/* attache dorée : un petit anneau et le culot */
.fetes-pastille::after, .menu-fete-picto::after, .tout-fetes-boule::after {
  content: ""; position: absolute; z-index: 3; left: 50%; top: -11px; width: 14px; height: 14px; translate: -50% 0; box-shadow: none; border-radius: 0;
  background:
    radial-gradient(circle at 50% 3.5px, transparent 2.4px, #c9a03c 2.6px 3.8px, transparent 4px) top / 14px 8px no-repeat,
    linear-gradient(90deg, #8a5d16, #f1d47c 40%, #c79a36 60%, #8a5d16) bottom / 12px 7px no-repeat;
}
/* la neige se pose sur les épaules de la boule, sous l'attache */
.fetes-pastille::before, .menu-fete-picto::before { z-index: 2; width: calc(54% + var(--neige) * 22%); translate: -50% -18%; }
.menu-fete-signature .menu-fete-picto { background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5) 0 5%, rgba(255, 255, 255, .14) 16%, transparent 38%),
    radial-gradient(circle at 46% 42%, #cf4136 0%, #9b2620 55%, #5c120e 100%); }
/* boules vertes, en alternance avec les rouges : même vert sapin que le haut de la carte des fêtes */
.fetes-rubrique:nth-of-type(even) .fetes-pastille,
.fetes-menus-grille .menu-fete:first-child .menu-fete-picto,
.tout-fetes-etapes li:nth-child(2) .tout-fetes-boule {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .45) 0 5%, rgba(255, 255, 255, .12) 16%, transparent 38%),
    radial-gradient(circle at 70% 82%, rgba(160, 220, 190, .14), transparent 30%),
    radial-gradient(circle at 46% 42%, #3a7556 0%, #1a3a2b 55%, #0a1710 100%);
  box-shadow: inset -5px -7px 12px rgba(2, 10, 6, .5), inset 3px 3px 8px rgba(255, 255, 255, .06), 0 12px 18px -10px rgba(8, 30, 18, .6);
}

/* ---------- Demande de devis : quantités en − / +, récapitulatif avant l'envoi ---------- */
.devis-form .menu-plat { justify-content: space-between; padding: 10px 0; }
.devis-form .menu-nom { flex: 1; min-width: 0; }
.devis-form .menu-plat.choisi .menu-nom { font-weight: 600; }
.menu-plat:not(.choisi) .pas-moins, .menu-plat:not(.choisi) [data-qte] { opacity: .35; }
.devis-form .pas-unite { min-width: 3.6em; }
.js .sans-js, html:not(.js) .avec-js, html:not(.js) .devis-verif { display: none; }
.devis-verif:focus { outline: none; }
.verif-titre { margin: 22px 0 0; font-weight: 700; }
.verif-note { margin: 18px 0 0; color: var(--noir-2); font-size: .95rem; }
.recap-lignes small { display: block; color: var(--noir-2); }
@media (max-width: 560px) {
  .devis-form .menu-plat { flex-wrap: wrap; }
  .devis-form .menu-nom { flex-basis: 100%; }
}

/* ---------- Compte à rebours des commandes de fêtes ---------- */
.decompte { margin: 0 0 24px; }
.decompte-titre { margin: 0 0 8px; font: 600 .8rem/1.2 var(--texte); letter-spacing: .12em; text-transform: uppercase; }
.decompte-chiffres { display: flex; gap: 8px; margin: 0; }
.decompte-case { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 10px 8px 8px; border-radius: 14px; }
.decompte-n { font: 800 1.9rem/1 var(--titre); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.decompte-l { margin-top: 4px; font-size: .72rem; letter-spacing: .04em; }
/* sur fond vert (page des fêtes) : verre fumé, chiffres dorés */
.decompte-sombre .decompte-titre { color: var(--or); }
.decompte-sombre .decompte-case { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(212, 173, 69, .3); backdrop-filter: blur(4px); }
.decompte-sombre .decompte-n { color: var(--or-pale); }
.decompte-sombre .decompte-l { color: var(--gris-clair); }
/* sur fond clair (accueil) : cartes blanches, chiffres rouges */
.decompte-clair .decompte-titre { color: var(--houx-fonce); }
.decompte-clair .decompte-case { background: var(--carte); box-shadow: 0 0 0 1px var(--blanc-2), 0 10px 20px -14px rgba(20, 19, 18, .35); }
.decompte-clair .decompte-n { color: var(--houx-fonce); }
.decompte-clair .decompte-l { color: var(--noir-2); }
@media (max-width: 560px) {
  .decompte-chiffres { gap: 6px; }
  .decompte-case { min-width: 0; flex: 1; padding: 9px 4px 7px; }
  .decompte-n { font-size: 1.6rem; }
}

/* ---------- Compte à rebours, version Noël : cases laquées rouge et vert sapin (comme les boules),
   neige posée dessus, reflet qui passe de temps en temps, chiffres qui tombent quand ils changent ---------- */
.decompte-chiffres { gap: 10px; padding-top: 8px; }
.decompte .decompte-case {
  position: relative; overflow: visible; min-width: 68px; padding: 12px 8px 9px; border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 50% 30%, #cf4136 0%, #9b2620 60%, #6e1712 100%);
  box-shadow: inset 0 -6px 12px rgba(40, 6, 4, .35), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 20px -14px rgba(70, 12, 8, .7);
  backdrop-filter: none;
}
.decompte .decompte-case:nth-child(even) {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 50% 30%, #3a7556 0%, #1a3a2b 60%, #0c1b13 100%);
  box-shadow: inset 0 -6px 12px rgba(2, 10, 6, .4), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 20px -14px rgba(8, 30, 18, .7);
}
/* neige posée sur chaque case */
.decompte .decompte-case::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: -7px; height: 13px; border-radius: 10px 12px 6px 8px / 9px 10px 5px 6px;
  background: radial-gradient(ellipse 70% 80% at 45% 30%, #fff 60%, #e6edf1 100%);
  box-shadow: 0 2px 2px rgba(15, 24, 19, .2);
}
.decompte .decompte-case:nth-child(2)::before { left: 10%; right: 4%; height: 11px; }
.decompte .decompte-case:nth-child(3)::before { left: 4%; right: 12%; height: 14px; }
/* reflet doré qui glisse sur les cases, une fois toutes les 7 secondes */
.decompte .decompte-case::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 180, .35) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
  animation: reflet-case 7s var(--ease-in-out) infinite; animation-delay: calc(var(--k, 0) * 120ms + 1.5s);
}
.decompte .decompte-case:nth-child(2) { --k: 1; } .decompte .decompte-case:nth-child(3) { --k: 2; } .decompte .decompte-case:nth-child(4) { --k: 3; }
@keyframes reflet-case { 0%, 82% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
.decompte .decompte-n { display: block; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); overflow: hidden; }
.decompte .decompte-l { color: rgba(255, 245, 225, .82); }
.decompte-sombre .decompte-titre { color: var(--or); }
.decompte-clair .decompte-titre { color: var(--houx-fonce); }
@media (max-width: 560px) { .decompte .decompte-case { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .decompte .decompte-case::after { animation: none; } }
.horaires-note { margin: 10px 0 0; font-size: .86rem; color: var(--gris-clair); max-width: 34ch; }
.fetes-horaires ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fetes-horaires li strong { font-weight: 600; color: var(--noir); }
.fetes-horaires-titre { margin: 0; font: 600 .78rem/1.2 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--houx-fonce); }

/* Pied de page plus compact */
.pied { padding-top: 32px; padding-bottom: 14px; font-size: .9rem; }
.pied-grille { gap: 20px 44px; padding-bottom: 18px; }
.pied-logo img { width: 104px; }
.pied-titre { margin-bottom: 8px; font-size: .88rem; }
.horaires-mini { gap: 1px 16px; line-height: 1.55; }
.pied .statut { margin-top: 8px; font-size: .9rem; }
.pied address { line-height: 1.6; }
.pied .actions { margin-top: 10px; }
.pied .btn { min-height: 38px; padding: 8px 16px; font-size: .86rem; }
.pied ul { gap: 3px; }
.pied-bas { padding-top: 12px; font-size: .82rem; }
.horaires-note { margin: 6px 0 0; font-size: .82rem; max-width: 44ch; line-height: 1.5; }
.horaires-note strong { color: var(--or); font-weight: 600; margin-right: 4px; }
@media (max-width: 900px) { .pied-logo img { width: 92px; } }
@media (max-width: 900px) {
  .pied nav ul { grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  .pied-grille { gap: 18px; }
  .pied-logo img { width: 80px; }
}