/* Plan 1 : le héros et son seuil. Le média tient dans .heros__media ; son cadre se règle ici, par variables,
   pour qu'un nouveau média (vidéo paysage, vidéo verticale, canvas) s'y pose sans toucher au reste. */
:root {
  --heros-rapport: 1.7778;                  /* largeur / hauteur du média ordinateur (image d'attente : 2880 × 1620) */
  --heros-rapport-tel: .8;                  /* du média téléphone et tablette debout (1440 × 1800) */
  --heros-x: 50%; --heros-y: 30%;           /* cadrage sur ordinateur */
  --heros-x-tel: 50%; --heros-y-tel: 46%;   /* au téléphone, et dans la colonne du menu */
  --fente-haut: .33; --fente-bas: .48;      /* la fente du seuil, en part de la hauteur du cadre : elle passe sur la machine */
  --fente-haut-tel: .42; --fente-bas-tel: .6;
  --heros-reserve: 236px;                   /* ordinateur plus étroit que 16:10 : place gardée sous le média pour le titre */
  --heros-reserve-tel: 38%;                 /* téléphone et tablette debout : part du plan gardée pour le titre */
}

/* 36 px : le bandeau de démonstration occupe le haut du premier écran, le plan tient dans ce qui reste. */
.heros { --cadre-h: 100%; height: calc(100svh - 36px); min-height: 520px; overflow: hidden; background: var(--nuit); container-type: inline-size; }
.heros:focus { outline: none; }
.heros__media { position: absolute; top: 0; left: 0; right: 0; height: var(--cadre-h); overflow: hidden; }
.heros__media picture { display: contents; }
.heros__media :is(img, video, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--heros-x) var(--heros-y); }
/* Voile : le haut prend la nuit de la barre (aucune couture), le bas porte le titre (un texte clair tombe à 2,6:1 sur les reflets). */
.heros__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--nuit) var(--entete-h), rgb(10 18 25 / 0) calc(var(--entete-h) + 120px)),
    linear-gradient(to top, rgb(10 18 25 / .9), rgb(10 18 25 / .6) 22%, rgb(10 18 25 / 0) 50%);
}

.heros__texte {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(28px, 5svh, 52px); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  max-width: calc(var(--grille) + 2 * var(--marge)); margin-inline: auto; padding-inline: max(var(--marge), env(safe-area-inset-left)) max(var(--marge), env(safe-area-inset-right));
}
.heros h1 { font-weight: 300; font-size: clamp(64px, min(9.2vw, 17svh), 148px); line-height: .92; }
/* Le masque laisse passer accents et jambages, que l'interligne serré couperait. */
.ligne { display: block; overflow: hidden; padding-block: .14em; margin-block: -.14em; }
.ligne > span { display: block; }
.heros__prix { margin-top: clamp(14px, 2.2svh, 24px); font-size: 17px; text-wrap: balance; }
.heros__prix i { font-style: normal; color: var(--brume); }
.heros__prix > span { white-space: nowrap; }
/* Deux lignes au plus de 75 signes : les deux formules, puis le dernier retour. */
.heros__prix > span:last-child { display: block; }
.heros__prix > span:nth-child(2) i { display: none; }
.heros__depart { flex: none; text-align: right; font-size: 16px; color: var(--reflet); }
.heros__heure { margin: 2px 0 4px; font-size: 56px; color: var(--ecume); }
.heros__depart .lien { color: var(--ecume); }
.heros__depart small { margin-left: .35em; font-size: 14px; color: var(--brume); }

/* Ordinateur plus étroit que 16:10 : le média garde toute sa largeur, le titre descend dans la nuit dessous. */
@media (min-width: 768px) and (orientation: landscape) and (max-aspect-ratio: 1599/1000) {
  .heros { --cadre-h: min(100cqw / var(--heros-rapport), 100% - var(--heros-reserve)); }
  .heros__media::after { background: linear-gradient(to bottom, var(--nuit) var(--entete-h), rgb(10 18 25 / 0) calc(var(--entete-h) + 120px)), linear-gradient(to top, var(--nuit), rgb(10 18 25 / 0) 34%); }
  .heros__texte { bottom: 20px; align-items: center; }
  .heros h1 { font-size: clamp(52px, 6.6vw, 96px); }
  .heros h1 .ligne { display: inline-block; vertical-align: top; }
  .heros__prix { margin-top: 10px; font-size: 16px; }
  .heros__heure { font-size: 44px; }
}

/* Téléphone et tablette debout : le média portrait en haut, à son rapport ; le titre dessous, calé sur le bas du plan. */
@media (orientation: portrait) and (max-width: 1194px) {
  .heros { --cadre-h: min(100cqw / var(--heros-rapport-tel), 100% - var(--heros-reserve-tel)); }
  .heros__media :is(img, video, canvas) { object-position: var(--heros-x-tel) var(--heros-y-tel); }
  .heros__media::after { background: linear-gradient(to bottom, var(--nuit) var(--entete-h), rgb(10 18 25 / 0) calc(var(--entete-h) + 100px)), linear-gradient(to top, var(--nuit), rgb(10 18 25 / .55) 20%, rgb(10 18 25 / 0) 44%); }
  .heros__texte { bottom: calc(var(--bas) + clamp(16px, 4svh, 40px)); display: block; }
  /* « 800 m à 5 nœuds. » mesure 4,72 em : à 18,9 vw, il tient sur une ligne entre les marges, jusqu’à 360 px. */
  .heros h1 { font-size: min(18.9vw, 12svh, 120px); }
  .heros__prix { font-size: 16px; line-height: 1.45; }
  .heros__prix i { display: none; }
  .heros__prix > span { display: block; }
  .heros__depart { margin-top: 28px; text-align: left; }
}
@media (max-width: 767px), (orientation: portrait) and (max-width: 1023px) { .heros__depart { display: none; } }
/* Téléphone couché : le titre sur une ligne, sous la machine ; « Réserver » reste dans la barre. */
@media (max-height: 480px) and (orientation: landscape) {
  /* Image calée sur son haut et nuit de la barre raccourcie : le guidon ne passe plus sous la barre. */
  .heros { --heros-y: 0%; min-height: 320px; }
  .heros__media::after { background: linear-gradient(to bottom, var(--nuit) var(--entete-h), rgb(10 18 25 / 0) calc(var(--entete-h) + 48px)), linear-gradient(to top, rgb(10 18 25 / .9), rgb(10 18 25 / .6) 22%, rgb(10 18 25 / 0) 50%); }
  .heros h1 { font-size: 44px; }
  .heros h1 .ligne { display: inline-block; vertical-align: top; }
  .heros__prix, .heros__depart { display: none; }
}

/* Média vertical (à poser avec data-format="haut") : sur ordinateur, un haut cadre au bord droit de la grille, le titre à gauche. */
@media (min-width: 768px) and (orientation: landscape) {
  .heros__media[data-format="haut"] { inset: calc(var(--entete-h) + 24px) max(var(--marge), calc((100% - var(--grille)) / 2)) 32px auto; height: auto; aspect-ratio: var(--heros-rapport); }
  .heros__media[data-format="haut"]::after { background: linear-gradient(to top, rgb(10 18 25 / .5), rgb(10 18 25 / 0) 30%); }
  .heros:has(.heros__media[data-format="haut"]) .heros__texte { flex-direction: column; align-items: flex-start; }
  .heros:has(.heros__media[data-format="haut"]) .heros__depart { text-align: left; }
}
/* Une vidéo en lecture couvre l'image d'attente : on la masque, pour qu'aucun arrondi ne laisse passer un filet sur un bord. */
.heros__media.joue picture img { visibility: hidden; }

/* ---------- le seuil : le média vu par une fente ---------- */
.seuil { display: none; }
.au-seuil .seuil { display: block; position: absolute; inset: 0; z-index: 3; cursor: pointer; }
.seuil__volet { position: absolute; left: 0; right: 0; background: var(--nuit); will-change: transform; }
.seuil__volet--haut { top: -2px; height: calc(var(--cadre-h) * var(--fente-haut) + 2px); }
.seuil__volet--bas { top: calc(var(--cadre-h) * var(--fente-bas)); bottom: -2px; }
.seuil__lieu, .seuil__entrer { position: absolute; left: max(var(--marge), env(safe-area-inset-left)); }
@media (min-width: 1689px) { .seuil__lieu, .seuil__entrer { left: calc(50% - var(--grille) / 2); } }
.seuil__lieu { bottom: 18px; display: grid; gap: 2px; font-size: 15px; color: var(--reflet); }
.seuil__lieu span:first-child { font-variant-numeric: tabular-nums; color: var(--ecume); }
.seuil__entrer {
  top: 14px; display: flex; align-items: center; min-height: 56px; font-size: 40px; font-weight: 400;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px;
}
@media (orientation: portrait) and (max-width: 1194px) {
  .seuil__volet--haut { height: calc(var(--cadre-h) * var(--fente-haut-tel) + 2px); }
  .seuil__volet--bas { top: calc(var(--cadre-h) * var(--fente-bas-tel)); }
}
/* Téléphone couché : la légende passe sous la barre au lieu de s'y cacher. */
@media (max-width: 767px) { .seuil__lieu { font-size: 16px; } }
@media (max-height: 480px) and (orientation: landscape) { .seuil__lieu { bottom: auto; top: calc(var(--entete-h) + 6px); display: flex; gap: 0 20px; } }