/* CSS pour le style et la mise en page de CocoCasting (VERSION FINALE EN NOIR & BLANC) */

/* Variables de couleur et de police */
:root {
    --color-primary: #000000;
    --color-secondary: #ffffff;
    --color-accent: #ff69b4; /* Laisse la variable, mais ne l'utilise plus pour le bouton */
    --color-gold: #af8033; /* NOUVELLE VARIABLE POUR LA COULEUR OR */
    --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-main);
    color: var(--color-secondary);
    overflow: hidden; 
    background-color: var(--color-primary);
}

.landing-container {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

/* --- SECTION FOND D'ÉCRAN (Wallpaper) --- */
.wallpaper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image: url('wallpaper-mannequins.jpeg'); 
    
    background-size: cover;
    background-position: center;
    
    filter: grayscale(100%) brightness(50%); 
}

/* ------------------------------------------- */
/* --- STYLES TOP-NAV ET BOUTONS --- */
/* ------------------------------------------- */

/* Positionnement du bouton Accès Clients en haut à droite */
.top-nav {
    position: absolute; 
    top: 30px; 
    right: 30px; 
    z-index: 20;
}

/* Style des liens / boutons d'action (utilisé pour TOUS les liens) */
.action-link {
    text-decoration: none;
    color: var(--color-secondary);
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px 15px;
    /* Couleur de la bordure et du texte par défaut (Blanc) */
    border: 1px solid var(--color-secondary);
    transition: background-color 0.3s, color 0.3s;
}

.action-link:hover {
    /* Couleur au survol (Fond blanc, Texte noir) */
    background-color: var(--color-secondary);
    color: var(--color-primary);
    cursor: pointer;
}

/* Style spécifique pour le lien "Accès Clients" */
.back-office-link {
    /* Réutilisation des styles de base action-link: bordure et texte blancs */
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
}

.back-office-link:hover {
    /* Au survol, il suit le style des autres boutons */
    background-color: var(--color-secondary);
    color: var(--color-primary);
}


/* --- NOUVEAU BLOC POUR AGRANDIR LES ICÔNES DANS LE FOOTER --- */
.footer .action-link i {
    font-size: 2.2em; 
    text-transform: none; 
    letter-spacing: normal; 
    margin: 0 5px; 
}

/* --- LE RESTE DU CSS (Mis à jour) --- */
.header { width: 100%; height: 20%; }

/* *** CORRECTION DU MAIN-CONTENT POUR CENTRER LE LOGO ET LE TEXTE EN COLONNE *** */
.main-content { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; /* Les éléments s'empilent verticalement (logo puis texte) */
    justify-content: center; /* Centre le bloc entier verticalement dans la zone disponible */
    align-items: center; /* Centre les éléments horizontalement */
    width: 100%; 
    z-index: 10; 
}

/* *** MISE À JOUR : TAILLE ET COULEUR OR POUR LE TEXTE "À TRÈS BIENTÔT" *** */
.main-content p {
    color: var(--color-gold); /* Utilisation de la nouvelle couleur Or */
    font-size: 2em; /* Augmentation de la taille de la police pour une meilleure visibilité */
    text-align: center; 
    font-weight: bold; /* Pour le rendre plus impactant */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Ajout d'une petite ombre pour le faire ressortir */
}
/* ------------------------------------------------------------- */

.logo-img { max-height: 150px; width: auto; max-width: 90%; }
.footer { 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    gap: 40px; 
    padding: 30px 20px; 
    flex-wrap: wrap; 
    box-sizing: border-box; 
    z-index: 10; 
}