@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Roboto:wght@300;400;700&display=swap');

/* Style global */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #000; /* Fond noir appliqué pour contourner le contrast accessibilité */
}

/* Effet de transition douce pour le scroll */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

.container {
    text-align: center;
}

p {
    color: white;
    font-size: 1.25rem; /* Taille de police plus grande, similaire à la classe .lead de Bootstrap */
    line-height: 1.6;   /* Espacement des lignes pour améliorer la lisibilité */
}

h1, h2 {
    font-family: cizel, serif;
    font-size: 2rem;
    color: #B8860B; /* Blanc pour contraste */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
}

h3, h4 {
    color: #B8860B;
}

a {
    text-decoration: none;
}

.link_or {
    color: #B8860B;
}

/* Suppression des puces et marges par défaut pour les listes */
ul {
    list-style: none; /* Enlève les puces */
}

mark {
    background-color: inherit; /* Change la couleur de fond */
    color: white; /* Change la couleur du texte */
    font-weight: bold; /* Optionnel : rendre le texte en gras */
}

/* Masquer élément */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    clip-path: inset(100%);
    border: 0;
    overflow: hidden;
}

.mentions-section, .privacy-section, .discover-section  {
    scroll-margin-top: 100px;
}

/* Trait de séparation */
.separator {
    border: 0; /* Retire les bordures par défaut */
    height: 2px; /* Définit l'épaisseur du trait */
    background-color: #b8860b; /* Couleur or */
    width: 50%; /* Le trait prend 50% de la largeur de son conteneur */
    margin: 0 auto;
}

.logo-noel {
    max-width: 100%;
    height: auto; /* Maintient le ratio d'aspect */
}

.clave {
    color: #B8860B;
}

/* ------------------------------------------------------------------------------------------- HEADER  --------------------------------------------------------------------------------*/

header {
    height: 100vh; /* Prend toute la hauteur de la fenêtre */
}
/* Personnalisation de la navigation */
.navbar {
    background-color: #000;
    padding: 15px 30px;
    position: fixed;
    top: 0;
    width: 100%;
}

/* Style ajouté pour le theme de noel (à supprimer après la période)
.navbar {
    z-index: 5;
    overflow: hidden;
}
*/
    
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.navbar-nav .nav-item .nav-link {
    color: white;
    font-size: 1.2em;
    padding: 10px 15px;
    position: relative;
    transition: color 0.3s, background-color 0.3s;
}

/* Trait en or sous le lien */
.navbar-nav .nav-item .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #b8860b; /* Or */
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

/* Effet au survol */
.navbar-nav .nav-item .nav-link:hover {
    color: #b8860b; /* Texte or au survol */
}

/* Affichage du trait au survol */
.navbar-nav .nav-item .nav-link:hover::after {
    transform: scaleX(1);
}

.navbar-nav .nav-item:not(:last-child) .nav-link {
    padding-right: 15px;
}

/* Icône de la carte */
.map-icon {
    font-size: 40px; /* Taille de l'icône */
    color: #D4AF37; /* Couleur or */
    margin: 20px;
}

/* Lors du survol */
.map-icon:hover {
    color: white;
    transform: translateY(-3px); /* Légère élévation */
}

/* Bouton "Appeler" */
.btn-custom {
    color: #b8860b; /* Or */
    border: 1px solid #b8860b; /* Bordure or */
    padding: 12px 30px;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    color: white;
    transform: translateY(-3px); /* Légère élévation */
    box-shadow: 0 0 15px 3px rgba(220, 220, 220, 0.7); /* Ombre grise autour du bouton */
    border: solid 1px #DCDCDC;
}

.custom2 {
    color: white;
    border: 1px solid white;
}
/* -------------------------------------------------------------------------------------- HERO  -------------------------------------------------------------------------------------- */

/* Section principale */
.hero {
    position: relative;
    height: 100vh; /* Prend toute la hauteur de la fenêtre */
}

/* Vidéo de fond */
.hero-video {
    width: 100%; /* Prendre toute la largeur */
    height: 100%; /* Prendre toute la hauteur */
    object-fit: cover; /* Remplir sans déformation */
    position: absolute; /* Positionner en arrière-plan */
}

/* Contenu de la section (texte et bouton) */
.hero-content {
    position: absolute;
    top: 70%; /* Placer au centre verticalement */
    left: 50%; /* Placer au centre horizontalement */
    transform: translate(-50%, -50%); /* Centrer précisément */
}

/* Style du bouton */
.hero-content .btn {
    background-color: transparent;
    color: #fff; /* Texte blanc */
    border: solid 1px;
    border-radius: 0;
    padding: 12px 30px;
    font-size: 1.25rem;
    font-weight: bold;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Ombre douce */
    transition: all 0.3s ease; /* Transition fluide */
}

.hero-content .btn:hover {
    color: #fff; /* Texte blanc */
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée */
    transform: translateY(-3px); /* Effet de levée */
}

/* ------------------------------------------------------------------------------------ SECTION 1 ------------------------------------------------------------------------------------ */

/* Style pour le carrousel d'accueil */
.carousel-container {
    max-width: 600px;  /* Augmenter la largeur maximale du carrousel */
    margin: 0 auto;
    padding: 10px;
}

.carousel-inner {
    border: 1px solid #b8860b; /* Bordure dorée autour du carrousel */
    border-radius: 8px;  /* Coins arrondis */
    transition: box-shadow 0.3s;  /* Effet de transition pour l'ombre */
    box-shadow: 0 0 15px #b8860b;  /* Ombre dorée au survol */

}

.carousel-item {
    height: auto;  /* Permet à l'élément de s'ajuster automatiquement à son contenu */
}

.carousel-item img {
    max-height: 500px;  /* Fixe une hauteur maximale pour les images */
    object-fit: contain; /* Assure que l'image s'ajuste bien sans être déformée */
}

.carousel-control-prev,
.carousel-control-next {
    width: 50px;  /* Taille des flèches */
    height: 50px;
    border-radius: 50%; /* Flèches arrondies */
    background: rgba(0, 0, 0, 0.5);  /* Fond noir semi-transparent */
    top: 50%;  /* Alignement vertical des flèches */
    transform: translateY(-50%);  /* Centrage vertical des flèches */
    opacity: 0.8;  /* Légèrement transparent */
    transition: all 0.3s;  /* Transition pour l'effet de survol */
    margin: 10px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(0, 0, 0, 0.7);  /* Fond plus foncé au survol */
    box-shadow: 0 0 10px #b8860b;  /* Ombre dorée au survol */
}

/* Style pour les informations des produits */
.figure {
    margin: 0; /* Évite les marges externes */
    padding: 0; /* Retire tout padding éventuel */
    width: 100%; /* Assure la pleine largeur */
}

.figure-caption { 
    background-color: black; /* Fond noir */
    padding: 10px; /* Espacement interne pour un rendu propre */   
}

.figure-img {
    padding: 10px; /* Espace entre l'image et le bloc */
}

.product-description {
    font-size: 1rem;
    margin-bottom: 5px; /* Espace minimum entre les boutons slides et la description */
    font-style: italic;
}

.product-title { /* Permet de garder le carrousel de la même taille*/
    font-weight: 700; /* Texte plus fort pour le titre */
    white-space: nowrap; /* Empêche le texte de passer à la ligne suivante */
    overflow: hidden; /* Cache le texte qui dépasse du conteneur */
    text-overflow: ellipsis; /* Ajoute des "..." à la fin du texte qui dépasse */
    max-width: 100%; 
    font-size: 1.5rem;
}

.product-title[title] { /* Permet d'afficher le titre si celui ci est trop long */
    cursor: help; 
}

/* --------------------------------------------------------------------------------- SECTION EXPERTISE ---------------------------------------------------------------------------------- */

#reception, #menu-produits, #experience-cave {
    scroll-margin-top: 150px;
}

.ul-fa {
    padding: 0;
}

/* Style du conteneur de l'icône */
.skill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: transparent; /* Fond transparent */
    border: 2px solid #B8860B; /* Bordure dorée */
    border-radius: 50%; /* Forme ronde */
    animation: bounce 2s infinite ease-in-out; /* Animation de rebond */
}

.skill-icon i {
    font-size: 32px; /* Taille de l'icône */
    color: #B8860B; /* Couleur dorée de l'icône */
    transition: transform 0.3s ease;
}

.skill-icon:hover {
    text-decoration: none;
    box-shadow: 0 0 15px 3px rgba(184, 134, 11, 0.7); /* Ombre dorée autour de l'icône */
}

/* Animation de rebond */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0); /* Position de base */
    }
    50% {
        transform: translateY(-20px); /* Monte légèrement */
    }
}

/* ---------------------------------------------------------------------------------- SECTION MILLESIME --------------------------------------------------------------------------------------*/

/* Style pour les mots Noël */
.noel-style {
    color: #B22222; /* Rouge foncé festif */
    font-weight: bold; /* Met en valeur */
    text-shadow: 0 0 10px rgba(178, 34, 34, 0.7); /* Légère lueur rouge */
    font-family: 'Dancing Script', cursive; /* Police manuscrite festive (optionnelle) */
}

/* style pour la vidéo de noël */
.christmas-video {
    width: 578px;
    max-width: 100%;  /* Pour qu'elle reste responsive */
    box-shadow: 0 0 15px 10px rgba(184, 134, 11, 0.5); /* Halo doré (#b8860b) */
    border-radius: 5px;
}

/* Style pour le CTA de Noël */
.cta-noel {
    display: block;  /* Ce qui permet au lien de se comporter comme un bloc */
    background: linear-gradient(45deg, #000000, #B8860B); /* Dégradé noir et or */
    color: #fff; /* Texte blanc */
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px 30px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 187, 0, 0.6); /* Effet lumineux */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0 auto;
    max-width: 578px; /* Largeur maximale du CTA */
}

/* Effets au survol */
.cta-noel:hover {
    transform: scale(1.1); /* Agrandissement léger */
    box-shadow: 0 0 20px rgba(255, 196, 0, 0.8), 0 0 30px rgba(139, 0, 0, 0.8); /* Lumière renforcée */
    text-decoration: none;
    color: #DCDCDC;
}

/* Effets au clic */
.cta-noel:active {
    transform: scale(0.95); /* Réduction légère au clic */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Lumière plus douce */
}

/* FAQ Section */
.faq-section {
    max-width: 600px;
    margin: 0 auto;
}

.accordion-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #ceab5d;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.accordion-button {
    background-color: transparent;
    color: #fff;
    font-weight: 500;
    padding: 1rem 1.25rem;
    text-align: left;
    width: 100%;
    border: none;
    outline: none;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    background-color: #AA1E13;
    color: #fff;
    box-shadow: none;
}

.accordion-button:hover {
    background-color: #AA1E13;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: #AA1E13;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    padding: 1.25rem;
    line-height: 1.6;
    border-top: 1px solid #ceab5d;
}

.accordion-body ul {
    padding-left: 0; /* Supprime le padding par défaut des listes */
    margin-left: 0; /* Supprime les marges par défaut */
    list-style-position: inside; /* Aligne les puces à l'intérieur de la zone de texte */
    text-align: center; /* Aligne le texte à gauche */
}


/* --------------------------------------------------------------------------------- SECTION BLOCS PRODUITS ------------------------------------------------------------------------------*/

.product-item {
    background-color: transparent; /* Fond transparent */
    border: 1px solid #b8860b; /* Bordure dorée */
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Effets au survol */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%; /* Assurer une hauteur égale */
    padding: 20px;
    box-sizing: border-box;
}

.product-item:hover {
    transform: scale(1.05); /* Effet zoom au survol */
    box-shadow: 0 0 15px 3px rgba(184, 134, 11, 0.7); /* Ombre dorée */
}

.product-img {
    width: 100%; /* Utilise toute la largeur disponible */
    max-width: 300px; /* Ajuster ici pour réduire la taille */
    height: auto; /* Maintient les proportions */
    margin-bottom: 15px;
}

.product-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    width: 100%;
}

.product-title {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.product-text {
    font-size: 1rem;
    margin: 0; /* Réduit l'espace vertical pour économiser de la place */
}


#rouge, #prestige, #rhum, #panier-garni {
    scroll-margin-top: 250px;
}

.btn-outline-light {
    border-color: #B8860B;
    color: white;
}

/* ---------------------------------------------------------------------------------- SECTION DEGUSTATION ------------------------------------------------------------------------------*/

/* Conteneur du carrousel */
.carousel {
    display: flex;
    width: 100%;
    height: 500px; /* Hauteur fixe pour le carrousel */
    align-items: center; /* Centre verticalement */
    perspective: 300px;
}

.carousel {
    touch-action: pan-y; /* Désactive le scrolling horizontal, mais autorise le scroll vertical */
}

.video_parent {
    overflow: hidden; /* Empêche le débordement visuel */
}

.carousel__list {
    display: flex;
    list-style: none;
    position: relative;
    width: 100%;
    height: auto;  /* La hauteur s'ajuste automatiquement selon le contenu */
    justify-content: center;
    align-items: center;  /* Centrer les éléments horizontalement */
    
}

/* Items du carrousel */
.carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    width: 300px;
    height: 450px; /* Hauteur des items */
    border-radius: 12px;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
    position: absolute;
    transition: all 0.3s ease-in;
    pointer-events: auto; /* Permet de cliquer sur tous les items visibles */
}

/* Autres styles pour les positions des éléments dans le carrousel */
.carousel__item[data-pos="0"] {
    z-index: 3;
    transform: translateX(0) scale(1);
    opacity: 1;
}

.carousel__item[data-pos="-1"],
.carousel__item[data-pos="1"] {
    z-index: 2;
    transform: translateX(calc(-60% * var(--direction))) scale(0.9);
    opacity: 0.9;
    filter: blur(4px) grayscale(10%);
}

.carousel__item[data-pos="-2"],
.carousel__item[data-pos="2"] {
    z-index: 1;
    transform: translateX(calc(-120% * var(--direction))) scale(0.8);
    opacity: 0.8;
    filter: blur(5px) grayscale(20%);
}

.carousel__item[data-pos="-3"],
.carousel__item[data-pos="3"] {
    z-index: 0;
    transform: translateX(calc(-180% * var(--direction))) scale(0.7);
    opacity: 0.7;
    filter: blur(6px) grayscale(40%);
    pointer-events: none;
}

/* Stylisation des vidéos et figures */
.carousel__item figure {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel__item figure video {
    width: 100%;         /* La vidéo occupe toute la largeur de l'item */
    height: 100%;        /* La vidéo occupe toute la hauteur de l'item */
    object-fit: cover;   /* La vidéo couvre entièrement l'item sans déformation */
    position: absolute;  /* Pour la positionner correctement */
    top: 0;
    left: 0;
    z-index: 1;          /* Assure que la vidéo soit au-dessous des éléments superposés */
    border-radius: 5px;
}

/* Effet halo au survol des vidéos latérales */
.carousel__item[data-pos]:hover {
    box-shadow: 0 0 15px 10px rgba(184, 134, 11, 0.8); /* Halo doré (#b8860b) */
    cursor: pointer;
}

/* Halo doré permanent sur la vidéo centrale */
.carousel__item[data-pos="0"] {
    box-shadow: 0 0 15px 10px rgba(184, 134, 11, 0.8); /* Halo doré permanent (#b8860b) */
}

/* --------------------------------------------------------------------------------- SECTION ACCES ET PRIVE ------------------------------------------------------------------------------*/

/* Style général pour la liste des facilités */
.facility-list {
    line-height: 1.8; /* Espacement confortable entre les éléments */
    text-align: justify; /* Justifie le texte */
    max-width: 600px; /* Limite la largeur pour un meilleur rendu */
    margin: 0 auto; /* Centre la liste horizontalement */
    color: white;
}

/* Style pour chaque élément de la liste */
.facility-list li {
    margin-bottom: 10px; /* Espacement entre les éléments */
}

/* Icône spécifique pour la PMR */
.fa-icon {
    color: #b8860b; /* Or pour une belle mise en valeur */
    margin-right: 10px; /* Espacement entre l'icône et le texte */
    font-size: 1.5rem; /* Taille augmentée */
    vertical-align: middle; /* Alignement avec le texte */
}

/* Style pour les avantages de la privatisation */
.private-event-benefits {
    font-size: 1.2em;
    line-height: 1.6;
    padding: 10px 0;
    color: white;
}

.mariage {
    border-radius: 10px;
}

/* --------------------------------------------------------------------------------- SECTION RESEAUX SOCIAUX -----------------------------------------------------------------------------*/

/* Agrandir les icônes sociales dans la section événements */
.social-icons-large .social-icon-large {
    font-size: 60px; /* Taille fixe à 60px */
    color: #D4AF37; /* Couleur or */
    margin: 0 10px; /* Espace entre les icônes */
    transition: transform 0.3s ease; /* Transition fluide pour l'effet de zoom */
}

/* Enlever les styles par défaut des liens */
.social-icons-large a {
    text-decoration: none; /* Enlever le soulignement des liens */
}

/* Appliquer un effet de zoom au survol */
.social-icons-large .social-icon-large:hover {
    transform: scale(1.1); /* Zoom léger à 110% de la taille */
}

.review-block {
    background-color: #2a2a2a; /* Un gris foncé pour un aspect élégant */
    border-radius: 15px; /* Coins arrondis plus marqués */
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Ombre plus douce et plus étendue */
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    height: 100%; /* Prend toute la hauteur possible dans la colonne */
}

.review-block h3 {
    color: #fff;
}

.review-block:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(184, 134, 11, 0.7); /* Ombre dorée plus accentuée */
}

/* Étoiles */
.stars {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #FFD700; /* Couleur des étoiles */
}

/* Citations */
blockquote {
    color: white;
    font-size: 1rem;
    margin: 0;
    padding: 10px 0;
    line-height: 1.5;
}

/* ------------------------------------------------------------------------------- SECTION CARTE ET HORAIRES -----------------------------------------------------------------------------*/

/* Google Map responsive */
.ratio {
    max-width: 570px; /* Ajuste la largeur */
    margin: 0 auto;   /* Centre l'iframe */
    box-shadow: 0 0 15px 10px rgba(184, 134, 11, 0.8); /* Halo doré */
    border-radius: 5px;
}

/* Section des horaires */
.hour-card {
    background-image: url("../images/backgroundimg-sombre.webp");
    background-size: cover; /* Ajuste l'image pour couvrir toute la section */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Évite la répétition de l'image */
    border: 1px solid #b8860b; /* Bordure dorée */
    color: white; /* Texte blanc pour contraster */
    max-width: 570px;
    width: 100%;
}

.hour-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------------------- PAGE 2 ------------------------------------------------------------------------------------*/

/* ---------------------------------------------------------------- ATTENTION LES PRODUITS ONT LE MEME STYLE QUE SUR LA PAGE 1 --------------------------------------------------------*/

.nav-tabs {
    border-bottom: none;
    justify-content: center;
}


.nav-tabs .nav-link {
    border: none;
    color: #b8860b;
    font-weight: 500;
    padding: 10px 20px;
    background-color: transparent !important
}

.nav-tabs .nav-link:hover {
    border: none;
    color: #b8860b;
}


.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #b8860b;
    background-color: transparent !important;
    border: none;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active {
    border: none;
    color: #b8860b;
    background-color: transparent !important;
}



.dropdown-menu {
    border-radius: 0;
    border: 1px solid #b8860b;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    opacity: 0.8;
    border-radius: 5px;
    background-color: #b8860b;
    color: #000;
}


.dropdown-item {
    background-color: #f8f9fa00;
    color: #000;
}

.dropdown-item.active,
.dropdown-item:hover {
    background-color: #c2b28a;
    color: #000;
}

/* ------------------------------------------------------------------------------------- PAGE CONTACT ---------------------------------------------------------------------------------*/

/* Style pour le formulaire de contact */
.card {
    border: solid 1px #b8860b;
    border-radius: 5px;
    background-color: transparent;  /* Fond transparent pour la carte */
}


.form-check-label,
.form-label {
    color: #b8860b
}

#contact-form .form-control,
#contact-form .form-control:focus,
#contact-form .form-control:active,
#contact-form .form-control:valid {
    border: solid 1px #b8860b;
    background-color: #000;
    color: #e7dfcb;
}

#contact-form .form-control:focus,
#contact-form .form-control:active,
#contact-form .form-control:valid {
    box-shadow: 0 0 15px #B8860B !important;
}


.btn-primary {
    background-color: #b8860b;
    border-color: #DCDCDC;
    transition: background-color 0.3s ease;
    color: black;
}

.btn-primary:hover {
    background-color: #DCDCDC;
    color: #B8860B;
}

/*Lien de redirection vers index.html */

.redirect-link {
    color: #B8860B;
    font-family: cizel, serif;
    font-size: 1.5rem;
    font-weight: 500;
    animation: resizeText 1s ease-in-out infinite;
}

@keyframes resizeText {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* ------------------------------------------------------------------------------------ NEWSLETTER -------------------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------------------- FOOTER --------------------------------------------------------------------------------------- */

/* Styles pour le footer */
footer {
    background-color: #000;
    position: absolute; /* Fixe le footer à la fin de la page */
    width: 100%;  /* Occupe toute la largeur */
}

footer .logo-footer {
    display: flex;
    align-items: center;
}

.logo-footer {
    max-width: 100%;
    height: 60px; /* Maintient une hauteur fixe de 60px */
    width: auto; /* Ajuste la largeur pour conserver les proportions */
}


footer .social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-icon {
    font-size: 30px; /* Taille fixe à 30px */
    color: #D4AF37; /* Couleur or */
    transition: transform 0.3s; /* Transition fluide pour l'effet de zoom */
}

.social-icon:hover {
    transform: scale(1.1); /* Zoom léger à 110% de la taille */
}

.contact-btn {
    background-color: #b8860b;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

.contact-btn:hover {
    background-color: white;
    color: black;
}

/* Augmenter l'espacement entre les liens dans le footer */
footer .footer-links a {
    margin-left: 15px;  /* Espacement à gauche des liens */
    margin-right: 15px; /* Espacement à droite des liens */
}

/* -------------------------------------------------------------------------------------- MEDIA Q -------------------------------------------------------------------------------------- */

@media (max-width: 425px) {
    .carousel-vid {
        height: 300px;
    }
}

/* Responsive - Menu mobile */
@media (max-width: 767px) {
    /* Conteneur global de la barre de navigation */
    .navbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed; /* Fixé tout en haut de la page */
        width: 100%; /* Prend toute la largeur */
        background-color: black; /* Couleur de fond */
        padding: 10px; /* Espacement interne */
    }

    /* Logo (placé à droite) */
    .logo {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%); /* Centré verticalement */
    }

    /* Bouton Hamburger (placé à gauche) */
    .navbar-toggler {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        height: auto;
    }

    /* Liste de navigation (centrée) */
    .navbar-nav {
        display: flex;
        flex-direction: column; /* Organisation verticale */
        align-items: center;    /* Centrer les liens */
        padding: 0;
        width: 100%;
    }

    /* Items de navigation */
    .navbar-nav .nav-item {
        margin: 0; /* Pas d'espacement entre les éléments */
    }

    /* Liens de navigation (texte uniquement cliquable) */
    .navbar-nav .nav-item .nav-link {
        display: inline-block;  /* Texte uniquement cliquable */
        color: #DCDCDC; /* Texte blanc au survol */
    }

    /* Bouton "Commander" (centré sous le menu) */
    .d-flex {
        display: flex;
        justify-content: center; /* Centre le bouton horizontalement */
        margin-top: 20px;        /* Espacement sous la liste */
        width: 100%;             /* Prend toute la largeur */
    }

    .btn-custom {
        padding: 10px 20px;      /* Ajuste la taille */
        font-size: 16px;         /* Ajuste la taille du texte */
        margin-bottom: 20px;
    }

    .btn-custom:hover {
        background-color: transparent; /* Fond or au survol */
        transform: translateY(-3px); /* Légère élévation */
        box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.7); /* Ombre or blanc autour du bouton au survol */
        color: #DCDCDC;
    }

    /* Icône carte (cachée sur mobile) */
    .map-icon {
        display: none;
    }

    .hour-card {
        max-width: 90%;
    }
}

@media (max-width: 500px) {
    .carousel__item {
        width: 200px; /* Réduit la largeur des items */
        height: 300px; /* Réduit la hauteur des items */
        font-size: 1.2rem; /* Réduit la taille du texte */
    }

    /* Ajuste les positions */
    .carousel__item[data-pos="0"] {
        transform: translateX(0) scale(0.9);
    }

    .carousel__item[data-pos="-1"],
    .carousel__item[data-pos="1"] {
        transform: translateX(calc(-50% * var(--direction))) scale(0.8);
    }

    .carousel__item[data-pos="-2"],
    .carousel__item[data-pos="2"] {
        transform: translateX(calc(-100% * var(--direction))) scale(0.7);
    }

    .carousel__item[data-pos="-3"],
    .carousel__item[data-pos="3"] {
        transform: translateX(calc(-150% * var(--direction))) scale(0.6);
    }
}