/* Big Ben Pizza & Grill : couleurs et dessins repris du menu papier
   (papier sauge, enseigne prune, pastille rose de la livraison, étiquettes grises et bleues). */

@font-face { font-family: "Young Serif"; src: url("../fonts/young-serif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mali"; src: url("../fonts/mali-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mali"; src: url("../fonts/mali-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Mali"; src: url("../fonts/mali-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --papier: #dde5d5;
  --papier-clair: #f4f6f0;
  --sauge: #b9c7af;
  --sauge-fonce: #7f9475;
  --prune: #563843;
  --prune-fonce: #3f2731;
  --rose: #e6c7bf;
  --bleu: #a9bcd6;
  --gris: #8c8487;
  --encre: #2f2a2d;
  --encre-douce: #5a5357;
  --feuille: #4f6b37;
  --ardoise: #2e3833;

  --titre: "Young Serif", Georgia, serif;
  --texte: "Mali", "Trebuchet MS", sans-serif;
  --rayon: 16px;
  --trait: 2px solid var(--encre);
  --largeur: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1.0625rem/1.6 var(--texte);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.15; }
p { margin: 0; }
sup { font-size: .65em; line-height: 0; }

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

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.evitement { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--prune); color: #fff; padding: .6rem 1rem; border-radius: 10px; }
.evitement:focus { top: 1rem; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.3rem;
  border: var(--trait); border-radius: 999px;
  font: 600 1rem/1.2 var(--texte); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.bouton:active { transform: translateY(1px); }
.bouton svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.bouton--prune { background: var(--prune); border-color: var(--prune-fonce); color: #fff; }
.bouton--prune:hover { background: var(--prune-fonce); }
.bouton--clair { background: var(--papier-clair); color: var(--encre); }
.bouton--clair:hover { background: #fff; }
.bouton--large { width: 100%; max-width: 420px; }

/* ---------- Barre du haut ---------- */
.barre {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem max(16px, calc((100% - var(--largeur)) / 2));
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
}
.barre__logo { font: 1.6rem/1 var(--titre); text-decoration: none; margin-right: auto; }
.barre__nav { display: none; gap: 1.5rem; }
.barre__nav a { text-decoration: none; font-weight: 600; }
.barre__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.barre__appel { min-height: 42px; padding: .45rem 1rem; }
@media (max-width: 420px) { .barre__appel span { display: none; } .barre__appel { width: 44px; padding: 0; } }
@media (min-width: 860px) { .barre__nav { display: flex; } .barre__logo { margin-right: 1rem; } .barre__nav { margin-right: auto; } }

/* ---------- Accueil ---------- */
.accueil {
  /* clip horizontal seulement : l'ardoise peut déborder sur la section suivante */
  position: relative; overflow-x: clip;
  display: grid; gap: 2rem;
  padding: 2.5rem max(16px, calc((100% - var(--largeur)) / 2)) 0;
}
.accueil__branche {
  position: absolute; top: 0; right: -30px; width: 190px; pointer-events: none; opacity: .95;
}
.accueil__texte { position: relative; max-width: 34rem; }
.accueil__titre {
  font: 400 clamp(4.2rem, 17vw, 8.5rem)/.9 var(--titre);
  letter-spacing: -.02em;
}
.accueil__titre span {
  display: block; margin-top: .6rem;
  font: 600 clamp(1.5rem, 5vw, 2.1rem)/1.1 var(--texte); letter-spacing: 0; color: var(--encre-douce);
}
.accueil__intro { margin-top: 1.4rem; font-size: 1.15rem; max-width: 30rem; }
.accueil__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* La devanture est posée sur le trait qui ouvre la section suivante, comme sur un trottoir */
.accueil__devanture { position: relative; margin: 0 0 -2px; align-self: end; }

/* Ardoise du soir : la petite ardoise posée devant la devanture, en plus grand */
.ardoise {
  position: absolute; z-index: 2; right: 0; bottom: -6.2rem;
  width: min(80%, 260px);
  padding: 1rem 1.2rem 1.1rem;
  background: var(--ardoise); color: #f1f1ea;
  border: 6px solid #8a6a4a; border-radius: 10px;
  transform: rotate(-2deg);
  box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--encre) 25%, transparent);
}
.ardoise__titre { font: 1.05rem/1.2 var(--titre); color: #c9d6bf; }
.ardoise__statut { margin-top: .3rem; font-weight: 700; font-size: 1.2rem; line-height: 1.3; }
.ardoise__statut.est-ouvert::before,
.ardoise__statut.est-ferme::before {
  content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .45em; border-radius: 50%;
  vertical-align: .08em;
}
.ardoise__statut.est-ouvert::before { background: #9fd38a; }
.ardoise__statut.est-ferme::before { background: #e3a49a; }
.ardoise__ligne { margin-top: .2rem; color: #d7dcd2; }

@media (min-width: 960px) {
  .accueil { grid-template-columns: 1fr 560px; align-items: end; padding-top: 4rem; }
  .accueil__texte { padding-bottom: 5rem; }
  .accueil__branche { width: 260px; right: 0; }
  .accueil__devanture { margin-top: 6rem; }
  .ardoise { right: -16px; bottom: -3.2rem; width: 290px; }
}

/* La section qui suit l'accueil laisse la place à l'ardoise qui déborde */
.accueil + .commander { padding-top: 8rem; }
@media (min-width: 960px) { .accueil + .commander { padding-top: 5rem; } }

/* ---------- Titres de section ---------- */
.titre-section { font: 400 clamp(2.1rem, 7vw, 3rem)/1.1 var(--titre); }

/* ---------- Commander ---------- */
.commander {
  padding: 4.5rem max(16px, calc((100% - var(--largeur)) / 2)) 3.5rem;
  background: var(--sauge);
  border-top: var(--trait);
}
.commander__grille { display: grid; gap: 1rem; margin: 1.8rem 0 1.8rem; }
@media (min-width: 760px) { .commander__grille { grid-template-columns: repeat(3, 1fr); } }
.formule {
  padding: 1.3rem 1.4rem;
  background: var(--papier-clair); border: var(--trait); border-radius: var(--rayon);
}
.formule h3 { font: 1.6rem/1.15 var(--titre); margin-bottom: .45rem; }
.formule--livraison { background: var(--rose); }
.formule__note { margin-top: .6rem; font-size: .95rem; color: var(--encre-douce); }
.offre {
  margin-top: .9rem; padding: .7rem .9rem;
  background: var(--prune); color: #fff; border-radius: 12px;
}
.offre strong { display: block; font-size: 1.1rem; }
.offre span { font-size: .95rem; opacity: .9; }

/* ---------- Carte ---------- */
.carte { padding: 4.5rem max(16px, calc((100% - var(--largeur)) / 2)); }
.carte__halal {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem;
  font-weight: 600; color: var(--feuille);
}
.carte__halal svg { width: 1.2em; height: 1.2em; fill: currentColor; }

.carte__onglets {
  position: sticky; top: 61px; z-index: 10;
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  margin: .6rem -16px 1rem; padding: .7rem 16px;
  background: var(--papier);
}
.carte__onglets::-webkit-scrollbar { display: none; }
.carte__onglets a {
  flex: none; padding: .35rem .95rem; border: var(--trait); border-radius: 999px;
  background: var(--papier-clair); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.carte__onglets a:hover, .carte__onglets a.actif { background: var(--prune); border-color: var(--prune-fonce); color: #fff; }

/* Encadrés cernés de noir, comme sur le menu papier */
.rubrique {
  position: relative;
  padding: 2.3rem 1.3rem 1.3rem; margin-top: 1.6rem;
  background: var(--papier-clair); border: var(--trait); border-radius: var(--rayon);
  scroll-margin-top: 8.5rem;
}
.etiquette {
  position: absolute; top: 0; left: 1.2rem; transform: translateY(-50%);
  padding: .3rem 1.1rem; border-radius: 999px;
  font: 600 1.25rem/1.3 var(--texte); color: #fff;
}
.etiquette--prune { background: var(--prune); }
.etiquette--gris { background: #6f6669; }
.etiquette--bleu { background: var(--bleu); color: var(--encre); }
.rubrique__note { color: var(--encre-douce); font-size: .95rem; margin-bottom: .6rem; }

.plats { list-style: none; margin: 0; padding: 0; }
.plat {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--encre) 25%, transparent);
}
.plat:last-child { border-bottom: 0; }
.plat__nom { font: 1.12rem/1.3 var(--titre); }
.plat__prix { font-weight: 700; white-space: nowrap; }
.plat__desc { grid-column: 1 / -1; color: var(--encre-douce); font-size: .97rem; line-height: 1.45; }

.menu-plus {
  margin-top: .9rem; padding: .55rem .9rem; border-radius: 12px;
  background: var(--sauge); font-size: .97rem;
}

/* Pizzas : deux bases, avec le tampon festonné du menu papier */
.pizzas { display: grid; gap: 1.5rem; margin-top: .4rem; }
@media (min-width: 760px) { .pizzas { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.base__titre { margin: .4rem 0 .3rem; }
.tampon {
  display: inline-block; padding: .35rem 1rem;
  border: 2px dashed currentColor; outline: 3px solid var(--papier-clair); outline-offset: -6px;
  border-radius: 999px;
  font: 600 1rem/1.3 var(--texte);
}
.tampon--tomate { background: #c96e5a; color: #fff; outline-color: #c96e5a; border-color: #fff; }
.tampon--creme { background: #5f7894; color: #fff; outline-color: #5f7894; border-color: #fff; }

.carte__colonnes { display: grid; gap: 0 1.5rem; }
@media (min-width: 760px) { .carte__colonnes { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 1060px) { .carte__colonnes { grid-template-columns: repeat(3, 1fr); } }
.carte__mention { margin-top: 2rem; font-size: .95rem; color: var(--encre-douce); }

/* ---------- Infos ---------- */
.infos {
  padding: 4.5rem max(16px, calc((100% - var(--largeur)) / 2));
  background: var(--sauge); border-top: var(--trait);
}
.infos__grille { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
@media (min-width: 760px) { .infos__grille { grid-template-columns: 1fr 1fr; } .plan { grid-column: 1 / -1; } }
.infos__bloc { padding: 1.4rem; background: var(--papier-clair); border: var(--trait); border-radius: var(--rayon); }
.infos__bloc h3 { font: 1.6rem/1.15 var(--titre); margin-bottom: .8rem; }
.horaires { width: 100%; border-collapse: collapse; }
.horaires th, .horaires td { padding: .45rem .5rem; text-align: left; border-bottom: 1px dashed color-mix(in srgb, var(--encre) 25%, transparent); }
.horaires th { font-weight: 600; }
.horaires td { text-align: right; }
.horaires tr:last-child th, .horaires tr:last-child td { border-bottom: 0; }
.horaires tr.aujourdhui { background: var(--rose); }
.horaires tr.aujourdhui th::after { content: " (aujourd’hui)"; font-weight: 400; font-size: .9em; }
.infos__note { margin-top: .9rem; color: var(--encre-douce); }
address { font-style: normal; font-size: 1.1rem; line-height: 1.55; }
.lien-fort { display: inline-block; margin-top: .6rem; font: 1.5rem/1.2 var(--titre); text-underline-offset: 5px; }
.infos__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

.plan {
  display: grid; place-items: center; gap: 1rem; text-align: center;
  min-height: 200px; padding: 1.5rem;
  background: var(--papier-clair); border: var(--trait); border-radius: var(--rayon); overflow: hidden;
}
.plan p { max-width: 28rem; color: var(--encre-douce); }
.plan iframe { width: 100%; height: 360px; border: 0; align-self: stretch; }
.plan:has(iframe) { padding: 0; }

/* ---------- Pied de page ---------- */
.pied {
  padding: 3rem 16px 6.5rem; text-align: center;
  background: var(--prune); color: #f3e9ec;
}
.pied a { color: #fff; }
.pied p + p { margin-top: .5rem; }
.pied__nom { font: 2rem/1.1 var(--titre); color: #fff; margin-bottom: .8rem; }
.pied__nom span { display: block; font: 600 1rem/1.4 var(--texte); color: #e5d3d9; }
@media (min-width: 760px) { .pied { padding-bottom: 3rem; } }

/* ---------- Bouton d'appel flottant (téléphone) ---------- */
.appel-flottant {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 54px; padding: .7rem 1.3rem;
  background: var(--prune); color: #fff; text-decoration: none; font-weight: 700;
  border: 2px solid var(--prune-fonce); border-radius: 999px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--prune-fonce) 40%, transparent);
}
.appel-flottant svg { width: 1.2em; height: 1.2em; fill: currentColor; }
@media (min-width: 760px) { .appel-flottant { display: none; } }

/* ---------- Mentions légales ---------- */
.page-texte { max-width: 46rem; margin: 0 auto; padding: 3rem 16px 4rem; }
.page-texte h1 { font: 2.6rem/1.1 var(--titre); margin-bottom: 1.5rem; }
.page-texte h2 { font: 1.5rem/1.2 var(--titre); margin: 2rem 0 .6rem; }
.page-texte p + p { margin-top: .7rem; }
.a-completer { background: #f5e27a; padding: 0 .25em; border-radius: 3px; }