/* Fichier : css/style.css */
/* 1. Supprimer tous les fonds noirs par défaut */ 
/* Fichier : css/style.css */

/* Structure principale pour que le footer reste en bas */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* 1. Assurez-vous que le main occupe tout l'espace disponible */
main {
    flex: 1;
    display: flex;
    flex-direction: column; 
    align-items: center; /* Centre horizontalement */
    padding-top: 120px;   /* Donne de l'espace en haut pour le titre */
}

/* 2. Empêche le footer de se faire pousser */
footer {
    flex-shrink: 0;
    background-color: #000 !important;
}



/* On force la transparence sur les éléments Bootstrap potentiellement noirs */
.container, .row, .col, main {
    background-color: transparent !important;
}

/* Texte par défaut */
h2, h3, p, span { 
    color: #F5A938 ; 
}

.title-black {
    color: #CF900A !important;
}


/* 2. On garde le fond noir UNIQUEMENT pour la barre du haut */
.header-top { 
    background-color: #000 ; 
    border-bottom: 1px solid #F5A938 ; 
} 

/* Forcer le fond noir sur les boutons, même par-dessus Bootstrap */
.btn-outline-warning {
    background-color: #000 !important; 
    border: 2px solid #F5A938 !important; 
    color: #F5A938 !important;
    opacity: 1 !important; /* Force l'opacité */
}

/* Forcer l'inversion au survol */
.btn-outline-warning:hover {
    background-color: #FFF !important;
    color: #000 !important;
    border-color: #F5A938 !important;
}

/* On cible le conteneur de vos boutons pour les pousser vers le bas */
.buttons-wrapper {
    margin-top: auto;    /* Pousse tout le bloc vers le bas du main */
    margin-bottom: 50px; /* Ajoute un espace avec le footer */
    display: flex;
    gap: 20px;           /* Espace entre les boutons si vous en avez plusieurs */
}


/* 4. Si vous avez un bloc derrière les boutons (comme sur votre capture), supprimez son fond */
.main-content-box {
    background-color: transparent ;
}

a {
    color: #F5A938 ;
    transition: color 0.3s ease;
}

a:hover {
    color: #ffcc73 ;
}

.header-top { 
    background-color: #000; 
    border-bottom: 1px solid #F5A938 ; 
}

.carousel-item img,
.carousel-item video {
    height: 500px;
    width: 100%;
    object-fit: contain;
    background-color: #000;
}

.carousel-inner {
    border: 2px solid #F5A938;
}

/* Points de position du carousel : affichés à gauche, en dehors du cadre */
.carousel-with-side-indicators {
    display: flex;
    align-items: stretch;
    gap: 15px;
}

.carousel-with-side-indicators > .carousel {
    flex: 1 1 auto;
    min-width: 0;
}

.carousel-side-indicators {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.carousel-side-indicators button {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(245, 169, 56, 0.4);
    cursor: pointer;
    transition: background-color .3s ease, transform .3s ease;
}

.carousel-side-indicators button:hover {
    background-color: rgba(245, 169, 56, 0.7);
}

.carousel-side-indicators button.active {
    background-color: #F5A938;
    transform: scale(1.3);
}

/* Sur petit écran, les points repassent sous le carousel, en ligne */
@media (max-width: 576px) {
    .carousel-with-side-indicators {
        flex-direction: column;
    }

    .carousel-side-indicators {
        flex-direction: row;
        order: 2;
    }
}

/* Fichier : css/style.css */

/* 1. Style par défaut des boutons (transparent pour bien voir l'icône) */
.carousel-control-prev, 
.carousel-control-next {
    width: 15%; /* Élargit la zone cliquable pour faciliter la navigation */
    opacity: 1 !important; /* Force l'opacité */
}

/* 2. Effet au survol (optionnel : voile noir semi-transparent) */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Quand la slide active est une vidéo, on libère la bande du bas pour que
   sa barre de contrôle native (lecture, volume, plein écran...) reste
   cliquable au lieu d'être recouverte par les flèches précédent/suivant. */
.carousel--video-active .carousel-control-prev,
.carousel--video-active .carousel-control-next {
    bottom: 50px;
}

/* 3. Icône Précédent (Flèche gauche en doré #F5A938) */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5A938'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

/* 4. Icône Suivant (Flèche droite en doré #F5A938) */
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5A938'%3e%3cpath d='M8.354 1.646a.5.5 0 0 0 0 .708L14.013 8l-5.659 5.646a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708l-6-6a.5.5 0 0 0-.708 0z'/%3e%3c/svg%3e");
}



footer a:hover {
    text-decoration: underline !important;
    color: #ffcc73 !important;
}