/* =========================================================================
   Le P’tit Couz’ — site public
   DA du bar : brun profond, crème, or ; Tinos (le serif du logo) et Archivo en capitales espacées.
   Arcades de la place des Vosges, ardoises de bistrot, pointillés de carte. Mobile d’abord.
   ========================================================================= */
/* ---------- polices, hébergées sur le site (assets/fonts/, licence OFL à côté) ---------- */
/* Archivo variable (une police pour les graisses 400 à 800) et Tinos. Le sous-ensemble « latin » couvre tout le français ;
   « latin-ext » n’est téléchargé que si une page contient un de ses caractères. Noms versionnés : cache d’un an. */
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:400 800; font-stretch:100%; font-display:swap; src:url(fonts/archivo-v25-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:400 800; font-stretch:100%; font-display:swap; src:url(fonts/archivo-v25-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Tinos'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/tinos-v26-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Tinos'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/tinos-v26-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Tinos'; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/tinos-v26-400-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Tinos'; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/tinos-v26-400-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Tinos'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/tinos-v26-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Tinos'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/tinos-v26-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Tinos'; font-style:italic; font-weight:700; font-display:swap; src:url(fonts/tinos-v26-700-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Tinos'; font-style:italic; font-weight:700; font-display:swap; src:url(fonts/tinos-v26-700-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
  --ink:#1e0e05; --brun:#2b160a; --brun2:#3a1f0d; --brun3:#4b2a13;
  --creme:#f6eee2; --papier:#efe3cb; --papier2:#e6d4b2; --blanc:#fffaf2;
  --or:#bb7f3a; --or-l:#d6a461; --or-d:#7a5018; --or-line:#dcc59c;
  --txt:#2a1a0e; --muted:#6a5440; --promo:#b8322a; --rose:#e04a87;
  --serif:'Tinos','Times New Roman',Times,serif;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --top:66px; --r:16px; --wrap:1180px;
  --ease:cubic-bezier(.2,.75,.2,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --arcs:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='170'%3E%3Cpath d='M12 170V70a48 48 0 0 1 96 0v100' fill='none' stroke='%23d6a461' stroke-opacity='.07' stroke-width='1.2'/%3E%3C/svg%3E");
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--top) + 12px); }
body{ margin:0; background:var(--creme); color:var(--txt); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0 0 1em; }
h1,h2,h3{ margin:0; font-weight:400; }
button,input,select,textarea{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
.sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--or); color:var(--ink); padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none; }
.skip:focus{ top:12px; }
:focus-visible{ outline:3px solid var(--focus, var(--or-d)); outline-offset:3px; border-radius:6px; }
/* contour de focus : or foncé sur les fonds clairs (6:1 sur la crème), or sur les fonds bruns */
.skip,.top,.mnav,.dock,.hero,.sec-dark,.sec-resa,.phead-dark,.foot,.slate,.note-dark,.plan-slide{ --focus:var(--or); }
.resa-box,.slate-vin{ --focus:var(--or-d); }
::selection{ background:var(--or-l); color:var(--ink); }
.ic{ flex:none; }
.wrap{ width:min(var(--wrap), 100% - 40px); margin-inline:auto; }
.wrap-narrow{ width:min(780px, 100% - 40px); }
.center{ text-align:center; }
.small{ font-size:14px; color:var(--muted); }

/* ---------- typographie ---------- */
.kicker{ font:700 12.5px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--or-d); margin:0 0 14px; }
.kicker-light{ color:var(--or-l); }
.h1{ font:400 clamp(40px,6.2vw,78px)/1.02 var(--serif); letter-spacing:-.015em; }
.h2{ font:400 clamp(34px,4.6vw,58px)/1.04 var(--serif); letter-spacing:-.01em; margin-bottom:.35em; }
.h3{ font:700 22px/1.2 var(--serif); display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.h1 em,.h2 em{ font-style:italic; color:var(--or-d); }
.sec-dark .h2 em,.sec-resa .h2 em,.phead-dark .h1 em,.hero em{ color:var(--or-l); }
.lead{ font-size:clamp(17px,1.6vw,20px); line-height:1.6; color:var(--muted); max-width:38em; }
.sec-dark .lead,.sec-resa .lead,.phead-dark .lead{ color:rgba(246,238,226,.82); }
.link{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font:600 14px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--or-d); text-decoration:none; padding:10px 0; border-bottom:1.5px solid currentColor; }
.link .ic{ transition:transform .25s var(--ease); }
.link:hover .ic{ transform:translateX(4px); }
.link-light{ color:var(--or-l); }

/* ---------- boutons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border-radius:999px; border:1.5px solid transparent;
  font:700 14px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease; touch-action:manipulation; }
.btn .ic{ transition:transform .25s var(--ease); }
.btn:hover .ic{ transform:translateX(4px); }
.btn:active{ transform:scale(.97); }
.btn-lg{ min-height:56px; padding:0 30px; font-size:15px; }
.btn-sm{ min-height:40px; padding:0 16px; font-size:12.5px; }
.btn-gold{ background:var(--or); color:var(--ink); box-shadow:0 10px 24px -12px rgba(187,127,58,.9); }
.btn-gold:hover{ background:var(--or-l); }
.btn-dark{ background:var(--brun); color:var(--creme); }
.btn-dark:hover{ background:var(--brun3); }
.btn-ghost{ border-color:rgba(246,238,226,.55); color:var(--creme); }
.btn-ghost:hover{ border-color:var(--or-l); color:var(--or-l); }
.btn-line{ border-color:currentColor; background:transparent; }
.btn-line:hover{ color:var(--or-d); }
.btn-danger{ background:var(--promo); color:#fff; }
.btn-danger:hover{ background:#9c2720; }
.row-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:28px; }
.row-center{ justify-content:center; }

/* ---------- barre du haut ---------- */
.top{ position:sticky; top:0; z-index:60; background:rgba(33,16,7,.97); color:var(--creme); border-bottom:1px solid rgba(214,164,97,.2); }
@supports (backdrop-filter:blur(4px)){ .top{ background:rgba(33,16,7,.9); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); } }
.top-in{ height:var(--top); width:min(1320px, 100% - 32px); margin-inline:auto; display:flex; align-items:center; gap:18px; }
.top-logo{ flex:none; display:block; padding:4px 0; }
.tl{ position:relative; display:block; height:42px; aspect-ratio:862/343; }
.tl img{ position:absolute; inset:0; width:100%; height:100%; }
/* la virgule du logo se balance de temps en temps, et quand on survole le logo */
.tl-apos{ transform-origin:96.5% 30%; animation:tl-sway 7s ease-in-out 2.4s infinite; }
.top-logo:hover .tl-apos{ animation:tl-wiggle .9s ease-in-out; }
@keyframes tl-sway{ 0%,80%,100%{ transform:rotate(0); } 84%{ transform:rotate(-16deg); } 89%{ transform:rotate(10deg); } 94%{ transform:rotate(-4deg); } 97%{ transform:rotate(1.5deg); } }
@keyframes tl-wiggle{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-18deg); } 55%{ transform:rotate(11deg); } 80%{ transform:rotate(-4deg); } }
.top-status{ display:none; align-items:center; gap:8px; font:600 12px/1 var(--sans); letter-spacing:.06em; color:rgba(246,238,226,.75); white-space:nowrap; }
.top-status i{ width:8px; height:8px; border-radius:50%; background:#c9a27a; }
.top-status.is-open i{ background:#6fcf7c; box-shadow:0 0 0 0 rgba(111,207,124,.6); animation:pulse 2.4s infinite; }
.top-nav{ display:none; margin-left:auto; gap:4px; }
.top-nav a{ display:inline-flex; align-items:center; min-height:44px; font:600 12.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:rgba(246,238,226,.82); padding:0 12px; border-radius:999px; transition:color .2s ease, background-color .2s ease; }
.top-nav a:hover{ color:var(--or-l); background:rgba(214,164,97,.08); }
.top-nav a[aria-current]{ color:var(--or-l); }
.top-ig{ display:none; place-items:center; width:44px; height:44px; border-radius:50%; color:var(--creme); transition:color .2s ease, background-color .2s ease; }
.top-ig:hover{ color:var(--or-l); background:rgba(214,164,97,.1); }
.top-cta{ display:none; min-height:44px; padding:0 20px; font-size:13px; }
.top-burger{ margin-left:auto; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid rgba(246,238,226,.25); background:transparent; color:var(--creme); cursor:pointer; }
.mnav{ position:fixed; z-index:59; inset:var(--top) 0 0 0; background:var(--brun); background-image:var(--arcs); padding:28px 24px calc(28px + env(safe-area-inset-bottom)); overflow:auto; display:flex; flex-direction:column; gap:28px; }
.mnav nav{ display:flex; flex-direction:column; }
.mnav nav a{ font:400 32px/1.15 var(--serif); color:var(--creme); text-decoration:none; padding:12px 0; border-bottom:1px solid rgba(214,164,97,.18); }
.mnav-cta{ display:grid; gap:12px; }
.mnav-cta .btn-line{ color:var(--creme); }
@media (min-width:640px){ .top-status{ display:inline-flex; } .top-cta{ display:inline-flex; margin-left:auto; } .top-burger{ margin-left:0; } }
@media (min-width:1060px){
  .top-nav{ display:flex; } .top-ig{ display:grid; } .top-burger{ display:none; } .top-cta{ margin-left:0; }
  .tl{ height:46px; }
}
/* accueil : le grand logo suffit en haut de page. La barre y est transparente, posée sur le haut de page, sans petit logo
   ni état « ouvert » ; elle reprend son fond au défilement (ou menu ouvert) et son logo une fois le grand logo dépassé (site.js).
   La barre d'action attend que les boutons du haut soient dépassés. Sans JavaScript, rien ne change. */
.top{ transition:background-color .3s ease, border-color .3s ease; }
.top-logo,.top-status{ transition:opacity .3s ease, visibility 0s; }
@media (scripting:enabled){
  .page-home .hero{ margin-top:calc(-1 * var(--top)); padding-top:var(--top); }
  .page-home .top:not(.is-scrolled):not(.is-menu){ background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .page-home .top:not(.has-logo):not(.is-menu) .top-logo,.page-home .top:not(.has-logo):not(.is-menu) .top-status{ opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s .3s; }
  .page-home .dock:not(.is-ready){ opacity:0; visibility:hidden; transform:translateY(140%); }
}

/* ---------- barre d'action (téléphone) ---------- */
.dock{ position:fixed; z-index:55; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr auto auto; gap:6px; padding:6px;
  background:rgba(30,14,5,.94); border:1px solid rgba(214,164,97,.28); border-radius:20px; box-shadow:0 14px 40px -10px rgba(0,0,0,.55);
  transition:transform .35s var(--ease), opacity .3s ease, visibility 0s; }
.dock a{ text-decoration:none; display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; border-radius:15px; font:700 14px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.dock-main{ background:var(--or); color:var(--ink); }
.dock-btn{ flex-direction:column; gap:3px !important; min-width:64px; color:var(--creme); font-size:10.5px !important; letter-spacing:.06em !important; }
.dock.is-hidden{ transform:translateY(140%); opacity:0; pointer-events:none; visibility:hidden; transition:transform .35s var(--ease), opacity .3s ease, visibility 0s .35s; }
/* un élément atteint au clavier ne reste pas caché sous la barre (seulement quand elle est affichée) */
@media (max-width:899.98px){ html:has(.dock:not(.is-hidden)){ scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom)); } }
body{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
@media (min-width:900px){ .dock{ display:none; } body{ padding-bottom:0; } }

/* ---------- accueil : hero ---------- */
.hero{ position:relative; background:var(--brun); color:var(--creme); overflow:hidden; isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-1; background:
  radial-gradient(60% 55% at 78% 55%, rgba(187,127,58,.28), transparent 70%),
  radial-gradient(40% 40% at 10% 0%, rgba(214,164,97,.12), transparent 70%), var(--arcs), var(--brun); }
.hero-bg::after{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.18; mix-blend-mode:overlay; }
.hero-in{ display:grid; gap:44px; padding:34px 0 64px; align-items:center; }
.logo-anim{ position:relative; width:min(470px, 92%); aspect-ratio:862/343; margin:0 0 14px -4px; }
/* « Café · Bar · Ambiance » sous le logo, comme sur l'enseigne : entre deux filets dorés */
.hero-tag{ display:flex; align-items:center; gap:16px; width:min(470px, 92%); margin:0 0 30px -4px; font:700 12px/1 var(--sans); letter-spacing:.34em; text-transform:uppercase;
  color:var(--or-l); white-space:nowrap; animation:fade-up .9s var(--ease) 1.45s both; }
.hero-tag::before,.hero-tag::after{ content:""; flex:1; min-width:18px; height:1px; background:linear-gradient(90deg, transparent, rgba(214,164,97,.7)); }
.hero-tag::after{ background:linear-gradient(90deg, rgba(214,164,97,.7), transparent); margin-left:-.34em; }
.logo-anim img{ position:absolute; inset:0; width:100%; height:100%; }
.la-couz{ animation:la-couz 1.1s var(--ease) .1s both; }
.la-le{ animation:la-le .8s var(--ease) .65s both; }
.la-apos{ transform-origin:96.5% 30%; animation:la-apos 1.4s cubic-bezier(.3,.6,.3,1) 1.05s both, la-sway 7s ease-in-out 3.5s infinite; }
@keyframes la-couz{ from{ opacity:0; transform:translateY(22px) scale(.97); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes la-le{ from{ opacity:0; transform:translateX(-26px); } to{ opacity:1; transform:none; } }
@keyframes la-apos{ 0%{ opacity:0; transform:translateY(-40px) rotate(-40deg); } 35%{ opacity:1; transform:translateY(0) rotate(16deg); } 55%{ transform:rotate(-9deg); } 72%{ transform:rotate(5deg); } 86%{ transform:rotate(-2deg); } 100%{ opacity:1; transform:rotate(0); } }
@keyframes la-sway{ 0%,86%,100%{ transform:rotate(0); } 90%{ transform:rotate(-8deg); } 94%{ transform:rotate(5deg); } 97%{ transform:rotate(-2deg); } }
.hero-h{ font:400 clamp(26px,3.1vw,40px)/1.16 var(--serif); max-width:19em; margin-bottom:18px; animation:fade-up .9s var(--ease) .9s both; }
.hero-city{ font-style:italic; color:var(--or-l); }
.hero-sub{ color:rgba(246,238,226,.8); font-size:clamp(16px,1.4vw,18.5px); max-width:36em; animation:fade-up .9s var(--ease) 1.05s both; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 30px; animation:fade-up .9s var(--ease) 1.2s both; }
.quick{ animation:fade-up .9s var(--ease) 1.35s both; }
.quick-h{ display:flex; align-items:center; gap:10px; font:700 12px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--or-l); margin-bottom:12px; }
.quick-urgent{ color:#ffd9a8; font-weight:800; }
.pulse{ width:9px; height:9px; border-radius:50%; background:#6fcf7c; animation:pulse 2.4s infinite; }
.quick-list{ display:flex; flex-wrap:wrap; gap:8px; }
.quick-chip{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:76px; min-height:58px; padding:6px 12px; border-radius:14px; text-decoration:none;
  border:1px solid rgba(214,164,97,.45); background:rgba(214,164,97,.08); transition:background-color .2s ease, transform .2s var(--ease), border-color .2s ease; }
.quick-chip small{ font:600 10.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:rgba(246,238,226,.7); margin-bottom:5px; }
.quick-chip b{ font:700 21px/1 var(--serif); color:var(--creme); }
.quick-chip:hover{ background:rgba(214,164,97,.2); border-color:var(--or-l); transform:translateY(-2px); }
@keyframes fade-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(111,207,124,.55); } 70%{ box-shadow:0 0 0 10px rgba(111,207,124,0); } 100%{ box-shadow:0 0 0 0 rgba(111,207,124,0); } }

.hero-pic{ position:relative; width:min(460px, 100%); justify-self:center; padding:16px 16px 0; }
.hero-pic::before{ content:""; position:absolute; inset:0 0 -16px 0; border:1px solid rgba(214,164,97,.42); border-radius:50% 50% 22px 22px / 37% 37% 3% 3%; }
.arch{ position:relative; aspect-ratio:4/5; border-radius:50% 50% 16px 16px / 40% 40% 2.6% 2.6%; overflow:hidden; background:var(--brun2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75), inset 0 0 0 1px rgba(214,164,97,.35); }
.arch-img,.arch .ph{ width:100%; height:100%; object-fit:cover; }
.arch-key{ position:absolute; top:7px; left:50%; width:30px; height:18px; transform:translateX(-50%); background:var(--or); clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); }
.hero-art{ position:absolute; inset:0; background:radial-gradient(70% 55% at 50% 78%, #7a461d 0%, #4b2a13 38%, #2b160a 78%); color:var(--or-l); display:flex; align-items:flex-end; justify-content:center; }
.arcs{ position:absolute; inset:0; width:100%; height:100%; }
.arcs path{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 2.4s var(--ease) forwards; }
.arcs .a2{ opacity:.8; animation-delay:.25s; } .arcs .a3{ opacity:.6; animation-delay:.5s; } .arcs .a4{ opacity:.45; animation-delay:.75s; } .arcs .a5{ opacity:.3; animation-delay:1s; }
.arcs .floor{ opacity:.35; animation-delay:1.2s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.cup{ position:relative; margin-bottom:24%; color:var(--creme); animation:fade-up 1s var(--ease) 1.3s both; }
.cup-ic{ width:84px; height:84px; filter:drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
.steam{ position:absolute; bottom:72px; width:3px; height:34px; border-radius:3px; background:linear-gradient(transparent, rgba(246,238,226,.7), transparent); opacity:0; animation:steam 3.4s ease-in-out infinite; }
.s1{ left:28px; } .s2{ left:40px; animation-delay:1.1s; } .s3{ left:52px; animation-delay:2.2s; }
@keyframes steam{ 0%{ opacity:0; transform:translateY(10px) scaleY(.6); } 30%{ opacity:.9; } 100%{ opacity:0; transform:translateY(-34px) translateX(6px) scaleY(1.2); } }
.hero-art-cap{ position:absolute; bottom:6%; left:0; right:0; text-align:center; font:700 11px/1 var(--sans); letter-spacing:.28em; text-transform:uppercase; color:rgba(214,164,97,.85); margin:0; }
.hero-badge{ position:absolute; left:-6px; bottom:12%; width:122px; height:122px; border-radius:50%; background:var(--or); color:var(--ink); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transform:rotate(-9deg); box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  border:2px dashed rgba(30,14,5,.35); outline:6px solid var(--or); outline-offset:-1px; }
.hero-badge small{ font:700 10.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.hero-badge:focus-visible{ outline-color:var(--creme); }
.hero-badge b{ font:700 25px/1.05 var(--serif); margin:4px 0 2px; }
.hero-badge span{ font:italic 400 14px/1 var(--serif); }
@media (min-width:900px){
  .hero{ min-height:calc(100svh - var(--top)); display:flex; align-items:center; }
  @media (scripting:enabled){ .page-home .hero{ min-height:100svh; } }
  .hero-in{ grid-template-columns:1.08fr .92fr; gap:64px; padding:56px 0 80px; }
  .hero-pic{ justify-self:end; }
  .hero-badge{ left:-38px; width:136px; height:136px; }
}

/* ---------- bandeau qui défile ---------- */
/* il prolonge le haut de page (même brun, filet doré) et se termine en arcades qui s'ouvrent sur la section suivante */
.ticker{ --arc:46px; position:relative; z-index:1; margin-bottom:calc(-1 * var(--arc)); padding-bottom:var(--arc); overflow:hidden; color:var(--creme);
  background:var(--brun); border-top:1px solid rgba(214,164,97,.22);
  -webkit-mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--arc)) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='46'%3E%3Cpath d='M0 0h60v46h-6V29a24 24 0 0 0-48 0v17H0z'/%3E%3C/svg%3E") bottom left / 60px var(--arc) repeat-x;
          mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--arc)) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='46'%3E%3Cpath d='M0 0h60v46h-6V29a24 24 0 0 0-48 0v17H0z'/%3E%3C/svg%3E") bottom left / 60px var(--arc) repeat-x; }
.ticker::before{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.14; mix-blend-mode:overlay; pointer-events:none; }
.ticker-in{ display:flex; width:max-content; animation:marquee 70s linear infinite; }
.ticker:hover .ticker-in{ animation-play-state:paused; }
.ticker span{ display:flex; align-items:center; padding:16px 0 12px; font:italic 400 clamp(19px,1.9vw,23px)/1 var(--serif); white-space:nowrap; color:rgba(246,238,226,.88); }
.tk-arch{ width:11px; height:15px; margin:0 clamp(18px,2.4vw,30px); fill:none; stroke:var(--or-l); stroke-width:1.4; opacity:.75; transform:translateY(-1px); }
.ticker + .sec{ padding-top:calc(clamp(68px,9vw,124px) + 46px); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- sections ---------- */
.sec{ position:relative; padding:clamp(68px,9vw,124px) 0; }
.sec-paper{ background:var(--papier); }
.sec-paper::before{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.22; mix-blend-mode:multiply; pointer-events:none; }
.sec-paper > .wrap{ position:relative; }
.sec-cream{ background:var(--creme); }
.sec-dark{ background:var(--brun); background-image:var(--arcs); color:var(--creme); }
.sec-head{ max-width:780px; margin-bottom:clamp(30px,4vw,48px); }
.sec-head-row{ max-width:none; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 30px; }

/* ---------- aujourd'hui : ardoises ---------- */
.today{ display:grid; gap:18px; grid-template-columns:1fr; }
.slate{ position:relative; background:radial-gradient(120% 90% at 0% 0%, #3a2010 0%, var(--brun) 60%); color:var(--creme); border-radius:20px; padding:26px 24px 24px;
  border:1px solid rgba(214,164,97,.24); box-shadow:0 26px 50px -30px rgba(43,22,10,.9); overflow:hidden; display:flex; flex-direction:column; }
.slate::after{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.12; mix-blend-mode:screen; pointer-events:none; }
.slate > *{ position:relative; z-index:1; }
.slate .btn,.slate .link{ margin-top:auto; align-self:flex-start; }
.slate > :nth-last-child(2){ margin-bottom:20px; }
.slate-k{ display:flex; align-items:center; gap:8px; font:700 11.5px/1.3 var(--sans); letter-spacing:.17em; text-transform:uppercase; color:var(--or-l); margin-bottom:12px; }
.slate-t{ font:400 clamp(26px,2.4vw,32px)/1.1 var(--serif); margin-bottom:14px; }
.slate-t small{ font-size:15px; color:rgba(246,238,226,.6); }
.slate-line{ font:400 20px/1.35 var(--serif); margin:0 0 12px; }
.slate-line span{ display:block; font:700 11px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--or-l); margin-bottom:3px; }
.slate-small{ font-size:15px; color:rgba(246,238,226,.8); margin-bottom:10px; }
.slate-extra{ display:flex; flex-wrap:wrap; align-items:flex-end; align-items:last baseline; gap:4px 10px; font:400 17px/1.35 var(--serif); padding-top:12px; margin-top:4px; border-top:1px dashed rgba(214,164,97,.35); }
.slate-extra small{ flex:1 0 100%; font:700 10.5px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--or-l); }
.slate-extra span{ flex:1 1 auto; min-width:0; }
.slate-extra b{ color:var(--or-l); font-weight:700; white-space:nowrap; }
.slate-list{ list-style:none; margin:4px 0 0; padding:0; }
.slate-list li{ display:flex; align-items:baseline; gap:8px; padding:5px 0; font:400 18px/1.3 var(--serif); }
.slate-list i{ flex:1; border-bottom:1.5px dotted rgba(214,164,97,.45); transform:translateY(-4px); min-width:12px; }
.slate-list span{ min-width:0; }
.slate-list s{ font-size:14px; color:rgba(246,238,226,.5); white-space:nowrap; }
.slate-list b{ color:var(--or-l); font-weight:700; white-space:nowrap; }
.price-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px; }
.price-chips span{ display:inline-flex; align-items:baseline; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(214,164,97,.14); border:1px solid rgba(214,164,97,.4); font-size:13.5px; color:rgba(246,238,226,.85); }
.price-chips b{ font:700 19px/1 var(--serif); color:var(--or-l); }
.price-chips-dark span{ background:var(--brun); color:var(--creme); }
.pill-date{ display:inline-block; align-self:flex-start; padding:7px 13px; border:1.5px solid var(--or-l); border-radius:8px; font:700 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--or-l); margin-bottom:12px; }
/* Octobre Rose : même ardoise que les autres, éclairée de rose ; « 1 € reversé » mis en avant */
.slate-cause{ background:radial-gradient(85% 70% at 100% 0%, rgba(224,74,135,.26), transparent 62%), radial-gradient(120% 90% at 0% 0%, #3a2010 0%, var(--brun) 60%);
  border-color:rgba(224,74,135,.42); }
.slate-cause .slate-k{ color:#f7a8c8; }
.slate-cause .slate-list b{ color:#f7a8c8; }
.pledge{ display:flex; align-items:center; gap:12px; margin:2px 0 14px; padding:11px 14px; border-radius:14px; background:rgba(224,74,135,.12); border:1px solid rgba(224,74,135,.36); }
.pledge b{ flex:none; font:700 30px/1 var(--serif); color:#ff9fc6; }
.pledge span{ font-size:14.5px; line-height:1.4; color:rgba(246,238,226,.86); }
.slate-recipe{ margin:12px 0 0; padding-top:10px; border-top:1px dashed rgba(224,74,135,.3); font:italic 400 15px/1.45 var(--serif); color:rgba(246,238,226,.72); }
.slate-recipe b{ display:block; font:700 10.5px/1.3 var(--sans); font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:#f7a8c8; margin-bottom:2px; }
.slate-vin{ background:var(--blanc); color:var(--txt); border-color:var(--or-line); box-shadow:0 20px 40px -30px rgba(43,22,10,.6); }
.slate-vin::after{ display:none; }
.slate-vin .slate-k{ color:var(--or-d); }
.slate-vin .slate-small{ color:var(--muted); }
.slate-vin .price-chips span{ background:var(--papier); color:var(--txt); border-color:var(--or-line); }
.slate-vin .price-chips b{ color:var(--or-d); }
.slate-vin .price-chips{ margin-top:auto; }
.slate-event{ background:linear-gradient(160deg, var(--brun3), var(--brun)); }
@media (min-width:700px){ .today{ grid-template-columns:repeat(2,1fr); } }
/* deux par ligne, une large et une étroite (midi + promo, Octobre Rose + vin…) : les ardoises d'une même ligne ont un contenu de même ampleur */
@media (min-width:1080px){
  .today{ grid-template-columns:repeat(12,1fr); grid-auto-flow:dense; gap:20px; }
  .today > .slate{ grid-column:span 5; }
  .today > .slate-midi,.today > .slate-cause{ grid-column:span 7; }
  .today > .slate-cause{ display:grid; grid-template-columns:1fr 1fr; column-gap:28px; align-content:start; }
  .today > .slate-cause > .slate-k,.today > .slate-cause > .slate-t{ grid-column:1 / -1; }
  .today > .slate-cause > .pledge{ grid-column:1; grid-row:3 / span 2; align-self:start; flex-direction:column; align-items:flex-start; }
  .today > .slate-cause > .slate-list{ grid-column:2; }
  .today > .slate-cause > .slate-recipe{ grid-column:2; }
}

/* ---------- blocs photo + texte ---------- */
.split-in{ display:grid; gap:44px; align-items:center; }
.frame{ position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/3; background:var(--papier2); box-shadow:0 34px 70px -40px rgba(43,22,10,.85); }
.frame-img,.frame .ph{ width:100%; height:100%; object-fit:cover; }
.frame-tilt{ transform:rotate(-1.6deg); }
.frame-tilt-r{ transform:rotate(1.4deg); }
.frame-arch{ aspect-ratio:4/5; border-radius:50% 50% 18px 18px / 40% 40% 3% 3%; max-width:460px; margin-inline:auto; }
.split-pic{ position:relative; }
.split-pic::after{ content:""; position:absolute; z-index:-1; inset:auto -14px -14px 24px; height:70%; border:1px solid var(--or); border-radius:24px; opacity:.5; }
.split{ isolation:isolate; }
.menu-card{ margin-top:26px; background:var(--blanc); border:1px solid var(--or-line); border-radius:18px; padding:22px 24px; box-shadow:0 22px 44px -34px rgba(43,22,10,.7); }
.mc-line{ display:grid; gap:2px; margin:0 0 14px; }
.mc-line span{ font:700 11px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--or-d); }
.mc-line b{ font:400 22px/1.3 var(--serif); }
.mc-prices{ display:flex; flex-wrap:wrap; gap:10px 28px; padding-top:14px; margin:4px 0 0; border-top:1px dashed var(--or-line); }
.mc-prices span{ display:flex; flex-direction:column; }
.mc-prices small{ font:600 12px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.mc-prices b{ font:700 32px/1.1 var(--serif); color:var(--brun); }
/* plat hors formule (bavette) : son étiquette, puis le plat sur sa propre ligne, pointillés, prix */
.mc-extra{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--or-line); }
.mc-extra-k{ margin:0 0 4px; font:700 11px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--or-d); }
.mc-extra-l{ display:flex; align-items:flex-end; align-items:last baseline; gap:10px; margin:0; }
.mc-extra-l b{ font:400 19px/1.35 var(--serif); color:var(--txt); }
.mc-extra-l i{ flex:1; min-width:14px; border-bottom:1.5px dotted rgba(43,22,10,.3); transform:translateY(-5px); }
.mc-extra-l span{ font:700 20px/1 var(--serif); color:var(--brun); white-space:nowrap; }
@media (min-width:900px){
  .split-in{ grid-template-columns:1fr 1fr; gap:72px; }
  .split-rev .split-pic{ order:2; }
}

/* ---------- visuels dessinés (à la place des photos) ---------- */
.art{ position:relative; width:100%; height:100%; min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; overflow:hidden; }
.art-dark{ background:radial-gradient(75% 65% at 50% 60%, #5b3417 0%, var(--brun2) 50%, var(--brun) 100%); color:var(--or-l); }
.art-light{ background:radial-gradient(75% 65% at 50% 60%, #fbf3e4 0%, var(--papier) 55%, var(--papier2) 100%); color:var(--or-d); }
.art::before{ content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.18; mix-blend-mode:overlay; }
.art-arch{ position:absolute; left:50%; top:50%; width:min(62%, 300px); aspect-ratio:3/4; transform:translate(-50%,-46%); border:1px solid currentColor; opacity:.4; border-radius:50% 50% 0 0 / 38% 38% 0 0; border-bottom:none; }
.art-arch::after{ content:""; position:absolute; inset:12px 12px 0; border:1px solid currentColor; border-bottom:none; border-radius:inherit; opacity:.6; }
.art-ic{ position:relative; width:56px; height:56px; opacity:.95; }
.art-cap{ position:relative; font:italic 400 clamp(18px,2vw,22px)/1.2 var(--serif); color:var(--creme); text-align:center; padding:0 18px; }
.art-light .art-cap{ color:var(--brun); }

/* ---------- carte : onglets ---------- */
/* rangées qui défilent : marge intérieure assez large pour le contour de focus (6 px), compensée par une marge négative */
.tabs-list{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:7px; margin:-5px -5px 25px; }
.tabs-list::-webkit-scrollbar{ display:none; }
.tab{ flex:none; display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 18px; border-radius:999px; border:1.5px solid rgba(43,22,10,.22); background:transparent;
  font:700 13px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--brun); cursor:pointer; transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
.tab:hover{ border-color:var(--brun); }
.tab[aria-selected="true"]{ background:var(--brun); color:var(--creme); border-color:var(--brun); }
.tab-pan{ display:grid; gap:30px; animation:fade-up .5s var(--ease) both; }
.pan-pic .frame{ aspect-ratio:4/3; }
@media (min-width:900px){ .tab-pan{ grid-template-columns:5fr 7fr; gap:56px; align-items:start; } .pan-pic .frame{ aspect-ratio:4/5; } }
/* « Toute la carte » : bien détaché des extraits, entre deux filets */
.carte-all{ display:flex; align-items:center; gap:clamp(14px,3vw,28px); margin:clamp(48px,6vw,72px) 0 0; }
.carte-all::before,.carte-all::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(122,80,24,.45)); }
.carte-all::after{ background:linear-gradient(90deg, rgba(122,80,24,.45), transparent); }
.carte-all .btn{ flex:none; }
@media (max-width:560px){ .carte-all::before,.carte-all::after{ display:none; } .carte-all .btn{ flex:1 1 100%; } }

/* ligne de carte : nom … prix */
.mlist{ list-style:none; margin:0 0 18px; padding:0; }
.mi{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; column-gap:10px; padding:9px 0; border-bottom:1px solid rgba(43,22,10,.08); }
.mi-n{ font:400 20px/1.3 var(--serif); }
.mi-n em{ font-size:15px; color:var(--muted); }
.mi-dots{ border-bottom:1.5px dotted rgba(43,22,10,.3); transform:translateY(-5px); min-width:16px; }
.mi-ps{ display:flex; gap:14px; white-space:nowrap; }
.mi-p{ display:inline-flex; align-items:baseline; gap:5px; font:700 19px/1.2 var(--serif); font-variant-numeric:tabular-nums; }
.mi-p small{ font:600 10.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.mi-p s{ font-size:14px; font-weight:400; color:var(--muted); }
.is-promo .mi-p{ color:var(--promo); }
.mi-note{ grid-column:1 / -1; font-size:14.5px; line-height:1.45; color:var(--muted); margin-top:3px; }
.tag-promo{ display:inline-block; vertical-align:3px; margin-left:4px; padding:3px 7px 2px; border-radius:4px; background:var(--promo); color:#fff; font:800 10px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.is-multi{ grid-template-columns:1fr auto; }
.is-multi .mi-dots{ display:none; }
@media (max-width:520px){
  .is-multi{ grid-template-columns:1fr; }
  .is-multi .mi-ps{ margin-top:4px; }
}

/* ---------- à l'affiche ---------- */
.fest{ position:relative; background:linear-gradient(150deg, rgba(214,164,97,.10), rgba(214,164,97,.02)); border:1px solid rgba(214,164,97,.3); border-radius:24px; padding:clamp(22px,3vw,36px); margin-bottom:22px; }
.fest-k{ font:700 max(min(9vw,40px), min(6vw,74px))/.95 var(--serif); overflow-wrap:break-word; letter-spacing:.03em; text-transform:uppercase; color:var(--creme); margin:0; }
.fest-sub{ font:italic 400 20px/1.3 var(--serif); color:var(--or-l); margin:8px 0 24px; }
.fest-weeks{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.fw{ border-radius:16px; padding:18px; background:rgba(30,14,5,.45); border:1px solid rgba(214,164,97,.18); }
.fw.is-now{ background:rgba(214,164,97,.12); border-color:var(--or-l); }
.fw-t{ font:800 14px/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.now{ display:inline-block; margin-left:6px; padding:3px 7px; border-radius:4px; background:var(--or); color:var(--ink); font-size:10px; letter-spacing:.12em; vertical-align:2px; }
.fw .slate-list li{ font-size:15.5px; padding:3px 0; gap:6px; }
.fw .slate-list i{ min-width:6px; }
/* Octobre Rose : un bloc à la hauteur de l'Oktoberfest, éclairé de rose, ruban dessiné en filigrane */
.rose{ position:relative; isolation:isolate; overflow:hidden; display:grid; gap:22px 48px; margin-bottom:22px; padding:clamp(22px,3vw,36px); border-radius:24px;
  background:radial-gradient(70% 120% at 100% 0%, rgba(224,74,135,.24), transparent 62%), linear-gradient(150deg, rgba(224,74,135,.09), rgba(214,164,97,.02));
  border:1px solid rgba(224,74,135,.4); }
.rose-k{ display:flex; align-items:center; gap:9px; margin:0 0 10px; font:700 12px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:#f7a8c8; }
.rose-t{ font:700 max(min(9vw,40px), min(6vw,74px))/.95 var(--serif); overflow-wrap:break-word; letter-spacing:.03em; text-transform:uppercase; color:#ffe3ee; margin:0; }
.pledge-lg{ margin:22px 0 0; max-width:34em; padding:14px 18px; }
.pledge-lg b{ font-size:clamp(34px,4vw,46px); }
.pledge-lg span{ font:italic 400 clamp(16px,1.6vw,19px)/1.4 var(--serif); }
.rose-body{ align-self:center; }
.rose-body .slate-list li{ font-size:clamp(18px,1.8vw,21px); padding:7px 0; }
.rose-body .slate-list b{ color:#ff9fc6; }
.rose-body .slate-list i{ border-bottom-color:rgba(224,74,135,.4); }
.rose-recipe{ margin:16px 0 0; padding-top:12px; border-top:1px dashed rgba(224,74,135,.32); font:italic 400 16px/1.5 var(--serif); color:rgba(246,238,226,.75); }
.rose-recipe b{ display:block; margin-bottom:3px; font:700 11px/1.3 var(--sans); font-style:normal; letter-spacing:.18em; text-transform:uppercase; color:#f7a8c8; }
.rose-ribbon{ position:absolute; z-index:-1; right:-18px; bottom:-34px; width:clamp(120px,16vw,190px); height:auto; fill:none; stroke:#e04a87; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; opacity:.16; transform:rotate(-12deg); }
@media (min-width:900px){ .rose{ grid-template-columns:1.1fr .9fr; } .rose-body{ padding-right:clamp(40px,8vw,130px); } }
@media (max-width:600px){ .rose-ribbon{ width:96px; right:-26px; bottom:-46px; opacity:.12; } }
.aff-row{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.aff-row:empty{ display:none; }
.aff-card{ --acc:var(--or-l); border-radius:20px; padding:24px; background:var(--brun2); border:1px solid rgba(214,164,97,.2); }
.aff-card[data-accent]{ --acc:var(--rose); }
.aff-ic{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; margin-bottom:16px; color:color-mix(in srgb, var(--acc) 60%, #fff); background:color-mix(in srgb, var(--acc) 16%, transparent); border:1px solid color-mix(in srgb, var(--acc) 45%, transparent); }
.aff-card p:last-child{ margin:0; color:rgba(246,238,226,.82); }

/* ---------- réservation ---------- */
.sec-resa{ background:radial-gradient(60% 60% at 15% 20%, rgba(187,127,58,.22), transparent 70%), var(--arcs), var(--brun); color:var(--creme); }
.resa-wrap{ display:grid; gap:34px; }
.resa-wrap > *,.resa-grid > *,.split-in > *,.tab-pan > *,.hero-in > *,.cols-2 > *,.phead-grid > *{ min-width:0; }
.resa-box{ background:var(--creme); color:var(--txt); border-radius:26px; padding:clamp(20px,3vw,34px); box-shadow:0 40px 90px -40px rgba(0,0,0,.8); border:1px solid rgba(214,164,97,.4); }
.ticks{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; }
.ticks li{ display:flex; gap:10px; align-items:flex-start; font-size:15.5px; }
.ticks .ic{ margin-top:3px; color:var(--or-d); }
.ticks-light li{ color:rgba(246,238,226,.88); }
.ticks-light .ic{ color:var(--or-l); }
.ticks-light a{ color:var(--or-l); }
@media (min-width:980px){ .resa-wrap{ grid-template-columns:4fr 7fr; gap:64px; align-items:start; } .resa-intro{ position:sticky; top:calc(var(--top) + 30px); } }

.rz{ position:relative; }
.rz-step{ border:0; margin:0 0 22px; padding:0 0 22px; border-bottom:1px solid var(--or-line); min-width:0; }
.rz-step legend{ display:flex; align-items:center; gap:12px; padding:0; margin-bottom:14px; font:400 23px/1.2 var(--serif); }
.rz-dayl{ font:600 13px/1 var(--sans); letter-spacing:.04em; color:var(--or-d); background:var(--papier); padding:6px 10px; border-radius:999px; }
.rz-num{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--brun); color:var(--creme); font:700 14px/1 var(--sans); flex:none; }
.rz-step.is-done .rz-num{ background:var(--or); color:var(--ink); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; display:inline-flex; cursor:pointer; }
.chip input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.chip span{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:50px; min-height:50px; padding:0 14px; border-radius:14px; border:1.5px solid var(--or-line); background:var(--blanc);
  font:700 17px/1 var(--sans); color:var(--txt); transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.chip:hover span{ border-color:var(--brun); }
.chip input:checked + span{ background:var(--brun); border-color:var(--brun); color:var(--creme); transform:translateY(-1px); box-shadow:0 10px 20px -12px rgba(43,22,10,.9); }
.chip input:focus-visible + span{ outline:3px solid var(--focus, var(--or-d)); outline-offset:2px; }
.chip.is-full span{ opacity:.45; text-decoration:line-through; cursor:not-allowed; background:transparent; }
.chip.is-full input{ cursor:not-allowed; }
/* « Plus de 8 ? » : demande de groupe (avec ou sans JavaScript) */
.chip-more{ margin-top:10px; text-decoration:none; }
.chip-more span{ flex-direction:row; flex-wrap:wrap; gap:4px 10px; min-height:48px; padding:8px 16px; border-style:dashed; background:transparent; font-size:14px; color:var(--or-d); }
.chip-more b{ font:700 14.5px/1.2 var(--sans); color:var(--brun); }
.chip-more small{ font:700 10.5px/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--or-d); }
.chip:active span{ transform:scale(.96); }
.days-wrap{ margin:-4px -7px -1px; overflow-x:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scroll-padding:0 7px; padding:6px 7px 9px; }
.days{ flex-wrap:nowrap; }
.chip-d{ scroll-snap-align:start; }
.chip-d span{ width:64px; height:80px; padding:0; gap:4px; }
.chip-d small{ font:600 10.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.chip-d b{ font:700 26px/1 var(--serif); }
.rz-other{ display:inline-flex; align-items:center; gap:10px; margin-top:10px; font-size:14.5px; color:var(--muted); cursor:pointer; flex-wrap:wrap; }
.rz-other input{ min-height:44px; padding:0 12px; border:1.5px solid var(--or-line); border-radius:12px; background:var(--blanc); font-size:16px; color:var(--txt); }
.slots{ min-height:60px; transition:opacity .2s ease; }
.slots.is-loading{ opacity:.45; }
.slots-g{ margin-bottom:12px; }
.slots-g.is-hint .slots-h{ color:var(--brun); }
.slots-h{ font:700 11.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--or-d); margin:0 0 9px; }
.chip-t span{ min-width:76px; font:700 18px/1 var(--serif); gap:4px; }
.chip-t small{ font:700 9.5px/1 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--promo); }
.chip-t input:checked + span small{ color:var(--or-l); }
.slots-none{ font-size:15px; color:var(--muted); background:var(--papier); border-radius:12px; padding:12px 14px; margin:0; }
.fields{ display:grid; gap:12px; grid-template-columns:1fr; align-items:start; }   /* une erreur sous un champ n’étire pas son voisin de ligne */
.f{ display:grid; gap:6px; }
.f > span{ font:600 13px/1.2 var(--sans); color:var(--txt); }
.f small{ font-weight:400; color:var(--muted); }
.f input,.f textarea,.field-input{ width:100%; min-height:52px; padding:12px 14px; border:1.5px solid var(--or-line); border-radius:14px; background:#fff; font-size:16px; color:var(--txt); transition:border-color .15s ease, box-shadow .15s ease; }
.f textarea{ min-height:80px; resize:vertical; margin-top:8px; }
.f input:focus,.f textarea:focus{ outline:none; border-color:var(--brun); box-shadow:0 0 0 4px rgba(187,127,58,.28); }
.f input[aria-invalid="true"]{ border-color:var(--promo); }
.rz-note summary{ display:block; min-height:44px; padding:12px 0; cursor:pointer; font:600 14px/1.4 var(--sans); color:var(--or-d); list-style:none; }
.rz-note summary::-webkit-details-marker{ display:none; }
.rz-note summary::before{ content:"+ "; }
.rz-note[open] summary::before{ content:"− "; }
.rz-note small{ font-weight:400; color:var(--muted); }
.check{ display:flex; gap:12px; align-items:flex-start; margin-top:4px; padding:12px 0; font-size:14px; line-height:1.45; color:var(--muted); cursor:pointer; }   /* toute la ligne se touche : 44 px au moins */
.check input{ width:22px; height:22px; margin:0; flex:none; accent-color:var(--brun); }
.rz-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; }
.rz-sum{ font:400 20px/1.3 var(--serif); margin:0; flex:1 1 220px; }
.rz-sum b{ color:var(--or-d); font-weight:700; }
.rz-go{ flex:1 1 auto; }
.rz-go[disabled],.rz-go[aria-disabled="true"]{ opacity:.6; cursor:progress; }
.rz-legal{ font-size:13px; color:var(--muted); margin:14px 0 0; }
.rz-err{ background:#fdecea; color:#8f1d14; border-left:4px solid var(--promo); border-radius:10px; padding:10px 14px; font-size:14.5px; margin:10px 0 0; }
.rz-err-top{ margin:0 0 18px; }
.rz-notice{ display:flex; gap:10px; align-items:flex-start; background:var(--papier); border-radius:12px; padding:12px 14px; font-size:15px; margin:0 0 20px; }
.rz-off .rz-lead{ font:400 22px/1.4 var(--serif); }
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (min-width:600px){ .fields{ grid-template-columns:1fr 1fr; } .f-wide{ grid-column:1 / -1; } .rz-go{ flex:0 0 auto; } }

/* ---------- réservation étape par étape ---------- */
/* Avec JavaScript, resa.js pose .is-wiz sur le formulaire : une étape à la fois, récapitulatif cliquable,
   calendrier du mois. Sans JavaScript, le formulaire complet ci-dessus reste tel quel. */
.rz.is-wiz{ container-type:inline-size; }
.rz-head{ margin:0 0 4px; }

/* récapitulatif : un ticket en trois cases, pointillés de carte */
.rz-recap{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); background:var(--papier); border:1px solid var(--or-line); border-radius:18px; overflow:hidden; }
.rz-recap li{ display:flex; min-width:0; }
.rz-recap li + li{ border-left:1px dashed rgba(122,80,24,.35); }
.rz-pill{ position:relative; flex:1; min-width:0; min-height:62px; padding:10px 8px 11px; border:0; background:transparent; color:var(--txt); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; transition:background-color .2s ease; -webkit-tap-highlight-color:transparent; }
.rz-pill small{ font:700 10px/1 var(--sans); letter-spacing:.17em; text-transform:uppercase; color:var(--or-d); }
.rz-pill b{ max-width:100%; font:700 18px/1.1 var(--serif); color:var(--brun); text-align:center; }
.rz-pill.is-empty b{ font-weight:400; color:rgba(106,84,64,.5); }
.rz-pill:disabled{ cursor:default; }
.rz-pill:disabled small{ opacity:.55; }
.rz-pill[aria-current="step"]{ background:var(--blanc); }
.rz-pill[aria-current="step"] small{ color:var(--brun); opacity:1; }
.rz-pill:focus-visible{ outline-offset:-4px; border-radius:15px; }
/* téléphone : « Personnes » et « Heure » prennent la place de leur contenu, la date (« sam. 28 nov. ») le reste */
@container (max-width:479px){ .rz-recap{ grid-template-columns:minmax(max-content, 1fr) minmax(0, 1.4fr) minmax(max-content, 1fr); } }

/* progression : un filet d’or qui avance d’un quart à chaque étape */
.rz-prog{ height:3px; margin:12px 6px 0; border-radius:3px; background:rgba(122,80,24,.13); overflow:hidden; }
.rz-prog i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--or-l), var(--or)); transform:scaleX(.25); transform-origin:left center; transition:transform .4s var(--ease); }
.rz[data-at="2"] .rz-prog i{ transform:scaleX(.5); }
.rz[data-at="3"] .rz-prog i{ transform:scaleX(.75); }
.rz[data-at="4"] .rz-prog i{ transform:none; }

.rz-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 2px; }
.rz-back{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px 0 6px; margin-left:-6px; border:0; border-radius:999px; background:transparent; cursor:pointer;
  font:700 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--or-d); transition:background-color .2s ease, color .2s ease, opacity .2s ease; }
.rz-back .ic{ transition:transform .2s var(--ease); }
.rz-back.is-off{ visibility:hidden; opacity:0; }
.rz-count{ margin:0; font:600 11.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.rz-count b{ color:var(--brun); font-weight:800; }

/* une étape à la fois ; la boîte suit la hauteur en douceur (resa.js) */
.rz.is-wiz .rz-step{ display:none; margin:0; padding:6px 0 0; border:0; }
.rz.is-wiz .rz-step.is-on{ display:block; }
.rz.is-wiz .rz-step:focus{ outline:none; }
.rz.is-wiz .rz-num{ display:none; }
.rz.is-wiz .rz-step legend{ flex-wrap:wrap; gap:8px 12px; margin-bottom:18px; font-size:27px; line-height:1.15; }
.rz.is-wiz .rz-other{ display:none; }
.rz.is-wiz:not([data-at="4"]) .rz-bottom,.rz.is-wiz:not([data-at="4"]) .rz-legal{ display:none; }
.rz-stage.is-morph{ transition:height .3s var(--ease); overflow:hidden; }
.rz.is-busy .rz-stage{ cursor:progress; }
.rz-step.is-fwd{ animation:rz-in .28s var(--ease) both; }
.rz-step.is-back{ animation:rz-in-b .28s var(--ease) both; }
@keyframes rz-in{ from{ opacity:0; transform:translateX(22px); } to{ opacity:1; transform:none; } }
@keyframes rz-in-b{ from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:none; } }
@container (min-width:480px){ .rz.is-wiz .rz-step legend{ font-size:30px; } }

/* messages d’étape (jour complet, créneau pris…) */
.rz-info{ background:var(--papier); color:var(--txt); border-left:4px solid var(--or); border-radius:10px; padding:10px 14px; font-size:14.5px; line-height:1.45; }
.rz-step > .rz-msg{ margin:0 0 16px; }
.rz-stage > .rz-msg{ margin:18px 0 0; }

/* 1. personnes : de grandes touches, quatre par ligne sur téléphone, une seule ligne quand il y a la place */
.rz.is-wiz .chips-n{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.rz.is-wiz .chip-n{ display:flex; }
.rz.is-wiz .chip-n span{ flex:1; min-height:60px; border-radius:16px; font:700 24px/1 var(--serif); }
.rz.is-wiz .chip-more{ display:flex; margin-top:12px; }
.rz.is-wiz .chip-more span{ flex:1; }
@container (min-width:520px){ .rz.is-wiz .chips-n{ grid-template-columns:repeat(auto-fit, minmax(54px, 1fr)); } }

/* 2. jour : les puces des prochains jours (le bord droit s’estompe : on devine qu’il y en a d’autres), puis le calendrier du mois */
.rz.is-wiz .days-wrap{ -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
.rz.is-wiz .days{ padding-right:26px; }
.rz-caltg{ display:inline-flex; align-items:center; gap:10px; min-height:46px; margin-top:12px; padding:0 18px 0 16px; border:1.5px solid var(--or-line); border-radius:999px; background:var(--blanc); cursor:pointer;
  font:700 12.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--brun); transition:border-color .2s ease, background-color .2s ease; }
.rz-caltg[aria-expanded="true"]{ background:var(--papier); border-color:var(--or); }
.rz-caltg-ic{ transition:transform .25s var(--ease); }
.rz-caltg[aria-expanded="true"] .rz-caltg-ic{ transform:rotate(180deg); }
.rz-cal{ max-width:440px; margin-top:14px; padding-top:10px; border-top:1px dashed var(--or-line); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cal-m{ margin:0; font:700 20px/1.2 var(--serif); color:var(--brun); }
.cal-nav{ display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; border:1.5px solid var(--or-line); background:var(--blanc); color:var(--brun); cursor:pointer; transition:border-color .2s ease, opacity .2s ease; }
.cal-nav:disabled{ opacity:.3; cursor:default; }
.cal-grid{ width:100%; margin-top:4px; border-collapse:collapse; table-layout:fixed; }
.cal-grid th{ padding:8px 0 6px; font:700 10.5px/1 var(--sans); letter-spacing:.12em; color:var(--muted); text-align:center; }
.cal-grid td{ padding:0; text-align:center; }
.cal-d{ display:grid; place-items:center; width:100%; height:46px; padding:0; border:0; background:transparent; cursor:pointer; color:var(--txt);
  font:600 15px/1 var(--sans); font-variant-numeric:tabular-nums; -webkit-tap-highlight-color:transparent; }
.cal-d span{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; transition:background-color .15s ease, color .15s ease, transform .15s ease; }
.cal-d:not([aria-disabled]):active span{ transform:scale(.92); }
.cal-d.is-today span{ box-shadow:inset 0 0 0 1.5px var(--or); }
.cal-d.is-sel span{ background:var(--brun); color:var(--creme); box-shadow:0 8px 16px -10px rgba(43,22,10,.9); }
.cal-d[aria-disabled]{ cursor:not-allowed; }
.cal-d.is-off{ color:rgba(106,84,64,.36); }
.cal-d.is-full{ color:rgba(106,84,64,.62); }
.cal-d.is-full span{ text-decoration:line-through; text-decoration-color:var(--promo); }
.cal-d:focus-visible{ outline:none; }
.cal-d:focus-visible span{ outline:3px solid var(--focus, var(--or-d)); outline-offset:1px; }
.cal-key{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:10px 0 0; font:600 12px/1.3 var(--sans); color:var(--muted); }
.cal-key s{ text-decoration-color:var(--promo); color:rgba(106,84,64,.62); }
.cal-key i{ font-style:normal; color:rgba(106,84,64,.36); }

/* 3. heure : des touches régulières, groupées midi / soir */
.rz.is-wiz .slots .chips{ display:grid; grid-template-columns:repeat(auto-fill, minmax(68px, 1fr)); gap:8px; }
.rz.is-wiz .chip-t{ display:flex; }
.rz.is-wiz .chip-t span{ flex:1; min-width:0; min-height:56px; padding:0 4px; }
.rz.is-wiz .slots-g{ margin-bottom:16px; }
.rz.is-wiz .slots-g:last-child{ margin-bottom:0; }
.rz-oday{ margin-top:14px; color:var(--brun); }
.rz-oday .ic{ width:16px; height:16px; }

/* 4. coordonnées et envoi */
.rz.is-wiz .rz-bottom{ margin-top:22px; padding-top:20px; border-top:1px solid var(--or-line); }
.rz.is-wiz .rz-sum span{ display:block; margin-top:5px; font:700 11.5px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.rz-foot{ display:flex; justify-content:flex-end; margin-top:20px; }
.rz-err-sum a{ color:inherit; }
.rz.is-wiz .rz-err-sum{ display:none; }   /* avec JavaScript, le parcours rouvre directement la bonne étape */
.rz .f input,.rz .f textarea{ scroll-margin-top:34px; }   /* le lien « À corriger plus bas » laisse voir l’intitulé du champ */
.f > .rz-err{ display:block; margin:2px 0 0; padding:8px 12px; font:400 14px/1.4 var(--sans); color:#8f1d14; }

/* petit téléphone : la boîte gagne quelques pixels pour garder des cases de calendrier de 44 px */
@media (max-width:400px){
  .resa-box:has(> .rz.is-wiz),.resa-main:has(> .rz.is-wiz){ margin-inline:-8px; padding-inline:12px; }
}

/* survol : seulement avec une souris (sur téléphone, le doigt laisserait la case suivante « survolée ») */
@media (hover:hover){
  .rz-pill:not(:disabled):hover{ background:rgba(255,250,242,.7); }
  .rz-back:hover{ color:var(--brun); background:rgba(187,127,58,.1); }
  .rz-back:hover .ic{ transform:translateX(-3px); }
  .rz-caltg:hover{ border-color:var(--brun); }
  .cal-nav:hover:not(:disabled){ border-color:var(--brun); }
  .cal-d:not([aria-disabled]):hover span{ background:var(--papier); }
}
@media (hover:none){ .rz.is-wiz .chip:hover input:not(:checked) + span{ border-color:var(--or-line); } }

/* ---------- Instagram ---------- */
.grid-ig{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.ig-tile{ position:relative; aspect-ratio:1; border-radius:16px; overflow:hidden; display:block; text-decoration:none; }
.tile-img,.ig-tile .ph{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ig-over{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(30,14,5,.45); color:var(--creme); opacity:0; transition:opacity .3s ease; }
.ig-tile:hover .ig-over,.ig-tile:focus-visible .ig-over{ opacity:1; }
.ig-tile:hover .ph{ transform:scale(1.05); }
@media (min-width:760px){ .grid-ig{ grid-template-columns:repeat(3,1fr); gap:14px; } }
@media (min-width:1100px){ .grid-ig{ grid-template-columns:repeat(6,1fr); } .ig-tile:nth-child(even){ transform:translateY(26px); } }

/* ---------- infos : plan dessiné du quartier, horaires, itinéraire ---------- */
/* Le plan (assets/img/plan-epinal.svg) est fabriqué d’après OpenStreetMap ; les étiquettes et l’épingle
   sont en HTML par-dessus (une image SVG ne charge pas les polices du site), placées par les classes .plan-at-*. */
.infos-plan{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }

/* la slide : cadre brun (comme les ardoises), clé de voûte des arcades, plan dedans */
.plan-slide{ position:relative; margin:0; padding:12px 12px 0; border-radius:22px;
  background:radial-gradient(120% 90% at 0% 0%, #3a2010 0%, var(--brun) 60%); border:1px solid rgba(214,164,97,.28);
  box-shadow:0 34px 70px -40px rgba(43,22,10,.85); display:flex; flex-direction:column; }
.plan-key{ position:absolute; top:0; left:50%; width:32px; height:9px; transform:translateX(-50%); background:var(--or); clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); z-index:2; }
.plan{ position:relative; display:block; overflow:hidden; aspect-ratio:4/3; container:plan-frame / size; background:#f3e9d6; color:var(--ink); text-decoration:none;
  border-radius:14px; -webkit-tap-highlight-color:transparent; }
.plan:focus-visible{ border-radius:14px; outline-offset:4px; }
.plan::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(214,164,97,.45), inset 0 0 70px rgba(43,22,10,.16); }
/* la scène garde le format du cadre dessiné (3:2) : les repères y sont placés en %, ils restent en place.
   Le dessin la déborde de 310 unités au-dessus et au-dessous (viewBox 1200×1420) : un cadre plus haut que 3:2
   montre plus de quartier. La scène couvre le cadre en largeur, sans être plus de 1,28 fois plus large que lui
   (les repères ne sortent pas sur les côtés) ; le dessin couvre alors la hauteur jusqu’à un cadre de format 0,66.
   --fx : point de la scène (fraction de sa largeur) mis au centre du cadre, tant que la scène couvre le cadre */
.plan-stage{ --fx:.52; position:absolute; left:0; top:50%; width:100%; aspect-ratio:3/2; transform:translateY(-50%); transition:transform .3s var(--ease); font-size:12px;
  container:plan-stage / inline-size; }
@supports (width:1cqh){
  .plan-stage{ --sw:max(100cqw, min(150cqh, 128cqw)); width:var(--sw); left:clamp(calc(100cqw - var(--sw)), calc(50cqw - var(--sw) * var(--fx)), 0px);
    font-size:clamp(12px, 1.7cqw, 13.5px); }
}
.plan:hover .plan-stage{ transform:translateY(-50%) scale(1.02); }
/* fondu sur les bords haut et bas du dessin : ne se voit que si le cadre est encore plus haut */
.plan-bg{ position:absolute; left:0; top:-38.75%; width:100%; height:177.5%;
  -webkit-mask-image:linear-gradient(transparent, #000 3%, #000 97%, transparent); mask-image:linear-gradient(transparent, #000 3%, #000 97%, transparent); }

/* repères */
.plan-poi,.plan-pin,.plan-water{ position:absolute; pointer-events:none; }
.plan-poi{ display:flex; align-items:center; gap:.45em; transform:translate(-6px,-50%); }
.plan-poi.is-left{ flex-direction:row-reverse; transform:translate(calc(-100% + 6px),-50%); }
.plan-poi.is-up{ flex-direction:column-reverse; gap:.35em; transform:translate(-50%,calc(-100% + 10px)); }
/* repère secondaire : seulement quand le plan est assez grand pour qu’il ne touche pas les autres */
.plan-poi.plan-wide{ display:none; }
@container plan-stage (min-width:800px){ .plan-poi.plan-wide{ display:flex; } }
/* cadre étroit : « Basilique » seul, pour que l’étiquette tienne dans le cadre */
@container plan-frame (max-width:639.98px) or ((max-width:699.98px) and (max-aspect-ratio:13/10)){ .plan-long{ display:none; } }
/* petit téléphone : le nom de la Moselle toucherait l’étiquette de la gare (la rivière reste dessinée) */
@container plan-stage (max-width:479.98px){ .plan-water{ display:none; } }
.plan-dot{ flex:none; width:12px; height:12px; border-radius:50%; background:var(--brun); border:2px solid var(--blanc); box-shadow:0 1px 4px rgba(43,22,10,.35); }
.plan-p{ flex:none; display:grid; place-items:center; width:20px; height:20px; margin:0 -4px; border-radius:6px; background:var(--brun); color:var(--creme); font:800 12px/1 var(--sans); box-shadow:0 0 0 2px var(--blanc), 0 2px 5px rgba(43,22,10,.3); }
.plan-lbl{ font:600 1em/1.2 var(--sans); color:var(--ink); background:rgba(255,250,242,.95); padding:.38em .8em; border-radius:999px; white-space:nowrap; box-shadow:0 2px 10px rgba(43,22,10,.16); }
.plan-lbl small{ font:700 max(11px, .92em)/1 var(--sans); color:var(--or-d); margin-left:.4em; }
.plan-water{ transform:translate(-50%,-50%) rotate(var(--rot, 0deg)); font:italic 400 1.25em/1 var(--serif); letter-spacing:.06em; color:#5c7b76; white-space:nowrap; text-shadow:0 0 6px rgba(243,233,214,.6); }

/* l’épingle du P’tit Couz’ */
.plan-pin{ display:flex; flex-direction:column; align-items:center; transform:translate(-50%,-100%); z-index:2; }
.plan-pin-tag{ position:relative; background:var(--brun); color:var(--creme); border:1px solid rgba(214,164,97,.55); border-radius:12px; padding:.5em 1em .55em; margin-bottom:6px;
  text-align:center; white-space:nowrap; box-shadow:0 10px 22px -8px rgba(43,22,10,.7); font:700 1.4em/1.05 var(--serif); }
.plan-pin-tag::after{ content:""; position:absolute; left:50%; bottom:-6px; width:10px; height:10px; margin-left:-5px; background:var(--brun); border:solid rgba(214,164,97,.55); border-width:0 1px 1px 0; transform:rotate(45deg); }
.plan-pin-tag small{ display:block; margin-top:.35em; font:700 .5em/1.2 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--or-l); }
.plan-pin svg{ width:28px; height:36px; filter:drop-shadow(0 4px 5px rgba(43,22,10,.35)); }
.plan-pulse{ position:absolute; bottom:-8px; left:50%; width:18px; height:18px; margin-left:-9px; border-radius:50%; background:rgba(187,127,58,.5); z-index:-1; animation:plan-pulse 2.4s ease-out infinite; }
@keyframes plan-pulse{ 0%{ transform:scale(.5); opacity:1; } 100%{ transform:scale(3.4); opacity:0; } }
/* petit plan : l’étiquette passe à gauche de l’épingle, au-dessus elle couvrirait le parking Saint-Nicolas */
@container plan-stage (max-width:679.98px){
  .plan-pin-tag{ position:absolute; right:100%; top:38%; margin:0 10px 0 0; transform:translateY(-50%); }
  .plan-pin-tag::after{ left:auto; right:-6px; top:50%; bottom:auto; margin:-5px 0 0; border-width:1px 1px 0 0; }
}

/* invite « Itinéraire » dans le coin du plan */
.plan-hint{ position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 15px; border-radius:999px;
  background:var(--brun); color:var(--creme); font:700 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; box-shadow:0 10px 22px -10px rgba(43,22,10,.8);
  transition:background-color .2s ease, color .2s ease, transform .2s var(--ease); }
.plan-hint .ic{ transition:transform .25s var(--ease); }
.plan:hover .plan-hint,.plan:focus-visible .plan-hint{ background:var(--or); color:var(--ink); }
.plan:hover .plan-hint .ic,.plan:focus-visible .plan-hint .ic{ transform:translateX(3px); }
.plan:active .plan-hint{ transform:scale(.97); }

.plan-cap{ display:flex; align-items:center; justify-content:space-between; gap:6px 14px; flex-wrap:wrap; padding:2px 6px 4px; }
.plan-cap span{ font:700 11px/1.3 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--or-l); }
.plan-cap a{ display:inline-flex; align-items:center; min-height:44px; font-size:12.5px; color:rgba(246,238,226,.66); text-decoration:none; }
.plan-cap a:hover{ color:var(--or-l); text-decoration:underline; }
.plan-cap a:focus-visible{ outline-offset:-3px; }   /* contour dans le cadre brun, pas à cheval sur le plan clair */

/* positions (générées par gen_plan.py d’après OpenStreetMap — cadre 1200×800, 1,15 m par unité) */
.plan-at-bar{ left:63.33%; top:58.75%; }
.plan-at-gare{ left:15.77%; top:17.63%; }
.plan-at-basilique{ left:67.38%; top:63.2%; }
.plan-at-pk-nicolas{ left:50.46%; top:33.28%; }
.plan-at-pk-michel{ left:78.45%; top:42.3%; }
.plan-at-pk-marche{ left:57.87%; top:69.88%; }
.plan-at-moselle{ left:59.67%; top:17.75%; --rot:77deg; }

/* la carte des horaires */
.hc{ display:flex; flex-direction:column; gap:22px; background:var(--blanc); border:1px solid var(--or-line); border-radius:22px; padding:24px 20px 22px; box-shadow:0 20px 40px -30px rgba(43,22,10,.6); }
.hc-k{ display:flex; align-items:center; gap:8px; margin:0; font:700 12px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--or-d); }
.hc-where .hc-k{ margin-bottom:10px; }
.hc-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 14px; margin-bottom:12px; }
.hc-status{ display:inline-flex; align-items:center; gap:8px; margin:0; padding:7px 12px; border-radius:999px; background:var(--papier); color:var(--muted);
  font:700 11px/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.hc-status i{ width:8px; height:8px; border-radius:50%; background:#a8916f; }
.hc-status.is-open{ background:#e5efdc; color:#2f6b3a; }
.hc-status.is-open i{ background:#3f9a52; animation:pulse 2.4s infinite; }
.hc-hours{ list-style:none; margin:0; padding:0; }
.hc-hours li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 10px; border-bottom:1px dashed var(--or-line); font-size:15px; color:var(--muted); }
.hc-hours li:last-child{ border-bottom:0; }
.hc-hours b{ font-weight:600; color:var(--txt); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hc-hours .is-today{ background:var(--papier); border-radius:10px; border-bottom-color:transparent; color:var(--ink); font-weight:700; box-shadow:inset 3px 0 0 var(--or); }
.hc-hours .is-today b{ color:var(--or-d); font-weight:700; }
.hc-hours li:has(+ .is-today){ border-bottom-color:transparent; }
.hc-hours small{ margin-left:8px; font:700 9.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--or-d); }
.hc-where{ display:flex; flex-direction:column; }
.hc-when + .hc-where{ padding-top:20px; border-top:1px solid var(--or-line); }
.hc-place{ font:400 23px/1.22 var(--serif); color:var(--ink); margin:0 0 6px; }
.hc-access{ color:var(--muted); margin:0; font-size:15.5px; }
.hc-tel{ margin:8px 0 0; }
.hc-tel .link{ padding:8px 0; }
.hc-near{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; }
.hc-near li{ display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border-radius:999px; background:var(--papier); font:600 13px/1.2 var(--sans); color:var(--muted); }
.hc-near li i{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--brun); color:var(--creme); font:800 11px/1 var(--sans); font-style:normal; }
.hc-near li b{ color:var(--ink); font-weight:700; }
.hc-go{ width:100%; margin-top:20px; }
.hc-go-note{ margin:8px 0 0; text-align:center; font-size:12.5px; color:var(--muted); }
/* sans horaires renseignés : l’adresse seule, centrée dans la carte */
.hc-solo{ justify-content:center; }
.hc-solo .hc-place{ font-size:clamp(24px, 2.4vw, 30px); }

@media (min-width:600px){
  .plan-slide{ padding:14px 14px 0; border-radius:24px; }
  .plan-key{ width:36px; height:10px; }
  .plan,.plan:focus-visible{ aspect-ratio:3/2; border-radius:16px; }
  .hc{ padding:26px 28px 24px; }
}
/* tablette : plan en entier au-dessus, horaires et adresse côte à côte dessous */
@media (min-width:720px) and (max-width:959.98px){
  .hc{ display:grid; grid-template-columns:1.1fr 1fr; gap:0 36px; }
  .hc-when + .hc-where{ padding:0 0 0 34px; border-top:0; border-left:1px solid var(--or-line); }
  .hc-near{ margin-bottom:18px; }
  .hc-go{ margin-top:auto; }
  .hc-solo{ display:flex; }
  .hc-solo .hc-near{ margin-bottom:0; }
  .hc-solo .hc-go{ align-self:flex-start; width:auto; min-width:300px; margin-top:22px; }
  .hc-solo .hc-go-note{ align-self:flex-start; width:300px; }
}
/* tablette en paysage et ordinateur : le plan à gauche, à la hauteur de la carte des horaires */
@media (min-width:960px){
  .infos-plan{ grid-template-columns:minmax(0,1.85fr) minmax(350px,1fr); gap:24px; align-items:stretch; }
  .plan,.plan:focus-visible{ aspect-ratio:auto; flex:1 1 auto; min-height:440px; }
  .hc{ gap:18px; }
  .hc-where{ flex:1 1 auto; }
  .hc-go{ margin-top:auto; }
  .hc-near{ margin-bottom:20px; }
  .hc-solo .hc-where{ flex:0 0 auto; }
  .hc-solo .hc-near{ margin-bottom:0; }
  .hc-solo .hc-go{ margin-top:28px; }
}
/* téléphone : plan carré cadré entre la gare et la place, l’essentiel seulement */
@media (max-width:599.98px){
  .plan,.plan:focus-visible{ aspect-ratio:1; }
  .plan-opt{ display:none; }
  .plan-poi.is-left-sm{ flex-direction:row-reverse; transform:translate(calc(-100% + 6px),-50%); }
  .plan-pin-tag{ font-size:1.25em; padding:.4em .8em .45em; }
  .plan-pin-tag small{ display:none; }
  .plan-cap{ gap:0 10px; padding:0 2px 2px; }
  .plan-cap span{ font-size:11px; letter-spacing:.08em; }
  .plan-cap a{ font-size:11.5px; }
  .plan-hint{ right:8px; bottom:8px; min-height:34px; padding:0 12px; font-size:11px; }
  .plan-pin svg{ width:24px; height:31px; }
}
@supports (width:1cqh){
  @media (max-width:599.98px){ .plan-stage{ --fx:.445; --sw:150cqw; } }
}

/* choix de l’appli d’itinéraire */
/* écran peu haut (téléphone en paysage) : le dialogue défile dans son cadre */
.itin{ width:min(420px, calc(100% - 32px)); max-height:calc(100% - 24px); margin:auto; padding:0; border:1px solid var(--or-line); border-radius:24px; background:var(--blanc); color:var(--txt);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6); overflow:auto; overscroll-behavior:contain; }
.itin::backdrop{ background:rgba(30,14,5,.6); }
.itin[open]{ animation:itin-in .24s var(--ease); }
.itin[open]::backdrop{ animation:itin-fade .24s ease; }
@keyframes itin-in{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes itin-fade{ from{ opacity:0; } to{ opacity:1; } }
.itin-in{ position:relative; padding:26px 22px 18px; }
.itin-in .kicker{ margin-bottom:8px; }
.itin-t{ font:400 28px/1.1 var(--serif); margin:0 0 6px; padding-right:44px; }
.itin-d{ color:var(--muted); font-size:15px; margin:0 0 14px; }
.itin-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--or-line); }
.itin-list li{ border-bottom:1px solid var(--or-line); }
.itin-list li:last-child{ border-bottom:0; }
.itin-list a{ display:flex; align-items:center; gap:14px; min-height:60px; padding:8px 6px; color:var(--ink); text-decoration:none; border-radius:12px; font:400 20px/1.2 var(--serif);
  transition:background-color .2s ease; }
.itin-list a:hover{ background:var(--creme); }
.itin-list a > .ic:last-child{ margin-left:auto; color:var(--or-d); transition:transform .25s var(--ease); }
.itin-list a:hover > .ic:last-child{ transform:translateX(4px); }
.itin-ic{ flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--brun); color:var(--or-l); }
.itin-x{ position:absolute; top:12px; right:12px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; transition:background-color .2s ease, color .2s ease; }
.itin-x:hover{ background:var(--creme); color:var(--ink); }
body:has(.itin[open]){ overflow:hidden; }
@media (max-width:599.98px){
  /* sur téléphone : feuille en bas de l’écran, à portée de pouce */
  .itin{ width:100%; max-width:none; max-height:calc(100% - 12px); margin:auto 0 0; border-width:1px 0 0; border-radius:24px 24px 0 0; }
  .itin-in{ padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  @keyframes itin-in{ from{ transform:translateY(40px); opacity:.6; } to{ transform:none; opacity:1; } }
}
@media (max-height:480px){
  .itin-in{ padding-top:16px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  .itin-in .kicker{ margin-bottom:4px; }
  .itin-t{ font-size:24px; }
  .itin-d{ margin-bottom:8px; }
  .itin-list a{ min-height:50px; padding:4px 6px; }
}

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--or-line); }
.faq-i{ border-bottom:1px solid var(--or-line); }
.faq-i summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; cursor:pointer; list-style:none; font:400 clamp(19px,2vw,22px)/1.3 var(--serif); }
.faq-i summary::-webkit-details-marker{ display:none; }
.faq-ic{ color:var(--or-d); transition:transform .3s var(--ease); }
.faq-i[open] .faq-ic{ transform:rotate(180deg); }
.faq-a p{ color:var(--muted); margin:0 0 22px; max-width:46em; }
.sec-faq{ background:var(--creme); }

.sec-last{ padding:clamp(64px,8vw,104px) 0; }

/* ---------- pages intérieures ---------- */
.phead{ padding:clamp(44px,7vw,92px) 0 clamp(40px,6vw,72px); }
.phead-dark{ background:radial-gradient(50% 80% at 85% 30%, rgba(187,127,58,.24), transparent 70%), var(--arcs), var(--brun); color:var(--creme); }
.phead .h1{ margin-bottom:18px; }
.phead-compact{ padding:clamp(28px,4vw,52px) 0 clamp(26px,3.5vw,44px); }
.phead-compact .h1{ font-size:clamp(36px,5vw,62px); margin-bottom:10px; }
.phead-compact .lead{ margin-bottom:0; }
.crumbs{ font:600 12.5px/1.4 var(--sans); letter-spacing:.06em; color:rgba(246,238,226,.65); margin-bottom:26px; }
.crumbs a{ display:inline-flex; align-items:center; min-height:44px; margin:calc((1.4em - 44px) / 2) 0; color:var(--or-l); text-decoration:none; }   /* 44 px à toucher, sans changer la ligne */
.crumbs a:hover{ text-decoration:underline; }
.phead-grid{ display:grid; gap:36px; align-items:center; }
.phead-pic .frame{ aspect-ratio:4/3; }
@media (min-width:900px){ .phead-grid{ grid-template-columns:7fr 5fr; gap:60px; } }
.prose{ font-size:18px; line-height:1.7; }
.prose p{ color:var(--txt); }
.prose h2{ font:400 clamp(28px,3vw,38px)/1.15 var(--serif); margin:1.4em 0 .5em; }
.prose h3{ font:700 21px/1.3 var(--serif); margin:1.3em 0 .4em; }
.prose ul{ padding-left:1.2em; }
.prose a{ color:var(--or-d); }
.cols-2{ display:grid; gap:40px; }
@media (min-width:900px){ .cols-2{ grid-template-columns:7fr 5fr; gap:64px; align-items:start; } }
.note-card{ display:block; background:var(--blanc); border:1px solid var(--or-line); border-radius:20px; padding:24px; margin-bottom:16px; text-decoration:none; }
.note-dark{ background:var(--brun); color:var(--creme); border-color:rgba(214,164,97,.3); }
.note-dark .price-chips span{ color:var(--creme); }
.mini-line{ font:400 18px/1.35 var(--serif); margin:0 0 8px; }
.mini-line b{ display:block; font:700 10.5px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--or-l); }
.note-ig{ display:flex; gap:14px; align-items:center; background:linear-gradient(135deg, var(--brun2), var(--brun)); color:var(--creme); border:none; }
.note-ig .ic{ color:var(--or-l); }
.note-ig b{ display:block; font:700 18px/1.3 var(--serif); }
.note-ig span{ font-size:14.5px; color:rgba(246,238,226,.8); }
.resa-grid{ display:grid; gap:34px; }
.resa-main{ background:var(--creme); border-radius:26px; padding:clamp(18px,3vw,34px); border:1px solid var(--or-line); box-shadow:0 30px 80px -50px rgba(43,22,10,.8); }
.sec-resa-page{ background:var(--papier); padding-top:clamp(28px,4vw,48px); }
@media (min-width:980px){ .resa-grid{ grid-template-columns:7fr 4fr; gap:44px; align-items:start; } .resa-aside{ position:sticky; top:calc(var(--top) + 24px); } }
.links-row{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.link-card{ display:flex; flex-direction:column; gap:6px; padding:22px; border-radius:18px; background:var(--blanc); border:1px solid var(--or-line); text-decoration:none; transition:transform .25s var(--ease), border-color .2s ease; }
.link-card b{ font:400 22px/1.2 var(--serif); }
.link-card span{ font-size:14.5px; color:var(--muted); }
.link-card .ic{ color:var(--or-d); margin-top:6px; }
.link-card:hover{ transform:translateY(-3px); border-color:var(--or); }

/* ---------- carte complète ---------- */
.carte-bar{ position:sticky; top:var(--top); z-index:40; background:rgba(246,238,226,.94); border-bottom:1px solid var(--or-line); }
@supports (backdrop-filter:blur(4px)){ .carte-bar{ background:rgba(246,238,226,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } }
.carte-bar-in{ display:grid; gap:10px; padding:12px 0 10px; }
.search{ position:relative; display:flex; align-items:center; }
.search .ic{ position:absolute; left:16px; color:var(--muted); pointer-events:none; }
.search input{ width:100%; min-height:50px; padding:0 48px 0 46px; border-radius:999px; border:1.5px solid var(--or-line); background:#fff; font-size:16px; }
.search input:focus{ outline:none; border-color:var(--brun); box-shadow:0 0 0 4px rgba(187,127,58,.25); }
.search-x{ position:absolute; right:3px; width:44px; height:44px; border-radius:50%; border:0; background:transparent; display:grid; place-items:center; cursor:pointer; color:var(--muted); }
.cats{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:7px; margin:-7px -7px -5px; }
.cats::-webkit-scrollbar{ display:none; }
.cats a,.flt{ flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid rgba(43,22,10,.18); text-decoration:none;
  font:700 12px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--brun); background:transparent; cursor:pointer; white-space:nowrap; }
.cats a.is-on{ background:var(--brun); color:var(--creme); border-color:var(--brun); }
.flt[aria-pressed="true"]{ background:var(--or); border-color:var(--or); color:var(--ink); }
.flts{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.carte-count{ font-size:13.5px; color:var(--muted); margin-left:auto; }
.carte-body{ padding:28px 0 60px; }
.cat{ padding-top:30px; scroll-margin-top:calc(var(--top) + 150px); }
.cat-h{ display:flex; align-items:center; gap:16px; font:400 clamp(32px,4vw,46px)/1.1 var(--serif); margin-bottom:6px; }
.cat-h::after{ content:""; flex:1; height:2px; background:linear-gradient(90deg, var(--or), transparent); }
.cat-sub{ font:700 11.5px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--or-d); margin-bottom:10px; }
.blk{ margin-top:18px; }
.blk-h{ font:700 12.5px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--or-d); margin:0 0 4px; }
.blk-tags{ font:italic 400 17px/1.5 var(--serif); color:var(--muted); margin:6px 0 0; }
.fmt-head{ display:flex; justify-content:flex-end; gap:14px; font:700 10.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:4px 0; }
@media (min-width:900px){ .cat .mlist{ columns:2; column-gap:56px; } .cat .mi{ break-inside:avoid; } }
.carte-empty{ text-align:center; padding:50px 0; font:italic 400 22px/1.4 var(--serif); color:var(--muted); }
.carte-note{ font-size:14px; color:var(--muted); text-align:center; margin-top:40px; }
.cat.is-hidden,.blk.is-hidden,.mi.is-hidden{ display:none; }
mark{ background:rgba(214,164,97,.45); color:inherit; border-radius:3px; padding:0 1px; }

/* ---------- confirmation ---------- */
.merci{ background:var(--papier); padding:clamp(36px,6vw,80px) 0; }
.merci-card{ position:relative; background:var(--blanc); border:1px solid var(--or-line); border-radius:28px; padding:clamp(26px,5vw,52px); text-align:center; box-shadow:0 40px 90px -50px rgba(43,22,10,.8); margin-bottom:22px; }
.merci-card .h1{ font-size:clamp(34px,5vw,56px); margin-bottom:12px; }
.merci-card .lead{ margin-inline:auto; }
.merci-seal{ display:grid; place-items:center; width:78px; height:78px; margin:0 auto 18px; border-radius:50%; background:var(--or); color:var(--ink); box-shadow:0 0 0 8px rgba(187,127,58,.18); animation:pop .7s var(--ease) both; }
@keyframes pop{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
.recap{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--or-line); border:1px solid var(--or-line); border-radius:16px; overflow:hidden; margin:26px 0; text-align:left; }
.recap div{ background:var(--creme); padding:14px 16px; }
.recap dt{ font:700 10.5px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--or-d); }
.recap dd{ margin:4px 0 0; font:400 20px/1.25 var(--serif); }
.merci-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:16px; }
.merci-actions .btn-line{ color:var(--brun); }
.ig-banner{ display:flex; align-items:center; gap:18px; padding:22px 24px; border-radius:22px; text-decoration:none; color:var(--creme);
  background:radial-gradient(80% 140% at 0% 0%, #7a461d, var(--brun) 70%); border:1px solid rgba(214,164,97,.35); margin-bottom:26px; transition:transform .25s var(--ease); }
.ig-banner:hover{ transform:translateY(-2px); }
.ig-banner span{ flex:1; font-size:15px; color:rgba(246,238,226,.85); }
.ig-banner b{ display:block; font:400 24px/1.2 var(--serif); color:var(--creme); }
.ig-banner .ic{ color:var(--or-l); }

/* ---------- pied de page ---------- */
.foot{ background:var(--ink); color:rgba(246,238,226,.78); padding:64px 0 28px; font-size:15px; }
.foot-in{ width:min(var(--wrap), 100% - 40px); margin-inline:auto; display:grid; gap:34px; grid-template-columns:1fr; }
.foot-brand img{ width:190px; height:auto; margin-bottom:6px; }
.foot-tag{ font:700 11px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--or-l); margin-bottom:16px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.foot-links a,.foot-nav a{ display:inline-flex; align-items:center; gap:7px; min-height:44px; text-decoration:none; color:rgba(246,238,226,.85); }
.foot-links a:hover,.foot-nav a:hover{ color:var(--or-l); }
.foot-nav{ display:flex; flex-direction:column; }
.foot-h{ font:700 11.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--or-l); margin:0 0 12px; }
.foot-h2{ margin-top:18px; }
.foot-legal{ width:min(var(--wrap), 100% - 40px); margin:44px auto 0; padding-top:20px; border-top:1px solid rgba(214,164,97,.18); font-size:12.5px; color:rgba(246,238,226,.55); }
@media (min-width:760px){ .foot-in{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }

/* ---------- apparition au défilement (si JavaScript) ---------- */
.js .rv:not(.in){ opacity:0; transform:translateY(22px); }
.js .rv{ transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .frame-tilt.rv:not(.in){ transform:translateY(22px) rotate(-1.6deg); }

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto; }
  .js .rv:not(.in){ opacity:1; transform:none; }
  .ticker-in{ animation:none; }
  .steam{ display:none; }
}

/* ---------- impression ---------- */
@media print{
  .top,.dock,.ticker,.foot,.carte-bar,.rz,.hero-pic,.plan-hint,.itin,.plan-pulse{ display:none !important; }
  body{ background:#fff; padding:0; }
  .sec,.hero,.phead-dark,.sec-dark{ background:#fff !important; color:#000 !important; padding:16px 0; }
  .page-home .hero{ margin-top:0; padding-top:16px; }
}

/* ---------- à l'affiche (page) ---------- */
.ev-list{ margin-bottom:28px; }
.ev-poster{ width:100%; height:auto; border-radius:12px; margin-bottom:16px; aspect-ratio:4/5; object-fit:cover; }
.ev-gap{ margin-top:clamp(40px,6vw,70px); }
.aff-card .btn{ margin-top:8px; }
.aff-card p b{ color:var(--or-l); }

/* ---------- petits écrans ---------- */
@media (max-width:560px){
  .btn{ white-space:normal; text-align:center; line-height:1.2; max-width:100%; }
  .btn-sm{ min-height:44px; }
  .row-cta .btn,.phead .row-cta .btn{ flex:1 1 100%; }
  /* haut de l'accueil : les deux boutons sur une ligne s'il y a la place (libellés courts, le texte complet reste pour les
     lecteurs d'écran), les 3 prochaines tables libres sur une ligne */
  .hero-cta{ gap:10px; margin:24px 0 26px; }
  .hero-cta .btn{ flex:1 1 auto; padding:0 18px; white-space:nowrap; }
  .hero-cta .btn-gold{ flex-grow:1.4; }
  .hero-cta-x{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .quick-list{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .quick-chip{ min-width:0; padding:6px 4px; }
  .quick-chip:nth-child(n+4){ display:none; }
  .row-cta .link{ margin-inline:auto; }
  .h2{ font-size:clamp(32px,8.6vw,40px); }
  .chip-t span{ min-width:64px; padding:0 6px; font-size:17px; }
  .chips{ gap:7px; }
}
@media (max-width:360px){ .quick-chip small{ font-size:10px; letter-spacing:.05em; } }