/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Description: Thème enfant sur mesure pour le site OroBlack
Author: Ton Nom
Author URI: https://oroblack.com
Template: generatepress
Version: 1.0.0
*/

/* =========================================
   1. VARIABLES DE COULEURS OROBLACK
   ========================================= */
:root {
    --oroblack-dore: #D4AF37;   /* Doré élégant */
    --oroblack-noir: #1A1A1A;   /* Noir profond rétro */
    --oroblack-blanc: #FDFBF7;  /* Blanc lumineux/crème */
}

/* =========================================
   2. STYLE GLOBAL DU SITE
   ========================================= */
body {
    background-color: var(--oroblack-blanc);
    color: var(--oroblack-noir);
}

/* =========================================
   3. EN-TÊTE : BOUTON CALL-TO-ACTION (MENU)
   ========================================= */
@media (min-width: 769px) {
    .main-navigation .main-nav ul li.cta-bouton a {
        background-color: var(--oroblack-dore) !important;
        color: var(--oroblack-noir) !important;
        padding: 10px 24px !important;
        border-radius: 4px !important;
        font-weight: 700 !important;
        transition: all 0.3s ease !important;
        margin-left: 15px !important;
        border: 2px solid var(--oroblack-dore) !important;
    }

    .main-navigation .main-nav ul li.cta-bouton a:hover {
        background-color: transparent !important;
        color: var(--oroblack-dore) !important;
    }
}


/* =========================================
   4. EN-TÊTE FLOTTANTE (STYLE PILULE)
   ========================================= */

/* Détacher et faire flotter l'en-tête */
.site-header, .header-wrap {
    position: fixed; /* Rend l'en-tête collant au scroll */
    top: 20px; /* Laisse 20 pixels d'espace avec le haut de l'écran */
    left: 50%; /* Centre l'élément */
    transform: translateX(-50%); /* Ajustement mathématique pour le centrage parfait */
    width: 90% !important; /* Ne prend pas toute la largeur de l'écran */
    max-width: 1100px; /* Taille maximale pour les très grands écrans */
    background-color: var(--oroblack-noir) !important; /* Fond noir profond */
    border-radius: 50px; /* Bords complètement arrondis */
    padding: 5px 30px; /* Espace intérieur pour respirer */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Belle ombre portée pour l'effet de flottaison */
    z-index: 9999; /* S'assure que l'en-tête passe toujours par-dessus le reste du site */
}

/* Forcer la couleur blanche lumineuse pour le texte et le logo du menu */
.main-navigation .main-nav ul li a, 
.site-branding .main-title a,
.site-branding .site-description {
    color: var(--oroblack-blanc) !important;
}

/* Couleur dorée au survol des liens */
.main-navigation .main-nav ul li a:hover {
    color: var(--oroblack-dore) !important;
}

/* Décaler le site vers le bas pour ne pas qu'il soit caché par l'en-tête flottante au chargement */
body {
    padding-top: 120px;
}