/* ============================================================
   Brasserie Phoenix — feuille de style
   Charte : crème #F6F0E4 · bleu marine #16364A · cuivre #B98D55
   + touche "feu" discrète (braise). Mobile-first, accessible.
   ============================================================ */

:root {
  --creme: #F6F0E4;
  --creme-2: #efe6d5;
  --marine: #16364A;
  --marine-clair: #24506b;
  --cuivre: #B98D55;
  --cuivre-clair: #d0a869;
  --feu-1: #e2703a;
  --feu-2: #c0392b;
  --texte: #22303a;
  --texte-doux: #5b6a72;
  --blanc: #fffdf9;
  --ombre: 0 8px 30px rgba(22, 54, 74, 0.10);
  --rayon: 10px;
  --largeur: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  font-family: 'Jost', system-ui, sans-serif;
  background: var(--creme);
  color: var(--texte);
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--marine); font-weight: 600; line-height: 1.1; }

a { color: var(--marine); text-decoration: none; }

img { max-width: 100%; display: block; }

/* ---- Accessibilité : focus visible ---- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--cuivre);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================ Bandeau annonces ============================ */
.annonces { padding: 10px 16px; text-align: center; font-size: 0.95rem; color: var(--blanc); background: var(--cuivre); }
.annonces.ton-fete { background: linear-gradient(90deg, var(--feu-1), var(--feu-2)); }
.annonces.ton-alerte { background: var(--marine); }
.annonces p { margin: 2px 0; }

/* ============================ En-tête / nav ============================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px;
  background: rgba(246, 240, 228, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--creme-2);
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-logo { width: 38px; height: 38px; object-fit: contain; }
.brand-name { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 700; color: var(--marine); letter-spacing: 0.5px; }

.main-nav { display: none; gap: 20px; }
.main-nav a { font-size: 0.95rem; font-weight: 400; color: var(--texte); position: relative; padding: 4px 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--cuivre); transition: width 0.25s ease; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { width: 100%; }

.lang-switch { display: flex; gap: 4px; }
.lang-switch button {
  font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 500;
  padding: 5px 8px; border: 1px solid var(--cuivre); background: transparent;
  color: var(--marine); border-radius: 6px; cursor: pointer; transition: all 0.2s;
}
.lang-switch button[aria-pressed="true"] { background: var(--marine); color: var(--creme); border-color: var(--marine); }

/* ============================ Hero ============================ */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 82vh; padding: 60px 20px;
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, #1d4a63 0%, transparent 60%),
    linear-gradient(160deg, #16364A 0%, #0f2634 60%, #0b1d28 100%);
  color: var(--creme);
}
/* braise animée en bas du hero (touche feu) */
.hero-embers {
  position: absolute; inset: auto 0 0 0; height: 45%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(226,112,58,0.42) 0%, rgba(192,57,43,0.18) 35%, transparent 70%);
  filter: blur(4px);
  animation: braise 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes braise {
  0%, 100% { opacity: 0.75; transform: translateY(0) scaleY(1); }
  50% { opacity: 1; transform: translateY(-6px) scaleY(1.08); }
}
.hero-inner { position: relative; max-width: 720px; }
.hero-logo { width: 120px; height: auto; margin: 0 auto 18px; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.35)); }
.hero-title { color: var(--creme); font-size: clamp(2.6rem, 8vw, 4.6rem); font-weight: 700; letter-spacing: 1px; }
.hero-slogan { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.2rem, 4vw, 1.7rem); color: var(--cuivre-clair); margin-top: 6px; }
.hero-accroche { font-size: 1.02rem; color: #e8e0d2; margin: 18px auto 0; max-width: 560px; }
.hero-lieu { margin-top: 14px; font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cuivre); }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ============================ Boutons ============================ */
.btn {
  display: inline-block; font-family: 'Jost', sans-serif; font-size: 0.95rem; font-weight: 500;
  padding: 13px 26px; border-radius: 999px; cursor: pointer; border: 2px solid transparent;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--cuivre); color: var(--marine); border-color: var(--cuivre); }
.btn-primary:hover { background: var(--cuivre-clair); }
.btn-ghost { background: transparent; color: var(--creme); border-color: var(--creme); }
.hero .btn-ghost:hover { background: rgba(255,255,255,0.1); }
.section .btn-ghost { color: var(--marine); border-color: var(--marine); }
.section .btn-ghost:hover { background: rgba(22,54,74,0.06); }

/* ============================ Sections ============================ */
.section { max-width: var(--largeur); margin: 0 auto; padding: 64px 20px; }
.section-alt { background: var(--creme-2); max-width: none; }
.section-alt > * { max-width: var(--largeur); margin-left: auto; margin-right: auto; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(2rem, 6vw, 3rem); position: relative; display: inline-block; }
.section-head h2::after { content: ""; display: block; width: 60px; height: 3px; background: var(--cuivre); margin: 12px auto 0; border-radius: 2px; }
.section-intro { color: var(--texte-doux); margin-top: 14px; font-size: 0.98rem; }

/* ============================ Carte (menu) ============================ */
.carte { display: grid; gap: 40px; }
.cat-titre { font-size: 1.9rem; color: var(--marine); display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.cat-titre::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cuivre); flex: none; }
.cat-note { color: var(--texte-doux); font-style: italic; font-size: 0.92rem; margin-bottom: 18px; }

/* squelette de catégorie (pendant le chargement à la demande) */
.cat-skeleton { display: grid; gap: 14px; padding: 6px 0; }
.sk-ligne { height: 40px; border-radius: 8px; background: var(--creme-2);
  background-image: linear-gradient(90deg, var(--creme-2) 0%, #efe6d5 20%, #f6efe0 40%, var(--creme-2) 60%);
  background-size: 200% 100%; animation: sk-shimmer 1.3s ease-in-out infinite; }
.sk-ligne:nth-child(2) { width: 92%; }
.sk-ligne:nth-child(3) { width: 84%; }
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.cat-erreur { color: var(--texte-doux); font-style: italic; padding: 10px 0; }
@media (prefers-reduced-motion: reduce) { .sk-ligne { animation: none; } }

.plats { display: grid; gap: 2px; }
.plat {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
  padding: 16px 14px; border-radius: var(--rayon);
  transition: background 0.2s ease;
}
.plat:hover { background: var(--blanc); }
.plat-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plat-nom { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--marine); }
.plat-origine { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cuivre); border: 1px solid var(--cuivre); padding: 1px 7px; border-radius: 999px; }
.plat-desc { grid-column: 1 / -1; color: var(--texte-doux); font-size: 0.93rem; max-width: 60ch; }
.plat-prix { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 700; color: var(--marine); white-space: nowrap; align-self: start; }
.plat-prix.special { font-style: italic; font-size: 1rem; color: var(--cuivre); }

/* badge Coup de Cœur */
.badge-cdc {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--feu-2); background: rgba(226,112,58,0.12);
  padding: 2px 8px; border-radius: 999px;
}
.badge-cdc::before { content: "❤"; font-size: 0.7rem; }
.plat.is-cdc { background: linear-gradient(90deg, rgba(226,112,58,0.06), transparent 70%); }

/* sous-blocs sauces / accompagnements des viandes */
.sous-listes { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 22px; padding: 20px; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); }
.sous-bloc h4 { font-family: 'Jost', sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cuivre); margin-bottom: 10px; }
.sous-bloc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sous-bloc li { font-size: 0.95rem; color: var(--texte); position: relative; padding-left: 14px; }
.sous-bloc li::before { content: "•"; color: var(--cuivre); position: absolute; left: 0; }

/* ============================ Menu Dégustation (5 temps) ============================ */
:root { --or: #D4A843; }               /* or chaud (accents dégustation) */
.degust { max-width: 760px; margin: 0 auto; }

/* Badge prix */
.degust-prix { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 44px; }
.degust-prix-montant {
  font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--marine);
  font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1;
  border: 2px solid var(--or); border-radius: 999px; padding: 10px 36px; background: var(--blanc);
  box-shadow: 0 10px 30px rgba(212, 168, 67, 0.16);
}
.degust-prix-note { font-size: 0.82rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: 0.14em; }

/* Fil vertical numéroté I–V */
.degust-temps { list-style: none; margin: 0; padding: 0; }
.degust-item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 24px 0; align-items: start; }
.degust-item + .degust-item { border-top: 1px solid var(--creme-2); }
.degust-num {
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 2rem; line-height: 1;
  color: var(--or); text-align: center; padding-top: 2px; position: relative;
}
/* trait reliant les chiffres */
.degust-item:not(:last-child) .degust-num::after {
  content: ""; position: absolute; left: 50%; top: 2.7rem; bottom: -48px; width: 1px;
  background: linear-gradient(var(--cuivre), transparent); transform: translateX(-50%);
}
.degust-label { display: block; font-family: 'Jost', sans-serif; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--cuivre); margin-bottom: 6px; }
.degust-nom { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--marine); margin: 0; line-height: 1.2; }
.degust-desc { color: var(--texte-doux); font-size: 0.95rem; margin-top: 5px; }

/* Plat au choix : deux options séparées par « ou » */
.degust-choix { display: grid; gap: 14px; }
.degust-ou { justify-self: start; font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--cuivre); font-size: 1.05rem; }
.degust-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.degust-tag {
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--marine); background: var(--cuivre-clair); padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 520px) {
  .degust-item { grid-template-columns: 44px 1fr; gap: 14px; }
  .degust-num { font-size: 1.6rem; }
  .degust-item:not(:last-child) .degust-num::after { top: 2.2rem; }
}

/* ============================ Réservation ============================ */
.reservation { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 640px; margin: 0 auto; background: var(--blanc); padding: 28px; border-radius: var(--rayon); box-shadow: var(--ombre); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.85rem; font-weight: 500; color: var(--marine); }
.field input { font-family: 'Jost', sans-serif; font-size: 1rem; padding: 11px 13px; border: 1px solid #d7cbb4; border-radius: 8px; background: var(--creme); color: var(--texte); }
.field input:focus { border-color: var(--cuivre); background: #fff; }
.form-erreur { color: var(--feu-2); font-size: 0.9rem; font-weight: 500; }
.reservation-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.reservation-actions .btn { flex: 1; min-width: 180px; }

/* ============================ Infos ============================ */
.infos { display: grid; gap: 24px; max-width: 820px; margin: 0 auto; }
.info-bloc { background: var(--blanc); border-radius: var(--rayon); padding: 22px 24px; box-shadow: var(--ombre); }
.info-bloc h3 { font-size: 1.4rem; margin-bottom: 8px; }
.info-bloc p, .info-bloc a { font-size: 1rem; color: var(--texte); }
.info-bloc a.lien-fort { color: var(--marine-clair); font-weight: 500; }
.info-horaires li { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px dashed var(--creme-2); }
.info-map { width: 100%; height: 240px; border: 0; border-radius: var(--rayon); margin-top: 10px; }

/* ============================ Pied de page ============================ */
.site-footer { background: var(--marine); color: var(--creme); text-align: center; padding: 40px 20px; }
.footer-logo { width: 56px; margin: 0 auto 12px; }
.footer-name { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; }
.footer-social { display: flex; gap: 18px; justify-content: center; margin: 16px 0; }
.footer-social a { color: var(--creme); font-size: 0.95rem; border-bottom: 1px solid transparent; }
.footer-social a:hover { border-bottom-color: var(--cuivre); }
.footer-legal { font-size: 0.8rem; color: #b9c6cf; margin-top: 10px; }

/* ============================ Responsive ============================ */
@media (min-width: 760px) {
  .main-nav { display: flex; }
  .plats { gap: 6px; }
  .sous-listes { grid-template-columns: 1fr 1fr; }
  .reservation { grid-template-columns: 1fr 1fr; }
  .reservation .field:nth-child(4), .reservation .field:nth-child(5) { grid-column: span 1; }
  .form-erreur, .reservation-actions { grid-column: 1 / -1; }
  .infos { grid-template-columns: 1fr 1fr; }
}

/* ============================ Reduced motion ============================ */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .hero-embers { animation: none; }
  .btn:hover { transform: none; }
  .hero-kenburns { animation: none !important; transform: scale(1.04); }
  .hero-scroll-arrow { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   ===============  REDESIGN 2026 (ajouts)  ===================
   Hero cinématique · récit · plats signature · galerie+lightbox
   · avis · menu mobile hamburger · apparitions au défilement.
   ============================================================ */

/* ---- Lien d'évitement (skip link) ---- */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--marine); color: var(--creme);
  padding: 10px 16px; border-radius: 8px; font-size: 0.9rem; font-weight: 500;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 8px; }

body.no-scroll, body.nav-open { overflow: hidden; }

/* ---- En-tête : état réduit au défilement ---- */
.site-header { transition: padding 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
.site-header.is-scrolled { padding-top: 5px; padding-bottom: 5px; box-shadow: 0 4px 18px rgba(22,54,74,0.10); background: rgba(246,240,228,0.97); }

/* ---- Bouton hamburger ---- */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 9px; margin-left: 4px;
  background: transparent; border: 1px solid var(--cuivre); border-radius: 8px; cursor: pointer;
}
.nav-toggle-bar { display: block; height: 2px; width: 100%; background: var(--marine); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* voile derrière le menu mobile */
.nav-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(11,29,40,0.5); backdrop-filter: blur(2px); }

/* ---- Navigation mobile (panneau déroulant) ---- */
.main-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 45;
  flex-direction: column; gap: 0;
  padding: 76px 24px 24px;
  background: var(--creme);
  box-shadow: 0 12px 30px rgba(22,54,74,0.18);
  transform: translateY(-110%); transition: transform 0.3s ease;
  display: flex;
}
body.nav-open .main-nav { transform: translateY(0); }
.main-nav a { font-size: 1.1rem; padding: 14px 4px; border-bottom: 1px solid var(--creme-2); }
.main-nav a::after { display: none; }

/* ---- Hero : couche média + Ken Burns + scrim ---- */
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-kenburns {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  transform: scale(1.08);
  animation: kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.18) translate(-2.5%, -2%); }
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(29,74,99,0.35) 0%, transparent 55%),
    linear-gradient(160deg, rgba(22,54,74,0.72) 0%, rgba(15,38,52,0.8) 55%, rgba(11,29,40,0.92) 100%);
}
.hero-embers { z-index: 1; }
.hero-inner { z-index: 2; }

/* ---- Indicateur de défilement ---- */
.hero-scroll {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--creme); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.9;
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll-arrow { width: 22px; height: 22px; border-right: 2px solid var(--cuivre-clair); border-bottom: 2px solid var(--cuivre-clair); transform: rotate(45deg); animation: fleche 1.8s ease-in-out infinite; }
@keyframes fleche { 0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; } 50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; } }

/* ---- Apparition au défilement ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---- Sur-titre commun ---- */
.sur-titre { font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cuivre); font-weight: 500; margin-bottom: 8px; }
.section-cta { text-align: center; margin-top: 34px; }

/* ---- Section « L'esprit Phoenix » (récit) ---- */
.esprit-grid { display: grid; gap: 32px; align-items: center; }
.esprit-media { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.esprit-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esprit-texte h2 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 6px; }
.esprit-texte h2::after { content: ""; display: block; width: 60px; height: 3px; background: var(--cuivre); margin: 14px 0 0; border-radius: 2px; }
.esprit-texte p { color: var(--texte-doux); margin-top: 16px; font-size: 1.02rem; }
.esprit-reperes { list-style: none; display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; }
.esprit-reperes li { display: flex; flex-direction: column; }
.repere-valeur { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 700; color: var(--marine); }
.repere-texte { font-size: 0.82rem; color: var(--texte-doux); }

/* ---- Plats signature ---- */
.signature-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.sig-card { background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sig-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(22,54,74,0.16); }
.sig-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.sig-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.sig-card:hover .sig-media img { transform: scale(1.05); }
.sig-tag { position: absolute; left: 12px; top: 12px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--marine); background: var(--cuivre-clair); padding: 4px 10px; border-radius: 999px; }
.sig-corps { padding: 18px 20px 22px; }
.sig-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sig-nom { font-size: 1.4rem; color: var(--marine); }
.sig-prix { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 700; color: var(--marine); white-space: nowrap; }
.sig-prix.sig-prix-jour { font-size: 0.95rem; font-style: italic; color: var(--cuivre); }
.sig-desc { color: var(--texte-doux); font-size: 0.95rem; margin-top: 8px; }

/* ---- Galerie ---- */
.galerie-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gal-item { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 5 / 4; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.06); }
.gal-legende { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; color: var(--creme); font-size: 0.85rem; text-align: left; background: linear-gradient(transparent, rgba(11,29,40,0.72)); opacity: 0; transition: opacity 0.25s ease; }
.gal-item:hover .gal-legende, .gal-item:focus-visible .gal-legende { opacity: 1; }

/* ---- Visionneuse (lightbox) ---- */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,20,28,0.92); }
/* l'attribut [hidden] doit l'emporter sur le display:flex ci-dessus */
.lightbox[hidden], .nav-backdrop[hidden] { display: none; }
.lightbox-figure { max-width: min(1000px, 92vw); max-height: 84vh; margin: 0; text-align: center; }
.lightbox-figure img { max-width: 100%; max-height: 74vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-figure figcaption { color: var(--creme); margin-top: 14px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(255,255,255,0.08); color: var(--creme);
  border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; cursor: pointer;
  width: 48px; height: 48px; font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(185,141,85,0.4); }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }

/* ---- Avis : macaron 9/10 ---- */
.avis-macaron {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  max-width: 420px; margin: 0 auto 34px; padding: 18px 26px;
  background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre);
  border: 1px solid var(--creme-2);
}
.macaron-note { font-family: 'Cormorant Garamond', serif; font-size: 2.8rem; font-weight: 700; color: var(--cuivre); line-height: 1; }
.macaron-detail { display: flex; flex-direction: column; text-align: left; }
.macaron-nb { font-weight: 600; color: var(--marine); }
.macaron-src { font-size: 0.82rem; color: var(--texte-doux); }

/* ---- Avis ---- */
.avis-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.avis-card { background: var(--blanc); border-radius: var(--rayon); padding: 26px 24px; box-shadow: var(--ombre); border-top: 3px solid var(--cuivre); margin: 0; display: flex; flex-direction: column; gap: 14px; }
.avis-note { display: inline-flex; gap: 2px; }
.avis-note .etoile { color: #d8cdb6; font-size: 1.05rem; }
.avis-note .etoile.pleine { color: var(--cuivre); }
.avis-note-txt { display: inline-block; font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--cuivre); font-size: 1.1rem; }
.avis-texte { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-style: italic; color: var(--texte); line-height: 1.45; margin: 0; }
.avis-pied { display: flex; align-items: baseline; gap: 10px; }
.avis-auteur { font-weight: 600; color: var(--marine); }
.avis-source { font-size: 0.78rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---- Chargement anticipé des images : placeholder crème + fondu ---- */
.esprit-media, .sig-media, .gal-item { background-color: var(--creme-2); }
img.lazyimg { opacity: 0; transition: opacity 0.5s ease; }
img.lazyimg.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  img.lazyimg { transition: none; }
}

/* ---- Champs formulaire : select + note ---- */
.field select {
  font-family: 'Jost', sans-serif; font-size: 1rem; padding: 11px 13px;
  border: 1px solid #d7cbb4; border-radius: 8px; background: var(--creme); color: var(--texte);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B98D55' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 34px;
}
.field select:focus { border-color: var(--cuivre); background-color: #fff; }
.field-note { font-size: 0.78rem; color: var(--texte-doux); margin-top: 2px; }

/* ---- Horaires : sous-blocs (Brasserie / Cuisine / Chiringuito) ---- */
.horaire-titre { font-family: 'Jost', sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cuivre); margin: 16px 0 6px; }
.horaire-titre:first-of-type { margin-top: 10px; }

/* ---- Responsive redesign ---- */
@media (min-width: 760px) {
  .nav-toggle { display: none; }
  .nav-backdrop { display: none !important; }
  .main-nav {
    position: static; inset: auto; flex-direction: row; gap: 20px;
    padding: 0; background: none; box-shadow: none; transform: none;
  }
  .main-nav a { font-size: 0.95rem; padding: 4px 0; border-bottom: 0; }
  .main-nav a::after { display: block; }

  .esprit-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .esprit-media { aspect-ratio: 4 / 5; max-height: 560px; }
  .signature-grid { grid-template-columns: repeat(3, 1fr); }
  .galerie-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .avis-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   ===============  RAFFINEMENT 2026  =========================
   Élévation : header transparent sur le hero (solidifié au
   défilement), typographie fluide, échelle d'ombres en couches,
   scrollspy (nav active), micro-détails. Ajouts en fin de
   feuille : priment via la cascade, sans casser l'existant.
   ============================================================ */
:root {
  color-scheme: light;
  --ombre-douce: 0 2px 8px rgba(22, 54, 74, 0.06);
  --ombre-carte: 0 1px 2px rgba(22, 54, 74, 0.05), 0 10px 30px rgba(22, 54, 74, 0.08);
  --ombre-carte-hover: 0 2px 6px rgba(22, 54, 74, 0.07), 0 22px 46px rgba(22, 54, 74, 0.15);
}

/* Sélection & rendu typographique */
::selection { background: var(--cuivre); color: var(--marine); }
h1, h2, h3,
.hero-title, .section-head h2, .cat-titre, .sig-nom, .info-bloc h3, .esprit-texte h2 {
  text-wrap: balance;
}
p, .plat-desc, .section-intro, .esprit-texte p, .avis-texte, .hero-accroche {
  text-wrap: pretty;
}
body { font-synthesis: none; }

/* En-tête transparent au sommet (au-dessus du hero) — bureau uniquement,
   pour ne pas gêner la lisibilité du menu déroulant mobile (fond crème). */
@media (min-width: 760px) {
  .site-header { isolation: isolate; }
  .site-header:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
  }
  .site-header:not(.is-scrolled)::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 240%;
    background: linear-gradient(to bottom, rgba(11, 29, 40, 0.55), rgba(11, 29, 40, 0));
    z-index: -1; pointer-events: none;
  }
  .site-header:not(.is-scrolled) .brand-name { color: var(--creme); }
  .site-header:not(.is-scrolled) .main-nav a { color: var(--creme); }
  .site-header:not(.is-scrolled) .main-nav a::after { background: var(--cuivre-clair); }
  .site-header:not(.is-scrolled) .lang-switch button {
    color: var(--creme); border-color: rgba(246, 240, 228, 0.55);
  }
  .site-header:not(.is-scrolled) .lang-switch button[aria-pressed="true"] {
    background: var(--creme); color: var(--marine); border-color: var(--creme);
  }
}

/* Scrollspy : lien de la section visible (aria-current posé par ui.js) */
.main-nav a[aria-current="true"] { color: var(--cuivre); }
.main-nav a[aria-current="true"]::after { width: 100%; }
.site-header:not(.is-scrolled) .main-nav a[aria-current="true"] { color: var(--cuivre-clair); }

/* Boutons : profondeur discrète + retour tactile */
.btn { box-shadow: var(--ombre-douce); transition: transform 0.16s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.btn-primary { box-shadow: 0 6px 18px rgba(185, 141, 85, 0.28); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(185, 141, 85, 0.36); }
.btn-ghost { box-shadow: none; }
.btn:active { transform: translateY(0); }

/* Cartes : ombre en couches + filet fin (l'avis garde son filet cuivré du haut) */
.sig-card, .info-bloc, .avis-macaron, .sous-listes {
  box-shadow: var(--ombre-carte);
  border: 1px solid rgba(22, 54, 74, 0.06);
}
.avis-card { box-shadow: var(--ombre-carte); }
.sig-card:hover { box-shadow: var(--ombre-carte-hover); }

/* Respiration verticale un peu plus ample sur grand écran */
@media (min-width: 760px) {
  .section { padding-block: 88px; }
}

/* Lien de contenu : soulignement animé fin */
.info-bloc a.lien-fort {
  background: linear-gradient(var(--cuivre), var(--cuivre)) left bottom / 0% 1.5px no-repeat;
  padding-bottom: 1px; transition: background-size 0.25s ease;
}
.info-bloc a.lien-fort:hover { background-size: 100% 1.5px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .info-bloc a.lien-fort { transition: none; }
}

/* ============================================================
   ===============  MOTION 3D DES PHOTOS  =====================
   Inclinaison 3D au pointeur (motion.js) + reflet spéculaire +
   parallaxe de défilement sur la photo du récit. Bureau à pointeur
   fin uniquement ; neutralisé si mouvement réduit.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .tilt {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
  }
  .tilt.is-tilting { transition: transform 0.09s linear, box-shadow 0.09s linear; will-change: transform; }

  /* profondeur : l'image « avance » légèrement pendant l'inclinaison */
  .sig-media, .gal-item, .esprit-media { position: relative; }
  .sig-media.is-tilting img,
  .gal-item.is-tilting img,
  .esprit-media.is-tilting img { transform: scale(1.06) translateZ(30px); }

  /* reflet spéculaire discret qui suit le curseur */
  .sig-media::after, .gal-item::after, .esprit-media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22), transparent 60%);
    opacity: 0; transition: opacity 0.3s ease; mix-blend-mode: soft-light;
  }
  .sig-media.is-tilting::after, .gal-item.is-tilting::after, .esprit-media.is-tilting::after { opacity: 1; }

  /* ombre portée renforcée pendant l'inclinaison (relief) */
  .sig-card:has(.sig-media.is-tilting) { box-shadow: var(--ombre-carte-hover); }
}

/* Parallaxe de défilement (CSS pur, moderne) — photo du récit.
   Se dégrade proprement : sans support, l'image reste fixe. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .esprit-media img {
      animation: photo-parallaxe linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes photo-parallaxe {
      from { transform: translateY(-7%) scale(1.12); }
      to   { transform: translateY(7%) scale(1.12); }
    }
  }
}

/* ============================================================
   ===============  EXPÉRIENCE 2026  ==========================
   Hero vidéo · curseur · boutons magnétiques · titre en cascade
   · bandeau défilant · compteurs · barre de progression.
   ============================================================ */

/* ---- Hero cinématique plein écran + vidéo de fond ---- */
.hero { min-height: 100svh; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-kenburns { z-index: -1; }            /* repli derrière la vidéo */
.hero-scrim { z-index: 1; }
.hero-embers { z-index: 1; }
.hero-inner, .hero-scroll { z-index: 2; }

/* ---- Titre héro : apparition lettre par lettre ---- */
.hero-title .char {
  display: inline-block;
  opacity: 0; transform: translateY(0.55em) rotate(3deg);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-title.is-in .char { opacity: 1; transform: none; transition-delay: calc(var(--i) * 42ms); }
.hero-title .space { display: inline-block; width: 0.32em; }

/* ---- Barre de progression de lecture ---- */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--cuivre), var(--feu-1));
  z-index: 200; pointer-events: none;
}

/* ---- Curseur personnalisé (desktop, activé par JS) ---- */
#cursor, #cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease, width 0.25s ease, height 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
#cursor { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(185,141,85,0.9); border-radius: 50%; }
#cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--cuivre); }
#cursor.is-visible, #cursor-dot.is-visible { opacity: 1; }
#cursor.is-hover { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: rgba(185,141,85,0.14); border-color: var(--cuivre-clair); }
body.has-cursor, body.has-cursor a, body.has-cursor .btn, body.has-cursor .gal-item, body.has-cursor .nav-toggle { cursor: none; }

/* ---- Boutons magnétiques ---- */
.magnetic { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.magnetic.is-magnetic { transition: none; }

/* ---- Bandeau défilant (marquee) ---- */
.marquee {
  overflow: hidden; background: var(--marine); color: var(--creme);
  padding: 16px 0; white-space: nowrap;
  border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.marquee__track { display: inline-flex; align-items: center; animation: marq 30s linear infinite; will-change: transform; }
.marquee__track span { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; letter-spacing: 0.02em; padding: 0 26px; font-style: italic; }
.marquee__sep { color: var(--cuivre); font-style: normal; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

/* ---- Bande de chiffres animés ---- */
.stats {
  max-width: var(--largeur); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding: 72px 20px; text-align: center;
}
.stat-num { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--marine); line-height: 1; font-size: clamp(2.6rem, 7vw, 4.2rem); }
.stat-suffix { font-size: 0.5em; color: var(--cuivre); }
.stat-num--txt { font-style: italic; font-size: clamp(1.8rem, 5vw, 2.8rem); }
.stat-label { display: block; margin-top: 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--texte-doux); }
.stat { position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: -12px; top: 20%; height: 60%; width: 1px; background: var(--creme-2); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .hero-title .char { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr; gap: 34px; }
  .stat + .stat::before { display: none; }
}