/* Écran 2 : le tableau des cols, ce matin. Téléphone d'abord : lignes de 64 px. */
.cols { padding: 28px 0 56px; scroll-margin-top: var(--barre-h); }
.cols__tete { display: grid; gap: 14px; margin-bottom: 18px; }
.cols__phrase { font: 600 clamp(26px, 3.4vw, 44px)/1.08 var(--titre); color: var(--neige); }
.cols__phrase b { color: var(--jaune); font-weight: 700; }
.tri { display: flex; flex-wrap: wrap; column-gap: 18px; }

.tableau__titres { display: none; }
.tableau { position: relative; border-top: 1px solid var(--filet-clair); }
.col { border-bottom: 1px solid var(--filet-clair); }
.col__ligne {
  width: 100%; min-height: 64px; padding: 8px 0; display: grid; align-items: center;
  grid-template-columns: 40px 1fr auto; column-gap: 12px;
  background: none; border: 0; color: var(--neige); text-align: left;
}
.col__ligne[aria-expanded="true"], .col.est-ici .col__ligne { background: var(--panneau); }
.col__barriere { width: 40px; height: 43px; overflow: visible; }
.col__nom { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; }
.col__nom b { font: 600 30px/1 var(--titre); }
.col__alt { font: 500 14px/1.3 var(--texte); color: var(--lichen); white-space: nowrap; }
.col__route, .col__mois { display: none; }
.col__etat { font: 700 15px/1.2 var(--texte); text-align: right; padding-right: 8px; }
.col.is-ferme .col__etat { color: var(--rouge); }

/* Barrière : un poteau, un bras rayé qui pivote. */
.bras { transform-box: fill-box; transform-origin: 3px 50%; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.is-ouvert .bras { transform: rotate(-78deg); }
.tableau.est-arme .is-ferme .bras { transform: rotate(-60deg); transition: none; }
.tableau.est-joue .is-ferme .bras { animation: tombe .9s cubic-bezier(.3, 0, .6, 1) both; animation-delay: var(--d, 0s); }
@keyframes tombe {
  0% { transform: rotate(-60deg); } 55% { transform: rotate(0); } 70% { transform: rotate(-14deg); }
  84% { transform: rotate(0); } 92% { transform: rotate(-4deg); } 100% { transform: rotate(0); }
}

.col__volet { padding: 4px 0 22px 52px; display: grid; gap: 14px; background: var(--panneau); padding-right: 12px; }
.col__chiffres { font: 600 22px/1.2 var(--titre); color: var(--jaune); }
.col__chiffres span { color: var(--lichen); font: 500 14px/1 var(--texte); margin-left: 4px; }
.col__note { max-width: 40ch; }
.col__profil { width: 100%; max-width: 360px; height: 64px; }
.col__profil .aire { fill: rgb(157 176 169 / .16); }
.col__profil .ligne { fill: none; stroke: var(--lichen); stroke-width: 1.6; }
.col__profil .bout { fill: var(--jaune); }
.col__profil .depart { fill: var(--rouge); }

.cols__source { margin-top: 18px; max-width: 30em; font-size: 14px; color: var(--lichen); }

@media (min-width: 1024px) {
  .cols { min-height: 100svh; padding: 40px 0 64px; }
  .cols__tete { grid-template-columns: 1fr auto; align-items: end; margin-bottom: 22px; }
  .tableau__titres, .col__ligne {
    display: grid; align-items: center; column-gap: clamp(16px, 2vw, 36px);
    grid-template-columns: 64px minmax(180px, 1.3fr) minmax(110px, .6fr) minmax(80px, .45fr) minmax(260px, 2fr) minmax(120px, .7fr);
  }
  .tableau__titres { padding: 0 0 8px; font: 500 14px/1.2 var(--texte); color: var(--lichen); }
  .tableau__titres .mois { display: grid; grid-template-columns: repeat(12, 1fr); text-align: center; }
  .col__ligne { min-height: 66px; padding: 6px 0; }
  .col__barriere { width: 50px; height: 54px; margin-left: 4px; }
  .col__nom b { font-size: 40px; }
  .col__nom { display: block; }
  .col__alt { font: 600 22px/1 var(--titre); color: var(--neige); }
  .col__alt-mob { display: none; }
  .col__route { display: block; font: 500 14px/1 var(--texte); color: var(--lichen); }
  .col__mois { display: block; height: 18px; }
  .col__etat { text-align: left; font-size: 16px; }
  .col__volet { grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.4fr) auto; align-items: center; column-gap: 36px; padding: 6px 24px 24px calc(64px + clamp(16px, 2vw, 36px)); }
  .col__profil { max-width: none; height: 72px; }
}
@media (min-width: 1024px) and (hover: hover) {
  .col__ligne:hover { background: var(--panneau); }
}
.col__mois { width: 100%; }
.col__mois rect.piste { fill: rgb(157 176 169 / .14); }
.col__mois rect.ouvre { fill: var(--lichen); }
.col__mois rect.auj { fill: var(--jaune); }
@media (max-width: 1023px) { .col__alt-ord { display: none; } }