/* =========================================================
   AIKLORE - layout.css
   Mise en page : sections (bandes plein ecran), header, hero.
   Ordre de chargement : apres components.css (NE PAS reordonner : cascade CSS).
   ========================================================= */
/* ---------- section : chaque bande fait au moins un écran et centre son contenu ---------- */
.section{padding:var(--vpad) var(--pad);min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  position:relative;}
.section--dark{background:var(--dark);color:var(--white);}
.section--black{background:var(--black);color:var(--white);}
.eyebrow{font-family:var(--body);font-weight:500;font-size:14px;color:var(--teal);letter-spacing:1.4px;text-transform:uppercase;}
.lead{font-size:18px;line-height:1.56;letter-spacing:-0.09px;}

/* glow décoratif discret dans les bandes sombres */
.section--dark::before,.section--black::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,168,126,.10),transparent 70%);top:-10%;right:-8%;pointer-events:none;z-index:0;}
.section--dark > *,.section--black > *{position:relative;z-index:1;}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;height:85px;display:flex;align-items:center;
  padding:0 var(--pad);transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease;border-bottom:1px solid transparent;}
header.scrolled{background:rgba(15,17,19,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.08);}
.logo{display:flex;align-items:center;}
.logo img{height:52px;width:auto;display:block;transition:transform .3s var(--ease);}
.logo:hover img{transform:scale(1.05);}
nav.main{display:flex;align-items:center;gap:4px;margin-left:36px;}
nav.main a{color:#fff;font-family:var(--display);font-weight:500;font-size:17px;padding:8px 16px;border-radius:8px;display:flex;align-items:center;gap:6px;transition:background .2s;}
nav.main a:hover{background:rgba(255,255,255,.1);}
nav.main .chev{width:16px;height:16px;opacity:.7;}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.header-right .login{color:#fff;font-family:var(--display);font-weight:500;font-size:17px;padding:10px 16px;}
.header-right .login:hover{opacity:.8;}
.hamburger{display:none;}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;background:var(--black);color:#fff;display:flex;align-items:center;
  padding:120px var(--pad) 80px;overflow:hidden;}
.hero__bg{position:absolute;inset:0;z-index:0;background:var(--black);}
/* orbes lumineux flottants — atmosphère */
.hero__orb{position:absolute;border-radius:50%;filter:blur(90px);z-index:1;pointer-events:none;}
.hero__orb--1{width:520px;height:520px;background:radial-gradient(circle,rgba(0,168,126,.55),transparent 70%);
  top:-140px;left:-60px;animation:float1 15s ease-in-out infinite;}
.hero__orb--2{width:620px;height:620px;background:radial-gradient(circle,rgba(73,79,223,.40),transparent 70%);
  bottom:-200px;right:24%;animation:float2 19s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,40px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-30px)}}
/* Vidéo confinée à droite, cadrée haut */
.hero__video{position:absolute;bottom:0;right:8%;height:88%;width:auto;
  mix-blend-mode:screen;z-index:2;}
.hero__inner{position:relative;z-index:3;max-width:640px;}
.hero h1{font-size:clamp(36px,4.7vw,56px);letter-spacing:-0.5px;line-height:1.12;margin:0 0 26px;}
.hero h1 .hl{color:#fff;text-decoration-line:underline;text-decoration-color:var(--teal);text-decoration-thickness:3px;text-underline-offset:7px;}
.hero .eyebrow{color:var(--teal);}
.hero p.sub{font-size:17px;line-height:1.55;color:rgba(255,255,255,.84);max-width:540px;margin-bottom:32px;}
/* animation d'entrée du hero */
.hero__inner > *{opacity:0;transform:translateY(26px);animation:heroIn 1s var(--ease) forwards;}
.hero__inner > *:nth-child(1){animation-delay:.20s;}
.hero__inner > *:nth-child(2){animation-delay:.34s;}
.hero__inner > *:nth-child(3){animation-delay:.48s;}
.hero__inner > *:nth-child(4){animation-delay:.62s;}
@keyframes heroIn{to{opacity:1;transform:none;}}
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;
  align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:12px;letter-spacing:1px;text-transform:uppercase;
  animation:fadeCue 2s var(--ease) 1.4s both;}
.scroll-cue svg{width:20px;height:20px;animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes fadeCue{from{opacity:0}to{opacity:1}}