/* La grille du rouleau : kilomètres · tulipe · note. Deux gabarits de case :
   le road-book (filets encre de 2 px, l'objet réel) et la case grise sans filet. */
.case {
  display: grid; grid-template-columns: var(--c-km) var(--c-tu) minmax(0, 1fr);
  margin: 0 var(--pad); scroll-margin-top: calc(var(--bande) + var(--barre-h) + 16px);
}
.c-km { grid-column: 1; } .c-tu { grid-column: 2; } .c-note { grid-column: 3; } .c-large { grid-column: 2 / -1; }
@media (min-width: 900px) { .case { scroll-margin-top: 80px; } }

/* Road-book : filets entre colonnes et entre cases. */
.case--rb { border: 2px solid var(--encre); }
.case--rb > * { padding: 12px 10px; }
.case--rb > :not(.c-km) { border-left: 2px solid var(--encre); }
.case--rb > .r2 { border-top: 2px solid var(--encre); }
.rb-liste > .case--rb + .case--rb { border-top: 0; }

/* Case grise : fond de case, 16 px d'air, aucun filet. */
.case--gris { background: var(--case); margin-top: 16px; margin-bottom: 16px; }
.case--gris > * { padding: 16px 12px; }

.km { font-weight: 700; line-height: 1; }
.km b { font-size: 26px; }
.km .dec { font-size: 16px; }
.km .part, .km .unite { display: block; margin-top: 8px; font-weight: 400; font-size: 14px; line-height: 1.2; color: var(--gris); }
.km .part { font-style: italic; }
.km--rouge b { color: var(--rouge); }
.mot { font-weight: 700; font-size: 17px; }
@media (min-width: 600px) {
  .km b { font-size: 40px; }
  .km .dec { font-size: 22px; }
  .km .part, .km .unite { font-size: 15px; }
  .case--rb > * { padding: 14px 16px; }
  .case--gris > * { padding: 18px 16px; }
}

/* Case zéro : le titre sur les colonnes tulipe et note réunies. */
.case--zero { margin-top: 16px; }
@media (min-width: 900px) { .case--zero { margin-top: 24px; } }
.case--zero h1 { font-weight: 700; font-size: 33px; line-height: 1.05; letter-spacing: -.01em; }
.case--zero h1 br.o { display: none; }
.km-note { font-style: italic; font-size: 14px; color: var(--gris); line-height: 1.3; }
.zero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; }
@media (min-width: 600px) {
  .case--zero h1 { font-size: clamp(44px, 4.4vw, 64px); }
  .case--zero h1 br.o { display: inline; }
  .km-note { font-size: 15px; }
}

/* Tulipes : trait de 3 px, flèches pleines, sur toute la largeur de leur colonne. */
.c-tu .tulip { width: 100%; height: auto; aspect-ratio: 1; }
.tulip *, .bouton-menu svg *, .menu__nav svg * { vector-effect: non-scaling-stroke; }
.tu-path { fill: none; stroke: var(--encre); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }
.tu-branch { fill: none; stroke: var(--encre); stroke-width: 1.5px; stroke-linecap: round; }
.tu-ring { fill: none; stroke: var(--encre); stroke-width: 3px; }
.tu-head, .tu-dot, .tu-start, .tu-flag { fill: var(--encre); stroke: none; }
.bouton-menu .tu-head, .bouton-menu .tu-dot { fill: currentColor; }
.bouton-menu .tu-path { stroke-width: 2.5px; }
.rb-case .c-tu { padding: 6px 4px; }
@media (min-width: 600px) { .rb-case .c-tu { padding: 10px 8px; } }

/* Les quatre road-books : vrais boutons radio, mini-profil, points de conduite. */
.choix__t { padding-top: 14px; }
.case--rb > .choix__lignes { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 0; border-left: 0; }
.choix__ligne { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; min-height: 56px; border-top: 2px solid var(--encre); cursor: pointer; }
.choix__ligne > * { display: flex; align-items: center; padding: 8px 10px; }
.choix__ligne > :not(.c-km) { border-left: 2px solid var(--encre); }
.choix__ligne .c-km { position: relative; justify-content: center; }
.choix__ligne input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.coche { width: 22px; height: 22px; border: 2px solid var(--encre); background: #fff; display: grid; place-items: center; }
input:checked + .coche::after { content: ""; width: 12px; height: 12px; background: var(--rouge); }
.choix__ligne input:focus-visible + .coche { outline: 2px solid var(--encre); outline-offset: 3px; }
.choix__ligne:has(input:checked) .c-note b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.spark { width: 100%; height: 20px; }
.spark-aire { fill: var(--case); stroke: none; }
.spark { overflow: visible; }
.spark path.spark { fill: none; stroke: var(--encre); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.choix__ligne .c-note { flex-wrap: wrap; gap: 0 8px; }
.choix__ligne .c-note b { flex: 1 0 100%; }
.points { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--gris); }
.chiffres { flex: none; white-space: nowrap; }

/* Cases du road-book : la case lue a son km en rouge, les cases passées prennent le gris. */
.rb-titre { font-weight: 700; }
.rb-txt { margin-top: 4px; }
.alerte { margin-left: 8px; color: var(--rouge); font-weight: 700; }
.rb-case.est-lue .km b, .rb-case.est-lue .km .dec { color: var(--rouge); }
.rb-case.est-passee { background: var(--case); }
.jauge { margin: 6px 0 2px; font-weight: 700; white-space: pre; }
.case--rb > .carte-place { grid-column: 1 / -1; border-left: 0; border-top: 2px solid var(--encre); padding: 0 10px 8px; }
.carte-place .volet { margin-top: 0; }
.rb-fin .c-note { padding-top: 4px; padding-bottom: 4px; }

/* Volets (carte, grille des prix) : un vrai bouton souligné, ouverture sèche. */
.volet { margin-top: 10px; }
.volet summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; cursor: pointer; list-style: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.volet summary::-webkit-details-marker { display: none; }
.volet summary::after { content: "[+]"; text-decoration: none; display: inline-block; }
.volet[open] summary::after { content: "[−]"; }
.carte { width: 100%; height: auto; aspect-ratio: 1 / 1.05; margin: 6px 0 8px; background: #fff; border: 2px solid var(--encre); }
.c-terre { fill: var(--case); stroke: var(--gris); stroke-width: .6px; vector-effect: non-scaling-stroke; }
.c-route { fill: none; stroke: #9AA3A9; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.c-route--ctx { stroke-dasharray: 4 4; }
.c-actif { fill: none; stroke: var(--encre); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.c-fait, .c-marq { display: none; }
.c-lieu rect, .c-atelier rect { fill: var(--encre); }
.c-atelier rect { fill: var(--rouge); }
.c-col path { fill: var(--encre); }
.c-pompe .fond { fill: #fff; } .c-pompe path { fill: none; stroke: var(--encre); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.c-txt { fill: var(--encre); font-family: "Courier Prime", monospace; font-weight: 700; }
.c-txt--mer { fill: var(--gris); font-style: italic; font-weight: 400; }