/* L'instant Present · aperçu. L'ardoise du logo pour les moments forts, le papier crème de la carte
   pour lire, la moutarde de l'enseigne pour l'action, une touche de bordeaux. Titres Bodoni Moda,
   texte Manrope. Le haut de page parle de la table ; les avis ont leur section plus bas. */
@font-face { font-family: "Bodoni Moda"; src: url("polices/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("polices/bodoni-moda-italique.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("polices/manrope.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --ardoise: #26333B;
  --ardoise-2: #31414B;
  --ardoise-3: #3C4E59;
  --papier: #F6F1E4;
  --papier-2: #ECE4D0;
  --blanc: #FFFDF8;
  --encre: #1F2A30;
  --gris: #5B6A70;
  --gris-clair: #B7C3C8;
  --filet: #DDD3BC;
  --filet-sombre: rgba(255, 255, 255, .14);
  --moutarde: #E8A823;
  --moutarde-vive: #F3B93A;
  --moutarde-fonce: #A8740E;
  --moutarde-pale: #FBEFCF;
  --bordeaux: #7D2434;
  --f-titre: "Bodoni Moda", "Didot", "Georgia", serif;
  --f-texte: "Manrope", "Segoe UI", system-ui, sans-serif;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --gouttiere: clamp(18px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 17px/1.6 var(--f-texte); -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 500; font-variation-settings: "opsz" 30; }
blockquote, .plats dd b, .plats dd span, .marque, .demande-apercu, .note-chiffre b { font-variation-settings: "opsz" 24; }
p, blockquote, figure, ul, ol, dl, dd, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 3px; border-radius: 6px; }

.corps { max-width: 1180px; margin-inline: auto; padding-inline: var(--gouttiere); }
.sur { font: 700 13px/1.3 var(--f-texte); letter-spacing: .18em; text-transform: uppercase; color: var(--moutarde-fonce); }
.sur-clair { color: var(--moutarde); }
.titre { font: 500 clamp(36px, 5.6vw, 68px)/1.02 var(--f-titre); letter-spacing: -.01em; margin-top: 14px; }
.titre em { font-style: italic; font-weight: 400; color: var(--bordeaux); }
.titre-clair { color: var(--blanc); }
.titre-clair em { color: var(--moutarde); }
.chapo { font-size: clamp(17px, 2vw, 19px); color: var(--gris); max-width: 56ch; margin-top: 18px; }
.chapo-clair { color: var(--gris-clair); }
cite { display: block; margin-top: 10px; font: 700 14px/1.3 var(--f-texte); font-style: normal; letter-spacing: .04em; }
blockquote { font-family: var(--f-titre); font-weight: 500; font-size: 19px; line-height: 1.4; }
.lien { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--moutarde); }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; border-radius: 4px; background: var(--moutarde); color: var(--ardoise); font: 800 16px/1.2 var(--f-texte); letter-spacing: .01em; text-decoration: none; text-align: center; border: 0; cursor: pointer; transition: transform .2s var(--courbe), background .2s; box-shadow: 0 14px 28px -16px rgba(232, 168, 35, .9); }
.bouton:hover { background: var(--moutarde-vive); transform: translateY(-2px); }
.bouton-clair { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.bouton-clair:hover { background: rgba(255, 255, 255, .08); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.actions .bouton { flex: 1 1 200px; }
@media (min-width: 700px) { .actions .bouton { flex: 0 0 auto; } }

/* ───────── En-tête ───────── */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 12px var(--gouttiere); padding-top: max(12px, env(safe-area-inset-top)); color: var(--blanc); transition: background .35s, box-shadow .35s; }
.entete.colle { background: rgba(38, 51, 59, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--filet-sombre); }
.marque { font: 500 20px/1 var(--f-titre); text-decoration: none; white-space: nowrap; letter-spacing: .01em; }
.marque-l { font-style: italic; font-weight: 400; }
.marque-p { text-transform: uppercase; letter-spacing: .08em; font-size: .86em; }
.apercu { font: 700 11px/1 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); }
.entete-tel { margin-left: auto; min-height: 42px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 4px; background: var(--moutarde); color: var(--ardoise); text-decoration: none; font: 800 15px/1 var(--f-texte); white-space: nowrap; }
.entete-tel-mot { display: none; }
@media (max-width: 420px) { .entete-tel-num { display: none; } .entete-tel-mot { display: inline; } .marque { font-size: 17px; } }

/* ───────── Haut de page ───────── */
.heros { position: relative; overflow: hidden; min-height: 100svh; display: grid; gap: 28px; align-content: center; padding: calc(96px + env(safe-area-inset-top)) var(--gouttiere) 64px; color: var(--blanc);
  background: radial-gradient(70% 50% at 100% 0%, rgba(232, 168, 35, .16), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(125, 36, 52, .28), transparent 70%), var(--ardoise); }
.heros::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 119px, var(--filet-sombre) 119px 120px); opacity: .35; mask-image: linear-gradient(to bottom, transparent, #000 40%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, transparent); }
.heros > * { position: relative; }
@media (min-width: 1000px) { .heros { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; padding-inline: max(var(--gouttiere), calc((100vw - 1180px) / 2 + var(--gouttiere))); } }
.heros-titre { font: 500 clamp(40px, 5.4vw, 70px)/1 var(--f-titre); letter-spacing: -.012em; margin-top: 16px; }
.heros-titre em { font-style: italic; font-weight: 400; color: var(--moutarde); }
.heros-chapo { margin-top: 20px; font-size: clamp(17px, 2vw, 19px); color: var(--gris-clair); max-width: 50ch; }
.confiance { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 15px; color: var(--gris-clair); }
.confiance li { display: inline-flex; align-items: center; gap: 8px; }
.confiance li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--moutarde); }
.confiance-etoiles { color: var(--moutarde); letter-spacing: .08em; font-size: 14px; }
.confiance li:has(.confiance-etoiles)::before { display: none; }

.etat { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 16px; border-radius: 4px; background: rgba(255, 255, 255, .06); border: 1px solid var(--filet-sombre); font-weight: 600; font-size: 16px; }
.etat-point { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--gris-clair); }
.etat.ouvert .etat-point { background: var(--moutarde); box-shadow: 0 0 0 0 rgba(232, 168, 35, .6); animation: pouls 2s infinite; }
@keyframes pouls { 70% { box-shadow: 0 0 0 10px rgba(232, 168, 35, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 168, 35, 0); } }

/* Sur téléphone, le visuel passe juste sous le titre. */
.heros-visuel { display: grid; justify-items: center; gap: 12px; }
.assiette-cadre { position: relative; width: min(86vw, 470px); aspect-ratio: 1; }
.assiette-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.assiette-anneau { position: absolute; inset: -5%; width: 110%; height: 110%; fill: none; stroke: var(--moutarde); stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); }
.heros-legende { font-size: 14px; color: var(--gris-clair); letter-spacing: .04em; }
@media (max-width: 999px) {
  .heros-texte { display: contents; }
  .heros-texte > * { order: 3; }
  .heros-texte .sur { order: 1; }
  .heros-titre { order: 2; }
  .heros-visuel { order: 2; margin-block: 4px; }
  .heros-chapo { margin-top: 0; }
}

/* ───────── La table ───────── */
.table { padding: 88px 0 72px; }
.offres { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 700px) { .offres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .offres { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.offre { background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; padding: 26px 22px 24px; display: grid; gap: 10px; align-content: start; }
.offre h3 { font: 500 26px/1.1 var(--f-titre); margin-top: 6px; }
.offre p { color: var(--gris); font-size: 16px; }
.icone { width: 48px; height: 48px; fill: none; stroke: var(--moutarde-fonce); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.icone path, .icone circle { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ───────── Un menu, un soir ───────── */
.menu { padding: 24px 0 88px; }
.menu-grille { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .menu-grille { grid-template-columns: .9fr 1.1fr; gap: 48px; } }
.menu-photos { display: grid; gap: 14px; }
@media (min-width: 600px) and (max-width: 999px) { .menu-photos { grid-template-columns: 1fr 1fr; } }
.menu-photos img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 24px 50px -30px rgba(31, 42, 48, .6); }
.carte { position: relative; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; padding: clamp(24px, 4vw, 44px); box-shadow: 0 30px 60px -40px rgba(31, 42, 48, .5); }
.carte::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--filet); border-radius: 3px; pointer-events: none; }
.carte > * { position: relative; }
.carte .sur { text-align: center; }
.titre-menu { font-size: clamp(32px, 4.4vw, 50px); text-align: center; }
.carte-note { margin: 16px auto 0; text-align: center; color: var(--gris); font-size: 15px; max-width: 46ch; }
.plats { display: grid; gap: 26px; margin-top: 30px; }
.plats dt { font: 700 13px/1.3 var(--f-texte); letter-spacing: .18em; text-transform: uppercase; color: var(--bordeaux); text-align: center; display: flex; align-items: center; gap: 14px; }
.plats dt::before, .plats dt::after { content: ""; flex: 1; height: 1px; background: var(--filet); }
.plats dd { display: grid; justify-items: center; text-align: center; padding: 12px 0 0; }
.plats dd + dd { margin-top: 10px; padding-top: 12px; }
.plats dd + dd::before { content: "ou"; display: block; font: italic 400 15px/1 var(--f-titre); color: var(--moutarde-fonce); margin-bottom: 10px; }
.plats dd b { font: 500 22px/1.2 var(--f-titre); }
.plats dd span { font: italic 400 16px/1.4 var(--f-titre); color: var(--gris); margin-top: 3px; }

/* ───────── De l'entrée au dessert ───────── */
.parcours { position: relative; padding: 88px 0; color: var(--blanc); background: linear-gradient(180deg, var(--ardoise-2), var(--ardoise)); overflow: hidden; }
.etapes { position: relative; display: grid; gap: 26px; margin-top: 44px; padding-left: 44px; }
.etapes::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--filet-sombre); }
.etapes::after { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--moutarde); transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--courbe); }
.etapes.vu::after { transform: scaleY(1); }
@media (min-width: 900px) {
  .etapes { grid-template-columns: repeat(3, 1fr); gap: 28px; padding-left: 0; padding-top: 44px; }
  .etapes::before, .etapes::after { left: 18px; right: 18px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .etapes::after { transform: scaleX(0); transform-origin: left; }
  .etapes.vu::after { transform: scaleX(1); }
}
.etape { position: relative; background: rgba(255, 255, 255, .04); border: 1px solid var(--filet-sombre); border-radius: 6px; padding: 24px 22px; }
.etape-num { position: absolute; left: -44px; top: 18px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ardoise); border: 2px solid var(--filet-sombre); font: 500 18px/1 var(--f-titre); color: var(--gris-clair); transition: background .5s, border-color .5s, color .5s; }
.etapes.vu .etape-num { background: var(--moutarde); border-color: var(--moutarde); color: var(--ardoise); }
.etapes.vu .etape:nth-child(1) .etape-num { transition-delay: .1s; } .etapes.vu .etape:nth-child(2) .etape-num { transition-delay: .7s; } .etapes.vu .etape:nth-child(3) .etape-num { transition-delay: 1.3s; }
@media (min-width: 900px) { .etape-num { left: 18px; top: -62px; } }
.etape h3 { font: 500 28px/1.1 var(--f-titre); }
.etape blockquote { margin-top: 14px; color: #E8E1D1; }
.etape cite { color: var(--moutarde); }
.equipe { display: grid; gap: 16px; margin-top: 44px; }
@media (min-width: 800px) { .equipe { grid-template-columns: 1fr 1fr; gap: 20px; } }
.equipe-carte { background: var(--papier); color: var(--encre); border-radius: 6px; padding: 28px 24px; display: grid; gap: 10px; align-content: start; }
.equipe-sur { font: 700 13px/1.3 var(--f-texte); letter-spacing: .18em; text-transform: uppercase; color: var(--bordeaux); }
.equipe-carte h3 { font: 500 30px/1.1 var(--f-titre); }
.equipe-carte > p:not(.equipe-sur) { color: var(--gris); font-size: 16px; }
.equipe-carte blockquote { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--filet); font-size: 18px; }

/* ───────── Les avis (14 octobre) ─────────
   La note en très grand, « Notre meilleure adresse de l'île ! » en italique géant, une assiette avec un avis
   posé dessus, puis les autres avis en bons de commande accrochés au passe, qui glissent au doigt. */
.avis {
  position: relative; padding: 88px 0 0;
  background-color: var(--papier);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(55% 40% at 0% 0%, rgba(232, 168, 35, .13), transparent 70%),
    radial-gradient(45% 35% at 100% 45%, rgba(125, 36, 52, .07), transparent 70%);
}
.avis-haut { display: grid; gap: 44px; }
.note-titre { display: flex; align-items: flex-end; gap: 14px; margin-top: 12px; }
.note-titre b { font: 500 clamp(112px, 34vw, 210px)/.8 var(--f-titre); letter-spacing: -.04em; color: var(--ardoise); font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 96; }
.note-titre span { font: italic 500 clamp(22px, 5.8vw, 30px)/1.12 var(--f-titre); color: var(--bordeaux); padding-bottom: .2em; }
.note-repartition { display: flex; height: 12px; max-width: 440px; margin-top: 26px; border-radius: 999px; overflow: hidden; background: var(--papier-2); gap: 2px; }
.note-repartition i { display: block; flex: 0 0 calc(var(--v) * 100%); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--courbe); }
.note.vu .note-repartition i { transform: scaleX(1); }
.note-repartition .r5 { background: var(--moutarde); } .note-repartition .r4 { background: var(--moutarde-fonce); transition-delay: .3s; } .note-repartition .ra { background: var(--gris-clair); transition-delay: .5s; }
.note-legende { margin-top: 10px; font-size: 14px; color: var(--gris); }

.avis-geant { margin: 0; }
.avis-geant blockquote { font: italic 500 clamp(46px, 12.6vw, 84px)/.98 var(--f-titre); letter-spacing: -.02em; color: var(--ardoise); text-wrap: pretty; font-variation-settings: "opsz" 96; }
.avis-geant blockquote em { color: var(--bordeaux); }
.avis-geant figcaption { margin-top: 22px; max-width: 42ch; padding-left: 18px; border-left: 3px solid var(--moutarde); }
.avis-geant figcaption p { font: 500 19px/1.4 var(--f-titre); color: var(--encre); }
.avis-geant cite { color: var(--moutarde-fonce); }

/* une de leurs assiettes, l'avis posé dessus */
.avis-milieu { display: grid; gap: 40px; margin-top: 56px; }
.avis-photo { position: relative; margin: 0; border-radius: 6px; overflow: hidden; isolation: isolate; box-shadow: 0 30px 60px -34px rgba(31, 42, 48, .75); background: var(--ardoise); }
.avis-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; }
.avis-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(31, 42, 48, .96) 0%, rgba(31, 42, 48, .82) 34%, rgba(31, 42, 48, 0) 64%); }
.avis-photo blockquote { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 22px 24px; color: #EFE8D8; font: 500 19px/1.38 var(--f-titre); }
.avis-photo blockquote em { display: block; margin-top: 10px; font: italic 500 clamp(30px, 8.4vw, 46px)/1.04 var(--f-titre); color: var(--moutarde-vive); letter-spacing: -.01em; }
.avis-photo cite { color: var(--gris-clair); margin-top: 14px; }
.mots-sous { font-size: 15px; color: var(--gris); max-width: 40ch; }
.barres { display: grid; gap: 12px; margin-top: 20px; }
.barres li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; font-weight: 600; font-size: 16px; }
.barres li i { grid-column: 1 / -1; display: block; height: 8px; border-radius: 999px; background: var(--papier-2); position: relative; overflow: hidden; }
.barres li i::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 100%); background: var(--moutarde); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--courbe); transition-delay: calc(var(--i) * 90ms); }
.barres.vu li i::after { transform: scaleX(1); }
.barres li b { font: 500 20px/1 var(--f-titre); color: var(--bordeaux); }

/* le passe : une barre d'acier, les bons accrochés dessous */
.passe { position: relative; margin-top: 72px; padding: 44px 0 64px; color: var(--blanc); background: radial-gradient(70% 90% at 85% 0%, rgba(232, 168, 35, .15), transparent 60%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 7px), linear-gradient(180deg, var(--ardoise-2), var(--ardoise)); }
.passe-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.passe-titre { font: italic 500 clamp(26px, 6.6vw, 40px)/1.1 var(--f-titre); color: var(--blanc); }
.passe-fleches { display: none; gap: 10px; flex: none; }
.passe-fleche { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s, opacity .2s; }
.passe-fleche svg { width: 22px; height: 22px; fill: none; stroke: var(--moutarde); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.passe-fleche:hover:not(:disabled) { background: rgba(232, 168, 35, .14); border-color: var(--moutarde); }
.passe-fleche:disabled { opacity: .3; cursor: default; }
.tickets { position: relative; margin-top: 26px; display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; padding: 0 var(--gouttiere) 34px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, #6F7D85 0, #E7ECEE 3px, #A9B5BB 6px, #56636B 11px, rgba(0, 0, 0, .25) 11px, transparent 15px) 0 12px / 100% 15px no-repeat; }
.tickets::-webkit-scrollbar { display: none; }
.tickets:focus-visible { outline-offset: -4px; }
.ticket { position: relative; flex: 0 0 min(74vw, 272px); scroll-snap-align: start; padding-top: 34px; transform-origin: 50% 18px; rotate: var(--r, 0deg); transition: rotate .6s var(--courbe); filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .45)); }
.ticket::before { content: ""; position: absolute; left: 50%; top: 4px; width: 34px; height: 40px; margin-left: -17px; z-index: 2; border-radius: 4px 4px 3px 3px; background: linear-gradient(90deg, #4A565D, #C9D2D6 35%, #7B888F 60%, #3E4A51); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25); }
.ticket:nth-child(4n + 1) { --r: -1.8deg; } .ticket:nth-child(4n + 2) { --r: 1.3deg; } .ticket:nth-child(4n + 3) { --r: -.7deg; } .ticket:nth-child(4n + 4) { --r: 2deg; }
.ticket-papier { --dents: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; -webkit-mask: var(--dents); mask: var(--dents); background: #FFFDF6; color: var(--encre); padding: 26px 20px 34px; }
.ticket-tete { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1.5px dashed #CFC4AA; font: 800 12px/1.2 var(--f-texte); letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.ticket-tete span { font-size: 16px; letter-spacing: .12em; color: var(--moutarde-fonce); }
.ticket blockquote { font-size: 19px; line-height: 1.38; }
.ticket cite { margin-top: 16px; padding-top: 12px; border-top: 1.5px dashed #CFC4AA; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--bordeaux); }
.passe-glisser { margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--gris-clair); }
.passe-glisser::after { content: "→"; color: var(--moutarde); font-size: 18px; }

@media (min-width: 900px) {
  .avis { padding-top: 120px; }
  .avis-haut { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: end; }
  .note-titre span { white-space: nowrap; }
  .avis-milieu { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: center; margin-top: 104px; }
  .avis-photo img { aspect-ratio: 1; max-height: 640px; }
  .avis-photo blockquote { padding: 0 40px 40px; font-size: 21px; }
  .passe { margin-top: 112px; padding: 64px 0 84px; }
  .passe-fleches { display: flex; }
  .tickets { gap: 26px; margin-top: 34px; padding-inline: max(var(--gouttiere), calc((100% - 1180px) / 2 + var(--gouttiere))); scroll-padding-inline: max(var(--gouttiere), calc((100% - 1180px) / 2 + var(--gouttiere))); }
  .ticket { flex-basis: 286px; }
  .passe-glisser { display: none; }
}
@media (hover: hover) { .ticket:hover { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .ticket { transition: none; } }

/* ───────── Réserver ───────── */
.contact { padding: 88px 0 110px; color: var(--blanc); background: radial-gradient(60% 40% at 100% 100%, rgba(232, 168, 35, .14), transparent 70%), var(--ardoise); }
.contact-grille { display: grid; gap: 44px; align-items: start; }
@media (min-width: 1000px) { .contact-grille { grid-template-columns: 1.15fr .85fr; gap: 64px; } }
.etat-grand { margin-top: 18px; }
.demande { margin-top: 28px; display: grid; gap: 22px; padding: 24px 20px; background: rgba(255, 255, 255, .04); border: 1px solid var(--filet-sombre); border-radius: 6px; }
@media (min-width: 600px) { .demande { padding: 30px 28px; } }
.demande-apercu { font: italic 400 19px/1.45 var(--f-titre); color: #E8E1D1; padding: 14px 16px; border-left: 2px solid var(--moutarde); }
.grand-tel { display: inline-block; font: 500 clamp(36px, 7.4vw, 54px)/1 var(--f-titre); letter-spacing: -.01em; color: var(--blanc); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.grand-tel:hover { color: var(--moutarde); }
.demande .actions { margin-top: 0; }

.horaires { width: 100%; border-collapse: collapse; font-size: 16px; }
.horaires th, .horaires td { padding: 12px 0; border-bottom: 1px solid var(--filet-sombre); text-align: left; vertical-align: top; }
.horaires th { font-weight: 600; width: 36%; }
.horaires td { color: #E8E1D1; }
.horaires td span { color: var(--moutarde); padding: 0 4px; }
.horaires tr.ferme td { color: var(--gris-clair); }
.horaires tr.aujourdhui th, .horaires tr.aujourdhui td { color: var(--moutarde); }
.horaires tr.aujourdhui th::after { content: "aujourd'hui"; display: block; font-weight: 500; font-size: 13px; letter-spacing: .04em; }
.adresse { margin-top: 28px; line-height: 1.5; color: #E8E1D1; display: grid; gap: 4px; }
.adresse b { font: 500 24px/1.1 var(--f-titre); color: var(--blanc); margin-bottom: 6px; }
.adresse .lien { margin-top: 10px; justify-self: start; }
.pratique { display: grid; gap: 8px; margin-top: 26px; font-size: 15px; color: var(--gris-clair); }
.pratique li { display: flex; align-items: baseline; gap: 10px; }
.pratique li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--moutarde); transform: translateY(-2px); }

/* ───────── Pied et barre ───────── */
.pied { background: var(--ardoise); color: var(--gris-clair); border-top: 1px solid var(--filet-sombre); padding: 28px 0 calc(96px + env(safe-area-inset-bottom)); font-size: 14px; }
.pied-grille { display: grid; gap: 14px; }
.marque-pied { color: var(--blanc); }
.pied a { color: var(--blanc); }
@media (min-width: 800px) { .pied { padding-bottom: 40px; } .pied-grille { grid-template-columns: auto 1fr; gap: 32px; align-items: center; } }

.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; padding: 10px var(--gouttiere); padding-bottom: max(10px, env(safe-area-inset-bottom)); background: rgba(38, 51, 59, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--filet-sombre); transform: translateY(110%); transition: transform .35s var(--courbe); }
.barre.visible { transform: none; }
.barre a { display: grid; place-items: center; min-height: 52px; border-radius: 4px; text-decoration: none; font: 800 16px/1 var(--f-texte); }
.barre-tel { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.barre-sms { background: var(--moutarde); color: var(--ardoise); }
@media (min-width: 800px) { .barre { display: none; } }

/* ───────── Mouvement ───────── */
.js .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .22em 0 .25em; margin: -.22em 0 -.25em; }
.js .mot > span { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform .7s var(--courbe), opacity .5s; transition-delay: calc(var(--i) * 70ms); }
.js .vu .mot > span, .js [data-mots].vu .mot > span { transform: none; opacity: 1; }
.js .apparait { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--courbe), transform .8s var(--courbe); transition-delay: var(--retard, 0ms); }
.js .apparait.vu { opacity: 1; transform: none; }
.js .heros-visuel { opacity: 0; transform: scale(.94); transition: opacity .9s var(--courbe), transform 1.1s var(--courbe); transition-delay: .25s; }
.js .heros.pret .heros-visuel { opacity: 1; transform: none; }
.js .heros.pret .assiette-anneau circle { transition: stroke-dashoffset 1.8s var(--courbe) .5s; stroke-dashoffset: 0; }
.js .heros-texte > :not(.heros-titre), .js .heros-texte .sur { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--courbe), transform .8s var(--courbe); }
.js .heros.pret .heros-texte > :not(.heros-titre) { opacity: 1; transform: none; }
.js .heros.pret .heros-chapo { transition-delay: .45s; } .js .heros.pret .etat { transition-delay: .6s; } .js .heros.pret .actions { transition-delay: .72s; } .js .heros.pret .confiance { transition-delay: .85s; }
.js .heros.pret .sur { transition-delay: 0s; }
.js .offre.vu .icone path, .js .offre.vu .icone circle { transition: stroke-dashoffset 1.4s var(--courbe) .25s; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .mot > span, .js .apparait, .js .heros-visuel, .js .heros-texte > *, .js .heros-texte .sur { opacity: 1 !important; transform: none !important; transition: none !important; }
  .assiette-anneau circle, .icone path, .icone circle { stroke-dashoffset: 0 !important; transition: none !important; }
  .etapes::after, .note-repartition i, .barres li i::after { transform: none !important; transition: none !important; }
  .etat.ouvert .etat-point { animation: none; }
  .bouton, .barre { transition: none; }
}
.services button:disabled { opacity: .45; cursor: not-allowed; }

/* ───────── Ce qui vit en continu (retouches du 12 octobre) ─────────
   Transform et opacity seulement ; tout s'arrête hors écran (classe .hors) et avec « réduire les animations ». */
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes defile { to { transform: translateX(-50%); } }

/* Les lueurs du haut de page dérivent lentement. */
.heros-lueurs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lueur { position: absolute; border-radius: 50%; }
.lueur-or { width: 70vmax; height: 70vmax; right: -30vmax; top: -35vmax; background: radial-gradient(closest-side, rgba(232, 168, 35, .24), transparent); animation: lueur-a 16s ease-in-out infinite alternate; }
.lueur-bordeaux { width: 60vmax; height: 60vmax; left: -28vmax; bottom: -30vmax; background: radial-gradient(closest-side, rgba(125, 36, 52, .5), transparent); animation: lueur-b 19s ease-in-out infinite alternate; }
@keyframes lueur-a { to { transform: translate(-12vmax, 12vmax) scale(1.15); } }
@keyframes lueur-b { to { transform: translate(16vmax, -10vmax) scale(.9); } }

/* L'assiette tourne lentement, son nom tourne autour en sens inverse. */
.assiette-cadre { --assiette: min(72vw, 440px); width: var(--assiette); margin-block: calc(var(--assiette) * .15); }
.assiette-photo { animation: tourne 90s linear infinite; }
.assiette-texte { position: absolute; inset: -14%; width: 128%; height: 128%; overflow: visible; pointer-events: none; animation: tourne 46s linear infinite reverse; }
.assiette-texte text { font: 700 4.6px var(--f-texte); letter-spacing: .22em; text-transform: uppercase; fill: var(--moutarde); }

/* Les rubans en biais qui défilent sans fin. */
.ruban { position: relative; z-index: 3; margin: -26px -4% 0; overflow: hidden; white-space: nowrap; transform: rotate(-2deg); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .55); }
.ruban-or { background: var(--moutarde); color: var(--ardoise); }
.ruban-or + .menu { padding-top: 72px; }
.ruban-bordeaux { margin: 0 -4% -26px; transform: rotate(1.6deg); background: var(--bordeaux); color: var(--papier); }
.ruban-piste { display: flex; width: max-content; animation: defile var(--duree, 30s) linear infinite; }
.ruban-bordeaux .ruban-piste { animation-direction: reverse; }
.ruban-piste span { display: inline-flex; align-items: center; gap: 22px; padding: 14px 0 14px 22px; font: italic 500 21px/1 var(--f-titre); }
.ruban-piste span::after { content: "✦"; font-style: normal; font-size: 13px; opacity: .7; }

/* Les deux assiettes respirent dans leur cadre. */
.photo-cadre { overflow: hidden; border-radius: 6px; box-shadow: 0 24px 50px -30px rgba(31, 42, 48, .6); }
.menu-photos .photo-cadre img { border-radius: 0; box-shadow: none; animation: respire 14s ease-in-out infinite alternate; }
.menu-photos .photo-cadre + .photo-cadre img { animation-delay: -7s; }
@keyframes respire { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, 1%); } }

/* Le parcours : un grand cercle d'assiette qui tourne au fond, une lueur qui court sur la ligne des étapes. */
.parcours .corps { position: relative; }
.parcours-cercle { position: absolute; width: min(130vw, 920px); aspect-ratio: 1; right: -32%; top: -12%; fill: none; stroke: rgba(232, 168, 35, .16); stroke-width: .6; stroke-dasharray: 1.5 3; pointer-events: none; animation: tourne 110s linear infinite; }
.parcours-cercle circle + circle { stroke: rgba(255, 255, 255, .06); stroke-dasharray: 6 4; }
.etape-num { z-index: 2; }
.etapes-ligne { position: absolute; left: 16px; top: 18px; bottom: 18px; width: 4px; overflow: hidden; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .6s ease 1.4s; }
.etapes.vu .etapes-ligne { opacity: 1; }
.etapes-ligne span { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, #FFE3A3 50%, transparent 62%); animation: etincelle-v 3.4s ease-in-out infinite; }
@keyframes etincelle-v { from { transform: translateY(-62%); } to { transform: translateY(62%); } }
@media (min-width: 900px) {
  .etapes-ligne { left: 18px; right: 18px; top: 16px; bottom: auto; width: auto; height: 4px; }
  .etapes-ligne span { background: linear-gradient(90deg, transparent 38%, #FFE3A3 50%, transparent 62%); animation-name: etincelle-h; }
  @keyframes etincelle-h { from { transform: translateX(-62%); } to { transform: translateX(62%); } }
}

.hors .lueur, .hors .assiette-photo, .hors .assiette-texte, .ruban.hors .ruban-piste, .hors .photo-cadre img, .hors .parcours-cercle, .hors .etapes-ligne span, .hors .citations-piste { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .lueur, .assiette-photo, .assiette-texte, .ruban-piste, .menu-photos .photo-cadre img, .parcours-cercle, .etapes-ligne span, .citations-piste { animation: none !important; }
  .etapes-ligne { display: none; }
}