/* Le panneau blanc : une tête fixe (le titre de l'état), un corps qui défile seul, un pied fixe (l'action de l'état). */
.panneau { position: relative; z-index: 5; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: var(--terre);
  border-left: 1px solid var(--filet); overflow: hidden; overflow: clip; outline: none; }
.panneau-jour { flex: none; padding: 18px 28px 6px; font: 500 14px/1.4 var(--texte); color: var(--gris); }
.etat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html.js .etat:not(.courant) { display: none; }
.etat-tete { flex: none; padding: 4px 28px 12px; }
.etat-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 28px 28px; scrollbar-width: thin; }
.etat-pied { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 16px 28px 22px; background: var(--terre);
  box-shadow: 0 -1px 0 var(--filet); }
.tete-resa { display: none; }
.nom-court { display: none; }

/* Vignettes : 4:3, recadrées pour leur emplacement. */
.vignette { position: relative; width: 100%; }
.vignette img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 6px; background: var(--mer); }
.vignette figcaption { margin-top: 6px; font: 500 13px/1.4 var(--texte); color: var(--gris); }

/* État 0 : les cinq balades */
.liste-balades { display: flex; flex-direction: column; gap: 2px; }
.liste-balades a { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; min-height: 64px; padding: 6px 12px 6px 8px;
  margin: 0 -12px 0 -8px; border-radius: 8px; text-decoration: none; transition: background-color .2s; }
.liste-balades a.survol, .liste-balades a:focus-visible { background: var(--mer); }
.liste-balades .lb-forme svg { display: block; width: 56px; height: 40px; fill: none; stroke: var(--encre); stroke-linecap: round; stroke-linejoin: round; }
.liste-balades b { font: 700 18px/1.2 var(--texte); }
.lb-km { font: 700 16px/1.2 var(--texte); text-align: right; white-space: nowrap; }
.lb-km small { display: block; font: 500 13px/1.3 var(--texte); color: var(--gris); }

.legende { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 28px; padding-top: 18px; box-shadow: 0 -1px 0 var(--filet);
  font: 500 14px/1.3 var(--texte); color: var(--gris); }
.legende li { display: flex; align-items: center; gap: 10px; }
.legende i { flex: none; width: 30px; height: 14px; border-radius: 3px; }
.lg-balade { background: linear-gradient(var(--rose), var(--rose)) center / 100% 3px no-repeat; }
.lg-piste { background: linear-gradient(var(--piste), var(--piste)) center / 100% 2px no-repeat; }
.lg-marais { background: var(--marais); box-shadow: inset 0 0 0 1px rgb(15 42 58 / .08); }
.lg-bois { background: var(--bois); }
.nb { white-space: nowrap; }

/* État 1 : une balade */
.balade-km { display: none; font: 600 15px/1.3 var(--texte); color: var(--gris); }
.chiffres { margin-bottom: 16px; font-size: 16.5px; line-height: 1.5; color: var(--gris); }
.chiffres b { color: var(--encre); font-weight: 800; }
.ligne-velo { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 18px; font-size: 16.5px; }
.ligne-velo span { flex-basis: 100%; font: 600 13px/1.6 var(--texte); color: var(--gris); }
.ligne-velo b { font: 700 18px/1.3 var(--texte); }
.ligne-velo .prix { margin-left: auto; font: 800 22px/1.2 var(--texte); }
.conseil { margin-top: 14px; font: 500 17px/1.5 var(--texte); max-width: 40ch; }
.balade-fleches { display: flex; justify-content: space-between; margin-top: 18px; }
.balade-fleches a { display: flex; align-items: center; min-height: 44px; font: 600 16px/1 var(--texte); text-decoration: none; }
@media (hover: hover) { .balade-fleches a:hover { text-decoration: underline; text-underline-offset: 4px; } }

/* État 2 : qui vient */
.rythme { font: 500 17px/1.45 var(--texte); max-width: 36ch; }
.rythme b { font-weight: 800; }
.rythme small { font-size: 13px; color: var(--gris); }
.vignette-qui { margin-bottom: 14px; }
.compteurs { display: grid; gap: 4px; }
.compteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font: 600 16.5px/1.2 var(--texte); }
.pas { display: flex; align-items: center; flex: none; }
.pas button { width: 44px; height: 44px; padding: 0; border: 2px solid var(--encre); border-radius: 6px; background: var(--terre); font: 500 22px/1 var(--texte); }
.pas button:disabled { border-color: rgb(15 42 58 / .2); color: rgb(15 42 58 / .3); cursor: default; }
.pas output { width: 34px; text-align: center; font: 800 19px/1 var(--texte); }
@media (hover: hover) { .pas button:not(:disabled):hover { background: var(--mer); } }
.cases { display: flex; flex-wrap: wrap; column-gap: 18px; margin-top: 14px; }
.cases legend { width: 100%; margin-bottom: 2px; font: 600 13px/1.6 var(--texte); color: var(--gris); }
.case { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; font: 600 16.5px/1.2 var(--texte); cursor: pointer; }
.case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.case i, .boite { flex: none; width: 22px; height: 22px; border: 2px solid var(--encre); border-radius: 4px; background: var(--terre); }
.case input:checked + i, .rangee[aria-pressed="true"] .boite { background: var(--encre)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5 11.5 9 15.2 17 6.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.case input:focus-visible + i { outline: 2px solid var(--encre); outline-offset: 3px; }
.case.ferme { color: var(--gris); text-decoration: line-through; cursor: not-allowed; }
.case.ferme i { border-color: rgb(15 42 58 / .25); }
.alerte { margin-top: 12px; padding: 10px 12px; background: var(--mer); border-radius: 6px; font: 600 15.5px/1.4 var(--texte); }
.durees-famille { display: flex; flex-wrap: wrap; column-gap: 16px; }
.total-famille { font: 500 16.5px/1.3 var(--texte); }
.total-famille b { font: 800 22px/1 var(--texte); }
.bouton-rose.inactif { background: rgb(15 42 58 / .18); color: var(--gris); pointer-events: none; }

/* État 3 : livraison */
.verdict { font: 500 17px/1.45 var(--texte); max-width: 36ch; }
.verdict b { font-weight: 800; }
.villages { display: flex; flex-direction: column; }
.villages a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; font: 600 16.5px/1.2 var(--texte);
  text-decoration: none; }
.villages small { flex: none; font: 600 13px/1 var(--texte); color: var(--gris); }
.villages a[aria-current] span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
@media (hover: hover) { .villages a:hover span { text-decoration: underline; text-underline-offset: 5px; } }
.vignettes-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }

/* État 5 : le magasin */
.jour-magasin { margin-top: 16px; font: 600 17px/1.4 var(--texte); }
.horaires { display: grid; gap: 8px; margin-top: 12px; }
.horaires dt { font: 600 13px/1.4 var(--texte); color: var(--gris); }
.horaires dd { font-size: 16.5px; line-height: 1.4; }
.adresse { margin-top: 14px; font-size: 16.5px; line-height: 1.6; }
.adresse a { font-weight: 700; text-underline-offset: 3px; }
.comptoir { margin-top: 22px; font: 400 24px/1.5 var(--main); font-feature-settings: "calt"; }
.volets details { border-bottom: 1px solid var(--filet); }
.volets summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font: 700 16.5px/1.3 var(--texte);
  cursor: pointer; list-style: none; }
.volets summary::-webkit-details-marker { display: none; }
.volets summary::after { content: ""; flex: none; width: 14px; height: 14px; background:
  linear-gradient(var(--encre), var(--encre)) center / 14px 2.4px no-repeat, linear-gradient(var(--encre), var(--encre)) center / 2.4px 14px no-repeat; transition: transform .25s var(--courbe); }
.volets details[open] summary::after { transform: rotate(45deg); }
.volets details p { padding: 0 0 14px; font-size: 16px; line-height: 1.5; max-width: 42ch; }
.mentions { margin-top: 26px; font: 400 13px/1.5 var(--texte); color: var(--gris); scroll-margin-top: 12px; }
.mentions h3 { font: 700 13px/1.5 var(--texte); color: var(--encre); }
.mentions p + p { margin-top: 6px; }