/* =====================================================================
   LE FIN GOURMAND — Design System v4
   Direction : Brasserie héritage moderne  ·  Andmore © 2026
   Palette : Crème · Bleu marine · Laiton   (inchangée depuis v2)
   Typo    : Fraunces · Inter               (inchangée depuis v2)
   Refonte v3 : rythme respirant, motion fluide, surfaces adoucies.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Papiers (fonds clairs) */
  --paper:#F7F6F1;          /* crème principale (fond page) */
  --paper-2:#FFFFFF;        /* crème alt (cartes, sections) */
  --paper-3:#E7E5DC;        /* crème profonde (bordures douces) */

  /* Bleu marine (encre + panneaux sombres) */
  --green:#020234;
  --green-2:#020234;
  --green-ink:#020234;

  /* Crème sur marine */
  --cream:#F2F5F9;
  --cream-soft:rgba(242,245,249,.74);
  --cream-faint:rgba(242,245,249,.42);

  /* Métaux & accent */
  --brass:#B08A3E;
  --brass-deep:#8C6A28;
  --brass-light:#D6B662;
  --oxblood:#A87C2C;
  --oxblood-2:#C6A045;

  /* Encre sur crème */
  --ink:#020234;
  --ink-soft:rgba(2,2,52,.66);
  --ink-faint:rgba(2,2,52,.36);

  /* Filets */
  --line:rgba(176,138,62,.30);
  --line-soft:rgba(2,2,52,.10);
  --line-g:rgba(214,182,98,.24);

  /* Typo */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'Inter','Helvetica Neue',Arial,sans-serif;

  /* Type fluide — échelle légèrement resserrée en haut,
     pour laisser le blanc porter l'emphase plutôt que la taille. */
  --fs-eyebrow:clamp(.66rem,.6rem + .28vw,.75rem);
  --fs-body:clamp(1rem,.97rem + .18vw,1.08rem);
  --fs-lead:clamp(1.1rem,1rem + .55vw,1.38rem);
  --fs-h3:clamp(1.4rem,1.1rem + 1.35vw,2rem);
  --fs-h2:clamp(1.85rem,1.3rem + 2.9vw,3.6rem);
  --fs-h1:clamp(2.6rem,1.5rem + 5.4vw,6.4rem);
  --fs-mega:clamp(3rem,1rem + 10vw,10.5rem);

  /* ---- Échelle d'espacement (nouveau en v3) ---------------------
     Une seule source de vérité pour le rythme vertical.
     Toutes les valeurs sont fluides : pas de saut brutal au resize. */
  --space-3xs:.5rem;
  --space-2xs:.75rem;
  --space-xs:clamp(1rem,.9rem + .5vw,1.35rem);
  --space-s:clamp(1.5rem,1.3rem + .9vw,2.1rem);
  --space-m:clamp(2.25rem,1.9rem + 1.6vw,3.4rem);
  --space-l:clamp(3.5rem,2.8rem + 3.2vw,5.75rem);
  --space-xl:clamp(5rem,3.6rem + 6vw,9rem);
  --space-2xl:clamp(7rem,4.5rem + 10vw,13rem);

  /* Rythme */
  --gutter:clamp(1.35rem,5vw,5rem);
  --section:var(--space-2xl);      /* respiration principale entre sections */
  --section-sm:var(--space-xl);
  --maxw:1360px;
  --maxw-text:66ch;

  /* Surfaces — arrondis adoucis (3px → 14px) */
  --radius:14px;
  --radius-s:10px;
  --radius-xs:6px;
  --radius-pill:100px;

  /* Ombres feuilletées, très basse opacité */
  --shadow-s:0 1px 2px rgba(2,2,52,.04),0 2px 8px rgba(2,2,52,.045);
  --shadow-m:0 2px 6px rgba(2,2,52,.05),0 12px 30px rgba(2,2,52,.08);
  --shadow-l:0 4px 12px rgba(2,2,52,.06),0 26px 60px rgba(2,2,52,.13);
  --shadow-ink:0 18px 48px rgba(0,0,0,.30);

  /* ---- Motion ---------------------------------------------------
     Durées séparées par intention : le hover doit être immédiat,
     la révélation au scroll doit être lente. Mélanger les deux
     est ce qui donnait au v2 sa sensation d'engourdissement. */
  --ease:cubic-bezier(.22,1,.36,1);          /* sortie expo — arrivée */
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur-fast:.16s;      /* micro-retour : couleur, opacité */
  --dur:.26s;           /* hover standard */
  --dur-mid:.42s;       /* déplacement d'élément */
  --dur-slow:.7s;       /* panneau, overlay */
  --dur-reveal:.85s;    /* apparition au scroll */
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.72;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--green);color:var(--cream)}

/* Focus visible — anneau laiton, jamais supprimé (a11y) */
:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}
.on-ink :focus-visible,.site-footer :focus-visible,.mobile-nav :focus-visible{outline-color:var(--brass-light)}

/* ---------- 3. Typo helpers ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.014em;color:var(--green-ink);text-wrap:balance}
p{text-wrap:pretty}
.display-it{font-style:italic}
.eyebrow{
  font-family:var(--sans);font-weight:600;
  font-size:var(--fs-eyebrow);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--brass-deep);
  display:inline-flex;align-items:center;gap:.85em;
}
.eyebrow::before{content:"";width:2.4em;height:1px;background:var(--brass);opacity:.9}
.eyebrow.no-rule::before{display:none}
.lead{font-size:var(--fs-lead);line-height:1.56;color:var(--ink);font-family:var(--display);font-weight:400;max-width:var(--maxw-text)}
.muted{color:var(--ink-soft)}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.grid{display:grid;gap:var(--space-m)}

.on-paper{background:var(--paper-2);color:var(--ink)}

/* Sections marine (contraste) */
.on-ink{background:linear-gradient(158deg,#000000 0%,#020234 100%);color:var(--cream);position:relative}
.on-ink::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brass) 20%,var(--brass) 80%,transparent);opacity:.45}
.on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{color:var(--cream)}
.on-ink .eyebrow{color:var(--brass-light)}
.on-ink .eyebrow::before{background:var(--brass-light)}
.on-ink .lead{color:var(--cream)}
.on-ink .muted{color:var(--cream-soft)}

/* ---------- 5. Boutons ---------- */
.btn{
  --c:var(--cream);--bg:var(--green);--bd:var(--green);
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  padding:1.05em 1.9em;font-family:var(--sans);font-weight:600;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c);
  background:var(--bg);border:1px solid var(--bd);border-radius:var(--radius-pill);
  overflow:hidden;isolation:isolate;min-height:44px;   /* cible tactile */
  transition:color var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--oxblood);
  transform:translateY(101%);transition:transform var(--dur-mid) var(--ease-out);
}
.btn:hover{transform:translateY(-2px);--c:var(--green-ink);box-shadow:var(--shadow-m)}
.btn:active{transform:translateY(0);transition-duration:var(--dur-fast)}
.btn:hover::after{transform:translateY(0)}
.btn .arw{transition:transform var(--dur) var(--ease-out)}
.btn:hover .arw{transform:translate(4px,-4px)}
/* Ghost — contour laiton */
.btn--ghost{--bg:transparent;--c:var(--green-ink);--bd:var(--brass)}
.btn--ghost::after{background:var(--green)}
.btn--ghost:hover{--c:var(--cream);--bd:var(--green)}
/* Sur panneaux marine */
.on-ink .btn{--bg:var(--brass);--c:var(--green-ink);--bd:var(--brass)}
.on-ink .btn::after{background:var(--brass-light)}
.on-ink .btn:hover{--c:var(--green-ink);box-shadow:var(--shadow-ink)}
.on-ink .btn--ghost{--bg:transparent;--c:var(--cream);--bd:var(--line-g)}
.on-ink .btn--ghost::after{background:var(--cream)}
.on-ink .btn--ghost:hover{--c:var(--green-ink)}

/* Lien souligné animé */
.ulink{position:relative;display:inline-block;padding-bottom:2px}
.ulink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-mid) var(--ease-out)}
.ulink:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- 6. Curseur custom ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;
  pointer-events:none;z-index:9999;will-change:transform}
.cursor-dot,.cursor-ring{opacity:0;transition:opacity var(--dur)}
body.cursor-live .cursor-dot,body.cursor-live .cursor-ring{opacity:1}
.cursor-dot{width:6px;height:6px;background:var(--oxblood);transform:translate(-50%,-50%)}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(176,138,62,.6);
  transform:translate(-50%,-50%);transition:width var(--dur) var(--ease-out),height var(--dur) var(--ease-out),opacity var(--dur),background var(--dur)}
.cursor-ring.grow{width:58px;height:58px;background:rgba(176,138,62,.08)}
body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .cursor-dot,.cursor-ring{display:none!important}
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:auto}
}

/* ---------- 7. Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,2vw,2.5rem);padding:clamp(1.1rem,2.2vw,1.75rem) clamp(1.35rem,3.5vw,3.25rem);
  transition:background var(--dur-mid) var(--ease-out),
             padding var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out),
             border-color var(--dur-mid);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(247,246,241,.82);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line);padding-block:.75rem;
  box-shadow:0 1px 0 rgba(2,2,52,.03),0 10px 30px rgba(2,2,52,.05);
}
.brand{display:flex;flex-direction:column;line-height:1;z-index:2}
.brand .b1{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--oxblood);letter-spacing:.01em}
.brand .b2{font-family:var(--display);font-size:1.16rem;letter-spacing:.05em;color:var(--green-ink);text-transform:uppercase;margin-top:.08em;white-space:nowrap}
.brand .b3{font-family:var(--sans);font-weight:500;font-size:.54rem;letter-spacing:.28em;color:var(--brass-deep);text-transform:uppercase;margin-top:.5em;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.4rem)}
.nav a{font-family:var(--sans);font-weight:500;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:.72;white-space:nowrap;transition:opacity var(--dur-fast),color var(--dur-fast)}
.nav a:hover,.nav a.active{opacity:1;color:var(--green-ink)}
.header-right{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.6rem)}

/* Sélecteur langue */
.lang{display:flex;align-items:center;gap:.15rem;font-family:var(--sans);font-weight:500;font-size:.72rem}
.lang button{padding:.4em .55em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border-radius:var(--radius-xs);transition:color var(--dur-fast),background var(--dur-fast)}
.lang button.active{color:var(--brass-deep)}
.lang button:hover{color:var(--green-ink);background:rgba(2,2,52,.04)}
.lang .sep{color:var(--ink-faint)}

.header-cta{white-space:nowrap}
/* Le CTA du header n'apparaît qu'une fois la nav complète installée,
   sinon il pousse le sélecteur de langue hors du header. Sous ce seuil,
   la réservation reste accessible via le bouton flottant (.resa-fab). */
@media (max-width:1360px){.header-cta{display:none}}

/* Burger */
.burger{display:none;flex-direction:column;gap:5px;width:30px;min-height:44px;justify-content:center;z-index:2}
.burger span{height:1.5px;background:var(--green-ink);transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur)}
.mobile-nav{position:fixed;inset:0;z-index:850;background:linear-gradient(160deg,#000000 0%,#020234 100%);
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  padding:var(--gutter);transform:translateY(-100%);transition:transform var(--dur-slow) var(--ease);visibility:hidden}
.mobile-nav.open{transform:translateY(0);visibility:visible}
.mobile-nav a{font-family:var(--display);font-size:clamp(1.9rem,8.5vw,3rem);color:var(--cream);
  padding-block:.34rem;border-bottom:1px solid var(--line-g);transition:color var(--dur),padding-left var(--dur-mid) var(--ease-out)}
.mobile-nav a:hover{color:var(--brass-light);padding-left:.6rem}
.mobile-extra{margin-top:var(--space-m);display:flex;flex-direction:column;gap:1.2rem;font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-soft)}
body.menu-open .burger span{background:var(--cream)}
/* Sous 900px la nav disparaît : la marque doit alors pouvoir se
   contracter, sinon le nowrap ci-dessus élargit le document. */
@media (max-width:900px){
  .brand{min-width:0}
  .brand .b2{font-size:1.02rem;letter-spacing:.03em}
  .brand .b3{font-size:.48rem;letter-spacing:.16em;white-space:normal}
}
/* Petits téléphones : la baseline sort du header, sinon elle pousse le
   burger hors de l'écran. L'info reste présente dans le hero. */
@media (max-width:600px){
  .site-header{padding-inline:1.15rem;gap:.7rem}
  .brand .b3{display:none}
  .brand .b1{font-size:.95rem}
  .brand .b2{font-size:.98rem}
}
/* Seuil relevé de 900 → 1150 : avec la nav en nowrap, sept liens plus la
   marque et le sélecteur de langue ne tiennent pas sous ~1150px. En dessous,
   on passe au burger plutôt que de laisser le header déborder. */
@media (max-width:1150px){
  .nav,.header-cta{display:none}
  .burger{display:flex}
  body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* ---------- 8. Hero éditorial (clair) ---------- */
.hero{position:relative;background:var(--paper);
  padding-top:clamp(9.5rem,19vh,14rem);padding-bottom:var(--space-xl);overflow:hidden}
.hero::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:var(--line)}
.hero__grid{display:grid;grid-template-columns:1fr;gap:var(--space-l);align-items:center}
@media(min-width:940px){.hero__grid{grid-template-columns:1.06fr .94fr;gap:clamp(3rem,6vw,6rem)}}
.hero__eyebrow{margin-bottom:var(--space-s)}
.hero h1{font-size:var(--fs-h1);color:var(--green-ink);letter-spacing:-.024em;line-height:1.02}
.hero h1 .rl-4 span,.hero h1 em{font-style:italic;color:var(--oxblood)}
.hero .lead{margin-top:var(--space-s);max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-m)}
.hero__meta{display:flex;flex-wrap:wrap;gap:.9rem 2.4rem;align-items:center;margin-top:var(--space-m);
  padding-top:var(--space-s);border-top:1px solid var(--line)}
.hero__tag{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.hero__tag b{color:var(--green-ink);font-weight:600}
/* Média encadré + sceau */
.hero__media{position:relative}
.hero__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow-l)}
.hero__media::before{content:"";position:absolute;inset:-.85rem;border:1px solid var(--line);
  border-radius:calc(var(--radius) + 6px);pointer-events:none}
.hero__seal{position:absolute;right:-1.2rem;bottom:-1.2rem;width:clamp(5.4rem,11vw,7rem);height:clamp(5.4rem,11vw,7rem);
  border-radius:50%;background:linear-gradient(150deg,#000000 0%,#020234 100%);color:var(--brass-light);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  border:1px solid var(--brass);box-shadow:var(--shadow-l)}
.hero__seal em{font-family:var(--sans);font-weight:500;font-style:normal;font-size:.54rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-soft)}
.hero__seal b{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,3vw,1.9rem);color:var(--brass-light);margin-top:.15em}
.scroll-cue{position:absolute;left:var(--gutter);bottom:1.4rem;font-family:var(--sans);font-weight:500;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);
  display:none;align-items:center;gap:.6rem;z-index:2}
@media(min-width:940px){.scroll-cue{display:flex}}
.scroll-cue .line{width:1px;height:32px;background:var(--brass);transform-origin:top;animation:cue 2.4s var(--ease-soft) infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* Words reveal — course plus courte, sortie plus douce */
.reveal-line{display:block;overflow:hidden;padding-bottom:.06em}
.reveal-line >span{display:block;transform:translateY(105%);transition:transform var(--dur-reveal) var(--ease)}
.reveal-line.in >span{transform:translateY(0)}
.rl-2 >span{transition-delay:.08s}
.rl-3 >span{transition-delay:.16s}
.rl-4 >span{transition-delay:.24s}

/* ---------- 9. Bandeau héritage (ex-marquee) ---------- */
.marquee{border-block:1px solid var(--line);padding-block:var(--space-xs);overflow:hidden;white-space:nowrap;background:var(--paper-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee--gold{background:var(--green);border-color:transparent}
.marquee--gold::before,.marquee--gold::after{content:"";position:absolute}
.marquee__track{display:inline-flex;gap:3rem;will-change:transform;animation:scrollX 52s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,3vw,2.1rem);color:var(--green-ink)}
.marquee__track .dot{color:var(--brass);font-style:normal;font-size:.8em}
.marquee--gold .marquee__track span{color:var(--cream)}
.marquee--gold .marquee__track .dot{color:var(--brass-light)}
@keyframes scrollX{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- 10. Reveal on scroll ---------- */
/* Course raccourcie (34px → 20px) : l'élément semble se poser,
   au lieu de remonter en bloc. Combiné à un flou qui se dissipe. */
.reveal{opacity:0;transform:translateY(20px);filter:blur(6px);
  transition:opacity var(--dur-reveal) var(--ease-soft),
             transform var(--dur-reveal) var(--ease),
             filter var(--dur-reveal) var(--ease-soft)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
/* Stagger automatique posé par le JS sur les enfants de grille */
[style*="--i:"]{transition-delay:calc(var(--i) * .07s)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .reveal-line>span{transform:none;transition:none}
}
.no-js .reveal{opacity:1;transform:none;filter:none}
.no-js .reveal-line>span{transform:none}

/* ---------- 11. Section intro / split ---------- */
.intro-split{display:grid;grid-template-columns:1fr;gap:var(--space-l);align-items:start}
@media(min-width:900px){.intro-split{grid-template-columns:.85fr 1.15fr;gap:clamp(3rem,7vw,7rem)}}
.section-h{font-size:var(--fs-h2);max-width:18ch}
.section-h em{color:var(--oxblood);font-style:italic}
.on-ink .section-h em{color:var(--brass-light)}
.stack-sm{display:flex;flex-direction:column;gap:var(--space-s)}
.stack-sm p{max-width:var(--maxw-text)}

/* ---------- 12. Concept trio ---------- */
/* Cellules détachées (cartes) au lieu du bloc soudé du v2 :
   le filet devient un intervalle, ce qui aère la bande. */
.trio{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
@media(min-width:820px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio__cell{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:var(--space-m) var(--space-s);
  display:flex;flex-direction:column;gap:var(--space-xs);min-height:clamp(18rem,30vw,24rem);
  position:relative;overflow:hidden;
  transition:transform var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out),
             border-color var(--dur) var(--ease-out)}
.trio__cell:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:var(--line)}
.on-ink .trio__cell{background:rgba(242,245,249,.035);border-color:var(--line-g)}
.on-ink .trio__cell:hover{background:rgba(242,245,249,.06);border-color:var(--brass);box-shadow:var(--shadow-ink)}
.trio__num{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--brass-deep)}
.on-ink .trio__num{color:var(--brass-light)}
.trio__cell h3{font-size:var(--fs-h3);margin-top:auto}
.trio__cell p{color:var(--ink-soft);font-size:.98rem}
.on-ink .trio__cell p{color:var(--cream-soft)}

/* ---------- 13. Galerie horizontale (signature) ---------- */
.h-scroll{margin-top:var(--space-m)}
.h-scroll__rail{display:flex;gap:var(--space-s);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--space-xs);-webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-padding-inline:var(--gutter)}
.h-scroll__rail::-webkit-scrollbar{display:none}
.dish{flex:0 0 clamp(250px,70vw,350px);scroll-snap-align:start;position:relative}
.dish__img{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--green-2);border:1px solid var(--line-g)}
.dish__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.dish:hover .dish__img img{transform:scale(1.05)}
.dish__meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:var(--space-xs)}
.dish__meta h4{font-family:var(--display);font-size:1.3rem}
.dish__price{font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.06em;color:var(--brass-deep)}
.on-ink .dish__price{color:var(--brass-light)}
.dish__desc{color:var(--ink-soft);font-size:.9rem;margin-top:.3rem}
.on-ink .dish__desc{color:var(--cream-soft)}
.h-hint{font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-deep);display:flex;gap:.6rem;align-items:center;margin-top:.4rem}
.on-ink .h-hint{color:var(--brass-light)}

/* ---------- 14. Feature image + texte ---------- */
.feature{display:grid;grid-template-columns:1fr;gap:var(--space-l);align-items:center}
@media(min-width:900px){.feature{grid-template-columns:1.02fr .98fr;gap:clamp(3rem,6vw,6rem)}.feature.rev .feature__media{order:2}}
.feature__media{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-m)}
.feature__media img{width:100%;aspect-ratio:5/6;object-fit:cover}
.feature__media.tall img{aspect-ratio:4/5}
.feature__badge{position:absolute;top:1.2rem;left:1.2rem;background:var(--oxblood);color:var(--cream);
  font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:.6em 1em;border-radius:var(--radius-pill)}

/* ---------- 15. Stats / bandeau chiffres ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xs)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:var(--space-m) var(--space-s);transition:border-color var(--dur) var(--ease-out)}
.stat:hover{border-color:var(--line)}
.on-ink .stat{background:rgba(242,245,249,.035);border-color:var(--line-g)}
.stat__n{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.4rem);color:var(--oxblood);line-height:1}
.stat__l{font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.7rem}
.on-ink .stat__n{color:var(--brass-light)}
.on-ink .stat__l{color:var(--cream-soft)}

/* ---------- 16. Actualités ---------- */
.posts{display:grid;grid-template-columns:1fr;gap:var(--space-m)}
@media(min-width:720px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.posts.three{grid-template-columns:repeat(3,1fr)}}
.post{display:flex;flex-direction:column;gap:var(--space-xs);padding-bottom:var(--space-s);border-bottom:1px solid var(--line);transition:border-color var(--dur) var(--ease-out)}
.post:hover{border-color:var(--brass)}
.on-ink .post{border-color:var(--line-g)}
.on-ink .post:hover{border-color:var(--brass-light)}
.post__img{aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:var(--paper-3);border:1px solid var(--line)}
.on-ink .post__img{border-color:var(--line-g)}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.post:hover .post__img img{transform:scale(1.04)}
.post__cat{font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep)}
.on-ink .post__cat{color:var(--brass-light)}
.post h3{font-size:clamp(1.25rem,2.4vw,1.65rem);line-height:1.16}
.post p{color:var(--ink-soft);font-size:.94rem}
.on-ink .post p{color:var(--cream-soft)}

/* ---------- 17. Carte (menu gravé) ---------- */
/* Barre de saut vers les sections de la carte */
.carte-jump{display:flex;flex-wrap:wrap;gap:.6rem}
.carte-jump a{
  font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-ink);border:1px solid var(--brass);border-radius:var(--radius-pill);
  padding:.7em 1.35em;transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast)}
.carte-jump a:hover{background:var(--brass);color:var(--cream);transform:translateY(-2px)}

.menu-cat{margin-top:var(--space-l);scroll-margin-top:7rem}
.menu-cat__h{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:var(--space-s)}
.menu-cat__h h3{font-size:var(--fs-h3);color:var(--brass-deep);font-style:italic}
.on-ink .menu-cat__h h3{color:var(--brass-light)}
.menu-cat__h .rule{flex:1;height:1px;background:var(--line)}
.on-ink .menu-cat__h .rule{background:var(--line-g)}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:.35rem 1.6rem;padding-block:var(--space-s);
  border-bottom:1px solid var(--line-soft);align-items:baseline;transition:background var(--dur) var(--ease-out)}
.on-ink .menu-item{border-color:var(--line-g)}
.menu-item__name{font-family:var(--display);font-size:clamp(1.14rem,2vw,1.4rem);color:var(--green-ink)}
.on-ink .menu-item__name{color:var(--cream)}
.menu-item__price{font-family:var(--sans);font-weight:600;color:var(--brass-deep);font-size:.9rem;letter-spacing:.04em;white-space:nowrap}
.on-ink .menu-item__price{color:var(--brass-light)}
.menu-item__desc{grid-column:1/-1;color:var(--ink-soft);font-size:.92rem;max-width:var(--maxw-text)}
.on-ink .menu-item__desc{color:var(--cream-soft)}
.menu-item__tags{grid-column:1/-1;display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.tag{font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep);border:1px solid var(--line);padding:.35em .75em;border-radius:var(--radius-pill)}
.on-ink .tag{color:var(--brass-light);border-color:var(--line-g)}

/* ---------- 18. Plat du jour (éditable) ---------- */
.pdj{position:relative;overflow:hidden;border:1px solid var(--line-g);border-radius:var(--radius);
  background:linear-gradient(135deg,#000000 0%,#020234 100%);padding:var(--space-l);color:var(--cream);
  box-shadow:var(--shadow-l)}
.pdj__grid{display:grid;grid-template-columns:1fr;gap:var(--space-m);align-items:center}
@media(min-width:820px){.pdj__grid{grid-template-columns:1.1fr .9fr;gap:var(--space-l)}}
.pdj__date{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-light)}
.pdj h3{font-size:clamp(1.8rem,4vw,2.8rem);margin:.7rem 0 var(--space-s);color:var(--cream)}
.pdj__courses{display:flex;flex-direction:column;gap:var(--space-xs)}
.pdj__course{border-left:2px solid var(--brass);padding-left:1.2rem}
.pdj__course .c-l{font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-light)}
.pdj__course .c-n{font-family:var(--display);font-size:1.2rem;margin-top:.2rem;color:var(--cream)}
.pdj__course .c-d{color:var(--cream-soft);font-size:.9rem}
.pdj__price{margin-top:var(--space-s);display:flex;align-items:baseline;gap:.6rem}
.pdj__price b{font-family:var(--display);font-size:2.2rem;color:var(--brass-light);font-weight:400}
.pdj__img{aspect-ratio:1;overflow:hidden;border-radius:var(--radius-s);border:1px solid var(--line-g)}
.pdj__img img{width:100%;height:100%;object-fit:cover}

/* ---------- 19. Contact / infos ---------- */
.info-grid{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
@media(min-width:760px){.info-grid{grid-template-columns:repeat(2,1fr)}}
.info-card{border:1px solid var(--line-soft);border-radius:var(--radius);padding:var(--space-m) var(--space-s);background:var(--paper-2)}
.on-ink .info-card{background:rgba(242,245,249,.035);border-color:var(--line-g)}
.info-card .i-l{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:.8rem}
.on-ink .info-card .i-l{color:var(--brass-light)}
.info-card .i-v{font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.3;color:var(--green-ink)}
.on-ink .info-card .i-v{color:var(--cream)}
.info-card .i-v a{transition:color var(--dur-fast)}
.info-card .i-v a:hover{color:var(--oxblood)}
.on-ink .info-card .i-v a:hover{color:var(--brass-light)}
.hours-row{display:flex;justify-content:space-between;gap:1rem;padding-block:.75rem;border-bottom:1px solid var(--line-g);font-size:.98rem;color:var(--cream)}
.hours-row.closed{color:var(--cream-faint)}
.hours-row b{font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--brass-light)}
.map-embed{border:1px solid var(--line-g);border-radius:var(--radius);overflow:hidden;min-height:340px}
.map-embed iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(.25) sepia(.12) contrast(1.02)}

/* ---------- 20. Réservation ---------- */
.resa-embed{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper-2);min-height:640px;box-shadow:var(--shadow-m)}
.resa-embed iframe{width:100%;min-height:640px;border:0;display:block}
.resa-steps{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
@media(min-width:720px){.resa-steps{grid-template-columns:repeat(3,1fr)}}
.resa-step{display:flex;gap:1.1rem;align-items:flex-start}
.resa-step .n{font-family:var(--display);font-size:2rem;color:var(--brass-light);line-height:1}

/* ---------- 21. Bons cadeaux ---------- */
.gift-hero{position:relative;border-radius:var(--radius);overflow:hidden;padding:var(--space-l);
  background:linear-gradient(150deg,#000000 0%,#020234 100%);color:var(--cream);border:1px solid var(--line-g)}
.gift-hero h2{font-size:var(--fs-h2);color:var(--cream)}
.gift-cards{display:grid;grid-template-columns:1fr;gap:var(--space-s);margin-top:var(--space-m)}
@media(min-width:720px){.gift-cards{grid-template-columns:repeat(3,1fr)}}
.gift-card{border:1px solid var(--line-g);border-radius:var(--radius);padding:var(--space-m);background:rgba(242,245,249,.035);text-align:center;
  transition:transform var(--dur-mid) var(--ease-out),border-color var(--dur) var(--ease-out),background var(--dur)}
.gift-card:hover{transform:translateY(-6px);border-color:var(--brass);background:rgba(242,245,249,.06)}
.gift-card .amt{font-family:var(--display);font-size:2.6rem;color:var(--brass-light)}

/* ---------- 22. Newsletter ---------- */
.news{display:grid;grid-template-columns:1fr;gap:var(--space-s);align-items:center}
@media(min-width:820px){.news{grid-template-columns:1fr auto}}
.news form{display:flex;gap:.7rem;flex-wrap:wrap}
.news input{flex:1;min-width:220px;background:transparent;border:1px solid var(--line-g);border-radius:var(--radius-pill);
  padding:1.05em 1.6em;color:var(--cream);font-family:var(--sans);min-height:44px;
  transition:border-color var(--dur) var(--ease-out),background var(--dur)}
.news input::placeholder{color:var(--cream-faint)}
.news input:focus{outline:none;border-color:var(--brass-light);background:rgba(242,245,249,.04)}

/* ---------- 23. Page hero (secondaire) ---------- */
.page-hero{padding-top:clamp(9.5rem,18vh,13rem);padding-bottom:var(--space-l);background:var(--paper)}
.page-hero.on-paper{background:var(--paper-2)}
.page-hero h1{font-size:var(--fs-h1);max-width:16ch}
.page-hero h1 em{color:var(--oxblood);font-style:italic}
.breadcrumb{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--space-s);display:flex;gap:.6rem;flex-wrap:wrap}
.breadcrumb a{transition:color var(--dur-fast)}
.breadcrumb a:hover{color:var(--oxblood)}

/* Actualités : hero sombre pour une page entièrement marine.
   Le header garde en permanence son fond clair (état "scrolled")
   pour que le logo et la navigation restent lisibles dessus. */
body[data-page="actualites"] .site-header{
  background:rgba(247,246,241,.86);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--line)}
body[data-page="actualites"] .page-hero{background:linear-gradient(158deg,#000000 0%,#020234 100%)}
body[data-page="actualites"] .page-hero h1{color:var(--cream)}
body[data-page="actualites"] .page-hero h1 em{color:var(--brass-light)}
body[data-page="actualites"] .page-hero .lead{color:var(--cream-soft)}
body[data-page="actualites"] .page-hero .breadcrumb{color:var(--cream-soft)}
body[data-page="actualites"] .page-hero .breadcrumb a:hover{color:var(--brass-light)}

/* ---------- 24. Footer (marine) ---------- */
.site-footer{background:linear-gradient(160deg,#000000 0%,#020234 100%);color:var(--cream);border-top:1px solid var(--brass);padding-top:var(--space-xl)}
.footer-top{display:grid;grid-template-columns:1fr;gap:var(--space-l)}
@media(min-width:820px){.footer-top{grid-template-columns:1.4fr 1fr 1fr}}
.footer-brand .b1{font-family:var(--display);font-style:italic;font-size:1.4rem;color:var(--brass-light)}
.footer-brand .b2{font-family:var(--display);font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;color:var(--cream)}
.footer-brand .muted{color:var(--cream-soft)}
.footer-col h4{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-light);margin-bottom:var(--space-xs)}
.footer-col a,.footer-col p{display:block;color:var(--cream-soft);padding-block:.4rem;transition:color var(--dur-fast);font-size:.95rem}
.footer-col a:hover{color:var(--cream)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:var(--space-l);padding-block:var(--space-s);border-top:1px solid var(--line-g);
  font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.06em;color:var(--cream-soft)}
.footer-bottom a{transition:color var(--dur-fast)}
.footer-bottom a:hover{color:var(--brass-light)}
.footer-big{font-family:var(--display);font-style:italic;font-size:var(--fs-mega);line-height:.85;color:rgba(242,245,249,.05);
  text-align:center;padding-block:var(--space-m);user-select:none;letter-spacing:-.025em;overflow:hidden}

/* ---------- 25. Divers ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--space-s)}
.pill{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);border:1px solid var(--line-g);padding:.6em 1.15em;border-radius:var(--radius-pill);
  transition:border-color var(--dur) var(--ease-out),color var(--dur-fast),background var(--dur)}
.pill:hover{border-color:var(--brass-light);color:var(--brass-light);background:rgba(214,182,98,.06)}
[hidden]{display:none!important}
.center{text-align:center}
.mt-l{margin-top:var(--space-m)}
.editable-hint{font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep);border:1px dashed var(--brass);border-radius:var(--radius-xs);padding:.35em .7em;display:inline-block}

/* Skip link a11y */
.skip{position:absolute;left:-999px;top:0;z-index:1000;background:var(--green);color:var(--cream);padding:.85em 1.3em;border-radius:var(--radius-pill);font-family:var(--sans);font-weight:600;font-size:.75rem}
.skip:focus{left:1rem;top:1rem}

/* ---------- 26. Animations enrichies ---------- */
/* Images : zoom-in doux à l'apparition */
.hero__media img,.feature__media img{transition:transform 1.6s var(--ease)}
.hero__media.reveal img,.feature__media.reveal img{transform:scale(1.07)}
.hero__media.reveal.in img,.feature__media.reveal.in img{transform:scale(1)}
.feature:hover .feature__media img{transition:transform var(--dur-slow) var(--ease-out);transform:scale(1.04)}
.hero__media{will-change:transform}

/* Sceau « Depuis 1988 » qui flotte */
@media (prefers-reduced-motion:no-preference){
  .hero__seal{animation:seal-float 6s var(--ease-soft) infinite}
}
@keyframes seal-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Filet de l'eyebrow qui se déploie */
.eyebrow::before{transition:width var(--dur-slow) var(--ease)}
.reveal .eyebrow::before{width:0}
.reveal.in .eyebrow::before{width:2.4em}

/* Chiffres : pop discret quand comptés */
.stat__n{transition:transform var(--dur-mid) var(--ease-out)}
.stat.counting .stat__n{transform:scale(1.03)}

/* Lien nav souligné */
.nav a{position:relative;padding-bottom:4px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform var(--dur-mid) var(--ease-out)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1);transform-origin:left}

/* ---------- 27. Réservation flottante (bouton + fenêtre modale) ---------- */
.resa-fab{position:fixed;right:clamp(1rem,2.5vw,2.2rem);bottom:clamp(1rem,2.5vw,2.2rem);z-index:800;
  display:inline-flex;align-items:center;gap:.55em;padding:1em 1.55em;border-radius:var(--radius-pill);
  background:linear-gradient(150deg,#000000 0%,#020234 100%);color:var(--cream);border:1px solid var(--brass);
  font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:var(--shadow-l);cursor:pointer;min-height:44px;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.resa-fab:hover{transform:translateY(-3px);background:var(--oxblood);color:var(--green-ink);box-shadow:0 20px 46px rgba(2,2,52,.34)}
.resa-fab__ico{color:var(--brass-light);font-size:1.05em;line-height:1}
.resa-fab:hover .resa-fab__ico{color:var(--green-ink)}
body[data-page="reservation"] .resa-fab{display:none}
@media(max-width:520px){.resa-fab{padding:.9em 1.2em;font-size:.7rem}}
@media print{.resa-fab{display:none}}

.resa-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:clamp(.6rem,3vw,2rem);opacity:0;visibility:hidden;transition:opacity var(--dur-mid) var(--ease-out),visibility var(--dur-mid)}
.resa-modal.open{opacity:1;visibility:visible}
.resa-modal__backdrop{position:absolute;inset:0;background:rgba(2,2,40,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.resa-modal__panel{position:relative;width:min(560px,100%);max-height:min(90vh,880px);
  background:var(--paper);border:1px solid var(--brass);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transform:translateY(18px) scale(.98);transition:transform var(--dur-slow) var(--ease);
  box-shadow:0 30px 80px rgba(2,2,40,.42)}
.resa-modal.open .resa-modal__panel{transform:none}
.resa-modal__head{display:flex;flex-direction:column;gap:.05rem;padding:1.15rem 1.5rem;background:linear-gradient(150deg,#000000 0%,#020234 100%)}
.resa-modal__head .b1{font-family:var(--display);font-style:italic;font-size:.9rem;color:var(--brass-light)}
.resa-modal__head .b2{font-family:var(--display);font-size:1.25rem;color:var(--cream);text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
.resa-modal__close{position:absolute;top:.75rem;right:.85rem;z-index:2;width:2.25rem;height:2.25rem;border-radius:50%;
  display:grid;place-items:center;background:rgba(242,245,249,.16);color:var(--cream);font-size:.85rem;transition:background var(--dur),transform var(--dur) var(--ease-out)}
.resa-modal__close:hover{background:rgba(242,245,249,.3);transform:rotate(90deg)}
.resa-modal__frame{flex:1;min-height:min(72vh,640px);background:var(--paper);position:relative}
.resa-modal__frame iframe{width:100%;height:100%;min-height:min(72vh,640px);border:0;display:block}
/* Écran de consentement RGPD affiché avant le chargement du module Zenchef */
.resa-consent{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:1rem;padding:clamp(1.4rem,4vw,2.4rem);background:var(--paper);text-align:left}
.resa-consent[hidden]{display:none}
.resa-consent__t{font-family:var(--display);font-size:1.25rem;color:var(--green-ink)}
.resa-consent__p{font-size:.88rem;color:var(--ink-soft);max-width:44ch}
.resa-consent__note{font-size:.74rem;color:var(--ink-soft)}

/* ---------- Article de blog ---------- */
/* Les titres d'origine sont longs : on laisse la mesure s'élargir. */
.article-head h1{max-width:24ch;font-size:clamp(1.85rem,4.2vw,3.2rem);line-height:1.08}
.article-meta{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-s);
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.on-ink .article-meta,.article-head .article-meta{color:var(--cream-soft)}
.article-meta time{position:relative;padding-left:1rem}
.article-meta time::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;
  border-radius:50%;background:var(--brass-light);transform:translateY(-50%)}

.article-cover{margin:0 0 var(--space-m);border-radius:var(--radius);overflow:hidden}
.article-cover img{display:block;width:100%;height:clamp(220px,42vw,440px);object-fit:cover}

/* Corps : mesure de lecture confortable, sous-titres nettement détachés. */
.article-body{max-width:68ch}
.article-body h2{font-size:clamp(1.4rem,2.5vw,2rem);margin-top:var(--space-m);margin-bottom:var(--space-2xs)}
.article-body h2:first-child{margin-top:0}
.article-body p{color:var(--cream-soft);line-height:1.72;margin-bottom:var(--space-xs);max-width:66ch}
.article-body p:last-child{margin-bottom:0}
.article-body strong{color:var(--cream);font-weight:600}

.article-foot{display:flex;gap:var(--space-2xs);flex-wrap:wrap;margin-top:var(--space-m)}
.article-next{margin-top:var(--space-m);padding-top:var(--space-s);border-top:1px solid rgba(242,245,249,.14);
  display:flex;flex-direction:column;gap:var(--space-3xs)}
.article-next__link{font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--cream);transition:color var(--dur)}
.article-next__link:hover{color:var(--brass-light)}

/* ---------- Consentement des modules tiers (RGPD) ---------- */
.embed-consent{min-height:inherit;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--space-xs);text-align:center;padding:clamp(2rem,5vw,3.5rem);
  border-radius:var(--radius);background:linear-gradient(158deg,#000000 0%,#020234 100%);color:var(--cream-soft);
  background-image:radial-gradient(rgba(242,245,249,.05) 1px,transparent 1px);background-size:16px 16px}
.embed-consent .eyebrow{color:var(--brass-light)}
.embed-consent__p{max-width:48ch;font-size:.95rem;line-height:1.6;color:var(--cream-soft)}
.embed-consent__note{font-family:var(--sans);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-faint);max-width:52ch}
.embed-consent__note a{color:var(--brass-light)}
.map-embed .embed-consent{min-height:340px}
.resa-embed .embed-consent{min-height:640px}

/* ---------- Pages légales ---------- */
.prose{max-width:76ch}
.prose h2{font-size:clamp(1.4rem,2.5vw,2rem);margin:var(--space-m) 0 var(--space-2xs)}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--cream-soft);line-height:1.72;margin-bottom:var(--space-xs);max-width:70ch}
.prose strong{color:var(--cream);font-weight:600}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;color:var(--brass-light);
  background:rgba(176,138,62,.12);padding:.12em .4em;border-radius:var(--radius-xs)}
.prose .todo{display:inline-block;font-family:var(--sans);font-size:.78rem;color:var(--brass-light);
  border:1px dashed rgba(176,138,62,.5);border-radius:var(--radius-xs);padding:.35em .7em;margin:.2em 0}

/* ---------- Fenêtre de réservation ancrée en bas à droite ---------- */
/* Elle remplace le widget flottant Zenchef : même emplacement, même geste,
   mais le module tiers n'est chargé qu'au clic. Sur mobile elle reste une
   feuille pleine largeur, une carte de 420px collée dans un coin y serait illisible. */
@media(min-width:720px){
  .resa-modal{align-items:flex-end;justify-content:flex-end;
    padding:clamp(1rem,2.5vw,2.2rem)}
  /* Voile plus léger : la fenêtre est un panneau latéral, pas un blocage de page. */
  .resa-modal__backdrop{background:rgba(2,2,40,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .resa-modal__panel{width:min(420px,100%);max-height:min(78vh,760px);
    transform:translateY(24px) scale(.985)}
  .resa-modal.open .resa-modal__panel{transform:none}
  .resa-modal__frame,.resa-modal__frame iframe{min-height:min(56vh,520px)}
}
/* Le bouton flottant s'efface pendant que la fenêtre est ouverte : ils occupent le même coin.
   (classe posée sur <body> par main.js — le bouton précède la modale dans le DOM,
    un sélecteur frère ne l'atteindrait pas) */
body.resa-open .resa-fab{opacity:0;pointer-events:none}
.resa-fab{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),
  background var(--dur) var(--ease-out),opacity var(--dur)}

/* ---------- Panneau de réservation posé dans le coin (mode « docked ») ---------- */
/* Ouvert d'emblée sur grand écran : il ne doit donc rien bloquer. Le conteneur
   cesse de couvrir la page (sinon il intercepterait tous les clics), le voile
   disparaît et le défilement reste libre. */
.resa-modal.docked{inset:auto;right:clamp(1rem,2.5vw,2.2rem);bottom:clamp(1rem,2.5vw,2.2rem);
  display:block;padding:0;width:min(420px,calc(100vw - 2rem))}
.resa-modal.docked .resa-modal__backdrop{display:none}
.resa-modal.docked .resa-modal__panel{width:100%}

/* ---------- Logo ---------- */
/* Le fichier fourni est un lettrage large (ratio 2,58:1) : on le pilote par la hauteur.
   Il rétrécit au scroll, comme le faisait le lettrage typographique qu'il remplace. */
.brand__logo{display:block;height:clamp(38px,4.4vw,54px);width:auto;
  transition:height var(--dur-mid) var(--ease-out)}
.site-header.scrolled .brand__logo{height:clamp(32px,3.6vw,44px)}
.brand .b3{margin-top:.55em}
@media(max-width:520px){.brand .b3{display:none}}

/* Pied de page : variante claire, sur le dégradé marine. */
.footer-brand__logo{display:block;height:clamp(46px,5vw,64px);width:auto;margin-bottom:var(--space-2xs)}