/* Les plans du film : 2 (la rade au pas), 7 (la fiche de sortie), 9 (le générique). Le plan 1 est dans heros.css. */

/* ---------- plan 2 : la rade ---------- */
/* Sans mouvement : la règle entière, le jet au bout, la seconde photo dessous. */
.rade { position: relative; background: var(--nuit); }
.rade__scene { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 100svh 56svh; }
.rade picture { display: contents; }
.rade__photo { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.rade__photo--large { grid-area: 2 / 1; object-position: 50% 30%; }
.rade__voile { grid-area: 1 / 1; background: linear-gradient(to top, rgb(10 18 25 / .9), rgb(10 18 25 / .52) 46%, rgb(10 18 25 / .1) 72%, rgb(10 18 25 / .5)); }
.rade__cadre { grid-area: 1 / 1; position: relative; z-index: 1; }
.rade__cadre:focus { outline: none; }
.rade__haut { position: absolute; left: var(--marge); right: var(--marge); bottom: calc(32% + 36px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.rade__phrase { font-weight: 300; font-size: clamp(44px, min(6.4vw, 12svh), 104px); line-height: .98; }
.rade__p1, .rade__p2 { display: inline; }
.rade__chiffres { display: flex; flex: none; gap: 36px; font-size: 16px; color: var(--reflet); }
.rade__chiffres span { display: grid; gap: 4px; }
.rade__chiffres b { font-size: 56px; color: var(--ecume); font-variant-numeric: lining-nums; min-width: 1.6em; }
.regle { --jet-w: 56px; position: absolute; left: var(--marge); right: var(--marge); top: 68%; }
@media (min-width: 768px) { .regle { --jet-w: 80px; } }
@media (min-width: 1440px) { .regle { --jet-w: 112px; } }
.regle__trait { position: relative; display: flex; justify-content: space-between; height: 14px; border-top: 1px solid var(--ecume); }
.regle__trait i { width: 1px; height: 7px; background: var(--ecume); }
.regle__trait i:nth-child(odd) { height: 14px; }
/* L'écume derrière le jet : la distance parcourue. */
.regle__ecume { position: absolute; left: 0; right: 0; top: -3px; height: 5px; background: linear-gradient(to right, rgb(230 238 242 / .1), var(--ecume) 85%); box-shadow: 0 0 10px rgb(230 238 242 / .35); transform-origin: 0 50%; }
.regle__jet { position: absolute; top: calc(var(--jet-w) * -.25 - .5px); right: calc(var(--jet-w) * -.04); width: var(--jet-w); height: calc(var(--jet-w) / 2); overflow: visible; max-width: none; }
.regle__graduations { position: absolute; left: 0; right: 0; top: -30px; height: 20px; font-size: 14px; color: var(--reflet); font-variant-numeric: tabular-nums; }
.regle__graduations span { position: absolute; transform: translateX(-50%); }
.regle__graduations span:nth-child(1) { left: 25%; }
.regle__graduations span:nth-child(2) { left: 50%; }
.regle__graduations span:nth-child(3) { left: 75%; }
.regle__coque { fill: var(--ecume); }
.regle__selle { fill: none; stroke: var(--nuit); stroke-width: 1.5; stroke-linecap: round; }
.regle__sillage { fill: none; stroke: var(--ecume); stroke-width: 1; stroke-linecap: round; opacity: .55; transform-origin: -22px 0; }
.regle__bornes { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 16px; color: var(--reflet); }
.regle__bornes span:last-child { text-align: right; text-wrap: balance; }

/* Avec mouvement : scène collante, la piste fait 220 svh (170 sur téléphone). */
.anime .rade { height: 220svh; }
.anime .rade__scene { position: sticky; top: 0; height: 100svh; grid-template-rows: 100svh; overflow: hidden; }
.anime .rade__photo--large { grid-area: 1 / 1; opacity: 0; }
.anime .rade__phrase { display: grid; }
.anime .rade__p1, .anime .rade__p2 { grid-area: 1 / 1; display: block; }
.anime .rade__p2 { opacity: 0; }
.anime .regle__jet { right: auto; left: calc(var(--jet-w) * -.96); will-change: transform; }
.anime .regle__ecume { transform: scaleX(0); will-change: transform; }

@media (max-width: 767px), (orientation: portrait) and (max-width: 1023px) {
  .rade__haut { display: block; bottom: calc(32% + 46px); }
  .rade__phrase { font-size: clamp(40px, 10.4vw, 84px); max-width: 9em; }
  .rade__chiffres { margin-top: 18px; gap: 28px; font-size: 16px; }
  .rade__chiffres b { font-size: 40px; }
  .regle__bornes span { max-width: 50%; }
  .anime .rade { height: 170svh; }
}
/* Téléphone : la marge ne fait que 16 px ; le jet part posé sur le 0 de la règle au lieu d'attendre hors de l'écran. */
@media (max-width: 767px) { .anime .regle__jet { left: calc(var(--jet-w) * -.5); } }

/* ---------- plan 7 : la fiche de sortie ---------- */
.sortie { overflow: hidden; background: var(--nuit); }
.sortie__photos picture { display: contents; }
.sortie__photos, .sortie__photos img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sortie__photos img { object-fit: cover; }
/* Voile en deux nappes : dense sous les chiffres et sous les deux lignes, plus léger au milieu, où la photo respire. */
.sortie__photos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(10 18 25 / .78), rgb(10 18 25 / .7) 38%, rgb(10 18 25 / .36) 58%, rgb(10 18 25 / .8) 78%, rgb(10 18 25 / .95)); }
.sortie__cadre {
  position: relative; z-index: 1; display: flex; flex-direction: column; min-height: calc(100svh - var(--entete-h)); margin-top: var(--entete-h);
  padding-block: 12px calc(var(--bas) + 28px);
}
.sortie__cadre:focus { outline: none; }

.sortie__onglets { display: flex; gap: clamp(20px, 3vw, 44px); }
/* Trois noms, aucun souligné : le choisi en écume plein, les autres en brume. */
.sortie__onglets button { display: flex; align-items: center; min-height: 48px; font-size: 17px; color: var(--brume); }
.sortie__onglets button[aria-selected="true"] { color: var(--ecume); font-weight: 700; }
@media (hover: hover) { .sortie__onglets button:hover { color: var(--ecume); } }
.court { display: none; }

.sortie__fiche { margin-top: clamp(12px, 5svh, 56px); }
.sortie__nom { font-weight: 300; font-size: clamp(52px, min(6.7vw, 13svh), 96px); line-height: 1; }
.sortie__trajet { margin-top: 12px; max-width: 60ch; color: var(--reflet); }
.sortie__trajet span { white-space: nowrap; }
.sortie__ligne { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px clamp(32px, 5vw, 88px); margin-top: clamp(20px, 5svh, 52px); }
.sortie__chiffres { display: flex; gap: clamp(32px, 5vw, 88px); }
.sortie__chiffres > div { display: flex; flex-direction: column-reverse; gap: 4px; }
.sortie__chiffres dt { font-size: 14px; color: var(--brume); }
.sortie__chiffres dd { display: flex; align-items: baseline; gap: 12px; overflow: hidden; font-size: 56px; white-space: nowrap; }
.sortie__chiffres dd > span { display: block; }
.sortie__chiffres small { font: 400 15px/1 var(--texte); color: var(--brume); }

.sortie__permis { display: grid; gap: 12px; margin-top: auto; padding-top: 28px; }
.sortie__deux { max-width: 58ch; }
.sortie__regle { font-weight: 300; font-size: clamp(40px, min(4.5vw, 9svh), 64px); line-height: 1.02; }
.sortie__carte { flex: none; }
@media (min-width: 768px) { .sortie__cadre { padding-bottom: max(48px, calc(var(--bas) + 28px)); } }

@media (max-width: 767px), (orientation: portrait) and (max-width: 1023px) {
  .sortie__onglets { justify-content: space-between; gap: 8px; }
  .sortie__onglets button { font-size: 16px; }
  .long { display: none; }
  .court { display: inline; }
  .sortie__fiche { margin-top: clamp(8px, 2.4svh, 28px); }
  .sortie__nom { font-size: clamp(46px, 13.3vw, 84px); }
  .sortie__trajet { margin-top: 8px; font-size: 16px; }
  .sortie__ligne { display: block; margin-top: clamp(14px, 3svh, 32px); }
  .sortie__chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2.4svh, 24px) 16px; }
  .sortie__chiffres dd { font-size: clamp(36px, 10.2vw, 56px); gap: 8px; }
  .sortie__chiffres small { font-size: 14px; }
  .sortie__permis { display: block; padding-top: 20px; }
  .sortie__deux { font-size: 16px; line-height: 1.42; }
  .sortie__regle { margin-top: 14px; font-size: clamp(38px, 10.2vw, 64px); max-width: 8.6em; }
  .sortie__carte { margin-top: 2px; }
}

/* ---------- le générique : libellé à droite de l'axe, valeur à gauche ---------- */
.generique {
  padding: clamp(72px, 14svh, 150px) max(var(--marge), env(safe-area-inset-right)) 44px max(var(--marge), env(safe-area-inset-left));
  background: var(--nuit);
}
.generique:focus { outline: none; }
.generique__liste { display: grid; gap: 14px; max-width: 900px; margin-inline: auto; }
/* Écran large : les valeurs gardent leur ligne (« prise au ponton », « report ou remboursement » ne tombent plus seuls). */
@media (min-width: 1440px) { .generique__liste { max-width: 1120px; } }
.generique__liste > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.generique dt { text-align: right; color: var(--brume); }
.generique dd { text-wrap: pretty; }
.annee summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.annee summary::-webkit-details-marker { display: none; }
.annee ul { display: grid; gap: 4px; padding-bottom: 8px; font-size: 16px; color: var(--reflet); font-variant-numeric: tabular-nums; }
.annee li.est-la { color: var(--ecume); font-weight: 700; }
.fin { display: grid; gap: 4px; margin-top: clamp(56px, 11svh, 120px); font-style: normal; text-align: center; color: var(--reflet); }
.fin a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ecume); text-decoration: none; font-variant-numeric: tabular-nums; }
.fin__mot { margin-top: clamp(40px, 9svh, 104px); font-weight: 300; font-size: clamp(44px, 7.4vw, 120px); line-height: 1; text-align: center; text-wrap: balance; }
.mentions { margin-top: clamp(40px, 8svh, 88px); font-size: 13px; color: var(--brume); text-align: center; }
.mentions span { white-space: nowrap; }
.mentions i { font-style: normal; }
@media (max-width: 767px) {
  .generique__liste { gap: 12px; font-size: 16px; line-height: 1.4; }
  /* Une mention par ligne, jamais de séparateur en tête de ligne. */
  .mentions span { display: block; white-space: normal; }
  .mentions i { display: none; }
  .generique__liste > div { grid-template-columns: minmax(0, 31%) minmax(0, 1fr); gap: 0 16px; }
}