/* =========================================================
   V7 (24/09/2026) - Menu sombre + hero style "pill"
   Charge APRES demo-design-pages.css
   ========================================================= */

/* ---------- MENU SOMBRE ---------- */
header{background:#0C1A2Ef2;color:#fff;border-bottom:1px solid #ffffff14;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
header nav{height:80px}
header .logo img{width:170px}
.navlinks{margin:0 auto;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #ffffff1f;border-radius:40px;background:#ffffff08;font:500 15px/1 'DM Sans',sans-serif}
.navlinks>a,.navlinks .nav-drop-btn{color:#dbe6ea;padding:10px 16px;border-radius:30px;transition:background .2s,color .2s}
.navlinks>a:hover,.navlinks .nav-drop-btn:hover{color:#fff;background:#ffffff12}
.navlinks>a[aria-current="page"],.nav-drop-btn.is-current{color:#fff;background:#ffffff14}
.navlinks>a[aria-current="page"]:after,.nav-drop-btn.is-current:after{display:none}
.nav-drop-menu{top:calc(100% + 18px);left:0}
.navlinks .nav-drop-menu a{color:#0C1A2E}
.navright{gap:12px}
.navright .login{border:0;background:#37B7C9;color:#0C1A2E;padding:12px 22px;border-radius:40px;font:600 15px/1 'DM Sans',sans-serif;box-shadow:0 8px 24px -10px #37B7C9aa;transition:background .2s,transform .2s}
.navright .login i{color:#0C1A2E}
.navright .login:hover{background:#5ccfdd;transform:translateY(-1px)}
.nav-toggle{background:transparent;border-color:#ffffff33;color:#fff}
header.hdr-floating{box-shadow:0 10px 30px -18px #000c}
@media(max-width:1000px){header .logo img{width:150px}.navlinks>a,.navlinks .nav-drop-btn{padding:10px 12px}}
@media(max-width:720px){
  header:not(.nav-open) .navlinks{display:none}
  header.nav-open .navlinks{background:#0C1A2E;border:0;border-top:1px solid #ffffff14;border-radius:0;box-shadow:0 24px 40px -24px #000;padding:10px 18px 20px}
  header.nav-open .navlinks>a{color:#fff;border-bottom:1px solid #ffffff12;border-radius:0}
  header.nav-open .nav-drop-btn{color:#8fa6b0;border-radius:0}
  header.nav-open .nav-drop-menu{background:transparent;border-bottom:1px solid #ffffff12}
  header.nav-open .navlinks .nav-drop-menu a{color:#fff}
  header.nav-open .navlinks .nav-drop-menu a:hover{background:#ffffff0d}
  header.nav-open .nav-drop-menu a>i{color:#37B7C9}
  header.nav-open .nav-drop-menu small{color:#9fb3bb}
  header.nav-open .nav-drop-more a{color:#fff;border-color:#ffffff2e}
  .navlinks{margin:0;padding:0;border:0;background:none}
}
@media(max-width:720px){header nav{height:70px}.navright .login{padding:10px 16px;font-size:14px}}

/* ---------- HERO ---------- */
.hero-centered h1,.hero .hero-centered h1{font-family:Manrope,sans-serif;font-weight:600;font-size:clamp(46px,7.4vw,104px);line-height:1;letter-spacing:-.055em;color:#fff}
.hero-centered h1 em{display:inline;font-style:normal;color:#5CE1EE;text-shadow:none}
.hero-centered .intro,.hero .hero-centered .intro{font:400 clamp(17px,1.6vw,22px)/1.5 'DM Sans',sans-serif;color:#dfe8ec;max-width:700px;margin:34px auto 0}
.hero-centered .intro-sub{font:400 17px/1.5 'DM Sans',sans-serif;color:#a9bcc4;margin:18px 0 0}
.hero-centered .intro-sub strong{color:#fff;font-weight:600}
.hero-centered .actions{margin-top:40px;gap:22px}
.hero-cta.button{background:#5CE1EE;color:#0C1A2E;border-radius:40px;padding:17px 22px 17px 28px;gap:16px;font:500 17px/1 'DM Sans',sans-serif;box-shadow:0 12px 34px -12px #5CE1EEaa;animation:none}
.hero-cta.button i{font-size:18px}
.hero-cta.button:hover{background:#86ebf4;transform:translateY(-2px)}
.hero-listen{display:inline-flex;align-items:center;gap:14px;color:#fff;font:500 17px/1 'DM Sans',sans-serif;padding:12px 0;border-bottom:1px solid #ffffff4d;transition:border-color .2s}
.hero-listen-ico{width:30px;height:30px;border-radius:50%;border:1px solid #ffffff55;display:grid;place-items:center;font-size:14px;color:#5CE1EE;transition:background .2s,border-color .2s}
.hero-listen:hover{border-color:#5CE1EE}
.hero-listen:hover .hero-listen-ico{background:#5CE1EE;border-color:#5CE1EE;color:#0C1A2E}
.hero-centered .reassurance{margin-top:34px;font:400 14px/1.4 'DM Sans',sans-serif;color:#b9c9cf;gap:24px;flex-wrap:wrap}
.hero-centered .reassurance span:before{content:'\2713';color:#5CE1EE;font-weight:700;margin-right:6px}
.hero:has(.hero-centered):before{background:linear-gradient(#0C1A2Ed9,#0C1A2Ebf 50%,#0C1A2Ee6),url('/images/radio-ecole.webp') center 30%/cover}
@media(max-width:720px){
  .hero-centered h1,.hero .hero-centered h1{font-size:clamp(42px,12vw,56px)}
  .hero-centered .actions{flex-direction:column;gap:14px}
  .hero-cta.button{width:100%;justify-content:center}
  .hero-centered .reassurance{gap:10px 18px}
}

/* Lien d'evitement : hors flux (la V3 le repassait en relative et creait une bande blanche au-dessus du menu) */
.skip{position:absolute;left:10px;top:-100px;z-index:100}
.skip:focus{top:10px;background:#fff;color:#0C1A2E;padding:12px;border-radius:8px}

/* ---------- CTA HERO UNIQUE (24/09/2026) ---------- */
.hero-centered .actions{flex-direction:column;gap:0}
.hero-cta.hero-cta--xl{position:relative;isolation:isolate;overflow:visible;gap:16px;padding:12px 12px 12px 30px;font:600 20px/1 'DM Sans',sans-serif;letter-spacing:-.01em;background:linear-gradient(135deg,#7AF0F8 0%,#5CE1EE 45%,#37B7C9 100%);color:#0C1A2E;border-radius:60px;box-shadow:0 18px 50px -14px #5CE1EEcc,inset 0 1px 0 #ffffff80;transition:transform .25s,box-shadow .25s}
.hero-cta.hero-cta--xl:before{content:'';position:absolute;inset:-6px;border-radius:inherit;border:2px solid #5CE1EE;opacity:0;z-index:-1;animation:ctaRing 2.4s ease-out infinite}
.hero-cta.hero-cta--xl:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,#ffffff99 50%,transparent 70%);background-size:250% 100%;background-position:130% 0;mix-blend-mode:soft-light;pointer-events:none;animation:ctaShine 3.6s ease-in-out infinite}
.hero-cta.hero-cta--xl:hover{background:linear-gradient(135deg,#9AF5FB 0%,#6FE7F2 45%,#45C3D3 100%);transform:translateY(-3px) scale(1.02);box-shadow:0 26px 60px -14px #5CE1EEee,inset 0 1px 0 #ffffff99}
.hero-cta-wave{display:inline-flex;align-items:center;gap:3px;height:22px}
.hero-cta-wave i{display:block;width:3px;border-radius:3px;background:#0C1A2E;height:8px;animation:ctaBar 1s ease-in-out infinite alternate}
.hero-cta-wave i:nth-child(2){height:16px;animation-delay:-.2s}.hero-cta-wave i:nth-child(3){height:22px;animation-delay:-.4s}.hero-cta-wave i:nth-child(4){height:14px;animation-delay:-.6s}.hero-cta-wave i:nth-child(5){height:9px;animation-delay:-.8s}
.hero-cta-arrow{width:48px;height:48px;border-radius:50%;background:#0C1A2E;color:#5CE1EE;display:grid;place-items:center;font-size:20px;transition:transform .25s}
.hero-cta-arrow i{font-size:20px}
.hero-cta.hero-cta--xl:hover .hero-cta-arrow{transform:translateX(4px) rotate(-45deg)}
.hero-cta-note{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;font:500 14px/1.3 'DM Sans',sans-serif;color:#cfe0e6}
.hero-cta-note span{display:inline-flex;align-items:center;gap:7px}
.hero-cta-note span:before{content:'';width:6px;height:6px;border-radius:50%;background:#5CE1EE;box-shadow:0 0 10px #5CE1EE}
@keyframes ctaRing{0%{opacity:.7;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.14)}}
@keyframes ctaShine{0%,55%{background-position:130% 0}85%,100%{background-position:-30% 0}}
@keyframes ctaBar{to{transform:scaleY(.35)}}
@media(prefers-reduced-motion:reduce){.hero-cta.hero-cta--xl:before,.hero-cta.hero-cta--xl:after,.hero-cta-wave i{animation:none}}
@media(max-width:720px){
  .hero-cta.hero-cta--xl{width:100%;justify-content:space-between;font-size:17px;padding:10px 10px 10px 22px;gap:12px}
  .hero-cta-arrow{width:44px;height:44px}
  .hero-cta-note{font-size:13px}
}