/* Coque de l'application : barre haute et onglets (téléphone), rail compact (tablette), rail large et trois volets (ordinateur). */

/* ---------- Téléphone : barre haute collante ---------- */
.sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 40px; pointer-events: none; }
.barre {
  position: sticky; top: var(--demobar-offset, 0px); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--barre-h);
  padding: 0 max(var(--marge), env(safe-area-inset-right)) 0 max(var(--marge), env(safe-area-inset-left));
  color: var(--noir);
}
.barre::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--acide); border-bottom: 1px solid rgb(14 15 13 / .18);
  opacity: 0; transition: opacity .22s var(--courbe);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .barre::before { background: rgb(168 224 0 / .86); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
}
html[data-defile] .barre::before { opacity: 1; }
html[data-noir] .barre { background: var(--noir); color: var(--acide); }
html[data-noir] .barre::before { display: none; }
.logo { display: flex; align-items: center; flex: none; min-height: 44px; min-width: 44px; color: inherit; }
.logo svg { height: 28px; width: auto; aspect-ratio: 2629 / 1028; }
.tel { display: flex; align-items: center; gap: 8px; flex: none; min-height: 44px; min-width: 44px; justify-content: flex-end;
  font: 500 16px/1 var(--f-texte); text-decoration: none; color: inherit; }
.tel svg { width: 18px; height: 18px; flex: none; }
html[data-noir] .tel { color: var(--blanc); }
@media (max-width: 379px) { .tel-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.rail-pied { display: contents; }
.rail-chrono, .rail-etat, .rail-adresse { display: none; }
@media (max-width: 767px) {
  html[data-noir][data-defile] .barre { box-shadow: inset 0 -1px 0 var(--filet); }
  /* Sur Terrain, le plan est collé sous la barre : un verre n'y montrerait que des fantômes de texte */
  html[data-vue="terrain"] .barre::before { background: var(--acide); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Téléphone : onglets fixes en bas ---------- */
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(var(--onglets-h) + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--noir); border-top: 1px solid var(--filet);
}
.onglets ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: var(--onglets-h); }
.onglets a {
  position: relative; display: grid; place-content: center; justify-items: center; gap: 4px; height: 100%;
  color: var(--gris); font: 500 12px/1 var(--f-texte); text-decoration: none;
}
.onglets svg { width: 24px; height: 24px; }
.onglets a[aria-current="page"] { color: var(--acide); }
.onglets a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 14px; right: 14px; height: 3px; background: currentColor; }
.onglets .o-reserver { background: var(--acide); color: var(--noir); }
.onglets .o-reserver[aria-current="page"] { color: var(--noir); }
.o-rail, .o-fleche { display: none; }
html[data-panier] .o-reserver .o-mot { font: 700 17px/1 var(--f-titre); }
@media (max-height: 480px) and (orientation: landscape) {
  :root { --onglets-h: 48px; }
  .onglets a { grid-auto-flow: column; align-items: center; gap: 8px; }
}
body { padding-bottom: calc(var(--onglets-h) + env(safe-area-inset-bottom)); }
:root:has(input:focus) .onglets, :root:has(input:focus) .resume-sessions, :root:has(input:focus) .r-resume { display: none; }

/* ---------- Vues ---------- */
.vue { display: flex; flex-direction: column; background: var(--acide); min-height: calc(100svh - var(--barre-h) - var(--onglets-h)); }
.volet { display: contents; }
.v-tete { padding: 20px max(var(--marge), env(safe-area-inset-left)) 12px; }
.resume-sessions {
  position: fixed; left: 0; right: 0; z-index: 49; bottom: calc(var(--onglets-h) + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px;
  padding: 0 max(var(--marge), env(safe-area-inset-right)) 0 max(var(--marge), env(safe-area-inset-left));
  background: var(--noir); color: var(--blanc); border-bottom: 1px solid var(--filet);
  transform: translateY(100%); visibility: hidden;
  transition: transform .3s var(--courbe), visibility 0s .3s;
}
.resume-sessions.est-visible { transform: none; visibility: visible; transition-delay: 0s; }
html:not([data-vue="sessions"]) .resume-sessions { display: none; }
.rs-texte { font: 700 19px/1.1 var(--f-titre); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rs-bouton { flex: none; min-height: 44px; padding: 0 16px; font-size: 15px; }
html[data-vue="sessions"][data-panier] body { padding-bottom: calc(var(--onglets-h) + 56px + env(safe-area-inset-bottom)); }

/* ---------- Transitions de vue (repli : bascule sèche) ---------- */
.barre { view-transition-name: barre; }
.am-demobar { view-transition-name: demobar; }
.onglets { view-transition-name: onglets; }
.resume-sessions { view-transition-name: resume; }
::view-transition-group(*) { animation-duration: .32s; animation-timing-function: var(--courbe); }
::view-transition-group(code) { z-index: 10; }
html[data-vt="diag"]::view-transition-old(root) { animation: none; }
html[data-vt="diag"]::view-transition-new(root) { animation: vt-diag .26s var(--courbe) both; }
@keyframes vt-diag { from { clip-path: polygon(120% 0, 120% 0, 120% 100%, 100% 100%); } to { clip-path: polygon(0 0, 120% 0, 120% 100%, -20% 100%); } }
html[data-vt="monte"]::view-transition-old(root) { animation: none; }
html[data-vt="monte"]::view-transition-new(root) { animation: vt-monte .3s var(--courbe) both; }
@keyframes vt-monte { from { transform: translateY(100%); } }
html[data-vt="descend"]::view-transition-old(root) { z-index: 1; animation: vt-descend .28s var(--courbe) both; }
html[data-vt="descend"]::view-transition-new(root) { animation: none; }
@keyframes vt-descend { to { transform: translateY(100%); } }
html[data-vt="pousse"]::view-transition-old(root) { animation: vt-recule .32s var(--courbe) both; }
html[data-vt="pousse"]::view-transition-new(root) { animation: none; opacity: 0; }
html[data-vt="pousse"]::view-transition-new(fiche) { animation: vt-entre .32s var(--courbe) both; }
html[data-vt="retire"]::view-transition-old(fiche) { animation: vt-sort .32s var(--courbe) both; }
html[data-vt="retire"]::view-transition-new(root) { animation: vt-revient .32s var(--courbe) both; }
html[data-vt="retire"]::view-transition-old(root) { animation: none; opacity: 0; }
@keyframes vt-recule { to { transform: translateX(-20%); filter: brightness(.45); } }
@keyframes vt-revient { from { transform: translateX(-20%); filter: brightness(.45); } }
@keyframes vt-entre { from { transform: translateX(100%); } }
@keyframes vt-sort { to { transform: translateX(100%); } }

/* ---------- Tablette : rail compact de 88 px, une seule colonne ---------- */
@media (min-width: 768px) {
  :root { --rail: 88px; --marge: 32px; }
  html { scrollbar-gutter: auto; }
  body { padding-bottom: 0; }
  main { margin-left: var(--rail); }
  .sentinelle { display: none; }
  .barre, .onglets { position: fixed; left: 0; width: var(--rail); background: var(--noir); color: var(--acide); }
  .barre {
    top: var(--demobar-offset, 0px); height: 196px; flex-direction: column; justify-content: flex-start; gap: 18px;
    padding: 20px 0 0; border: 0;
  }
  .barre::before { display: none; }
  .logo svg { height: 22px; }
  .tel { color: var(--blanc); justify-content: center; width: 64px; height: 44px; }
  .tel-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rail-chrono { display: grid; justify-items: center; color: var(--gris); font: 500 12px/1.2 var(--f-texte); text-align: center; }
  .rail-chrono .rc-label, .rail-chrono .rc-exemple, .rc-dans { display: none; }
  .rc-heure { font: 900 30px/1 var(--f-titre); color: var(--acide); }
  .onglets { top: calc(var(--demobar-offset, 0px) + 196px); bottom: 0; right: auto; height: auto; padding: 0; border: 0; }
  .onglets ul { display: flex; flex-direction: column; height: 100%; }
  .onglets li:last-child { margin-top: auto; }
  .onglets a { height: 72px; padding: 0 4px; }
  .onglets a[aria-current="page"]::before { top: 12px; bottom: 12px; left: 0; right: auto; width: 3px; height: auto; }
  .onglets .o-reserver { height: 80px; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
  .onglets .o-reserver[aria-current="page"]::before { display: none; }
  html[data-panier] .o-reserver .o-mot { font-size: 16px; }
  .resume-sessions { left: var(--rail); bottom: 0; }
  :root:has(input:focus) .onglets { display: block; }
  html[data-vue="sessions"][data-panier] body { padding-bottom: 56px; }
}

/* Tablette ou téléphone couché, écran bas : le rail se tasse pour que « Réserver » reste en vue */
@media (min-width: 768px) and (max-width: 1099px) and (max-height: 600px) {
  .barre { height: 116px; gap: 6px; padding-top: 12px; }
  .rail-chrono { display: none; }
  .onglets { top: calc(var(--demobar-offset, 0px) + 116px); }
  .onglets a { height: 54px; }
  .onglets .o-reserver { height: 60px; }
}

/* ---------- Ordinateur : rail large de 240 px et trois volets qui défilent chacun ---------- */
@media (min-width: 1100px) {
  :root { --rail: 240px; --marge: 32px; --rail-haut: 318px; }
  html, body { height: 100%; overflow: hidden; }
  html { scrollbar-gutter: auto; }
  body { padding: 0; }
  .barre { width: var(--rail); height: var(--rail-haut); align-items: stretch; gap: 0; padding: 24px 24px 0; }
  .logo { align-self: flex-start; }
  .logo svg { height: 40px; }
  .rail-chrono { display: block; justify-items: start; text-align: left; margin-top: 24px; font-size: 13px; line-height: 1.35; }
  .rail-chrono .rc-label, .rail-chrono .rc-exemple, .rc-dans { display: block; }
  .rc-jour { color: var(--blanc); }
  .rc-heure { font-size: 64px; margin: 6px 0 4px; }
  .rc-dans { color: var(--gris); }
  .rc-decompte { display: block; font: 700 30px/1 var(--f-titre); color: var(--blanc); margin-top: 2px; }
  .rc-exemple { margin-top: 6px; }
  .barre { z-index: 51; }
  /* Pied du rail : l'état du jour et le contact, posés juste au-dessus du bloc « Réserver » */
  .rail-pied { display: grid; gap: 6px; position: fixed; left: 0; bottom: 64px; width: var(--rail); padding: 0 24px 20px; }
  .rail-etat { display: block; padding-top: 14px; border-top: 1px solid var(--filet); color: var(--blanc); font: 500 16px/1.3 var(--f-texte); }
  .rail-adresse { display: block; color: var(--gris); font: 500 15px/1.3 var(--f-texte); }
  .tel { width: auto; justify-content: flex-start; font-size: 17px; }
  .tel-num { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .onglets { width: var(--rail); top: calc(var(--demobar-offset, 0px) + var(--rail-haut)); }
  .onglets a { height: 52px; grid-auto-flow: column; justify-content: start; gap: 14px; padding: 0 24px; font-size: 17px; color: var(--gris); }
  .onglets a[aria-current="page"] { color: var(--acide); }
  .onglets a[aria-current="page"]::before { top: 0; bottom: 0; }
  @media (hover: hover) { .onglets a:not(.o-reserver):hover { color: var(--blanc); } }
  .onglets .o-reserver { height: 64px; padding: 0 24px; font: 700 17px/1 var(--f-texte); clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
  .onglets .o-reserver svg, .onglets .o-reserver .o-mot { display: none; }
  .o-rail { display: block; }
  .onglets .o-reserver { justify-content: space-between; font-size: 18px; white-space: nowrap; }
  html[data-panier] .onglets .o-reserver { font-size: 16px; }
  .onglets .o-reserver .o-fleche { display: block; width: 28px; height: 14px; }

  main { position: fixed; top: var(--demobar-offset, 0px); left: var(--rail); right: 0; bottom: 0; margin-left: 0; }
  .vue { display: grid; grid-template-columns: clamp(360px, 30vw, 460px) minmax(0, 1fr); height: 100%; }
  .volet { display: block; position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .volet-liste { border-right: 2px solid var(--noir); }
  .v-tete {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    height: 56px; padding: 0 var(--marge); isolation: isolate;
  }
  .v-tete::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--acide); border-bottom: 1px solid rgb(14 15 13 / .18);
    opacity: 0; transition: opacity .22s var(--courbe);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .v-tete::before { background: rgb(168 224 0 / .86); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
  }
  .volet[data-defile] > .v-tete::before { opacity: 1; }
  .v-titre { font-size: 28px; }
  .resume-sessions { display: none; }
  .barre, .onglets { view-transition-name: none; }
  .barre { view-transition-name: rail-haut; }
  .onglets { view-transition-name: rail-bas; }
}
@media (min-width: 1100px) and (max-height: 780px) { .rail-adresse { display: none; } .rail-chrono { margin-top: 16px; } .rc-heure { font-size: 56px; } }
@media (min-width: 1100px) and (max-height: 660px) { .rail-etat { display: none; } }
.js:not(.app) .vue:not(#sessions) { display: none; }