/* Tourbe · réservation d'une table (étude de création).
   Newsreader pour les titres, Space Grotesk pour l'interface et les chiffres. Polices SIL OFL locales.
   Angles droits, filets fins, le bouleau pour le fond, la tourbe pour l'encre. La braise ne sert
   qu'à une chose : montrer ce qui brûle (la planche choisie, le feu sur le plan de salle).
   Une feuille pour toutes les tailles : la mise en page suit son conteneur. */
@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);
  --rouge: #A33A1C;
  --news: "Newsreader", Georgia, serif;
  --grot: "Space Grotesk", system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #8B8580; font-family: var(--grot); color: var(--tourbe); font-size: 15px; line-height: 1.45; }
ol, ul { list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; text-align: left; }
button:disabled { cursor: default; }
fieldset { border: 0; }
:focus-visible { outline: 2px solid var(--braise); outline-offset: 2px; }

.planche { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; padding: 40px; }
.ecran { background: var(--blanc); overflow: hidden; display: flex; flex-direction: column; flex: none; container-type: inline-size; }
.ecran--tel { width: 390px; height: 844px; }
.ecran--tab { width: 1180px; height: 700px; background: var(--tourbe); }
.ecran > form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.page-resa { min-height: 100vh; background: var(--blanc); }
.page-resa .ecran { width: 100%; max-width: 560px; margin: 0 auto; overflow: visible; }

.barre { flex: none; display: flex; align-items: center; gap: 10px; padding: 54px 20px 0; }
.page-resa .barre { padding-top: 24px; }
.barre img { height: 30px; width: auto; }
.retour { width: 32px; height: 32px; margin-left: -6px; display: grid; place-items: center; }
.retour[hidden] { display: none; }
.retour svg { width: 20px; height: 20px; fill: none; stroke: var(--tourbe); stroke-width: 1.8; stroke-linecap: square; }

/* Le fil : trois planches. */
.fil { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 18px 20px 0; font-size: 12.5px; color: var(--gris); }
.fil li { padding-top: 9px; border-top: 4px solid var(--lichen-pale); display: flex; gap: 6px; }
.fil li.fait, .fil li.ici { border-top-color: var(--tourbe); color: var(--tourbe); font-weight: 600; }
.fil li.ici { border-top-color: var(--braise); }
.fil span { font-variant-numeric: tabular-nums; }

.corps { flex: 1; min-height: 0; padding: 22px 20px 22px; display: flex; flex-direction: column; }
h1 { font-family: var(--news); font-weight: 500; font-size: 34px; line-height: 1.02; letter-spacing: -.02em; font-variation-settings: "opsz" 48; }
.sous { margin-top: 6px; color: var(--gris); font-size: 14px; }
.note { margin-top: 14px; font-size: 12.5px; color: var(--gris); }

/* Étape 1 · le jour */
.sem-t { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; }
.sem-t p { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.fleches { display: flex; gap: 4px; }
.fleches button { width: 36px; height: 36px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--tourbe); }
.fleches button:disabled { box-shadow: inset 0 0 0 1px rgba(31, 27, 25, .2); color: #6F6863; }
.jours { margin-top: 10px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jr { height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--bouleau); }
.jr:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--tourbe); }
.jr__s { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.jr__n { font-family: var(--news); font-size: 24px; line-height: 1; font-weight: 500; }
.jr__e { font-size: 10.5px; color: var(--gris); }
.jr:disabled { background: transparent; box-shadow: inset 0 0 0 1px var(--filet); }
.jr:disabled .jr__n, .jr:disabled .jr__s, .jr:disabled .jr__e { color: #6F6863; }
.jr.choisi { background: var(--tourbe); color: var(--blanc); }
.jr.choisi .jr__s, .jr.choisi .jr__e { color: #E3DED6; }
.ligne { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--filet); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ligne__t { font-weight: 600; }
.cpt { display: flex; align-items: center; gap: 14px; }
.cpt button { width: 38px; height: 38px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--tourbe); font-size: 18px; }
.cpt button:disabled { color: #6F6863; box-shadow: inset 0 0 0 1px rgba(31, 27, 25, .2); }
.cpt output { min-width: 18px; text-align: center; font-family: var(--news); font-size: 24px; font-weight: 500; }
.choix { display: flex; }
.choix button { padding: 9px 14px; box-shadow: inset 0 0 0 1px var(--tourbe); font-size: 14px; font-weight: 500; }
.choix button + button { margin-left: -1px; }
.choix button.choisi { background: var(--tourbe); color: var(--blanc); }
.choix button:disabled { color: #6F6863; box-shadow: inset 0 0 0 1px rgba(31, 27, 25, .2); }
.info { margin-top: 18px; padding: 14px 16px; background: var(--lichen-pale); font-size: 14px; }
.info b { display: block; font-family: var(--news); font-weight: 500; font-size: 21px; line-height: 1.1; letter-spacing: -.01em; }
.pied-e { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--filet); display: flex; flex-direction: column; gap: 10px; }
.pied-e p { font-size: 13.5px; color: var(--gris); }
.pied-e--col { border-top: 0; }
.suite { min-height: 52px; padding: 0 22px; background: var(--tourbe); color: var(--blanc); font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.suite:hover:not(:disabled) { background: var(--bruyere); }
.suite:disabled { background: #D6D1C9; color: #4F4843; }
.lien { min-height: 44px; text-align: center; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Étape 2 · l'heure */
.heures { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.h { padding: 10px 10px 9px; background: var(--bouleau); display: flex; flex-direction: column; gap: 1px; }
.h b { font-family: var(--news); font-weight: 500; font-size: 21px; line-height: 1.05; }
.h span { font-size: 11.5px; color: var(--gris); }
.h:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--tourbe); }
.h:disabled { background: transparent; box-shadow: inset 0 0 0 1px var(--filet); }
.h:disabled b { color: #6F6863; text-decoration: line-through; text-decoration-thickness: 1px; }
.h:disabled span { color: #6F6863; }
.h.choisi { background: var(--tourbe); color: var(--blanc); box-shadow: inset 0 -4px 0 var(--braise); }
.h.choisi span { color: #E3DED6; }

/* Étape 3 · vous */
.rappel { margin-top: 8px; padding: 10px 12px; background: var(--lichen-pale); font-size: 13.5px; font-weight: 500; }
.champ { display: block; margin-top: 12px; }
.champ span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.champ input, .champ select { width: 100%; height: 44px; margin-top: 5px; padding: 0 12px; border: 1px solid #9C948D; border-radius: 0; background: #FFFFFF; }
.champ small { display: block; margin-top: 4px; font-size: 12px; color: var(--rouge); font-weight: 600; }
.champ.faux input { border-color: var(--rouge); }
.regimes { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.regimes legend { width: 100%; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.pastille { position: relative; }
.pastille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastille span { display: inline-block; padding: 8px 12px; box-shadow: inset 0 0 0 1px #9C948D; font-size: 13.5px; }
.pastille input:checked + span { background: var(--tourbe); color: var(--blanc); box-shadow: none; }
.pastille input:focus-visible + span { outline: 2px solid var(--braise); outline-offset: 2px; }

/* Étape 4 · c'est noté */
.corps--fin { padding-top: 36px; }
.planches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; width: 112px; }
.planches i { height: 30px; background: var(--tourbe); }
.planches i.b { background: var(--braise); }
.sur { margin-top: 26px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.corps--fin h1 { margin-top: 6px; font-size: 40px; }
.recap { margin-top: 22px; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--tourbe); }
.recap dt, .recap dd { padding: 11px 0; border-bottom: 1px solid var(--filet); }
.recap dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); padding-top: 14px; }
.recap dd { text-align: right; font-family: var(--news); font-size: 19px; font-weight: 500; }

/* Le carnet du soir, côté salle */
.carnet { flex: 1; display: flex; flex-direction: column; padding: 30px 36px 32px; color: var(--bouleau); }
.carnet__t { display: flex; align-items: center; gap: 28px; padding-bottom: 20px; border-bottom: 1px solid rgba(239, 236, 230, .2); }
.carnet__t img { height: 34px; width: auto; }
.carnet__t p { font-size: 16px; color: #D8D2C9; }
.carnet__t b { color: var(--blanc); font-weight: 600; }
.carnet__c { margin-left: auto; font-size: 16px; }
.carnet__c b { font-family: var(--news); font-weight: 500; font-size: 30px; }
.carnet__g { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 470px; gap: 36px; padding-top: 22px; }
.liste li { display: grid; grid-template-columns: 70px 1fr 40px 44px; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(239, 236, 230, .14); font-size: 15px; color: #D8D2C9; }
.liste li.la { color: #B5ADA4; }
.liste .lh { font-family: var(--news); font-size: 21px; color: var(--blanc); font-variant-numeric: tabular-nums; }
.liste li.la .lh { color: #B5ADA4; }
.liste b { font-weight: 600; color: var(--blanc); }
.liste li.la b { color: #CFC8BF; }
.liste em { display: block; font-style: normal; font-size: 12.5px; color: #F0A27F; }
.liste .lc { text-align: right; font-family: var(--news); font-size: 19px; }
.liste .lt { text-align: right; font-size: 12.5px; letter-spacing: .08em; }
.salle__t { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #D8D2C9; }
.plan { margin-top: 12px; width: 100%; height: auto; display: block; }
.tb rect { stroke-width: .4; }
.tb text { font-family: var(--grot); font-size: 3.2px; font-weight: 600; }
.tb--libre rect { fill: none; stroke: #8E867F; }
.tb--libre text { fill: #CFC8BF; }
.tb--attendu rect { fill: var(--lichen); stroke: var(--lichen); }
.tb--attendu text { fill: var(--tourbe); }
.tb--assis rect { fill: var(--bouleau); stroke: var(--bouleau); }
.tb--assis text { fill: var(--tourbe); }
.legende-c { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; color: #D8D2C9; }
.k { display: inline-block; width: 14px; height: 14px; margin-right: -12px; vertical-align: -2px; }
.k--assis { background: var(--bouleau); }
.k--attendu { background: var(--lichen); }
.k--libre { box-shadow: inset 0 0 0 1px #8E867F; }
.k--feu { background: var(--braise); }

@container (min-width: 520px) {
  .heures { grid-template-columns: repeat(4, 1fr); }
  .pied-e { flex-direction: row; align-items: center; justify-content: space-between; }
}
@container (max-width: 360px) {
  .barre, .fil, .corps { padding-left: 14px; padding-right: 14px; }
  .jr { height: 70px; }
  .jr__e { font-size: 9.5px; }
  .heures { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 30px; }
}
.sceau-fin { width: 64px; height: 64px; display: block; }