/* Deux pages courtes du même niveau que le mur : les sorties du jour, le garage (fin du site). */

/* Sorties : les feuillets en tête, trois lignes de route, celle qu'on ouvre se déplie. */
.sorties { padding-block: clamp(20px, 3.4svh, 44px) 40px; min-height: var(--utile); }
.sorties .feuillets { max-width: 640px; }
.sorties .feuillet { min-height: 72px; }
.sorties .feuillet__n { font-size: 28px; }
.routes { margin-top: clamp(18px, 3svh, 32px); }
.route { box-shadow: 0 -1px 0 rgb(199 214 245 / .3); }
.route:last-child { box-shadow: 0 -1px 0 rgb(199 214 245 / .3), 0 1px 0 rgb(199 214 245 / .3); }
.route h3 { font: inherit; }
.route__tete {
  width: 100%; min-height: 80px; display: grid; grid-template-columns: 30px minmax(0, auto) minmax(0, 1fr) 24px;
  align-items: center; column-gap: 18px; padding: 8px 4px; text-align: left;
}
.route__tete > svg:first-child { width: 30px; height: 30px; color: var(--pale); }
.route__nom { font: 700 clamp(24px, 2.2vw, 34px)/1.1 var(--meca); }
.route__etat { font-size: 19px; }
.route__etat b { font-weight: 700; }
.route.est-fermee .route__etat b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.route__chevron { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .25s var(--ressort); }
.route__tete[aria-expanded="true"] .route__chevron { transform: rotate(90deg); }
@media (hover: hover) { .route__tete:hover .route__nom { text-decoration: underline; text-underline-offset: 6px; } }

.route__corps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gout); padding: 6px 0 28px; }
.route__gauche { grid-column: 1 / 5; display: grid; align-content: start; gap: 16px; }
.route__chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.route__chiffres dd { font: 700 clamp(24px, 1.9vw, 34px)/1.1 var(--meca); }
.route__chiffres dt { order: 2; font-size: 15px; color: var(--pale); }
.route__chiffres div { display: flex; flex-direction: column-reverse; gap: 2px; }
.route__trajet { font-size: 17px; }
.route__note { font-size: 17px; padding-left: 14px; box-shadow: inset 3px 0 0 var(--pale); }
.route__gauche .plaque-btn { justify-self: start; margin-top: 4px; }
.route__gauche .plaque-btn[aria-disabled="true"] { opacity: 1; background: transparent; color: var(--pale); box-shadow: inset 0 0 0 2px rgb(199 214 245 / .5); }
.route__gauche .plaque-btn[aria-disabled="true"]::before, .route__gauche .plaque-btn[aria-disabled="true"]::after { display: none; }
.route__carte { grid-column: 5 / 10; position: relative; aspect-ratio: var(--ratio, 1.6); border-radius: 3px; overflow: hidden; background: #dbe5f7; }
.route__carte svg { width: 100%; height: 100%; }
.route__photo { grid-column: 10 / 13; position: relative; align-self: stretch; overflow: hidden; border-radius: 3px; }
.route__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.route__photo figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 6px 10px; border-radius: 3px; background: var(--caisson); font-size: 15px; justify-self: start; width: fit-content; }
.route--sans-photo .route__gauche { grid-column: 1 / 6; }
.route--sans-photo .route__carte { grid-column: 6 / 13; }
.regle-feu { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; max-width: 75ch; font-size: 17px; }
.regle-feu svg { width: 24px; height: 24px; flex: none; color: var(--pale); margin-top: 1px; }
.credits { margin-top: 10px; font-size: 14px; color: var(--pale); }

/* Carte : terre tôle claire, mer pâle, l'itinéraire du jour en rouge d'aiguille. */
.carte__mer { fill: #dbe5f7; }
.carte__terre { fill: #f4f6fa; stroke: #b7c6e6; stroke-width: calc(1.2px * var(--k, 1)); }
.carte__merlib { fill: #6f86bd; font: italic 400 calc(22px * var(--k, 1)) var(--meca); }
.carte__boucle { fill: none; stroke: #9fb3df; stroke-width: calc(2.4px * var(--k, 1)); stroke-linecap: round; stroke-linejoin: round; }
.carte__jour { fill: none; stroke: var(--rouge); stroke-width: calc(5px * var(--k, 1)); stroke-linecap: round; stroke-linejoin: round; }
.carte__coupe { fill: none; stroke: var(--encre); stroke-width: calc(4px * var(--k, 1)); stroke-dasharray: calc(6px * var(--k, 1)) calc(5px * var(--k, 1)); opacity: 0; }
.carte__coupe.is-vis { opacity: 1; }
.carte__barriere { opacity: 0; }
.carte__barriere.is-vis { opacity: 1; }
.carte__barriere rect { fill: #fff; stroke: var(--rouge); stroke-width: 2.4; }
.carte__barriere-r { stroke: var(--rouge); stroke-width: 3; }
.carte__lieu-g { display: none; }
.carte__lieu-g.is-vis { display: inline; }
.carte__point { fill: var(--bleu); }
.carte__lieu { fill: var(--encre); font: 600 calc(17px * var(--k, 1)) var(--meca); paint-order: stroke; stroke: #fff; stroke-width: calc(4px * var(--k, 1)); stroke-linejoin: round; }
.carte__lieu--col { fill: var(--bleu); }
.carte__ile { fill: #6f86bd; font: italic 500 calc(15px * var(--k, 1)) var(--meca); }
.carte__garage rect { fill: var(--bleu); }
.carte__r { fill: #fff; }
.carte__garage .carte__lieu { font-size: 17px; stroke-width: 4px; fill: var(--bleu); font-weight: 700; }
.carte__curseur { display: none; }
.carte__ech { fill: none; stroke: var(--encre); stroke-width: calc(2px * var(--k, 1)); }

/* Le garage : le chronomètre du comptoir, la plaque d'horaires en grand, le Frioul, les mentions. */
.garage { padding-top: clamp(24px, 4svh, 56px); }
.garage__haut { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gout); row-gap: 32px; align-items: start; }
.garage__comptoir { grid-column: 1 / 7; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px 36px; align-items: center; }
.garage__phrase { grid-column: 1 / -1; max-width: 26ch; font: 700 clamp(28px, 2.6vw, 42px)/1.12 var(--meca); }
.chrono { width: 220px; height: 244px; }
.etapes li { display: grid; grid-template-columns: 4.2em 1fr; gap: 10px; align-items: baseline; min-height: 44px; padding: 8px 0; font-size: 19px; }
.etapes li + li { box-shadow: 0 -1px 0 rgb(199 214 245 / .28); }
.etapes b { font-weight: 700; color: var(--pale); }
.garage__infos { grid-column: 8 / 13; display: grid; gap: 14px; justify-items: start; }
.horaires--grand { width: 100%; padding: 22px 26px 20px; font-size: 17px; }
.horaires--grand dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.horaires--grand div { display: grid; gap: 2px; }
.horaires--grand dt { font-weight: 700; }
.horaires--grand .heures { font: 700 clamp(28px, 2.4vw, 38px)/1.1 var(--meca); }
.horaires--grand p { margin-top: 12px; font-size: 15px; color: var(--encre); }
.garage__adresse { font: 600 22px/1.3 var(--meca); }
.garage__tel { display: inline-flex; align-items: center; min-height: 48px; font: 700 28px/1 var(--meca); color: var(--blanc); text-decoration: none; }
@media (hover: hover) { .garage__tel:hover { text-decoration: underline; text-underline-offset: 6px; } }
.garage__acces { font-size: 17px; color: var(--pale); }

.frioul { position: relative; margin-top: clamp(36px, 6svh, 72px); aspect-ratio: 21 / 9; background: var(--caisson); }
.frioul img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.frioul figcaption { position: absolute; left: 0; right: 0; bottom: 18px; }
.frioul figcaption .grille { display: block; }
.frioul figcaption .grille > span { display: inline-block; padding: 8px 14px; border-radius: 3px; background: var(--caisson); font: 500 16px/1.3 var(--meca); }
.garage__bas { display: grid; gap: 18px; padding-block: 28px 36px; }
.flotte-sortie { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; font-size: 18px; }
.flotte-sortie span { font-weight: 700; }
.flotte-sortie s { color: var(--pale); text-decoration-thickness: 2px; }
.mentions { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; font-size: 14px; color: var(--pale); }
.mentions button { min-height: 44px; font-size: 14px; color: var(--blanc); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1023px) {
  .route__tete { min-height: 64px; column-gap: 12px; grid-template-columns: 26px minmax(0, 1fr) 20px; }
  .route__tete > svg:first-child { width: 26px; height: 26px; }
  .route__etat { grid-column: 2; grid-row: 2; font-size: 16px; }
  .route__chevron { grid-column: 3; grid-row: 1 / 3; }
  .route__corps { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
  .route__gauche { display: contents; }
  .route__chiffres { order: 1; }
  .route__carte { order: 2; }
  .route__trajet { order: 3; }
  .route__note { order: 4; }
  .route__gauche .plaque-btn { order: 5; width: 100%; min-height: 52px; }
  .route__photo { display: none; }
  .garage__comptoir, .garage__infos { grid-column: 1 / -1; }
  .frioul { aspect-ratio: 4 / 3; }
}
@media (max-width: 599px) {
  .garage__comptoir { grid-template-columns: 1fr; justify-items: start; }
  .chrono { width: 180px; height: 200px; }
  .horaires--grand { padding: 18px 20px; }
  .horaires--grand dl { grid-template-columns: 1fr; }
  .etapes { width: 100%; }
  .frioul figcaption .grille > span { font-size: 15px; }
}
.credits, .mentions p, .garage__acces, .regle-feu span { max-width: 60ch; }
@media (max-width: 599px) { .chrono { justify-self: center; width: 220px; height: 244px; } }