/* ==========================================================
   INDEX - IMPAXO
   Version 5.0
   Phase 4A - Partie 1/2
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Montserrat",sans-serif;
    color:#F2EFE8;

    background:linear-gradient(
        135deg,
        #07111F 0%,
        #0B1B2E 45%,
        #10243B 100%
    );

}


/* ==========================================================
   FOND FIXE
========================================================== */

.background-lines{

    position:fixed;

    inset:0;

    z-index:-3;

    overflow:hidden;

    pointer-events:none;

    opacity:.90;

}

.background-lines svg{

    width:100%;
    height:100%;

}

.light-top{

    position:fixed;

    top:-180px;
    left:-180px;

    width:500px;
    height:500px;

    border-radius:50%;

    background:rgba(37,71,110,.18);

    filter:blur(90px);

    z-index:-2;

}

.light-bottom{

    position:fixed;

    bottom:-180px;
    right:-120px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(138,167,199,.10);

    filter:blur(90px);

    z-index:-2;

}


/* ==========================================================
   CONTENU DEFILANT
========================================================== */

.page-content{

    position:relative;

    z-index:5;

}


/* ==========================================================
   HERO
========================================================== */

.hero{

    position:relative;

    min-height:100vh;

}

.hero-content{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px 24px 20px;

}

.hero h1{

    font-size:clamp(2.8rem,8vw,5.8rem);

    font-weight:600;

    letter-spacing:.22em;

    margin-bottom:36px;

}


/* ==========================================================
   VALEURS
========================================================== */

.values{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    color:#D9D4C7;

    font-size:clamp(.95rem,2vw,1.15rem);

    font-weight:500;

}

.values .separator{

    opacity:.45;

}


/* ==========================================================
   DEVISE
========================================================== */

.quote{

    max-width:900px;

    margin-top:70px;

    font-family:"Cormorant Garamond",serif;

    font-style:italic;

    font-size:clamp(1.8rem,3vw,2.8rem);

    line-height:1.2;

    color:rgba(242,239,232,.92);

}


/* ==========================================================
   DECOUVRIR IMPAXO
========================================================== */

.discover-entry{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:90px;

}

.discover-label{

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.discover-line{

    width:2px;

    height:250px;

    margin-top:18px;

    background:#D8A63B;

}


/* ==========================================================
   SECTION DECOUVERTE
========================================================== */

.discover-section{

    position:relative;

    min-height:980px;

    padding:140px 0 120px;

}

.discover-layout{

    position:relative;

    width:min(1500px,92vw);

    height:820px;

    margin:0 auto;

}


/* ==========================================================
   BLOCS
========================================================== */

.discover-block{

    position:absolute;

    width:380px;

    opacity:0;

    transform:translateY(25px);

    transition:

        opacity .60s ease-out,

        transform .60s ease-out;

}


/* ----- Etat visible (ajouté par JavaScript) ----- */

.discover-block.visible{

    opacity:1;

    transform:translateY(0);

}

.discover-block h2{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

    font-size:2rem;

    font-weight:600;

    color:#F2EFE8;

}

.discover-block .number{

    color:#D8A63B;

    font-size:2.55rem;

    font-weight:700;

    line-height:1;

}

.discover-block p{

    margin-left:78px;

    margin-bottom:30px;

    line-height:1.75;

    font-size:1.12rem;

    color:#F2EFE8;

}

.discover-block a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-left:78px;

    text-decoration:none;

    font-size:1.08rem;

    font-weight:600;

    color:#F2EFE8;

    transition:

        color .25s ease,

        gap .25s ease;

}

.discover-block a:hover{

    color:#D8A63B;

}

.arrow{

    transition:transform .25s ease;

}

.discover-block:hover .arrow{

    transform:translateX(8px);

}


/* ==========================================================
   POSITIONNEMENT DES BLOCS
========================================================== */

.block-01{

    width:460px;

    top:40px;

    left:90px;

}

.block-02{

    top:335px;

    left:50%;

    transform:translateX(-50%) translateY(25px);

}

.block-02.visible{

    transform:translateX(-50%) translateY(0);

}

.block-03{

    bottom:40px;

    right:90px;

}


/* ==========================================================
   FOOTER
========================================================== */

.landing-footer{

    width:min(1500px,92vw);

    margin:90px auto 40px;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.landing-footer-links{

    width:100%;

    display:grid;

    grid-template-columns:1fr 2px 1fr;

    align-items:center;

    margin-bottom:18px;

}

.landing-footer-left{

    justify-self:end;

    padding-right:65px;

}

.landing-footer-right{

    justify-self:start;

    padding-left:65px;

}

.landing-footer-left a,
.landing-footer-right a{

    color:#F2EFE8;

    text-decoration:none;

    transition:color .25s ease;

}

.landing-footer-left a:hover,
.landing-footer-right a:hover{

    color:#D8A63B;

}

.footer-axis{

    width:2px;

    height:18px;

    background:#D8A63B;

    justify-self:center;

}

.landing-footer-copy{

    margin-top:2px;

    text-align:center;

    font-size:.90rem;

    color:rgba(242,239,232,.72);

    letter-spacing:.03em;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1100px){

    .discover-section{

        min-height:auto;

        padding:120px 30px 100px;

    }

    .discover-layout{

        position:static;

        width:100%;

        height:auto;

        display:flex;

        flex-direction:column;

        gap:90px;

    }

    .discover-block{

        position:static;

        width:100% !important;

        opacity:1;

        transform:none !important;

    }

    .landing-footer{

        width:100%;

    }

}

@media (max-width:640px){

    .hero h1{

        font-size:3rem;

        letter-spacing:.16em;

    }

    .quote{

        font-size:2rem;

    }

    .discover-block h2{

        font-size:1.55rem;

    }

    .discover-block .number{

        font-size:2rem;

    }

    .discover-block p,
    .discover-block a{

        margin-left:56px;

    }

    .landing-footer-links{

        display:flex;

        flex-direction:column;

        gap:18px;

    }

    .landing-footer-left,
    .landing-footer-right{

        justify-self:center;

        padding:0;

    }

    .footer-axis{

        display:none;

    }

}