/* =============================================================================
   Netcrafter Formations — styles complementaires a Tailwind (CDN).
   Palette 100% bleue (inspiree du logo Netcrafter : toque + maillon en degrade
   de bleus). Aucune trace de cyan/teal/amber/orange. Halos aurora + formes
   geometriques animees, ticker, reveal au scroll, hero slider, compteurs de
   stats, catalogue avec filtres/recherche, lecteur de lecons.
   ============================================================================= */

:root{
  --void:#060B14;
  --surface:#0D1B2E;
  --surface-raised:#142A46;
  --blue-deep:#1B3A5C;
  --blue-mid:#2C5C86;
  --blue-bright:#4A90D9;
  --blue-sky:#7CC3F2;
  --line: rgba(124,195,242,0.14);
  --line-strong: rgba(124,195,242,0.28);
  --ink:#F3F7FC;
  --ink-dim:#93A8C6;
  --ink-faint:#5B6C87;
  --glow-blue: 0 0 40px rgba(74,144,217,0.35);
  --danger:#FF6B6B;
}

html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,.font-display{font-family:'Space Grotesk', sans-serif; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', monospace;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ---------- ICONES UTILITAIRES INLINE ---------- */
.icon-inline{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0;}
.icon-inline svg{width:100%; height:100%; display:block;}
.icon-sm{width:14px; height:14px;}
.icon-lg{width:26px; height:26px;}
.icon-xl{width:40px; height:40px;}

/* ---------- AURORA (halos animes en arriere-plan) ---------- */
.aurora{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.aurora span{position:absolute; border-radius:50%; filter:blur(90px); opacity:0.55;}
.aurora .a1{width:520px; height:520px; background:radial-gradient(circle, rgba(74,144,217,0.32), transparent 70%); top:-160px; left:-100px; animation:driftA 22s ease-in-out infinite;}
.aurora .a2{width:600px; height:600px; background:radial-gradient(circle, rgba(124,195,242,0.22), transparent 70%); bottom:-220px; right:-160px; animation:driftB 26s ease-in-out infinite;}
.aurora .a3{width:420px; height:420px; background:radial-gradient(circle, rgba(27,58,92,0.35), transparent 70%); top:40%; left:50%; animation:driftC 30s ease-in-out infinite;}
@keyframes driftA{0%,100%{transform:translate(0,0);} 50%{transform:translate(60px,80px);}}
@keyframes driftB{0%,100%{transform:translate(0,0);} 50%{transform:translate(-70px,-50px);}}
@keyframes driftC{0%,100%{transform:translate(-50%,-50%);} 50%{transform:translate(-40%,-60%);}}

/* ---------- FORMES GEOMETRIQUES DECORATIVES ---------- */
/* Positionnees pres des bords / hors-canvas pour ne jamais chevaucher le
   texte des colonnes de contenu (qui vivent globalement entre 8% et 92%
   de la largeur). z-index:0, toujours sous le contenu (z-10). */
.geo-shapes{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.geo-shapes .dotgrid{position:absolute; width:140px; height:140px; background-image:radial-gradient(rgba(124,195,242,0.28) 1px, transparent 1px); background-size:18px 18px; opacity:0.35; animation:floatSlow 16s ease-in-out infinite;}
.geo-shapes .g1{top:10%; left:-60px;}
.geo-shapes .g2{bottom:9%; right:-60px; animation-delay:2s;}
.geo-shapes .diamond{position:absolute; width:60px; height:60px; border:1px solid rgba(124,195,242,0.2); animation:floatSlowRotated 12s ease-in-out infinite;}
.geo-shapes .d1{top:20%; right:-30px;}
.geo-shapes .d2{bottom:16%; left:-30px; animation-delay:3s;}
@keyframes spinSlow{to{transform:rotate(360deg);}}
@keyframes floatSlow{0%,100%{transform:translateY(0);} 50%{transform:translateY(-18px);}}
@keyframes floatSlowRotated{0%,100%{transform:rotate(45deg) translateY(0);} 50%{transform:rotate(45deg) translateY(-18px);}}

/* ---------- REVEAL AU SCROLL ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- TICKER ---------- */
.ticker{background:linear-gradient(90deg, var(--blue-deep), var(--blue-bright)); color:#F3F7FC; overflow:hidden; position:relative; z-index:60;}
.ticker-track{display:flex; width:max-content; white-space:nowrap; animation:tick 28s linear infinite; font-family:'IBM Plex Mono'; font-size:0.76rem; font-weight:600; padding:7px 0;}
.ticker-track span{padding:0 28px; display:inline-flex; align-items:center; gap:8px;}
.ticker-track span .icon-inline{width:13px; height:13px; opacity:0.9;}
@keyframes tick{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- NAV / MARQUE ---------- */
.brand-badge{background:linear-gradient(145deg, var(--blue-deep), var(--blue-bright)); box-shadow:var(--glow-blue);}
.brand-word-net{color:var(--blue-bright); font-weight:800;}
.brand-word-crafter{color:var(--ink); font-weight:600;}
.nav-links a{position:relative;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--blue-bright); transition:width .2s ease;}
.nav-links a:hover::after{width:100%;}

/* ---------- BOUTONS ---------- */
.btn-primary{
  background:linear-gradient(135deg, var(--blue-bright), var(--blue-mid)); color:#FFFFFF;
  box-shadow:0 10px 30px -8px rgba(74,144,217,0.5), var(--glow-blue);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 14px 36px -8px rgba(74,144,217,0.65), 0 0 55px rgba(124,195,242,0.4);}
.btn-primary:active{transform:translateY(0) scale(0.99);}
.btn-primary:disabled{opacity:0.5; pointer-events:none;}
.btn-primary .arrow{transition:transform 0.18s ease; display:inline-block;}
.btn-primary:hover .arrow{transform:translateX(4px);}

.btn-ghost{transition:border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;}
.btn-ghost:hover{border-color:var(--blue-bright); color:var(--ink); background:rgba(74,144,217,0.08); box-shadow:var(--glow-blue);}

.btn-blue{background:linear-gradient(135deg, var(--blue-mid), var(--blue-deep)); color:#FFFFFF; box-shadow:0 6px 18px -6px rgba(44,92,134,0.55); transition:transform .18s ease, box-shadow .18s ease;}
.btn-blue:hover{transform:translateY(-2px); box-shadow:0 10px 26px -6px rgba(74,144,217,0.55);}

/* ---------- INPUTS ---------- */
.nf-input{background:transparent; border:1px solid rgba(124,195,242,0.2); transition:border-color .18s ease, box-shadow .18s ease;}
.nf-input:focus{border-color:var(--blue-bright); outline:none; box-shadow:0 0 0 3px rgba(74,144,217,0.16);}

/* ---------- HERO ---------- */
.hero-title{overflow-wrap:normal; word-break:normal;}
.hero-title .accent{
  background:linear-gradient(100deg, var(--blue-mid), var(--blue-bright), var(--blue-sky));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 5s linear infinite;
}
@keyframes shine{to{background-position:200% center;}}

.eyebrow-tag{border:1px solid rgba(124,195,242,0.35); background:rgba(74,144,217,0.1); color:var(--blue-sky); box-shadow:0 0 24px rgba(74,144,217,0.14);}
.eyebrow-tag .pulse-dot{width:7px; height:7px; border-radius:50%; background:var(--blue-sky); box-shadow:0 0 10px var(--blue-sky); animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:0.3;}}

.hero-meta div{border-left:2px solid var(--blue-sky);}

.avatar-strip img{width:44px; height:44px; margin-left:-12px; border:2px solid var(--void); box-shadow:0 0 0 1px rgba(74,144,217,0.3); border-radius:50%; object-fit:cover; background:linear-gradient(155deg, var(--blue-deep), var(--surface-raised));}
.avatar-strip img:first-child{margin-left:0;}

/* ---------- HERO SLIDER ---------- */
.hero-slider{position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line-strong); box-shadow:0 40px 100px -24px rgba(0,0,0,0.65), 0 0 60px rgba(74,144,217,0.14); background:linear-gradient(160deg, var(--surface), #081120); animation:floatUp 0.7s ease both;}
@keyframes floatUp{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}
.hero-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 0.9s ease;}
.hero-slide.active{opacity:1; visibility:visible;}
.hero-slide img{width:100%; height:100%; object-fit:cover;}
.hero-slide::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,11,20,0.94) 0%, rgba(6,11,20,0.4) 55%, rgba(6,11,20,0.05) 100%);}
.hero-slide-info{position:absolute; left:0; right:0; bottom:0; padding:24px; z-index:2;}
.hero-slide-cat{font-family:'IBM Plex Mono'; font-size:0.68rem; color:var(--blue-sky); letter-spacing:0.03em; text-transform:uppercase;}
.hero-slide-title{font-family:'Space Grotesk'; font-weight:700; font-size:1.2rem; margin-top:8px; line-height:1.25;}
.hero-slide-price{font-family:'IBM Plex Mono'; font-weight:700; color:var(--blue-sky); margin-top:10px; font-size:0.95rem;}
.hero-slider-dots{position:absolute; top:18px; right:18px; display:flex; gap:6px; z-index:3;}
.hero-slider-dots button{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.3); border:none; padding:0; cursor:pointer; transition:all 0.25s ease;}
.hero-slider-dots button.active{background:var(--blue-sky); width:22px; border-radius:5px; box-shadow:0 0 10px rgba(124,195,242,0.6);}
.hero-slider-badge{position:absolute; top:18px; left:18px; z-index:3; font-family:'IBM Plex Mono'; font-size:0.65rem; background:rgba(6,11,20,0.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(124,195,242,0.3); border-radius:999px; padding:5px 11px; color:var(--blue-sky); display:inline-flex; align-items:center; gap:6px;}

/* ---------- COMPTEURS DE STATS ---------- */
.stat-tile{border:1px solid var(--line); border-radius:16px; padding:26px 20px; background:linear-gradient(160deg, rgba(124,195,242,0.06), transparent); text-align:center; transition:transform .2s ease, border-color .2s ease;}
.stat-tile:hover{transform:translateY(-4px); border-color:var(--line-strong);}
.stat-num{font-family:'Space Grotesk'; font-weight:700; font-size:clamp(1.9rem,3.6vw,2.6rem); color:var(--blue-sky); line-height:1;}
.stat-label{font-size:0.82rem; color:var(--ink-dim); margin-top:8px;}

/* ---------- KICKER / SECTION TITLE ---------- */
.kicker{font-family:'IBM Plex Mono'; font-size:0.76rem; color:var(--blue-sky); display:flex; align-items:center; gap:8px;}
.kicker::before{content:""; width:16px; height:1px; background:var(--blue-sky);}
.pull{border-left:3px solid var(--blue-sky); box-shadow:inset 4px 0 20px -12px rgba(124,195,242,0.4);}

/* ---------- CARTES FORMATION ---------- */
.course-card{
  border:1px solid var(--line-strong); border-radius:14px;
  background:linear-gradient(160deg, rgba(124,195,242,0.045), transparent);
  transition:transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  position:relative; overflow:hidden;
}
.course-card:hover{transform:translateY(-6px); border-color:var(--blue-bright); box-shadow:0 20px 44px -18px rgba(74,144,217,0.4), 0 0 40px rgba(74,144,217,0.12);}
.course-card.flagship{border-color:rgba(124,195,242,0.5); background:linear-gradient(160deg, rgba(74,144,217,0.12), transparent 70%); box-shadow:0 0 40px -10px rgba(74,144,217,0.25);}
.course-card.flagship:hover{border-color:var(--blue-sky); box-shadow:0 20px 46px -16px rgba(74,144,217,0.5), 0 0 55px rgba(124,195,242,0.3);}
.course-icon{width:44px; height:44px; border-radius:10px; background:var(--surface-raised); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s ease, border-color .2s ease;}
.course-card:hover .course-icon{transform:scale(1.08) rotate(-4deg); border-color:var(--blue-bright);}
.course-icon svg{width:22px; height:22px;}
.course-cover{position:relative; aspect-ratio:16/9; background:linear-gradient(155deg, var(--surface-raised), #081120); overflow:hidden;}
.course-cover img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease, opacity .3s ease;}
.course-card:hover .course-cover img{transform:scale(1.07);}
.tag-flagship{font-family:'IBM Plex Mono'; font-size:0.62rem; color:#06111F; background:linear-gradient(135deg, var(--blue-sky), var(--blue-bright)); font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.tag-flagship .icon-inline{width:11px; height:11px;}

/* ---------- APERCU DE LECON (accueil) ---------- */
.lesson-preview-card{border:1px solid var(--line); border-radius:14px; background:linear-gradient(160deg, rgba(124,195,242,0.05), transparent); padding:22px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; height:100%;}
.lesson-preview-card:hover{transform:translateY(-4px); border-color:var(--blue-mid); box-shadow:0 16px 34px -18px rgba(74,144,217,0.3);}
.lesson-preview-cat{font-family:'IBM Plex Mono'; font-size:0.66rem; color:var(--blue-sky); text-transform:uppercase; letter-spacing:0.03em;}
.lesson-preview-formation{font-size:0.78rem; color:var(--ink-faint); margin-top:6px;}
.lesson-preview-title{font-family:'Space Grotesk'; font-weight:700; margin-top:8px; font-size:1rem; line-height:1.35;}
.lesson-preview-excerpt{font-size:0.85rem; color:var(--ink-dim); margin-top:10px; line-height:1.65;}
.lesson-preview-footer{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:0.76rem; color:var(--blue-sky); display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono';}

/* ---------- MOYENS DE PAIEMENT (checkout) ---------- */
.pay-option{border:1px solid var(--line-strong); border-radius:12px; background:linear-gradient(160deg, rgba(124,195,242,0.045), transparent); transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;}
.pay-option:hover{border-color:var(--blue-bright); transform:translateY(-2px);}
.pay-option.selected{border-color:var(--blue-sky); background:rgba(74,144,217,0.1); box-shadow:0 0 0 1px var(--blue-sky), var(--glow-blue);}
.pay-option img{max-height:28px; width:auto; object-fit:contain;}

/* ---------- PROCESS STEPS ---------- */
.step{border:1px solid var(--line); border-radius:12px; background:linear-gradient(160deg, rgba(124,195,242,0.04), transparent); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.step:hover{border-color:var(--blue-bright); transform:translateY(-4px); box-shadow:0 16px 32px -18px rgba(74,144,217,0.35);}
.step .idx{font-family:'IBM Plex Mono'; color:var(--blue-bright);}

/* ---------- TEMOIGNAGES ---------- */
.testi-card{border:1px solid var(--line); border-radius:14px; background:linear-gradient(160deg, rgba(124,195,242,0.045), transparent); transition:transform .2s ease, border-color .2s ease;}
.testi-card:hover{transform:translateY(-3px); border-color:var(--line-strong);}
.testi-avatar{width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid var(--line-strong); background:linear-gradient(155deg, var(--blue-deep), var(--surface-raised));}
.testi-stars{color:var(--blue-sky); display:flex; gap:2px; margin-bottom:10px;}
.testi-stars .icon-inline{width:13px; height:13px;}

/* ---------- LECTEUR DE LECONS ---------- */
.lesson-nav a{transition:all .15s ease;}
.lesson-nav a.active{background:linear-gradient(135deg, rgba(74,144,217,0.16), rgba(124,195,242,0.08)); border-color:var(--line-strong) !important; color:var(--ink);}
.lesson-nav a.active .n{color:var(--blue-bright);}
.lesson-nav a:not(.active):hover{background:rgba(124,195,242,0.05);}
.lesson-nav a.locked{opacity:0.45; cursor:not-allowed;}
.lesson-nav a .icon-inline{opacity:0.6;}

.lesson-content{transition:opacity 0.28s ease, transform 0.28s ease;}
.lesson-content.switching{opacity:0; transform:translateY(10px);}
.lesson-tip{border-left:3px solid var(--blue-sky); background:rgba(74,144,217,0.08); border-radius:0 10px 10px 0;}
.lesson-tip strong{color:var(--blue-sky); font-family:'IBM Plex Mono'; letter-spacing:0.03em;}
.lf-btn{transition:all .15s ease;}
.lf-btn:hover:not([disabled]){color:var(--ink); border-color:var(--blue-bright); box-shadow:var(--glow-blue);}
.lf-btn[disabled]{opacity:0.3; pointer-events:none;}

/* ---------- RESULTATS (succes / echec / attente) ---------- */
.result-icon{width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 22px;}
.result-icon.success{background:rgba(74,144,217,0.14); border:1px solid rgba(124,195,242,0.45); color:var(--blue-sky); box-shadow:0 0 30px rgba(74,144,217,0.2);}
.result-icon.warning{background:rgba(255,107,107,0.1); border:1px solid rgba(255,107,107,0.35); color:#FF8A8A;}
.result-icon.neutral{background:rgba(124,195,242,0.08); border:1px solid var(--line-strong); color:var(--blue-sky);}
.result-icon .icon-inline{width:30px; height:30px;}

/* ---------- CHECKOUT : spinner ---------- */
.spinner{width:52px; height:52px; border-radius:50%; border:3px solid var(--line-strong); border-top-color:var(--blue-bright); animation:spin 0.9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.icon-spin{animation:spin 0.8s linear infinite;}

/* ---------- LECTEUR DE LECONS : verrouillage sequentiel ---------- */
.lesson-nav a.locked{cursor:not-allowed; opacity:0.55;}
.lesson-nav a.locked:hover{background:transparent !important; border-color:transparent !important;}

/* ---------- PROMOTIONS (badge + prix barre) ---------- */
.promo-badge{display:inline-block; vertical-align:middle; background:linear-gradient(135deg, var(--blue-mid), var(--blue-bright)); color:#fff; font-family:'IBM Plex Mono', monospace; font-size:0.68em; font-weight:700; letter-spacing:0.02em; padding:2px 7px; border-radius:999px; margin-right:7px;}
.promo-final{vertical-align:middle;}
.promo-original{vertical-align:middle; font-size:0.72em; font-weight:400; color:#5B6C87; text-decoration:line-through; margin-left:7px;}

/* ---------- ASSISTANT IA PAR FORMATION ---------- */
#ai-chat-messages{max-height:420px; overflow-y:auto;}
.ai-chat-bubble{max-width:80%; padding:10px 14px; border-radius:12px; font-size:0.875rem; line-height:1.55; white-space:pre-wrap;}
.ai-chat-bubble-user{align-self:flex-end; background:linear-gradient(135deg, rgba(74,144,217,0.22), rgba(124,195,242,0.12)); color:var(--ink); border:1px solid rgba(124,195,242,0.25);}
.ai-chat-bubble-assistant{align-self:flex-start; background:rgba(124,195,242,0.05); color:var(--ink-dim); border:1px solid var(--line);}

/* ---------- FILTRES / RECHERCHE (catalogue) ---------- */
.filter-pill{color:var(--ink-dim); border-color:var(--line-strong) !important; transition:all .18s ease;}
.filter-pill:hover{border-color:var(--blue-bright) !important; color:var(--ink);}
.filter-pill.active-filter{border-color:var(--blue-sky) !important; color:var(--ink); background:rgba(74,144,217,0.12); box-shadow:0 0 24px rgba(74,144,217,0.2);}

.search-bar{border:1px solid var(--line-strong); border-radius:12px; background:rgba(124,195,242,0.04); transition:border-color .18s ease, box-shadow .18s ease;}
.search-bar:focus-within{border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(74,144,217,0.14);}
.search-bar input{background:transparent; border:none; outline:none; color:var(--ink); width:100%;}
.search-bar input::placeholder{color:var(--ink-faint);}
.search-bar .icon-inline{color:var(--ink-faint); flex-shrink:0;}

.sort-select{border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink-dim); transition:border-color .18s ease;}
.sort-select:focus{border-color:var(--blue-bright); outline:none;}

/* ---------- CTA BAND / FOOTER ---------- */
.cta-band{position:relative; background:radial-gradient(ellipse at top, rgba(74,144,217,0.1), transparent 65%);}

/* ---------- UTILITAIRES DIVERS ---------- */
.divider-fade{height:1px; background:linear-gradient(90deg, transparent, var(--line-strong), transparent);}