/* U, le golfe : la carte (eau verte au nord, la Jument en rouge au sud), puis le rouge qui envahit l'écran et le courant. */
.golfe { position: relative; }
.carte { z-index: 1; }
.courant { z-index: 6; }
.courant > * { transition: opacity .3s; }
.courant.est-couvert { visibility: hidden; }
.courant.est-couvert > * { opacity: 0; }
.carte {
  position: relative;
  background: var(--vert);
  padding: calc(var(--entete-h) + 28px) 0 24px;
  overflow: clip;
}
.carte__titre { padding-inline: max(var(--marge), env(safe-area-inset-left)); font-size: 10vw; }
.carte__fond { margin-top: 16px; aspect-ratio: 416 / 440; }
.carte__fond svg { width: 100%; height: 100%; }
.carte__danger { padding: 14px max(var(--marge), env(safe-area-inset-left)) 0; font-weight: 600; font-size: 16px; }
.carte__credit { padding: 6px max(var(--marge), env(safe-area-inset-left)) 0; font-size: 14px; color: var(--sur-vert); }
.carte__disque {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rouge);
  transform: scale(.01);
  visibility: hidden;
  pointer-events: none;
}
.carte__disque.est-pret { visibility: visible; }
.carte svg text { font-family: var(--texte); }
.c-nom { font-weight: 600; fill: var(--encre); paint-order: stroke; stroke-linejoin: round; }

@media (min-width: 900px) {
  .carte { height: 100svh; min-height: 560px; padding: 0; background: var(--vert-pale); }
  .carte__titre {
    position: absolute;
    z-index: 2;
    top: calc(var(--entete-h) + 32px);
    left: 0;
    font-size: clamp(40px, 3.8vw, 72px);
  }
  .carte__fond { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; aspect-ratio: auto; }
  .carte__danger { display: none; }
  .carte__credit { position: absolute; z-index: 2; right: max(var(--marge), env(safe-area-inset-right)); bottom: 14px; padding: 4px 10px; background: #fff; color: var(--encre); }
}

/* Le courant : aplat rouge, « 9,1 » en blanc, la manette et la scène vue de profil. */
.courant {
  position: relative;
  background: var(--rouge);
  color: #fff;
  padding: calc(var(--entete-h) + 24px) max(var(--marge), env(safe-area-inset-left)) 0;
  display: grid;
  overflow: clip;
}
.courant__chiffre { display: grid; gap: 8px; }
.courant__chiffre b { font: 900 36vw/.85 var(--titre); letter-spacing: -.02em; }
.courant__chiffre span { font-weight: 600; font-size: 20px; max-width: 22ch; }
.courant__texte { display: grid; gap: 16px; margin-top: 32px; }
.courant__phrase { font: 900 36px/.95 var(--titre); letter-spacing: -.01em; }
.courant__texte > p:not([class]) { font-size: 17px; max-width: 46ch; }
.courant__scene { margin: 28px calc(-1 * var(--marge)) 0; height: 34svh; min-height: 220px; }
.scene { width: 100%; height: 100%; }
.scene .blanc { fill: #fff; }
.filet { animation: filet var(--d, 1.2s) linear infinite; animation-delay: var(--r, 0s); }
@keyframes filet {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(var(--dx, -120px)); opacity: 0; }
}
.courant.est-hors .filet { animation-play-state: paused; }

.manette { position: relative; margin-top: 8px; max-width: 420px; }
.manette__dessin { width: 100%; height: auto; overflow: visible; }
.manette__boitier { fill: #fff; }
.manette__levier rect { fill: #fff; }
.manette__levier circle { fill: #fff; stroke: var(--encre); stroke-width: 3; }
.manette__levier { transform-origin: 120px 240px; transform-box: view-box; transition: transform .12s ease-out; }
.manette__pivot { fill: var(--encre); }
.m-grad { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.m-chiffre { font: 700 15px var(--texte); fill: #fff; }
.m-bout { font: 600 15px var(--texte); fill: #fff; }
.manette__curseur {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 78%;
  margin: 0;
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
}
.manette:has(.manette__curseur:focus-visible) .manette__dessin { outline: 3px solid #fff; outline-offset: 4px; }
.manette__phrase { margin-top: 10px; font-weight: 700; font-size: 18px; min-height: 2.6em; }

@media (min-width: 900px) {
  .courant {
    min-height: 100svh;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    column-gap: var(--gout);
    padding-top: calc(var(--entete-h) + 40px);
  }
  .courant__chiffre { grid-column: 1 / 7; grid-row: 1; align-self: start; }
  .courant__chiffre b { font-size: clamp(140px, 17vw, 330px); }
  .courant__chiffre span { font-size: 22px; }
  .courant__texte { grid-column: 7 / 13; grid-row: 1 / 3; margin-top: 0; align-content: start; }
  .courant__phrase { font-size: clamp(36px, 2.5vw, 48px); }
  .courant__texte > p:not([class]) { font-size: 18px; }
  .courant__scene { grid-column: 1 / -1; grid-row: 3; }
}
@media (min-width: 1440px) {
  .courant__texte { grid-column: 8 / 13; }
}