/* 1. Conteneur principal (Bannière invisible sur toute la largeur) */
.pub-deroulante {
    position: fixed;
    top: -400px; /* Caché au-dessus (Hauteur image + espace pour le bouton sous l'image) */
    left: 0;
    width: 100%;
    z-index: 9999;
    
    /* Centrage horizontal du bloc publicitaire */
    display: flex;
    justify-content: center;

    animation: glisserVersLeBas 1s ease-out 1s forwards; 
	 /* Explication de l'animation de descente : Nom | Durée | Type de transition | Délai avant démarrage | Reste à sa position finale */
}

/* 2. Le bloc fixe contenant l'image et le bouton */
.bloc-pub {
    position: relative; /* 🔴 TRÈS IMPORTANT : Devient le point de repère du bouton fermer */
    width: 800px;       /* Largeur fixe de votre publicité */
    height: 250px;      /* Hauteur fixe de votre publicité */
}

.bloc-pub a {
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.bloc-pub img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

/* 3. Bouton "Fermer" positionné AU BORD INFERIEUR DROIT de l'image */
.bouton-fermer {
    position: absolute;
    bottom: 20px; /* -30 Se place exactement sous l'image (ajuster selon la hauteur du bouton) */
    right: 40px;      /* 0 S'aligne parfaitement sur le bord droit de l'image, sans bouger selon l'écran */
    background: #000;
    color: #ffF;
    border: none;
    /*padding: 6px 15px;*/
	padding: 8px 10px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
	border: 1px solid #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 4. Animation CSS */
@keyframes glisserVersLeBas {
    0% {
        top: -400px;
    }
    100% {
        top: 60px; /* Laisse un espace de 20px avec le haut de la fenêtre du navigateur */
    }
}

   ==========================================================================
   🟢 ADAPTATION RESPONSIVE (Écrans de moins de 800px de large)
   ========================================================================== */
@media (max-width: 800px) {
    .bloc-pub {
        width: 90%;       /* Prend 90% de la largeur de l'écran du téléphone */
        height: auto;     /* Permet à la hauteur de s'adapter automatiquement */
        aspect-ratio: 800 / 250; /* 🔴 Force le bloc à garder le même format que l'image */
    }

    .pub-deroulante {
        top: -300px;      /* Moins haut à cacher puisque le bloc est plus petit */
    }
    
    @keyframes glisserVersLeBas {
        0% { top: -300px; }
        100% { top: 0px; } /* Légèrement plus haut sur mobile pour gagner de la place */
    }
}