/* Avant de partir, puis le ponton (fin de page). */
.notes { background: var(--calcaire); }
.notes-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 64px) clamp(24px, 4vw, 80px); margin-top: clamp(36px, 4.5vw, 80px); }
.notes article h3 { font-size: clamp(34px, 2.8vw, 52px); line-height: 1; padding-top: 16px; border-top: 6px solid var(--encre); }
.notes article p { margin-top: 12px; font-size: clamp(17px, 1.15vw, 19px); max-width: 34ch; }

.ponton { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--encre); color: var(--blanc); }
.ponton-photo { margin: 0; position: relative; }
.ponton-photo picture, .ponton-photo img { display: block; width: 100%; height: 100%; }
.ponton-photo img { object-fit: cover; object-position: 50% 62%; aspect-ratio: 4 / 3; }
@media (min-width: 901px) { .ponton-photo img { aspect-ratio: auto; min-height: 640px; } }
.ponton-photo figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 12px; background: var(--encre); font-size: 14px; font-weight: 520; }
.ponton-texte { padding: clamp(40px, 5vw, 110px) var(--marge) clamp(32px, 4vw, 72px) clamp(28px, 4vw, 88px); display: flex; flex-direction: column; gap: 22px; }
.ponton-texte .section-titre { color: var(--blanc); }
.ponton-adresse { font-size: clamp(22px, 1.8vw, 30px); font-weight: 560; }
.ponton-horaires { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; margin: 0; font-size: 16px; }
.ponton-horaires dt { color: var(--gris-sombre); }
.ponton-horaires dd { margin: 0; font-weight: 560; }
.ponton-texte > p { max-width: 46ch; color: #d3dcdf; }
.ponton-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ponton-contact li { display: flex; align-items: center; gap: 14px; min-height: 44px; font-size: 18px; font-weight: 560; }
.ponton-contact span { width: 76px; flex: none; font-size: 14px; font-weight: 500; color: var(--gris-sombre); }
.ponton-contact a { text-decoration: none; font-size: 22px; font-weight: 620; color: var(--ceruleen); }
.ponton-contact a:hover { text-decoration: underline; }
.ponton-logo { align-self: flex-start; color: var(--blanc); margin-top: 12px; }
.ponton-logo .logo { width: 185px; height: 52px; }
.mentions { font-size: 13px; color: var(--gris-sombre); line-height: 1.6; max-width: 70ch; }
.ponton :focus-visible { outline-color: var(--ceruleen); }

@media (max-width: 1023px) { .notes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ponton { grid-template-columns: 1fr; }
  .ponton-texte { padding: 40px var(--marge) calc(40px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) { .notes-grille { grid-template-columns: 1fr; } }