/* « La journée » : la vue prend de l'altitude, la carte du cap paraît autour du bateau.
   La carte est une marqueterie : mer turquoise, terre en acajou profond, route en laiton. */
.pile { z-index: 1; }
.altitude { position: absolute; inset: 0; }
.carte { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; background: var(--mer); z-index: 0; transform-origin: 50% 40%; }
.c-band { fill: none; stroke: rgb(255 255 255 / .16); stroke-width: 49px; stroke-linejoin: round; }
.c-hatch { stroke: rgb(255 255 255 / .55); stroke-width: calc(1.1px * var(--s)); }
.c-zone { opacity: .5; }
.c-land { fill: var(--acajou-p); stroke: var(--laiton); stroke-width: calc(1px * var(--s)); }
.c-label { font-family: var(--t); font-size: calc(14px * var(--s) * var(--k, 1)); font-weight: 500; fill: var(--acajou-p); }
.c-label.is-land { fill: var(--blanc); }
.is-small .c-label.is-minor { display: none; }
.c-route-casing { fill: none; stroke: var(--acajou-p); stroke-width: calc(6px * var(--s)); stroke-linecap: round; stroke-linejoin: round; }
.c-route-out { fill: none; stroke: var(--laiton); stroke-width: calc(3px * var(--s)); stroke-linecap: round; stroke-linejoin: round; }
.c-route-back { fill: none; stroke: var(--acajou-p); stroke-width: calc(1.6px * var(--s)); stroke-dasharray: calc(4px * var(--s)) calc(6px * var(--s)); }
.c-boat, .c-stops { display: none; }

/* Les six escales : des cibles de 44 px, nommées, posées sur la carte. */
.escales { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.escale {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 2px; min-height: 44px; padding-right: 4px;
  pointer-events: auto; transform: translate(calc(var(--x) * 1px - 22px), calc(var(--y) * 1px - 22px));
}
.escale-p { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.escale-p::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--acajou); box-shadow: 0 0 0 2px var(--blanc);
}
.escale-n {
  font: 500 15px/1 var(--t); padding: 7px 9px; border-radius: 2px; background: var(--acajou); color: var(--blanc); white-space: nowrap;
}
.escale[aria-pressed="true"] .escale-p::before { background: var(--blanc); box-shadow: 0 0 0 2px var(--acajou-p), 0 0 0 4px var(--laiton); }
.escale[aria-pressed="true"] .escale-n { background: var(--blanc); color: var(--acajou-p); }
.escale:disabled { cursor: not-allowed; }
.escale:disabled .escale-n { background: rgb(74 28 13 / .55); color: var(--b80); }
.escale:disabled .escale-p::before { background: var(--acajou-p); opacity: .6; }
.escale.is-g { flex-direction: row-reverse; padding: 0 0 0 4px; transform: translate(calc(var(--x) * 1px - 100% + 22px), calc(var(--y) * 1px - 22px)); }
.port-n { position: absolute; left: 50%; top: calc(var(--hh, 30) * 1px + 10px); transform: translateX(-50%); font: 500 15px/1 var(--t); color: var(--blanc); white-space: nowrap; padding: 6px 8px; border-radius: 2px; background: var(--acajou-p); }
.port-pt { position: absolute; z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--blanc); box-shadow: 0 0 0 3px var(--acajou-p); transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)); }

/* Plaques de la journée : la feuille de route en bas à gauche, la barre en bas à droite. */
.alt-bas { position: absolute; z-index: 4; left: var(--bord-g); right: var(--bord-d); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; }
.route-p, .jour-p { background: var(--acajou); }
.route-p { padding: 4px 14px 6px; max-height: 21svh; overflow-y: auto; overscroll-behavior: contain; }
.route-p .t-tiroir { display: none; }
.regle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.emb { display: flex; align-items: center; gap: 2px; font-size: 16px; }
.emb > span, .dej > span { color: var(--b80); font-size: 15px; margin-right: 6px; }
.emb button { width: 44px; height: 44px; font: 300 24px/1 var(--t); }
.emb output { min-width: 4.4em; text-align: center; font-size: 17px; }
.dej { display: flex; align-items: center; gap: 0 12px; }
.dej button { min-height: 44px; font: italic 400 22px/1 var(--d); color: rgb(255 255 255 / .6); }
.dej button[aria-pressed="true"] { color: var(--blanc); }
.feuille-route { margin-top: 6px; }
.fr-l { display: grid; grid-template-columns: 4.6em 1fr; gap: 0 10px; padding: 7px 0; border-top: 1px solid rgb(255 255 255 / .12); }
.fr-l time { font-size: 16px; }
.fr-l b { font-weight: 600; font-size: 16px; }
.fr-l span { display: block; font-size: 15px; color: var(--b70); line-height: 1.35; }
.fr-l.is-port b { font-weight: 500; }
.fr-vide { padding: 10px 0; font-size: 16px; color: var(--b80); }
.note { margin-top: 6px; font-size: 15px; color: var(--b80); }
.note:empty { display: none; }

.jour-p { padding: 10px 14px 12px; }
.barre { position: relative; height: 34px; margin: 10px 0 6px; }
.barre::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: rgb(255 255 255 / .25); }
.b-seg { position: absolute; top: 16px; height: 2px; background: var(--blanc); }
.b-esc { position: absolute; top: 10px; height: 14px; background: var(--blanc); border-radius: 1px; box-shadow: inset 0 0 0 1px var(--acajou); }
.b-mk { position: absolute; top: 6px; width: 2px; height: 22px; background: var(--blanc); }
.b-mk.is-soleil { background: var(--acajou-p); width: 3px; }
.b-t { position: absolute; top: 26px; font-size: 12px; color: var(--b80); transform: translateX(-50%); white-space: nowrap; }
.b-t.is-g { transform: none; }
.b-t.is-d { transform: translateX(-100%); }
.b-t.is-r { top: -8px; transform: none; }
.b-t.is-h { top: -8px; transform: translateX(calc(-100% - 6px)); }
.barre { margin-bottom: 16px; }
.soleil { display: none; font-size: 15px; color: var(--b80); }
.resultat { margin-top: 2px; font-size: 16px; font-weight: 500; }
.actions { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 10px; }
.actions .action { height: 48px; padding: 0 18px; border: 0; }
.actions .action:disabled { opacity: .5; cursor: not-allowed; }
.retour { min-height: 44px; font: 500 16px/1 var(--t); text-decoration: underline 1px rgb(255 255 255 / .5); text-underline-offset: 5px; }

@media (min-width: 1024px) {
  .alt-bas { display: contents; }
  .route-p, .jour-p { position: absolute; z-index: 4; bottom: max(var(--bord), env(safe-area-inset-bottom)); }
  .route-p { left: var(--bord-g); width: min(450px, 34vw); max-height: calc(100% - var(--ph) - 3 * var(--bord) - 12px); padding: 20px 24px 14px; }
  .route-p .t-tiroir { display: block; margin-bottom: 8px; }
  .jour-p { right: var(--bord-d); width: min(440px, 32vw); padding: 18px 24px 18px; }
  .escale-n { font-size: 16px; }
  .soleil { display: block; }
  .resultat { font-size: 17px; margin-top: 4px; }
  .actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
  .jour-p .barre { margin-bottom: 18px; }
}