/* ==========================================================================
   Bistrot Vallier — exemple de réalisation
   Identité volontairement éloignée de celle d'ambree.fr : vert profond et
   laiton plutôt que terracotta et crème, DM Serif Display plutôt que
   Caprasimo. L'intérêt de la démonstration est de prouver qu'on s'adapte au
   métier, pas de décliner un gabarit unique.
   Feuille de style autonome : aucun lien avec styles.css du site principal.
   ========================================================================== */

:root {
  --vert: #1b2a22;
  --vert-clair: #2c4136;
  --creme: #f6f1e7;
  --creme-sombre: #e9e0cf;
  /* Deux laitons, calculés pour tenir le seuil AA de chaque côté :
     --or sert sur les fonds verts (4,9:1 sur --vert-clair),
     --or-sombre sur les fonds crème (4,7:1 sur le crème le plus foncé).
     Les valeurs d'origine, plus flatteuses, tombaient à 2,98:1. */
  --or: #cfa75e;
  --or-sombre: #7a5c24;
  --texte: #1b2a22;
  --texte-doux: #55605a;

  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

body {
  background: var(--creme);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, dl { list-style: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; }

.sur-titre {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-sombre);
  margin-bottom: 14px;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 2px;          /* angles nets : autre parti pris qu'ambree.fr */
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border: 1.5px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bouton-or { background: var(--or); color: var(--vert); }
.bouton-or:hover { background: #d8b06a; }
.bouton-clair { background: var(--creme); color: var(--vert); }
.bouton-clair:hover { background: #fff; }
.bouton-contour { border-color: var(--creme); color: var(--creme); }
.bouton-contour:hover { background: var(--creme); color: var(--vert); }
.bouton-contour-clair { border-color: var(--vert); color: var(--vert); }
.bouton-contour-clair:hover { background: var(--vert); color: var(--creme); }

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

/* ---- Bandeau de démonstration ---- */
.demo-flag {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: var(--or);
  color: var(--vert);
  font-size: 0.82rem;
  text-align: center;
}
.demo-flag a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---- En-tête ---- */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 32px;
  background: var(--vert);
  color: var(--creme);
}
.marque { font-family: var(--serif); font-size: 1.4rem; }
.marque span { color: var(--or); }
.entete nav { display: flex; gap: 28px; font-size: 0.92rem; }
.entete nav a { padding-block: 4px; border-bottom: 1.5px solid transparent; }
.entete nav a:hover { border-bottom-color: var(--or); }

@media (max-width: 760px) {
  .entete { flex-wrap: wrap; justify-content: center; text-align: center; padding: 18px 20px; }
  .entete nav { order: 3; width: 100%; justify-content: center; gap: 20px; }
  /* Cible tactile d'au moins 44px de haut, comme sur l'exemple menuisier. */
  .entete nav a { padding-block: 11px; }
}

/* ---- Hero ---- */
.hero { position: relative; background: var(--vert); }
.hero > img {
  width: 100%;
  height: clamp(340px, 58vh, 560px);
  object-fit: cover;
  opacity: 0.5;               /* assombri pour que le texte reste lisible */
}
.hero-voile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 32px clamp(20px, 6vw, 72px);
  color: var(--creme);
  background: linear-gradient(90deg, rgba(27, 42, 34, 0.92) 0%, rgba(27, 42, 34, 0.55) 60%, rgba(27, 42, 34, 0.25) 100%);
}
/* Sur le hero, le sur-titre est posé sur le vert foncé : il lui faut le
   laiton clair, l'autre y tomberait à 2,4:1. */
.hero .sur-titre { color: var(--or); }
.hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
.hero-sous-titre { max-width: 44ch; margin-top: 16px; color: var(--creme-sombre); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---- Bandeau d'infos pratiques ---- */
.bandeau-infos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--vert-clair);
  color: var(--creme);
  font-size: 0.92rem;
}
.bandeau-infos div { padding: 20px 24px; border-right: 1px solid rgba(246, 241, 231, 0.15); }
.bandeau-infos div:last-child { border-right: none; }
.bandeau-infos span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 4px;
}
@media (max-width: 700px) {
  .bandeau-infos { grid-template-columns: 1fr; }
  .bandeau-infos div { border-right: none; border-bottom: 1px solid rgba(246, 241, 231, 0.15); }
}

/* ---- La maison ---- */
.maison {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 6vw, 72px);
  max-width: 1200px;
  margin-inline: auto;
}
.maison h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 20px; }
.maison p + p { margin-top: 14px; }
.maison-texte p { color: var(--texte-doux); max-width: 54ch; }

.citation {
  padding: 32px 30px;
  background: var(--vert);
  color: var(--creme);
  border-left: 4px solid var(--or);
}
.citation p { font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; }
.citation cite { display: block; margin-top: 18px; font-style: normal; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--or); }

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

/* ---- La carte ---- */
.carte {
  background: var(--creme-sombre);
  padding: clamp(48px, 8vw, 96px) clamp(20px, 6vw, 72px);
}
.carte-entete { max-width: 1200px; margin: 0 auto 40px; }
.carte-entete h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

.plats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1200px;
  margin-inline: auto;
}
.plat { background: var(--creme); overflow: hidden; }
.plat img { width: 100%; height: 260px; object-fit: cover; }
.plat-texte { padding: 24px 26px 28px; }
.plat h3 { font-size: 1.25rem; margin-bottom: 8px; }
.plat p { color: var(--texte-doux); font-size: 0.94rem; }
.prix { display: inline-block; margin-top: 14px; font-family: var(--serif); font-size: 1.15rem; color: var(--or-sombre); }

@media (max-width: 760px) { .plats { grid-template-columns: 1fr; } }

.ardoise {
  max-width: 1200px;
  margin: 44px auto 0;
  border-top: 1px solid rgba(27, 42, 34, 0.18);
}
.ardoise li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(27, 42, 34, 0.18);
}
/* Ligne de points entre l'intitulé et le prix, comme sur une carte imprimée. */
.ardoise li::after {
  content: "";
  flex: 1;
  order: 1;
  border-bottom: 1px dotted rgba(27, 42, 34, 0.35);
  transform: translateY(-4px);
}
.ardoise li em { order: 2; font-style: normal; font-family: var(--serif); font-size: 1.05rem; color: var(--or-sombre); }
.carte-note { max-width: 1200px; margin: 22px auto 0; font-size: 0.88rem; color: var(--texte-doux); }

/* ---- Infos pratiques ---- */
.infos {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  padding: clamp(48px, 8vw, 96px) clamp(20px, 6vw, 72px);
  max-width: 1200px;
  margin-inline: auto;
}
.infos h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.2; }
.infos-detail { margin-top: 16px; color: var(--texte-doux); max-width: 40ch; }
.infos-liens { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.infos-horaires { background: var(--creme-sombre); padding: 28px 30px; }
.infos-horaires h3 { font-size: 1.2rem; margin-bottom: 16px; }
.infos-horaires div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(27, 42, 34, 0.14); font-size: 0.92rem; }
.infos-horaires div:last-child { border-bottom: none; }
.infos-horaires dt { color: var(--texte-doux); }
.infos-horaires dd { font-weight: 700; text-align: right; }

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

/* ---- Pied de page ---- */
.pied {
  background: var(--vert);
  color: var(--creme-sombre);
  padding: 40px clamp(20px, 6vw, 72px);
  text-align: center;
}
.pied-marque { font-family: var(--serif); font-size: 1.3rem; color: var(--creme); margin-bottom: 10px; }
.pied-mention { font-size: 0.85rem; max-width: 60ch; margin-inline: auto; }
.pied-mention a { color: var(--or); text-decoration: underline; text-underline-offset: 3px; }