/* Café Buci — Saint-Germain. Une journée de 21 h 30 : le fond passe du lin du matin au bleu de la nuit. */
:root{
  --blue:#1c2b55;
  --blue-deep:#121d3d;
  --blue-soft:#3a4b80;
  --ink:#10131c;
  --paper:#f7f4ee;
  --paper-2:#ece5d6;
  --muted:#6b6d78;
  --line:rgba(16,19,28,.14);
  --display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans:"Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut:clamp(16px, 4vw, 48px);
  --ease:cubic-bezier(.2,.7,.1,1);
  /* tonalité courante (pilotée par data-tone sur body) */
  --bg:var(--paper); --fg:var(--ink); --fg-2:#2b2e3a; --accent:var(--blue); --rule:var(--line);
}
body[data-tone="noon"]{--bg:var(--paper-2)}
body[data-tone="dusk"]{--bg:#2a3357;--fg:#f7f4ee;--fg-2:#d9dceb;--accent:#c9d3ff;--rule:rgba(247,244,238,.22)}
body[data-tone="night"]{--bg:var(--blue-deep);--fg:#f7f4ee;--fg-2:#c9cee0;--accent:#9fb0e8;--rule:rgba(247,244,238,.2)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background 1.2s var(--ease),color .8s var(--ease)}
img,video{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px var(--gut);color:#fff;transition:background .4s var(--ease),color .4s var(--ease),padding .4s var(--ease)}
.hd.is-solid{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--fg);padding-block:10px;border-bottom:1px solid var(--rule)}
.logo{display:block;width:clamp(66px,7vw,86px);color:inherit}
.logo svg{width:100%;height:auto}
.nav{display:flex;align-items:center;gap:clamp(12px,2.2vw,30px);font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:right .35s var(--ease)}
.nav a:hover::after{right:0}
.nav .lang,.nav .resa{border:1px solid currentColor;border-radius:99px;padding:8px 12px}
.nav .lang::after,.nav .resa::after{display:none}
.nav .resa{background:#fff;color:var(--blue);border-color:#fff}
.hd.is-solid .resa{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.nav .hide-sm{display:none}
@media (min-width:900px){.nav .hide-sm{display:inline}}

/* ---------- hero : film plein cadre, logo à gauche, horloge à droite ---------- */
.hero{position:relative;min-height:100svh;background:var(--blue-deep);color:#fff;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.hero__media{position:absolute;inset:0}
.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,40,.55) 0%,rgba(10,16,40,.05) 35%,rgba(10,16,40,.2) 60%,rgba(10,16,40,.9) 100%)}
.hero__top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:88px var(--gut) 0}
.hero__top .sound{position:static}
.eyebrow{font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;margin:0}
.hero .eyebrow{display:flex;gap:.8em;align-items:center}
.hero .eyebrow i{width:28px;height:1px;background:currentColor;display:inline-block}
.hero__in{position:relative;z-index:2;align-self:end;display:grid;gap:28px;padding:40px var(--gut) clamp(28px,6vh,64px)}
@media (min-width:960px){.hero__in{grid-template-columns:1fr 1fr;align-items:end}}
.hero__title{margin:0;width:clamp(150px,36vw,300px);color:#fff;filter:drop-shadow(0 2px 30px rgba(0,0,0,.35))}
.hero__title svg{width:100%;height:auto}
.hero__clock{justify-self:start}
@media (min-width:960px){.hero__clock{justify-self:end;text-align:right}}
.hero__time{margin:0;font:400 clamp(72px,14vw,200px)/.85 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero__sub{margin:14px 0 0;font:italic 400 clamp(18px,2vw,26px)/1.25 var(--display);display:flex;gap:10px;align-items:baseline}
@media (min-width:960px){.hero__sub{justify-content:flex-end}}
.hero__meta{margin:8px 0 0;font:500 13px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media (min-width:960px){.hero__cta{justify-content:flex-end}}
.dot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:#3bd16f;box-shadow:0 0 0 0 rgba(59,209,111,.6);animation:pulse 2s infinite;transform:translateY(-2px)}
.dot.is-closed{background:#999;animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(59,209,111,0)}100%{box-shadow:0 0 0 0 rgba(59,209,111,0)}}
.sound{position:absolute;right:14px;top:14px;z-index:3;border:0;border-radius:99px;background:rgba(255,255,255,.92);color:var(--blue);font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;cursor:pointer}

/* vidéo bloquée (autoplay refusé) : invite au tap, par-dessus le poster */
.needs-tap{cursor:pointer}
.needs-tap::before{content:"▶";position:absolute;left:50%;top:50%;z-index:3;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--blue);font:400 22px/64px var(--sans);text-align:center;text-indent:3px;pointer-events:none}
.hero.needs-tap::before{top:40%}

/* ---------- ticker des heures ---------- */
.ticker{background:var(--blue);color:#fff;overflow:hidden}
.ticker__track{display:flex;width:max-content;animation:scroll 48s linear infinite}
.ticker span{display:inline-flex;align-items:baseline;gap:.5em;padding:16px 2.2em 16px 0;white-space:nowrap;font:400 clamp(16px,1.6vw,20px)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.ticker span b{font:400 clamp(26px,3vw,40px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ticker span::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6;margin-left:1.8em;transform:translateY(-.4em)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:clamp(72px,12vw,150px) var(--gut)}
.sec__head{display:grid;gap:18px;margin-bottom:clamp(36px,6vw,72px)}
@media (min-width:860px){.sec__head{grid-template-columns:1fr 1fr;align-items:end}}
.h2{margin:0;font:400 clamp(44px,7.5vw,112px)/.95 var(--display);letter-spacing:-.015em;color:var(--fg)}
.h2 em{font-style:italic;font-weight:400;color:var(--accent)}
.lede{margin:0;max-width:34em;font:400 clamp(18px,1.6vw,21px)/1.5 var(--sans);color:var(--fg-2)}
.num{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.num--light{color:#c9d3ff}

/* ---------- chapitres : heure collante à gauche, image et texte à droite ---------- */
.day{padding-bottom:0}
.chapters{display:grid}
.chap{display:grid;gap:18px;padding:clamp(40px,7vw,96px) var(--gut);border-top:1px solid var(--rule)}
@media (min-width:960px){.chap{grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,96px)}}
.chap__time{align-self:start}
@media (min-width:960px){.chap__time{position:sticky;top:110px}}
.chap__num{margin:0;font:400 14px/1 var(--display);letter-spacing:.3em;color:var(--accent)}
.chap__clock{margin:.1em 0 0;font:400 clamp(72px,14vw,220px)/.85 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--fg)}
.chap__name{margin:.2em 0 0;font:italic 400 clamp(26px,3vw,44px)/1.1 var(--display);color:var(--accent)}
.chap__fig{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--paper-2)}
.chap__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.chap:hover .chap__fig img{transform:scale(1.03)}
.chap:nth-child(even) .chap__fig{aspect-ratio:4/3}
@media (min-width:960px){.chap:nth-child(odd) .chap__body{padding-left:8%}.chap:nth-child(even) .chap__body{padding-right:8%}}
.chap__desc{margin:20px 0 0;max-width:30em;font:400 clamp(17px,1.4vw,20px)/1.5 var(--sans);color:var(--fg-2)}

/* ---------- à l'affiche : un grand film, trois petits en programme ---------- */
.films .lede{color:var(--fg-2)}
.affiche{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:960px){.affiche{grid-template-columns:1fr 1fr;align-items:start}}
.reel{position:relative;aspect-ratio:9/16;background:#16213f;overflow:hidden;border-radius:2px}
.reel video{width:100%;height:100%;object-fit:cover}
.reel__cap{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(180deg,transparent,rgba(10,16,40,.8));display:flex;justify-content:space-between;align-items:end;gap:10px;pointer-events:none;color:#fff}
.reel__cap b{font:400 22px/1 var(--display);letter-spacing:.01em}
.reel__cap small{display:block;font:italic 400 17px/1.2 var(--display);opacity:.85;margin-top:4px}
.reel--xl{max-height:82svh;margin:0 auto;width:auto}
@media (max-width:959px){.reel--xl{max-width:420px}}
.affiche__kicker{margin:0 0 14px;font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.affiche__list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (min-width:960px){.affiche__list{grid-template-columns:repeat(3,1fr);gap:16px}}
.reel--s .reel__cap{padding:12px}
.reel--s .reel__cap b{font-size:15px}
.reel--s .reel__cap small{font-size:13px}
.reel--s .sound{padding:8px 10px;font-size:9px;right:8px;top:8px}

/* ---------- carte à points de conduite ---------- */
.menu{display:grid;gap:clamp(32px,4vw,52px)}
@media (min-width:760px){.menu{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,96px)}}
.mgroup h3{margin:0 0 10px;display:flex;align-items:baseline;gap:.6em;font:italic 400 clamp(28px,2.8vw,38px)/1 var(--display);color:var(--accent)}
.mgroup h3 span{font:400 12px/1 var(--display);letter-spacing:.3em;font-style:normal;color:var(--fg-2);opacity:.7}
.mgroup ul{margin:0;padding:0;list-style:none}
.mgroup li{display:flex;align-items:baseline;gap:10px;padding:9px 0}
.mgroup .mi{display:grid;min-width:0}
.mgroup b{font:600 17px/1.25 var(--sans);letter-spacing:-.01em;color:var(--fg)}
.mgroup i{font:italic 400 15px/1.3 var(--display);color:var(--muted)}
body[data-tone="night"] .mgroup i,body[data-tone="dusk"] .mgroup i{color:var(--fg-2)}
.mgroup .lead{flex:1;min-width:24px;border-bottom:2px dotted var(--rule);transform:translateY(-6px)}
.mgroup .mp{font:400 18px/1 var(--display);white-space:nowrap;font-variant-numeric:tabular-nums}
.mgroup--bf h3 span{font-size:16px;letter-spacing:0}
.menu-note{margin:28px 0 0;font-size:13px;color:var(--muted);letter-spacing:.04em}
.btn{display:inline-flex;align-items:center;gap:.6em;border:1px solid currentColor;border-radius:99px;padding:15px 24px;font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn--blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--blue:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--light{background:#fff;border-color:#fff;color:var(--blue)}
.btn--light:hover{background:var(--paper);border-color:var(--paper);color:var(--blue)}
.btn--ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn--ghost:hover{background:#fff;border-color:#fff;color:var(--blue)}
.menu-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,44px)}

/* ---------- citation ---------- */
.quote{padding:clamp(56px,10vw,140px) var(--gut);text-align:center}
.quote__txt{margin:0 auto;max-width:14em;font:400 clamp(40px,8vw,128px)/1 var(--display);letter-spacing:-.02em;color:var(--fg)}
.quote__txt em{font-style:italic;color:var(--accent)}

/* ---------- vu au Buci : mosaïque éditoriale avec légendes ---------- */
.lookbook{padding-top:0}
.looks{columns:1;column-gap:clamp(14px,2vw,28px)}
@media (min-width:700px){.looks{columns:2}}
@media (min-width:1100px){.looks{columns:3}}
.look{margin:0 0 clamp(14px,2vw,28px);break-inside:avoid;overflow:hidden}
.look img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.look:hover img{transform:scale(1.02)}
.look figcaption{padding:10px 0 4px;font:italic 400 15px/1.3 var(--display);color:var(--fg-2);border-top:1px solid var(--rule)}

/* ---------- 05:00 : la nuit ---------- */
.night{position:relative;overflow:hidden;color:#fff;background:var(--blue-deep);padding:clamp(80px,14vw,180px) var(--gut)}
.night__media{position:absolute;inset:0}
.night__media video{width:100%;height:100%;object-fit:cover;opacity:.5}
.night__media::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 30% 50%,rgba(18,29,61,.35),rgba(18,29,61,.92))}
.night__in{position:relative;z-index:2;max-width:1100px}
.night__five{margin:0 0 .05em -.03em;font:400 clamp(110px,26vw,420px)/.8 var(--display);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:#fff;opacity:.95}
.night .h2{color:#fff}
.night .h2 em{color:#9fb0e8}
.night .lede{color:#e3e6f2;margin-top:22px}
.night__meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#c9d3ff}
.night__ck{margin-top:clamp(36px,5vw,56px);max-width:620px}
.night__ck ul{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.3)}
.night__ck li{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.night__ck .mi{display:grid}
.night__ck b{font:400 22px/1.1 var(--display)}
.night__ck i{font:italic 400 15px/1.3 var(--display);color:#c9cee0}
.night__ck .lead{flex:1;border-bottom:2px dotted rgba(255,255,255,.3);transform:translateY(-6px)}
.night__ck .mp{font:400 18px/1 var(--display);white-space:nowrap}

/* ---------- la maison : 150 ---------- */
.house{display:grid;gap:clamp(28px,5vw,64px);padding:clamp(72px,12vw,150px) var(--gut)}
@media (min-width:960px){.house{grid-template-columns:1.05fr .95fr;align-items:center}}
.house__big{margin:0;font:400 clamp(120px,22vw,320px)/.8 var(--display);letter-spacing:-.06em;color:var(--accent);opacity:.18;margin-bottom:-.35em}
.house .h2{position:relative}
.house .lede{margin-top:22px}
.house ul{margin:28px 0 0;padding:0;list-style:none;display:grid;border-top:1px solid var(--fg)}
.house li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font:500 15px/1.3 var(--sans)}
.house li span:last-child{font:italic 400 18px/1.2 var(--display);color:var(--accent)}
.house .btn{margin-top:26px}
.house__img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.house__img img{width:100%;height:100%;object-fit:cover}

/* ---------- rue Dauphine : venir ---------- */
.visit__head{margin-bottom:clamp(36px,6vw,72px)}
.visit__addr{margin:.3em 0 0;font:400 clamp(30px,4.4vw,64px)/1 var(--display);letter-spacing:-.01em;color:var(--accent)}
.visit{display:grid;gap:clamp(36px,5vw,56px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--fg)}
@media (min-width:700px){.visit{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.visit{grid-template-columns:1fr 1fr 1fr 1.4fr}}
.visit h3{margin:0 0 14px;font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.visit p,.visit dl{margin:0;font:400 18px/1.45 var(--sans)}
.visit dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px}
.visit dt{font-weight:600}
.visit__note{margin-top:14px!important;font-size:15px!important;color:var(--muted)}
.visit a{text-decoration-thickness:1px;text-underline-offset:4px}
.visit .btn{text-decoration:none}
.visit__hoodtxt{font-size:16px!important;color:var(--fg-2)}
.spots{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--fg)}
.spots li{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.spots b{font:400 20px/1.1 var(--display)}
.spots span{font:italic 400 15px/1.2 var(--display);color:var(--muted);text-align:right}
.visit__img{margin:clamp(40px,6vw,72px) 0 0;aspect-ratio:16/7;overflow:hidden;background:var(--paper-2)}
.visit__img img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}

/* ---------- faq ---------- */
.faq-list{max-width:820px;border-top:1px solid var(--fg)}
.faq{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font:400 clamp(20px,2vw,26px)/1.25 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font:300 28px/1 var(--display);color:var(--accent);transition:transform .3s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 22px;max-width:40em;color:var(--fg-2)}

/* ---------- footer ---------- */
.ft{background:var(--blue-deep);color:var(--paper);padding:clamp(56px,8vw,100px) var(--gut) 28px;overflow:hidden}
.ft__logo{width:120px;color:#fff;margin:0 0 clamp(28px,5vw,48px)}
.ft__logo svg{width:100%;height:auto}
.ft__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;border-top:1px solid rgba(247,244,238,.2);padding-top:22px;font:500 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.ft__row a{text-decoration:none;opacity:.8}
.ft__row a:hover{opacity:1}
.ft__links{display:flex;flex-wrap:wrap;gap:18px}

/* ---------- mobile call bar : toujours visible, calée au-dessus de la barre système ---------- */
.callbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;gap:8px}
.callbar a{flex:1;text-align:center;justify-content:center;padding:15px 10px;background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.callbar a.btn--blue{background:var(--blue);border-color:var(--blue)}
@media (min-width:860px){.callbar{display:none}}
@media (max-width:859px){.hero__in{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}.ft{padding-bottom:110px}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .ticker__track,.dot{animation:none}
  html{scroll-behavior:auto}
  body{transition:none}
}

/* ---------- legal / 404 ---------- */
.legal{max-width:760px;margin:0 auto;padding:140px var(--gut) 80px}
.legal h1{font:400 clamp(40px,7vw,88px)/.95 var(--display);margin:0 0 40px}
.legal h2{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin:36px 0 10px;color:var(--muted)}
.legal p{margin:0 0 10px}
.page-legal .hd{color:var(--blue)}
.page-legal .hd .resa{background:var(--blue);color:#fff;border-color:var(--blue)}

@media (max-width:699px){
  .affiche__list{grid-template-columns:repeat(3,1fr);gap:8px}
}