/* Habillage validé : courbe claire, liseré doré, mains et billets inchangés. */
.echange {
  --echange-hauteur: 100vh;
  --echange-fond: #123d2c;
  --echange-or: #e4b535;
  --echange-arrivee: 1;
  --echange-approche: 0;
  --echange-sortie: 0;
  background: var(--craie);
  color: var(--encre);
  border-bottom: 1px solid var(--filet);
}
.echange-sticky {max-width:1440px;margin-inline:auto;padding:28px var(--bord) 18px}
.echange-entete {display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:22px}
.echange-entete h1 {font-size:clamp(1.8rem,3.2vw,2.8rem);max-width:24ch}
.echange-theatre {position:relative;isolation:isolate;overflow:hidden;border-radius:6px 48px 6px 48px;background:var(--echange-fond)}
.echange-courbe {position:absolute;pointer-events:none;width:104%;left:-48%;top:-46%;height:146%;border-radius:44% 52% 43% 36% / 24% 47% 58% 58%;transform:rotate(-13deg);z-index:0}
.echange-courbe-or {background:var(--echange-or);height:151%;left:-47%}
.echange-courbe-claire {background:var(--craie)}
.echange-contours {position:absolute;right:-29%;top:-25%;width:70%;height:110%;border:1px solid #f7f8f333;border-radius:43% 57% 58% 42% / 52% 39% 61% 48%;transform:rotate(-27deg);pointer-events:none}
.echange-contours::after {content:'';position:absolute;inset:22px;border:1px solid #f7f8f31c;border-radius:inherit}
.echange-recit {position:relative;z-index:2;text-align:left;width:47%;padding:34px 0 8px 34px}
.echange-chapitre {padding-block:14px}
.echange-chapitre h2 {font-size:clamp(1.7rem,3.45vw,3.1rem);line-height:1.08;letter-spacing:-.035em;margin:0;font-weight:700;text-wrap:balance;max-width:16ch}
.echange-chapitre p {color:var(--gris);font-size:15px;line-height:1.6;max-width:37ch;margin:14px 0 0}
.echange-image {position:relative;z-index:3;isolation:isolate;width:100%;height:400px}
.echange-main {display:block;position:absolute;object-fit:contain;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 10px 10px #09231920)}
.echange-main-devises {width:var(--main-devises-largeur,52.4%);left:-3%;bottom:0;transform-origin:16% 70%}
.echange-main-gourdes {width:var(--main-gourdes-largeur,45.9%);right:-3%;top:0;transform-origin:90% 72%}
.echange-scene-pied {display:none;position:relative;z-index:4;align-items:center;justify-content:flex-end;gap:24px;padding:15px 28px 20px}
.echange-invitation {font-size:12px;color:#eef3e9;margin:0}
.echange-indicateurs {display:flex;gap:6px;align-items:center}
.echange-indicateurs span {width:22px;height:3px;border-radius:2px;background:#f7f8f341}
.echange[data-etape="0"] .echange-indicateurs span:nth-child(1),
.echange[data-etape="1"] .echange-indicateurs span:nth-child(2),
.echange[data-etape="2"] .echange-indicateurs span:nth-child(3) {width:46px;background:var(--echange-or)}

/* Même parcours lent et réversible : aucune capture de molette ou du toucher. */
@supports (height:100svh) {.echange {--echange-hauteur:100svh}}
.echange.is-animated {height:calc(var(--echange-hauteur) * 4)}
.echange.is-animated .echange-sticky {position:sticky;top:0;height:var(--echange-hauteur);display:flex;flex-direction:column;overflow:hidden}
.echange.is-animated .echange-entete {flex:none}
.echange.is-animated .echange-theatre {flex:1;min-height:0;display:flex;flex-direction:column}
.echange.is-animated .echange-recit {display:grid;flex:none}
.echange.is-animated .echange-chapitre {grid-area:1/1;opacity:var(--echange-presence,0);transform:translateY(var(--echange-decalage,0px));pointer-events:none;padding:0}
.echange.is-animated .echange-image {flex:1;min-height:0;height:auto}
.echange.is-animated .echange-main {will-change:transform}
.echange.is-animated .echange-main-devises {transform:translateX(calc((1 - var(--echange-arrivee)) * -8% + var(--echange-approche) * 2% - var(--echange-sortie) * 1%)) rotate(calc(-3deg + var(--echange-approche) * 2deg - var(--echange-sortie) * 2deg))}
.echange.is-animated .echange-main-gourdes {transform:translateX(calc((1 - var(--echange-arrivee)) * 8% - var(--echange-approche) * 2% + var(--echange-sortie) * 1%)) rotate(calc(3deg - var(--echange-approche) * 2deg - var(--echange-sortie) * 1deg))}
.echange.is-animated .echange-courbe {transform:rotate(calc(-13deg + var(--echange-approche) * 3deg + var(--echange-sortie) * 2deg))}
.echange.is-animated .echange-contours {transform:rotate(calc(-27deg + var(--echange-approche) * 12deg + var(--echange-sortie) * 10deg))}
.echange.is-animated .echange-scene-pied {display:flex;flex:none}

@media(max-width:1000px) and (min-width:701px) {
  .echange-sticky {padding-inline:26px}
  .echange-recit {width:54%;padding:28px 0 8px 28px}
  .echange-chapitre h2 {font-size:2.2rem}
  .echange-chapitre p {font-size:14px}
}
@media(max-width:599px), (max-width:700px) and (min-height:501px) {
  .echange-sticky {padding:24px 12px 14px}
  .echange-entete {align-items:center;gap:14px;margin:0 8px 18px}
  .echange-entete h1 {font-size:clamp(1.4rem,6vw,2rem);max-width:16ch}
  .echange-theatre {border-radius:4px 34px 4px 34px}
  .echange-recit {width:89%;padding:26px 0 8px 22px}
  .echange-chapitre h2 {font-size:clamp(1.65rem,7.8vw,2.35rem);line-height:1.08;max-width:16ch}
  .echange-chapitre p {font-size:13px;line-height:1.55;max-width:34ch;margin-top:12px}
  .echange-courbe {width:180%;left:-73%;top:-36%;height:111%}
  .echange-courbe-or {width:183%;left:-73%;height:115%}
  .echange-contours {width:150%;height:100%;right:-72%;top:-6%}
  .echange-image {height:350px}
  .echange-main-devises {width:var(--main-devises-largeur,72%);left:-3%;top:0;bottom:auto}
  .echange-main-gourdes {width:var(--main-gourdes-largeur,67%);right:-3%;top:auto;bottom:0}
  .echange-scene-pied {justify-content:space-between;padding:10px 22px 17px}
  .echange-invitation {font-size:11px}
  .echange-indicateurs span {width:14px}
  .echange[data-etape] .echange-indicateurs span:nth-child(n) {width:14px}
  .echange[data-etape="0"] .echange-indicateurs span:nth-child(1),
  .echange[data-etape="1"] .echange-indicateurs span:nth-child(2),
  .echange[data-etape="2"] .echange-indicateurs span:nth-child(3) {width:28px}
  .echange:not(.is-animated) .echange-recit {width:100%;padding:22px;background:var(--craie)}
}
@media(max-height:800px) and (min-width:701px) {
  .echange-sticky {padding-top:18px;padding-bottom:12px}
  .echange-entete {margin-bottom:16px}
  .echange-entete h1 {font-size:2rem}
  .echange-recit {padding-top:24px}
  .echange-chapitre h2 {font-size:2.3rem}
  .echange-chapitre p {font-size:14px;line-height:1.5;margin-top:12px}
  .echange-scene-pied {padding-block:10px 15px}
}
/* La hauteur ajuste les espaces, jamais l'accès à l'animation. */
@media(max-height:700px) {
  .echange-sticky {padding-top:12px;padding-bottom:10px}
  .echange-entete {margin-bottom:10px}
  .echange-recit {padding-top:16px}
  .echange-chapitre h2 {font-size:clamp(1.5rem,5.5vw,2rem)}
  .echange-chapitre p {font-size:13px;line-height:1.45;margin-top:9px}
  .echange-scene-pied {padding-block:8px 12px}
}
@media(max-height:500px) and (min-width:600px) {
  .echange-sticky {padding:8px 22px}
  .echange-entete {margin-bottom:4px}
  .echange-entete h1 {font-size:1.5rem;max-width:none}
  .echange-recit {width:47%;padding:10px 0 4px 22px}
  .echange-chapitre h2 {font-size:1.5rem;max-width:30ch}
  .echange-chapitre p {font-size:12px;line-height:1.4;max-width:62ch;margin-top:6px}
  .echange-scene-pied {padding-block:4px 8px}
}
/* L'accessibilité garde les mêmes étapes, avec un fondu sans déplacement. */
@media(prefers-reduced-motion:reduce) {
  .echange.is-animated .echange-main {will-change:auto;transform:none}
  .echange.is-animated .echange-chapitre {transform:none}
  .echange.is-animated .echange-courbe {transform:rotate(-13deg)}
  .echange.is-animated .echange-contours {transform:rotate(-27deg)}
}
@media print {
  .echange.is-animated {height:auto}
  .echange.is-animated .echange-sticky {position:static;height:auto;display:block;overflow:visible}
  .echange-theatre {display:block!important;background:white;border-radius:0;overflow:visible}
  .echange-courbe,.echange-contours {display:none}
  .echange.is-animated .echange-image {height:260px;width:600px;max-width:100%;max-height:none}
  .echange.is-animated .echange-main {opacity:1;transform:none}
  .echange-recit,.echange.is-animated .echange-recit {display:block;width:100%;padding:0}
  .echange.is-animated .echange-chapitre {opacity:1;transform:none;break-inside:avoid;padding-block:14px}
  .echange-scene-pied {display:none!important}
}