/* Reset et Base (identique) */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
    color: white;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Effet de neige (identique) */
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.snowflake {
    position: absolute;
    top: -10px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(110vh);
    }
}

/* Contenu Principal */
.content {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
}

header {
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

header h1 {
    font-size: 2rem;
    font-weight: 300;
}

header p {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* --- NOUVEAU CSS POUR L'EMPILEMENT (STACK) --- */

.stack-container {
    width: 100%;
    flex: 1;
    /* Prend l'espace restant */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Important pour que les cartes swipées disparaissent */
}

.card-stack {
    position: relative;
    width: 320px;
    /* Largeur fixe pour la pile */
    height: 480px;
    /* Hauteur fixe pour la pile */
}

/* Style de base de la carte */
.card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    border-radius: 20px;
    overflow: hidden;
    color: #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

    /* Transitions fluides pour les mouvements */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;

    /* Par défaut, les cartes sont cachées derrière et non cliquables */
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    display: flex;
    flex-direction: column;
}

/* La carte du dessus (active) */
.card.active {
    opacity: 1;
    pointer-events: auto;
    /* C'est la seule qu'on peut toucher */
    z-index: 3;
    transform: scale(1) translateY(0);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* La carte juste derrière (next) */
.card.next {
    opacity: 0.7;
    z-index: 2;
    /* Plus petite et légèrement décalée vers le bas */
    transform: scale(0.92) translateY(20px);
}

/* La 3ème carte */
.card.next-next {
    opacity: 0;
    z-index: 1;
    transform: scale(0.84) translateY(40px);
}

/* États de Swipe (animations de sortie) */
.card.swiped-left {
    transform: translateX(-150%) rotate(-20deg) !important;
    opacity: 0 !important;
}

.card.swiped-right {
    transform: translateX(150%) rotate(20deg) !important;
    opacity: 0 !important;
}


/* Style interne de la carte (similaire à avant) */
.card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    pointer-events: none;
    /* Important pour le drag */
}

.card-body {
    padding: 20px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.card-body h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.card-body p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.4;
}

.card.end-card {
    background: #fff0f0;
}

/* Bouton Noël */
.btn-noel {
    background-color: #D42426;
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(212, 36, 38, 0.4);
    margin-bottom: 10px;
}

/* --- ANIMATION EXPLOSION & PLEIN ÉCRAN --- */

/* Style de la carte quand elle est choisie */
.card.chosen {
    position: fixed !important;
    /* Force le positionnement par rapport à l'écran */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    /* Au-dessus de tout, même la neige */
    transform: none !important;
    /* Annule les rotations/swipes */
    border-radius: 0;
    /* Plus de coins arrondis */
    cursor: default;
    display: flex;
    flex-direction: column;
    animation: expandCard 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* On cache le header et les autres cartes quand une est choisie */
body.selection-done header,
body.selection-done .stack-container {
    /* On ne cache pas .stack-container, sinon la carte choisie disparaît (car elle est dedans) */
    /* On va plutôt gérer ça en cachant les frères de la carte active via JS ou CSS ciblé */
}

/* Cache le bouton une fois cliqué */
.card.chosen .btn-noel {
    display: none;
}

/* Ajustement de l'image en plein écran */
.card.chosen img {
    height: 50vh;
    /* L'image prend la moitié de l'écran */
    object-fit: cover;
}

.card.chosen .card-body {
    justify-content: center;
    font-size: 1.2rem;
}

.card.chosen h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #D42426;
    /* Rouge Noël */
}

/* Les Particules (Confettis) */
.particle {
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: #D42426;
    border-radius: 50%;
    pointer-events: none;
    /* Pour cliquer au travers */
    z-index: 10000;
}

/* Animation d'expansion de la carte */
@keyframes expandCard {
    from {
        border-radius: 20px;
        /* La position de départ est gérée par le JS/CSS existant */
    }

    to {
        border-radius: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translate(0, 0) scale(1);
    }
}

/* --- Confettis persistants (La pluie de fête) --- */
.confetti-rain {
    position: fixed;
    top: -20px;
    /* Commence hors de l'écran */
    width: 10px;
    height: 10px;
    z-index: 10001;
    /* Au-dessus de la carte choisie (qui est à 9999) */
    opacity: 1;
    animation: fall linear infinite;
    /* On réutilise l'animation de la neige */
}

/* On ajoute une petite rotation pour que les confettis tournent en tombant */
@keyframes fall-rotate {
    0% {
        transform: translateY(-10vh) rotate(0deg);
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
    }
}