/* ============================================================
   CHARTE POZZI NONNI × POZZITO — variables propres au restaurant
   (seul fichier propre à Pozzi ; base.css reste le gabarit commun)
   Source : Chartes graphiques/POZZI NONNI x POZZITO + DESIGN.md validé.
   Charcuterie Etched = l'enseigne (titres, prix) · Volume Rustic = la
   lecture et les noms de plats · Volume Sans = étiquettes, nav ·
   Volume Script = émotion (accroches courtes uniquement).
   ============================================================ */

@font-face {
  font-family: "Charcuterie Etched";
  src: url("../fonts/charcuterie-etched.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Volume Rustic";
  src: url("../fonts/volume-tc-rustic-solid.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Le ç n'existe pas dans les Volume TC : seul ce caractère vient de Georgia
   (déclaré APRÈS la face principale, il gagne sur U+E7/U+C7 uniquement). */
@font-face {
  font-family: "Volume Rustic";
  src: local("Georgia");
  unicode-range: U+E7, U+C7;
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Volume Sans";
  src: url("../fonts/volume-tc-sans-rustic-solid.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Volume Sans";
  src: local("Verdana");
  unicode-range: U+E7, U+C7;
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Volume Script";
  src: url("../fonts/volume-tc-script-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Couleurs — crème chaude, vert Douglas Fir (action), olive (décor) */
  --couleur-principale: #3a4a28;   /* vert Douglas Fir (Pantone 19-0220 TCX) */
  --couleur-principale-hover: #4a5d33;
  --couleur-accent: #7d8150;       /* olive : filets, ornements — jamais cliquable */
  --couleur-accent-texte: #5f6238; /* olive assombri — surtitres sur clair (AA) */
  --fond: #f7f1e3;                 /* crème chaude (murs, nappes) */
  --fond-rgb: 247, 241, 227;
  --fond-sombre: #2c3619;          /* vert nuit d'olivier — footer, bandeaux */
  --encre: #23241b;
  --encre-douce: #6a6752;

  /* Le monde Pozzito — papier kraft de la boîte à pizza */
  --kraft: #e2d1ae;
  --kraft-rgb: 226, 209, 174;
  --kraft-profond: #d5c096;

  /* Typographies */
  --typo-titres: "Charcuterie Etched", "Volume Rustic", Georgia, serif;
  --typo-intitules: "Volume Rustic", Georgia, serif;
  --typo-corps: "Volume Rustic", Georgia, serif;
  --typo-etiquette: "Volume Sans", Verdana, sans-serif;
  --typo-script: "Volume Script", "Snell Roundhand", cursive;

  --style-titres: normal;
  --style-corps: normal;
}

/* ---------- Ajustements du gabarit propres à Pozzi ---------- */
/* NB : base.css est chargée APRÈS ce fichier — les ajustements qui recouvrent
   le gabarit passent par « :root … » pour gagner la cascade. */

/* La Volume Rustic a un œil généreux et se lit bien ; on aère simplement. */
:root body { font-size: 1.1rem; line-height: 1.7; letter-spacing: 0.005em; }

/* Wordmark en Charcuterie, comme l'enseigne gravée */
.entete .entete__marque, .pied .pied__marque {
  transform: none;
  font-family: var(--typo-titres);
  font-size: 1.18rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.pied__marque { font-size: 1.3rem; }
.pied__marque small {
  display: block;
  font-family: var(--typo-titres);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--kraft);
  margin-top: 0.35rem;
}

/* Titres gravés : Charcuterie en capitales, vert Douglas Fir. */
:root h1, :root h2 { color: var(--couleur-principale); letter-spacing: 0.05em; text-transform: uppercase; }
:root h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
:root h3 { color: var(--couleur-principale); }

/* Nav & boutons en Volume Sans (étiquette) */
:root .nav a, :root .bouton, :root .nav__bascule {
  font-family: var(--typo-etiquette);
}
:root .bouton:active { transform: scale(0.96); }

/* Liseré discret : assoit les photos sur le fond crème.
   height:auto : sans lui, l'attribut height de l'img gagne sur aspect-ratio. */
:root .duo__image img, :root .carte-photo img {
  height: auto;
  outline: 1px solid oklch(0 0 0 / 0.1);
  outline-offset: -1px;
}

/* La branche d'olivier — LE seul ornement (SVG inline via .filet-olive) */
.filet-olive {
  display: block;
  width: 72px; height: 20px;
  margin: 1.1rem auto 0;
  color: var(--couleur-accent);
}
.filet-olive--gauche { margin-left: 0; }

/* Accroche en Charcuterie (gravée, comme l'enseigne) — le Script est retiré
   (retour Quentin 30/07 : script/italique pas assez lisibles). */
.accroche {
  font-family: var(--typo-titres);
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  line-height: 1.5;
  color: var(--encre);
  text-transform: none;
  letter-spacing: 0.04em;
}
/* Plus d'italique nulle part (retour Quentin) */
em, i, .heros__soustitre { font-style: normal !important; }
.heros .accroche { color: var(--fond); text-shadow: 0 1px 14px rgb(0 0 0 / 0.4); }
:root .heros .surtitre { color: rgb(247 241 227 / 0.88); text-shadow: 0 1px 10px rgb(0 0 0 / 0.35); }
.bandeau .accroche { color: var(--kraft); text-shadow: none; }

/* Noms de plats et prix */
.plat__nom { font-family: var(--typo-intitules); font-style: normal; font-size: 1.12rem; color: var(--couleur-principale); }
.plat__prix { font-family: var(--typo-titres); font-size: 0.98rem; letter-spacing: 0.05em; }

/* ---------- LA PORTE (index) : deux mondes face à face ---------- */

.porte { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }

.porte__moitie {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem);
  overflow: hidden;
}

/* Moitié Nonni : la photo de la salle sous un voile vert profond */
.porte__moitie--nonni { color: var(--fond); }
.porte__moitie--nonni .porte__photo {
  position: absolute; inset: 0; z-index: 0;
}
.porte__moitie--nonni .porte__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s ease;
}
.porte__moitie--nonni::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgb(30 40 17 / 0.58);
  transition: background 0.5s ease;
}
.porte__moitie--nonni:hover::after,
.porte__moitie--nonni:focus-within::after { background: rgb(30 40 17 / 0.44); }
.porte__moitie--nonni:hover .porte__photo img,
.porte__moitie--nonni:focus-within .porte__photo img { transform: scale(1.05); }

/* Moitié Pozzito : photo elle aussi (retour Quentin 30/07), voile légèrement
   plus chaud pour la distinguer de la moitié Nonni. */
.porte__moitie--pozzito { color: var(--fond); border-left: 1px solid rgb(247 241 227 / 0.25); }
.porte__moitie--pozzito .porte__photo { position: absolute; inset: 0; z-index: 0; }
.porte__moitie--pozzito .porte__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s ease;
}
.porte__moitie--pozzito::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgb(48 40 18 / 0.55);
  transition: background 0.5s ease;
}
.porte__moitie--pozzito:hover::after,
.porte__moitie--pozzito:focus-within::after { background: rgb(48 40 18 / 0.42); }
.porte__moitie--pozzito:hover .porte__photo img,
.porte__moitie--pozzito:focus-within .porte__photo img { transform: scale(1.05); }

.porte__contenu { position: relative; z-index: 2; max-width: 30rem; }
.porte__contenu > * { margin-bottom: 1.1rem; }

/* Tampons rétrécis, même hauteur des deux côtés ; lignes calées pour que
   les boutons s'alignent (retour Quentin). */
.porte__tampon { width: auto; height: clamp(105px, 12vw, 145px); margin: 0 auto 1.1rem; }
.porte .porte__quoi { min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
.porte .accroche { min-height: 2.9em; display: flex; align-items: center; justify-content: center; }
/* Logos en transparence sur les photos (versions crème) — plus de fond blanc */

.porte__quoi {
  font-family: var(--typo-etiquette);
  font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.porte__moitie--nonni .porte__quoi,
.porte__moitie--pozzito .porte__quoi { color: rgb(247 241 227 / 0.85); }
.porte__moitie--pozzito .accroche { color: rgb(247 241 227 / 0.95); }

.porte__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 0.6rem; }

/* Sous la porte : l'indice de défilement */
.porte__indice {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  z-index: 3;
  font-family: var(--typo-etiquette);
  font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgb(247 241 227 / 0.75);
  pointer-events: none;
}

/* Le bloc qui suit la porte respire moins (retour Quentin : trop d'espace) */
.porte + .section { padding-block: clamp(1.8rem, 4vw, 2.8rem) clamp(2.2rem, 5vw, 3.5rem); }
.porte + .section .infos { margin-top: 2rem !important; }

@media (max-width: 860px) {
  .porte { grid-template-columns: 1fr; min-height: 0; }
  .porte__moitie { min-height: 72svh; }
  .porte__moitie--pozzito { border-left: 0; border-top: 1px solid rgb(247 241 227 / 0.25); }
  .porte__indice { display: none; }
}

/* ---------- Le monde Pozzito : mêmes composants, matière kraft ---------- */

.pozzito {
  background: var(--kraft);
  color: var(--encre);
  position: relative;
}
.pozzito::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(105deg, rgb(35 36 27 / 0.022) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(15deg, rgb(255 253 246 / 0.03) 0 3px, transparent 3px 9px);
}
.pozzito > * { position: relative; }
.pozzito .surtitre { color: var(--couleur-accent-texte); }
.pozzito h2, .pozzito h3 { color: var(--couleur-principale); }
.pozzito .filet { background: var(--couleur-principale); opacity: 0.5; }
.pozzito .texte-doux { color: rgb(35 36 27 / 0.62); }
.pozzito .plat__points { border-color: rgb(95 98 56 / 0.5); }
.pozzito .carte-photo figcaption { color: var(--encre); }

/* Cartes-service sur kraft (le principe : emporter / livraison / midi) */
.carte-service {
  background: #fffdf6;
  border: 1px solid var(--kraft-profond);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
}
.carte-service h3 { margin-bottom: 0.7rem; }
.carte-service .carte-service__prix {
  font-family: var(--typo-titres);
  font-size: 1.6rem;
  color: var(--couleur-principale);
  display: block; margin-top: 0.7rem;
}

/* Page Pozzito : le corps de page vit en kraft */
body.page-kraft { background: var(--kraft); }
body.page-kraft .entete--fond { background: rgba(var(--kraft-rgb), 0.96); }
@media (max-width: 860px) {
  body.page-kraft .nav { background: var(--kraft); }
}

/* Bandeau « coming soon » traiteur : encadré tampon sur kraft */
.traiteur-encadre {
  max-width: 34rem;
  margin: 2.6rem auto 0;
  border: 1.5px solid var(--couleur-principale);
  padding: clamp(2.2rem, 4.5vw, 3.4rem);
  position: relative;
  text-align: center;
  background: rgb(255 253 246 / 0.45);
}
.traiteur-encadre::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgb(58 74 40 / 0.35);
  pointer-events: none;
}
.traiteur-encadre .traiteur-date {
  font-family: var(--typo-etiquette);
  font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--couleur-accent-texte);
}

/* Sections moins espacées partout (retours Quentin) */
:root .section { padding-block: clamp(2.8rem, 6.5vw, 5rem); }
:root .section--serree { padding-block: clamp(1.8rem, 4vw, 3rem); }
body.page-kraft .section { padding-block: clamp(2.2rem, 5vw, 3.8rem); }

/* Carte des plats resserrée (retour Quentin) */
.menu-colonnes .menu-section { margin-bottom: 1.7rem; }
.menu-colonnes .plat { margin-bottom: 0.15rem; }
.menu-colonnes .plat__description { margin-bottom: 0.75rem; margin-top: 0.1rem; }

/* Surtitres des bandeaux sombres plus visibles (retour Quentin : trop petit) */
.bandeau .surtitre { font-size: 1rem; letter-spacing: 0.26em; color: var(--kraft); }

/* ---------- L2 doux : la générosité est tranquille ---------- */

@keyframes apparition { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.heros > div > * { animation: apparition 0.8s ease-out backwards; }
.heros > div > *:nth-child(2) { animation-delay: 0.15s; }
.heros > div > *:nth-child(3) { animation-delay: 0.3s; }
.heros > div > *:nth-child(4) { animation-delay: 0.45s; }

/* La porte s'ouvre : les deux moitiés apparaissent l'une après l'autre */
.porte__moitie--nonni .porte__contenu > * { animation: apparition 0.8s ease-out backwards; }
.porte__moitie--pozzito .porte__contenu > * { animation: apparition 0.8s ease-out 0.2s backwards; }

:root .heros { overflow: hidden; }
@keyframes respiration { from { transform: scale(1); } to { transform: scale(1.05); } }
.heros__image { animation: respiration 16s ease-out forwards; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal.visible { opacity: 1; transform: none; }
.trio .reveal:nth-child(2) { transition-delay: 0.08s; }
.trio .reveal:nth-child(3) { transition-delay: 0.16s; }

html.sans-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .heros > div > *, .heros__image,
  .porte__moitie--nonni .porte__contenu > *,
  .porte__moitie--pozzito .porte__contenu > * { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .porte__moitie--nonni .porte__photo img { transition: none; }
}