/* Skipia — Liquid glass.
   Couche partagée, chargée en dernier (juste avant </head>) pour surcharger les styles de page.
   Pages : accueil, formations, pages métier, pages locales, blog. La navbar a son propre verre (navbar.css).

   Recette : remplissage translucide + flou d'arrière-plan saturé + reflet spéculaire (inset)
   + liseré clair. Des halos de couleur de marque derrière les sections donnent au verre
   quelque chose à réfracter. */

:root {
    --lg-fill: linear-gradient(150deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.56) 100%);
    --lg-fill-hover: linear-gradient(150deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.66) 100%);
    --lg-rim: rgba(255,255,255,.8);
    --lg-edge: 0 0 0 1px rgba(15,23,42,.06);
    --lg-spec:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 1px 0 0 rgba(255,255,255,.45),
        inset 0 -1px 0 rgba(255,255,255,.35),
        inset 0 0 24px rgba(255,255,255,.5);
    --lg-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 34px -14px rgba(30,41,59,.2);
    --lg-shadow-hover: 0 2px 4px rgba(15,23,42,.05), 0 24px 48px -16px rgba(30,41,59,.28);
    --lg-blur: blur(18px) saturate(180%);

    --lg-dark-fill: linear-gradient(150deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 100%);
    --lg-dark-rim: rgba(255,255,255,.2);
    --lg-dark-spec:
        inset 0 1px 0 rgba(255,255,255,.38),
        inset 0 -1px 0 rgba(255,255,255,.08),
        inset 0 0 18px rgba(255,255,255,.07);
    --lg-dark-shadow: 0 10px 30px -12px rgba(0,0,0,.55);
}

/* ===== Halos de couleur (sections claires) ===== */
.pillars, .proofs, .method, .section.alt, .section-alt, .articles-wrap, .end-cta {
    background:
        radial-gradient(42rem 28rem at 4% 6%, rgba(30,64,175,.10), transparent 70%),
        radial-gradient(36rem 26rem at 98% 40%, rgba(233,69,96,.08), transparent 70%),
        radial-gradient(44rem 26rem at 42% 104%, rgba(245,158,11,.11), transparent 70%),
        var(--gray-50, #F8FAFC);
}
.bootcamps, .about, .book, .section:not(.alt), .related-wrap {
    background:
        radial-gradient(38rem 24rem at 96% 4%, rgba(30,64,175,.07), transparent 70%),
        radial-gradient(34rem 24rem at 2% 96%, rgba(245,158,11,.08), transparent 70%),
        #fff;
}

/* ===== Halos animés derrière les sections sombres ===== */
.hero, .manifesto, .cta-band { position: relative; isolation: isolate; overflow: hidden; }
.hero::before, .hero::after,
.manifesto::before, .manifesto::after,
.cta-band::before, .cta-band::after {
    content: ""; position: absolute; z-index: -1;
    border-radius: 50%; pointer-events: none;
    will-change: transform;
}
.hero::before, .manifesto::before, .cta-band::before {
    width: 560px; height: 560px; top: -200px; right: -60px;
    background: radial-gradient(closest-side, rgba(233,69,96,.38), rgba(233,69,96,0));
    animation: lg-drift-a 26s ease-in-out infinite alternate;
}
.hero::after, .manifesto::after, .cta-band::after {
    width: 640px; height: 640px; bottom: -340px; left: 18%;
    background: radial-gradient(closest-side, rgba(59,130,246,.42), rgba(59,130,246,0));
    animation: lg-drift-b 32s ease-in-out infinite alternate;
}
.manifesto::before { top: 30%; right: -220px; }
.cta-band::before { background: radial-gradient(closest-side, rgba(245,158,11,.3), rgba(245,158,11,0)); }
@keyframes lg-drift-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-90px, 70px, 0) scale(1.1); }
    100% { transform: translate3d(-30px, -30px, 0) scale(.94); }
}
@keyframes lg-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(140px, -60px, 0) scale(1.08); }
    100% { transform: translate3d(-60px, -20px, 0) scale(1); }
}

/* ===== Verre clair : cartes ===== */
.pillar, .one-on-one, .build,
.uc, .pair-col, .prog-list li, .format-card, .frame-card, .price-box, .proof,
.card, .faq details,
.article-card, .related-card, .toc {
    background: var(--lg-fill);
    border: 1px solid var(--lg-rim);
    box-shadow: var(--lg-edge), var(--lg-spec), var(--lg-shadow);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
}
.pillar:hover, .one-on-one:hover, .uc:hover, .card:hover,
.article-card:hover, .related-card:hover {
    background: var(--lg-fill-hover);
    border-color: rgba(255,255,255,.95);
    box-shadow: var(--lg-edge), var(--lg-spec), var(--lg-shadow-hover);
}
.pillar .meta { border-top-color: rgba(15,23,42,.08); }
.faq details[open] { border-color: rgba(217,119,6,.45); }

/* ===== Verre clair : pastilles et contrôles ===== */
.btn-outline,
.builds-pills button, .builds-btn,
.about-meta span, .prereq span, .zones span, .related a {
    background: var(--lg-fill);
    border-color: var(--lg-rim);
    box-shadow: var(--lg-edge), inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 12px rgba(255,255,255,.5), 0 4px 12px -6px rgba(30,41,59,.18);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
}
.builds-pills button[aria-current="true"] {
    background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 55%), var(--blue, #1E40AF);
    border-color: rgba(255,255,255,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.18), 0 6px 16px -6px rgba(30,64,175,.55);
}

/* ===== Verre sombre : héros, manifeste, bandeaux CTA ===== */
.btn-ghost, .hero-meta span, .hero-badge, .manifesto-item {
    background: var(--lg-dark-fill);
    border: 1px solid var(--lg-dark-rim);
    box-shadow: var(--lg-dark-spec), var(--lg-dark-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
}
.btn-ghost:hover, .manifesto-item:hover {
    background: linear-gradient(150deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 100%);
    border-color: rgba(255,255,255,.3);
}
.price-hero {
    background: linear-gradient(150deg, rgba(245,158,11,.24) 0%, rgba(245,158,11,.06) 100%);
    border-color: rgba(251,191,36,.42);
    box-shadow: inset 0 1px 0 rgba(255,236,179,.4), inset 0 0 18px rgba(251,191,36,.1), var(--lg-dark-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
}

/* ===== Boutons : capsules liquides ===== */
.btn { border-radius: 999px; }
.btn-amber {
    background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 52%), linear-gradient(135deg, #D97706, #F59E0B);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(146,64,14,.25), 0 8px 22px rgba(217,119,6,.34);
}
.btn-amber:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 6px rgba(146,64,14,.25), 0 12px 30px rgba(217,119,6,.46);
}
.end-cta-btn {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%), var(--dark, #0F172A);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.3), 0 10px 24px -10px rgba(15,23,42,.45);
}
.skipia-nav:not(.scrolled) .nav-cta {
    background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 55%), #2563EB;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.22), 0 8px 20px rgba(0,0,0,.35);
}
.method-grid .step .num {
    box-shadow: inset 0 2px 3px rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.2), 0 8px 18px -6px rgba(15,23,42,.35);
    background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
}

/* ===== Accessibilité et repli ===== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --lg-fill: linear-gradient(150deg, #fff, rgba(255,255,255,.9));
        --lg-dark-fill: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
    }
}
@media (prefers-reduced-transparency: reduce) {
    :root {
        --lg-fill: #fff;
        --lg-fill-hover: #fff;
        --lg-dark-fill: #1E293B;
        --lg-blur: none;
    }
    .btn-ghost, .hero-meta span, .hero-badge, .manifesto-item, .price-hero {
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero::before, .hero::after,
    .manifesto::before, .manifesto::after,
    .cta-band::before, .cta-band::after { animation: none; }
}