/* Accueil. Téléphone d'abord : photo, ruban de route posé sur son bas, puis titre et bouton sur fond blanc.
   Dès 768 px : photo pleine largeur, texte posé sur le bas sombre (eau du chenal). */

/* Ouverture */
.ouverture { position: relative; display: grid; background: var(--chenal); }
.ouverture__photo { display: block; height: clamp(220px, calc(100svh - var(--entete) - 404px), 440px); overflow: hidden; }
.ouverture__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.ouverture__texte { background: var(--blanc); padding-block: var(--s5) var(--s5); display: grid; gap: var(--s4); }
.ouverture h1 { max-width: 13em; }
.ouverture__accroche { font-size: var(--t-chapeau); line-height: 1.4; color: var(--ardoise); max-width: 30em; }
.ouverture__action { display: grid; gap: var(--s4); }
.ouverture__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.ouverture__prix { font-size: var(--t-petit); color: var(--ardoise); max-width: 18em; }
.ouverture__prix strong { font: 500 20px/1 var(--serif); color: var(--chenal); }

/* Ruban : la route du jour, résumée (l'idée, visible dès le premier écran) */
.ruban { position: absolute; left: 0; right: 0; top: calc(clamp(220px, calc(100svh - var(--entete) - 404px), 440px) - 64px); height: 64px;
  background: linear-gradient(to top, rgba(15, 51, 64, 0.72), rgba(15, 51, 64, 0)); color: var(--blanc); pointer-events: none; }
.ruban__in { position: relative; height: 100%; }
.ruban__ligne { position: absolute; left: var(--gouttiere); right: var(--gouttiere); top: 14px; width: calc(100% - 2 * var(--gouttiere)); height: 16px; overflow: visible; }
.ruban__ligne path { fill: none; stroke: var(--magenta); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ruban__arrets { list-style: none; margin: 0; padding: 0; position: absolute; left: var(--gouttiere); right: var(--gouttiere); top: 0; height: 100%; }
.ruban__arrets li { position: absolute; left: calc(var(--x) * 1%); top: 16px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; }
.ruban__arrets li::before { content: ""; width: 10px; height: 10px; border-radius: var(--r-rond); background: var(--blanc); box-shadow: 0 0 0 2px var(--magenta); }
.ruban__arrets li:first-child, .ruban__arrets li:last-child { transform: none; justify-items: start; }
.ruban__arrets li:last-child { left: auto; right: 0; justify-items: end; }
.ruban__arrets span { font: 500 var(--t-mention)/1 var(--sans); white-space: nowrap; }
.ruban__arrets .lieu { font: italic 400 14px/1 var(--serif); }
.ruban__long { display: none; }
@media (min-width: 768px) { .ruban__long { display: inline; } .ruban__court { display: none; } }

@media (min-width: 768px) {
  .ouverture { min-height: clamp(560px, calc(100svh - var(--entete)), 920px); align-content: end; }
  .ouverture__photo { position: absolute; inset: 0; height: auto; }
  .ouverture__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(15, 51, 64, 0.62) 0%, rgba(15, 51, 64, 0.34) 36%, rgba(15, 51, 64, 0) 54%), linear-gradient(to top, rgba(15, 51, 64, 0.82) 0%, rgba(15, 51, 64, 0.62) 36%, rgba(15, 51, 64, 0.40) 60%, rgba(15, 51, 64, 0) 82%); }
  .ouverture__texte { text-shadow: 0 1px 18px rgba(15, 51, 64, 0.55); }
  .ouverture__photo img { object-position: 50% 60%; }
  .ouverture__texte { position: relative; background: none; color: var(--blanc); padding-block: 0 112px; gap: var(--s5); }
  .ouverture__accroche, .ouverture__prix { color: rgba(255, 255, 255, 0.9); }
  .ouverture__prix strong { color: var(--blanc); }
  .ruban { top: auto; bottom: 0; height: 80px; background: none; }
  .ruban__arrets .lieu { font-size: 16px; }
  .ruban__arrets span { font-size: 14px; }
}
@media (min-width: 768px) {
  /* Le bateau occupe 44 à 60 % de la largeur de la photo : le texte reste dans les 39 % de gauche */
  .ouverture h1 { font-size: clamp(40px, 22px + 2.6vw, 64px); max-width: min(8.6em, 39vw); }
  .ouverture__accroche { max-width: min(25em, 39vw); }
  .ouverture__boutons { flex-wrap: nowrap; gap: var(--s5); }
}
/* Le bateau occupe le centre de la photo (44 à 60 % de la largeur) : le texte reste dans les 42 % de gauche */
@media (min-width: 1440px) {
  .ouverture .ouverture__texte, .ouverture .ruban__in { max-width: none; padding-inline: var(--marge-large); }
}
@media (min-width: 768px) and (max-height: 700px) {
  .ouverture h1 { font-size: clamp(36px, 7.4svh, 64px); }
  .ouverture__texte { padding-bottom: 96px; gap: var(--s4); }
}

/* Téléphone en paysage : ouverture à la hauteur de l'écran, titre compact, bouton visible */
@media (min-width: 768px) and (max-height: 500px) {
  .ouverture { min-height: calc(100svh - var(--entete)); }
  .ouverture h1 { font-size: 30px; max-width: 14em; }
  .ouverture__accroche { display: none; }
  .ouverture__texte { padding-bottom: 72px; gap: var(--s3); }
  .ruban { height: 64px; }
}

/* Ouverture au chargement : classe .ouvre posée par un script en tête de page, avant le premier affichage (posée par le
   module, elle faisait réapparaître le titre déjà affiché sur téléphone lent). Animations « backwards » : finies, elles
   ne laissent rien ; sans le script, tout est visible. */
.ouvre .ouverture h1 { animation: rideau .9s var(--courbe) .1s backwards; }
.ouvre .ouverture__accroche { animation: rideau .7s var(--courbe) .3s backwards; }
.ouvre .ouverture__boutons { animation: rideau .7s var(--courbe) .4s backwards; }
.ouvre .ruban__ligne path { stroke-dasharray: 1200; animation: trace 1.6s var(--courbe) .4s backwards; }
.ruban__ligne .ruban__retour { stroke-dasharray: 6 5; }
.ouvre .ruban__ligne .ruban__retour { stroke-dasharray: 6 5; animation: apparait .6s var(--courbe) 1.6s backwards; }
@keyframes apparait { from { opacity: 0; } }
@keyframes trace { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
@media print { .ouvre .ouverture * { animation: none !important; } }

/* La journée : carte et déroulé */
.journee__grille { display: grid; gap: var(--s7); }
@media (min-width: 1024px) { .journee__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: var(--s8); } }

/* L'esprit */
.esprit__grille { display: grid; gap: var(--s7); }
.esprit__texte { display: grid; gap: var(--s4); align-content: start; }
.esprit__liste { margin: var(--s4) 0 0; display: grid; gap: var(--s5); }
.esprit__liste dt { font: 500 20px/1.25 var(--serif); }
.esprit__liste dd { margin: var(--s1) 0 0; color: var(--ardoise); max-width: 30em; }
.esprit__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; max-height: 640px; }
.esprit__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 900px) {
  .esprit__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: center; }
  .esprit__liste { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s6); }
}

/* Formules : deux cartes, même recadrage, photo nue, texte dessous */
.formules__grille { display: grid; gap: var(--s7); }
@media (min-width: 768px) { .formules__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); } }
.formule { display: grid; gap: var(--s4); color: var(--chenal); text-decoration: none; }
.formule__photo { display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--voile); }
.formule__photo img { width: 100%; height: 100%; object-fit: cover; }
.formule__texte { display: grid; gap: var(--s2); }
.formule__nom { font: 400 var(--t-h3)/1.2 var(--serif); }
.formule:hover .formule__nom { text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.formule__detail { color: var(--ardoise); max-width: 30em; }
.formule__prix { font-size: var(--t-petit); color: var(--ardoise); }
.formule__prix strong { font: 400 var(--t-prix)/1.1 var(--serif); color: var(--chenal); margin-right: 4px; }

/* Blocs image + texte, décalés 7/5 */
.bloc { display: grid; gap: var(--s6); }
.bloc__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.bloc__photo img { width: 100%; height: 100%; object-fit: cover; }
.bloc__texte { display: grid; gap: var(--s4); align-content: center; justify-items: start; }
@media (min-width: 900px) {
  .bloc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: center; }
  .bloc--photo-droite { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.repas .bloc__photo { aspect-ratio: 5 / 4; }
.repas .bloc__photo img { object-position: 74% 50%; }
.menu-du-jour { list-style: none; margin: var(--s2) 0; padding: 0; display: grid; }
.menu-du-jour li { font: 400 20px/1.35 var(--serif); padding-block: var(--s3); border-top: 1px solid var(--filet); }
.menu-du-jour li:last-child { border-bottom: 1px solid var(--filet); }
.bateau__liste { margin: var(--s2) 0 var(--s3); padding-left: 1.1em; display: grid; gap: var(--s2); max-width: 32em; }
.bateau__liste li::marker { color: var(--magenta); }

/* Avis */
.avis__liste { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .avis__liste { grid-template-columns: 1fr 1fr; gap: var(--s8); } }
.citation { margin: 0; display: grid; gap: var(--s3); align-content: start; border-top: 2px solid var(--magenta); padding-top: var(--s5); }
.citation blockquote { margin: 0; font: 400 22px/1.4 var(--serif); max-width: 30em; }
.citation figcaption { font-size: var(--t-petit); color: var(--ardoise); }
.avis__liens { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin-top: var(--s7); }
.avis__liens a { font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }

/* Avant de venir */
.infos-cle__grille { margin: 0 0 var(--s7); display: grid; gap: var(--s5); }
.infos-cle__grille div { border-top: 1px solid var(--filet); padding-top: var(--s4); }
.infos-cle__grille dt { font: 500 20px/1.25 var(--serif); }
.infos-cle__grille dd { margin: var(--s2) 0 0; color: var(--ardoise); }
@media (min-width: 768px) { .infos-cle__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } }
@media (min-width: 1180px) { .infos-cle__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Fin de page */
.fin-page { background: var(--chenal); color: var(--blanc); padding-block: var(--section); border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.fin-page__in { display: grid; gap: var(--s4); justify-items: start; }
.fin-page .chapeau { color: rgba(255, 255, 255, 0.85); }
.fin-page__boutons { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.fin-page .bouton--plein:hover { background: var(--blanc); color: var(--chenal); }
.badge--clair { color: var(--ardoise); }