:root{
    --green:#8BC34A;
    --green-light:#b7e37d;

    --bg:#050505;

    --white:#ffffff;

    --text:rgba(255,255,255,0.82);

    --glass:rgba(255,255,255,0.06);

    --border:rgba(255,255,255,0.08);
}

/* =========================================
RESET
========================================= */

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

html,
body{
    overflow-x:hidden;
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#000;
    color:#fff;
    line-height:1.8;
}

/* =========================================
BACKGROUND
========================================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.45),
            rgba(0,0,0,0.72),
            rgba(0,0,0,0.94)
        ),
        url("images/historique.jpg");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    z-index:-3;
}

/* =========================================
OVERLAY LIGHT
========================================= */

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:
        radial-gradient(
            circle at top left,
            rgba(139,195,74,0.16),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(139,195,74,0.10),
            transparent 30%
        );

    z-index:-2;
}

/* =========================================
GRAIN
========================================= */

.grain{

    position:fixed;

    inset:0;

    opacity:0.035;

    pointer-events:none;

    background-image:
        url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

    z-index:-1;
}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:160px 20px 100px;
}

.hero-content{

    max-width:1050px;
}

/* BADGE */

.badge{

    display:inline-block;

    padding:12px 22px;

    border-radius:999px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(10px);

    color:var(--green-light);

    margin-bottom:35px;

    font-size:.82rem;

    letter-spacing:2px;

    text-transform:uppercase;
}

/* TITLE */

.hero h1{

    font-size:clamp(4rem,10vw,7rem);

    line-height:.92;

    font-weight:800;

    letter-spacing:-4px;

    margin-bottom:35px;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #dadada
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* TEXT */

.hero p{

    max-width:900px;

    margin:auto;

    font-size:1.15rem;

    color:var(--text);

    line-height:2;
}

/* SCROLL */

.scroll{

    margin-top:60px;

    color:var(--green-light);

    font-size:.9rem;

    letter-spacing:2px;

    animation:bounce 2s infinite;
}

@keyframes bounce{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(10px);
    }
}

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

.section{
    padding:120px 20px;
}

.container{
    width:100%;
    max-width:1200px;
    margin:auto;
}

/* =========================================
CARDS
========================================= */

.story-grid{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:30px;
}

.card{

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:30px;

    background:var(--glass);

    border:1px solid var(--border);

    backdrop-filter:blur(14px);

    transition:.35s ease;

    box-shadow:
        0 0 30px rgba(0,0,0,0.25);
}

/* GLOW */

.card::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:70%;
    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(139,195,74,0.22),
            transparent
        );

    transform:skewX(-25deg);

    animation:shine 5s linear infinite;
}

/* HOVER */

.card:hover{

    transform:translateY(-10px);

    border-color:rgba(139,195,74,0.45);

    box-shadow:
        0 0 15px rgba(139,195,74,0.16),
        0 0 50px rgba(139,195,74,0.08);
}

/* TITLES */

.card h2{

    position:relative;
    z-index:2;

    font-size:2rem;

    margin-bottom:20px;

    font-weight:700;

    color:var(--green-light);
}

/* TEXT */

.card p{

    position:relative;
    z-index:2;

    color:var(--text);

    line-height:1.9;
}

/* =========================================
TIMELINE
========================================= */

.timeline-history{

    position:relative;

    margin-top:120px;

    display:flex;

    flex-direction:column;

    gap:80px;
}

.history-line{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:2px;

    height:100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(139,195,74,0.9),
            transparent
        );
}

/* ITEM */

.history-item{

    position:relative;

    display:grid;

    grid-template-columns:220px 1fr;

    gap:40px;

    align-items:start;
}

/* DOT */

.history-item::before{

    content:"";

    position:absolute;

    left:calc(220px + 20px);

    top:10px;

    width:18px;
    height:18px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 20px rgba(139,195,74,0.9);

    z-index:2;
}

/* YEAR */

.history-year{

    text-align:right;

    padding-right:40px;

    font-size:1.2rem;

    font-weight:700;

    color:var(--green-light);
}

/* CONTENT */

.history-content{

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:28px;

    padding:38px;

    backdrop-filter:blur(14px);

    transition:.35s ease;
}

.history-content:hover{

    transform:translateY(-6px);

    border-color:rgba(139,195,74,0.30);
}

.history-content h3{

    font-size:1.8rem;

    margin-bottom:18px;

    font-weight:700;
}

.history-content p{
    color:var(--text);
}

/* =========================================
IMAGE
========================================= */

.image-section{

    position:relative;

    margin-top:120px;

    height:560px;

    border-radius:34px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,0.08);
}

.image-section img{

    width:100%;
    height:100%;

    object-fit:cover;

    filter:brightness(.55);

    transform:scale(1.04);
}

.overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:30px;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.15),
            rgba(0,0,0,0.55)
        );
}

.overlay h2{

    max-width:900px;

    font-size:clamp(2.4rem,5vw,5rem);

    line-height:1.1;

    font-weight:800;

    letter-spacing:-2px;
}

/* =========================================
STATS
========================================= */

.stats{

    margin-top:80px;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:25px;
}

.stat{

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:28px;

    padding:40px 25px;

    text-align:center;

    backdrop-filter:blur(12px);

    transition:.35s ease;
}

.stat:hover{

    transform:translateY(-8px);

    border-color:rgba(139,195,74,0.35);
}

.stat h3{

    font-size:3rem;

    color:var(--green-light);

    margin-bottom:10px;

    font-weight:800;
}

.stat p{
    color:var(--text);
}

/* =========================================
QUOTE
========================================= */

.quote-section{

    padding:140px 20px;

    text-align:center;
}

.quote{

    max-width:1000px;

    margin:auto;

    font-size:clamp(1.3rem,2vw,1.9rem);

    line-height:1.9;

    font-weight:300;
}

.quote strong{
    color:var(--green-light);
}

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

.historique-footer{

    padding:110px 20px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,0.08);
}

.historique-footer h2{

    font-size:clamp(2.3rem,5vw,4rem);

    margin-bottom:25px;

    font-weight:800;

    letter-spacing:-2px;
}

.historique-footer p{

    max-width:800px;

    margin:auto;

    color:var(--text);

    line-height:2;
}

/* =========================================
ANIMATION
========================================= */

@keyframes shine{

    0%{
        left:-120%;
    }

    100%{
        left:140%;
    }
}

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

@media(max-width:950px){

    .story-grid{
        grid-template-columns:1fr;
    }

    .stats{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:850px){

    .history-line{
        left:10px;
    }

    .history-item{

        grid-template-columns:1fr;

        padding-left:40px;
    }

    .history-item::before{
        left:1px;
    }

    .history-year{

        text-align:left;

        padding-right:0;

        margin-bottom:-15px;
    }
}

@media(max-width:768px){

    body::before{
        background-attachment:scroll;
    }

    .hero{
        min-height:90vh;
        padding:140px 20px 80px;
    }

    .hero h1{
        letter-spacing:-2px;
    }

    .hero p{
        font-size:1rem;
    }

    .story-grid{

        display:flex;

        overflow-x:auto;

        gap:20px;

        scroll-snap-type:x mandatory;

        padding-bottom:10px;
    }

    .story-grid::-webkit-scrollbar{
        display:none;
    }

    .story-grid > .card{

        flex:0 0 88%;

        max-width:88%;

        scroll-snap-align:start;
    }

    .card{
        padding:35px 28px;
    }

    .image-section{
        height:420px;
    }

    .overlay h2{
        font-size:2rem;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .quote{
        font-size:1.1rem;
    }
}
.hero{
    background-image:none !important;
    background:#050505 !important;
}

body::before{
    background:none !important;
}