/* Vue Machines : trois lignes à code géant, filtre par places, fiche noire poussée depuis la droite. */
#machines .v-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; }
.filtre { display: flex; gap: 4px; }
.filtre button { white-space: nowrap; min-height: 44px; min-width: 44px; padding: 0 12px; box-shadow: inset 0 0 0 2px var(--noir); font: 500 15px/1 var(--f-texte); }
.filtre button[aria-pressed="true"] { background: var(--noir); color: var(--acide); }

.lignes { border-top: 2px solid var(--noir); }
.lignes li { border-bottom: 2px solid var(--noir); }
.ligne {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "code nom prix" "code faits prix";
  align-items: center; column-gap: 14px; min-height: 104px; position: relative; padding: 12px max(var(--marge), env(safe-area-inset-right)) 12px max(var(--marge), env(safe-area-inset-left));
  text-decoration: none;
}
.l-code { grid-area: code; font: 900 72px/.8 var(--f-titre); width: 1.1em; }
.l-nom { grid-area: nom; align-self: end; font: 700 17px/1.2 var(--f-texte); }
.l-faits { grid-area: faits; align-self: start; font: 500 16px/1.3 var(--f-texte); color: var(--olive); }
.l-prix { grid-area: prix; text-align: right; font: 500 13px/1 var(--f-texte); }
.l-prix b { display: block; font: 700 26px/1 var(--f-titre); margin-top: 2px; }
.l-fleche { position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; transform: scaleX(-1); opacity: .55; }
.ligne { padding-right: max(30px, env(safe-area-inset-right)) !important; }
.ligne:active { background: var(--acide-enfonce); }
.ligne[aria-current] { background: var(--noir); color: var(--acide); }
.ligne[aria-current] .l-faits { color: var(--gris); }
@media (hover: hover) { .ligne:not([aria-current]):hover { background: var(--acide-enfonce); } }

/* Fiche : couche pleine sur téléphone et tablette, entre la barre et les onglets */
.fiches {
  display: none; position: fixed; z-index: 45; left: var(--rail); right: 0;
  top: calc(var(--demobar-offset, 0px) + var(--barre-h)); bottom: calc(var(--onglets-h) + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; container-type: inline-size;
  background: var(--noir); color: var(--blanc);
  clip-path: polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
}
html[data-fiche] .fiches { display: block; }
html[data-fiche] { overflow: hidden; }
.fiches.revient { transition: transform .24s var(--courbe); }
.lignes { transition: none; }
.f-tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; height: 52px; padding: 0 8px 0 calc(var(--marge) - 4px); background: var(--noir); transition: box-shadow .2s; }
.fiches[data-defile] .f-tete { box-shadow: inset 0 -1px 0 var(--filet); }
.f-retour:focus-visible { outline-offset: 0; }
.f-gauche, .f-droite { display: contents; }
.f-retour { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; padding-right: 12px; color: var(--acide); font: 500 16px/1 var(--f-texte); text-decoration: none; }
.f-retour svg { width: 22px; height: 22px; }
.f-corps { display: grid; padding-bottom: 32px; }
.f-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--carbone); }
.f-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--fy, 50%); }
.f-ident { padding: 0 var(--marge); margin-top: -.16em; position: relative; font-size: 46vw; }
.f-code { font: 900 1em/.78 var(--f-titre); color: var(--acide); margin-left: -.03em; }
.f-nom { font: 700 32px/1 var(--f-titre); text-transform: uppercase; margin-top: 10px; }
.f-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 24px var(--marge) 0; }
.f-chiffres dt { font: 500 15px/1.2 var(--f-texte); color: var(--gris); }
.f-chiffres dd { font: 700 40px/1 var(--f-titre); color: var(--blanc); margin-top: 4px; }
.f-chiffres small { font: 500 16px/1 var(--f-texte); margin-left: 4px; color: var(--gris); }
.f-sieges { display: flex; align-items: center; gap: 16px; padding: 24px var(--marge) 0; color: var(--blanc); }
.f-sieges svg { width: 96px; height: 96px; flex: none; }
.f-sieges text { font: 700 13px var(--f-titre); fill: var(--noir); }
.f-sieges figcaption { font: 500 15px/1.3 var(--f-texte); color: var(--gris); }
.f-tarifs { padding: 26px var(--marge) 0; }
.f-prix { width: 100%; border-collapse: collapse; }
.f-prix caption { caption-side: top; text-align: left; font: 500 15px/1.2 var(--f-texte); color: var(--gris); padding-bottom: 6px; }
.f-prix th, .f-prix td { padding: 10px 0; border-bottom: 1px solid var(--filet); }
.f-prix th { text-align: left; font: 700 24px/1 var(--f-titre); text-transform: uppercase; }
.f-prix td { text-align: right; font: 700 30px/1 var(--f-titre); color: var(--acide); }
.f-regles { display: grid; gap: 14px; padding: 24px var(--marge) 0; }
.f-regles dt { font: 700 15px/1.2 var(--f-texte); color: var(--acide); }
.f-regles dd { font: 400 16.5px/1.45 var(--f-texte); margin-top: 2px; }
.f-action { margin: 28px var(--marge) 0; min-height: 56px; }

@media (max-width: 1099px) {
  .ligne { min-height: max(104px, calc((100svh - var(--barre-h) - var(--onglets-h) - 200px) / 3)); }
  .l-code { font-size: clamp(72px, 25vw, 124px); }
}
@media (min-width: 768px) {
  .fiches { top: var(--demobar-offset, 0px); bottom: 0; }
  .f-ident { font-size: 30vw; }
}

@media (min-width: 1100px) {
  #machines .volet-liste { display: flex; flex-direction: column; }
  #machines .v-tete { flex-wrap: nowrap; padding-bottom: 0; }
  .lignes { flex: 1; display: flex; flex-direction: column; margin-top: 12px; }
  .lignes li { flex: 1 1 0; display: flex; }
  .ligne { flex: 1; grid-template-areas: "code prix" "nom nom" "faits faits"; grid-template-columns: 1fr auto; align-content: center; row-gap: 6px;
    padding: 20px var(--marge); }
  .l-code { font-size: clamp(120px, 15vh, 180px); width: auto; }
  .l-fleche { display: none; }
  .ligne { padding-right: var(--marge) !important; }
  .l-nom { font-size: 19px; margin-top: 8px; }
  .volet-fiche { background: var(--noir); color: var(--blanc); }
  .fiches { display: block; position: static; clip-path: none; overflow: visible; touch-action: auto; background: none; }
  html[data-fiche] { overflow: hidden; }
  .f-tete { display: none; }
  .f-corps { padding: 32px var(--marge) 48px; column-gap: 48px; }
  .f-photo { order: -1; }
  .f-ident { font-size: 400px; margin-top: -.2em; padding: 0; }
  .f-nom { font-size: 40px; }
  .f-chiffres, .f-sieges, .f-tarifs, .f-regles { padding-left: 0; padding-right: 0; }
  .f-chiffres { grid-template-columns: repeat(4, auto); justify-content: start; column-gap: 40px; }
  .f-chiffres dd { font-size: 56px; }
  .f-action { margin-left: 0; margin-right: 0; justify-self: start; min-width: 280px; }
}
/* Volet large : la photo en bandeau sur toute la largeur, le code qui la chevauche, puis deux colonnes ;
   « Choisir une session » reste collé en bas du volet tant que la colonne défile */
@container (min-width: 880px) {
  .f-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .f-photo { grid-column: 1 / -1; aspect-ratio: 2 / 1; max-height: 40vh; width: 100%; }
  .f-gauche { display: block; grid-column: 1; }
  .f-droite { display: flex; flex-direction: column; grid-column: 2; align-self: stretch; padding-top: 28px; }
  .f-ident { font-size: min(400px, 25cqw); margin-top: -.2em; }
  .f-chiffres { grid-template-columns: repeat(4, auto); column-gap: 32px; }
  .f-chiffres dd { font-size: 48px; }
  .f-tarifs { padding-top: 0; }
  .f-regles { gap: 12px; }
  .f-action { position: sticky; bottom: 24px; align-self: flex-start; z-index: 2; }
}