/* --- CONFIGURATION DE BASE --- */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: 'Libre Franklin', sans-serif;
    color: #000000;
    overflow-x: hidden;
}

body {
    margin: 0;
    background-color: #000000;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

.quote {
    font-family: 'Merriweather', serif;
    font-size: clamp(0.85rem, 1.5vw, 1.25rem);
    font-weight: 100;
    font-style: italic;
}

.quote-signature {
    font-family: 'Merriweather', serif;
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    font-weight: 100;
    font-style: normal;
}

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

img {
    border: 0;
    max-width: 100%;
    display: inline-block;
}

/* --- SYSTÈME D'ANIMATION (REVEAL) --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

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

/* --- NAVIGATION --- */
.navigation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #3B56B1;
    color: #000000;
}

.nav-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 75%;
    max-width: 1400px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.nav-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.nav-bottom {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

}


.logo-text {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.5rem;
}

.social-links {
    display: flex;
    gap: 15px;
    /* Espace entre les icônes */
    align-items: center;
}

.social-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3B56B1;
    /* Couleur des icônes */
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.social-icon-link svg {
    width: 36px;
    /* Taille de l'icône */
    height: 36px;
}

.social-icon-link:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.mobile-only {
    display: none;
}

/* --- STRUCTURE HERO (SYSTÈME DE COUCHES) --- */
.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #000000;
}

.hero-layer {
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* --- COUCHE 1 : CONTENU (TEXTE + IMAGE) --- */
.content-layer {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 1vw;
    width: 80%;
}

.hero-description {
    flex: 0 0 50vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    box-sizing: border-box;
    padding-bottom: 62vh;
    color: #F1E5BB;
}

.hero-description p {
    font-family: 'Libre Franklin', sans-serif;
    text-align: left;
    font-size: clamp(0.8rem, 1.5vw, 1.5rem);
    font-weight: 100;
    margin: 0;
    max-width: 400px;
}

.hero-titre {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: clamp(4rem, 3vw, 7rem);
    color: #3B56B1;
}

.hero-sous-titre {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: clamp(1.5rem, 1.5vw, 1.5rem);
    color: #fff;
}

.hero-liste {
    padding-top: 20px;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 100;
    font-size: clamp(0.85rem, 1.5vw, 1.25rem);
    color: #fff;
}

.hero-stack {
    position: relative;
    display: block;
    z-index: 5;
    width: fit-content;
    /* L'élément ne fait que la largeur de l'image */
    margin-left: auto;
    /* Garde Martin à droite en Desktop */
    margin-right: auto;
    /* Centre Martin en Mobile (si combiné avec margin-left: auto) */
}

.martin-hero {
    width: 50vw;
    max-height: 90vh;
    display: block;
    margin: 0;
    object-fit: contain;
    object-position: left bottom;
}

/* --- COUCHE 2 : TITRES ANIMÉS --- */
.titles-layer {

    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

}

/* --- SOLUTION RUBAN INFINI (SANS GAP NI OVERLAP) --- */

.titles-overlay {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.heading1-animated-top,
.heading1-animated-bottom {
    /* Ajustez --hero-title-size pour changer la taille */
    font-size: clamp(6vw, 10vw, 14vw);
    font-weight: 900;
    white-space: nowrap;
    display: flex;
    /* les spans du ruban s'alignent côte à côte */
    margin: 0;
    line-height: 0.9;
    text-transform: uppercase;
    will-change: transform;
    overflow: visible;
}

.heading1-animated-top {
    margin-left: 200px;
    z-index: 1;
}

.heading1-animated-bottom {
    margin-left: 600px;
    margin-top: 20px;
    z-index: 10;
}

/* Mot plein (visible, coloré) — original et copies */
.heading1-animated-top .word-solid,
.heading1-animated-bottom .word-solid,
.heading1-animated-top .word-solid-copy,
.heading1-animated-bottom .word-solid-copy {
    display: inline-block;
    flex-shrink: 0;
    color: #3B56B1;
    padding-right: 0.2em;
    /* gap entre solid et outline suivant */
}

/* Copies outline */
.heading1-animated-top .word-outline,
.heading1-animated-bottom .word-outline {
    display: inline-block;
    flex-shrink: 0;
    -webkit-text-stroke: 1.5px #3B56B1;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-right: 0.2em;
    /* gap entre outline et solid suivant */
}

/* --- BOUTON --- */
.button-circle {
    position: absolute;
    z-index: 20;
    top: 0;
    right: -5vw;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    background-color: #3B56B1;
    color: #F1E5BB;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    transform: rotate(15deg) !important;
}

.button-circle:hover {
    transform: scale(1.1) rotate(30deg) !important;
}



/* --- AUTRES SECTIONS --- */
.section {
    padding-top: 80px;
}

.section-title-parallax {
    margin-left: -1000px;
    white-space: nowrap;
    display: table;
    /* comme heading1-animated, la boîte colle au texte */
}


.wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.intro-section {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-family: Libre Franklin, sans-serif;
    font-size: x-large;
    font-weight: 300;
}

.image-gallery {
    display: grid;
    /* On crée 3 colonnes égales */
    grid-template-columns: repeat(3, 1fr);
    /* On définit une hauteur de référence pour la galerie */
    grid-template-rows: repeat(2, 400px);
    gap: 0px;

    /* Largeur max demandée */
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    /* Centre la galerie si l'écran dépasse 1920px */
}

/* IMAGE 1 : Occupe 2/3 de largeur (2 colonnes) et 100% de hauteur (2 lignes) */
.image-gallery .image:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* IMAGES 2 et 3 : Occupent le tiers restant, chacune une moitié de hauteur */
.image-gallery .image:nth-child(2),
.image-gallery .image:nth-child(3) {
    grid-column: span 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- SECTION SIDE-SCROLL (SANS GRID) --- */

/* Le conteneur parent */
.split-section-edith,
.split-section-bernard,
.split-section-nico {
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    color: #F1E5BB;
    padding-bottom: 40px;
}

.split-section-temoignages {
    display: flex;
    flex-direction: row;
    width: 80vw;
    position: relative;
    background-color: #000;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Partie GAUCHE : Fixe au scroll */
.split-photo {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    padding: 20px;
    box-sizing: border-box;
}

/* L'image dans .split-photo s'affiche toujours en entier.
   Ajustez --photo-size pour agrandir ou réduire (ex: 60%, 80%, 400px) */
.split-photo img {
    width: var(--photo-size, 60%);
    height: auto;
    display: block;
    object-fit: contain;
}

/* Partie DROITE : Défilante */
.split-quote {
    flex: 1 1 0;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 40px;
    padding-right: 40px;
}

.temoignage {
    font-size: large;
    font-weight: 100;
    font-style: italic;
    line-height: 1.5;
    color: #fff;
    margin: 0 auto;
    text-align: left;
}

/* --- AJUSTEMENTS POUR LE TEXTE ET RÉPONSIVE --- */

.body-text.reveal {
    max-width: 450px;
    margin: 0 auto;
    justify-items: center;
}

/* --- RESPONSIVE ET MOBILE --- */
@media (max-width: 991px) {

    .logo-text {
        font-size: 1.2rem;
    }

    .social-links {
        gap: 20px;
        justify-content: center;
    }

    .social-icon-link svg {
        width: 28px;
        height: 28px;
    }

    .mobile-only {
        display: flex !important;
    }

    .wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section {
        padding-top: 40px;
    }

    /* HERO & TITRES */
    .hero {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .content-layer {
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
    }

    .hero-description {
        flex: 0 0 auto;
        width: 100%;
        padding: 120px 10% 40px;
        text-align: center;
        justify-content: center;
        font-size: clamp(0.8rem, 1vw, 1.5rem);
        align-items: center;
    }



    .hero-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Centre l'image et le bouton horizontalement */
        justify-content: center;
        height: auto;
        /* Laisse le contenu définir la hauteur */
        position: relative;
        /* Garde l'ancrage pour le bouton */
        width: 100%;
        margin-top: 20px;
    }

    .martin-hero {
        width: 100vw;
        /* Martin prend toute la largeur */
        max-height: 60vh;
        object-position: center bottom;
    }

    .heading1-animated-top,
    .heading1-animated-bottom {
        font-size: 14vw;
    }

    .button-circle {
        position: absolute;
        top: -4px;
        left: 80%;
        transform: translateX(-50%) rotate(15deg) !important;
        width: 150px;
        height: 150px;
        flex: 0 0 150px;
        font-size: 0.85rem;
    }

    /* SECTIONS SPLIT (TEXTE & PHOTOS) */


    .section-title-parallax {
        font-size: 8vw;
    }

    .split-section-edith {
        flex-direction: column !important;
        justify-content: center !important;
        height: 60vh !important;
    }

    .split-section-bernard {
        flex-direction: column-reverse !important;
        height: auto !important;
        padding-top: 40px;
    }

    .split-section-nico {
        flex-direction: column !important;
        justify-content: center !important;
    }

    .split-section-témoignages {
        flex-direction: column !important;
        max-width: 90%;
    }

    .split-photo,
    .split-quote {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 20px 8% !important;
        text-align: center;
    }

    .split-photo {
        justify-content: center;
        width: 100% !important;
        height: auto;
        padding: 10px 8%;
    }

    .quote {
        font-size: 1rem;
        line-height: 1.2;
    }

    .quote-signature {
        font-size: 0.8rem;
    }

    .temoignage {
        font-size: 1.1rem;
        text-align: center;
        margin-top: 40px !important;
    }

    .intro-section {
        font-size: 1rem;
    }

    /* RÉGLAGE SPÉCIFIQUE POUR LA SECTION BALCON (PLACE DES ARTS) */
    /* On force le passage en colonne malgré le style inline du HTML */
    .section[style*="position: relative"] {
        flex-direction: column !important;
        height: auto !important;
    }

    .section[style*="position: relative"] img {
        opacity: 1 !important;
    }

    .section[style*="position: relative"] div[style*="position: absolute"] {
        position: relative !important;
        width: 100% !important;
        padding: 40px 8% !important;
        height: auto !important;
        background-color: #000;
    }

    .section[style*="position: relative"] p.quote {
        max-width: 100% !important;
    }

    .split-section-temoignages {
        flex-direction: column !important;
    }
}




@media (max-width: 768px) {

    /* GALERIE D'IMAGES */
    .image-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }

    .image-gallery .image:nth-child(1) {
        grid-column: span 1;
        grid-row: span 1;
        height: 300px;
    }

    /* FOOTER */
    footer {
        height: 10vh !important;
    }

    footer a {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .nav-container {
        width: 90%;
        gap: 10px;
    }

    .mobile-call-button {
        display: flex;
    }

    .mail-icon {
        display: none;
    }

    .linkedin-icon {
        display: none;
    }
}