/* ============================================================
   So Sushi · Or & Noir — Design system (maquettes)
   Charte v1.0 · FR/NL · usage commun à toutes les pages
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Jost:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

:root{
  /* Couleurs — charte Or & Noir */
  --ink:#0E0E0E; --ink-card:#121210; --ink-700:#1A1A18; --ink-600:#262522; --ink-500:#3A3833;
  --gold:#C9A24B; --gold-300:#DCBE6E; --gold-100:#F4E8C9; --gold-700:#7E5E25; --gold-text:#7E5E25;
  --cream:#F6F1E7; --cream-paper:#FCFAF4; --cream-warm:#EFE7D6; --cream-sand:#E4D9C3; --cream-kraft:#D3C4A6;
  --salmon:#E08A6E;
  --muted:#6B655B; --muted-dark:#A8A199;
  --line-light:#E4D9C3; --line-ink:#262522;
  --success:#5E7A47;
  /* Typo */
  --serif:'Fraunces',Georgia,serif;
  --geo:'Jost',-apple-system,Segoe UI,sans-serif;
  --body:'Inter',-apple-system,Segoe UI,sans-serif;
  /* Layout */
  --maxw:1200px; --maxw-narrow:760px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-std:cubic-bezier(0.22,0.61,0.36,1);
  --nav-h:76px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--cream);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.narrow{max-width:var(--maxw-narrow);margin:0 auto}
section{padding:clamp(64px,9vw,128px) 0}
.section-sm{padding:clamp(48px,6vw,80px) 0}
.dark{background:var(--ink);color:var(--cream)}
.warm{background:var(--cream-warm)}
.paper{background:var(--cream-paper)}

/* ---------- Typo ---------- */
.eyebrow{font-family:var(--geo);text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:500;color:var(--gold-text);display:inline-block}
.dark .eyebrow,.eyebrow.on-dark{color:var(--gold)}
.display{font-family:var(--serif);font-weight:500;letter-spacing:-.025em;line-height:.98;font-size:clamp(48px,8vw,104px)}
h1,.h1{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.04;font-size:clamp(38px,6vw,72px)}
h2,.h2{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.1;font-size:clamp(30px,4.5vw,52px)}
h3,.h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.2;font-size:clamp(22px,3vw,30px)}
h4,.h4{font-family:var(--geo);font-weight:600;letter-spacing:.02em;font-size:18px}
.lead{font-size:clamp(17px,2.1vw,21px);line-height:1.55;color:var(--ink-500)}
.dark .lead,.lead.on-dark{color:var(--muted-dark)}
p{max-width:64ch}
.serif-italic{font-family:var(--serif);font-style:italic;font-weight:400}
.quote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,3.2vw,34px);line-height:1.35}
.text-gold{color:var(--gold-text)} .dark .text-gold{color:var(--gold)}
.muted{color:var(--muted)} .dark .muted{color:var(--muted-dark)}
.center{text-align:center}

/* Filets d'or */
.filet{height:1px;border:0;background:var(--gold);opacity:.55}
.filet-ink{height:1px;border:0;background:var(--line-light)}
.dark .filet-ink{background:var(--line-ink)}
.rule{width:60px;height:2px;border:0;background:var(--gold);margin-bottom:26px}
.rule.center{margin-left:auto;margin-right:auto}

/* ---------- Header / Nav ---------- */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(14,14,14,.94);backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid rgba(201,162,75,.18);color:var(--cream)}
.site-nav .container{display:flex;align-items:center;gap:clamp(16px,2vw,30px);height:88px}
.site-nav .brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.site-nav .brand img{height:38px;width:auto}
.site-nav .brand .brand-wm{height:21px;width:auto}
/* Menu centré (direction A) — centré dans l'espace entre logo et actions */
.nav-links{flex:1 1 auto;display:flex;justify-content:center;gap:clamp(16px,1.9vw,30px);align-items:center}
.nav-links a{font-family:var(--geo);text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-weight:600;color:#F6F1E7;position:relative;padding:10px 0;white-space:nowrap;transition:color .28s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:1.5px;background:var(--gold);transition:left .32s var(--ease),right .32s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{left:0;right:0}
.nav-links a[aria-current="page"]{color:var(--gold)}
.lang{font-family:var(--geo);font-size:11px;letter-spacing:.18em;color:var(--muted-dark);white-space:nowrap}
.lang b{color:var(--gold)}
.lang a{transition:color .25s}
.lang a:hover{color:var(--cream)}
@media(max-width:1080px){.nav-links{position:static;transform:none;display:none}}

/* ---------- Buttons ---------- */
.btn{font-family:var(--geo);text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:500;padding:15px 30px;border-radius:2px;border:1px solid transparent;display:inline-flex;align-items:center;gap:10px;transition:all .3s var(--ease);white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{box-shadow:inset 0 -2px 0 var(--gold)}
.dark .btn-primary{background:var(--cream);color:var(--ink)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-300)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.dark .btn-ghost{color:var(--cream);border-color:var(--ink-500)}
.dark .btn-ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-outline-gold{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn-outline-gold:hover{background:var(--gold);color:var(--ink)}
.btn-sm{padding:11px 20px;font-size:11.5px}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.link-gold{font-family:var(--geo);text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;color:var(--gold-text);border-bottom:1px solid var(--gold);padding-bottom:3px;transition:.25s}
.dark .link-gold{color:var(--gold)}
.link-gold:hover{letter-spacing:.14em}

/* ---------- Grids ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- Cards ---------- */
.card{background:var(--cream-paper);border:1px solid var(--line-light);border-radius:8px;padding:28px;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.card:hover{box-shadow:0 10px 28px rgba(14,14,14,.08)}
.card-dark{background:var(--ink-card);border:1px solid rgba(201,162,75,.32);border-radius:8px;padding:28px;color:var(--cream)}
.card .k,.card-dark .k{font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.2}
.card .p,.card-dark .p{font-size:14.5px;margin-top:8px}
.card .p{color:var(--muted)} .card-dark .p{color:var(--muted-dark)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--geo);text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:500;padding:5px 11px;border-radius:2px;background:var(--ink);color:var(--gold)}
.badge.light{background:transparent;color:var(--gold-text);border:1px solid var(--gold)}
.badge.soon{background:transparent;color:var(--muted-dark);border:1px solid var(--ink-500)}

/* ---------- Maison (location) card ---------- */
.maison{background:var(--ink-card);border:1px solid var(--ink-600);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .35s,transform .35s var(--ease)}
.maison:hover{border-color:rgba(201,162,75,.55);transform:translateY(-3px)}
.maison .photo{aspect-ratio:4/5;background:#1b1a17 center/cover;position:relative}
.maison .photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,14,14,.46) 0%,rgba(14,14,14,.10) 26%,transparent 52%,rgba(14,14,14,.34) 100%)}
.maison .photo .badge{position:absolute;top:14px;left:14px;z-index:2}
.maison .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.maison .city{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--cream);line-height:1}
.maison .addr{font-size:13.5px;color:var(--muted-dark);line-height:1.5}
.maison .hours{font-size:12.5px;color:var(--gold-300);font-family:var(--geo);letter-spacing:.03em}
.maison .acts{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;padding-top:14px}

/* ---------- Forms ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--geo);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--muted);margin-bottom:8px}
.dark .field label{color:var(--muted-dark)}
.field input,.field textarea,.field select{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);background:var(--cream-paper);border:1px solid var(--line-light);border-radius:3px;padding:14px 16px;transition:border .25s,box-shadow .25s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.35)}
.dark .field input,.dark .field textarea,.dark .field select{background:var(--ink-700);border-color:var(--ink-600);color:var(--cream)}

/* ---------- Stat / counter ---------- */
.stat{text-align:center}
.stat .num{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6vw,68px);line-height:1;color:var(--gold)}
.stat .lab{font-family:var(--geo);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--muted-dark);margin-top:10px}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--cream);overflow:hidden}
.hero .container{position:relative;z-index:2}
.hero-eyebrow{margin-bottom:22px}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--muted-dark);padding:clamp(56px,7vw,88px) 0 36px;border-top:1px solid var(--ink-600)}
.site-footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media(max-width:820px){.site-footer .top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.site-footer .top{grid-template-columns:1fr}}
.site-footer h5{font-family:var(--geo);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--gold);margin-bottom:16px}
.site-footer a{color:var(--muted-dark);font-size:14px;line-height:2;transition:color .2s}
.site-footer a:hover{color:var(--cream)}
.site-footer .brand img{height:44px;margin-bottom:16px}
.site-footer .baseline{font-family:var(--serif);font-style:italic;color:var(--gold-300);font-size:16px;margin-top:10px}
.socials{display:flex;gap:14px;margin-top:18px}
.socials a{display:inline-flex;width:38px;height:38px;border:1px solid var(--ink-500);border-radius:50%;align-items:center;justify-content:center;color:var(--muted-dark)}
.socials a:hover{border-color:var(--gold);color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--ink-600);font-family:var(--geo);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:var(--ink-500)}
.footer-bottom a{color:var(--ink-500)} .footer-bottom a:hover{color:var(--muted-dark)}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- Misc ---------- */
.kicker{font-family:var(--geo);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--muted)}
.sectlabel{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.sectlabel .n{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:19px}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag-list span{font-family:var(--geo);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--muted-dark);border:1px solid var(--ink-600);padding:8px 14px;border-radius:2px}
.dark .tag-list span:hover{border-color:var(--gold);color:var(--gold)}

/* ============================================================
   Photos · parallaxe · galerie · vidéo  (ajout dynamique)
   ============================================================ */
.media{overflow:hidden;border-radius:12px;background:#1b1a17 center/cover}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.round{border-radius:12px;overflow:hidden}

/* Couche parallaxe (image de fond qui glisse) */
.layer{position:absolute;inset:-16% 0;background-size:cover;background-position:center;will-change:transform;z-index:0;backface-visibility:hidden}
.scrim{position:absolute;inset:0;z-index:1}

/* Hero avec photo en fond */
.hero-photo{position:relative;color:var(--cream);background:var(--ink);overflow:hidden}
.hero-photo .scrim{background:linear-gradient(180deg,rgba(14,14,14,.42),rgba(14,14,14,.70) 52%,rgba(14,14,14,.97))}
.hero-photo .container{position:relative;z-index:2}

/* Bridge : section pleine largeur, photo en parallaxe + citation centrée */
.bridge{position:relative;min-height:clamp(360px,60vh,640px);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cream);background:var(--ink);overflow:hidden}
.bridge .scrim{background:linear-gradient(180deg,rgba(14,14,14,.5),rgba(14,14,14,.62))}
.bridge .container{position:relative;z-index:2}

/* Section à fond photo flouté (texture discrète) */
.blur-sec{position:relative;overflow:hidden}
.blur-sec .layer{filter:blur(30px) saturate(118%);transform:scale(1.25);opacity:.5}
.blur-sec .scrim{background:rgba(14,14,14,.84)}
.blur-sec .container{position:relative;z-index:2}

/* Galerie mosaïque */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(128px,14.5vw,208px);gap:10px}
.gallery .g{overflow:hidden;border-radius:10px;background:#1b1a17 center/cover;position:relative}
.gallery .g img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gallery .g:hover img{transform:scale(1.06)}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery .tall{grid-row:span 1}}

/* Carte-plat avec photo (signatures) */
.dish{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:#1b1a17 center/cover;display:flex;align-items:flex-end;color:var(--cream)}
.dish::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(14,14,14,.88))}
.dish .cap{position:relative;z-index:2;padding:22px;width:100%}
.dish .cap .k{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.1}
.dish .cap .p{font-size:13px;color:var(--muted-dark);margin-top:5px}
.dish .cap .badge{margin-bottom:11px}

/* Split éditorial : photo + texte */
.feature-img{border-radius:12px;overflow:hidden;background:#1b1a17 center/cover;min-height:clamp(280px,38vw,460px)}

/* Cadre téléphone (vidéo verticale) */
.phones{display:flex;gap:clamp(16px,2.5vw,28px);justify-content:center;flex-wrap:wrap}
.phone{width:clamp(176px,21vw,228px);aspect-ratio:9/16;border-radius:30px;overflow:hidden;border:3px solid #2a2824;box-shadow:0 26px 64px rgba(0,0,0,.55);background:#000;position:relative}
.phone video{width:100%;height:100%;object-fit:cover}

/* La photo des cartes "maison" accepte une image de fond inline (background-image) */
.maison .photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Vidéo en fond (hero) : se comporte comme une .layer parallaxe */
video.layer{width:100%;height:100%;object-fit:cover;border:0}

/* Lisibilité sur fonds sombres (hero photo/vidéo, bridge, scrub) :
   boutons & accents traités comme en contexte .dark */
.hero-photo .btn-ghost, .bridge .btn-ghost, .scrub .btn-ghost{color:var(--cream);border-color:var(--cream);opacity:.92}
.hero-photo .btn-ghost:hover, .bridge .btn-ghost:hover, .scrub .btn-ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);opacity:1}
.hero-photo .btn-primary, .bridge .btn-primary, .scrub .btn-primary{background:var(--cream);color:var(--ink)}
.hero-photo .btn-primary:hover, .bridge .btn-primary:hover, .scrub .btn-primary:hover{box-shadow:inset 0 -2px 0 var(--gold)}
.hero-photo .text-gold, .bridge .text-gold, .scrub .text-gold{color:var(--gold)}
.hero-photo .link-gold, .bridge .link-gold, .scrub .link-gold{color:var(--gold)}
.hero-photo .muted, .bridge .muted, .scrub .muted{color:var(--muted-dark)}
.hero-photo .lead, .bridge .lead, .scrub .lead{color:var(--muted-dark)}
.hero-photo .eyebrow, .bridge .eyebrow, .scrub .eyebrow{color:var(--gold)}

/* ============================================================
   Animations avancées (v2) — intro, scroll-scrub, draw, count
   ============================================================ */

/* Intro : reveal logo au chargement (auto-disparaît, même sans JS) */
.intro{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center;animation:introOut .9s var(--ease) 2s forwards}
.intro .mk{display:flex;flex-direction:column;align-items:center;gap:16px}
.intro img{width:clamp(92px,12vw,138px);animation:introPop 1s var(--ease) both}
.intro .ln{width:0;height:1px;background:var(--gold);animation:lnGrow .8s var(--ease) .55s both}
.intro .wm{font-family:var(--geo);letter-spacing:.32em;text-transform:uppercase;color:var(--cream);font-size:13px;opacity:0;animation:fadeUp .7s var(--ease) .7s both}
@keyframes introPop{0%{opacity:0;transform:scale(.72);filter:blur(8px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes lnGrow{to{width:118px}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes introOut{to{opacity:0;visibility:hidden;pointer-events:none}}
.intro.hide{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s var(--ease)}
@media(prefers-reduced-motion:reduce){.intro{display:none}}

/* Scroll-scrub : la vidéo avance image par image au scroll (section haute + stage collante) */
.scrub{position:relative;height:240vh;background:var(--ink)}
.scrub .stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.scrub .stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.scrub .stage .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,14,14,.4),rgba(14,14,14,.72))}
.scrub .stage .container{position:relative;z-index:2;text-align:center;color:var(--cream)}
.scrub .cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;font-family:var(--geo);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--muted-dark);animation:cueBob 1.8s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translate(-50%,0);opacity:.6}50%{transform:translate(-50%,7px);opacity:1}}

/* Filet d'or qui se trace au scroll */
.filet.draw{width:0;transition:width 1.1s var(--ease)}
.filet.draw.in{width:100%}
.rule.draw{width:0;transition:width .9s var(--ease)}
.rule.draw.in{width:60px}

/* Image qui se révèle (clip) */
.clip-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
.clip-reveal.in{clip-path:inset(0 0 0 0)}