/* Le panneau « Venir et mentions » : blanc plein écran, il glisse sous la plaque (du bas sur
   téléphone, de la droite sur ordinateur) et défile à l'intérieur. Il tient lieu de menu. */
.panneau {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--demobar-offset, 0px);
  background: var(--blanc);
  color: var(--encre);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.2, 1), visibility 0s 0.32s;
}
.panneau.ouvert { transform: none; visibility: visible; transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.2, 1); }
.panneau-dedans {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--plaque-bas) + 12px) var(--g) max(32px, env(safe-area-inset-bottom));
  scroll-padding-top: 112px;
}
.panneau-nav { display: flex; flex-direction: column; border-top: 2px solid var(--encre); }
.panneau-nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 2px solid var(--encre);
  font: 400 30px/1.1 var(--titre);
  text-decoration: none;
  color: var(--magenta);
}
.panneau-nav a[aria-current] { color: var(--encre); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (hover: hover) { .panneau-nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; } }

.panneau-grille { display: grid; gap: 28px; padding-top: 24px; }
.panneau-texte { display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.45; max-width: 36rem; }
.panneau-texte p { color: var(--gris); }
.panneau-tel a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 22px;
  font-weight: 650;
  color: var(--encre);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.panneau-titre { scroll-margin-top: 112px; padding-top: 8px; font: 400 30px/1.1 var(--titre); color: var(--magenta); }
.panneau-texte .mentions { padding-top: 12px; font-size: 14px; }

.volet { border-top: 2px solid var(--encre); border-bottom: 2px solid var(--encre); }
.volet summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-size: 19px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.volet summary::-webkit-details-marker { display: none; }
.volet summary svg { width: 24px; height: 24px; transition: transform 0.2s; }
.volet[open] summary svg { transform: rotate(45deg); }
.carte { padding-bottom: 16px; }
.carte-svg { width: 100%; height: auto; aspect-ratio: 1 / 1; background: #dfeaf2; border-radius: 6px; }
.carte figcaption { max-width: 44ch; padding-top: 10px; font-size: 15px; line-height: 1.4; color: var(--gris); }
.c-terre { fill: #f4f1f3; stroke: #8f7f89; stroke-width: 1.2; }
.c-bande { fill: none; stroke: #c9dbe8; stroke-linejoin: round; }
.c-interdit { fill: rgb(196 18 140 / 0.28); stroke: var(--magenta); stroke-width: 1.4; }
.c-mouillage { fill: rgb(27 15 23 / 0.08); stroke: #8f7f89; stroke-width: 1; stroke-dasharray: 4 3; }
.c-limite { fill: none; stroke: var(--magenta); stroke-width: 2.4; stroke-dasharray: 8 6; }
.c-terre path, .c-interdit, .c-mouillage, .c-limite { vector-effect: non-scaling-stroke; }
.c-route { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-route.autre { stroke: #8f7f89; stroke-width: 1.6; stroke-dasharray: 2 5; }
.c-base { fill: var(--magenta); stroke: var(--blanc); stroke-width: 2; }
.c-txt { font-family: var(--texte); font-weight: 600; fill: var(--encre); paint-order: stroke; stroke: #f4f1f3; stroke-width: 4px; stroke-linejoin: round; }
.c-txt.mer { fill: #3c5f80; stroke: #dfeaf2; font-style: italic; font-weight: 500; }

@media (min-width: 600px) {
  .panneau-dedans { padding-top: calc(var(--plaque-bas) + 24px); }
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .panneau { transform: translateX(100%); }
  .panneau-nav { flex-direction: row; gap: 40px; border-top: 0; border-bottom: 2px solid var(--encre); }
  .panneau-nav a { border-bottom: 0; font-size: 40px; min-height: 72px; }
  .panneau-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); padding-top: 36px; align-items: start; }
  .panneau-texte { font-size: 18px; }
  .volet { border-top: 0; }
  .volet summary { pointer-events: none; }
  .volet summary svg { display: none; }
  .panneau-dedans { padding-inline: max(32px, calc((100vw - 1640px) / 2)); }
}