/* Tourbe · site du restaurant (étude de création).
   Newsreader pour les titres et les plats, Space Grotesk pour l'interface, les heures et les prix.
   Polices SIL OFL locales. Le bouleau pour le fond, la tourbe pour l'encre, la bruyère pour les
   moments forts, la braise pour un seul point par écran. Angles droits, filets fins.
   Mobile d'abord : contrôlé de 320 à 1 440 px. La carte est en onglets sans script. */
@font-face { font-family: "Newsreader"; src: url("../../fonts/Newsreader-opsz-wght.woff2") format("woff2"); font-weight: 200 800; font-display: block; }
@font-face { font-family: "Newsreader"; src: url("../../fonts/Newsreader-Italic-opsz-wght.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: block; }
@font-face { font-family: "Space Grotesk"; src: url("../../fonts/SpaceGrotesk-wght.woff2") format("woff2"); font-weight: 300 700; font-display: block; }

:root {
  --tourbe: #1F1B19;
  --tourbe-2: #2A2522;
  --bouleau: #EFECE6;
  --blanc: #F9F8F5;
  --bruyere: #5E4C63;
  --lichen: #B9C3A6;
  --lichen-pale: #DFE4D5;
  --braise: #D0582C;
  --gris: #5F5853;
  --filet: rgba(31, 27, 25, .16);
  --news: "Newsreader", Georgia, serif;
  --grot: "Space Grotesk", system-ui, sans-serif;
  --gouttiere: clamp(20px, 5vw, 64px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--blanc); color: var(--tourbe); font-family: var(--grot); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--braise); outline-offset: 3px; }
.evitement { position: absolute; left: -9999px; top: 0; }
.evitement:focus { left: 12px; top: 12px; z-index: 10; padding: 10px 14px; background: var(--tourbe); color: var(--blanc); }
.enveloppe { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gouttiere); }
h1, h2 { font-family: var(--news); font-weight: 400; letter-spacing: -.025em; font-variation-settings: "opsz" 72; }
h1 em, h2 em { font-style: italic; color: var(--bruyere); }
.surtitre { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.surtitre--clair { color: #CFC6BD; }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px var(--tourbe); color: var(--tourbe); white-space: nowrap; transition: background .2s, color .2s; }
.bouton:hover { background: var(--tourbe); color: var(--blanc); }
.bouton--plein { background: var(--tourbe); color: var(--blanc); }
.bouton--plein:hover { background: var(--bruyere); }
.bouton--clair { background: var(--blanc); color: var(--tourbe); box-shadow: none; }
.bouton--clair:hover { background: var(--lichen); color: var(--tourbe); }
.bouton--grand { min-height: 54px; padding: 0 26px; }

/* En-tête */
.tete { position: sticky; top: 0; z-index: 5; background: rgba(249, 248, 245, .97); border-bottom: 1px solid var(--filet); }
.tete__in { display: flex; align-items: center; gap: 28px; height: 72px; }
.tete__logo img { height: 34px; width: auto; }
.nav { display: none; margin-left: auto; gap: 30px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--braise); }
.tete .bouton { margin-left: auto; }

/* Ouverture */
.ouverture { padding: 36px 0 56px; }
.ouverture__grille { display: grid; gap: 32px; }
h1 { margin-top: 14px; font-size: clamp(42px, 10vw, 86px); line-height: .94; }
.chapo { margin-top: 20px; max-width: 32em; font-size: 17px; color: var(--gris); }
.actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.dispo { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--gris); }
.braise { width: 22px; height: 6px; flex: none; background: var(--braise); }
.fagne svg { width: 100%; height: auto; }

/* La carte, en onglets */
.carte { padding: 64px 0 72px; background: var(--bouleau); }
h2 { margin-top: 12px; font-size: clamp(34px, 6.4vw, 58px); line-height: 1; }
.onglets { margin-top: 32px; display: flex; flex-wrap: wrap; }
.onglets input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.onglets label { flex: 1 1 0; min-height: 50px; display: flex; align-items: center; justify-content: center; padding: 0 12px; font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: inset 0 -1px 0 var(--filet); color: var(--gris); }
.onglets input:checked + label { color: var(--tourbe); box-shadow: inset 0 -3px 0 var(--braise); }
.onglets input:focus-visible + label { outline: 2px solid var(--braise); outline-offset: -2px; }
.panneau { display: none; width: 100%; padding-top: 28px; }
#o-soir:checked ~ .panneau--soir, #o-midi:checked ~ .panneau--midi, #o-boire:checked ~ .panneau--boire { display: grid; gap: 24px; }
.menu__t { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--tourbe); }
.menu__t p:first-child { font-family: var(--news); font-size: 26px; line-height: 1.1; }
.prix { font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
.menu__a { grid-column: 1 / -1; font-size: 14px; color: var(--gris); }
.plats li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.plats--prix li { grid-template-columns: 1fr auto; }
.no { font-size: 13px; font-weight: 600; color: #A8431E; padding-top: 6px; font-variant-numeric: tabular-nums; }
.pl { color: var(--gris); font-size: 15px; }
.pl b { display: block; font-family: var(--news); font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--tourbe); letter-spacing: -.01em; }
.px { font-weight: 500; font-variant-numeric: tabular-nums; padding-top: 4px; }
.carte__n { margin-top: 24px; font-size: 14.5px; color: var(--gris); }

/* Le feu */
.feu { padding: 72px 0; background: var(--tourbe); color: #D8D2C9; }
.feu h2 { max-width: 15em; color: var(--blanc); }
.faits { margin-top: 40px; display: grid; gap: 0; }
.faits div { padding: 18px 0; border-top: 1px solid rgba(239, 236, 230, .2); }
.faits dt { font-family: var(--news); font-size: 26px; line-height: 1.1; color: var(--blanc); }
.faits dd { margin-top: 6px; font-size: 15.5px; }
.faits div:first-child dt::after { content: ""; display: inline-block; width: 18px; height: 5px; margin-left: 12px; vertical-align: middle; background: var(--braise); }

/* Infos */
.infos { padding: 64px 0; }
.infos__grille { display: grid; gap: 32px; }
.infos__a { margin-top: 16px; color: var(--gris); }
.horaires { width: 100%; border-collapse: collapse; font-size: 15px; }
.horaires caption { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); padding-bottom: 10px; }
.horaires th, .horaires td { padding: 14px 0; border-top: 1px solid var(--filet); text-align: left; vertical-align: top; }
.horaires th { font-weight: 600; padding-right: 16px; }
.horaires td { color: var(--gris); }

/* Appel */
.appel { padding: 56px 0; background: var(--bruyere); color: var(--blanc); }
.appel__in { display: grid; gap: 24px; align-items: center; }
.appel h2 { margin-top: 0; color: var(--blanc); }
.appel .bouton { justify-self: start; }

/* Pied */
.pied { background: var(--tourbe); color: #CFC8BF; padding: 56px 0 28px; font-size: 15px; }
.pied__grille { display: grid; gap: 26px; }
.pied__logo { height: 34px; width: auto; }
.pied h3 { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--lichen); margin-bottom: 8px; }
.pied__bas { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(239, 236, 230, .16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13.5px; color: #BDB5AC; }

@media (min-width: 640px) {
  .faits { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .nav { display: flex; }
  .tete .bouton { margin-left: 8px; }
  .ouverture { padding: 56px 0 80px; }
  .ouverture__grille { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
  .onglets label { flex: 0 0 auto; padding: 0 28px; }
  .onglets { box-shadow: inset 0 -1px 0 var(--filet); }
  #o-soir:checked ~ .panneau--soir, #o-midi:checked ~ .panneau--midi, #o-boire:checked ~ .panneau--boire { grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
  .menu__t { border-bottom: 0; border-top: 3px solid var(--tourbe); padding-top: 16px; }
  .plats li:first-child { padding-top: 0; }
  .infos__grille { grid-template-columns: 1fr 1fr; gap: 64px; }
  .appel__in { grid-template-columns: 1fr auto; }
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
@media (max-width: 359px) {
  .tete__logo img { height: 28px; }
  .tete .bouton { padding: 0 14px; }
  .actions .bouton { flex: 1 1 100%; }
}