/* Fiche bateau. Jetons : tokens.css. */
.ariane { font-size: var(--t-s); color: var(--brume); padding: var(--s-4) 0; }
.ariane a { color: var(--brume); }

/* Mosaïque 1 + 2 */
.mosaique { position: relative; display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
.tuile { display: block; padding: 0; border: 0; background: var(--ecume); border-radius: var(--r-photo); overflow: hidden; cursor: zoom-in; }
.tuile img { width: 100%; height: 100%; object-fit: cover; }
.tuile--seule { cursor: default; }
.tuile--grande { aspect-ratio: 4 / 3; }
.mosaique__cote { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.tuile--petite { aspect-ratio: 3 / 2; }
.tuile--faits { grid-column: 1 / -1; cursor: default; background: var(--ecume); padding: var(--s-4); }
.mosaique__toutes {
  position: absolute; left: var(--s-3); bottom: var(--s-3); min-height: 40px; padding: 0 var(--s-4);
  border-radius: var(--r-champ); border: 0; background: var(--blanc-94); color: var(--encre); font-weight: 600; font-size: var(--t-s); cursor: pointer;
}
/* Photo plus petite que le grand cadre : affichée à sa taille, jamais agrandie */
.mosaique--taille-reelle .tuile--grande { aspect-ratio: var(--ratio); width: 100%; max-width: min(var(--w), calc(520px * var(--r))); }
@media (min-width: 1024px) {
  .mosaique { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 520px; height: 520px; }
  .tuile--grande { aspect-ratio: auto; height: 100%; }
  .mosaique__cote { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
  .mosaique > .tuile, .mosaique__cote > .tuile { min-height: 0; }
  .tuile--petite { aspect-ratio: auto; height: 100%; }
  .tuile--faits { grid-row: 1 / -1; padding: var(--s-5); }
  .mosaique--taille-reelle { grid-template-columns: minmax(0, min(var(--w), calc(520px * var(--r)))) minmax(0, 1fr); grid-template-rows: min(520px, calc(var(--w) / var(--r))); height: auto; }
  .mosaique--taille-reelle .tuile--grande { height: 100%; aspect-ratio: auto; }
  .mosaique--taille-reelle .mosaique__cote { height: auto; }
  .mosaique--taille-reelle .tuile--petite, .mosaique--taille-reelle .tuile--faits { height: 100%; }
  /* une seule photo : les caractéristiques prennent la place des petites photos et peuvent dépasser la photo en hauteur */
  .mosaique--taille-reelle.mosaique--faits { grid-template-rows: minmax(min(520px, calc(var(--w) / var(--r))), auto); }
  .mosaique--taille-reelle.mosaique--faits .tuile--grande { height: min(520px, calc(var(--w) / var(--r))); align-self: start; }
}

.faits { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-5); margin: 0; }
.faits dt { font-size: var(--t-s); color: var(--brume); }
.faits dd { margin: 0; font-size: var(--t-xl); font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.equipement { display: grid; gap: var(--s-1); margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--trait); font-size: var(--t-s); }
.equipement div { display: flex; justify-content: space-between; gap: var(--s-3); }
.equipement dd { margin: 0; font-weight: 600; }

/* Titre et corps */
.fiche__grille { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 1024px) {
  .fiche__grille { grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--s-8); row-gap: 0; align-items: start; }
  .fiche__titre { grid-column: 1; grid-row: 1; }
  .semaine { grid-column: 2; grid-row: 1 / span 2; }
  .fiche__corps { grid-column: 1; grid-row: 2; }
  .bloc--premier { margin-top: var(--s-6); }
}
.fiche__titre h1 { font-size: var(--t-2xl); }
.fiche__modele { color: var(--brume); margin: var(--s-2) 0 0; font-size: var(--t-l); }
.lien-3d { font-weight: 600; }
.bloc { margin-top: var(--s-7); }
.bloc h2 { margin-bottom: var(--s-3); }
.a-confirmer { margin-top: var(--s-5); padding: var(--s-4); border-left: 3px solid var(--aconfirmer); background: var(--fond-aconfirmer); font-size: var(--t-s); }
.a-confirmer p { margin: 0 0 var(--s-1); }
.a-confirmer strong { color: var(--aconfirmer); }

.tarifs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: var(--s-4); }
.tarifs th, .tarifs td { text-align: left; padding: var(--s-3) 0; border-bottom: 1px solid var(--trait); font-weight: 400; }
.tarifs thead th { font-size: var(--t-s); color: var(--brume); }
.tarifs td { text-align: right; font-weight: 600; white-space: nowrap; }
.tarifs tfoot th, .tarifs tfoot td { border-bottom: 0; color: var(--brume); font-weight: 400; }
.sur-demande { color: var(--brume); font-weight: 400; }

.conditions { margin: var(--s-4) 0; display: grid; gap: var(--s-4); }
.conditions dt { font-weight: 600; margin-bottom: var(--s-1); }
.conditions dd { margin: 0; max-width: var(--texte); }
.conditions ul { margin: 0 0 var(--s-2); padding-left: 1.1em; }
.conditions li::marker { color: var(--sable); }

/* Votre semaine */
.semaine { scroll-margin-top: 80px; }
.semaine__form { background: var(--coque); border: 1px solid var(--trait); border-radius: var(--r-panneau); padding: var(--s-5); display: grid; gap: var(--s-3); }
@media (min-width: 1024px) { .semaine { position: sticky; top: 88px; } .semaine__form { box-shadow: var(--ombre-panneau); border-color: transparent; } }
.semaine h2 { font-size: var(--t-xl); }
.semaine__des { margin: 0; color: var(--brume); }
.champ { display: grid; gap: var(--s-1); }
.champ label { font-weight: 600; font-size: var(--t-s); }
.champ input, .champ select {
  min-height: 48px; padding: 0 var(--s-3); border: 1px solid var(--brume); border-radius: var(--r-champ); background-color: var(--coque); width: 100%;
}
.champ input[aria-invalid="true"] { border-color: var(--alerte); }
.champ__erreur { margin: 0; color: var(--alerte); font-size: var(--t-s); font-weight: 600; }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.aide { margin: 0; font-size: var(--t-s); color: var(--brume); }
.semaine__total { padding: var(--s-3) 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.semaine__ligne { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--s-1); }
.semaine__ligne .total { font-size: var(--t-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.semaine__vide { margin: 0; color: var(--brume); font-size: var(--t-s); }
.semaine__envoi { width: 100%; }
.semaine__humain { margin: 0; font-size: var(--t-s); line-height: 1.9; }

.comparables { padding-bottom: var(--s-8); }

/* Galerie */
dialog.galerie { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--encre); color: #FFFFFF; overflow: hidden; }
dialog.galerie::backdrop { background: var(--encre); }
.galerie__barre { position: absolute; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gouttiere); z-index: 2; }
.galerie__compteur { margin: 0; font-size: var(--t-s); }
.galerie .fermer { float: none; background: transparent; color: #FFFFFF; border-color: var(--blanc-40); }
.galerie__scene { position: absolute; inset: 64px 0 76px; margin: 0; display: grid; place-items: center; padding: 0 var(--gouttiere); }
.galerie__scene img { width: auto; height: auto; max-width: min(100%, var(--w)); max-height: calc(100dvh - 140px); object-fit: contain; }
@media (min-width: 1024px) { .galerie__scene img { max-height: calc(100dvh - 88px); } }
.galerie__fleche {
  position: absolute; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--blanc-40);
  background: transparent; color: #FFFFFF; display: grid; place-items: center; cursor: pointer;
}
.galerie__fleche--prec { left: calc(50% - 60px); }
.galerie__fleche--suiv { right: calc(50% - 60px); }
@media (min-width: 1024px) {
  .galerie__scene { inset: 64px 88px 24px; }
  .galerie__fleche { bottom: auto; top: calc(50% - 24px); }
  .galerie__fleche--prec { left: 24px; }
  .galerie__fleche--suiv { right: 24px; }
}

/* À bord : équipement des pages détaillées, en colonnes */
.abord { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-5) var(--s-6); margin-top: var(--s-4); }
.abord h3 { font-family: var(--f-texte); font-size: var(--t-s); font-weight: 600; margin: 0 0 var(--s-2); }
.abord ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--t-s); }
.abord li { padding-left: var(--s-4); position: relative; }
.abord li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--marine); }