/* Vue Sessions : bandeau, chrono, jours, grille des demi-heures, durées. */
#sessions .volet-liste > .v-tete { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.v-tete-grille { display: none; }
.legende, .legende-note { display: none; }

.bandeau { display: block; order: -1; position: relative; height: 140px; margin: 0; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%); }
.bandeau img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }

/* Chrono : prochain départ libre, puis la session choisie */
.chrono-bloc { padding: 6px max(var(--marge), env(safe-area-inset-left)) 0; }
.cb-label { font: 500 16px/1.3 var(--f-texte); color: var(--olive); }
.cb-l2, .cb-attente, .cb-detail { display: none; }
.cb-jour { color: var(--noir); }
.cb-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cb-heure { font: 900 112px/1 var(--f-titre); margin: -2px 0 -18px -3px; }
.cb-heure .rl-c, .cb-heure .rl-s, .cb-heure .rl-b > span { height: .86em; line-height: .86em; }
.cb-dans { padding-bottom: 6px; text-align: right; font: 500 14px/1.1 var(--f-texte); color: var(--olive); }
.cb-dans > span:first-child { display: block; }
.cb-decompte { font: 700 34px/1 var(--f-titre); color: var(--noir); }
.cb-sous { margin-top: 2px; font: 500 14px/1.3 var(--f-texte); color: var(--olive); min-height: 17px; }
.chrono-bloc[data-mode="session"] .cb-l1, .chrono-bloc[data-mode="session"] .cb-dans, .chrono-bloc[data-mode="session"] .cb-exemple,
.chrono-bloc[data-mode="attente"] .cb-l1, .chrono-bloc[data-mode="attente"] .cb-dans, .chrono-bloc[data-mode="attente"] .cb-exemple { display: none; }
.chrono-bloc[data-mode="session"] .cb-l2, .chrono-bloc[data-mode="attente"] .cb-l2 { display: inline; }
.chrono-bloc[data-mode="session"] .cb-detail { display: block; font: 700 24px/1 var(--f-titre); color: var(--noir); text-transform: uppercase; margin-top: 4px; }

.jour-ligne { padding: 8px max(var(--marge), env(safe-area-inset-left)) 6px; font: 500 16px/1.3 var(--f-texte); }

/* Bandeau des 14 jours */
.jours { display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge);
  padding: 0 var(--marge) 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.jours::-webkit-scrollbar { display: none; }
.jour {
  flex: 0 0 64px; height: 56px; scroll-snap-align: start; display: grid; align-content: center; justify-items: start; gap: 3px;
  padding: 0 8px; box-shadow: inset 0 0 0 2px var(--noir); text-align: left;
}
.jour b { font: 500 12px/1 var(--f-texte); }
.jour span { font: 700 18px/1 var(--f-titre); text-transform: uppercase; white-space: nowrap; }
.jour sup { text-transform: none; font-size: .6em; line-height: 0; vertical-align: .55em; margin-left: .05em; }
.jour[aria-checked="true"] { background: var(--noir); color: var(--acide); }
.jour[aria-disabled="true"] { background: var(--hachure); box-shadow: none; color: var(--olive); cursor: not-allowed; }
.jour[aria-disabled="true"] span { text-decoration: line-through; text-decoration-thickness: 2px; }
.jour.autre { flex-basis: 84px; }
.autre-date { padding: 10px var(--marge) 0; font: 500 15px/1.3 var(--f-texte); }
.autre-date label { display: flex; align-items: center; gap: 10px; }
.autre-date input { min-height: 44px; font-size: 16px; padding: 0 10px; border: 2px solid currentColor; border-radius: 0; background: transparent; }
.autre-err { min-height: 1.3em; margin-top: 4px; }

/* La grille : un vrai tableau, première colonne collante, une demi-heure par cran */
.g-exemple { padding: 10px max(var(--marge), env(safe-area-inset-left)) 4px; font: 500 16px/1.3 var(--f-texte); color: var(--olive); }
.grille-defil {
  --c0: 96px; --cw: 72px; --ch: 64px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--c0);
  overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; display: flex;
}
/* Marge de fin : n'importe quelle demi-heure, même la dernière, peut venir se caler contre la colonne collante */
.grille-defil::after { content: ""; flex: none; width: calc(100% - var(--c0) - var(--cw)); }
.grille { flex: none; }
.grille-defil::-webkit-scrollbar { display: none; }
.g-sans-script { padding: 0 var(--marge); }
.grille { border-collapse: separate; border-spacing: 0; }
.grille th, .grille td { padding: 0; }
.grille thead th { height: 46px; vertical-align: bottom; text-align: left; padding: 0 0 6px 6px; scroll-snap-align: start;
  font: 700 20px/1 var(--f-titre); }
.grille thead th small { display: block; font: 500 11.5px/1 var(--f-texte); margin-bottom: 4px; white-space: nowrap; }
.grille thead th.parti { color: var(--olive); }
.g-coin, .g-cat { position: sticky; left: 0; z-index: 3; background: var(--acide); width: var(--c0); min-width: var(--c0); }
.g-cat { height: var(--ch); text-align: left; vertical-align: middle; padding-left: max(var(--marge), env(safe-area-inset-left)) !important; }
.g-cat b { display: block; font: 900 40px/.9 var(--f-titre); }
.g-cat span { display: block; font: 500 12px/1.2 var(--f-texte); color: var(--olive); max-width: 64px; }
.grille td { position: relative; width: var(--cw); min-width: var(--cw); height: var(--ch); padding: 2px; scroll-snap-align: start; }
.grille td.maintenant::before, .grille thead th.maintenant::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--noir); z-index: 1; }
.grille thead th:not(.g-coin) { position: relative; }
.grille thead th.maintenant::before { top: 4px; }
.case {
  display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 6px 7px; text-align: left;
  font: 500 13px/1.1 var(--f-texte); box-shadow: inset 0 0 0 2px var(--noir);
  transition: background-color .12s, color .12s, transform .12s;
}
.case[data-etat="peu"] { background: var(--noir); color: var(--acide); flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; }
.case span { font-size: 11.5px; }
.case b { font: 700 26px/.9 var(--f-titre); }
.case.choisi span, .case.choisi b { display: none; }
.case[data-etat="complet"] { background: var(--hachure); box-shadow: none; color: var(--noir); text-decoration: line-through; text-decoration-thickness: 2px; cursor: not-allowed; }
.case[data-etat="parti"] { box-shadow: none; color: var(--olive); cursor: default; }
.case.choisi { background: var(--blanc); color: var(--noir); box-shadow: inset 0 0 0 2px var(--noir); font-weight: 700; }
.case.pop { animation: pop .12s var(--courbe); }
@keyframes pop { from { transform: scale(.92); } }
@media (hover: hover) { .case[data-etat="libre"]:hover, .case[data-etat="peu"]:hover { box-shadow: inset 0 0 0 4px var(--noir); } }
.case:focus-visible { outline-offset: -6px; }

/* Durées : le prix de la sélection, ou la raison */
.durees-bloc { padding: 16px max(var(--marge), env(safe-area-inset-left)) 24px; scroll-margin-bottom: 140px; }
.durees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.duree {
  min-height: 72px; display: grid; align-content: space-between; padding: 8px 10px; text-align: left;
  box-shadow: inset 0 0 0 2px var(--noir);
}
.duree b { font: 700 24px/1 var(--f-titre); text-transform: uppercase; }
.duree span { font: 500 16px/1.2 var(--f-texte); }
.duree[aria-checked="true"] { background: var(--noir); color: var(--acide); }
.duree[aria-disabled="true"] { background: var(--hachure); box-shadow: none; cursor: not-allowed; }
.duree[aria-disabled="true"] b { text-decoration: line-through; text-decoration-thickness: 2px; }
.duree[aria-disabled="true"] span { font-size: 12.5px; }
.duree.attend { background: none; box-shadow: inset 0 0 0 2px rgb(14 15 13 / .3); color: var(--olive); cursor: default; }
.duree.attend b { text-decoration: none; }
.duree.attend span { font-size: 16px; }
.durees-note { display: none; }
.g-cat.appel { animation: appel 1.4s var(--courbe); }
@keyframes appel { 0%, 60% { background: var(--noir); color: var(--acide); } }

@media (max-width: 374px) {
  .grille-defil { --c0: 84px; --cw: 68px; }
  .g-cat b { font-size: 34px; }
  .cb-heure { font-size: 100px; }
  .cb-decompte { font-size: 30px; }
}
@media (min-width: 768px) {
  .bandeau { height: 220px; }
  .grille-defil { --c0: 124px; --cw: 76px; --ch: 76px; }
  .g-cat span { max-width: none; }
  .durees { max-width: 640px; }
  .g-cat span { max-width: none; }
}

@media (min-width: 1100px) {
  #sessions .volet-liste { display: flex; flex-direction: column; }
  .v-tete-grille { display: flex; }
  .vt-exemple { font: 700 22px/1 var(--f-titre); text-transform: uppercase; white-space: nowrap; }
  .vt-jour { font: 500 15px/1.2 var(--f-texte); margin-right: auto; color: var(--olive); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .g-nav { display: flex; gap: 6px; flex: none; }
  .g-nav button { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; box-shadow: inset 0 0 0 2px var(--noir);
    font: 500 14px/1 var(--f-texte); }
  .g-nav svg { width: 16px; height: 16px; }
  .g-suiv svg { transform: scaleX(-1); }
  @media (hover: hover) { .g-nav button:hover { background: var(--noir); color: var(--acide); } }
  .bandeau { height: clamp(220px, 30vh, 360px); }
  .g-exemple, .jour-ligne { display: none; }
  .grille-defil { --c0: 136px; --cw: 76px; --ch: clamp(88px, 10vh, 112px); margin-top: 20px; cursor: grab; }
  .case b { font-size: 32px; }
  .case span { font-size: 13px; }
  .grille-defil.tire { cursor: grabbing; scroll-snap-type: none; }
  .g-cat { padding-left: var(--marge) !important; }
  .g-cat b { font-size: 48px; }
  .durees-bloc { padding: 24px var(--marge) 32px; }
  .durees { max-width: none; grid-template-columns: repeat(3, minmax(0, 304px)); }
  .durees-note { display: block; min-height: 1.3em; margin-top: 10px; font: 500 16px/1.3 var(--f-texte); color: var(--olive); }
  .bandeau img { object-position: 50% 42%; }
  .chrono-bloc { padding: 20px var(--marge) 0; }
  .cb-heure { font-size: 168px; margin: 4px 0 -22px -5px; }
  .cb-ligne { flex-wrap: wrap; justify-content: flex-start; row-gap: 0; }
  .cb-dans { display: flex; align-items: baseline; gap: 10px; width: 100%; margin-top: 30px; padding-bottom: 0; text-align: left; font-size: 16px; }
  .cb-decompte { font-size: 40px; }
  .chrono-bloc[data-mode="session"] .cb-detail { font-size: 30px; margin-top: 10px; }
  .jours { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; padding: 28px var(--marge) 8px; }
  .jour { height: 52px; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; padding: 0 12px; }
  .jour b { font-size: 14px; }
  .jour span { font-size: 22px; }
  .autre-date { padding: 8px var(--marge) 24px; }
}

/* Légende : seulement quand la colonne des jours a la place (ordinateur) */
@media (min-width: 1100px) {
  .legende { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: auto var(--marge) 0; padding-top: 28px; }
  .legende div { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; }
  .lg { display: flex; flex-direction: column; justify-content: flex-end; height: 48px; padding: 5px 7px; font: 500 12.5px/1.05 var(--f-texte); box-shadow: inset 0 0 0 2px var(--noir); }
  .lg b { font: 700 20px/.9 var(--f-titre); }
  .lg-peu { background: var(--noir); color: var(--acide); }
  .lg-complet { background: var(--hachure); box-shadow: none; text-decoration: line-through; text-decoration-thickness: 2px; }
  .lg-parti { box-shadow: none; color: var(--olive); }
  .legende dd { font: 500 13.5px/1.25 var(--f-texte); color: var(--olive); }
  .legende-note { display: block; margin: 16px var(--marge) 28px; font: 500 13.5px/1.4 var(--f-texte); color: var(--olive); }
}