/* Le volet de la carte : 560 px à droite sur ordinateur, feuille basse de 85 dvh sur téléphone. */
/* ---------- volets : à droite sur ordinateur, feuille basse sur téléphone ---------- */
.volet {
  position: fixed; margin: 0; border: 0; padding: 0 0 max(24px, env(safe-area-inset-bottom)); max-width: none; max-height: none;
  background: var(--bleu); overflow-y: auto; overscroll-behavior: contain;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), display .4s, overlay .4s; transition-behavior: allow-discrete;
}
.volet { inset: 0 0 0 auto; width: min(560px, 100%); height: 100dvh; transform: translateX(100%); }
.volet[open] { transform: none; }
@starting-style { .volet[open] { transform: translateX(100%); } }
.volet__tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 8px 12px 8px 24px; background: var(--bleu); }
.volet__tete h2 { font-size: 32px; font-weight: 400; }
.volet__tete h2:focus { outline: none; }
.volet > :not(.volet__tete) { margin-inline: 24px; }
@media (max-width: 767px) {
  .volet { inset: auto 0 0 0; width: 100%; height: auto; max-height: 85dvh; transform: translateY(100%); }
  @starting-style { .volet[open] { transform: translateY(100%); } }
  .volet__tete { padding-left: 16px; }
  .volet > :not(.volet__tete) { margin-inline: 16px; }
}

/* ---------- la carte, repeinte en nuit ---------- */
.carte { position: relative; aspect-ratio: 5 / 4; background: var(--nuit); overflow: hidden; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; --u: 1; }
.map .mer { fill: var(--nuit); }
.map .terre { fill: var(--bleu); }
.map .cote, .map .bande, .map .bande-bord, .map .ligne5, .map .limite, .map .trace { fill: none; vector-effect: non-scaling-stroke; }
.map .cote { stroke: var(--brume); stroke-width: 1; stroke-opacity: .45; }
/* La bande des 300 m : 30 unités de part et d'autre du trait de côte, la terre repeinte par-dessus. */
.map .bande { stroke: rgb(159 180 191 / .13); stroke-width: 60; stroke-linejoin: round; vector-effect: none; }
.map .bande-bord { display: none; }
.map .z-cinq { fill: url(#hachure); }
.map .z-ziem { fill: url(#croise); }
.map .z-libre { fill: url(#points); opacity: 0; transition: opacity .4s; }
.map.is-libre .z-libre { opacity: 1; }
.map .pat-l { fill: none; stroke: var(--brume); stroke-width: .7; opacity: .55; }
.map .pat-l--fort { opacity: .95; }
.map .pat-p { fill: var(--brume); opacity: .8; }
.map .ligne5 { stroke: var(--ecume); stroke-width: 1.5; stroke-dasharray: 5 4; }
.map .limite { stroke: var(--brume); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; }
.map .trace { stroke: var(--ecume); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.map .arret { fill: var(--nuit); stroke: var(--ecume); stroke-width: calc(var(--u) * 1.5px); r: calc(var(--u) * 4px); }
.map .depart { fill: var(--ecume); }
.map .lbl { font: 400 calc(var(--u) * 13.5px) var(--texte); fill: var(--brume); }
.map .lbl--terre { fill: var(--reflet); }
.map .lbl--repere { fill: var(--ecume); font-size: calc(var(--u) * 13px); }
.map .lbl--zone, .map .lbl--limite { font-size: calc(var(--u) * 13px); }
.map__scale { position: absolute; left: 12px; bottom: 10px; display: grid; gap: 4px; font-size: 12px; color: var(--reflet); }
.map__bar { display: block; height: 5px; border: 1px solid var(--reflet); border-top: 0; }

.legende { display: grid; gap: 8px; margin-top: 22px; font-size: 16px; color: var(--reflet); }
.legende li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; }
.legende i { height: 14px; }
.legende__cinq { background: repeating-linear-gradient(135deg, var(--brume) 0 1px, transparent 1px 5px); }
.legende__ziem { background: repeating-linear-gradient(135deg, var(--ecume) 0 1px, transparent 1px 4px), repeating-linear-gradient(45deg, var(--ecume) 0 1px, transparent 1px 4px); }
.legende__libre { background: radial-gradient(circle, var(--brume) 1px, transparent 1.4px) 0 0 / 6px 6px; }
.legende__monaco { height: 0 !important; border-top: 1px dotted var(--ecume); }
.source { margin-top: 16px; font-size: 13px; color: var(--brume); }