/* Démonstration « Chez Mérandol ». Identité propre au restaurant, distincte du site d'Alexis. */

@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/dm-serif-display.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* Texte courant : la police déjà servie par le site parent, pas de second téléchargement. */
@font-face {
  font-family: "Source Sans 3";
  src: url("../../fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --nappe: #FFFDF9;
  --rouge: #7A1F24;     /* rouge bouchon, 10:1 sur la nappe */
  --rouge-vif: #B3272D; /* carreaux de la nappe, décor */
  --brun: #2E2320;
  --brun-doux: #5E504B;
  --ardoise: #26302E;
  --craie: #F2EFE6;

  --titre: "DM Serif Display", Georgia, serif;
  --texte: "Source Sans 3", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--nappe); color: var(--brun); font: 1.125rem/1.55 var(--texte); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rouge-vif); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.1; margin: 0; }
p { margin: 0 0 1rem; }

/* Bandeau de démonstration : impossible à manquer */
.demo { margin: 0; padding: .6rem 1rem; background: #FFE9A8; color: #3A2E00; font-size: .9375rem; text-align: center; }

/* Nappe à carreaux : le seul motif, en bordure */
.entete {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1rem calc(1rem + 12px); position: relative;
}
.entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: repeating-conic-gradient(var(--rouge-vif) 0 25%, var(--nappe) 0 50%) 0 0 / 12px 12px;
}
.entete__nom { font: 1.5rem var(--titre); color: var(--rouge); text-decoration: none; }
.entete__tel { font-weight: 700; white-space: nowrap; }

.accueil__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.accueil__texte { padding: 1.75rem 1rem 2.25rem; max-width: 36rem; }
.accueil__genre { color: var(--brun-doux); margin-bottom: .5rem; }
.accueil h1 { font-size: clamp(2.75rem, 12vw, 4.5rem); color: var(--rouge); margin-bottom: 1rem; }
.accueil__aujourdhui { font-weight: 700; }

.bouton {
  display: inline-block; background: var(--rouge); color: var(--nappe);
  font-weight: 700; text-decoration: none; padding: .9rem 1.25rem; border-radius: 4px;
}
.bouton:hover { background: #5E171B; }

/* L'ardoise : la pièce forte de la page */
.ardoise {
  background: var(--ardoise); color: var(--craie);
  margin: 0 1rem; padding: 1.75rem 1.25rem; border-radius: 6px;
  border: 10px solid #6B4A2F; /* cadre en bois */
}
.ardoise h2 { font-size: 2rem; margin-bottom: 1rem; }
.ardoise__prix { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.1875rem; border-bottom: 1px dashed rgba(242, 239, 230, .35); padding-bottom: .6rem; }
.ardoise__prix span { font: 1.75rem var(--titre); white-space: nowrap; }
.ardoise__note { margin: 1rem 0 0; font-size: 1rem; opacity: .85; }

.bloc { padding: 2.75rem 1rem; max-width: 40rem; }
.bloc h2 { font-size: 2.25rem; color: var(--rouge); margin-bottom: 1rem; }
.bloc h3 { font-size: 1.375rem; margin: 1.5rem 0 .5rem; }

.carte { list-style: none; margin: 0; padding: 0; }
.carte li { display: flex; gap: .5rem; align-items: baseline; padding: .45rem 0; }
.carte li span:first-child { flex: 1; display: flex; gap: .5rem; align-items: baseline; }
.carte li span:first-child::after { content: ""; flex: 1; border-bottom: 2px dotted #CFC3BC; min-width: 1rem; }
.prix { font-weight: 700; white-space: nowrap; }

.photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.horaires { border-collapse: collapse; width: 100%; }
.horaires th, .horaires td { text-align: left; padding: .45rem .5rem .45rem 0; border-bottom: 1px solid #EDE4DF; font-weight: 400; }
.horaires .aujourdhui th, .horaires .aujourdhui td { font-weight: 700; color: var(--rouge); }
.infos > div + div { margin-top: 2rem; }

.reserver { background: var(--rouge); color: var(--nappe); padding: 2.75rem 1rem 3rem; }
.reserver h2 { font-size: 2rem; margin-bottom: .75rem; }
.reserver__tel { display: inline-block; font: clamp(2.25rem, 11vw, 3.5rem) var(--titre); text-decoration: none; margin-bottom: 1rem; }
.reserver p { max-width: 34rem; }

.pied { padding: 1.5rem 1rem 2rem; font-size: .9375rem; color: var(--brun-doux); }
.pied p { max-width: 44rem; }

@media (min-width: 60rem) {
  .entete { padding-inline: 2.5rem; }
  .accueil { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .accueil__photo { height: 100%; aspect-ratio: auto; }
  .accueil__texte { padding: 3rem 3.5rem; }
  .ardoise { max-width: 40rem; margin: 3rem auto 0; padding: 2.25rem 2.5rem; }
  .bloc { margin-inline: auto; padding-block: 3.5rem; }
  .photos img { aspect-ratio: 21 / 8; }
  .infos { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 60rem; }
  .infos > div + div { margin-top: 0; }
  .reserver { text-align: center; }
  .reserver p { margin-inline: auto; }
  .pied { text-align: center; }
  .pied p { margin-inline: auto; }
}