/* Un billet, deux légendes. Le mouvement n'existe qu'en réponse au défilement. */
.billets{--billets-hauteur:100vh;--billet-vert:#23652d;--billet-or:#87641c;background:#fff;color:var(--encre);border-top:1px solid var(--filet);scroll-margin-top:0}
.billets-sticky{max-width:1320px;margin-inline:auto;padding:32px var(--bord) 16px}
.billets-scenes{position:relative}
.billet-scene{--presence:1;--trait:1;--legende:1;--translation:0px;--rotation:0deg;--zoom:1;position:relative;padding-top:28px}
.billet-scene + .billet-scene{border-top:1px solid var(--filet);margin-top:34px}
.billet-identite{display:flex;align-items:baseline;justify-content:center;gap:16px}
.billet-identite h3{font-weight:400;font-size:clamp(1rem,1.9vw,1.3rem);line-height:1.25;margin:0;letter-spacing:-.015em}
.billet-etape{font-size:13px;font-variant-numeric:tabular-nums;color:var(--encre);white-space:nowrap}
.billet-etape span{color:#727c73}
.billet-composition{position:relative;height:480px;margin-top:12px}
.billet-image-cadre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56%;max-width:min(730px,calc(440px * var(--billet-ratio,2)))}
.billet-image{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 15px rgb(18 41 27 / .12));transform:translateY(var(--translation)) rotate(var(--rotation)) scale(var(--zoom));opacity:var(--presence);transform-origin:50% 55%;will-change:transform,opacity}
.billet-offre{position:absolute;max-width:255px;width:22%;z-index:2;opacity:var(--legende);transform:translateY(calc(var(--translation) * .3))}
.billet-offre p{margin:0}
.billet-offre-achat{top:8px;left:0;--sens:var(--billet-vert)}
.billet-offre-vente{right:0;bottom:8px;--sens:var(--billet-or);text-align:right}
.billet-sens{font-size:15px;font-weight:700;color:var(--sens);line-height:1.25}
.billet-offre .billet-action{font-size:13px;margin-top:12px;color:var(--gris)}
.billet-offre .billet-somme{font-size:clamp(1.7rem,2.8vw,2.55rem);font-weight:700;line-height:1.13;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:2px}
.billet-somme small{font-size:.4em;letter-spacing:0;font-weight:400;color:var(--gris)}
.billet-offre .billet-taux{font-size:12px;color:var(--gris);line-height:1.45;margin-top:10px}
.billet-offre .billet-indisponible{font-weight:700;font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.2;margin-top:7px}
.billet-lignes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;display:none}
.billet-ligne{color:var(--billet-vert);opacity:var(--trait)}
.billet-ligne-vente{color:var(--billet-or)}
.billet-ligne path{stroke:currentColor;stroke-width:1.2;fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--trait));vector-effect:non-scaling-stroke}
.billet-attache{fill:#fff;stroke:currentColor;stroke-width:1.2}
.billet-point{fill:currentColor}
.billets-pied{display:none;align-items:center;justify-content:space-between;gap:20px;padding-top:12px}
.billets-navigation{display:flex;gap:8px;flex-wrap:wrap}
.billets-navigation button{position:relative;appearance:none;min-width:68px;min-height:44px;border:0;padding:9px 16px;background:transparent;color:var(--gris);font:inherit;font-size:14px;font-weight:700;cursor:pointer;border-radius:3px}
.billets-navigation button[aria-current="step"]{color:var(--ardoise);background:#eff3ec}
.billets-navigation button:hover{color:var(--ardoise);background:#f3f5f0}
.billets-navigation button:focus-visible{outline:2.5px solid var(--or);outline-offset:3px}
.billets-progression{position:absolute;bottom:0;left:14px;right:14px;height:2px;background:var(--vert);transform:scaleX(var(--avancement,0));transform-origin:left center}
.billets-invitation{margin:0;font-size:12px;color:var(--gris)}
.billets-fleche{display:inline-block;font-size:17px;margin-right:5px}
.billets-fleche.vers-haut{transform:rotate(180deg)}
@media (prefers-reduced-motion:no-preference){.billets-fleche{transition:transform .25s ease}}
.billets-precision{font-size:11px;line-height:1.5;color:var(--gris);text-align:center;margin:16px 0 0}
.billets.is-ready .billet-lignes{display:block}

/* Sans JavaScript, les billets restent lisibles dans le flux de la page. */
@supports (height:100svh) {.billets{--billets-hauteur:100svh}}
.billets.is-animated{height:calc(var(--billets-hauteur) * (1 + (var(--billets-nombre) - 1) * 1.6))}
.is-animated .billets-sticky{position:sticky;top:0;height:var(--billets-hauteur);display:flex;flex-direction:column;overflow:hidden}
.is-animated .billets-scenes{flex:1 1 auto;min-height:0;margin-top:8px}
.is-animated .billet-scene{position:absolute;inset:0;padding-top:14px;margin:0;border:0;display:flex;flex-direction:column;pointer-events:none}
.is-animated .billet-scene[data-active="true"]{pointer-events:auto}
.is-animated .billet-identite{opacity:var(--legende);flex:0 0 auto}
.is-animated .billet-composition{flex:1 1 auto;min-height:0;height:auto;margin-top:12px;margin-bottom:10px;overflow:hidden}
.is-animated .billet-offre-achat{top:8px}
.is-animated .billet-offre-vente{bottom:8px}
.is-animated .billets-pied{display:flex;flex:0 0 auto}
.is-animated .billets-precision{flex:0 0 auto;margin-top:10px}

@media (max-width:599px), (max-width:900px) and (min-height:651px){
  .billets-sticky{padding:24px 22px 14px}
  .billet-identite{gap:10px;justify-content:flex-start}
  .billet-identite h3{font-size:16px}
  .billet-etape{font-size:11px}
  .billet-composition{height:490px;margin-top:12px}
  .billet-image-cadre{width:100%;max-width:min(530px,calc(240px * var(--billet-ratio)))}
  .billet-offre{max-width:none;width:76%}
  .billet-sens{font-size:14px}
  .billet-offre .billet-action{font-size:12px;margin-top:6px}
  .billet-offre .billet-somme{font-size:clamp(1.7rem,7.6vw,2.3rem)}
  .billet-offre .billet-taux{font-size:11px;margin-top:5px}
  .billet-taux br{display:none}.billet-taux br::after{content:' '}
  .billets-navigation{gap:4px;width:100%;justify-content:space-between}
  .billets-navigation button{min-width:62px;padding-inline:13px;font-size:12px}
  .billets-pied{flex-wrap:wrap;justify-content:center;gap:9px;padding-top:2px}
  .billets-invitation{font-size:10px;text-align:center}
  .billets-fleche{font-size:13px}
  .billets-precision{font-size:10px;margin-top:9px}
  .is-animated .billet-scene{padding-top:8px}
  .is-animated .billet-composition{margin-top:12px;margin-bottom:5px}
  .is-animated .billets-precision{margin-top:8px}
}
@media (max-width:900px) and (min-height:790px){.is-animated .billet-offre-achat{top:20px}.is-animated .billet-offre-vente{bottom:20px}}
@media (max-height:700px) {
  .billets-sticky{padding:14px 22px 10px}
  .is-animated .billets-scenes{margin-top:4px}
  .is-animated .billet-scene{padding-top:6px}
  .is-animated .billet-composition{margin-top:6px;margin-bottom:4px}
  .billet-offre .billet-action{margin-top:4px}
  .billet-offre .billet-taux{margin-top:4px}
  .billets-pied{padding-top:0;gap:4px}
  .is-animated .billets-precision{margin-top:4px}
}
@media (max-height:650px) and (min-width:600px) {
  .billets-sticky{padding:10px 22px 8px}
  .billet-identite h3{font-size:15px}
  .billet-etape{font-size:11px}
  .billet-sens{font-size:12px}
  .billet-offre .billet-action{font-size:11px}
  .billet-offre .billet-somme{font-size:clamp(1.35rem,3vw,1.85rem)}
  .billet-offre .billet-taux{font-size:10px}
  .billets-invitation,.billets-precision{font-size:10px}
  .billets-navigation button{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .billet-image{filter:none;will-change:auto;transform:none}
  .billet-offre{transform:none}
  .billets-progression{display:none}
}
@media print{
  .billets.is-animated{height:auto}.is-animated .billets-sticky{height:auto;position:static;overflow:visible;display:block}
  .is-animated .billets-scenes{display:block}.is-animated .billet-scene{position:relative;display:block;break-inside:avoid}
  .is-animated .billet-composition{height:350px}.billet-scene{--presence:1!important;--trait:1!important;--legende:1!important;--translation:0px!important;--rotation:0deg!important;--zoom:1!important}
  .is-animated .billet-identite{opacity:1}.billets-pied{display:none!important}
}