/* ============================================
   ÉCLIPSE DES DESTIN - Styles
   Layout ancré sur l'image de fond (ratio 1672/941)
   pour un placement identique à toutes tailles d'écran
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Ratio exact de l'image de fond (1672 / 941) */
    --bg-ratio: 1.77683;

    /* Dimensions du "stage" qui suit exactement le rendu de
       background-size: cover (image centrée, rognée si besoin). */
    --bg-w: max(100vw, calc(100vh * var(--bg-ratio)));
    --bg-h: max(100vh, calc(100vw / var(--bg-ratio)));

    /* Échelle UI : dimension où l'image tiendrait en "contain".
       Sert à TAILLER textes/paddings pour qu'ils restent toujours
       dans le viewport, jamais coupés. */
    --ui: min(100vw, calc(100vh * var(--bg-ratio)));
}

html, body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: 'Cinzel', 'Cormorant Garamond', serif;
    color: #f0e6ff;
    background: #0a0418;
}

/* Le "stage" : un cadre dimensionné comme l'image en cover.
   Tous les éléments sont positionnés à l'intérieur en % du stage,
   donc ils restent à la même position relative à l'image quel
   que soit le ratio du viewport. */
.bg-stage {
    position: fixed;
    top: 50%;
    left: 50%;
    width: var(--bg-w);
    height: var(--bg-h);
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* .stage : conteneur du titre, du menu et des éléments magiques.
   Dimensionné en mode "contain" (taille naturelle max de l'image),
   donc tout son contenu reste à proportion stable et ne grossit
   pas indéfiniment quand le viewport s'élargit. */
.stage {
    position: fixed;
    top: 50%;
    left: 50%;
    width: var(--ui);
    height: calc(var(--ui) / var(--bg-ratio));
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

.stage > * { pointer-events: auto; }

/* Mode debug : overlay du template (touche T) */
.template-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    width: var(--bg-w);
    height: var(--bg-h);
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.2s ease;
}

.template-overlay.actif { opacity: 0.5; }

/* ============================================
   SYSTÈME DE CALQUES 9-SLICE
   Chaque PNG fait 1672x941 (canvas commun) avec son élément
   placé à sa position finale, transparence ailleurs.

   Technique : chaque calque est en background-size: cover (remplit
   le viewport, conserve son ratio) MAIS avec un background-position
   adapté à la zone où se trouve son élément :
     - Éléments en haut → top
     - Éléments en bas → bottom
     - Éléments à gauche → left
     - Éléments centraux → center
   Ainsi sur écrans plus larges/étroits que l'image, le rognage
   se fait du CÔTÉ OPPOSÉ à l'élément, qui reste donc visible.
   ============================================ */

.bg-layers {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.layer {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* Ancrages 9-slice - chaque classe préserve sa zone */
.layer.tl { background-position: top left; }
.layer.tc { background-position: top center; }
.layer.tr { background-position: top right; }
.layer.ml { background-position: center left; }
.layer.mc { background-position: center center; }
.layer.mr { background-position: center right; }
.layer.bl { background-position: bottom left; }
.layer.bc { background-position: bottom center; }
.layer.br { background-position: bottom right; }


/* ============================================
   ÉTOILES SCINTILLANTES DANS LE CIEL
   Technique : 3 couches d'étoiles générées par des box-shadows
   multiples. Chaque couche scintille avec un timing différent
   pour un effet aléatoire et naturel.
   ============================================ */

.ciel-etoiles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.couche-etoiles {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: transparent;
}

/* Couche 1 : petites étoiles fines, scintillement rapide */
.couche-1 {
    box-shadow:
        12vw 8vh 0 0.5px rgba(255,255,255,0.9),
        25vw 5vh 0 0.5px rgba(220,200,255,0.85),
        38vw 14vh 0 0.5px rgba(255,240,255,0.95),
        52vw 10vh 0 0.5px rgba(200,180,255,0.8),
        66vw 6vh 0 0.5px rgba(255,250,250,0.95),
        78vw 11vh 0 0.5px rgba(230,210,255,0.85),
        88vw 16vh 0 0.5px rgba(255,235,255,0.9),
        5vw 22vh 0 0.5px rgba(210,200,250,0.75),
        45vw 24vh 0 0.5px rgba(255,245,255,0.9),
        72vw 27vh 0 0.5px rgba(220,200,255,0.8),
        92vw 28vh 0 0.5px rgba(255,255,255,0.95),
        15vw 35vh 0 0.5px rgba(200,190,240,0.7),
        32vw 38vh 0 0.5px rgba(245,235,255,0.85),
        58vw 41vh 0 0.5px rgba(210,200,250,0.7);
    animation: scintille-1 3.4s ease-in-out infinite;
}

/* Couche 2 : étoiles moyennes, scintillement plus lent */
.couche-2 {
    width: 2.5px;
    height: 2.5px;
    box-shadow:
        8vw 12vh 1.5px 0 rgba(255,240,255,1),
        20vw 18vh 1px 0 rgba(220,200,255,0.95),
        35vw 7vh 1.5px 0 rgba(255,250,255,1),
        48vw 19vh 1px 0 rgba(255,230,255,0.9),
        62vw 14vh 1.5px 0 rgba(220,210,255,0.95),
        75vw 23vh 1px 0 rgba(255,245,255,1),
        85vw 9vh 1.5px 0 rgba(230,220,255,0.95),
        18vw 30vh 1px 0 rgba(255,250,255,0.9),
        55vw 33vh 1.5px 0 rgba(240,230,255,0.95);
    animation: scintille-2 4.8s ease-in-out infinite;
}

/* Couche 3 : grosses étoiles avec halo, scintillement très lent */
.couche-3 {
    width: 3px;
    height: 3px;
    box-shadow:
        15vw 6vh 3px 0.5px rgba(255,255,255,1),
        42vw 12vh 4px 0.5px rgba(255,240,255,1),
        70vw 18vh 3px 0.5px rgba(220,200,255,1),
        86vw 25vh 4px 0.5px rgba(255,250,255,1),
        28vw 31vh 3px 0.5px rgba(240,230,255,1);
    animation: scintille-3 6.2s ease-in-out infinite;
}

@keyframes scintille-1 {
    0%, 100% { opacity: 0.95; }
    50%      { opacity: 0.4; }
}
@keyframes scintille-2 {
    0%, 100% { opacity: 1; }
    30%      { opacity: 0.6; }
    70%      { opacity: 0.85; }
}
@keyframes scintille-3 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ============================================
   PARTICULES MAGIQUES FLOTTANTES (poussière d'étoiles)
   Petits points lumineux qui montent doucement comme des
   lucioles ou de la poussière de magie en suspension.
   ============================================ */

.particules {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.particule {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 230, 255, 0.95) 0%,
        rgba(200, 170, 255, 0.6) 40%,
        rgba(180, 140, 230, 0) 100%);
    filter: blur(0.5px);
    will-change: transform, opacity;
}

/* Positions de départ + animations individuelles
   Timing function = linear pour un mouvement RÉGULIER (pas de
   ralentissement/accélération à chaque cycle). Durées et délais
   différents pour désynchroniser les particules. */
.particule.p1  { left:  8%; bottom: -2%; animation: flottement 14s linear 0s    infinite; }
.particule.p2  { left: 15%; bottom: -2%; animation: flottement 11s linear 1.5s  infinite; width: 4px; height: 4px; }
.particule.p3  { left: 22%; bottom: -2%; animation: flottement 16s linear 3s    infinite; }
.particule.p4  { left: 31%; bottom: -2%; animation: flottement 13s linear 0.8s  infinite; width: 2px; height: 2px; }
.particule.p5  { left: 40%; bottom: -2%; animation: flottement 17s linear 4s    infinite; }
.particule.p6  { left: 48%; bottom: -2%; animation: flottement 12s linear 2.2s  infinite; width: 4px; height: 4px; }
.particule.p7  { left: 56%; bottom: -2%; animation: flottement 15s linear 5s    infinite; }
.particule.p8  { left: 63%; bottom: -2%; animation: flottement 18s linear 1s    infinite; width: 2px; height: 2px; }
.particule.p9  { left: 71%; bottom: -2%; animation: flottement 13s linear 3.5s  infinite; }
.particule.p10 { left: 78%; bottom: -2%; animation: flottement 14s linear 6s    infinite; width: 4px; height: 4px; }
.particule.p11 { left: 86%; bottom: -2%; animation: flottement 16s linear 2.5s  infinite; }
.particule.p12 { left: 93%; bottom: -2%; animation: flottement 19s linear 4.5s  infinite; }
.particule.p13 { left: 11%; bottom: -2%; animation: flottement 15s linear 7s    infinite; width: 2px; height: 2px; }
.particule.p14 { left: 45%; bottom: -2%; animation: flottement 17s linear 8s    infinite; }
.particule.p15 { left: 82%; bottom: -2%; animation: flottement 12s linear 5.8s  infinite; width: 4px; height: 4px; }

/* Mouvement RÉGULIER (linear) : la particule monte du bas vers
   le haut à vitesse constante, avec une oscillation horizontale
   subtile sinueuse. L'opacité fade in/out sur les bords pour
   masquer la boucle (la particule disparaît avant de réapparaître
   en bas → pas de "saut" visible). */
@keyframes flottement {
    0%   { transform: translate(0, 0); opacity: 0; }
    6%   { opacity: 0.9; }
    20%  { transform: translate(5px, -20vh); }
    40%  { transform: translate(-4px, -40vh); }
    60%  { transform: translate(6px, -60vh); }
    80%  { transform: translate(-5px, -80vh); }
    94%  { opacity: 0.6; }
    100% { transform: translate(2px, -105vh); opacity: 0; }
}

/* ============================================
   FILLE - tout premier plan, devant tout (titre, magiques, plantes)
   Suit le décor en cover bottom-left, avec animation subtile
   de balancement (pivot à ses pieds en bas-gauche).
   ============================================ */

.fille-front {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 5;
    /* Pivot ancré au coin bas-gauche du viewport (= aux pieds de la
       fille puisqu'elle est ancrée bottom-left) */
    transform-origin: 28% 100%;
    animation:
        fille-sway 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
        fille-breathe 5.5s ease-in-out infinite;
    will-change: transform;
}

/* Sway subtil : la cape ondule, le corps suit légèrement le vent.
   Amplitude très faible pour rester naturelle, pivot aux pieds. */
@keyframes fille-sway {
    0%, 100% { rotate: -0.4deg; }
    50%      { rotate: 0.5deg; }
}

/* Respiration : très léger zoom centré sur le buste, simule la
   poitrine qui se soulève en respirant. */
@keyframes fille-breathe {
    0%, 100% { scale: 1 1; }
    50%      { scale: 1.004 1.006; }
}

/* ============================================
   ÉLÉMENTS MAGIQUES (montre, cadre, masque, clé)
   Chaque PNG = canvas 1672x941 avec l'élément à sa position
   et transparence ailleurs. En l'affichant à 100% du stage
   (qui suit la taille naturelle de l'image), l'élément se
   retrouve naturellement à la bonne place ET à la bonne taille.
   ============================================ */

.elem-magique {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

/* Animations de flottement - chaque élément combine 2 animations
   indépendantes (translation Y + rotation) avec des durées et
   easings différents pour créer un mouvement organique non-cyclique.
   Utiliser cubic-bezier sinusoïdal pour un mouvement vraiment fluide. */

/* Variables d'easing : très doux, simulent une oscillation naturelle */
.elem-montre {
    animation:
        float-y-montre 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
        sway-montre 11s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.elem-cadre {
    animation:
        float-y-cadre 11s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
        sway-cadre 14s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.elem-masque {
    animation:
        float-y-masque 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
        sway-masque 10s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.elem-cle {
    animation:
        float-y-cle 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
        sway-cle 13s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

/* Animations Y : flottement vertical doux (translateY uniquement) */
@keyframes float-y-montre {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -0.7%; }
}
@keyframes float-y-cadre {
    0%, 100% { translate: 0 0.2%; }
    50%      { translate: 0 -0.9%; }
}
@keyframes float-y-masque {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -0.6%; }
}
@keyframes float-y-cle {
    0%, 100% { translate: 0 -0.2%; }
    50%      { translate: 0 -1%; }
}

/* Animations rotation : balance latérale comme suspendu à un fil */
@keyframes sway-montre {
    0%, 100% { rotate: -1.5deg; }
    50%      { rotate: 1.5deg; }
}
@keyframes sway-cadre {
    0%, 100% { rotate: 2deg; }
    50%      { rotate: -2deg; }
}
@keyframes sway-masque {
    0%, 100% { rotate: 1deg; }
    50%      { rotate: -1.2deg; }
}
@keyframes sway-cle {
    0%, 100% { rotate: -2.5deg; }
    50%      { rotate: 2.5deg; }
}

/* ============================================
   PAGE ACCUEIL
   Positions en % du stage (1672x941)
   ============================================ */

/* Bloc titre centré ~35% top */
.bloc-titre {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, 0);
    text-align: center;
    width: 100%;
}

.titre-principal {
    font-family: 'Cinzel', serif;
    font-size: calc(var(--ui) * 0.052);
    font-weight: 500;
    color: #f5ecff;
    letter-spacing: 0.015em;
    line-height: 1;
    text-shadow:
        0 0 calc(var(--ui) * 0.012) rgba(200, 150, 255, 0.55),
        0 0 calc(var(--ui) * 0.03) rgba(170, 100, 230, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.6);
    margin: 0;
}

.titre-separateur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--ui) * 0.012);
    margin-top: calc(var(--ui) * 0.008);
}

.titre-separateur::before,
.titre-separateur::after {
    content: '';
    display: block;
    width: calc(var(--ui) * 0.06);
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(230, 200, 255, 0.7), transparent);
}

.titre-secondaire {
    font-family: 'Cinzel', serif;
    font-size: calc(var(--ui) * 0.014);
    font-weight: 400;
    color: #ede0ff;
    letter-spacing: 0.4em;
    text-shadow: 0 0 calc(var(--ui) * 0.008) rgba(200, 150, 255, 0.5);
    padding-left: 0.4em;
}

.ornement {
    color: #d9b8ff;
    font-size: calc(var(--ui) * 0.009);
    text-shadow: 0 0 8px rgba(200, 150, 255, 0.7);
}

.sous-titre {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: calc(var(--ui) * 0.0115);
    color: #e6d4ff;
    letter-spacing: 0.04em;
    text-shadow: 0 0 12px rgba(180, 130, 220, 0.5);
    margin-top: calc(var(--ui) * 0.008);
    opacity: 0.95;
}

/* Menu boutons - centré sous le sous-titre */
.menu-accueil {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--ui) * 0.009);
    width: calc(var(--ui) * 0.22);
}

.btn-menu {
    position: relative;
    width: 100%;
    padding: calc(var(--ui) * 0.009) calc(var(--ui) * 0.012);
    background: rgba(40, 20, 70, 0.18);
    border: none;
    border-top: 1px solid rgba(230, 200, 255, 0.35);
    border-bottom: 1px solid rgba(230, 200, 255, 0.35);
    color: #f0e6ff;
    font-family: 'Cinzel', serif;
    font-size: calc(var(--ui) * 0.0095);
    font-weight: 400;
    letter-spacing: 0.28em;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.35s ease, text-shadow 0.35s ease,
                background 0.35s ease, transform 0.35s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    text-shadow: 0 0 8px rgba(200, 150, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--ui) * 0.012);
}

/* Bordure décorative au survol — bordure-choix.png en overlay.
   L'image PNG (1536×1024) contient 2 lignes horizontales à :
     - y=401 (39.2% du PNG) = ligne haute du décor
     - y=546 (53.4% du PNG) = ligne basse du décor
   Distance entre les 2 lignes = 145px du PNG.
   Pour que ces 2 lignes coïncident avec border-top et border-bottom
   du bouton, on dimensionne l'overlay tel que :
     - height = 1024/145 × bouton_h = 706.2% du bouton
     - width = aspect-ratio image (1536/1024 = 1.5)
     - top = -401/145 × bouton_h = -276.6% (décale vers le haut) */
.btn-menu::before {
    content: '';
    position: absolute;
    top: -276.6%;
    left: 50%;
    height: 706.2%;
    aspect-ratio: 1536 / 1024;
    background-image: url('../images/bordure-choix.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateX(-50%) scale(0.92);
    /* Origin = position du centre du bouton dans l'overlay
       = (276.6% + 50% × bouton_h) / 706.2% = 46.25% */
    transform-origin: center 46.25%;
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(255, 220, 255, 0.4));
}

.btn-menu:not(:disabled):hover {
    background: rgba(80, 40, 130, 0.28);
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 200, 255, 0.85);
}

.btn-menu:not(:disabled):hover::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* État désactivé (pas de partie enregistrée pour CONTINUER) */
.btn-menu:disabled {
    color: rgba(200, 180, 220, 0.35);
    text-shadow: none;
    cursor: not-allowed;
    border-top-color: rgba(200, 180, 220, 0.12);
    border-bottom-color: rgba(200, 180, 220, 0.12);
    background: rgba(30, 15, 50, 0.12);
}

/* Footer accueil - fixé au viewport (pas au stage) pour rester
   toujours visible même quand l'image cover déborde latéralement */
.footer-accueil {
    position: fixed;
    bottom: clamp(10px, 1.2vmin, 20px);
    left: clamp(14px, 1.6vmin, 28px);
    right: clamp(14px, 1.6vmin, 28px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Cinzel', serif;
    font-size: clamp(10px, 1.05vmin, 14px);
    letter-spacing: 0.25em;
    color: rgba(230, 210, 255, 0.75);
    z-index: 50;
}

.footer-options {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: color 0.3s ease;
}
.footer-options:hover {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 200, 255, 0.6);
}

.icone-roue { font-size: 1.2em; }

.footer-version { color: rgba(230, 210, 255, 0.55); }

/* ============================================
   PAGE CRÉATION
   ============================================ */

.creation-header {
    /* Fixé au viewport pour rester visible en haut quelle que
       soit la taille d'écran. */
    position: fixed;
    left: 50%;
    top: clamp(2vh, calc(50vh - 0.42 * var(--bg-h)), 8vh);
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    z-index: 5;
}

.creation-titre-bloc {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--ui) * 0.012);
}

.creation-titre-bloc::before,
.creation-titre-bloc::after {
    content: '';
    display: block;
    width: calc(var(--ui) * 0.04);
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(230, 200, 255, 0.6), transparent);
}

.ornement-haut {
    position: absolute;
    top: calc(var(--ui) * -0.015);
    left: 50%;
    transform: translateX(-50%);
    color: #ffe6ff;
    font-size: calc(var(--ui) * 0.012);
    text-shadow: 0 0 12px rgba(255, 200, 255, 0.8);
}

.creation-titre {
    font-family: 'Cinzel', serif;
    font-size: calc(var(--ui) * 0.022);
    font-weight: 500;
    color: #f5ecff;
    letter-spacing: 0.3em;
    text-shadow:
        0 0 calc(var(--ui) * 0.01) rgba(200, 150, 255, 0.5),
        0 0 calc(var(--ui) * 0.025) rgba(170, 100, 230, 0.35);
    padding-left: 0.3em;
}

.creation-sous-titre {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: calc(var(--ui) * 0.012);
    color: #e6d4ff;
    letter-spacing: 0.04em;
    text-shadow: 0 0 12px rgba(180, 130, 220, 0.45);
    opacity: 0.9;
    margin-top: calc(var(--ui) * 0.008);
}

/* ============================================
   CRÉATION DE PERSONNAGE
   ============================================ */

/* Label de l'étape courante (CORPS / PEAU / YEUX...)
   Inclus dans .creation-header : suit le flow naturel sous
   le sous-titre, donc toujours bien place quel que soit l'ecran. */
.etape-label {
    display: inline-block;
    margin-top: calc(var(--ui) * 0.012);
    font-family: 'Cinzel', serif;
    font-size: clamp(14px, 1.5vmin, 22px);
    font-weight: 400;
    color: #f0e6ff;
    letter-spacing: 0.45em;
    padding-left: 0.45em;
    text-shadow:
        0 0 10px rgba(200, 150, 255, 0.6),
        0 0 22px rgba(170, 100, 230, 0.4);
    transition: opacity 0.4s ease;
}

.etape-label::before,
.etape-label::after {
    content: '\2756';
    margin: 0 0.8em;
    font-size: 0.7em;
    color: #d9b8ff;
    text-shadow: 0 0 8px rgba(200, 150, 255, 0.7);
    vertical-align: middle;
}

/* Aperçu de l'avatar - centré dans le viewport */
.avatar-preview {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Taille principale = se base sur la hauteur disponible
       (entre le titre en haut et le bouton SÉLECTIONNER en bas).
       Ratio 380/470 = canvas commun des PNG d'avatar regenerés
       (echelle perso normalisee via largeur de mollet = 89px). */
    height: clamp(260px, 55vh, 520px);
    aspect-ratio: 380 / 470;
    z-index: 5;
    pointer-events: none;
    /* Léger flottement vertical pour donner vie */
    animation: avatar-float 5s ease-in-out infinite;
}

.avatar-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

@keyframes avatar-float {
    0%, 100% { transform: translate(-50%, calc(-50% - 0px)); }
    50%      { transform: translate(-50%, calc(-50% - 8px)); }
}

/* Bouton SÉLECTIONNER en bas */
.btn-selectionner {
    position: fixed;
    bottom: clamp(20px, 5vh, 60px);
    left: 50%;
    transform: translateX(-50%);
    padding: calc(var(--ui) * 0.011) calc(var(--ui) * 0.028);
    background: rgba(40, 20, 70, 0.25);
    border: none;
    border-top: 1px solid rgba(230, 200, 255, 0.5);
    border-bottom: 1px solid rgba(230, 200, 255, 0.5);
    color: #f0e6ff;
    font-family: 'Cinzel', serif;
    font-size: clamp(12px, 1.3vmin, 17px);
    font-weight: 500;
    letter-spacing: 0.4em;
    padding-left: calc(var(--ui) * 0.028 + 0.4em);
    text-align: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    text-shadow: 0 0 10px rgba(200, 150, 255, 0.5);
    transition: color 0.35s ease, text-shadow 0.35s ease,
                background 0.35s ease;
}

/* Bordure décorative au hover, comme les boutons d'accueil */
.btn-selectionner::before {
    content: '';
    position: absolute;
    top: -276.6%;
    left: 50%;
    height: 706.2%;
    aspect-ratio: 1536 / 1024;
    background-image: url('../images/bordure-choix.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateX(-50%) scale(0.92);
    transform-origin: center 46.25%;
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(255, 220, 255, 0.5));
}

.btn-selectionner:hover {
    background: rgba(80, 40, 130, 0.35);
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255, 200, 255, 0.9);
}

.btn-selectionner:hover::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Flèches navigation - position absolue dans le stage */
.fleche {
    position: absolute;
    top: 52%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: filter 0.35s ease;
    filter: drop-shadow(0 0 18px rgba(255, 200, 255, 0.3));
}

.fleche-gauche { left: 26%; }
.fleche-droite { right: 26%; }

.fleche img {
    width: calc(var(--ui) * 0.075);
    height: auto;
    display: block;
    transition: transform 0.35s ease;
}

.fleche-droite img { transform: scaleX(-1); }

.fleche:hover {
    filter: drop-shadow(0 0 28px rgba(255, 220, 255, 0.65));
}
.fleche-gauche:hover img { transform: translateX(-6px); }
.fleche-droite:hover img { transform: scaleX(-1) translateX(-6px); }