/* ============================================================================
   2C PIZZA — V2 « L'art de la pizza »
   Correction de direction artistique sur l'architecture validée (variante C).
   Charte issue des éléments du lieu : murs bleu nuit, cadres et enseigne dorés,
   marbre du comptoir, et la Joconde comme figure du concept (« Le Louvre
   Pizzeria »). La carte reprend les codes de la carte physique : noir bleuté,
   filets d'or, typographie à empattements.

   Organisation : POLICES → TOKENS → BASE → COMPOSANTS → 1..9 → FOOTER
   Sections autonomes (aucun sélecteur ne traverse deux sections) pour
   permettre un découpage multi-pages par copier-coller.
   ========================================================================= */


/* ===== POLICES — auto-hébergées, licence OFL, zéro requête tierce =========
   Playfair Display : didone proche de l'enseigne dorée « PIZZA À EMPORTER ».
   Jakarta : texte courant (reprise de la V1). */
@font-face {
  font-family: 'Playfair'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/playfair-display-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/playfair-display-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/playfair-display-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/playfair-display-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Jakarta'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/plus-jakarta-sans-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jakarta'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/plus-jakarta-sans-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jakarta'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/plus-jakarta-sans-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jakarta'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/plus-jakarta-sans-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ===== TOKENS ==============================================================
   Palette mesurée sur les photos du lieu : murs #172734 → #0b1921, cadres
   #f9b23d → #cf8b2c → #8a6a25, marbre doré #dfad80, façade #14120d.
   Contrastes : --or-pale 10,7:1 et --creme-2 9,2:1 sur --nuit ;
   --encre 13,4:1 sur --creme ; #1b1405 8,6:1 sur --or. Tous ≥ 4,5:1. */
:root {
  --nuit:      #122437;   /* bleu nuit des murs de la salle */
  --nuit-2:    #0b1725;   /* aplats profonds, pied de page */
  --royal:     #1e3a57;   /* bleu royal — liserés, halos, dégradés */
  --creme:     #f3ecdc;   /* sections claires, blanc marbre chaud */
  --creme-2:   #cfc6b2;   /* texte secondaire sur fond sombre */
  --encre:     #1f1a10;   /* texte sur fond clair */
  --encre-2:   #5d5544;   /* texte secondaire sur fond clair */
  --or:        #c9962e;   /* or médian — filets, sur-titres, chiffres */
  --or-clair:  #e9b44c;   /* or lumineux — boutons, survols */
  --or-pale:   #f2d38a;   /* or pâle — texte doré sur nuit */
  --or-sombre: #8a6a25;   /* ombre de l'or — dégradés de cadres */
  --laque:     #0d1722;   /* noir bleuté de la carte physique */
  --rule:      #ddd2b8;   /* filets sur fond clair */

  --serif: 'Playfair', Georgia, 'Times New Roman', serif;
  --sans:  'Jakarta', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 240ms var(--ease);
  --slow: 700ms var(--ease);
  --topbar-h: 74px;

  /* Échelle de z-index centralisée */
  --z-menu: 95;
  --z-topbar: 100;
  --z-callbar: 90;
  --z-grain: 80;
}


/* ===== BASE ============================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 12px);
       -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--creme); color: var(--encre);
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

/* Grain photographique très léger : unit les aplats sans les salir. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 500; font-family: var(--serif); }
address { font-style: normal; }

svg { width: 1em; height: 1em; fill: none; stroke: currentColor;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; flex-shrink: 0; }

:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(76px, 9.5vw, 128px); position: relative; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999;
             background: var(--or); color: var(--nuit-2); padding: 12px 20px; font-weight: 700; }
.skip-link:focus { left: 12px; top: 12px; }

.todo {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  border: 1px dashed currentColor; color: var(--or);
  font: 600 10.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}

/* -- Révélations : l'état masqué n'existe que si le JS a pris la main ------ */
html[data-reveal-ready] [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--slow), transform var(--slow);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html[data-reveal-ready] [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html[data-reveal-ready] [data-reveal] { opacity: 1; transform: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}


/* ===== COMPOSANTS PARTAGÉS =============================================== */
.btn {
  --py: 13px; --px: 26px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--py) var(--px);
  border: 1px solid transparent; border-radius: 2px;
  font: 600 13.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--fast), color var(--fast), border-color var(--fast),
              transform var(--fast), box-shadow var(--fast);
}
.btn:active { transform: translateY(1px); }
.btn .ico { font-size: 16px; }

/* Bouton or : la couleur de l'enseigne et des cadres du lieu. */
.btn--or {
  background: linear-gradient(165deg, var(--or-clair), var(--or) 55%, #b0801f);
  color: #1b1405;
  box-shadow: 0 6px 18px rgba(201, 150, 46, .32), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.btn--or:hover {
  background: linear-gradient(165deg, #f3c566, #d4a338 55%, #b8892a);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(201, 150, 46, .42), inset 0 1px 0 rgba(255, 255, 255, .42);
}
.btn--clair  { background: transparent; color: #fff; border-color: rgba(242, 211, 138, .6); }
.btn--clair:hover { background: rgba(242, 211, 138, .14); border-color: var(--or-pale); }
.btn--sombre { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn--sombre:hover { background: var(--nuit); border-color: var(--nuit); color: var(--or-pale); }

.btn--lg    { --py: 16px; --px: 32px; font-size: 14px; }
.btn--block { width: 100%; }

/* -- Boutons d'appel : sur PC (pointeur fin), le clic ne décroche aucun
   téléphone — on affiche le numéro en toutes lettres ; sur mobile (pointeur
   tactile), le libellé d'action (« Appeler »…) est conservé. -------------- */
.btn__pc { display: none; }
@media (pointer: fine) {
  .btn__mobile { display: none; }
  .btn__pc { display: inline; }
}

/* -- Sur-titres : double filet doré, césure de musée ----------------------- */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font: 600 11px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  color: var(--encre-2);
}
.eyebrow::before, .eyebrow::after { content: ""; height: 1px; width: 34px; background: var(--or); }
.eyebrow::after { display: none; }
.eyebrow--or { color: var(--or); }

.head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.head--center { max-width: 640px; margin-inline: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }
.head--center .eyebrow::after { display: block; }

.section__title { font-size: clamp(34px, 4.8vw, 56px); line-height: 1.04; letter-spacing: -.01em; }
.section__title em { font-style: italic; font-weight: 400; color: var(--or); }
.head__lead { margin: 18px 0 0; color: var(--encre-2); font-size: clamp(15.5px, 1.7vw, 17.5px); }

/* -- Cadre doré : le motif du lieu, double filet comme les tableaux -------- */
.cadre {
  padding: 9px;
  background: linear-gradient(150deg, var(--or-pale), var(--or) 42%, var(--or-sombre) 88%);
  box-shadow: 0 24px 60px rgba(6, 12, 20, .4);
}
.cadre > img, .cadre > .cadre__fond { border: 1px solid rgba(242, 211, 138, .55); }


/* ===== BARRE DE NAVIGATION =============================================== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-topbar); height: var(--topbar-h);
  background: transparent;
  transition: background var(--fast), box-shadow var(--fast);
}
.topbar.is-solid {
  background: rgba(15, 30, 48, .97);
  box-shadow: 0 1px 0 rgba(201, 150, 46, .4);
}

.topbar__inner { height: 100%; display: flex; align-items: center; gap: 24px; }

.topbar__brand { display: flex; align-items: center; gap: 11px; padding-block: 4px;
                 text-decoration: none; color: #fff; flex-shrink: 0; }
.topbar__brand img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%;
                     border: 1px solid rgba(201, 150, 46, .65);
                     box-shadow: 0 0 0 3px rgba(201, 150, 46, .18); }
.topbar__brand span { font-family: var(--serif); font-size: 21px; letter-spacing: .05em; }
.topbar__brand strong { font-weight: 500; color: var(--or-pale); }

.topbar__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topbar__nav a {
  padding: 9px 14px; border-radius: 2px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82); text-decoration: none;
  transition: color var(--fast), background var(--fast);
}
.topbar__nav a:hover, .topbar__nav a.is-active { color: var(--or-pale); background: rgba(255, 255, 255, .07); }

.burger { display: none; width: 42px; height: 42px; padding: 0; margin-left: auto;
          border: 1px solid rgba(242, 211, 138, .4); border-radius: 2px;
          background: rgba(11, 23, 37, .35); cursor: pointer;
          flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--or-pale);
               transition: transform 280ms var(--ease), opacity 280ms var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1020px) {
  .topbar__nav, .topbar__cta { display: none; }
  .burger { display: flex; }
}

.menu-mobile {
  position: fixed; inset: var(--topbar-h) 0 auto 0; z-index: var(--z-menu);
  padding: 20px 24px 28px;
  background: rgba(11, 23, 37, .99);
  border-bottom: 1px solid rgba(201, 150, 46, .4);
  opacity: 0; transform: translateY(-10px);
  transition: opacity var(--fast), transform var(--fast);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile.is-open { opacity: 1; transform: none; }
.menu-mobile nav { display: flex; flex-direction: column; margin-bottom: 20px; }
.menu-mobile a {
  padding: 15px 0; border-bottom: 1px solid rgba(242, 211, 138, .12);
  font: 600 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; text-decoration: none;
}


/* ===== 1. HERO PLEIN ÉCRAN — la Joconde, figure du concept ================ */
.hero {
  position: relative;
  min-height: 100svh;              /* svh : pas de saut sur iOS Safari */
  display: grid; place-items: center;
  padding: calc(var(--topbar-h) + 40px) 0 96px;
  overflow: hidden;
  color: #fff; text-align: center;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* Voile bleu nuit : lisibilité du texte et fondu vers les sections sombres. */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 23, 37, .82) 0%, rgba(11, 23, 37, .5) 36%, rgba(11, 23, 37, .9) 100%),
    radial-gradient(120% 80% at 50% 42%, transparent 28%, rgba(11, 23, 37, .6) 100%);
}

.hero__inner { position: relative; z-index: 1; max-width: 830px; }

/* Le logo en grand, demande du client : médaillon circulaire comme dans le
   header et le footer, avec liseré doré et halo pour le détacher du visuel.
   Max 190 px affichés : la source fait 427 px, on reste sous la définition
   native (y compris en dpr 2). */
.hero__logo {
  display: block; margin: 0 auto 24px;
  width: clamp(120px, 15vw, 190px); height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: 50%;
  border: 1px solid rgba(242, 211, 138, .7);
  box-shadow: 0 0 0 8px rgba(201, 150, 46, .16), 0 22px 60px rgba(0, 0, 0, .6);
}

.hero__kicker { margin: 0 0 12px; font-family: var(--serif); font-style: italic;
                font-size: clamp(20px, 2.6vw, 28px); color: var(--or-pale); }

.hero__title {
  font-weight: 600;
  font-size: clamp(52px, 9.5vw, 112px); line-height: .98; letter-spacing: .03em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}

/* Le « 2 » de Playfair est nettement plus bas que la capitale « C » (~73 %).
   Mise à l'échelle mesurée (facteur 1,362) pour aligner les sommets, demande
   client. line-height: 0 pour ne pas dilater la boîte de ligne du titre.
   .chiffre-2c : même traitement partout où le logotype « 2C » est affiché
   (titres de section, de colonnes de la carte, nom de pizza). */
.hero__chiffre, .topbar__brand .topbar__chiffre, .chiffre-2c { font-size: 1.362em; line-height: 0; }

.hero__place {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 16px 0 0;
  font: 600 11.5px/1.6 var(--sans); letter-spacing: .34em; text-transform: uppercase;
  color: var(--or-pale);
}
/* Césure propre sur mobile : « Bouches-du-Rhône » reste d'un bloc. */
.hero__place .nb { white-space: nowrap; }
/* Filets dorés de part et d'autre de la localité. */
.hero__place::before, .hero__place::after {
  content: ""; flex: 0 0 auto;
  width: clamp(24px, 6vw, 58px); height: 1px; background: var(--or); opacity: .8;
}

.hero__desc {
  margin: 26px auto 0; max-width: 58ch;
  font-size: clamp(15.5px, 1.8vw, 18px); color: rgba(255, 255, 255, .92);
}

/* Le point non négociable du brief, visible dès le premier écran. */
.hero__flag {
  display: inline-flex; align-items: center; gap: 11px;
  margin: 26px auto 0; padding: 11px 20px;
  border: 1px solid rgba(201, 150, 46, .65); border-radius: 2px;
  background: rgba(11, 23, 37, .62);
  font-size: 14px; color: #fff; text-align: left;
}
.hero__flag .ico { color: var(--or-pale); font-size: 17px; }
.hero__flag strong { color: var(--or-pale); }

.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 1; display: grid; place-items: center;
  width: 30px; height: 48px;
}
.hero__mouse {
  width: 22px; height: 36px; border: 1px solid rgba(242, 211, 138, .55); border-radius: 12px;
  position: relative;
}
.hero__mouse::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 2px; height: 6px;
  margin-left: -1px; border-radius: 2px; background: var(--or-pale);
  animation: molette 1.9s var(--ease) infinite;
}
@keyframes molette {
  0%   { transform: translateY(0);    opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(13px); opacity: 0; }
}

@media (max-width: 640px) {
  .hero__flag { align-items: flex-start; }
  .hero__scroll { display: none; }
}


/* ===== 2. BANDEAU GARANTIES ============================================== */
.guarantees { background: var(--nuit); padding-block: 30px;
              border-bottom: 1px solid rgba(201, 150, 46, .35); }
.guarantees__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(212px, 100%), 1fr));
  gap: 22px 30px;
}
.guarantee { display: flex; align-items: center; gap: 14px; }
.guarantee .ico { font-size: 24px; color: var(--or-clair); }
/* color explicite : sans elle, un texte ajouté directement dans le <p>
   hériterait de l'encre sombre du body et serait invisible sur le nuit. */
.guarantee p { margin: 0; display: flex; flex-direction: column; gap: 3px; color: var(--creme-2); }
.guarantee strong { font: 600 12px/1.2 var(--sans); letter-spacing: .14em;
                    text-transform: uppercase; color: #fff; }
.guarantee span { font-size: 13.5px; color: var(--creme-2); }


/* ===== 3. NOTRE HISTOIRE =============================================== */
/* Fond marbre commun aux sections claires (histoire, ambiance, contact) :
   le visuel de la couverture Facebook du lieu — marbre blanc, veines noires
   et or — voilé de crème pour rester lisible. */
.section--story, .section--vibe, .section--contact { background: var(--creme); overflow: hidden; }
.section--story::before, .section--vibe::before, .section--contact::before {
  content: ""; position: absolute; inset: 0;
  background: url('../img/marbre-fond.jpg') center / cover no-repeat;
  opacity: .28;
}
.section--story .wrap, .section--vibe .wrap, .section--contact .wrap { position: relative; }

.story { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 5vw, 76px); align-items: center; }

.story__media { position: relative; margin: 0; }
.story__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
}
.story__badge {
  position: absolute; right: -18px; bottom: 34px; z-index: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 20px; border-radius: 2px;
  background: linear-gradient(165deg, var(--or-clair), var(--or) 60%, #b0801f);
  color: #1b1405; text-align: center;
  font: 600 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(138, 106, 37, .45);
}
.story__badge span { font-family: var(--serif); font-size: 21px; letter-spacing: .04em;
                     text-transform: none; font-weight: 600; }

.story__text p { margin: 0 0 18px; color: var(--encre-2); }
.story__text .btn { margin-top: 10px; }
.story__text .section__title { margin-bottom: 22px; }

@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; }
  .story__media { max-width: 380px; }
  .story__badge { right: auto; left: 18px; bottom: -18px; }
  .story__text { margin-top: 34px; }
}


/* ===== 4. BANDEAU DÉFILANT =============================================== */
.marquee {
  background: var(--nuit-2); border-block: 1px solid rgba(201, 150, 46, .35);
  padding-block: 14px; overflow: hidden;
}
.marquee__track {
  display: flex; align-items: center; gap: 26px; width: max-content;
  animation: defile 42s linear infinite;
}
.marquee__track span {
  font: 600 11.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: var(--creme-2); white-space: nowrap;
}
.marquee__track i { color: var(--or); font-style: normal; font-size: 9px; }
/* La piste contient deux fois la même série : à -50 % la boucle est invisible. */
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}


/* ===== 5. LA CARTE — réplique de la carte physique : laque noir, filets or  */
.section--menu { background: var(--nuit); color: #fff; overflow: hidden; }
.section--menu .section__title { color: #fff; }
.section--menu .head__lead { color: var(--creme-2); }

/* Le mur de la salle, voilé : la carte se lit comme dans la pizzeria. */
.section--menu .section__bg { position: absolute; inset: 0; z-index: 0; }
.section--menu .section__bg img { width: 100%; height: 100%; object-fit: cover; }
.section--menu .section__bg::after {
  content: ""; position: absolute; inset: 0; background: rgba(11, 23, 37, .93);
}
.section--menu .wrap { position: relative; z-index: 1; }

/* Cadre doré extérieur, fond laqué : les codes de la carte sur chevalet. */
.card-menu {
  padding: 8px; border-radius: 3px;
  background: linear-gradient(160deg, var(--or-pale), var(--or) 38%, var(--or-sombre) 90%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.card-menu__inner {
  padding: clamp(28px, 4vw, 52px); border-radius: 2px;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(30, 58, 87, .5) 0%, transparent 55%),
    var(--laque);
  border: 1px solid rgba(201, 150, 46, .5);
  color: var(--creme);
}

.card-menu__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(30px, 4vw, 56px); }

.mcol__title {
  font-size: clamp(23px, 2.7vw, 29px); text-align: center; letter-spacing: .05em;
  padding-bottom: 13px; margin-bottom: 18px; color: var(--or-pale);
  border-bottom: 1px solid rgba(201, 150, 46, .55);
}

.mlist { list-style: none; margin: 0; padding: 0; counter-reset: mi 0; }
.mlist[start="11"] { counter-reset: mi 10; }

.mitem { counter-increment: mi; padding: 13px 0; border-bottom: 1px dotted rgba(201, 150, 46, .3); }
.mitem:last-child { border-bottom: 0; }
.mitem__row { display: flex; align-items: baseline; gap: 8px; margin: 0 0 3px; }
.mitem__name { font-family: var(--serif); font-weight: 500; font-size: 19px; letter-spacing: .02em; color: var(--creme); }
.mitem__name::before {
  content: counter(mi) ". "; color: var(--or); font-family: var(--sans);
  font-size: 12px; font-weight: 600; vertical-align: 2px;
}
.mitem__dots {
  flex: 1; min-width: 14px; height: 1px; align-self: flex-end; margin-bottom: 5px;
  background-image: radial-gradient(circle, rgba(201, 150, 46, .55) 1px, transparent 1px);
  background-size: 5px 1px; background-repeat: repeat-x;
}
.mitem__price { font-weight: 600; font-size: 15.5px; font-variant-numeric: tabular-nums;
                white-space: nowrap; color: var(--or-pale); }
.mitem__desc { margin: 0; font-size: 14px; font-style: italic; color: var(--creme-2); }
.mitem__note { font-style: normal; font-size: 12.5px; color: #9a917d; }

.heat {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: rgba(140, 45, 30, .35); color: #eda893; border: 1px solid rgba(237, 168, 147, .35);
  font: 600 9.5px/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  vertical-align: 2px;
}

.card-menu__foot { margin: 26px 0 0; text-align: center; font-size: 13px; color: #9a917d; }

/* -- La Plaque : simple note de bas de carte (n° 1 à 4 uniquement, 40 €,
   commande 72 h à l'avance). Volontairement discret — produit rarement
   commandé (demande du client, août 2026) ------------------------------------ */
.plaque {
  margin: 26px auto 0; max-width: 72ch; padding-top: 16px;
  border-top: 1px solid rgba(201, 150, 46, .22);
  text-align: center; font-size: 13px; line-height: 1.65; color: #9a917d;
}
.plaque strong { font-weight: 600; color: var(--creme-2); }

.menu-cta { margin-top: clamp(32px, 4vw, 46px); text-align: center; }


/* ===== 6. L'AMBIANCE — la galerie du lieu ================================ */
.section--vibe { background: var(--creme); }

.grid-vibe { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; }
.vibe { margin: 0; overflow: hidden; border-radius: 2px; background: var(--nuit-2);
        position: relative;
        outline: 1px solid rgba(201, 150, 46, .35); outline-offset: -1px; }
.vibe--big  { grid-column: span 2; grid-row: span 2; }
.vibe--tall { grid-row: span 2; }
.vibe img { width: 100%; height: 100%; object-fit: cover;
            transition: transform 800ms var(--ease); }
.vibe:hover img { transform: scale(1.05); }

.vibe__caption {
  margin: clamp(28px, 3.5vw, 40px) auto 0; max-width: 60ch; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.2vw, 23px);
  color: var(--encre-2);
}

/* Mosaïque resserrée sur mobile : 2 colonnes conservées (12 pièces, 8 rangées
   pleines — le grand format occupe 2×2, le format haut 1×2). */
@media (max-width: 900px) {
  .grid-vibe { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 168px; }
  .vibe--big { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 540px) {
  .grid-vibe { grid-auto-rows: 44vw; }
}

/* Pastille « X photos de plus » sur la dernière vignette et curseur loupe :
   n'apparaissent que si la visionneuse est active (data-lightbox-ready est
   posé par main.js — sans JS, la mosaïque reste telle quelle). */
.vibe__more { display: none; }
[data-lightbox-ready] .vibe { cursor: zoom-in; }
[data-lightbox-ready] .vibe:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 2px; }
[data-lightbox-ready] .vibe__more {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 4px;
  text-align: center; pointer-events: none;
  background: rgba(13, 23, 34, .58); backdrop-filter: blur(2px);
}
.vibe__more strong { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 42px);
                     color: var(--or-pale); line-height: 1; }
.vibe__more small  { font: 600 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase;
                     color: rgba(242, 211, 138, .85); }

/* Visionneuse : calque plein écran construit par main.js. */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(9, 14, 24, .96);
  opacity: 0; visibility: hidden;
  transition: opacity var(--fast), visibility var(--fast);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__figure { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: 92vw; }
.lightbox__figure img {
  max-width: min(1080px, 92vw); max-height: 76vh; object-fit: contain;
  outline: 1px solid rgba(201, 150, 46, .45); outline-offset: 6px;
  background: var(--laque);
}
.lightbox__caption {
  max-width: 68ch; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--or-pale);
}
.lightbox__count {
  position: absolute; top: 22px; left: 26px; margin: 0;
  font: 600 12px/1 var(--sans); letter-spacing: .22em; color: var(--or-pale);
}

.lightbox__btn {
  position: absolute; z-index: 1;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(242, 211, 138, .4); border-radius: 50%;
  background: rgba(13, 23, 34, .6); color: var(--or-pale);
  font-size: 26px; line-height: 1; cursor: pointer;
  transition: background var(--fast), border-color var(--fast);
}
.lightbox__btn:hover { background: rgba(201, 150, 46, .25); border-color: var(--or-clair); }
.lightbox__btn--close { top: 18px; right: 20px; }
.lightbox__btn--prev  { left: 18px;  top: 50%; transform: translateY(-50%); }
.lightbox__btn--next  { right: 18px; top: 50%; transform: translateY(-50%); }

body.no-scroll { overflow: hidden; }


/* ===== 7. NOTRE SAVOIR-FAIRE — LA NAPOLITAINE, UNIQUEMENT ==================
   Remplace la section « avis clients » : la fiche Google de 2C Pizza
   n'affiche aucun avis vérifié, on n'en invente pas. */
.section--compare { background: var(--nuit-2); color: #fff; }
.section--compare .section__title { color: #fff; }
.section--compare .head__lead { color: var(--creme-2); }

.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.duel__side { position: relative; padding: 34px 30px 30px;
              border: 1px solid rgba(242, 211, 138, .14); border-radius: 2px;
              background: rgba(30, 58, 87, .18); }
.duel__side--yes { border-color: rgba(201, 150, 46, .55); background: rgba(30, 58, 87, .3); }
.duel__side--no { color: var(--creme-2); }

/* Médaillon logo à cheval sur le bord supérieur de la carte */
.duel__medal { position: absolute; top: -33px; left: 50%; transform: translateX(-50%);
               width: 66px; height: 66px; border-radius: 50%; object-fit: cover;
               border: 1px solid var(--or); background: var(--nuit-2); }

.duel__title { display: flex; align-items: center; gap: 14px; margin: 8px 0 6px;
               font-size: 25px; letter-spacing: .01em; color: #fff; }
.duel__title .ico { font-size: 34px; color: var(--or-clair); }

.duel__checklist { list-style: none; margin: 0; padding: 0; }
.duel__checklist li { display: flex; align-items: center; gap: 14px; padding: 13px 2px;
                      font-size: 15.5px; border-bottom: 1px solid rgba(242, 211, 138, .1); }
.duel__checklist li:last-child { border-bottom: 0; padding-bottom: 2px; }
.duel__checklist .ico { font-size: 21px; color: var(--or-clair); }

.duel__hint { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px;
              font-family: var(--serif); font-style: italic; font-weight: 400;
              font-size: 23px; letter-spacing: .01em; color: var(--or-pale); }
.duel__hint .ico { font-size: 23px; color: var(--or-clair); }
.duel__intro { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; }

.duel__table { width: 100%; border-collapse: collapse; }
.duel__table th, .duel__table td { padding: 10px 4px; vertical-align: middle;
              font-size: 13.5px; line-height: 1.45; font-weight: 400; }
.duel__table thead th { padding-bottom: 13px; border-bottom: 1px solid rgba(242, 211, 138, .18);
              font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.duel__table thead em { font-family: var(--serif); font-style: italic; font-weight: 400;
              font-size: 17px; letter-spacing: .01em; text-transform: none; color: var(--or-pale); }
.duel__table th:first-child, .duel__table td:first-child { text-align: right; color: #fff; }
.duel__table thead th:first-child { color: var(--or-clair); }
.duel__table th:last-child, .duel__table td:last-child { text-align: left; }
.duel__table thead th:last-child, .duel__table td:last-child { color: var(--creme-2); }
.duel__table tbody td { border-bottom: 1px solid rgba(242, 211, 138, .08); }
.duel__table tbody tr:last-child td { border-bottom: 0; }
.duel__table .duel__tic { width: 34px; text-align: center; color: var(--or-clair); font-size: 19px; }

.duel__orn { display: flex; align-items: center; justify-content: center; gap: 14px;
             margin: clamp(34px, 4vw, 50px) 0 0; }
.duel__orn::before, .duel__orn::after { content: ""; height: 1px; width: 74px; }
.duel__orn::before { background: linear-gradient(90deg, transparent, rgba(201, 150, 46, .7)); }
.duel__orn::after { background: linear-gradient(90deg, rgba(201, 150, 46, .7), transparent); }
.duel__orn span { width: 8px; height: 8px; border: 1px solid var(--or-clair); transform: rotate(45deg); }

.duel__line {
  margin: 22px auto 0; text-align: center;
  font-family: var(--serif); font-size: clamp(21px, 3vw, 32px); color: #fff;
}
.duel__line em { font-style: italic; color: var(--or-pale); }

@media (max-width: 720px) {
  .duel { grid-template-columns: 1fr; }
  .duel__table th, .duel__table td { font-size: 12.5px; }
}


/* ===== 8. CONTACT ======================================================== */
.section--contact { background: var(--creme); }

.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
         gap: 30px; text-align: center; }
.info .ico { font-size: 26px; color: var(--or); margin-bottom: 14px; }
.info h3 { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
           font-size: 13px; font-family: var(--sans); font-weight: 600;
           letter-spacing: .18em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 12px; }
.info address, .info p { margin: 0; font-size: 16px; color: var(--encre); }
.info__phone { font-size: 27px !important; font-family: var(--serif); font-weight: 500; }
.info__phone a { display: inline-block; padding-block: 5px; text-decoration: none; }
.info__phone a:hover { color: var(--or-sombre); }

.contact__notice {
  margin: clamp(36px, 4.5vw, 52px) auto 0; max-width: 56ch; padding: 18px 24px;
  border: 1px solid var(--rule); border-left: 3px solid var(--or); border-radius: 2px;
  background: #fbf7ec; text-align: center; font-size: 15.5px; color: var(--encre-2);
}
.contact__notice strong { display: block; color: var(--encre); }

.contact__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }


/* ===== 9. CARTE — bandeau pleine largeur =================================
   loading="lazy" : chargée seulement si le visiteur défile jusqu'ici.
   Position approchée (le n° 27 n'est pas encore cartographié dans OSM),
   le bouton Itinéraire utilise l'adresse texte qui reste la référence. */
.mapband { position: relative; background: var(--nuit-2); }
.mapband iframe {
  display: block;
  width: 100%;
  height: clamp(280px, 38vw, 440px);
  border: 0;
  /* Filets dorés haut et bas pour raccorder au reste du site. */
  border-block: 1px solid rgba(201, 150, 46, .4);
  background: var(--creme);
}
.mapband__cadre { position: relative; }
/* Verrouillage du défilement : l'iframe OSM capte la molette et dézoome au
   lieu de laisser descendre la page. Tant que la classe is-locked est posée
   (par défaut, via main.js), le pointeur traverse l'iframe et le calque
   .mapband__verrou couvre la carte. Sans JS, rien ne change : carte
   interactive. */
.mapband.is-locked iframe { pointer-events: none; }

/* Repère doré par-dessus le marqueur vert de l'embed : le POI est au centre
   exact du bbox, donc au centre de l'iframe. Dès que la carte a été activée
   une fois (main.js pose .was-active), le marqueur OSM reprend le relais —
   un repère posé en absolu ne suivrait pas les déplacements. */
.mapband__poi {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 30px; height: auto;
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .4));
}
.mapband__poi path { fill: var(--or); }
.mapband__poi circle { fill: var(--nuit-2); }
.mapband.was-active .mapband__poi { display: none; }

/* Calque de verrouillage : couvre la carte, bouton ancré en bas pour ne pas
   masquer le repère. */
.mapband__verrou { display: none; }
.mapband.is-locked .mapband__verrou {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 14px 16px;
}
.mapband__pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 3px;
  background: rgba(11, 23, 37, .88); color: var(--creme);
  border: 1px solid rgba(201, 150, 46, .5);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.mapband__pill:hover,
.mapband__pill:focus-visible {
  background: var(--or); border-color: var(--or); color: #1b1405;
}
/* Mobile : pas d'activation de la carte embarquée, on propose la navigation. */
.mapband__gps { display: none; }
@media (pointer: coarse) {
  .mapband__activer { display: none; }
  .mapband__gps { display: inline-flex; }
}
.mapband__credit {
  margin: 0;
  padding: 11px 24px calc(11px + env(safe-area-inset-bottom));
  text-align: center; font-size: 12.5px; color: #8d8578;
}
.mapband__credit a { color: var(--creme-2); }
.mapband__credit a:hover { color: var(--or-pale); }


/* ===== FOOTER ============================================================ */
.footer { background: var(--nuit-2); color: var(--creme-2); }

.footer__grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 70px);
}
.footer__brand img { width: 74px; border-radius: 50%; border: 1px solid rgba(201, 150, 46, .5); }
.footer__brand p { margin: 16px 0 20px; font-family: var(--serif); font-size: 20px; color: #fff; }

.footer__col h2 { margin-bottom: 14px; font-family: var(--sans); font-size: 11px; font-weight: 600;
                  letter-spacing: .2em; text-transform: uppercase; color: var(--or); }
.footer__col address, .footer__col p { margin: 0 0 10px; font-size: 15px; }
.footer__col a { text-decoration: none; }
.footer__col a:hover { color: var(--or-pale); }
.footer__small { font-size: 13px !important; color: #8d8578 !important; }

.footer__bottom { border-top: 1px solid rgba(242, 211, 138, .12); }
.footer__bottom-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  padding-block: 18px calc(18px + env(safe-area-inset-bottom));
}
.footer__bottom p { margin: 0; font-size: 13px; color: #8d8578; }
.footer__bottom a { color: #8d8578; }
.footer__bottom a:hover { color: var(--or-pale); }

@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }


/* ===== BARRE D'APPEL MOBILE ============================================== */
.callbar { display: none; }

@media (max-width: 720px) {
  .callbar {
    position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: var(--z-callbar);
    display: flex; align-items: center; justify-content: center; gap: 11px;
    padding: 16px; border-radius: 2px;
    background: linear-gradient(165deg, var(--or-clair), var(--or) 60%, #b0801f);
    color: #1b1405;
    font: 600 13.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none; box-shadow: 0 8px 26px rgba(6, 12, 20, .5);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1), opacity .32s;
  }
  /* Masquée tant que le hero — qui a déjà son propre bouton d'appel — est visible. */
  .callbar.is-cachee { transform: translateY(calc(100% + 20px)); opacity: 0; pointer-events: none; }
  .callbar .ico { font-size: 17px; }
  .footer__bottom-inner { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}


/* ===== PAGES SECONDAIRES ================================================= */
.page { padding-top: calc(var(--topbar-h) + clamp(46px, 6vw, 80px));
        padding-bottom: clamp(64px, 8vw, 100px); min-height: 70vh; background: var(--creme); }
.page .wrap { max-width: 780px; }
.page__title { font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -.01em; }
.page h2 { font-size: clamp(20px, 2.5vw, 25px); color: var(--or-sombre); margin: 42px 0 14px; }
.page p, .page li { color: var(--encre-2); font-size: 16px; }
/* Sur les pages annexes la barre est toujours pleine : le texte doit rester lisible. */
.page-shell .topbar { background: rgba(15, 30, 48, .97); }