/* ==============================================
   1. FONTS & VARIABLES
   ============================================== */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,500;0,600;0,800;1,500;1,600&display=swap');

:root {
    --rasp-red: #33090F;     /* Fond principal */
    --rasp-gold: #C0882F;    /* Doré */
    --rasp-text: #ECE4DF;    /* Texte blanc */
    --font-primary: 'EB Garamond', serif;
}

/* ==============================================
   2. RESET RADICAL (Écrase les styles du thème)
   ============================================== */

html, body {
    background-color: var(--rasp-red) !important;
    color: var(--rasp-text) !important;
    font-family: var(--font-primary) !important;
}

/* Force le fond rouge partout */
main, .bg_white, .bg_gray, .wrapper {
    background-color: var(--rasp-red) !important;
    color: #fff !important;
    position: relative;
    z-index: 2; /* Au-dessus du footer par défaut */
}

/* ==============================================
   3. HEADER & LOGOS
   ============================================== */

header {
    background-color: rgba(48, 5, 14, 0.9) !important; /* Fond sombre semi-transparent */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* CORRECTION LOGO : On applique le filtre blanc aux DEUX logos */
header .logo_normal img, 
header .logo_sticky img {
    filter: brightness(0) invert(1) !important; /* Transforme l'image en blanc pur */
}

/* CORRECTION CENTRAGE : On centre le conteneur, mais on NE FORCE PAS l'affichage des logos */
header .row .col-4.text-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* On enlève le "display: inline-flex" qui forçait les 2 logos à apparaître */
header .logo_normal, 
header .logo_sticky {
    margin: 0 !important;
    padding: 0 !important;
    /* Laissez le JS du thème gérer le display block/none ici */
}

/* ==============================================
   4. TYPOGRAPHIE
   ============================================== */

/* TITRES : MAJUSCULES + BOLD (800) */
h1, h2, h3, h4, h5, h6,
.display-5, .display-6, 
.navbar-brand, .btn_rasp {
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px;
    color: #ECE4DF !important;
}

/* TEXTES : Minuscules + SemiBold (600) */
p, li, span, div, a, small, label, input {
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    letter-spacing: 0;
    text-transform: none !important;
    color: #ECE4DF;
}

/* Liens */
a {
    color: #ECE4DF !important;
    text-decoration: none;
    transition: color 0.3s;
}
a:hover {
    color: var(--rasp-gold) !important;
}

/* ==============================================
   5. COMPOSANTS (Hero, Boutons, Cartes)
   ============================================== */

/* HERO : Fond transparent pour voir l'image Jarallax */
.hero, .hero .wrapper {
    background: transparent !important;
}
.hero h1 {
    font-size: 4.5rem; 
    line-height: 1;
    letter-spacing: 5px;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* CORRECTION TAGLINE : On force l'affichage pour contourner l'animation JS */
.hero .wrapper small.slide-text-sub {
    display: block !important;
    opacity: 1 !important;        /* Force l'opacité */
    visibility: visible !important; /* Force la visibilité */
    transform: none !important;   /* Annule les décalages d'animation */
    
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    font-size: 2.2rem;
    letter-spacing: 2px;
    text-transform: uppercase !important;
    color: #ECE4DF !important;
    margin-top: 15px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Petit ajustement tagline mobile */
@media (max-width: 767px) {
    .hero .wrapper small.slide-text-sub {
        font-size: 0.9rem;
        letter-spacing: 2px;
    }
}

/* BOUTONS */
.btn_rasp {
    display: inline-block;
    background: transparent;
    border: 1px solid #ECE4DF;
    color: #ECE4DF !important;
    padding: 15px 40px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn_rasp:hover {
    background: #ECE4DF;
    color: var(--rasp-red) !important;
}

/* LIENS SOULIGNÉS */
.btn_text_link {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding-bottom: 2px;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}
.btn_text_link:hover {
    color: var(--rasp-gold) !important;
    border-color: var(--rasp-gold);
}

/* ENCADRÉS */
.theme-border {
    border: 1px solid rgba(255,255,255,0.15);
    padding: 40px 20px;
    height: 100%;
    transition: all 0.3s;
}
.theme-border:hover {
    border-color: var(--rasp-gold);
    background: rgba(255,255,255,0.02);
}

/* BLOCS ZOOM (CTA) */
.box_zoom_img {
    display: block; position: relative; overflow: hidden; height: 500px; width: 100%;
}
.box_zoom_img .img_bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 1.2s ease; z-index: 0;
}
.box_zoom_img:hover .img_bg { transform: scale(1.1); }
.box_zoom_img .overlay_black {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3); z-index: 1; transition: background 0.3s;
}
.box_zoom_img .content_text {
    position: relative; z-index: 2; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* ==============================================
   6. FOOTER (CORRECTION COULEURS)
   ============================================== */

footer.footer_luxury {
    /* On garde le fond défini dans le PHP ou on le force ici si besoin */
    /* background-color: #630000 !important; */ 
    border-top: 1px solid rgba(255,255,255,0.1);
    
    /* On force la visibilité */
    position: relative !important;
    z-index: 999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: 100% !important;
    
    padding-top: 60px;
    padding-bottom: 30px;
}

/* --- FORCER LES TEXTES EN BLANC (#ECE4DF) --- */
footer.footer_luxury h1, 
footer.footer_luxury h2, 
footer.footer_luxury h3, 
footer.footer_luxury h4, 
footer.footer_luxury h5, 
footer.footer_luxury h6,
footer.footer_luxury p, 
footer.footer_luxury span, 
footer.footer_luxury li,
footer.footer_luxury small {
    color: #ECE4DF !important; /* Votre blanc demandé */
}

/* --- LIENS ET ICONES (AVEC HOVER) --- */
footer.footer_luxury a,
footer.footer_luxury i,
footer.footer_luxury .footer_links_list li a {
    color: #ECE4DF !important; /* Blanc par défaut */
    text-decoration: none;
    transition: all 0.3s ease;
}

/* --- ETAT AU SURVOL (HOVER) --- */
footer.footer_luxury a:hover,
footer.footer_luxury .social_luxury a:hover i,
footer.footer_luxury .footer_links_list li a:hover {
    color: var(--rasp-gold) !important; /* Devient doré au survol */
    opacity: 1;
}

/* Petit effet de glissement vers la droite pour les liens rapides */
footer.footer_luxury .footer_links_list li a:hover {
    padding-left: 3px;
}

/* Supprime l'image de fond bleue du thème original */
footer::before {
    display: none !important;
}

/* --- SOCIAL ICONS (TAILLE & ESPACEMENT) --- */
footer.footer_luxury .social_luxury {
    display: flex;          /* Active Flexbox pour aligner proprement */
    gap: 25px;              /* Espace de 40px entre chaque icône (Ecartement) */
    align-items: center;    /* Centre verticalement */
}

footer.footer_luxury .social_luxury a i {
    font-size: 1.4rem !important; /* Taille x2 (environ 40px) */
    transition: transform 0.3s ease; /* Petit effet fluide au survol */
}

/* Petit bonus : léger zoom supplémentaire au survol */
footer.footer_luxury .social_luxury a:hover i {
    transform: scale(1.2);
}

/* ==============================================
   7. VIDEO SECTION
   ============================================== */

.video-container {
    position: relative;
    width: 100%;
    height: 80vh; /* Hauteur : 70% de l'écran. Mettez 50vh si vous la voulez plus petite */
    overflow: hidden;
    background-color: #000;
    z-index: 1;
}

.video-full-width {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ESSENTIEL : Remplit tout le bloc sans déformer */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* Calque sombre par dessus (Optionnel) */
.video-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.2); /* Assombrit légèrement pour faire ressortir le texte si besoin */
    z-index: 2;
    pointer-events: none; /* Permet de cliquer au travers si besoin */
}

/* Version Mobile */
@media (max-width: 767px) {
    .video-container {
        height: 50vh; /* Moins haut sur mobile */
    }
}

/* Conteneur parent */
.custom-pattern-section {
    position: relative;
    overflow: hidden;  
    display: flex;
    align-items: center;
}

/* Le pseudo-élément qui porte l'image */
.custom-pattern-section::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Derrière le texte */
    
    /* IMAGE ET CONTROLE */
    background-image: url('../img/Amor-pattern-4.png');
    background-repeat: no-repeat;
    background-position: center;
    
     
    background-size: 30%; 
    
     
    opacity: 0.3; 
}

/* On s'assure que le contenu reste au-dessus du background */
.custom-pattern-section > div {
    position: relative;
    z-index: 2;
}

/* Conteneur du menu latéral */
/* ==============================================
   8. MENU PANEL 
   ============================================== */

/* Conteneur principal du menu */
.panel_menu {
    position: fixed; /* Assure que le panel reste bien en place */
    background-color: #30050e !important;
    z-index: 9999; /* Doit être très haut */
}

/* Le motif en background */
.panel_menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image: url('../img/Amor-pattern-2.png');
    background-repeat: repeat;
    background-position: center;
    background-size: 300px;
    
    opacity: 0.45;
    z-index: 0; /* Derrière le contenu */
    pointer-events: none; /* IMPORTANT : permet de cliquer "au travers" */
}

/* Le dégradé pour la lisibilité */
.panel_menu::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: radial-gradient(circle, rgba(48,5,14,0) 0%, rgba(48,5,14,0.9) 100%);
    z-index: 1; /* Entre le pattern et le texte */
    pointer-events: none;
}

/* On force le contenu du menu à passer devant les pseudos-éléments */
.panel_menu .panel__content {
    position: relative;
    z-index: 10 !important; /* Force le texte devant tout */
}

/* On s'assure que les liens sont cliquables */
.panel_menu .wrapper_menu ul li a {
    position: relative;
    z-index: 11 !important;
}

.panel_menu::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(48,5,14,0) 0%, rgba(48,5,14,0.8) 100%);
    z-index: 0;
    pointer-events: none;
}

/* ==============================================
   SOLUTIONS FINALE : VISIBILITÉ CROIX HAMBURGER
   ============================================== */

/* 1. On force le bouton à rester au premier plan absolu, même menu ouvert */
.reveal_header, 
header .col-4.text-start, 
.menu_open {
    z-index: 10000000 !important; /* Priorité maximale */
    position: relative !important;
}

/* 2. On force la couleur blanche sur les barres (et la croix) */
/* On cible précisément les éléments de la librairie hamburger--spin */
.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
     
    width: 30px !important;
    height: 2px !important;
}

/* 3. QUAND LE MENU EST ACTIF (.is-active) */
/* On s'assure que le bouton ne bouge pas et reste visible par dessus le fond bordeaux */
.hamburger.is-active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. SÉCURITÉ CLIC : On empêche le logo ou le panel de bloquer le clic */
.panel_menu {
    z-index: 999999 !important; /* Juste en dessous du bouton */
}

/* Si un élément invisible (comme le preloader) bloque la zone */
#preloader {
    display: none !important;
}

/* 5. FIX POSITION MOBILE */
@media (max-width: 767px) {
    .hamburger.is-active {
        position: fixed !important;
        top: 15px !important;
        left: 15px !important;
    }
}

/* ==============================================
   FOOTER PATTERN OVERLAY (Version Forcée)
   ============================================== */

/* On cible le footer avec son ID ou son tag pour plus de force */
body footer.footer_luxury {
    position: relative !important;
    overflow: hidden !important;
    background-color: #630000 !important;
}

/* On force l'affichage du pseudo-élément */
body footer.footer_luxury::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    background-image: url('../img/Amor-pattern-1.png') !important;
    background-repeat: repeat !important;
    background-position: center !important;
    background-size: 200px !important; /* Testez avec 200px pour bien le voir */
    
    opacity: 0.6 !important; /* Augmenté à 0.6 pour être sûr de le voir au test */
    z-index: 1 !important;
    pointer-events: none !important;
}

/* On s'assure que le container est au premier plan */
footer.footer_luxury .container {
    position: relative !important;
    z-index: 5 !important;
}

/* ==============================================
   CORRECTION FINALE SECTION HIDDEN (PATTERN 2)
   ============================================== */

/* 1. On annule le 'cover' du style.css qui pose problème sur iPhone */
.pattern_2::before {
    background-size: 250px auto !important; /* Taille fixe pour tous les mobiles */
    background-attachment: scroll !important; /* Désactive le fixed instable sur iOS */
}

/* 2. On réactive l'effet parallaxe et une taille plus grande uniquement sur PC */
@media (min-width: 992px) {
    .pattern_2::before {
        background-size: 1200px auto !important; 
        background-attachment: fixed !important;
    }
}

/* ==============================================
   MAP ROUGE
   ============================================== */

.map-container {
    position: relative;
    overflow: hidden;
    background-color: #1a1a1a !important; /* Fond sombre pour donner de la profondeur */
}

.map-container iframe {
    position: relative;
    z-index: 1;
    display: block;
    /* On rend le gris plus clair et plus contrasté pour que les noms ressortent */
    filter: grayscale(1) brightness(1.2) contrast(1.2) !important;
}

.map-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Votre rouge bordeaux */
    background-color: #630000 !important; 
    
    /* On baisse l'opacité du rouge pour laisser respirer les détails de la carte */
    opacity: 0.7; 
    
    /* Le mode 'multiply' est le plus lisible pour les cartes */
    mix-blend-mode: multiply; 
    
    pointer-events: none;
    z-index: 2;
}