/* ===== Étoiles de demain ===== */
:root{
  --navy:#282F6F; --orange:#F7A627; --green:#B8D056; --cream:#FCF6E9; --mint:#E3EDC4;
  --f-head:'Poppins',system-ui,sans-serif; --f-body:'Roboto',system-ui,sans-serif;
  --f-btn:'Boogaloo','Poppins',sans-serif; --f-script:'Sriracha','Brush Script MT',cursive;
  --gutter:clamp(20px,5vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;font-family:var(--f-body);font-weight:300;color:var(--navy);background:#fff;line-height:1.5;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
a{color:inherit}
.container{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.center{text-align:center}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:10px;top:10px}

.t-navy{color:var(--navy)} .t-orange{color:var(--orange)} .t-green{color:var(--green)}
.script{font-family:var(--f-script);font-weight:400;display:block}
h1,h2{font-family:var(--f-head);font-weight:700;color:var(--navy);line-height:1.12}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h2 .script{font-size:1.25em;line-height:1.25;margin-top:.1em}
.eyebrow{font-family:var(--f-btn);color:var(--orange);text-transform:uppercase;font-size:clamp(1.05rem,1.8vw,1.3rem);letter-spacing:.02em;margin-bottom:.35em}
.body,.lead{font-size:clamp(1rem,1.5vw,1.2rem);color:#4a5090;max-width:34em}
.section-head{text-align:center;margin-bottom:clamp(28px,5vw,56px)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-btn);font-size:clamp(1.05rem,1.6vw,1.3rem);text-transform:uppercase;text-decoration:none;
  padding:.55em 1.6em;border-radius:999px;border:3px solid transparent;cursor:pointer;line-height:1.2;transition:transform .2s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(40,47,111,.2)}
.btn:focus-visible,.burger:focus-visible,.gallery button:focus-visible,.video__play:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.btn--navy{background:var(--navy);color:#fff}
.btn--green{background:var(--green);color:var(--navy)}
.btn--orange{background:var(--orange);color:var(--navy)}
.btn--cream{background:var(--cream);color:var(--navy)}
.btn--outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff}

.star{position:absolute;width:var(--s,30px);height:var(--s,30px);color:var(--c,var(--orange));pointer-events:none}

/* ===== HERO ===== */
.hero{position:relative;background:var(--cream);padding-bottom:clamp(60px,9vw,120px);overflow:hidden}
.bar{display:flex;justify-content:space-between;align-items:center;padding-top:16px;position:relative;z-index:20}
.logo img{width:clamp(96px,12vw,150px)}
.burger{display:none;width:52px;height:44px;background:none;border:0;padding:6px;cursor:pointer;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:7px;border-radius:4px;background:var(--navy);transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(18px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-18px) rotate(-45deg)}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a:not(.btn){font-family:var(--f-head);font-weight:600;font-size:.95rem;text-decoration:none;color:var(--navy);position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:3px;width:0;background:var(--orange);border-radius:2px;transition:width .25s}
.nav a:not(.btn):hover::after{width:100%}
.nav__cta{font-size:1.1rem;padding:.4em 1.3em}

.hero__grid{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:20px;position:relative;z-index:2;margin-top:10px}
.hero h1{font-size:clamp(2rem,4.6vw,3.8rem)}
.hero h1 .script{font-size:1.2em;line-height:1.3;margin-top:.05em}
.lead{margin:18px 0 30px;max-width:22em}
.btns{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.btns .btn{min-width:min(100%,260px)}

.hero__art{position:relative;aspect-ratio:1/.92;min-height:260px}
.hero__green{position:absolute;right:6%;top:2%;width:72%;height:auto;z-index:0}
.hero__orange{position:absolute;right:-12%;bottom:-6%;width:105%;height:46%;z-index:0}
.hero__img{position:absolute;left:0;right:-4%;bottom:-6%;width:106%;max-width:none;z-index:1;filter:drop-shadow(0 12px 18px rgba(40,47,111,.12))}
.hero .s1{--s:36px;--c:var(--orange);top:2%;left:58%;z-index:2;transform:rotate(8deg);width:clamp(28px,4vw,44px);height:clamp(28px,4vw,44px)}
.hero .s2{--c:var(--navy);width:clamp(14px,1.8vw,22px);height:clamp(14px,1.8vw,22px);top:6%;left:34%}
.hero .s3{--c:var(--green);width:clamp(14px,1.8vw,22px);height:clamp(14px,1.8vw,22px);top:20%;left:18%}
.hero .s4{--c:#fff;width:clamp(46px,7vw,86px);height:clamp(46px,7vw,86px);right:4%;bottom:10%;z-index:3;transform:rotate(-12deg)}

.clouds{position:absolute;pointer-events:none;z-index:4}
.clouds--white{left:0;bottom:-1px;width:100%;height:clamp(40px,7vw,100px)}
.clouds--orange{right:0;bottom:-1px;width:clamp(120px,20vw,260px);z-index:0}

/* ===== ABOUT ===== */
.about{padding:clamp(40px,7vw,100px) 0;background:#fff;overflow:hidden}
.about__grid{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(24px,5vw,70px)}
.about__art{position:relative;margin-left:calc(var(--gutter) * -1)}
.about__blob{position:absolute;left:0;top:-8%;width:100%;height:96%;z-index:0}
.about__art img{position:relative;z-index:1;width:100%}
.about h2{margin-bottom:.6em}

/* ===== STORY ===== */
.story{position:relative;background:var(--mint);padding:clamp(50px,8vw,100px) 0;margin-top:clamp(50px,8vw,90px)}
.story__arrow{position:absolute;left:clamp(10px,12vw,200px);top:clamp(-70px,-6vw,-40px);width:clamp(180px,28vw,380px);height:auto}
.story__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,70px);align-items:center}
.story h2{margin:.1em 0 .5em}
.video{position:relative;margin:0;border-radius:6px;overflow:hidden;box-shadow:14px 14px 0 rgba(40,47,111,.28);background:#000;aspect-ratio:3/2}
.video img,.video video,.video iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(54px,8vw,84px);aspect-ratio:1;border-radius:50%;border:0;background:rgba(40,47,111,.55);backdrop-filter:blur(4px);cursor:pointer;display:grid;place-items:center;transition:transform .2s,background .2s}
.video__play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--orange)}
.video__play svg{width:45%;margin-left:6%}
.video__note{position:absolute;left:0;right:0;bottom:0;padding:10px;text-align:center;background:var(--navy);color:#fff;font-size:.9rem}

/* ===== IMPACT ===== */
.impact{position:relative;padding:clamp(50px,8vw,100px) 0;background:#fff;overflow:hidden}
.impact .container{position:relative;z-index:1}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(60px,5vw,32px) clamp(14px,2.4vw,30px);padding-top:50px}
.card{position:relative;background:var(--cream);border-radius:32px;padding:calc(clamp(40px,4vw,52px) + 14px) 20px 28px;text-align:center}
.card__icon{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:clamp(76px,9vw,104px);height:auto}
.card__num{font-family:var(--f-head);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.1}
.card h3{font-family:var(--f-head);font-weight:700;font-size:clamp(1rem,1.6vw,1.3rem);margin-bottom:.6em}
.card p:last-child{font-size:clamp(.95rem,1.3vw,1.1rem);color:#4a5090}

/* ===== TEAM ===== */
.team{position:relative;background:var(--cream);padding:clamp(40px,6vw,70px) 0 clamp(70px,9vw,110px)}
.team .eyebrow{margin-bottom:1.6em}
.team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,40px);max-width:880px;margin:0 auto}
.member{position:relative;padding:14px 0 0 12px;aspect-ratio:3/3.4}
.member::before{content:"";position:absolute;left:0;right:12px;top:14px;bottom:12px;border-top:6px solid var(--orange);border-left:6px solid var(--orange);z-index:0}
.member img{position:relative;z-index:1;width:calc(100% - 12px);height:100%;object-fit:cover;margin:0 0 0 6px;margin-top:0}
.member__name{position:absolute;z-index:2;left:50%;top:0;transform:translateX(-35%);background:var(--navy);color:var(--green);font-family:var(--f-btn);text-transform:uppercase;font-size:clamp(1.2rem,2.4vw,1.9rem);padding:.05em 1.2em;border-radius:999px;line-height:1.35}
.team .s5{--c:#fff;width:clamp(50px,8vw,100px);height:clamp(50px,8vw,100px);left:clamp(10px,12vw,200px);bottom:-30px;z-index:3;transform:rotate(12deg)}

/* ===== LIFE ===== */
.life{background:var(--cream);padding:0 0 clamp(80px,11vw,150px)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.4vw,16px);max-width:860px;margin:0 auto clamp(20px,3vw,32px)}
.gallery button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden}
.gallery img{width:100%;aspect-ratio:2.55/1;object-fit:cover;transition:transform .4s}
.gallery button:hover img{transform:scale(1.05)}

/* ===== CTA ===== */
.cta{position:relative;background:var(--navy);color:#fff;padding:clamp(20px,4vw,50px) 0 clamp(50px,7vw,90px)}
.cta__wave{position:absolute;left:0;top:0;width:100%;height:clamp(40px,8vw,110px);transform:translateY(-99%);display:block}
.cta .s6{--c:#fff;width:clamp(60px,9vw,110px);height:clamp(60px,9vw,110px);right:12%;top:clamp(-90px,-8vw,-40px);transform:rotate(14deg);z-index:2}
.cta__body{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;padding-top:clamp(20px,4vw,50px)}
.cta h2{color:#fff}
.cta__text p{font-size:clamp(1rem,1.5vw,1.2rem);margin-top:1em;max-width:26em;color:rgba(255,255,255,.85)}
.cta__btns{display:flex;flex-direction:column;gap:14px}

/* ===== FOOTER ===== */
.footer{background:var(--cream);padding-top:clamp(30px,5vw,60px)}
.footer__grid{display:flex;justify-content:space-between;align-items:center;gap:24px}
.footer__grid img{width:clamp(100px,13vw,150px)}
.footer address{font-style:normal;text-align:right;display:flex;flex-direction:column;gap:2px;font-size:clamp(1rem,1.5vw,1.2rem);color:#4a5090}
.footer address a{text-decoration:none}
.footer address a:hover{color:var(--orange)}
.footer__title{font-family:var(--f-btn);font-weight:400;text-transform:uppercase;font-size:clamp(1.2rem,2vw,1.6rem);margin-bottom:6px}
.footer__copy{text-align:center;font-size:.75rem;color:#6b70a0;padding:30px 20px}
.footer__bar{height:30px;background:var(--navy)}

/* ===== LIGHTBOX ===== */
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%}
.lightbox::backdrop{background:rgba(20,24,60,.9)}
.lightbox[open]{display:grid;place-items:center}
.lightbox img{max-width:min(92vw,1000px);max-height:84vh;object-fit:contain;border-radius:8px}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:3rem;line-height:1;cursor:pointer;padding:10px 18px}
.lightbox__close{top:10px;right:14px}
.lightbox__prev{left:6px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:6px;top:50%;transform:translateY(-50%)}

/* ===== Animations ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ===== TABLETTE ===== */
@media (max-width:959px){
  .burger{display:flex}
  .nav{position:absolute;top:100%;right:var(--gutter);left:var(--gutter);flex-direction:column;align-items:stretch;gap:0;background:#fff;border-radius:20px;box-shadow:0 14px 40px rgba(40,47,111,.2);padding:10px 20px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav a:not(.btn){padding:14px 4px;border-bottom:1px solid #eee;font-size:1.05rem}
  .nav a:not(.btn)::after{display:none}
  .nav__cta{margin:14px 0 6px}
  .cards{grid-template-columns:repeat(2,1fr)}
}

/* ===== MOBILE ===== */
@media (max-width:719px){
  .hero__grid{grid-template-columns:1fr;margin-top:0}
  .hero__art{order:-1;max-width:460px;margin:0 auto 28px;width:100%}
  .hero__text{text-align:left}
  .about__grid,.story__grid,.cta__body{grid-template-columns:1fr}
  .about__art{margin-right:calc(var(--gutter) * -1);margin-left:calc(var(--gutter) * -1);max-width:480px}
  .story__arrow{left:var(--gutter)}
  .video{margin-right:10px}
  .cards{grid-template-columns:1fr 1fr;gap:56px 12px}
  .card{padding-inline:12px}
  .team__grid{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .member{padding-left:6px}
  .member::before{border-width:4px;right:6px}
  .member img{width:calc(100% - 6px);margin-left:3px}
  .member__name{font-size:1rem;transform:translateX(-45%)}
  .footer__grid{flex-direction:column;text-align:center}
  .footer address{text-align:center}
  .btns .btn,.cta__btns .btn{width:100%}
}
