/* Se protéger */

.hero--yellow{
    position:relative; min-height:778px;
    background:linear-gradient(180deg, var(--c-yellow-pale) 0%, var(--c-yellow) 100%);
    overflow:hidden;
    border-bottom-left-radius:var(--r-xl);
    border-bottom-right-radius:var(--r-xl);
}
.hero--yellow .hero-pattern{
    position:absolute; inset:0;
    background:url("../assets/img/pattern-pool.png") center/cover;
    opacity:.25; mix-blend-mode:plus-lighter; pointer-events:none;
}
.hero--yellow .hero-content{
    position:relative;
    max-width:780px; margin:0 auto;
    padding:240px 20px 80px;
    text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:32px;
}
.hero--yellow .hero-title{ font-size:60px; letter-spacing:-1.2px; line-height:1.2; color:var(--c-blue); }
.hero--yellow .hero-lead{ color:var(--c-blue-2); max-width:680px; }

/* ---- Reflexes carousel ---- */
.section--reflexes{
    background:var(--c-white);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    margin-top:-50px; position:relative;
    padding:120px 20px 80px;
    overflow:hidden;
}
.reflexes__head{ text-align:center; max-width:540px; margin:0 auto 50px; }
.reflexes__head h2{ font-family:var(--f-display); font-weight:700; font-size:45px; color:var(--c-blue); margin-bottom:20px; }
.reflexes__head p{ color:var(--c-blue-2); font-size:16px; line-height:1.5; }

.reflexes-track{
    position:relative;
    margin:0 -20px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
            mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.reflexes-cards{
    display:flex; gap:50px; padding:0 60px;
    transition:transform .4s ease;
}
.reflex{
    flex:0 0 240px;
    display:flex; flex-direction:column; align-items:center; gap:30px;
    text-align:center;
    opacity:.4; transition:opacity .3s, transform .3s;
}
.reflex.is-active{ opacity:1; transform:scale(1.1); }
.reflex__icon{
    width:200px; height:200px;
    background:radial-gradient(circle, var(--c-rose-pale), transparent 70%);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:88px;
}
.reflex.is-active .reflex__icon{
    background:radial-gradient(circle, var(--c-yellow-pale), var(--c-rose-pale));
}
.reflex__num{
    background:var(--c-blue); color:var(--c-white);
    padding:7px 14px; border-radius:45px;
    font-family:var(--f-display); font-weight:600; font-size:18px;
    min-width:40px;
}
.reflex p{ color:var(--c-blue); font-size:16px; line-height:1.2; max-width:270px; }

.section--reflexes .dots{ display:flex; justify-content:center; margin-top:50px; }

/* ---- Kit 72h ---- */
.section--kit{
    background:linear-gradient(180deg, var(--c-white) 0%, var(--c-mint) 100%);
    padding:100px 20px 150px;
    text-align:center;
    position:relative;
}
.kit__title{ font-family:var(--f-display); font-weight:700; font-size:45px; color:var(--c-blue); margin-bottom:70px; }
.kit-grid{
    max-width:840px; margin:0 auto;
    display:grid; grid-template-columns:repeat(6, 1fr); gap:24px;
}
.kit-item{
    aspect-ratio:1;
    background:var(--c-white);
    border-radius:var(--r-md);
    display:flex; align-items:center; justify-content:center;
    font-size:48px;
    box-shadow:0 4px 16px rgba(0,0,0,.05);
    opacity:.6;
    transition:transform .25s, opacity .25s;
}
.kit-item:hover, .kit-item.is-active{ opacity:1; transform:translateY(-4px); }
.kit-tooltip{
    display:inline-block; margin-top:50px;
    background:var(--c-white);
    color:var(--c-red);
    border-radius:45px;
    padding:25px 30px;
    font-family:var(--f-display); font-weight:700; font-size:20px;
}

/* ---- Routes ---- */
.section--routes{
    padding:100px 20px;
    background:var(--c-white);
    overflow:hidden;
}
.routes__head{ text-align:center; margin-bottom:80px; display:flex; flex-direction:column; align-items:center; gap:24px; }
.routes__warning{ font-size:60px; }
.routes__head h2{ font-family:var(--f-display); font-weight:700; font-size:45px; color:var(--c-blue); }

.routes-gallery{
    display:flex; gap:25px;
    overflow-x:auto; padding:20px 40px;
    scroll-snap-type:x mandatory;
    margin:0 -40px;
    -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
            mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.route-card{
    flex:0 0 302px; height:362px;
    border-radius:var(--r-md);
    background:var(--c-blue-light);
    background-size:cover; background-position:center;
    box-shadow:var(--shadow-soft);
    scroll-snap-align:center;
    position:relative;
}
.route-card__circle{
    position:absolute; inset:0;
    border-radius:50% 50% 23px 23px / 60% 60% 23px 23px;
    background:var(--c-blue-light);
}
.route-card--info{
    background:var(--c-violet-2);
    border:12px solid var(--c-violet-2);
    display:flex; flex-direction:column; gap:32px; align-items:center; justify-content:center;
    padding:40px;
    text-align:center;
}
.route-card--info h3{ font-family:var(--f-display); font-weight:700; font-size:24px; color:var(--c-blue); line-height:1.2; }
.route-loc{
    border:1px solid var(--c-blue);
    border-radius:50px;
    padding:8px 16px;
    font-family:var(--f-display); font-weight:400; font-size:14px;
    color:var(--c-blue);
}

@media (max-width: 980px){
    .hero--yellow .hero-title{ font-size:36px; }
    .kit-grid{ grid-template-columns:repeat(4, 1fr); }
    .reflex{ flex:0 0 180px; }
    .reflex__icon{ width:140px; height:140px; font-size:56px; }
}