/* =========================================
   STYLE.CSS - MICHELLE BAZIE
   Design: "Design Clair" / White Luxury (Chanel/Vogue Inspired)
   Structure: Robust (Based on Elsie Lande)
   ========================================= */

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

:root {
    --bg-color: #ffffff;
    /* Pure White */
    --text-color: #111111;
    /* Deep Black */
    --text-light: #555555;
    /* Grey for subtitles */
    --accent-color: #d4af37;
    /* Gold Luxury */
    --border-color: #e0e0e0;
    /* Light Grey Border */
    --nav-bg: rgba(255, 255, 255, 0.95);

    --font-heading: 'Cinzel', serif;
    --font-body: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

/* =========================================
   NAVIGATION (WHITE MODE)
   ========================================= */
.barre-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--text-color);
    text-transform: uppercase;
}

.liens-menu {
    display: flex;
    gap: 30px;
}

.liens-menu a {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-color);
    font-weight: 500;
    position: relative;
}

.liens-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}

.liens-menu a:hover::after {
    width: 100%;
}

.liens-menu a:hover {
    color: var(--accent-color);
}

.menu-burger {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
}

/* =========================================
   HERO SECTION (SPLIT LAYOUT - FIXED)
   ========================================= */
.hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    /* Center vertically */
    padding-top: 80px;
    /* Space for navbar */
    overflow: hidden;
}

/* DESKTOP: Split Layout */
@media screen and (min-width: 1025px) {
    .hero {
        align-items: stretch;
        /* Full height */
    }

    .hero-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 5% 0 10%;
        /* Pad Text */
        text-align: left;
        background: #ffffff;
        z-index: 2;
    }

    .hero-visual {
        flex: 1.2;
        /* Image takes slightly more space */
        position: relative;
        height: auto;
        overflow: hidden;
    }

    .hero-visual img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Object-position will be handled by IA, defaulting to top */
        object-position: top center;
    }

    .hero-overlay {
        display: none;
    }
}

/* MOBILE/TABLET: Full Screen Background */
@media screen and (max-width: 1024px) {
    .hero {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        position: relative;
    }

    .hero-visual {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .hero-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Script will still handle object-position */
    }

    .hero-content {
        position: relative;
        z-index: 3;
        width: 90%;
        /* Slightly narrower */
        max-width: 500px;
        padding: 40px 20px;
        text-align: center;

        /* Glassmorphism Card Effect */
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    /* Override text colors for Mobile Hero to be White/Gold */
    .hero h1 {
        color: #ffffff !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
        font-size: 3.5rem;
    }

    .surtitre {
        color: #d4af37 !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 1) !important;
    }

    .sous-titre {
        color: #ffffff !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 1) !important;
        font-weight: 600 !important;
    }

    .btn-luxe {
        border-color: #fff !important;
        background: rgba(0, 0, 0, 0.6) !important;
        color: #fff !important;
        backdrop-filter: blur(5px);
    }

    .btn-luxe:hover {
        background: #fff !important;
        color: #000 !important;
    }

    .btn-outline {
        border-color: #d4af37 !important;
        color: #d4af37 !important;
        background: rgba(0, 0, 0, 0.6) !important;
    }

    .btn-outline:hover {
        background: #d4af37 !important;
        color: #fff !important;
    }

    /* Add overlay for readability */
    .hero::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
        z-index: 2;
    }

    .hero-overlay {
        display: none;
    }
}

/* Typography Hero */
.surtitre {
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--accent-color);
    font-weight: 600;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    /* Large and thin */
    font-weight: 400;
    margin-bottom: 20px;
    line-height: 1.1;
    color: var(--text-color);
}

.sous-titre {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--text-light);
    margin-bottom: 40px;
    max-width: 600px;
}

@media screen and (max-width: 768px) {
    .hero h1 {
        font-size: 2.8rem;
    }
}

/* Buttons */
.actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

@media screen and (max-width: 1024px) {
    .actions {
        justify-content: center;
    }
}

.btn-luxe {
    padding: 16px 32px;
    border: 1px solid var(--text-color);
    background: var(--text-color);
    color: #fff;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-luxe:hover {
    background: transparent;
    color: var(--text-color);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
}

.btn-outline:hover {
    background: var(--text-color);
    color: #fff;
}

/* =========================================
   COMPOSITE / BIO SECTION (WHITE)
   ========================================= */
.section-composite {
    padding: 100px 50px;
    background-color: #f9f9f9;
    /* Slight off-white */
}

.conteneur-composite {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}

@media screen and (max-width: 900px) {
    .conteneur-composite {
        flex-direction: column-reverse;
        gap: 40px;
    }
}

.image-composite {
    flex: 1;
    position: relative;
    box-shadow: 20px 20px 0px rgba(0, 0, 0, 0.03);
    /* Subtle Shadow */
}

.image-composite img {
    width: 100%;
    display: block;
    border: 1px solid #eee;
}

.texte-composite {
    flex: 1;
}

.texte-composite h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--text-color);
}

.texte-composite p {
    margin-bottom: 25px;
    font-weight: 300;
    color: var(--text-light);
    text-align: justify;
    line-height: 1.8;
}

.texte-composite strong {
    color: var(--text-color);
    font-weight: 500;
}

.texte-composite a {
    border-bottom: 1px solid var(--accent-color);
}

/* =========================================
   GALERIE SECTION (MASONRY CLEAR)
   ========================================= */
.section-galerie {
    padding: 100px 50px;
    background: #fff;
}

.intro-section {
    text-align: center;
    margin-bottom: 60px;
}

.intro-section h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--text-color);
}

.intro-section p {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--accent-color);
}

.conteneur-galerie {
    max-width: 1400px;
    margin: 0 auto 100px auto;
}

.sous-titre-galerie {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-align: center;
    color: var(--text-color);
    position: relative;
    display: inline-block;
    width: 100%;
}

.sous-titre-galerie::after {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    background: var(--accent-color);
    margin: 15px auto 0;
}

/* MASONRY GRID */
.gallery-grid {
    column-count: 3;
    column-gap: 20px;
}

@media screen and (max-width: 900px) {
    .gallery-grid {
        column-count: 2;
    }
}

@media screen and (max-width: 600px) {
    .gallery-grid {
        column-count: 1;
    }
}

.item-photo {
    margin-bottom: 20px;
    break-inside: avoid;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.item-photo img {
    width: 100%;
    display: block;
    /* Optional: fixed height or natural. Elsie used fixed 400px for consistency, but Masonry is better natural. 
       Let's stick to natural height for "Clear" design unless user wants uniform boxes. 
       Actually, Elsie's code had height: 400px. I will use auto to respect image ratios (more professional), 
       but I'll add a class for consistent display. */
    height: auto;
    transition: transform 0.5s ease;
}

.item-photo:hover img {
    transform: scale(1.02);
    /* Subtle zoom */
}

/* Hover Overlay */
.item-photo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: 0.3s;
}

.item-photo:hover::after {
    opacity: 1;
}

/* =========================================
   FOOTER (ELSIE STYLE - WHITE EDITION)
   ========================================= */
.pied-page {
    background-color: #f5f5f5;
    /* Light Grey */
    padding: 80px 20px;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.titre-contact {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--text-color);
}

.texte-contact {
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 40px;
}

.reseaux-sociaux {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
}

.social-link {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
    border: 1px solid #ccc;
    padding: 10px 25px;
    border-radius: 50px;
    /* Rounded pill style */
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--text-color);
    color: #fff;
    border-color: var(--text-color);
}

/* Signature Block */
.footer-signature {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #ddd;
}

.copyright-legal {
    color: #999;
    font-size: 0.8rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* DOMINIQUE BAH SIGNATURE - ELSIE LANDE REPLICA (LIGHT GOLD) */
.creation-credit {
    margin: 30px auto;
    padding: 25px 40px;
    background: #fff;
    border: 1px solid rgba(212, 175, 55, 0.4);
    /* GOLD BORDER */
    border-radius: 4px;
    transition: all 0.4s ease;
    text-align: center;
    max-width: 500px;
    /* Exact dimensions */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    /* Lighter shadow for Light Mode */
    display: inline-block;
}

.creation-credit:hover {
    background: rgba(212, 175, 55, 0.05);
    /* Faint gold tint */
    border-color: rgba(212, 175, 55, 1);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15);
}

.credit-label {
    display: block;
    font-size: 0.75rem;
    color: #d4af37;
    /* GOLD */
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.signature-name {
    font-family: 'Cinzel', serif;
    font-size: 2.22rem;
    /* Exact Elsie Size */
    margin: 5px 0;
    display: block;
    letter-spacing: 3px;
    /* Adapted Gradient for Light background: DarkGrey -> Gold -> DarkGrey */
    background: linear-gradient(to right, #333, #d4af37, #333);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.5s ease;
    font-weight: 700;
}

.creation-credit:hover .signature-name {
    background-position: right center;
}

.expert-tag {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #888;
    font-style: normal;
    letter-spacing: 1px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    padding-top: 15px;
}

.international-badge {
    margin-top: 30px;
    font-size: 0.8rem;
    color: #aaa;
}

/* =========================================
   LIGHTBOX (BLACK OVERLAY FOR CONTRAST)
   ========================================= */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98);
    /* White Lightbox for consistency */
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    opacity: 1;
}

.lightbox-content-wrapper {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-contenu {
    max-width: 100%;
    max-height: 85vh;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.fermer,
.nav-btn {
    position: absolute;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 2rem;
    cursor: pointer;
    z-index: 2001;
}

.fermer {
    top: 30px;
    right: 30px;
}

.nav-btn.prev {
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.nav-btn.next {
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.fermer:hover,
.nav-btn:hover {
    color: var(--accent-color);
}

/* =========================================
   ANIMATIONS
   ========================================= */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Nav */
@media screen and (max-width: 768px) {
    .menu-burger {
        display: block;
    }

    .liens-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s ease;
        z-index: 999;
    }

    .liens-menu.actif {
        right: 0;
    }

    .liens-menu a {
        font-size: 1.2rem;
        margin: 15px 0;
    }
}