/* 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 { 
    height: 500px;         
    width: 100%;           
    object-fit: contain;   
    background-color: #000; 
}

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

/* 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);
}

/* 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;
}