/* ============================================================
   evenement-prestige.css
   Mise en scène « prestige » d'un événement à thème (ex. Turquie – France, voir PRESTIGE dans
   evenement-experience.js) : drapeaux qui flottent, aurores aux couleurs des deux camps, particules,
   entrée cinématique, compte à rebours à bascule, célébrations de but. S'ajoute à classico.css sans le
   modifier. Tout est coupé si l'utilisateur demande moins d'animations (prefers-reduced-motion).
   ============================================================ */

.classico.prestige { --prestige-or: #ffd978; --px: 0; --py: 0; }

/* ---------- Décor : aurores + drapeaux géants + particules ---------- */
.prestige .classico-decor { height: 920px; }
.prestige-aurore { position: absolute; inset: -20% -10% 0; filter: blur(60px); opacity: .55; mix-blend-mode: screen; }
.prestige-aurore::before, .prestige-aurore::after { content: ''; position: absolute; top: 0; width: 60%; height: 90%; border-radius: 50%; animation: prestige-aurore 14s ease-in-out infinite alternate; }
.prestige-aurore::before { left: -8%; background: radial-gradient(closest-side, color-mix(in srgb, var(--dom) 80%, transparent), transparent 70%); }
.prestige-aurore::after { right: -8%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ext) 80%, transparent), transparent 70%); animation-delay: -7s; }
@keyframes prestige-aurore { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(4%, 6%, 0) scale(1.15); } }

/* Couture lumineuse au centre, là où les deux drapeaux se rencontrent. */
.prestige-couture { position: absolute; left: 50%; top: 0; width: 2px; height: 76%; transform: translateX(-50%); background: linear-gradient(180deg, transparent, #fff 30%, #fff 60%, transparent); box-shadow: 0 0 30px 6px rgba(255, 255, 255, .35); opacity: .5; animation: prestige-couture 3.2s ease-in-out infinite; }
@keyframes prestige-couture { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }

/* Drapeau qui flotte : 20 lamelles verticales de la même image, décalées dans le temps. */
.prestige-drapeau { position: absolute; top: 70px; width: min(46vw, 620px); aspect-ratio: 3 / 2; display: flex; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); opacity: .4;
  transform: translate3d(calc(var(--px) * var(--prof, 18px)), calc(var(--py) * var(--prof, 18px)), 0) perspective(900px) rotateY(var(--angle, 0deg)); transition: transform .25s ease-out; }
.prestige-drapeau-dom { left: -6%; --angle: 18deg; --prof: -22px; -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 98%); mask-image: linear-gradient(90deg, #000 45%, transparent 98%); }
.prestige-drapeau-ext { right: -6%; --angle: -18deg; --prof: 22px; -webkit-mask-image: linear-gradient(270deg, #000 45%, transparent 98%); mask-image: linear-gradient(270deg, #000 45%, transparent 98%); }
.prestige-drapeau i { flex: 1 1 0; background-image: var(--drapeau); background-size: 2000% 100%; background-position: calc(var(--i) * 100% / 19) 0; animation: prestige-vent 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.13s); position: relative; }
.prestige-drapeau i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .16), rgba(0, 0, 0, .28)); animation: prestige-reflet 2.6s ease-in-out infinite; animation-delay: inherit; }
@keyframes prestige-vent { 0%, 100% { transform: translateY(-3.5%) scaleY(1.02); } 50% { transform: translateY(3.5%) scaleY(.98); } }
@keyframes prestige-reflet { 0%, 100% { opacity: .15; } 50% { opacity: .75; } }

.prestige-particules { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Entrée cinématique (une fois par session, cliquable pour passer) ---------- */
.prestige .classico-entree { display: none !important; }
.prestige-entree { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 50% 50%, #120a1c, #030206 70%); cursor: pointer; animation: prestige-entree-sortie .6s ease 2.9s forwards; }
.prestige-entree.prestige-entree-fin { display: none; }
.prestige-entree-drapeau { position: absolute; top: 50%; width: 58vw; max-width: 760px; aspect-ratio: 3 / 2; display: flex; }
.prestige-entree-drapeau i { flex: 1 1 0; background-image: var(--drapeau); background-size: 2000% 100%; background-position: calc(var(--i) * 100% / 19) 0; animation: prestige-vent 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.09s); }
.prestige-entree-dom { right: 50%; transform: translate(-120%, -50%) skewY(-4deg); animation: prestige-entree-g 1s cubic-bezier(.2, .9, .2, 1) .15s forwards; }
.prestige-entree-ext { left: 50%; transform: translate(120%, -50%) skewY(4deg); animation: prestige-entree-d 1s cubic-bezier(.2, .9, .2, 1) .15s forwards; }
@keyframes prestige-entree-g { to { transform: translate(-2%, -50%) skewY(-4deg); } }
@keyframes prestige-entree-d { to { transform: translate(2%, -50%) skewY(4deg); } }
.prestige-entree-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: prestige-flash .7s ease 1.05s; }
@keyframes prestige-flash { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }
.prestige-entree-onde { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9); transform: translate(-50%, -50%) scale(0); opacity: 0; animation: prestige-onde 1.1s ease-out 1.1s; }
@keyframes prestige-onde { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(90); opacity: 0; } }
.prestige-entree-texte { position: relative; text-align: center; color: #fff; padding: 22px 30px; }
.prestige-entree-texte::before { content: ''; position: absolute; inset: -30px -60px; background: radial-gradient(closest-side, rgba(3, 2, 6, .82), transparent); z-index: -1; }
.prestige-entree-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font: 800 12px / 1 system-ui, sans-serif; letter-spacing: .32em; color: var(--prestige-or); border: 1px solid color-mix(in srgb, var(--prestige-or) 60%, transparent); opacity: 0; animation: prestige-monte .6s ease 1.25s forwards; }
.prestige-entree-noms { display: flex; align-items: center; justify-content: center; gap: .35em; margin: 14px 0 6px; font: 900 clamp(34px, 9vw, 96px) / 1 system-ui, sans-serif; letter-spacing: .04em; }
.prestige-entree-noms span { opacity: 0; filter: blur(12px); }
.prestige-entree-noms span:first-child { color: #fff; text-shadow: 0 0 40px var(--dom), 0 0 80px var(--dom); animation: prestige-nom .7s ease 1.2s forwards; }
.prestige-entree-noms span:last-child { color: #fff; text-shadow: 0 0 40px var(--ext), 0 0 80px var(--ext); animation: prestige-nom .7s ease 1.35s forwards; }
.prestige-entree-noms em { font-style: normal; color: var(--prestige-or); font-size: .6em; opacity: 0; transform: scale(3) rotate(-90deg); animation: prestige-croix .5s cubic-bezier(.3, 1.6, .5, 1) 1.5s forwards; }
.prestige-entree-accroche { margin: 0; font: 800 clamp(13px, 2.4vw, 18px) / 1 system-ui, sans-serif; letter-spacing: .5em; text-transform: uppercase; opacity: 0; animation: prestige-monte .6s ease 1.75s forwards; }
.prestige-entree-passer { position: absolute; bottom: 24px; right: 24px; font-size: 12px; letter-spacing: .2em; color: rgba(255, 255, 255, .5); }
@keyframes prestige-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes prestige-nom { to { opacity: 1; filter: blur(0); } }
@keyframes prestige-croix { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes prestige-entree-sortie { to { opacity: 0; visibility: hidden; } }

/* ---------- Hero ---------- */
.prestige-ruban { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 6px; padding: 6px 16px; border-radius: 999px; font: 800 12px / 1.2 system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--dom) 45%, transparent), rgba(255, 255, 255, .06), color-mix(in srgb, var(--ext) 45%, transparent)); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 8px 30px -10px rgba(0, 0, 0, .6); position: relative; overflow: hidden; }
.prestige-ruban::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: prestige-balayage 4.5s ease-in-out infinite 1s; }
.prestige-ruban b { color: var(--prestige-or); }
@keyframes prestige-balayage { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.prestige .classico-titre { position: relative; background-size: 220% 100%; animation: prestige-titre 7s ease-in-out infinite; filter: drop-shadow(0 6px 28px rgba(0, 0, 0, .55)); }
@keyframes prestige-titre { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.prestige .classico-blason { transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 8px), 0); transition: transform .25s ease-out; }
.prestige .classico-blason::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; padding: 3px; background: conic-gradient(from var(--rot, 0deg), transparent, var(--anneau), transparent 40%, var(--anneau), transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: prestige-anneau 4s linear infinite; }
.prestige .classico-camp-dom .classico-blason { --anneau: var(--dom); box-shadow: 0 0 80px -6px color-mix(in srgb, var(--dom) 70%, transparent); }
.prestige .classico-camp-ext .classico-blason { --anneau: var(--ext); box-shadow: 0 0 80px -6px color-mix(in srgb, var(--ext) 70%, transparent); }
.prestige .classico-camp-ext .classico-blason::before { animation-direction: reverse; }
@property --rot { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes prestige-anneau { to { --rot: 360deg; } }
.prestige .classico-blason img { border-radius: 10px; }
.prestige .classico-nom { letter-spacing: .06em; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.prestige .classico-vs { font-weight: 900; letter-spacing: .3em; background: linear-gradient(90deg, var(--dom), #fff, var(--ext)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: prestige-vs 2.4s ease-in-out infinite; }
@keyframes prestige-vs { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- Compte à rebours : tuiles en verre, bascule à chaque changement, battement final ---------- */
.prestige .classico-rebours-bloc { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 18px 40px -18px rgba(0, 0, 0, .8); }
.prestige .classico-rebours-bloc::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .45); }
.prestige .classico-rebours-bloc b { background: linear-gradient(180deg, #fff 40%, #cfd6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prestige .classico-rebours-bloc b.prestige-bascule { animation: prestige-bascule .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes prestige-bascule { 0% { transform: perspective(300px) rotateX(-90deg); opacity: .2; } 100% { transform: perspective(300px) rotateX(0); opacity: 1; } }
.prestige .classico-rebours.prestige-imminent .classico-rebours-bloc { animation: prestige-battement 1s ease-in-out infinite; }
@keyframes prestige-battement { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dom) 55%, transparent); } 50% { box-shadow: 0 0 34px 6px color-mix(in srgb, var(--ext) 55%, transparent); } }

/* ---------- Apparition des blocs au défilement ---------- */
.prestige.prestige-js .classico-bloc { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.prestige.prestige-js .classico-bloc.prestige-revele { opacity: 1; transform: none; }

/* ---------- Célébrations (but, coup d'envoi) ---------- */
.prestige-confettis { position: fixed; inset: 0; z-index: 65; pointer-events: none; }
.prestige-celebration { position: fixed; inset: 0; z-index: 66; display: grid; place-items: center; pointer-events: none; }
.prestige-celebration strong { font: 900 clamp(64px, 18vw, 220px) / 1 system-ui, sans-serif; letter-spacing: .02em; color: #fff; text-shadow: 0 0 40px var(--c, #fff), 0 0 120px var(--c, #fff), 0 12px 0 rgba(0, 0, 0, .35); animation: prestige-slam 2.4s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.prestige-celebration small { display: block; text-align: center; margin-top: 8px; font: 800 clamp(16px, 3vw, 26px) / 1.2 system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .7); animation: prestige-slam-texte 2.4s ease forwards; }
@keyframes prestige-slam { 0% { transform: scale(3.2); opacity: 0; } 14% { transform: scale(.94); opacity: 1; } 22% { transform: scale(1); } 80% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes prestige-slam-texte { 0%, 15% { opacity: 0; transform: translateY(10px); } 25%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.prestige-secousse { animation: prestige-secousse .5s ease; }
@keyframes prestige-secousse { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }

/* ---------- Mobile et moins d'animations ---------- */
@media (max-width: 720px) {
  .prestige .classico-decor { height: 760px; }
  .prestige-drapeau { top: 40px; width: 70vw; opacity: .32; }
  .prestige-drapeau-dom { left: -28%; }
  .prestige-drapeau-ext { right: -28%; }
  .prestige-entree-drapeau { width: 80vw; }
}
/* ---------- Performance sur téléphone et tablette (24 septembre) ----------
   Mesuré sur un mobile moyen : ~21 images/s au défilement, à cause d'effets redessinés à CHAQUE image : 40 lamelles de drapeau
   animées sous un filtre d'ombre + un masque, un flou de 60 px sur l'aurore animée, le titre animé sous un filtre, et des blocs
   qui floutent l'arrière-plan. Même rendu, en effets que le processeur graphique gère seul : drapeau ondulé figé (sin()) qui flotte
   d'un seul bloc, aurore sans flou (ses dégradés sont déjà doux), titre et blocs sans filtre. */
@media (max-width: 900px), (pointer: coarse) {
  .prestige-aurore { filter: none; mix-blend-mode: normal; opacity: .42; }
  .prestige-drapeau { filter: none; transition: none; will-change: transform; animation: prestige-flotte 6s ease-in-out infinite; }
  .prestige-drapeau-ext { animation-delay: -3s; }
  .prestige-drapeau i { animation: none; transform: translateY(calc(sin(var(--i) * 0.42) * 3.5%)); }
  .prestige-drapeau i::after { animation: none; opacity: calc(0.45 + cos(var(--i) * 0.42) * 0.3); }
  .prestige .classico-titre { animation: none; filter: none; text-shadow: 0 6px 24px rgba(0, 0, 0, .55); }
  .prestige .classico-rebours-bloc { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, rgba(40, 34, 56, .92), rgba(22, 18, 32, .92)); }
  .prestige-couture { box-shadow: none; }
}
@keyframes prestige-flotte { 0%, 100% { translate: 0 -5px; } 50% { translate: 0 5px; } }
@media (prefers-reduced-motion: reduce) {
  .prestige-drapeau, .prestige-drapeau i, .prestige-drapeau i::after, .prestige-aurore::before, .prestige-aurore::after, .prestige-couture, .prestige-ruban::after,
  .prestige .classico-titre, .prestige .classico-blason::before, .prestige .classico-vs, .prestige .classico-rebours.prestige-imminent .classico-rebours-bloc { animation: none !important; }
  .prestige-entree { display: none; }
  .prestige.prestige-js .classico-bloc { opacity: 1; transform: none; transition: none; }
  .prestige-drapeau, .prestige .classico-blason { transform: none; }
}

/* Correctifs d'empilement : classico.css place tous les enfants directs de .classico en position relative
   (z-index 1) et peint son ciel par-dessus les premiers éléments du décor. */
.classico.prestige > .prestige-entree { position: fixed; z-index: 70; }
.prestige .classico-decor > .prestige-aurore { z-index: 1; }
.prestige .classico-decor > .prestige-drapeau { z-index: 2; }
.prestige .classico-decor > .prestige-couture { z-index: 3; }
.prestige .classico-decor > .prestige-particules { z-index: 4; }
.prestige .classico-decor > .classico-stade { z-index: 5; }

/* ---------- Variante « blasons » (matchs de clubs) : un blason géant qui flotte, au lieu d'un drapeau découpé en lamelles ---------- */
.prestige-drapeau.prestige-blason { aspect-ratio: 1 / 1; width: min(38vw, 460px); top: 90px; opacity: .22; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 0 60px var(--dom)); animation: prestige-flotte 7s ease-in-out infinite; }
.prestige-drapeau-ext.prestige-blason { filter: drop-shadow(0 0 60px var(--ext)); animation-delay: -3.5s; }
.prestige-drapeau-dom.prestige-blason { left: 2%; --angle: 0deg; }
.prestige-drapeau-ext.prestige-blason { right: 2%; --angle: 0deg; }
.prestige-blason i, .prestige-entree-blason i { flex: 1 1 auto; background-image: var(--drapeau); background-repeat: no-repeat; background-position: center; background-size: contain; background-color: transparent; animation: none; transform: none; }
.prestige-blason i::after { display: none; }
.prestige-entree-drapeau.prestige-blason { aspect-ratio: 1 / 1; width: min(34vw, 340px); }
.prestige-entree-drapeau.prestige-blason i { animation: none; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: var(--drapeau); filter: drop-shadow(0 0 40px rgba(255, 255, 255, .35)); }
@media (max-width: 720px) { .prestige-drapeau.prestige-blason { width: 52vw; top: 60px; opacity: .16; } .prestige-drapeau-dom.prestige-blason { left: -8%; } .prestige-drapeau-ext.prestige-blason { right: -8%; } .prestige-entree-drapeau.prestige-blason { width: 40vw; } }

/* ============================================================
   Entrée « orage » (evenement-orage.js) : ciel d'orage, éclairs dessinés sur un canevas, flash plein écran, grand éclair en diagonale,
   blasons qui s'abattent, noms. Tout est en transformations/opacité (GPU) : aucune ombre floue, aucun filtre coûteux.
   ============================================================ */
.prestige-orage { z-index: 100000; background: #02030a; animation: none; cursor: default; transition: opacity .6s ease; }
.prestige-orage.orage-sortie { opacity: 0; pointer-events: none; }
.orage-ciel, .orage-toile, .orage-flash { position: absolute; inset: 0; }
.orage-ciel { overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #0b1330 0%, #04060f 55%, #010208 100%); }
.orage-ciel::before, .orage-ciel::after { content: ''; position: absolute; left: -30%; top: -20%; width: 160%; height: 70%; will-change: transform;
  background: radial-gradient(40% 55% at 20% 50%, rgba(70, 82, 130, .55), transparent 70%), radial-gradient(35% 50% at 55% 40%, rgba(40, 48, 90, .7), transparent 70%), radial-gradient(38% 55% at 85% 55%, rgba(80, 60, 110, .5), transparent 70%); animation: orage-nuages 14s linear infinite alternate; }
.orage-ciel::after { top: 5%; opacity: .7; animation-duration: 19s; animation-direction: alternate-reverse; transform: scaleX(-1); }
@keyframes orage-nuages { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, 4%, 0); } }
.orage-toile { width: 100%; height: 100%; mix-blend-mode: screen; }
.orage-flash { background: radial-gradient(100% 80% at var(--fx, 50%) var(--fy, 35%), rgba(215, 230, 255, .95), rgba(120, 160, 255, .7) 55%, rgba(60, 90, 220, .55)); opacity: 0; pointer-events: none; will-change: opacity; }
.orage-onde { position: absolute; left: var(--ox, 50%); top: var(--oy, 50%); width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .9); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.orage-onde.orage-onde-go { animation: orage-onde 1.1s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes orage-onde { 0% { transform: scale(0.01); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

.orage-scene { position: relative; z-index: 3; display: grid; place-items: center; gap: 18px; width: 100%; padding: 20px; will-change: transform; }
.orage-scene.orage-secousse { animation: orage-secousse .7s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes orage-secousse { 10%, 90% { transform: translate3d(-3px, 1px, 0); } 20%, 80% { transform: translate3d(6px, -3px, 0); } 30%, 50%, 70% { transform: translate3d(-10px, 4px, 0); } 40%, 60% { transform: translate3d(10px, -4px, 0); } }
.orage-blasons { display: flex; align-items: center; justify-content: center; gap: clamp(30px, 14vw, 220px); width: 100%; }
.orage-blason { width: clamp(100px, 22vw, 230px); aspect-ratio: 1 / 1; opacity: 0; will-change: transform, opacity; }
.orage-blason img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 0 30px var(--dom)) drop-shadow(0 0 70px rgba(255, 255, 255, .35)); }
.orage-blason-ext img { filter: drop-shadow(0 0 30px var(--ext)) drop-shadow(0 0 70px rgba(255, 255, 255, .35)); }
.orage-acte2 .orage-blason-dom { animation: orage-chute-g .9s cubic-bezier(.2, 1.2, .3, 1) .12s forwards; }
.orage-acte2 .orage-blason-ext { animation: orage-chute-d .9s cubic-bezier(.2, 1.2, .3, 1) .22s forwards; }
@keyframes orage-chute-g { 0% { opacity: 0; transform: translate3d(-60vw, -30vh, 0) rotate(-25deg) scale(1.8); } 70% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes orage-chute-d { 0% { opacity: 0; transform: translate3d(60vw, -30vh, 0) rotate(25deg) scale(1.8); } 70% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.orage-acte2 .orage-blason { animation-fill-mode: forwards; }
.orage-acte2.orage-vie .orage-blason { animation-name: none; opacity: 1; transform: none; }
.orage-texte { padding: 0; }
.orage-texte .prestige-entree-badge, .orage-texte .prestige-entree-accroche, .orage-texte .prestige-entree-noms span, .orage-texte .prestige-entree-noms em { animation: none; }
.orage-texte::before { display: none; }
.orage-acte2 .orage-texte .prestige-entree-badge { animation: prestige-monte .6s ease .75s both; }
.orage-acte2 .orage-texte .prestige-entree-noms span:first-child { animation: prestige-nom .7s ease .95s forwards; }
.orage-acte2 .orage-texte .prestige-entree-noms span:last-child { animation: prestige-nom .7s ease 1.1s forwards; }
.orage-acte2 .orage-texte .prestige-entree-noms em { animation: prestige-croix .5s cubic-bezier(.3, 1.6, .5, 1) 1.25s forwards; }
.orage-acte2 .orage-texte .prestige-entree-accroche { animation: prestige-monte .7s ease 1.55s both; }
.orage-texte .prestige-entree-noms { font-size: clamp(26px, 6.4vw, 78px); text-shadow: 0 4px 30px rgba(0, 0, 0, .8); }

.orage-son, .orage-passer { position: absolute; z-index: 5; border-radius: 999px; font: 700 13px / 1 system-ui, sans-serif; color: #fff; cursor: pointer; background: rgba(10, 14, 32, .62); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 12px 18px; }
.orage-son { top: calc(18px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); animation: orage-son 1.6s ease-in-out infinite; }
.orage-passer { bottom: calc(22px + env(safe-area-inset-bottom)); right: 22px; }
.orage-son[hidden] { display: none; }
@keyframes orage-son { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
.orage-rejouer { display: block; margin: 8px auto 0; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); color: #fff; font: 700 12px / 1 system-ui, sans-serif; letter-spacing: .08em; cursor: pointer; transition: background .2s ease, transform .15s ease; }
.orage-rejouer:hover { background: rgba(255, 255, 255, .16); } .orage-rejouer:active { transform: scale(.95); }
@media (max-width: 720px) { .orage-blasons { gap: 18vw; } .orage-texte .prestige-entree-noms { flex-direction: column; gap: .1em; } }
@media (prefers-reduced-motion: reduce) { .prestige-orage { display: none !important; } }