/* ============================================================
   CHARTE VILLA LÉONARD (× DARIO) — variables propres au restaurant
   (seul fichier propre à la Villa ; base.css reste le gabarit commun)
   Source : Chartes graphiques/CHARTE-AGENT.md + DESIGN.md validé.
   Merchande TC = majesté (titres, prix) · Beyond Comfort = distinction
   (intitulés, noms de plats) · Merchande Sans = lecture (corps, nav)
   · Merchande Script = émotion (accroches courtes uniquement).
   ============================================================ */

@font-face {
  font-family: "Merchande";
  src: url("../fonts/merchande-tc-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Beyond Comfort";
  src: url("../fonts/beyond-comfort-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Beyond Comfort";
  src: url("../fonts/beyond-comfort-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Merchande Sans";
  src: url("../fonts/merchande-tc-sans.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merchande Script";
  src: url("../fonts/merchande-tc-script-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* EB Garamond (OFL, auto-hébergée) — la police de LECTURE, ajoutée le
   30/07/2026 sur retour de Fiona : la Merchande, très condensée, fatigue
   en paragraphe. La Merchande reste l'identité (titres, prix, wordmark). */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Couleurs — crème champagne, vert profond (action), or patiné (décor) */
  --couleur-principale: #09321f;   /* vert Villa : boutons, liens, nav active */
  --couleur-accent: #817351;       /* or charte : filets, grands titres, décor */
  --couleur-accent-texte: #6d5f40; /* or assombri — surtitres sur clair (AA) */
  --fond: #f6f1e7;                 /* crème champagne (banquettes, nappes) */
  --fond-rgb: 246, 241, 231;       /* repli rgba() sans color-mix() */
  --fond-sombre: #09321f;          /* bandeaux, footer — le vert du logo */
  --encre: #23201a;                /* texte courant */
  --encre-douce: #6b6353;          /* texte secondaire */

  /* Le monde Dario — vert profond feutré (retour Fiona 30/07 : le noir
     était trop dur, Dario doit rester VERT), or éclairci */
  --nuit: #183326;
  --nuit-rgb: 24, 51, 38;
  --or-sur-nuit: #c9b788;

  /* Typographies */
  /* La Merchande TC Sans est une fonte CAPITALES SEULEMENT et la Merchande
     Regular, très condensée, est pénible en paragraphe (retour Fiona
     30/07/2026) : le corps passe en EB Garamond, classique et très lisible.
     La Merchande garde les titres, les prix et le wordmark. */
  --typo-titres: "Merchande", Didot, Georgia, serif;
  --typo-intitules: "Beyond Comfort", Georgia, serif;
  --typo-corps: "EB Garamond", Garamond, Georgia, serif;
  --typo-etiquette: "Merchande Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --typo-script: "Merchande Script", "Snell Roundhand", cursive;

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

/* ---------- Ajustements du gabarit propres à la Villa ---------- */

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

/* La Merchande est condensée, à petit œil : on compense en taille et en
   interlignage pour garder un confort de lecture haut de gamme. */
:root body { font-size: 1.18rem; line-height: 1.75; letter-spacing: 0.01em; }

/* Le wordmark reprend le logo : capitales Merchande, points médians, à plat
   (pas d'inclinaison — la rotation du gabarit vient d'August). */
.entete .entete__marque, .pied .pied__marque {
  transform: none;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: 0.3em;
  white-space: nowrap;
}
.pied__marque { font-size: 1.5rem; }
/* 6 entrées de nav + wordmark élargi : resserrer entre 861 et 1180 px
   pour tenir sur UNE ligne sans toucher le logo. */
:root .nav a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1180px) {
  :root .nav { gap: 1rem; }
  :root .nav a { letter-spacing: 0.12em; font-size: 0.72rem; padding-inline: 0; }
  .entete .entete__marque { font-size: 1.15rem; letter-spacing: 0.22em; }
}
.pied__marque small {
  display: block;
  font-family: var(--typo-script);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--or-sur-nuit);
  margin-top: 0.35rem;
}

/* Les grands titres portent l'or (charte) ; le vert reste aux h3 et à l'action.
   L'or est trop clair pour les petits corps : jamais sous 1.9rem. */
:root h1, :root h2 { color: var(--couleur-accent); letter-spacing: 0.06em; text-transform: uppercase; }
:root h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
:root h3 { color: var(--couleur-principale); }
:root .heros .surtitre { color: var(--or-sur-nuit); font-size: 0.95rem; }

/* Formulaires : champs à hauteur unique (selects et inputs alignés),
   bouton d'envoi centré */
:root .formulaire input, :root .formulaire select {
  height: 3.1rem;
  appearance: none; -webkit-appearance: none;
  border-radius: 0;
  background-color: transparent;
}
:root .formulaire select {
  background-image: linear-gradient(45deg, transparent 50%, var(--couleur-principale) 50%),
                    linear-gradient(135deg, var(--couleur-principale) 50%, transparent 50%);
  background-position: calc(100% - 1.3rem) 50%, calc(100% - 1rem) 50%;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
:root .formulaire__envoi { text-align: center; }

/* Presse des boutons : 0.96, plus net que le 0.98 du gabarit */
:root .bouton:active { transform: scale(0.96); }

/* Liseré discret sur les photos : assoit les images sur le fond crème
   (noir 10 % sur clair, blanc 10 % dans le monde Dario) */
:root .duo__image img, :root .carte-photo img {
  outline: 1px solid oklch(0 0 0 / 0.1);
  outline-offset: -1px;
}
:root .dario .carte-photo img, :root .dario .duo__image img,
:root body.page-nuit .duo__image img, :root body.page-nuit .carte-photo img {
  outline-color: oklch(1 0 0 / 0.1);
}

/* Le sous-titre du héros suit le corps compensé (la Merchande est petite) */
:root .heros__soustitre { font-size: 1.28rem; font-style: italic; }

/* Accroche en Merchande Script — une ou deux lignes, jamais un paragraphe */
.accroche {
  font-family: var(--typo-script);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.45;
  color: var(--encre);
  text-transform: none;
  letter-spacing: 0.02em;
}
.heros .accroche { color: var(--fond); text-shadow: 0 1px 14px rgb(0 0 0 / 0.4); }
.bandeau .accroche, .dario .accroche { color: var(--or-sur-nuit); text-shadow: none; }

/* Noms de plats en Beyond Comfort (charte : intitulés).
   Retour Fiona 30/07 : la carte se lit mal → tout est grossi et resserré. */
:root .plat__nom { font-family: var(--typo-intitules); font-style: normal; font-size: 1.22rem; }
:root .plat__prix { font-family: var(--typo-titres); font-size: 1.05rem; letter-spacing: 0.05em; }
:root .plat { margin-bottom: 0.25rem; gap: 0.7rem; }
:root .plat__description { font-size: 0.95rem; line-height: 1.35; margin: -0.15rem 0 0.45rem; }
:root .menu-colonnes { columns: 2 19rem; column-gap: 2rem; }
:root .menu-section { margin-bottom: 1rem; }
:root .menu-section h3 { font-size: 0.85rem; letter-spacing: 0.24em; padding-bottom: 0.4rem; margin-bottom: 0.55rem; }

/* Chez Dario, les descriptions étaient encre-douce sur nuit : illisible. */
:root .dario .plat__description { color: rgb(246 241 231 / 0.68); }
:root .dario .plat__prix { color: var(--fond); }

/* ---------- Le monde Dario : mêmes composants, couleurs de nuit ---------- */

.dario {
  background: var(--nuit);
  color: color-mix(in srgb, var(--fond) 88%, transparent);
}
.dario .surtitre { color: var(--or-sur-nuit); }
.dario h2, .dario h3 { color: var(--or-sur-nuit); }
.dario .filet { background: var(--or-sur-nuit); opacity: 0.6; }
.dario .texte-doux { color: color-mix(in srgb, var(--fond) 55%, transparent); }
.dario .bouton {
  border-color: var(--or-sur-nuit);
  color: var(--or-sur-nuit);
}
.dario .bouton:hover { background: var(--or-sur-nuit); color: var(--nuit); }
.dario .carte-photo figcaption { color: color-mix(in srgb, var(--fond) 80%, transparent); }
.dario .plat__nom { color: var(--fond); }
.dario .plat__points { border-color: rgb(201 183 136 / 0.45); }
.dario .menu-section h3 { color: var(--or-sur-nuit); border-color: rgb(201 183 136 / 0.45); }
.dario :focus-visible { outline-color: var(--or-sur-nuit); }

/* Page Dario : l'en-tête posé sur le héros nuit reste crème (gabarit),
   et le corps de page passe en nuit. */
body.page-nuit { background: var(--nuit); color: color-mix(in srgb, var(--fond) 88%, transparent); }
body.page-nuit .entete--fond { background: rgba(var(--nuit-rgb), 0.94); }
body.page-nuit .entete--fond .nav a,
body.page-nuit .entete--fond .entete__marque,
body.page-nuit .entete--fond .nav__bascule { color: var(--fond); }
@media (max-width: 860px) {
  body.page-nuit .nav { background: var(--nuit); }
  body.page-nuit .nav a { color: var(--fond); }
  body.page-nuit .entete--transparente:not(.entete--fond) .nav.ouverte a { color: var(--fond); }
}

/* ---------- La carte cadeau — codes grande maison (nuit, or, silence) ---------- */

/* La page vit en nuit ; chaque bloc respire, l'or ne sert qu'en filet. */
.cadeau-scene {
  text-align: center;
  padding: clamp(5rem, 11vw, 9rem) 4vw;
}
.cadeau-scene .surtitre { color: var(--or-sur-nuit); }
.cadeau-scene h2 { color: var(--fond); }
.cadeau-encadre {
  max-width: 34rem;
  margin: 3rem auto 0;
  border: 1px solid rgb(201 183 136 / 0.55);
  padding: clamp(2.5rem, 5vw, 4rem);
  position: relative;
}
/* double filet à l'intérieur, comme un coffret */
.cadeau-encadre::before {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid rgb(201 183 136 / 0.25);
  pointer-events: none;
}
.cadeau-encadre .accroche { color: var(--or-sur-nuit); }
.cadeau-montants {
  display: flex; justify-content: center; gap: 1.6rem;
  margin-top: 1.8rem;
  font-family: var(--typo-titres);
  font-size: 1.15rem; letter-spacing: 0.08em;
  color: var(--fond);
}
.cadeau-montants span { border-bottom: 1px solid rgb(201 183 136 / 0.45); padding-bottom: 0.3rem; }
.cadeau-deux-signes {
  display: flex; align-items: center; justify-content: center;
  gap: 1.6rem; margin-top: 2.4rem;
  font-family: var(--typo-intitules);
  letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.78rem;
  color: var(--or-sur-nuit);
}
.cadeau-deux-signes i {
  font-style: normal; font-family: var(--typo-script);
  font-size: 1.3rem; text-transform: none; letter-spacing: 0;
}

/* ---------- L2 feutré : le luxe est lent ---------- */

/* Entrée du héros au chargement */
@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; }

/* Respiration du héros (Ken Burns discret, une seule fois).
   L'overflow:hidden retient l'image agrandie — sans lui, le scale crée un
   débordement horizontal de quelques pixels sur mobile. */
:root .heros { overflow: hidden; }
@keyframes respiration { from { transform: scale(1); } to { transform: scale(1.05); } }
.heros__image { animation: respiration 16s ease-out forwards; }

/* Reveal au scroll — piloté par site.js (IntersectionObserver) */
.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; }

/* Sans JS, tout reste visible */
html.sans-js .reveal { opacity: 1; transform: none; }

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