/* Une seule vue, rien ne défile : le décor (rocher, arc des 300 m, convoi), la question, la colonne
   des réponses. Téléphone d'abord : le décor tient dans une bande entre la question et les rangées.
   --ih = hauteur de référence de la photo (1 200 unités) ; tout le décor en découle, à la même échelle. */
.scene {
  --ih: min(calc(var(--H) * 0.3), 70vw);
  --mer-degrade: linear-gradient(#628ab0, #547ca6 calc(var(--ih) * 0.04), #3b6792 calc(var(--ih) * 0.08), #2d5a86 calc(var(--ih) * 0.16), #295780);
  position: relative;
  height: var(--H);
  overflow: hidden;
  isolation: isolate;
}
.decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.branche { display: none; }

/* Téléphone : bande de 27 % à 46 % de la hauteur, la mer en bas de la bande, le rocher à droite */
.cadre {
  position: absolute;
  left: 0;
  right: 0;
  top: 27%;
  height: 19%;
  overflow: hidden;
}
.cadre::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--ih) * 0.4);
  background: var(--mer-degrade);
}
.tableau {
  position: absolute;
  width: calc(var(--ih) * 2.5);
  height: calc(var(--ih) * 0.64);
  left: calc(100vw - 16px - var(--ih) * 1.9417);
  top: calc(var(--H) * 0.19 - var(--ih) * 0.654);
  background: linear-gradient(transparent 39.7%, var(--mer) 39.7%);
}
.rocher, .convoi { position: absolute; inset: 0; width: 100%; height: 100%; }
.rocher { object-fit: fill; }
.convoi { overflow: visible; }
.arc { fill: none; stroke: var(--blanc); stroke-width: 12; stroke-dasharray: 26 30; stroke-linecap: round; opacity: 0.9; }

.mention {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: calc(54% + 8px);
  max-width: 36%;
  padding: 3px 8px 4px;
  background: rgb(27 15 23 / 0.6);
  color: var(--blanc);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  border-radius: 3px;
}
.mention span { display: block; }
.mention-exemple { opacity: 0.92; }

.question-zone {
  position: absolute;
  z-index: 3;
  top: var(--plaque-bas);
  left: var(--g);
  right: var(--g);
  height: calc(27% - var(--plaque-bas));
  display: flex;
  align-items: center;
  overflow: clip;
  overflow-clip-margin: 12px;
}
.question {
  font: 400 min(14.4vw, 56px) / 1.02 var(--titre);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.question .ligne-in-mask { overflow-clip-margin: 0.14em; }
.question.total { font-size: 72px; line-height: 1; }
.sous-total { padding-top: 6px; font-size: 18px; font-weight: 600; line-height: 1.3; }

.colonne {
  position: absolute;
  z-index: 3;
  top: 46%;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--g) 0;
  background: var(--magenta);
}
.ecrans {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 -10px;
  padding-inline: 10px;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.6) transparent;
}
.js .ecran { display: none; }
.js .ecran.actif { display: block; }

@media (max-height: 680px) {
  .scene { --ih: min(calc(var(--H) * 0.27), 70vw); }
  .cadre { top: 33%; height: 17%; }
  .tableau { top: calc(var(--H) * 0.17 - var(--ih) * 0.654); }
  .question-zone { height: calc(33% - var(--plaque-bas)); }
  .question { font-size: 36px; }
  .question.total { font-size: 56px; }
  .colonne { top: 50%; }
  .mention { bottom: calc(50% + 6px); }
}

/* Tablette en hauteur : même ossature, plus d'air */
@media (min-width: 600px) {
  .question { font-size: min(9vw, 96px); }
  .question.total { font-size: 104px; }
  .scene { --ih: min(calc(var(--H) * 0.3), 60vw); }
  .tableau { left: calc(100vw - var(--g) - var(--ih) * 1.9417); }
  .mention { left: var(--g); font-size: 14px; }
}

/* Téléphone en paysage : question à gauche, rangées à droite, décor réduit au rocher */
@media (max-height: 500px) and (orientation: landscape) {
  .question-zone { right: 52%; height: calc(52% - var(--plaque-bas)); }
  .question { font-size: 34px; }
  .question.total { font-size: 48px; }
  .scene { --ih: calc(var(--H) * 0.5); }
  .cadre { top: 52%; bottom: 0; height: auto; right: 50%; }
  .cadre::before { display: none; }
  .tableau { top: calc(var(--H) * 0.48 - var(--ih) * 0.6); left: calc(50vw - 12px - var(--ih) * 1.9417); }
  .colonne { top: var(--plaque-bas); left: 50%; }
  .mention { display: none; }
}

/* Ordinateur : aplat magenta plein écran, la mer sur le tiers bas, le rocher à 73 % de la largeur */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .branche {
    display: block;
    position: absolute;
    top: calc(var(--H) * -0.06);
    right: -2vw;
    width: clamp(320px, 31vw, 600px);
    height: auto;
    transform-origin: 92% 4%;
  }
  .scene { --ih: min(calc(var(--H) * 0.95), 1200px); }
  .cadre { inset: 0; height: auto; }
  .cadre::before { display: none; }
  .arc { stroke-width: 6; stroke-dasharray: 20 16; }
  .tableau {
    left: calc(73vw - var(--ih) * 1.4917);
    top: calc(var(--H) * 0.65 - var(--ih) * 0.254);
    background: linear-gradient(transparent 39.7%, var(--mer) 39.7%);
  }
  .scene::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;
    background: var(--mer-degrade);
  }
  .mention { left: auto; right: var(--g); bottom: 22px; max-width: none; font-size: 14px; }
  .mention span { display: inline; }
  .mention-exemple::before { content: " · "; }

  .question-zone {
    top: calc(var(--plaque-bas) + 20px);
    right: auto;
    width: min(64vw, 900px);
    height: calc(var(--qfs) * 2.04 + 8px);
    align-items: flex-end;
    --qfs: clamp(52px, 6.7vw, 112px);
  }
  .question { font-size: var(--qfs); }
  .question.total { font-size: 120px; line-height: 0.98; }
  .sous-total { font-size: 22px; padding-top: 4px; }
  .colonne {
    top: calc(var(--plaque-bas) + 20px + clamp(52px, 6.7vw, 112px) * 2.04 + 28px);
    right: auto;
    background: none;
    width: calc(var(--g) + clamp(420px, 38vw, 560px));
    padding-right: 0;
  }
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) and (max-height: 800px) {
  .question-zone { height: calc(var(--qfs) * 1.02 + 8px); --qfs: 56px; }
  .question { text-wrap: nowrap; }
  .question.total { font-size: 60px; }
  .question-zone > div { display: flex; align-items: baseline; gap: 28px; }
  .sous-total { padding: 0; }
  .colonne { top: calc(var(--plaque-bas) + 20px + 57px + 24px); }
}