/* ==========================================================================
   ARDENT — Animation de fin « La ligne d'arrivée » (objectif atteint)
   Noir et battements de cœur, tunnel du temps, dernier kilo (gris et argent, façon
   keynote), puis l'explosion de la victoire : la couleur jaillit du centre (or,
   orange soleil, corail, framboise — chaud et joyeux, ni bleu ni vert), triple onde
   de choc, canons à confettis, « Objectif atteint » qui claque lettre par lettre,
   son prénom en étincelles d'or, la médaille d'or qui tombe en tournoyant, ses
   chiffres, le coach et sa lettre sur une vraie feuille. Uniquement des animations
   de transform et d'opacité (fluide sur iPhone) ; étincelles, feux d'artifice,
   confettis, serpentins et pièces d'or sont dessinés dans un canvas.
   ========================================================================== */

.finale {
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow: hidden;
  background: #000;
  color: #f5f5f7;
  font-family: var(--font-body, system-ui, sans-serif);
  animation: fx-fade-in 0.9s ease both;
}
@keyframes fx-fade-in { from { opacity: 0; } to { opacity: 1; } }
.finale.is-leaving { animation: fx-fade-out 0.7s ease forwards; }
@keyframes fx-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Fonds : le soleil de la victoire, projecteurs, pouls ---------- */
/* Le fond de la victoire : lueur d'or au centre, orange soleil en bas, corail puis framboise en haut (les feux
   d'artifice ressortent dessus). À l'explosion, la couleur jaillit d'abord du centre (.fx-bloom, un disque qui
   grandit : transform seulement, léger pour le téléphone), puis le fond se pose dessous. */
.fx-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 38% at 50% 44%, rgba(255, 178, 64, 0.62) 0%, rgba(255, 130, 40, 0.32) 48%, transparent 75%),
    radial-gradient(90% 55% at 50% 112%, rgba(255, 170, 40, 0.95), transparent 70%),
    linear-gradient(180deg, #9e1150 0%, #d4245d 28%, #f2483a 60%, #ff8a1e 100%);
  opacity: 0;
  transition: opacity 0.7s ease 0.45s;
}
.finale.is-victory .fx-glow { opacity: 1; }
.fx-bloom {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 120vmax; /* agrandi 2 fois à la fin : une image plus petite en mémoire */
  height: 120vmax;
  margin: -60vmax 0 0 -60vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd46a 0%, #ffa23a 22%, #ff6a3a 42%, #e0245e 70%);
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.finale.is-impact .fx-bloom { animation: fx-bloom 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
@keyframes fx-bloom { 0% { opacity: 1; transform: scale(0.04); } 55% { opacity: 1; transform: scale(2); } 100% { opacity: 0; transform: scale(2); } }
/* Médaille : les bords s'assombrissent un peu pour qu'elle ressorte */
.fx-glow::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 45%, transparent 35%, rgba(70, 0, 25, 0.5)); opacity: 0; transition: opacity 1.2s ease; }
.finale.is-podium .fx-glow::after { opacity: 1; }

/* Projecteurs de stade, depuis le bas de l'écran (jamais du ciel) */
.fx-lights i {
  position: absolute;
  bottom: -12%;
  width: 52vw;
  max-width: 420px;
  height: 125vh;
  background: linear-gradient(to top, rgba(255, 240, 205, 0.24), rgba(255, 240, 205, 0) 80%);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity 1.4s ease 0.3s;
}
.fx-lights .is-left { left: -10vw; transform: rotate(24deg); }
.fx-lights .is-right { right: -10vw; transform: rotate(-24deg); }
.finale.is-victory .fx-lights i { opacity: 1; }
.finale.is-victory .fx-lights .is-left { animation: fx-sweep-l 7s ease-in-out infinite alternate; }
.finale.is-victory .fx-lights .is-right { animation: fx-sweep-r 8.5s ease-in-out infinite alternate; }
.finale.is-coach .fx-lights i { opacity: 0.35; }
@keyframes fx-sweep-l { from { transform: rotate(28deg); } to { transform: rotate(4deg); } }
@keyframes fx-sweep-r { from { transform: rotate(-30deg); } to { transform: rotate(-6deg); } }

/* Le pouls : les bords de l'écran s'éclairent à chaque battement */
.fx-pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(255, 255, 255, 0.14), inset 0 0 22px rgba(255, 255, 255, 0.1);
  opacity: 0;
}
.fx-pulse.is-beat { animation: fx-pulse 0.75s ease-out; }
.finale.is-hush .fx-pulse { opacity: 0.22; }
.finale.is-victory .fx-pulse { display: none; }
@keyframes fx-pulse { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Tunnel du temps ---------- */
.fx-warp { position: absolute; left: 50%; top: 44%; width: 0; height: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s 1.2s; }
.finale.is-warp .fx-warp { opacity: 1; visibility: visible; transition: opacity 1.5s ease; }
.fx-warp i {
  position: absolute;
  left: 0;
  top: -1px;
  width: var(--l);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7));
  transform-origin: 0 50%;
  transform: rotate(var(--a)) translateX(10vmax) scaleX(0.1);
  opacity: 0;
}
.finale.is-warp .fx-warp i { animation: fx-warp 0.9s linear var(--d) infinite; }
@keyframes fx-warp {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(6vmax) scaleX(0.1); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(48vmax) scaleX(1); }
}

.fx-tunnel { position: absolute; inset: 0; perspective: 700px; perspective-origin: 50% 44%; pointer-events: none; }
.fx-fly {
  position: absolute;
  left: 50%;
  top: 44%;
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(var(--x), var(--y), -1800px);
  animation: fx-fly 2.6s cubic-bezier(0.55, 0, 0.9, 0.5) var(--d) both;
}
@keyframes fx-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) translate3d(var(--x), var(--y), -1800px); }
  38% { opacity: 0; }
  52% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 560px); }
}
.fx-card {
  display: block;
  padding: 8px 13px 9px;
  border-radius: 13px;
  background: rgba(28, 28, 30, 0.85);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.18);
  color: rgba(235, 235, 245, 0.6);
  font: 700 11.5px/1.2 system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
}
.fx-card b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 21px; font-weight: 700; color: #fff; }
.fx-card.is-photo { width: 104px; height: 138px; padding: 0; object-fit: cover; border: 4px solid #f5f5f7; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }

/* ---------- Étincelles, triple onde de choc, flash ---------- */
.fx-canvas { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.fx-shock { position: absolute; left: 50%; top: 42%; z-index: 3; width: 0; height: 0; pointer-events: none; }
.fx-shock i {
  position: absolute;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 246, 213, 0.95), 0 0 34px rgba(255, 190, 60, 0.9);
  opacity: 0;
}
.fx-shock i:nth-child(2) { box-shadow: 0 0 0 5px rgba(255, 170, 50, 0.9); }
.fx-shock i:nth-child(3) { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
/* « backwards » seulement : une fois finie, l’onde (agrandie 15 fois) disparaît vraiment au lieu de rester en mémoire. */
.finale.is-impact .fx-shock i { animation: fx-shock 1.3s cubic-bezier(0.1, 0.7, 0.3, 1) backwards; }
.finale.is-impact .fx-shock i:nth-child(2) { animation-duration: 1.55s; animation-delay: 0.12s; }
.finale.is-impact .fx-shock i:nth-child(3) { animation-duration: 1.85s; animation-delay: 0.26s; }
@keyframes fx-shock { 0% { opacity: 1; transform: scale(0.15); } 100% { opacity: 0; transform: scale(15); } }
.fx-flash { position: absolute; inset: 0; z-index: 8; background: radial-gradient(circle at 50% 42%, #fffdf3, #ffeec4 55%, #ffc978); opacity: 0; pointer-events: none; }
.finale.is-impact .fx-flash { animation: fx-flash 1.1s ease-out; }
@keyframes fx-flash { 0% { opacity: 0.97; } 100% { opacity: 0; } }
.finale.is-impact .fn-scenes { animation: fx-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes fx-shake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(5px, -3px); }
  30%, 50%, 70% { transform: translate(-8px, 4px); }
  40%, 60% { transform: translate(8px, -4px); }
}

/* ---------- Bouton « Passer » ---------- */
.fn-skip {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  z-index: 9;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(44, 44, 46, 0.7);
  color: rgba(255, 255, 255, 0.85);
  font: 600 13px/1 system-ui, sans-serif;
  cursor: pointer;
}
.finale.is-victory .fn-skip { background: rgba(110, 10, 40, 0.45); border-color: rgba(255, 241, 193, 0.4); }

/* ---------- Scènes ---------- */
.fn-scenes {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 24px 70px;
  overflow-y: auto;
  overflow-x: hidden;
}
.finale.is-coach .fn-scenes { place-items: start center; padding: calc(60px + env(safe-area-inset-top, 0px)) max(7vw, 20px) 40px; }
.fn-scene {
  width: 100%;
  min-width: 0; /* un mot très long (prénom) ne doit jamais élargir la scène */
  max-width: 520px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fn-scene.is-in { opacity: 1; transform: none; }
.fn-scene.is-out { opacity: 0; transform: translateY(-16px); transition-duration: 0.45s; }
.fn-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(235, 235, 245, 0.6); margin-bottom: 14px; }
.fn-big { font-family: var(--font-display); font-size: clamp(56px, 17vw, 92px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.fn-big small { font-size: 0.34em; font-weight: 700; color: rgba(235, 235, 245, 0.6); }
.fn-big.is-gold { background: linear-gradient(180deg, #ffffff 30%, #c7c7cc); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.fn-big.is-gold small { color: inherit; }
.fn-big.is-small { font-size: clamp(40px, 12vw, 60px); }
.fn-big.is-beat { animation: fx-heart-small 0.5s ease-out; }
.fn-sub { margin-top: 8px; font-size: 14px; font-weight: 600; color: rgba(235, 235, 245, 0.6); }
.fn-line { margin: 22px auto 0; max-width: 420px; font-size: 17px; line-height: 1.55; opacity: 0; transition: opacity 1.2s ease 1.2s; }
.fn-scene.is-in .fn-line { opacity: 1; }
/* Après l'explosion : textes blancs et crème, une ombre framboise douce pour bien les lire sur l'or */
.finale.is-victory .fn-kicker { color: #fff1c1; }
.finale.is-victory :is(.fn-big small, .fn-sub) { color: rgba(255, 246, 225, 0.92); }
/* Les gros chiffres : blancs sur une tranche framboise, comme le titre (un dégradé se perdait dans la lueur dorée) */
.finale.is-victory .fn-big.is-gold { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; text-shadow: 0 3px 0 #f0513f, 0 6px 0 #c2184d, 0 14px 26px rgba(90, 0, 30, 0.45); }
.finale.is-victory .fn-big.is-gold small { color: #fff6dd; }
.finale.is-victory :is(.fn-kicker, .fn-sub, .fn-line, .fn-big:not(.is-gold)) { text-shadow: 0 2px 14px rgba(110, 10, 30, 0.4); }
@keyframes fx-heart-small { 0% { transform: scale(1); } 22% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* 0. Le noir : la flamme bat avec le cœur, son nom, le titre de son histoire */
.fx-ember { position: relative; display: inline-block; margin-bottom: 26px; }
.fx-ember::before { content: ""; position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 120, 40, 0.35), transparent 65%); }
.fx-ember svg { position: relative; display: block; }
.fx-ember.is-beat { animation: fx-heart 0.55s ease-out; }
@keyframes fx-heart { 0% { transform: scale(1); } 18% { transform: scale(1.2); } 38% { transform: scale(1.04); } 52% { transform: scale(1.12); } 100% { transform: scale(1); } }
.fx-name { font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(235, 235, 245, 0.6); opacity: 0; transform: translateY(8px); transition: opacity 1.4s ease, transform 1.4s ease; }
.fx-title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 10vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 30%, #c7c7cc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.8s ease, transform 3.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fn-scene.show-name .fx-name { opacity: 1; transform: none; }
.fn-scene.show-title .fx-title { opacity: 1; transform: none; }

/* 2. Tunnel : le compteur au centre défile */
.fn-scene.is-tunnel .fn-line { position: absolute; left: 24px; right: 24px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* 3. Le dernier kilo : l'écran se rapproche à chaque dixième */
.fn-scene.is-last.is-in { transform: scale(var(--zoom, 1)); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease; }
.fx-finish { width: min(70vw, 280px); height: 4px; margin: 22px auto 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.fx-finish i { display: block; height: 100%; border-radius: inherit; background: #ffffff; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* 4. Victoire : les lettres tombent une à une et claquent, blanches sur une tranche framboise (autocollant 3D) */
.fx-win-kg { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #fff6dd; text-shadow: 0 2px 12px rgba(110, 10, 30, 0.45); animation: fx-rise 0.8s ease 0.2s both; }
.fx-win-kg small { font-size: 0.6em; }
.fx-win-title { margin: 10px 0 14px; font-family: var(--font-display); font-weight: 900; line-height: 1.02; text-transform: uppercase; letter-spacing: -0.01em; }
.fx-word { display: block; white-space: nowrap; }
.fx-word i {
  display: inline-block;
  font-style: normal;
  font-size: clamp(44px, 14.5vw, 104px);
  color: #fff;
  text-shadow: 0 2px 0 #ffe1a6, 0 4px 0 #f0513f, 0 7px 0 #c2184d, 0 9px 0 #9e1150, 0 18px 30px rgba(90, 0, 30, 0.45);
  animation: fx-drop 0.72s cubic-bezier(0.2, 1.45, 0.35, 1) calc(0.08s + var(--i) * 0.055s) both;
}
@keyframes fx-drop { 0% { opacity: 0; transform: translateY(-55vh) rotate(-16deg) scale(1.5); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.fx-win-name { font-size: 14px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 10px rgba(110, 10, 30, 0.45); animation: fx-rise 1s ease 1.1s both; }
/* Son prénom s'écrit d'abord en étincelles (canvas) ; quand elles retombent, il reste en lettres pleines. */
.fx-win-name.is-sparkled {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(44px, 14vw, 110px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 3px 0 #f0513f, 0 6px 0 #c2184d, 0 14px 26px rgba(90, 0, 30, 0.45);
  opacity: 0;
  transform: scale(0.9);
  animation: none;
  transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.2, 1.45, 0.35, 1);
}
.fx-win-name.is-sparkled.is-lit { opacity: 1; transform: none; }
@keyframes fx-slam { 0% { opacity: 0; transform: scale(2.8); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 4 bis. La médaille d'or : elle tombe au bout de son ruban en tournoyant, se pose, puis se balance doucement */
.fx-medal-drop { position: relative; width: min(62vw, 250px); margin: 0 auto 24px; animation: fx-medal-fall 1.5s cubic-bezier(0.3, 1.22, 0.5, 1) both; }
@keyframes fx-medal-fall { 0% { transform: translateY(-120vh); } 100% { transform: none; } }
.fx-medal-swing { position: relative; transform-origin: 50% -55vh; animation: fx-swing 2.8s ease-in-out 1.5s infinite alternate both; }
@keyframes fx-swing { from { transform: rotate(0.9deg); } to { transform: rotate(-0.9deg); } }
.fx-ribbon { position: absolute; left: 50%; top: 14%; width: 0; height: 0; }
.fx-ribbon i {
  position: absolute;
  bottom: 0;
  left: -22px;
  width: 44px;
  height: 62vh;
  background: linear-gradient(90deg, #ffd23f 0 13%, #e0245e 13% 87%, #ffd23f 87%);
  box-shadow: inset 0 0 0 1px rgba(120, 0, 30, 0.25), 0 10px 26px rgba(70, 0, 25, 0.35);
  transform-origin: 50% 100%;
}
.fx-ribbon i:first-child { transform: rotate(15deg); }
.fx-ribbon i:last-child { transform: rotate(-15deg); background: linear-gradient(90deg, #ffd23f 0 13%, #c81d55 13% 87%, #ffd23f 87%); }
.fn-scene.is-medal { perspective: 1100px; }
.fx-medal { position: relative; width: 100%; aspect-ratio: 1; transform-style: preserve-3d; animation: fx-medal-spin 1.9s cubic-bezier(0.15, 0.6, 0.25, 1) both; }
@keyframes fx-medal-spin { from { transform: rotateY(-1080deg); } to { transform: rotateY(0deg); } }
.fx-medal-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  color: #6b3d00;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 249, 220, 0.95) 0%, rgba(255, 249, 220, 0) 30%),
    conic-gradient(from 210deg, #f9d65c, #c98a0c, #ffe27a, #b87908, #f7c840, #d9980f, #f9d65c);
  box-shadow:
    inset 0 0 0 7px #f0b62a,
    inset 0 0 0 9px #fff0a6,
    inset 0 0 0 15px #c98a0c,
    inset 0 0 0 16px rgba(255, 240, 166, 0.6),
    inset 0 -12px 26px rgba(120, 60, 0, 0.35),
    0 26px 54px rgba(80, 5, 30, 0.55);
}
.fx-medal-face.is-back { transform: rotateY(180deg); }
.fx-medal-face.is-back svg { width: 42%; height: auto; margin: 0 auto; }
.fx-medal-arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-medal-arc text { fill: #7a4600; font-family: var(--font-display); font-weight: 800; }
.fx-medal-arc .is-top { font-size: 15px; letter-spacing: 0.12em; }
.fx-medal-arc .is-bottom { font-size: 10.5px; letter-spacing: 0.08em; }
.fx-medal-kg { position: relative; margin-top: 4px; font-family: var(--font-display); font-size: clamp(42px, 14vw, 62px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: #6b3d00; text-shadow: 0 1px 0 rgba(255, 246, 200, 0.9), 0 -1px 0 rgba(110, 60, 0, 0.35); font-variant-numeric: tabular-nums; }
.fx-medal-kg small { margin-left: 3px; font-size: 0.4em; }
.fx-medal-sub { position: relative; margin-top: 3px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #8a5a06; }
.fx-medal-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%); transform: translateX(-130%); animation: fx-medal-shine 3.4s ease-in-out 1.9s infinite; }
@keyframes fx-medal-shine { 0% { transform: translateX(-130%); } 45%, 100% { transform: translateX(130%); } }
.fx-medal-name { max-width: 100%; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(30px, 9vw, 46px); font-weight: 900; line-height: 1.05; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 #c2184d, 0 12px 24px rgba(90, 0, 30, 0.45); animation: fx-rise 0.8s ease 1.6s both; }
.fn-scene.is-medal .fn-sub { animation: fx-rise 0.8s ease 1.9s both; }

/* 5. Chiffres et courbe */
.fn-curve { width: 100%; max-width: 360px; height: auto; margin: 0 auto 10px; display: block; overflow: visible; }
.fn-curve-line { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fn-scene.is-in .fn-curve-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.8s cubic-bezier(0.45, 0, 0.3, 1) 0.3s; }
.fn-curve-area { opacity: 0; transition: opacity 1.2s ease 2.4s; }
.fn-scene.is-in .fn-curve-area { opacity: 1; }
.fn-curve-target { stroke: rgba(255, 246, 225, 0.55); stroke-width: 1.5; stroke-dasharray: 5 6; }
.fn-curve-dot { fill: #ffffff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fn-scene.is-in .fn-curve-dot { animation: fn-dot 1.6s ease 3s both infinite; }
@keyframes fn-dot { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
.fn-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 380px; margin: 18px auto 0; }
.fn-stat { padding: 14px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 241, 193, 0.38), 0 10px 24px rgba(90, 10, 30, 0.18); opacity: 0; }
.fn-scene.is-in .fn-stat { animation: fx-slam-small 0.55s cubic-bezier(0.2, 1.3, 0.3, 1) calc(1.5s + var(--i) * 0.45s) both; }
.fn-stat strong { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #c2184d; }
.fn-stat span { font-size: 12.5px; font-weight: 600; color: rgba(255, 246, 225, 0.92); }
@keyframes fx-slam-small { 0% { opacity: 0; transform: scale(1.6); } 100% { opacity: 1; transform: scale(1); } }
.fn-scene.is-numbers .fn-line { transition-delay: 3.6s; }

/* ---------- 6. Le coach et sa lettre (sur une vraie feuille de papier) ---------- */
.fn-coach { position: relative; width: min(56vw, 230px); margin: 0 auto 18px; animation: fn-coach-in 1.6s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
/* Carte nette, sans cadre de couleur ni halo */
.fn-coach img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(255, 241, 193, 0.4), 0 24px 60px rgba(80, 5, 30, 0.5);
  animation: fn-breathe 4.5s ease-in-out 1.6s infinite;
}
@keyframes fn-coach-in { from { opacity: 0; transform: translateY(70px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes fn-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.015); } }

.fn-letter-title { overflow-wrap: anywhere; margin: 14px 0 18px; font-family: var(--font-display); font-size: clamp(26px, 7.5vw, 38px); font-weight: 800; letter-spacing: -0.02em; color: #ffffff; text-shadow: 0 3px 0 #c2184d, 0 12px 26px rgba(90, 0, 30, 0.4); opacity: 0; animation: fx-rise 1s ease 1.2s forwards; }
.fn-paper {
  position: relative;
  padding: 24px 20px 18px;
  border-radius: 6px 6px 18px 18px;
  background: linear-gradient(180deg, #fffaf0, #fff2dc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 22px 50px rgba(80, 5, 30, 0.45), 0 2px 6px rgba(80, 5, 30, 0.2);
  color: #3b2412;
  text-align: left;
  animation: fn-paper-in 1.1s cubic-bezier(0.2, 0.9, 0.2, 1) 1.7s both;
}
/* Liseré en haut, comme un papier à lettres : or, orange, framboise */
.fn-paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, #ffd23f, #ff8a1e, #e0245e); }
@keyframes fn-paper-in { from { opacity: 0; transform: translateY(46px) rotate(-1.6deg); } to { opacity: 1; transform: none; } }
.fn-letter p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.65; color: #3b2412; }
.fn-letter span { display: inline-block; opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.6s ease; transition-delay: calc(var(--w) * 55ms); }
.fn-letter p.is-shown span { opacity: 1; transform: none; }
.fn-sign { margin: 4px 0 0; text-align: right; font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 21px; color: #b4243f; opacity: 0; transition: opacity 1s ease; }
.fn-actions { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; pointer-events: none; transition: opacity 1s ease 0.6s; }
.fn-scene.is-ended .fn-sign, .fn-scene.is-ended .fn-actions { opacity: 1; pointer-events: auto; }
.fn-actions .btn { width: auto; padding: 0 34px; }
/* (plus précis que la règle des boutons du design Apple, pour rester blanc dans les deux thèmes) */
.finale .fn-actions .btn.btn-accent { background: #ffffff; color: #c2184d; box-shadow: 0 8px 24px rgba(80, 5, 30, 0.35); }
.fn-actions-row { display: flex; gap: 22px; }
.fn-link { background: none; border: 0; color: #fff; font: 700 14px/1 system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; text-shadow: 0 1px 8px rgba(90, 0, 30, 0.4); cursor: pointer; }
.fn-scene.is-instant :is(.fn-coach, .fn-letter-title, .fn-paper) { animation-duration: 0.6s; animation-delay: 0s; }
.fn-scene.is-instant .fn-letter span { transition: none; }

/* ---------- Moins d'animations demandées par l'appareil ---------- */
.finale.is-reduced .fx-bloom, .finale.is-reduced .fx-warp, .finale.is-reduced .fx-tunnel, .finale.is-reduced .fx-lights, .finale.is-reduced .fx-shock, .finale.is-reduced .fx-flash, .finale.is-reduced .fx-pulse { display: none; }
.finale.is-reduced *, .finale.is-reduced *::before, .finale.is-reduced *::after { animation-duration: 0.01s !important; animation-delay: 0s !important; transition-duration: 0.2s !important; transition-delay: 0s !important; }

/* ---------- L’image du coach, en plein écran (lent zoom arrière, reflet doré, confettis par-dessus) ---------- */
.fx-hero { position: absolute; inset: 0; z-index: 7; overflow: hidden; background: #2a0714; cursor: pointer; animation: fx-fade-in 0.8s ease both; }
.fx-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(1.12); animation: fx-hero-zoom 7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
/* Écran large (ordinateur) : l’image verticale entière, au centre */
@media (min-aspect-ratio: 3 / 4) { .fx-hero img { object-fit: contain; } }
.fx-hero-sheen { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 228, 160, 0.22) 50%, transparent 65%); transform: translateX(-100%); animation: fx-hero-sheen 2.2s ease-in-out 0.9s both; }
.fx-hero.is-out { animation: fx-fade-out 0.6s ease forwards; }
.finale.is-hero .fx-canvas { z-index: 8; }
@keyframes fx-hero-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fx-hero-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.fx-movie-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: fit-content;
  margin: 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(44, 44, 46, 0.7);
  color: rgba(255, 255, 255, 0.8);
  font: 600 12px/1 system-ui, sans-serif;
  white-space: nowrap;
  animation: fx-rise 0.6s ease 2.5s both;
}

/* Pendant le film (une fois le fondu d’entrée fini), l’app dessous n’est plus dessinée : tout le téléphone travaille pour l’animation. */
body.is-finale-open .app-shell, body.is-finale-open .dynamic-island, body.is-finale-open .coach-fab { visibility: hidden; }
body.is-finale-open.is-finale-dimming::after { visibility: hidden; }