/* ---------- accueil restauration (2026-10-09) ---------- */
/* hero : photo de salle + léger zoom */
.hero{isolation:isolate}
.hero .wrap{position:relative;z-index:2}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.55;transform:scale(1.04);animation:heroZoom 26s ease-in-out infinite alternate}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,20,.72),rgba(13,20,26,.78) 50%,rgba(10,14,18,.97))}
.hero::after{z-index:1}
@keyframes heroZoom{from{transform:scale(1.04)}to{transform:scale(1.12)}}

/* bandeau de chiffres sous le héros */
.chiffres{background:var(--noir-3);border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure);padding:54px 0 46px}
.chiffres-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.chiffre{text-align:center;padding:0 10px;position:relative}
.chiffre+.chiffre::before{content:"";position:absolute;left:-14px;top:12%;height:76%;width:1px;background:var(--bordure)}
.chiffre-val{font-family:var(--serif);font-size:clamp(40px,4.6vw,60px);color:var(--or-clair);line-height:1;font-weight:500;letter-spacing:-.01em}
.chiffre-val sup{font-size:.45em;vertical-align:top;margin-left:2px;color:var(--or)}
.chiffre-lbl{font-size:13.5px;color:var(--gris);margin-top:12px;line-height:1.55;max-width:230px;margin-left:auto;margin-right:auto}
.chiffre-src{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-fonce);margin-top:10px}
.chiffres-note{text-align:center;font-size:12px;color:var(--gris-fonce);margin-top:34px;font-style:italic}
.chiffres-note a{color:var(--or);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.chiffres-grid{grid-template-columns:1fr 1fr;gap:34px 24px}.chiffre:nth-child(3)::before{display:none}}
@media(max-width:520px){.chiffres-grid{grid-template-columns:1fr}.chiffre+.chiffre::before{display:none}.chiffre{padding-top:26px;border-top:1px solid var(--bordure)}.chiffre:first-child{padding-top:0;border-top:none}}

/* le flux : une information qui traverse le restaurant */
.flux{margin-top:70px;border:1px solid var(--bordure);background:rgba(255,255,255,.015);padding:40px 38px 34px;position:relative}
.flux-title{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);color:var(--blanc);margin-bottom:8px;font-weight:500}
.flux-sub{font-size:14px;color:var(--gris);margin-bottom:34px;max-width:620px}
.flux-row{position:relative;margin-bottom:34px}
.flux-row:last-child{margin-bottom:0}
.flux-lbl{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.flux-row.lent .flux-lbl{color:#c97a76}
.flux-row.fluide .flux-lbl{color:#7fae6f}
.flux-track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);align-items:start}
.flux-track::before{content:"";position:absolute;left:8%;right:8%;top:11px;height:1px;background:var(--bordure)}
.flux-step{text-align:center;position:relative;padding:0 6px}
.flux-dot{width:23px;height:23px;border-radius:50%;border:1px solid var(--bordure);background:var(--noir-2);margin:0 auto 12px;position:relative;z-index:1;transition:border-color .3s,background .3s,box-shadow .3s}
.flux-step span{font-size:12.5px;color:var(--gris);display:block;line-height:1.4}
.flux-ball{position:absolute;top:5px;left:8%;width:13px;height:13px;border-radius:50%;background:var(--or-clair);box-shadow:0 0 18px rgba(212,184,120,.75);z-index:2;transform:translateX(-50%)}
.flux-row.lent .flux-ball{animation:fluxLent 9s cubic-bezier(.4,0,.2,1) infinite}
.flux-row.fluide .flux-track{grid-template-columns:1fr 1fr}
.flux-row.fluide .flux-track::before{left:25%;right:25%}
.flux-row.fluide .flux-ball{animation:fluxFluide 9s cubic-bezier(.4,0,.2,1) infinite}
.flux-row.lent .flux-step:nth-child(2) .flux-dot{animation:dotOn 9s infinite;animation-delay:0s}
.flux-row.lent .flux-step:nth-child(3) .flux-dot{animation:dotOn 9s infinite;animation-delay:1.5s}
.flux-row.lent .flux-step:nth-child(4) .flux-dot{animation:dotOn 9s infinite;animation-delay:3s}
.flux-row.lent .flux-step:nth-child(5) .flux-dot{animation:dotOn 9s infinite;animation-delay:4.5s}
.flux-row.lent .flux-step:nth-child(6) .flux-dot{animation:dotOn 9s infinite;animation-delay:6s}
.flux-row.lent .flux-step:nth-child(7) .flux-dot{animation:dotOn 9s infinite;animation-delay:7.6s}
.flux-row.fluide .flux-step:nth-child(3) .flux-dot{animation:dotOnGreen 9s infinite;animation-delay:1.2s}
.flux-time{position:absolute;right:0;top:-4px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gris-fonce)}
.flux-row.fluide .flux-time{color:#7fae6f}
@keyframes fluxLent{
  0%{left:8%}
  12%{left:8%}
  16%{left:24.8%} 28%{left:24.8%}
  32%{left:41.6%} 46%{left:41.6%}
  50%{left:58.4%} 66%{left:58.4%}
  70%{left:75.2%} 82%{left:75.2%}
  86%{left:92%} 100%{left:92%}
}
@keyframes fluxFluide{0%{left:25%}10%{left:25%}22%{left:75%}100%{left:75%}}
@keyframes dotOn{0%,14%{border-color:var(--bordure);background:var(--noir-2);box-shadow:none}18%,30%{border-color:#c97a76;background:rgba(201,122,118,.25);box-shadow:0 0 14px rgba(201,122,118,.35)}34%,100%{border-color:var(--bordure);background:var(--noir-2);box-shadow:none}}
@keyframes dotOnGreen{0%,12%{border-color:var(--bordure);background:var(--noir-2)}16%,90%{border-color:#7fae6f;background:rgba(127,174,111,.22);box-shadow:0 0 14px rgba(127,174,111,.35)}100%{border-color:var(--bordure);background:var(--noir-2)}}
@media(max-width:760px){
  .flux{padding:30px 22px 26px}
  .flux-track{grid-template-columns:repeat(3,1fr);row-gap:26px}
  .flux-track::before,.flux-ball{display:none}
  .flux-row.lent .flux-step .flux-dot{animation:dotOn 9s infinite}
  .flux-time{position:static;display:block;margin-top:14px}
}

/* comparaison : apparition décalée */
.js .pair.reveal .cmp{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.js .pair.reveal.in .cmp{opacity:1;transform:none}
.js .pair.reveal.in .cmp.good{transition-delay:.25s}
.cmp-illus{aspect-ratio:3/2;object-fit:cover}

/* zones de friction */
.sector{transition:border-color .4s,transform .4s,background .4s}
.sector:hover{border-color:var(--or);transform:translateY(-4px);background:rgba(184,151,90,.04)}
.sector-ex{font-size:12.5px;color:var(--gris-fonce);margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05);line-height:1.55}
.sector-ex b{color:var(--or);font-weight:500}

/* résultats : filet or animé */
.res{position:relative;padding-top:18px}
.res::before{content:"";position:absolute;top:0;left:0;height:1px;width:0;background:var(--or);transition:width 1.1s ease .2s}
.reveal.in .res::before{width:48px}

/* sources */
.sources{padding:34px 0 10px;border-top:1px solid rgba(255,255,255,.05)}
.sources summary{cursor:pointer;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-fonce);list-style:none;display:inline-flex;align-items:center;gap:10px}
.sources summary::after{content:"+";font-size:14px;color:var(--or)}
.sources[open] summary::after{content:"−"}
.sources ol{margin:18px 0 0 18px;font-size:12.5px;color:var(--gris-fonce);line-height:1.7;max-width:820px}
.sources a{color:var(--gris);text-decoration:underline;text-underline-offset:3px}
.sources a:hover{color:var(--or)}

@media(prefers-reduced-motion:reduce){
  .hero-bg img,.flux-ball,.flux-dot{animation:none!important}
  .flux-row.lent .flux-ball{left:92%}.flux-row.fluide .flux-ball{left:75%}
}