/* Le tableau à palettes : cases, tête (titre, jour, horloge), lignes des bateaux, « en mer », dernière ligne. */

/* ---------- Palettes ---------- */
.ft { display: inline-flex; gap: var(--cg); font: 400 var(--fs, 22px)/var(--ch) var(--mono); color: var(--pal-txt); vertical-align: middle; }
.fc { position: relative; flex: none; width: var(--cw); height: var(--ch); border-radius: 2px; }
.fc > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; }
.fc-t, .fc-ft { top: 0; border-radius: 2px 2px 0 0; background: var(--palette-haut); }
.fc-b, .fc-fb { top: 50%; border-radius: 0 0 2px 2px; background: var(--palette); }
.fc b { position: relative; top: var(--by); display: block; height: var(--ch); font-weight: 400; line-height: var(--ch); text-align: center; }
.fc-b b, .fc-fb b { margin-top: calc(var(--ch) / -2); }
.fc-ft { display: none; z-index: 2; transform-origin: 50% 100%; backface-visibility: hidden; }
.fc-fb { display: none; z-index: 2; transform-origin: 50% 0; backface-visibility: hidden; }
.fc::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: var(--tableau); }
.ft--grand { --cw: 26px; --ch: 40px; --cg: 2px; --by: 0px; --fs: 33px; }
.ft--orange { color: var(--orange); }
/* Palettes écrites dans le HTML (contenu par défaut, sans JavaScript) : mêmes cases, dessinées en fond.
   Departure Mono avance de 7/11 d'em : l'espacement des lettres pose un caractère au milieu de chaque case. */
.pal {
  --adv: calc(var(--fs, 22px) * 7 / 11);
  display: inline-block; flex: none; vertical-align: middle; overflow: hidden; white-space: pre;
  width: calc(var(--n) * (var(--cw) + var(--cg)) - var(--cg)); height: var(--ch);
  padding: var(--by) 0 0 calc((var(--cw) - var(--adv)) / 2);
  font: 400 var(--fs, 22px)/var(--ch) var(--mono); letter-spacing: calc(var(--cw) + var(--cg) - var(--adv)); color: var(--pal-txt);
  background:
    linear-gradient(transparent calc(50% - .5px), var(--tableau) 0 calc(50% + .5px), transparent 0),
    repeating-linear-gradient(to right, transparent 0 var(--cw), var(--tableau) 0 calc(var(--cw) + var(--cg))),
    linear-gradient(var(--palette-haut) 50%, var(--palette) 0);
}

/* ---------- Le panneau ---------- */
.tableau {
  display: grid; grid-template-columns: 1fr auto; min-width: 0; scroll-margin-top: 80px;
  grid-template-areas: "titre titre" "onglets onglets" "jour horloge" "ecran ecran" "pied pied";
}
.tableau__titre {
  grid-area: titre; padding: 20px var(--bord) 10px; font: 800 22px/1.2 var(--sans); letter-spacing: -.01em; color: var(--encre);
}
.onglets {
  grid-area: onglets; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between;
  padding: 0 var(--bord); margin-bottom: 12px;
}
.onglets a {
  position: relative; display: flex; align-items: center; min-height: 48px; padding-inline: 8px; margin-inline: -8px; font: 700 16px/1 var(--sans);
  color: var(--granit); text-decoration: none; white-space: nowrap;
}
.onglets a[aria-current] { color: var(--encre); }
.onglets a[aria-current]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px; background: var(--encre); }
.tableau__jour, .tableau__horloge, .tableau__ecran, .tableau__pied { background: var(--tableau); color: var(--pal-txt); }
.tableau__jour { grid-area: jour; display: flex; align-items: center; gap: 2px; padding: 10px 0 6px calc(var(--bord) - 12px); }
.tableau__horloge { grid-area: horloge; display: flex; align-items: center; justify-content: flex-end; padding: 10px var(--bord) 6px 0; }
.jour-fl {
  display: grid; place-items: center; width: 44px; height: 44px; font: 400 22px/1 var(--mono); color: var(--pal-txt);
}
.jour-fl svg { width: 9px; height: 16px; }
.jour-fl--g svg { transform: scaleX(-1); }
.jour-fl:disabled { color: #3a444e; cursor: default; }
.jour-val { min-width: 8.2em; text-align: center; font: 600 16px/1.2 var(--sans); white-space: nowrap; }
@media (hover: hover) { .jour-fl:not(:disabled):hover { color: var(--orange); } }
.tableau__ecran { grid-area: ecran; position: relative; min-height: 0; padding: 0 var(--bord); }
.tableau__pied { grid-area: pied; padding: 14px var(--bord) calc(28px + var(--talon-h) + env(safe-area-inset-bottom)); }

@media (min-width: 860px) {
  .tableau {
    grid-template-columns: 1fr auto auto; border-radius: 6px; background: var(--tableau); padding: 14px 18px 10px;
    grid-template-areas: "titre jour horloge" "onglets onglets onglets" "ecran ecran ecran" "pied pied pied";
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .tableau__titre { padding: 0; color: var(--pal-txt); align-self: center; }
  .onglets { padding: 0; margin: 4px 0 6px; justify-content: start; gap: 28px; }
  .onglets a { color: var(--gris); }
  .onglets a[aria-current] { color: var(--pal-txt); }
  .onglets a[aria-current]::after { background: var(--orange); height: 2px; }
  .tableau__jour { padding: 0 18px 0 0; }
  .tableau__horloge { padding: 0; }
  .tableau__ecran { padding: 0; }
  .tableau__pied { padding: 8px 0 0; }
}
@media (min-width: 1024px) { .onglets { display: none; } }
/* Liste large : valeur d'attente proche de celle que calcule board.js. */
@media (min-width: 860px) { .tableau__ecran { --rang: clamp(calc(var(--ch) + 14px), calc((100svh - 560px) / 7), calc(var(--ch) + 30px)); } }
@media (min-width: 1200px) and (min-height: 620px) {
  /* Vue unique : onglets (44), noms de colonnes (22) et « en mer » (64 au moins) ôtés, le reste va aux lignes. */
  .tableau__ecran { container-type: size; --rang: clamp(calc(var(--ch) + 6px), calc((100cqh - 130px) / var(--L, 7)), calc(var(--ch) + 30px)); }
  .tableau { min-height: 0; overflow: hidden; padding: 12px 18px 6px; }
  .jour-fl { width: 36px; height: 36px; }
}
@media (min-width: 1200px) and (min-height: 820px) { .tableau { padding: 18px 22px 10px; } }

/* ---------- Page Bateaux ---------- */
.bateaux__haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.suite { display: flex; align-items: center; min-height: 44px; font: 600 15px/1 var(--sans); color: var(--pal-txt); text-decoration: underline; text-underline-offset: 4px; }
.colonnes { display: none; }
.lignes { display: grid; }
.br { position: relative; display: block; width: 100%; text-align: left; color: var(--pal-txt); }
.br[aria-disabled="true"] { cursor: default; }

/* Téléphone : lignes de 76 px, l'heure en palettes, le reste en toutes lettres. */
.br--tel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  min-height: 76px; padding: 10px 0 10px 12px; border-top: 1px solid #1a2129;
}
.br--tel .t-mil { display: grid; gap: 2px; font-size: 15px; line-height: 1.3; }
.br--tel .t-de { color: var(--pal-txt); font-weight: 600; }
.br--tel .t-etat { color: var(--gris); }
.br--tel .t-droite { display: grid; justify-items: end; gap: 2px; }
.br--tel .t-pret { font-size: 13px; color: var(--gris); }
.br--tel .t-h { font: 400 22px/1 var(--mono); color: var(--orange); }
@media (max-width: 859px) { .br--grand { display: none; } }
@media (min-width: 860px) { .br--tel { display: none; } }
.br--tel.passe .t-de, .br--tel.passe .t-h { color: var(--gris); }
.replies { display: flex; align-items: center; width: 100%; min-height: 48px; font: 600 15px/1 var(--sans); color: var(--gris); text-decoration: underline; text-underline-offset: 4px; }

.br.prochain::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: var(--ch); margin-top: calc(var(--ch) / -2); background: var(--orange);
}
.br.passe .ft { color: var(--gris); }
.br.choisie .fc > span, .br.choisie .fc { background: var(--orange); color: var(--tableau); }
.br.choisie::before { display: none; }
@media (hover: hover) { .br:not([aria-disabled="true"]):hover { background: #131a22; } }

@media (min-width: 860px) {
  .page--bateaux {
    --cols: calc(5 * var(--cw) + 4 * var(--cg)) calc(10 * var(--cw) + 9 * var(--cg)) calc(6 * var(--cw) + 5 * var(--cg)) calc(7 * var(--cw) + 6 * var(--cg)) calc(6 * var(--cw) + 5 * var(--cg));
    display: flex; flex-direction: column; height: 100%;
  }
  .colonnes, .br--grand {
    display: grid; grid-template-columns: var(--cols); justify-content: space-between; column-gap: 12px;
    padding: 0 8px 0 14px; align-items: center;
  }
  .colonnes { flex: none; font: 600 12.5px/1 var(--sans); color: var(--gris); padding-bottom: 6px; padding-top: 2px; }
  .colonnes span:last-child { text-align: right; }
  .lignes { flex: none; grid-auto-rows: var(--rang, 36px); }
  .br--grand { height: var(--rang, 36px); border-radius: 3px; }
  .br--grand .c-pret { justify-self: end; }
  .br--grand .c-pret :is(.ft, .pal) { color: var(--orange); }
  .br--grand.passe .c-pret .ft { color: var(--gris); }
  .br--grand.choisie .c-pret .ft { color: var(--tableau); }
}

.deja-tel { color: var(--pal-txt); font-size: 15px; }
@media (min-width: 1200px) and (min-height: 620px) { .deja-tel { display: none; } }
@media (min-width: 860px) { .deja-tel { align-self: flex-start; min-height: 40px; } }

/* ---------- En mer ---------- */
.enmer { display: grid; align-content: center; gap: 4px; padding: 16px 0 8px; }
.enmer__nom { font: 600 12.5px/1 var(--sans); color: var(--gris); }
.enmer__ligne { display: grid; grid-template-columns: 92px minmax(0, 1fr) 92px; align-items: center; column-gap: 10px; min-height: 26px; font-size: 13px; }
.enmer__ligne > span:last-child { text-align: right; }
/* La cale, pleine largeur, glisse en translateX : le rail la rogne, le bateau reste dedans (20 px de marge). */
.enmer__rail { position: relative; height: 16px; overflow: hidden; background: linear-gradient(to right, #3a4550 50%, transparent 0) center / 8px 1px repeat-x; }
.enmer__cale { position: absolute; inset: 0 20px; transition: transform 1.2s linear; }
.enmer__bateau { position: absolute; left: 0; top: 2px; width: 32px; height: 12px; margin-left: -16px; fill: var(--pal-txt); }
.enmer__bateau.retour { transform: scaleX(-1); }
.enmer__bateau.quai { fill: var(--gris); }
@media (min-width: 860px) {
  .enmer { flex: 1 1 auto; min-height: 48px; padding: 6px 0 0; }
  .enmer__ligne { grid-template-columns: 120px minmax(0, 1fr) 120px; }
}

/* ---------- Dernière ligne, fin de page ---------- */
.derniere { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.derniere a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.derniere .tel-pal { display: inline-flex; gap: 7px; }
.derniere .pal--sep { color: var(--gris); }
.derniere.serre .pal--sep { display: none; }
.legende { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: 4px; font-size: 13px; color: var(--gris); }
.legende .lien { color: var(--pal-txt); font-size: 13px; }
@media (max-width: 859px) {
  .derniere { display: grid; justify-items: start; gap: 2px; font: 400 22px/1.4 var(--mono); }
  .derniere .pal { width: auto; height: auto; padding: 0; background: none; letter-spacing: 0; font: inherit; overflow: visible; }
  .derniere .pal--sep { display: none; }
  .derniere .tel-pal { display: inline-flex; gap: 14px; }
}
@media (min-width: 1200px) and (min-height: 620px) {
  .legende { margin-top: 0; }
  .legende .lien { min-height: 32px; }
  .derniere a { min-height: 32px; }
}
@media (max-width: 379px) {
  .tableau__horloge .ft--grand { --cw: 18px; --ch: 26px; --cg: 1px; --by: 1px; --fs: 22px; }
  .jour-val { min-width: 7.2em; }
}
/* Téléphone en paysage : titre et onglets sur une ligne, horloge réduite, lignes de 60 px : un bateau dès le premier écran. */
@media (max-width: 859px) and (max-height: 480px) and (orientation: landscape) {
  .tableau { grid-template-columns: 1fr auto; grid-template-areas: "titre onglets" "jour horloge" "ecran ecran" "pied pied"; }
  .tableau__titre { padding: 10px 0 10px var(--bord); align-self: center; }
  .onglets { padding: 0 var(--bord) 0 0; margin: 0; column-gap: 24px; justify-content: end; }
  .tableau__jour { padding-block: 2px; }
  .tableau__horloge { padding-block: 2px; }
  .tableau__horloge :is(.ft--grand, .pal) { --cw: 18px; --ch: 26px; --cg: 1px; --by: 1px; --fs: 22px; }
  .br--tel { min-height: 60px; padding-block: 6px; }
}
@media (max-width: 339px) { .jour-val { min-width: 6.4em; } }