/* Scène 1 — maintenant : le titre coupé par la ligne d'eau. */
.s1 {
  --ligne: 70%;
  display: flex; flex-direction: column;
  padding-top: var(--entete-h);
  overflow: clip;
}
.s1__sec { padding: clamp(18px, 4.2vh, 52px) var(--marge) 0; }
.titre {
  margin: 0;
  font: 700 clamp(72px, 11.4vw, 200px)/.9 var(--titre);
  letter-spacing: -.02em;
  color: var(--encre);
}
.titre .l1 { display: block; }
.eau {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  transform: translateY(var(--ligne));
  transition: transform .42s var(--courbe);
}
.eau__dedans {
  position: absolute; inset: 0;
  padding: var(--entete-h) var(--marge) 0;
  background: var(--profond);
  transform: translateY(calc(-1 * var(--ligne)));
  transition: transform .42s var(--courbe);
}
.arrivee .eau, .arrivee .eau__dedans, .arrivee .s1__niveau { transition-duration: 1.2s; }
.eau__photo { position: absolute; max-width: none; }
.eau__fond { position: absolute; left: 0; right: 0; bottom: -2000px; background: linear-gradient(rgb(23 61 40 / 0), var(--profond) 160px); }
.titre--mouille { position: relative; color: #fff; padding-top: clamp(18px, 4.2vh, 52px); }

.echelle { position: absolute; right: var(--marge); z-index: 0; color: var(--encre); }
.echelle svg { display: block; fill: currentColor; overflow: visible; }
.echelle text { font: 600 13px var(--texte); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.echelle .e-marque { fill: var(--pin); }
.echelle--mouillee { color: #fff; }
.echelle--mouillee .e-marque { fill: #9FD0B2; }
.e-etiq {
  position: absolute; right: 36px; transform: translateY(-50%);
  font: 500 12.5px/1 var(--texte); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.s1__niveau {
  position: absolute; top: 0; right: calc(var(--marge) + 54px); z-index: 2;
  transform: translateY(calc(var(--ligne) - 100% - 4px));
  transition: transform .42s var(--courbe);
  font: 600 18px/1 var(--titre); color: var(--encre); font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.s1__niveau span { display: block; padding: 3px 6px; background: var(--eau); }

.s1__eau {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(14px, 2.4vh, 26px) var(--marge) clamp(28px, 5vh, 56px);
  color: #fff;
}
.s1__metier { font: 500 22px/1.3 var(--texte); max-width: 40ch; }
.s1__phrase { margin-top: clamp(14px, 2.4vh, 28px); font: 500 20px/1.4 var(--texte); max-width: 46ch; }
.lignes, .volet { width: min(100%, 1060px, 70vw); background: rgb(16 38 27 / .55); }
.lignes { margin-top: clamp(14px, 2.2vh, 24px); }
.ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px 88px 150px minmax(250px, 290px) 20px;
  align-items: center; column-gap: 16px;
  min-height: 56px; padding: 0 18px;
  color: #fff; text-decoration: none;
  border-top: 1px solid rgb(255 255 255 / .16);
}
.lignes li:first-child .ligne { border-top: 0; }
.ligne__nom { font: 500 18px/1.2 var(--texte); }
.ligne__duree, .ligne__autre, .ligne__etat { font: 400 16px/1.25 var(--texte); font-variant-numeric: tabular-nums; }
.ligne__prix { font: 600 28px/1 var(--titre); font-variant-numeric: tabular-nums; text-align: right; }
.ligne__autre { font-size: 15px; }
.ligne__va { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.est-eteinte .ligne__nom { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #fff; }
.est-eteinte .ligne__etat::before { content: "— "; }
@media (hover: hover) {
  .est-allumee:hover { background: rgb(255 255 255 / .1); }
  .est-allumee:hover .ligne__va { transform: translateX(3px); }
}
.ligne:focus-visible, .volet summary:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.volet { margin-top: 2px; }
.volet summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 18px;
  font: 600 18px/1 var(--texte); cursor: pointer; list-style: none;
}
.volet summary::-webkit-details-marker { display: none; }
.volet summary svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; transition: transform .25s var(--courbe); }
.volet[open] summary svg { transform: rotate(180deg); }
.volet__corps {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px 32px;
  padding: 4px 18px 22px; font-size: 16px; line-height: 1.45;
}
.volet__liste { display: grid; gap: 8px; }
.volet__liste li { padding-left: 14px; position: relative; }
.volet__liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 2px; background: #fff; }
.volet h2 { font: 600 17px/1.2 var(--titre); margin-bottom: 8px; }
.volet__horaires { display: grid; gap: 6px; }
.volet__horaires dt { font-weight: 600; }
.volet__horaires dd { font-variant-numeric: tabular-nums; }

@media (max-width: 1199px) {
  .lignes, .volet { width: min(100%, 720px); }
  .ligne {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "nom duree prix" "etat etat autre";
    row-gap: 4px; min-height: 64px; padding: 10px 14px;
  }
  .ligne__nom { grid-area: nom; font-size: 17px; }
  .ligne__duree { grid-area: duree; font-size: 15px; }
  .ligne__prix { grid-area: prix; }
  .ligne__autre { grid-area: autre; font-size: 14px; text-align: right; }
  .ligne__etat { grid-area: etat; font-size: 14px; }
  .ligne__va { display: none; }
  .volet__corps { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .titre { font-size: 19vw; }
  .titre .l2, .titre .l3 { display: block; }
  .s1__metier { font-size: 16px; max-width: 62%; }
  .s1__phrase { font-size: 17px; width: 100%; padding: 12px 14px; background: rgb(16 38 27 / .55); }
  .s1__phrase + .lignes { margin-top: 2px; }
  .s1__niveau { right: calc(var(--marge) + 34px); font-size: 16px; }
  .lignes, .volet { width: 100%; }
  .volet__corps { padding-inline: 14px; }
}

/* Scène 2 — le plan d'eau. */
.s2 {
  height: calc(100svh - var(--entete-h) - var(--regle-h)); min-height: 520px; max-height: 1100px;
  overflow: hidden; background: var(--carte-eau);
}
.carte { position: absolute; inset: 0; }
.carte svg { width: 100%; height: 100%; display: block; }
.m-eau { fill: var(--carte-eau); }
.m-ocean { fill: url(#m-ho); }
.m-vase { fill: url(#m-pt); transition: opacity .3s; }
.m-vase-bord { fill: none; stroke: #4C6155; stroke-width: calc(var(--u, 1) * 1.2px); stroke-dasharray: calc(var(--u, 1) * 3px) calc(var(--u, 1) * 3px); }
.m-sable { fill: #E9EEE6; stroke: #9AAAA0; stroke-width: calc(var(--u, 1) * 1px); }
.m-terre { fill: #fff; stroke: #4C6155; stroke-width: calc(var(--u, 1) * 1.4px); stroke-linejoin: round; }
.m-ile { fill: url(#m-hz); stroke: var(--encre); stroke-width: calc(var(--u, 1) * 2px); }
.mk-v { fill: var(--pin); }
.mk-b { fill: #fff; stroke: var(--encre); stroke-width: 2; }
.mk-c { fill: var(--encre); }
.ml { fill: var(--gris); font: 500 calc(var(--u, 1) * 13px) var(--texte); }
.ml-town { fill: var(--encre); font: 700 calc(var(--u, 1) * 20px) var(--titre); }
.ml-place { fill: var(--encre); font-size: calc(var(--u, 1) * 14px); }
.ml-island { fill: var(--encre); font: 700 calc(var(--u, 1) * 14px) var(--texte); paint-order: stroke; stroke: #fff; stroke-width: calc(var(--u, 1) * 4px); stroke-linejoin: round; }
.ml-chan, .ml-flat { font-style: italic; paint-order: stroke; stroke: var(--carte-eau); stroke-width: calc(var(--u, 1) * 3px); stroke-linejoin: round; }
.ml-flat { fill: #3E4A3A; }
.ml-ocean { fill: var(--pin); font: 600 calc(var(--u, 1) * 15px) var(--texte); writing-mode: vertical-rl; }
.m-r { display: none; }
.m-r.est-choisie { display: inline; }
.m-r-bord { fill: none; stroke: #fff; stroke-width: calc(var(--u, 1) * 9px); stroke-linecap: round; stroke-linejoin: round; }
.m-r-trait { fill: none; stroke: var(--pin); stroke-width: calc(var(--u, 1) * 4px); stroke-linecap: round; stroke-linejoin: round; transition: stroke-dasharray .6s; }
.m-r.est-impraticable .m-r-trait { stroke: var(--encre); stroke-dasharray: calc(var(--u, 1) * 7px) calc(var(--u, 1) * 9px); }
.m-r.est-impraticable .m-r-bord { stroke-opacity: .7; }
.m-poi, .m-croix, .m-passes, .m-raison { display: none; }
.m-poi.est-visible, .m-croix.est-visible, .m-passes.est-visible, .m-raison.est-visible { display: inline; }
.m-poi circle { fill: #fff; stroke: var(--pin); stroke-width: 2.5; }
.m-poi text { font: 600 13px var(--texte); fill: var(--encre); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.m-base rect { fill: var(--encre); }
.m-base text { font: 700 14px var(--titre); fill: var(--encre); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.m-croix path { stroke: var(--encre); stroke-width: 3.5; stroke-linecap: round; }
.m-croix text, .m-passes text { font: 600 14px var(--texte); fill: var(--encre); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.m-passes-l { stroke: var(--encre); stroke-width: calc(var(--u, 1) * 3px); }
.m-passes-b { stroke: var(--encre); stroke-width: calc(var(--u, 1) * 3px); stroke-linecap: round; }
.m-raison text { font: 600 15px var(--texte); fill: #fff; paint-order: stroke; stroke: var(--encre); stroke-width: 9px; stroke-linejoin: round; }

.s2__haut { position: absolute; z-index: 2; top: clamp(16px, 3vh, 32px); left: var(--marge); right: var(--marge); display: grid; gap: 6px; justify-items: start; }
.s2__noms { display: flex; gap: 4px 26px; flex-wrap: wrap; }
.s2__noms button {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  font: 600 17px/1 var(--texte); color: var(--encre);
}
.s2__noms svg { flex: none; width: 12px; height: 12px; fill: var(--encre); visibility: hidden; }
.s2__noms [aria-pressed="true"] svg { visibility: visible; }
.s2__noms [aria-pressed="false"] { font-weight: 500; }
.s2__lecture {
  font: 600 clamp(20px, 1.7vw, 30px)/1.2 var(--titre); font-variant-numeric: tabular-nums;
  background: rgb(207 227 221 / .9); padding: 2px 8px 4px 0; max-width: 34ch;
}
.s2__vignette {
  position: absolute; z-index: 2; right: var(--marge); bottom: 22px; width: clamp(200px, 14.5vw, 280px);
  background: #fff; padding: 6px 6px 8px;
}
.s2__cadre { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.s2__cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s; }
.s2__cadre [data-v="basse"] { opacity: 0; }
.est-basse .s2__cadre [data-v="basse"] { opacity: 1; }
.est-basse .s2__cadre [data-v="haute"] { opacity: 0; }
.s2__vignette figcaption { margin-top: 6px; font: 500 14px/1.3 var(--texte); }
.s2__mention { position: absolute; z-index: 2; left: var(--marge); bottom: 12px; font: 500 12.5px/1.3 var(--texte); color: var(--gris); background: rgb(207 227 221 / .9); padding: 1px 4px; }
@media (max-width: 767px) {
  .s2__haut { left: 0; right: 0; top: 0; padding: 4px 0 10px; background: rgb(207 227 221 / .94); }
  .s2__noms { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 var(--marge); max-width: 100%; gap: 18px; }
  .s2__noms::-webkit-scrollbar { display: none; }
  .s2__noms button { white-space: nowrap; font-size: 16px; }
  .s2__lecture { margin-left: var(--marge); font-size: 18px; max-width: calc(100% - 2 * var(--marge)); background: none; padding: 0; }
  .s2__vignette { width: 132px; bottom: 34px; padding: 4px 4px 6px; }
  .s2__vignette figcaption { font-size: 12.5px; }
  .s2__mention { bottom: 8px; right: var(--marge); }
}

/* Scène 3 — à bord. */
.s3 {
  display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3.4vh, 40px);
  padding: clamp(28px, 5vh, 64px) var(--marge);
}
.file svg { display: block; width: 100%; height: auto; overflow: visible; }
.j-sillage { fill: none; stroke: #8FB3A1; stroke-width: 2; stroke-linecap: round; }
.j-coque { stroke-width: .05; }
.j-libre .j-coque { fill: var(--pin); stroke: var(--pin); }
.j-pris .j-coque { fill: #fff; stroke: var(--encre); stroke-width: .06; }
.j-moniteur .j-coque { fill: var(--encre); stroke: var(--encre); }
.j-selle { fill: #fff; }
.j-pris .j-selle { fill: none; stroke: var(--encre); stroke-width: 1.5; }
.j-guidon { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.j-pris .j-guidon { stroke: var(--encre); }
.j-mot { font: 600 13px var(--texte); fill: var(--encre); }
.file__dit { font: 600 clamp(22px, 2vw, 32px)/1.2 var(--titre); font-variant-numeric: tabular-nums; max-width: 62ch; }
.exemple { font: 500 13px/1 var(--texte); color: var(--gris); vertical-align: middle; margin-left: 6px; }
.gestes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.gestes li { display: flex; align-items: center; gap: 16px; }
.gestes svg { width: clamp(72px, 6vw, 112px); height: auto; flex: none; color: var(--encre); }
.gestes p { font: 500 18px/1.3 var(--texte); }
.s3__regle { font: 500 17px/1.45 var(--texte); color: var(--gris); max-width: 62ch; }
@media (max-width: 1023px) {
  .gestes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .gestes { gap: 20px 12px; }
  .gestes li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gestes svg { width: 84px; }
  .gestes p { font-size: 16px; }
  .s3__regle { font-size: 16px; }
}