/*==================================================
ROOT
==================================================*/

:root{

    --bg:#050505;
    --bg2:#101010;

    --card:#171717;
    --card2:#0d0d0d;

    --green:#48BB78;
    --green-light:rgba(72,187,120,.18);
    --green-border:rgba(72,187,120,.15);

    --white:#ffffff;
    --text:rgba(255,255,255,.78);

    --radius:28px;

    --shadow:
    0 20px 55px rgba(0,0,0,.35);

    --shadow-hover:
    0 35px 75px rgba(0,0,0,.55),
    0 0 45px rgba(72,187,120,.12);

    --container:min(1450px,90%);
    --section-space:140px;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);
    color:var(--white);
    font-family:"Poppins",sans-serif;
    overflow-x:hidden;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;
    color:inherit;

}

button{

    font-family:inherit;

}

/*==================================================
GLOBAL
==================================================*/

.sport-page{

    position:relative;
    overflow:hidden;

}

section{

    position:relative;

}

.section-title{

    width:min(850px,90%);
    margin:0 auto 70px;
    text-align:center;

}

.section-title span{

    display:block;
    margin-bottom:18px;

    color:var(--green);

    letter-spacing:5px;

    font-size:14px;

    font-weight:600;

}

.section-title h2{

    font-size:clamp(34px,4vw,62px);

    line-height:1.05;

    margin-bottom:25px;

    font-weight:800;

}

.section-title p{

    font-size:18px;

    line-height:1.9;

    color:var(--text);

}

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

.background{

    position:fixed;
    inset:0;

    z-index:-3;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(72,187,120,.08),
    transparent 35%),

    radial-gradient(circle at 80% 10%,
    rgba(255,215,0,.04),
    transparent 45%),

    radial-gradient(circle at 50% 90%,
    rgba(72,187,120,.05),
    transparent 40%),

    linear-gradient(
    180deg,
    var(--bg2),
    var(--bg)
    );

}

.noise{

    position:fixed;
    inset:0;

    opacity:.04;

    pointer-events:none;

    z-index:-2;

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

}

/*==================================================
PARTICLES
==================================================*/

.particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}

.particles span{

    position:absolute;

    bottom:-80px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);

    opacity:0;

    box-shadow:

    0 0 15px var(--green),
    0 0 35px rgba(72,187,120,.35);

    animation:particleFloat linear infinite;

}

@keyframes particleFloat{

    0%{

        transform:
        translateY(120vh)
        translateX(0)
        scale(.2);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    90%{

        opacity:.8;

    }

    100%{

        transform:
        translateY(-20vh)
        translateX(var(--x))
        scale(1.5);

        opacity:0;

    }

}

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

.sport-hero{

    width:var(--container);

    min-height:100vh;

    margin:auto;

    padding:80px 0;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:90px;

}

/*==================================================
LEFT
==================================================*/

.hero-left{

    max-width:650px;

}

.small{

    display:inline-block;

    margin-bottom:24px;

    color:var(--green);

    font-size:15px;

    font-weight:600;

    letter-spacing:6px;

    text-transform:uppercase;

}

.hero-left h1{

    font-size:clamp(52px,6vw,86px);

    line-height:.96;

    font-weight:800;

    margin-bottom:35px;

}

.description{

    max-width:620px;

    color:var(--text);

    font-size:20px;

    line-height:1.9;

    margin-bottom:45px;

}

/*==================================================
BUTTONS
==================================================*/

.buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.buttons a{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:210px;

    height:60px;

    border-radius:999px;

    color:var(--green);

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

    background:rgba(255,255,255,.02);

    backdrop-filter:blur(12px);

    transition:.35s;

}

.buttons a:hover{

    background:var(--green);

    color:#050505;

    transform:translateY(-5px);

    box-shadow:

    0 18px 40px rgba(72,187,120,.28);

}

/*==================================================
RIGHT
==================================================*/

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

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

.hero-scene{

    position:relative;

    width:620px;

    height:620px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================
ATHLETE
==================================================*/

.hero-athlete{

    position:relative;

    width:360px;

    z-index:30;

    filter:

    drop-shadow(0 35px 45px rgba(0,0,0,.45))
    drop-shadow(0 0 45px rgba(72,187,120,.18));

    animation:athleteFloat 5s ease-in-out infinite;

}

@keyframes athleteFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-16px);

    }

}

/*==================================================
ENERGY CIRCLES
==================================================*/

.energy-circle{

    position:absolute;

    border-radius:50%;

    border:2px solid rgba(72,187,120,.18);

    animation:energyRotate linear infinite;

}

.energy-circle:nth-child(1){

    width:320px;
    height:320px;

    animation-duration:18s;

}

.circle2{

    width:450px;
    height:450px;

    animation-duration:28s;

    animation-direction:reverse;

}

.circle3{

    width:580px;
    height:580px;

    animation-duration:36s;

}

@keyframes energyRotate{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
LIGHT GLOW
==================================================*/

.hero-scene::before{

    content:"";

    position:absolute;

    width:230px;

    height:230px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(72,187,120,.18),
    transparent 70%);

    filter:blur(35px);

    animation:pulseGlow 4s ease-in-out infinite;

}

@keyframes pulseGlow{

    0%,100%{

        transform:scale(1);

        opacity:.65;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}

/*==================================================
SPORT ITEMS
==================================================*/

.sport-item{

    position:absolute;

    object-fit:contain;

    pointer-events:none;

    user-select:none;

    filter:

    drop-shadow(0 0 22px rgba(72,187,120,.18));

    animation:orbitFloat 4.5s ease-in-out infinite;

    transition:.4s;

}

@keyframes orbitFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/*==================================================
FOOTBALL
==================================================*/

.football{

    width:430px;

    height:430px;

    top:20%;

    left:55%;

    transform:translateX(-50%);

    animation-delay:0s;

}

/*==================================================
HAND
==================================================*/

.handball{

    width:340px;

    height:340px;

    top:2%;

    right:35%;

    animation-delay:.4s;

}

/*==================================================
ATHLETISME
==================================================*/

.athletisme{

    width:300px;

    height:300px;

    left:-5%;

    top:45%;

    animation-delay:.8s;

}

/*==================================================
MUSCULATION
==================================================*/

.dumbbell{

    width:310px;

    height:310px;

    right:0%;

    bottom:10%;

    animation-delay:1.2s;

}

/*==================================================
LIGHTS
==================================================*/

.light{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--green);

    box-shadow:

    0 0 18px var(--green),

    0 0 45px var(--green);

    animation:blink 2.4s infinite alternate;

}

.light1{

    top:10%;

    left:26%;

}

.light2{

    top:22%;

    right:18%;

}

.light3{

    bottom:18%;

    left:18%;

}

.light4{

    bottom:8%;

    right:28%;

}

@keyframes blink{

    from{

        opacity:.35;

        transform:scale(.65);

    }

    to{

        opacity:1;

        transform:scale(1.45);

    }

}

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

.sport-stats{

    width:var(--container);

    margin:0 auto var(--section-space);

    display:grid;

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

    gap:26px;

}

.stat-card{

    padding:42px 22px;

    text-align:center;

    border-radius:var(--radius);

    background:

    linear-gradient(
    145deg,
    rgba(26,26,26,.95),
    rgba(10,10,10,.95));

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

    backdrop-filter:blur(16px);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-10px);

    border-color:rgba(72,187,120,.35);

    box-shadow:var(--shadow-hover);

}

.stat-card span{

    display:block;

    margin-bottom:14px;

    color:var(--green);

    font-size:58px;

    font-weight:800;

    line-height:1;

}

.stat-card small{

    display:block;

    color:var(--text);

    font-size:17px;

    line-height:1.6;

}

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

.timeline-section{

    width:var(--container);

    margin:var(--section-space) auto;

    position:relative;

}

.timeline-placeholder{

    min-height:500px;

}

/*==================================================
SPORTS
==================================================*/

.sports-section{

    width:var(--container);

    margin:var(--section-space) auto;

}

.sports-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:32px;

    align-items:stretch;

}

/*==================================================
SPORT CARD
==================================================*/

.sport-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:32px;

    background:

    linear-gradient(
    145deg,
    rgba(28,28,28,.96),
    rgba(10,10,10,.96));

    border:1px solid rgba(72,187,120,.10);

    transition:
    transform .45s,
    border-color .45s,
    box-shadow .45s;

    box-shadow:var(--shadow);

    isolation:isolate;

}

.sport-card:hover{

    transform:
    translateY(-14px);

    border-color:rgba(72,187,120,.35);

    box-shadow:var(--shadow-hover);

}

/*==================================================
TOP LIGHT
==================================================*/

.sport-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    115deg,
    transparent 25%,
    rgba(255,255,255,.08) 50%,
    transparent 75%);

    transform:translateX(-130%);

    transition:1s;

    z-index:2;

}

.sport-card:hover::before{

    transform:translateX(130%);

}

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

.sport-image{

    position:relative;

    overflow:hidden;

    height:260px;

}

.sport-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    transparent 45%,
    rgba(0,0,0,.35) 75%,
    rgba(0,0,0,.75));

}

.sport-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
    transform .8s ease,
    filter .5s;

}

.sport-card:hover .sport-image img{

    transform:scale(1.08);

    filter:saturate(1.08);

}

/*==================================================
CONTENT
==================================================*/

.sport-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:34px;

}

.sport-content h3{

    margin-bottom:18px;

    font-size:30px;

    font-weight:700;

    color:var(--green);

}

.sport-content p{

    color:var(--text);

    line-height:1.9;

    font-size:16px;

}

/*==================================================
BOTTOM ACCENT
==================================================*/

.sport-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(
    90deg,
    transparent,
    var(--green),
    transparent);

    transform:scaleX(0);

    transform-origin:center;

    transition:.45s;

}

.sport-card:hover::after{

    transform:scaleX(1);

}

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

.values-section{

    width:var(--container);

    margin:var(--section-space) auto;

}

/*==================================================
2 COLONNES
==================================================*/

.values-grid{

    display:grid;

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

    gap:32px;

    align-items:stretch;

}

/*==================================================
VALUE CARD
==================================================*/

.value-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:42px;

    border-radius:32px;

    background:

    linear-gradient(
    145deg,
    rgba(25,25,25,.96),
    rgba(10,10,10,.96));

    border:1px solid rgba(72,187,120,.10);

    box-shadow:var(--shadow);

    transition:
    transform .4s,
    border-color .4s,
    box-shadow .4s;

}

.value-card:hover{

    transform:translateY(-12px);

    border-color:rgba(72,187,120,.35);

    box-shadow:var(--shadow-hover);

}

/*==================================================
LIGHT EFFECT
==================================================*/

.value-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:

    linear-gradient(
    135deg,
    transparent,
    rgba(72,187,120,.10),
    transparent);

    opacity:0;

    transition:.4s;

}

.value-card:hover::before{

    opacity:1;

}

/*==================================================
ICON
==================================================*/

.value-icon{

    width:86px;

    height:86px;

    margin-bottom:28px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:var(--green);

    background:

    rgba(72,187,120,.08);

    border:1px solid rgba(72,187,120,.18);

    box-shadow:

    0 0 30px rgba(72,187,120,.08);

}

/*==================================================
TEXT
==================================================*/

.value-card h3{

    font-size:30px;

    margin-bottom:18px;

    font-weight:700;

}

.value-card p{

    color:var(--text);

    line-height:1.9;

    font-size:16px;

}

/*==================================================
OBJECTIFS
==================================================*/

.goals-section{

    width:var(--container);

    margin:var(--section-space) auto;

}

/*==================================================
2 COLONNES
==================================================*/

.goals-grid{

    display:grid;

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

    gap:32px;

}

/*==================================================
GOAL CARD
==================================================*/

.goal-card{

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:32px;

    background:

    linear-gradient(
    145deg,
    rgba(25,25,25,.96),
    rgba(10,10,10,.96));

    border:1px solid rgba(72,187,120,.10);

    transition:
    transform .4s,
    border-color .4s,
    box-shadow .4s;

    box-shadow:var(--shadow);

}

.goal-card:hover{

    transform:translateY(-12px);

    border-color:rgba(72,187,120,.35);

    box-shadow:var(--shadow-hover);

}

.goal-card span{

    display:block;

    margin-bottom:25px;

    color:var(--green);

    font-size:56px;

    line-height:1;

}

.goal-card h3{

    font-size:30px;

    margin-bottom:18px;

    color:var(--green);

}

.goal-card p{

    color:var(--text);

    line-height:1.9;

}

/*==================================================
SOUVENIRS
==================================================*/

.memories-section{

    width:var(--container);

    margin:var(--section-space) auto;

}

/*==================================================
GRILLE
==================================================*/

.memories-grid{

    display:grid;

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

    grid-auto-rows:260px;

    gap:24px;

}

/*==================================================
GRAND FORMAT
==================================================*/

.memory-card.large{

    grid-column:span 2;

    grid-row:span 2;

}

/*==================================================
CARD
==================================================*/

.memory-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    cursor:pointer;

    background:#111;

    box-shadow:var(--shadow);

    transition:

    transform .45s,

    box-shadow .45s;

}

.memory-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-hover);

}

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

.memory-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

    transform .8s ease,

    filter .45s ease;

}

.memory-card:hover img{

    transform:scale(1.10);

    filter:brightness(.88);

}

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

.memory-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:34px;

    background:

    linear-gradient(

    transparent 20%,

    rgba(0,0,0,.35) 55%,

    rgba(0,0,0,.92));

    transition:.35s;

}

.memory-card:hover .memory-overlay{

    background:

    linear-gradient(

    transparent 10%,

    rgba(0,0,0,.25) 45%,

    rgba(0,0,0,.95));

}

.memory-overlay h3{

    font-size:28px;

    margin-bottom:12px;

    font-weight:700;

}

.memory-overlay p{

    color:var(--text);

    line-height:1.8;

}

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

.memory-card::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:3;

    background:

    linear-gradient(

    115deg,

    transparent,

    rgba(255,255,255,.08),

    transparent);

    transform:translateX(-140%);

    transition:1s;

}

.memory-card:hover::before{

    transform:translateX(140%);

}

/*==================================================
ENDING
==================================================*/

.ending-section{

    position:relative;

    margin:var(--section-space) 0;

    padding:180px 0;

    overflow:hidden;

}

.ending-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

    circle,

    rgba(72,187,120,.12),

    transparent 70%);

}

.ending-content{

    position:relative;

    width:min(850px,90%);

    margin:auto;

    text-align:center;

    z-index:2;

}

.ending-small{

    display:block;

    margin-bottom:24px;

    color:var(--green);

    letter-spacing:6px;

    font-size:14px;

}

.ending-content h2{

    font-size:clamp(38px,5vw,66px);

    margin-bottom:30px;

    line-height:1.1;

}

.ending-content p{

    color:var(--text);

    font-size:20px;

    line-height:2;

}

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

.sport-footer{

    width:var(--container);

    margin:100px auto 50px;

    text-align:center;

}

.footer-line{

    width:100%;

    height:1px;

    margin-bottom:35px;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(72,187,120,.35),
    transparent);

}

.sport-footer p{

    color:rgba(255,255,255,.55);

    letter-spacing:2px;

    font-size:15px;

}

/*==================================================
COMMON HOVER
==================================================*/

.stat-card,
.sport-card,
.value-card,
.goal-card,
.memory-card{

    will-change:transform;

}

/*==================================================
SCROLL REVEAL
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(70px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.fade-up.visible{

    opacity:1;

    transform:translateY(0);

}

/*==================================================
FLOAT
==================================================*/

.float{

    animation:floatAnimation 5s ease-in-out infinite;

}

@keyframes floatAnimation{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/*==================================================
GLASS
==================================================*/

.glass{

    background:

    rgba(255,255,255,.03);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.05);

}

/*==================================================
GREEN LINE
==================================================*/

.section-title::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    border-radius:50px;

    margin:28px auto 0;

    background:

    linear-gradient(
    90deg,
    transparent,
    var(--green),
    transparent);

}

/*==================================================
SPACING
==================================================*/

.timeline-section,
.sports-section,
.values-section,
.goals-section,
.memories-section,
.ending-section{

    scroll-margin-top:120px;

}

/*==================================================
SELECTION
==================================================*/

::selection{

    background:var(--green);

    color:#050505;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#080808;

}

::-webkit-scrollbar-thumb{

    background:rgba(72,187,120,.35);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--green);

}

/*==================================================
SMOOTH IMAGES
==================================================*/

.hero-athlete,
.sport-item,
.memory-card img,
.sport-image img{

    image-rendering:auto;

    backface-visibility:hidden;

    transform-style:preserve-3d;

}

/*==================================================
TRANSITIONS
==================================================*/

a,
button,
img,
.stat-card,
.sport-card,
.value-card,
.goal-card,
.memory-card{

    transition-duration:.35s;

    transition-timing-function:ease;

}

/*==================================================
RESPONSIVE
1400px
==================================================*/

@media (max-width:1400px){

:root{

    --section-space:120px;

}

.sport-hero{

    gap:60px;

}

.hero-scene{

    width:520px;
    height:520px;

}

.hero-athlete{

    width:320px;

}

.football{

    width:360px;
    height:360px;

}

.handball{

    width:290px;
    height:290px;

}

.athletisme{

    width:260px;
    height:260px;

}

.dumbbell{

    width:260px;
    height:260px;

}

.section-title h2{

    font-size:52px;

}

}

/*==================================================
RESPONSIVE
1100px
==================================================*/

@media (max-width:1100px){

:root{

    --section-space:110px;

}

.sport-hero{

    grid-template-columns:1fr;

    gap:70px;

    text-align:center;

    padding:100px 0 40px;

    min-height:auto;

}

.hero-left{

    max-width:850px;

    margin:auto;

}

.description{

    margin-inline:auto;

}

.buttons{

    justify-content:center;

}

.hero-right{

    order:-1;

}

.sport-stats{

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

}

.values-grid,

.goals-grid{

    grid-template-columns:1fr;

}

.sports-grid{

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

}

.memories-grid{

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

}

.memory-card.large{

    grid-column:span 2;

}

.hero-scene{

    width:460px;
    height:460px;

}

.hero-athlete{

    width:290px;

}

}

/*==================================================
RESPONSIVE
768px
==================================================*/

@media (max-width:768px){

:root{

    --section-space:90px;

}

/*=========================
GLOBAL
=========================*/

section{

    padding-inline:22px;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:36px;

}

.section-title p{

    font-size:16px;

    line-height:1.8;

}

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

.sport-hero{

    padding:60px 22px 20px;

    gap:45px;

}

.hero-left h1{

    font-size:44px;

    line-height:1.05;

    margin-bottom:20px;

}

.description{

    font-size:16px;

    margin-bottom:35px;

}

/*=========================
BUTTONS
=========================*/

.buttons{

    display:grid;

    grid-template-columns:1fr;

    gap:14px;

    width:100%;

}

.buttons a{

    width:100%;

    min-width:0;

    height:56px;

}

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

.hero-scene{

    width:300px;

    height:300px;

}

.hero-athlete{

    width:200px;

}

.energy-circle:nth-child(1){

    width:180px;
    height:180px;

}

.circle2{

    width:240px;
    height:240px;

}

.circle3{

    width:300px;
    height:300px;

}

/*=========================
SPORT ITEMS
=========================*/

.football{

    width:250px;
    height:250px;

    top:-10%;

}

.handball{

    width:200px;
    height:200px;

    left:-10%;
    top:2%;

}

.athletisme{

    width:200px;
    height:200px;

    right:-10%;
    top:40%;

}

.dumbbell{

    width:200px;
    height:200px;

    right:-6%;
    bottom:-4%;

}

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

.sport-stats{

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

    gap:16px;

}

.stat-card{

    padding:26px 16px;

}

.stat-card span{

    font-size:36px;

}

.stat-card small{

    font-size:14px;

}

/*=========================
SPORTS
=========================*/

.sports-grid{

    grid-template-columns:1fr;

}

.sport-image{

    height:230px;

}

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

.values-grid{

    grid-template-columns:1fr;

}

/*=========================
OBJECTIFS
=========================*/

.goals-grid{

    grid-template-columns:1fr;

}

/*=========================
SOUVENIRS
=========================*/

.memories-grid{

    display:grid;

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

    grid-auto-rows:180px;

    gap:14px;

}

.memory-card.large{

    grid-column:auto;

    grid-row:auto;

}

.memory-overlay{

    padding:18px;

}

.memory-overlay h3{

    font-size:18px;

}

.memory-overlay p{

    display:none;

}

}

/*==================================================
RESPONSIVE
480px
==================================================*/

@media (max-width:480px){

:root{

    --section-space:70px;

}

/*=========================
GLOBAL
=========================*/

section{

    padding-inline:18px;

}

.section-title{

    margin-bottom:35px;

}

.section-title span{

    letter-spacing:3px;

    font-size:12px;

}

.section-title h2{

    font-size:30px;

    line-height:1.1;

}

.section-title p{

    font-size:15px;

}

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

.hero-left h1{

    font-size:36px;

}

.description{

    font-size:15px;

    line-height:1.8;

}

.buttons{

    gap:12px;

}

.buttons a{

    height:52px;

    font-size:15px;

}

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

.hero-scene{

    width:250px;

    height:250px;

}

.hero-athlete{

    width:170px;

}

.energy-circle:nth-child(1){

    width:150px;
    height:150px;

}

.circle2{

    width:200px;
    height:200px;

}

.circle3{

    width:250px;
    height:250px;

}

/*=========================
SPORT ICONS
=========================*/

.football{

    width:165px;
    height:165px;

}

.handball{

    width:120px;
    height:120px;

}

.athletisme{

    width:115px;
    height:115px;
    top: 70%;

}

.dumbbell{

    width:120px;
    height:120px;

}

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

.sport-stats{

    grid-template-columns:1fr;

    gap:15px;

}

.stat-card{

    padding:22px 15px;

}

.stat-card span{

    font-size:32px;

}

.stat-card small{

    font-size:13px;

}

/*=========================
SPORTS
=========================*/

.sport-image{

    height:210px;

}

.sport-content{

    padding:24px;

}

.sport-content h3{

    font-size:24px;

}

.sport-content p{

    font-size:15px;

}

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

.value-card,
.goal-card{

    padding:30px 24px;

}

.value-icon{

    width:72px;

    height:72px;

    font-size:28px;

}

.value-card h3,
.goal-card h3{

    font-size:24px;

}

.goal-card span{

    font-size:42px;

}

/*=========================
SOUVENIRS
=========================*/

.memories-grid{

    grid-template-columns:1fr;

    grid-auto-rows:240px;

}

.memory-overlay{

    padding:22px;

}

.memory-overlay h3{

    font-size:22px;

}

/*=========================
ENDING
=========================*/

.ending-section{

    padding:110px 18px;

}

.ending-content h2{

    font-size:34px;

}

.ending-content p{

    font-size:16px;

    line-height:1.9;

}

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

.sport-footer{

    margin:70px auto 35px;

}

}

/*==================================================
PERFORMANCES
==================================================*/

.hero-scene,
.energy-circle,
.sport-item,
.hero-athlete{

    will-change:transform;

}

.sport-card,
.value-card,
.goal-card,
.memory-card,
.stat-card{

    contain:layout paint;

}

img{

    user-select:none;

    -webkit-user-drag:none;

}

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

.quote-section{

    position:relative;

    margin:var(--section-space) 0;

    padding:180px 20px;

    overflow:hidden;

}

.quote-background{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.72),
    rgba(0,0,0,.88)),
    url("BACKGROUND.jpg");

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

    transform:scale(1.08);

    z-index:-2;

}

.quote-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle,
    rgba(72,187,120,.10),
    transparent 70%);

    z-index:-1;

}

.quote-section blockquote{

    width:min(950px,90%);

    margin:auto;

    text-align:center;

    font-size:clamp(30px,4vw,56px);

    line-height:1.55;

    font-weight:700;

    color:#FFF;

    position:relative;

}

.quote-section blockquote::before{

    content:"“";

    display:block;

    margin-bottom:25px;

    font-size:90px;

    line-height:1;

    color:var(--green);

    opacity:.7;

}

.quote-section blockquote::after{

    content:"”";

    display:block;

    margin-top:25px;

    font-size:90px;

    line-height:1;

    color:var(--green);

    opacity:.7;

}

/*==================================================
COUNTERS
==================================================*/

.counter,
.stat-card span{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    text-align:center;

}

/* =========================================================
   PORTFOLIO SPORT TIMELINE
   CSS ENTIÈREMENT ISOLÉ
   ========================================================= */

.portfolio-sport-timeline {

    --pst-red: #48BB78;;
    --pst-red-dark: #a91d22;
    --pst-black: #080909;
    --pst-black-soft: #0b0d0c;
    --pst-white: #ffffff;
    --pst-grey: #a8a8a8;

    position: relative;

    width: 100%;
    max-width: 100%;

    padding: 100px 0 150px;

    margin: 0;

    box-sizing: border-box;

    color: var(--pst-white);

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   RESET UNIQUEMENT DANS LA TIMELINE
   ========================================================= */

.portfolio-sport-timeline *,
.portfolio-sport-timeline *::before,
.portfolio-sport-timeline *::after {

    box-sizing: border-box;
}


/* =========================================================
   AXE CENTRAL
   ========================================================= */

.portfolio-sport-timeline .pst__line {

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,0.18) 8%,
            rgba(255,255,255,0.18) 92%,
            transparent
        );

    transform: translateX(-50%);

    pointer-events: none;
}


/* =========================================================
   ÉVÉNEMENT
   ========================================================= */

.portfolio-sport-timeline .pst__event {

    position: relative;

    width: 100%;

    min-height: 520px;

    margin: 0 0 90px;

    padding: 0;

}


/* =========================================================
   CARTE
   ========================================================= */

.portfolio-sport-timeline .pst__card {

    position: absolute;

    top: 0;

    width: min(685px, 43vw);

    margin: 0;
    padding: 0;

    background: var(--pst-red);

    border-radius: 0 0 10px 10px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.25);

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;

    z-index: 2;
}


/* Carte gauche */

.portfolio-sport-timeline .pst__event--left .pst__card {

    left: 0;
}


/* Carte droite */

.portfolio-sport-timeline .pst__event--right .pst__card {

    right: 0;
}


/* Hover */

.portfolio-sport-timeline .pst__card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 35px 90px rgba(0,0,0,0.45);
}


/* =========================================================
   POINTE VERS LA TIMELINE
   ========================================================= */

.portfolio-sport-timeline .pst__event--left .pst__card::after {

    content: "";

    position: absolute;

    top: 28px;
    right: -12px;

    width: 24px;
    height: 24px;

    background: var(--pst-red);

    transform: rotate(45deg);

    z-index: -1;
}


.portfolio-sport-timeline .pst__event--right .pst__card::after {

    content: "";

    position: absolute;

    top: 28px;
    left: -12px;

    width: 24px;
    height: 24px;

    background: var(--pst-red);

    transform: rotate(45deg);

    z-index: -1;
}


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

.portfolio-sport-timeline .pst__image {

    width: 100%;
    height: 270px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #111;
}


.portfolio-sport-timeline .pst__image img {

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.portfolio-sport-timeline .pst__card:hover .pst__image img {

    transform: scale(1.04);
}


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

.portfolio-sport-timeline .pst__content {

    position: relative;

    margin: 0;

    padding: 30px 28px 34px;
}


.portfolio-sport-timeline .pst__number {

    position: absolute;

    top: 25px;
    right: 28px;

    margin: 0;

    font-size: 11px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: 3px;

    opacity: 0.5;
}


.portfolio-sport-timeline .pst__content h2 {

    margin: 0 0 15px;

    padding: 0;

    font-size: 28px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: 0.5px;

    color: var(--pst-white);
}


.portfolio-sport-timeline .pst__content p {

    margin: 0;

    padding: 0;

    max-width: 620px;

    color: rgba(255,255,255,0.92);

    font-size: 15px;
    line-height: 1.65;

    font-weight: 400;
}


/* =========================================================
   DATES
   ========================================================= */

.portfolio-sport-timeline .pst__date {

    position: absolute;

    top: 28px;

    display: flex;

    align-items: center;

    gap: 12px;

    z-index: 10;

    margin: 0;
    padding: 0;
}


/* Gauche */

.portfolio-sport-timeline .pst__event--left .pst__date {

    left: calc(50% + 25px);
}


/* Droite */

.portfolio-sport-timeline .pst__event--right .pst__date {

    right: calc(50% + 25px);

    flex-direction: row-reverse;
}


.portfolio-sport-timeline .pst__date-text {

    display: block;

    margin: 0;
    padding: 11px 14px;

    background: #050505;

    border-radius: 4px;

    color: var(--pst-white);

    font-size: 14px;
    line-height: 1.2;

    font-weight: 500;

    white-space: nowrap;
}


/* =========================================================
   POINTS
   ========================================================= */

.portfolio-sport-timeline .pst__dot {

    position: absolute;

    width: 20px;
    height: 20px;

    margin: 0;

    border-radius: 50%;

    background: var(--pst-red);

    border: 5px solid var(--pst-white);

    z-index: 10;
}


/* Point gauche */

.portfolio-sport-timeline .pst__event--left .pst__dot {

    left: -35px;
}


/* Point droite */

.portfolio-sport-timeline .pst__event--right .pst__dot {

    right: -35px;
}


/* =========================================================
   FIN
   ========================================================= */

.portfolio-sport-timeline .pst__end {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    margin: 0;
    padding: 20px 0 0;
}


.portfolio-sport-timeline .pst__end-dot {

    display: block;

    width: 12px;
    height: 12px;

    margin: 0;

    background: var(--pst-red);

    border-radius: 50%;

    box-shadow:
        0 0 0 5px var(--pst-black),
        0 0 0 6px rgba(255,255,255,0.15);
}


.portfolio-sport-timeline .pst__end p {

    margin: 20px 0 0;
    padding: 0;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 3px;

    color: var(--pst-grey);
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .portfolio-sport-timeline {

        padding: 70px 20px 100px;
    }


    .portfolio-sport-timeline .pst__line {

        left: 25px;

        transform: none;
    }


    .portfolio-sport-timeline .pst__event {

        min-height: auto;

        margin-bottom: 70px;

        padding-left: 55px;
    }


    .portfolio-sport-timeline .pst__card,
    .portfolio-sport-timeline .pst__event--left .pst__card,
    .portfolio-sport-timeline .pst__event--right .pst__card {

        position: relative;

        top: auto;
        left: auto;
        right: auto;

        width: 100%;

        margin: 0;
    }


    .portfolio-sport-timeline .pst__event--left .pst__card::after,
    .portfolio-sport-timeline .pst__event--right .pst__card::after {

        top: 28px;

        left: -12px;
        right: auto;
    }


    .portfolio-sport-timeline .pst__date,
    .portfolio-sport-timeline .pst__event--left .pst__date,
    .portfolio-sport-timeline .pst__event--right .pst__date {

        position: relative;

        top: auto;
        left: auto;
        right: auto;

        margin: 0 0 18px;

        flex-direction: row;
    }


    .portfolio-sport-timeline .pst__dot,
    .portfolio-sport-timeline .pst__event--left .pst__dot,
    .portfolio-sport-timeline .pst__event--right .pst__dot {

        position: absolute;

        top: 50%;
        left: -40px;
        right: auto;

        transform: translateY(-50%);
    }


    .portfolio-sport-timeline .pst__image {

        height: 230px;
    }
}


/* =========================================================
   PETIT MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .portfolio-sport-timeline {

        padding: 50px 15px 80px;
    }


    .portfolio-sport-timeline .pst__line {

        left: 18px;
    }


    .portfolio-sport-timeline .pst__event {

        padding-left: 42px;
    }


    .portfolio-sport-timeline .pst__image {

        height: 190px;
    }


    .portfolio-sport-timeline .pst__content {

        padding: 24px 20px 28px;
    }


    .portfolio-sport-timeline .pst__content h2 {

        font-size: 23px;
    }


    .portfolio-sport-timeline .pst__content p {

        font-size: 14px;
    }


    .portfolio-sport-timeline .pst__date-text {

        padding: 9px 11px;

        font-size: 12px;
    }


    .portfolio-sport-timeline .pst__dot,
    .portfolio-sport-timeline .pst__event--left .pst__dot,
    .portfolio-sport-timeline .pst__event--right .pst__dot {

        left: -32px;
    }

}

/* =========================================================
   PORTFOLIO SPORT TIMELINE
   VERSION TABLETTE + MOBILE
   CSS 100% ISOLÉ
   ========================================================= */

@media (max-width: 900px) {

    .portfolio-sport-timeline {
        width: 100%;
        max-width: 100%;
        padding: 70px 20px 100px;
        overflow: hidden;
    }

    /* Axe vertical */
    .portfolio-sport-timeline .pst__line {
        left: 24px;
        transform: none;
        width: 1px;
    }

    /* Chaque événement */
    .portfolio-sport-timeline .pst__event {
        width: 100%;
        min-height: auto;
        margin: 0 0 65px;
        padding-left: 55px;
        padding-right: 0;
    }

    /* Toutes les cartes passent à droite */
    .portfolio-sport-timeline .pst__card,
    .portfolio-sport-timeline .pst__event--left .pst__card,
    .portfolio-sport-timeline .pst__event--right .pst__card {
        position: relative;
        top: auto;
        left: auto;
        right: auto;

        width: 100%;
        max-width: 100%;

        margin: 0;

        border-radius: 0 0 10px 10px;

        transform: none;
    }

    /* Pas de déplacement au hover sur tactile */
    .portfolio-sport-timeline .pst__card:hover {
        transform: none;
    }

    /* Pointe vers la timeline */
    .portfolio-sport-timeline .pst__event--left .pst__card::after,
    .portfolio-sport-timeline .pst__event--right .pst__card::after {

        top: 25px;
        left: -11px;
        right: auto;

        width: 22px;
        height: 22px;

        transform: rotate(45deg);
    }

    /* Date */
    .portfolio-sport-timeline .pst__date,
    .portfolio-sport-timeline .pst__event--left .pst__date,
    .portfolio-sport-timeline .pst__event--right .pst__date {

        position: relative;

        top: auto;
        left: auto;
        right: auto;

        display: flex;

        width: 100%;

        margin: 0 0 16px;
        padding: 0;

        flex-direction: row;

        align-items: center;
    }

    /* Point */
    .portfolio-sport-timeline .pst__dot,
    .portfolio-sport-timeline .pst__event--left .pst__dot,
    .portfolio-sport-timeline .pst__event--right .pst__dot {

        position: absolute;

        top: 50%;
        left: -41px;
        right: auto;

        width: 18px;
        height: 18px;

        transform: translateY(-50%);
    }

    /* Date noire */
    .portfolio-sport-timeline .pst__date-text {

        display: inline-block;

        width: auto;
        max-width: calc(100% - 10px);

        padding: 9px 12px;

        font-size: 13px;
        line-height: 1.2;

        white-space: nowrap;
    }

    /* Image */
    .portfolio-sport-timeline .pst__image {

        width: 100%;
        height: 260px;
    }

    .portfolio-sport-timeline .pst__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Contenu */
    .portfolio-sport-timeline .pst__content {

        padding: 26px 24px 30px;
    }

    .portfolio-sport-timeline .pst__content h2 {

        margin-bottom: 13px;

        font-size: 25px;
        line-height: 1.1;
    }

    .portfolio-sport-timeline .pst__content p {

        max-width: 100%;

        font-size: 15px;
        line-height: 1.6;
    }

    .portfolio-sport-timeline .pst__number {

        top: 24px;
        right: 24px;

        font-size: 10px;
    }

    /* Fin */
    .portfolio-sport-timeline .pst__end {

        margin-left: 0;
        padding-top: 10px;
    }

}


/* =========================================================
   PETIT MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .portfolio-sport-timeline {

        width: 100%;
        max-width: 100%;

        padding: 45px 12px 70px;

        overflow: hidden;
    }

    /* Axe */
    .portfolio-sport-timeline .pst__line {

        left: 17px;
        width: 1px;
    }

    /* Événements */
    .portfolio-sport-timeline .pst__event {

        width: 100%;

        margin-bottom: 55px;

        padding-left: 40px;
        padding-right: 0;
    }

    /* Date */
    .portfolio-sport-timeline .pst__date,
    .portfolio-sport-timeline .pst__event--left .pst__date,
    .portfolio-sport-timeline .pst__event--right .pst__date {

        margin-bottom: 13px;
    }

    .portfolio-sport-timeline .pst__date-text {

        max-width: calc(100vw - 70px);

        padding: 8px 10px;

        font-size: 11px;

        border-radius: 4px;
    }

    /* Points */
    .portfolio-sport-timeline .pst__dot,
    .portfolio-sport-timeline .pst__event--left .pst__dot,
    .portfolio-sport-timeline .pst__event--right .pst__dot {

        left: -32px;

        width: 16px;
        height: 16px;

        border-width: 4px;
    }

    /* Cartes */
    .portfolio-sport-timeline .pst__card,
    .portfolio-sport-timeline .pst__event--left .pst__card,
    .portfolio-sport-timeline .pst__event--right .pst__card {

        width: 100%;
        max-width: 100%;

        border-radius: 0 0 9px 9px;
    }

    /* Image */
    .portfolio-sport-timeline .pst__image {

        height: 200px;
    }

    /* Contenu */
    .portfolio-sport-timeline .pst__content {

        padding: 22px 18px 25px;
    }

    .portfolio-sport-timeline .pst__content h2 {

        margin-bottom: 12px;

        font-size: 21px;
        line-height: 1.1;
    }

    .portfolio-sport-timeline .pst__content p {

        font-size: 13px;
        line-height: 1.6;
    }

    .portfolio-sport-timeline .pst__number {

        top: 20px;
        right: 18px;

        font-size: 9px;
        letter-spacing: 2px;
    }

    /* Pointe */
    .portfolio-sport-timeline .pst__event--left .pst__card::after,
    .portfolio-sport-timeline .pst__event--right .pst__card::after {

        top: 23px;
        left: -9px;

        width: 18px;
        height: 18px;
    }

    /* Texte final */
    .portfolio-sport-timeline .pst__end p {

        max-width: 90%;

        text-align: center;

        font-size: 10px;
        line-height: 1.4;

        letter-spacing: 2px;
    }
}


/* =========================================================
   TRÈS PETIT ÉCRAN
   ========================================================= */

@media (max-width: 380px) {

    .portfolio-sport-timeline {

        padding-left: 10px;
        padding-right: 10px;
    }

    .portfolio-sport-timeline .pst__event {

        padding-left: 36px;
    }

    .portfolio-sport-timeline .pst__line {

        left: 15px;
    }

    .portfolio-sport-timeline .pst__dot,
    .portfolio-sport-timeline .pst__event--left .pst__dot,
    .portfolio-sport-timeline .pst__event--right .pst__dot {

        left: -29px;

        width: 14px;
        height: 14px;

        border-width: 3px;
    }

    .portfolio-sport-timeline .pst__image {

        height: 180px;
    }

    .portfolio-sport-timeline .pst__content {

        padding: 20px 16px 23px;
    }

    .portfolio-sport-timeline .pst__content h2 {

        font-size: 19px;
    }

    .portfolio-sport-timeline .pst__content p {

        font-size: 12.5px;
    }

    .portfolio-sport-timeline .pst__date-text {

        font-size: 10px;
        padding: 7px 9px;
    }
}