/* Accueil : sections sous le premier écran. Jetons : tokens.css. */
.bases { display: grid; gap: var(--s-7) var(--s-6); margin-top: var(--s-6); }
@media (min-width: 900px) { .bases { grid-template-columns: 1fr 1fr; } }
.base__photo { margin: 0 0 var(--s-4); aspect-ratio: 3 / 2; border-radius: var(--r-photo); overflow: hidden; }
.base__photo img { width: 100%; height: 100%; object-fit: cover; }
.base h3 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.base__faits { margin: 0 0 var(--s-3); padding-left: 1.1em; }
.base__faits li { margin-bottom: var(--s-1); }
.base__faits li::marker { color: var(--sable); }

.suite { margin-top: var(--s-6); }

/* Prix et conditions : trois repères (semaine, paiement, caution), puis les options ; plus d'air entre les blocs */
@media (min-width: 1024px) { #prix { padding-block: var(--s-9); } }
.prix-grille { display: grid; gap: var(--s-6) var(--s-7); margin: var(--s-7) 0 var(--s-6); }
@media (min-width: 768px) { .prix-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prix-grille div { border-top: 2px solid var(--marine); padding-top: var(--s-3); }
.prix-grille dt { font-family: var(--f-titre); font-size: var(--t-l); margin-bottom: var(--s-2); }
.prix-grille dd { margin: 0; color: var(--encre); }
.prix-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }

.services-titre { margin-top: var(--s-8); font-size: var(--t-xl); }

.avis-proprio { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .avis-proprio { grid-template-columns: 1fr 1fr; } }
.avis__note { font-size: var(--t-2xl); font-weight: 500; margin: var(--s-4) 0 0; line-height: 1.1; }
.avis__nombre { color: var(--brume); }
.proprio p { margin-top: var(--s-4); }

/* Options et leurs prix (tableau repris de Qui sommes-nous) */
.options-grille { display: grid; gap: var(--s-7); margin-top: var(--s-6); }
@media (min-width: 1024px) { .options-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start; } }
.skipper-bloc__photo { margin: 0; max-width: 600px; aspect-ratio: 3 / 2; border-radius: var(--r-photo); overflow: hidden; background: var(--ecume); }
.skipper-bloc__photo img { width: 100%; height: 100%; object-fit: cover; }
.skipper-bloc h3 { margin-top: var(--s-4); max-width: 26ch; }
.skipper-bloc p { margin: var(--s-2) 0 0; }
.options { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.options th, .options td { vertical-align: top; text-align: left; padding: var(--s-3) 0; border-bottom: 1px solid var(--trait); }
.options tbody th[scope="row"] { font-weight: 600; padding-right: var(--s-4); }
.options td { text-align: right; white-space: nowrap; font-weight: 600; }
.options__groupe th { font-family: var(--f-titre); font-weight: 500; font-size: var(--t-l); padding: var(--s-6) 0 var(--s-2); border-bottom: 2px solid var(--marine); }
.options tbody:first-of-type .options__groupe th { padding-top: 0; }
.options__detail { display: block; margin-top: 2px; font-weight: 400; font-size: var(--t-s); color: var(--brume); }
.options .mention { margin-left: var(--s-1); }
.options__horaires { margin: var(--s-4) 0 0; font-size: var(--t-s); color: var(--brume); }
.options__horaires:empty { min-height: 1.5em; }

/* Nouveauté : le Lagoon 43 (grande photo, deux vignettes, les deux bateaux et leur prix) */
.l43__grille { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 1024px) { .l43__grille { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: var(--s-8); } }
.l43__photo { margin: 0; aspect-ratio: 1120 / 640; border-radius: var(--r-photo); overflow: hidden; background: var(--ecume); }
.l43__photo img, .l43__vignette img { width: 100%; height: 100%; object-fit: cover; }
.l43__sur { margin: 0 0 var(--s-2); font-size: var(--t-s); font-weight: 600; color: var(--lagon); }
.l43 h2 { max-width: 18ch; }
.l43__texte > p:not(.l43__sur) { margin: var(--s-3) 0 0; }
.l43__bateaux { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.l43__bateaux li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--trait); }
.l43__bateaux a { font-family: var(--f-titre); font-size: var(--t-l); color: var(--encre); }
.l43__bateaux span { color: var(--brume); font-variant-numeric: tabular-nums; }
.l43__bateaux span:empty { min-width: 8em; min-height: 1.5em; }
.l43__vignettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.l43__vignette { margin: 0; aspect-ratio: 1120 / 640; border-radius: var(--r-photo); overflow: hidden; background: var(--ecume); }

/* Visites 3D : quatre vignettes de RM, chacune ouvre la visite Matterport du site */
.v3d { background: var(--marine); color: #FFFFFF; }
.v3d h2 { color: #FFFFFF; }
.v3d .intro { color: var(--blanc-78); max-width: 60ch; }
.v3d__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 640px) { .v3d__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .v3d__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v3d__lien { display: grid; gap: var(--s-1); color: #FFFFFF; text-decoration: none; }
.v3d__photo { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-photo); overflow: hidden; background: var(--blanc-20); margin-bottom: var(--s-2); }
.v3d__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--courbe); }
.v3d__lien:hover .v3d__photo img { transform: scale(1.03); }
.v3d__nom { font-family: var(--f-titre); font-size: var(--t-xl); line-height: 1.15; }
.v3d__modele { color: var(--blanc-78); font-size: var(--t-s); }
.v3d__action { margin-top: var(--s-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .v3d__photo img { transition: none; } }