@import url('./sbi-background.css?v=8.0P.31');
@import url('./sbi-signals.css?v=8.0P.42');
@import url('./sbi-mobile.css?v=8.0P.13');

/* --- SECTION 1 : VARIABLES & TYPOGRAPHIE --- */
:root {
    --bg-dark: #050913;
    --bg-surface: #0a1120;
    --bg-card: #0d1526;
    --border-color: #26324c;
    --sbi-blue: #0051ff;
    --sbi-blue-hover: #003cc2;
    --text-light: #ffffff;
    --text-muted: #8a93a6;
    
    --font-sans: 'Inter', sans-serif;
    
    --space-xl: clamp(4rem, 8vw, 6rem);
    --space-md: 2rem;
    --header-height: 80px;
}

/* --- SECTION 2 : RESET & BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    font-family: var(--font-sans);
    background: var(--bg-dark);
    color: var(--text-light);
}
body {
    overflow-x: hidden;
    line-height: 1.5;
    position: relative;
    min-height: 100vh;
    padding-right: var(--sbi-scrollbar-compensation, 0px);
}

@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}

a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.uppercase { text-transform: uppercase; font-weight: 900; }
.text-blue { color: var(--sbi-blue); }
.bg-blue { background-color: var(--sbi-blue); }
.text-italic { font-style: italic; }



main,
footer {
    position: relative;
    z-index: 2;
}

.padding-global { padding-left: 5%; padding-right: 5%; }
.flex-between { display: flex; justify-content: space-between; align-items: flex-end; }
.link-blue {
    color: var(--sbi-blue);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.link-blue:hover { color: var(--text-light); }

/* --- SECTION 3 : BOUTONS & ICONES --- */
.btn-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--sbi-blue);
    color: white;
    padding: 0.78rem 1.75rem;
    padding-right: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}

.btn-primary::before {
    content: none;
}

.btn-primary .arrow {
    position: relative;
    z-index: 2;
    transform: translateY(1px);
}

.btn-primary:hover {
    transform: translateY(-2px);
    background: var(--sbi-blue-hover);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.btn-ghost {
    color: var(--text-light);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-ghost .play-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--text-light);
    color: var(--text-light);
}
.btn-ghost:hover { color: var(--sbi-blue); }
.btn-ghost:hover .play-icon {
    border-color: var(--sbi-blue);
    color: var(--sbi-blue);
}


.btn-ghost[aria-disabled="true"] {
    opacity: 0.58;
    cursor: not-allowed;
}

.sbi-hero-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background:
        radial-gradient(circle at 50% 18%, rgba(42, 87, 255, 0.18), transparent 34%),
        rgba(2, 4, 12, 0.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    will-change: opacity;
}

.sbi-hero-video-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.sbi-hero-video-modal {
    position: relative;
    width: min(1120px, 100%);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.sbi-hero-video-overlay.is-open .sbi-hero-video-modal {
    opacity: 1;
}

.sbi-hero-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #02040c;
    border: 1px solid rgba(42, 87, 255, 0.48);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.62),
        0 0 46px rgba(42, 87, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.sbi-hero-video-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 2;
}

.sbi-hero-video-frame iframe {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #02040c;
    opacity: 1;
}

.sbi-hero-video-loader {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    color: #c7d2fe;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 50% 35%, rgba(42, 87, 255, 0.22), transparent 44%),
        #02040c;
}

.sbi-hero-video-loader::before {
    content: '';
    width: 26px;
    height: 26px;
    margin-right: 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: rgba(42, 87, 255, 0.95);
    border-radius: 999px;
    animation: sbiHeroVideoSpin 0.9s linear infinite;
}

@keyframes sbiHeroVideoSpin {
    to { transform: rotate(360deg); }
}

.sbi-hero-video-fallback {
    display: inline-flex;
    margin-top: 0.9rem;
    color: #8fb2ff;
    font-size: 0.78rem;
    font-weight: 900;
    font-style: italic;
    text-decoration: none;
}

.sbi-hero-video-fallback:hover,
.sbi-hero-video-fallback:focus-visible {
    color: #fff;
    outline: none;
}

.sbi-hero-video-fallback[hidden] {
    display: none;
}

.sbi-hero-video-close {
    position: fixed;
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    z-index: 2147483001;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(5, 8, 18, 0.86);
    color: #fff;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.sbi-hero-video-close:hover,
.sbi-hero-video-close:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(42, 87, 255, 0.72);
    background: rgba(42, 87, 255, 0.18);
    outline: none;
}

body.sbi-hero-video-overlay-lock {
    overflow: hidden;
}

@media (max-width: 720px) {
    .sbi-hero-video-overlay {
        padding: 0.8rem;
    }

    .sbi-hero-video-close {
        width: 42px;
        height: 42px;
        font-size: 1.7rem;
    }

    .sbi-hero-video-frame {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    }
}

.btn-icon {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}
.btn-icon:hover { color: var(--sbi-blue); }

/* --- SECTION 4 : HEADER --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    background: rgba(4, 5, 8, 0.85);
    backdrop-filter: blur(12px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.site-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
}

.header-logo-link {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.header-logo { height: 45px; object-fit: contain; }
.header-brand {
    height: 34px;
    object-fit: contain;
    max-width: 300px;
}

.main-nav { display: flex; gap: clamp(1rem, 1.8vw, 2rem); }
.nav-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
}
.nav-link:hover { color: var(--sbi-blue); }

.header-actions {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 1.4vw, 1.5rem);
}

@media (max-width: 1320px) {
    .site-header {
        padding-left: 4%;
        padding-right: 4%;
    }

    .header-brand {
        max-width: 230px;
    }

    .nav-link {
        font-size: 0.84rem;
    }

    .site-header .btn-primary {
        padding-left: 1.35rem;
        padding-right: 1.85rem;
    }
}

/* --- SECTION 5 : HERO & VIDÉO --- */
.hero-section {
    position: relative;
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    padding-top: var(--header-height);
    background-color: var(--bg-dark);
    overflow: hidden;
}


.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 1;
    filter: contrast(1.15) brightness(0.96);
}

.hero-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(4, 5, 8, 0.95) 0%, rgba(4, 5, 8, 0) 100%);
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
    align-items: center;
    flex: 1;
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.hero-surtitle {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 450px;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.hero-large-logo {
    width: 100%;
    max-width: 950px;
    display: block;
    transform: translateX(-5%);
    filter: drop-shadow(0 0 50px rgba(0, 81, 255, 0.3));
}

/* --- BARRE BAS HERO --- */
.features-bar {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: clamp(1rem, 2vw, 2rem);
    width: 100%;
    max-width: none;
    margin: auto 0 0 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: transparent;
}

.features-bar.padding-global {
    padding-left: 5%;
    padding-right: 5%;
}

.features-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
}

.features-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    min-width: 0;
}

.feature-item > div:last-child {
    min-width: 0;
}

.feature-icon {
    color: var(--sbi-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.feature-item strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.feature-item p {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* --- SECTION 6 : PARCOURS --- */
.section-parcours {
    background: transparent;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.section-surtitle {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.5rem;
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    line-height: 1.2;
    font-weight: 800;
}

.grid-parcours {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

.parcours-card {
    position: relative;
    background-color: var(--bg-card);
    background-size: cover;
    background-position: center;
    border: 1px solid #1a1e29;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 35px;
    height: 35px;
    background-color: var(--sbi-blue);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 10;
}

.card-badge::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 5px;
    height: 5px;
    background: #ffffff;
    transform: rotate(45deg);
    animation: neonPulse 2s infinite alternate ease-in-out;
}

@keyframes neonPulse {
    0% {
        opacity: 0.7;
        box-shadow: 0 0 3px 0px rgba(255,255,255,0.6), 0 0 6px 1px var(--sbi-blue);
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 8px 2px rgba(255,255,255,1), 0 0 16px 4px var(--sbi-blue);
    }
}

.parcours-card::before {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 60px;
    height: 60px;
    background: linear-gradient(
        -45deg,
        #040508 0%,
        #040508 18px,
        #000000 18px,
        #000000 36px,
        rgba(255,255,255,0.15) 36px,
        rgba(255,255,255,0.15) 37px,
        transparent 37px
    );
    z-index: 5;
    pointer-events: none;
}

.parcours-card::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 60px;
    height: 60px;
    background: linear-gradient(
        -45deg,
        #040508 0%,
        #040508 18px,
        var(--sbi-blue) 18px,
        var(--sbi-blue) 36px,
        transparent 36px
    );
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.parcours-card:hover { transform: translateY(-5px); }
.parcours-card:hover::after { opacity: 1; }

.parcours-card:nth-child(1) { background-image: url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=800&q=80'); }
.parcours-card:nth-child(2) { background-image: url('https://images.unsplash.com/photo-1526232761682-d26e03ac148e?auto=format&fit=crop&w=800&q=80'); }
.parcours-card:nth-child(3) { background-image: url('https://images.unsplash.com/photo-1504450758481-7338eba7524a?auto=format&fit=crop&w=800&q=80'); }
.parcours-card:nth-child(4) { background-image: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=800&q=80'); }

/* =========================================================
   SBI 8.0P.87 - Index formations dynamiques Firebase stabilisé
   ========================================================= */

.sbi-home-formation-card {
    --sbi-cover-x: 50%;
    --sbi-cover-y: 50%;
    --sbi-cover-image: none;
    background-image:
        linear-gradient(145deg, rgba(5, 11, 23, 0.9), rgba(2, 6, 14, 0.98)),
        radial-gradient(circle at 72% 18%, rgba(0, 81, 255, 0.28), transparent 12rem) !important;
}

.sbi-home-formation-card::before {
    z-index: 5;
}

.sbi-home-formation-card.has-cover-image {
    background-image:
        linear-gradient(to top, rgba(4, 5, 8, 0.30) 0%, rgba(4, 5, 8, 0.03) 72%),
        var(--sbi-cover-image) !important;
    background-position: center, var(--sbi-cover-x) var(--sbi-cover-y) !important;
    background-size: cover, cover !important;
}

.sbi-home-formation-card.has-cover-image .card-mask {
    background: linear-gradient(to top, rgba(4, 5, 8, 0.22) 0%, rgba(4, 5, 8, 0.00) 70%);
}

.sbi-home-formation-card:not(.has-cover-image) .card-mask::after {
    content: "SBI";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.05);
    font-size: clamp(4rem, 6vw, 7rem);
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.12em;
}

.sbi-home-formation-card.is-coming-soon {
    cursor: default;
    filter: saturate(0.78);
}

.sbi-home-formation-card.is-coming-soon .arrow {
    display: none;
}

.sbi-home-formation-card.is-coming-soon .public-formation-kicker,
.sbi-home-formation-card .public-formation-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 0.75rem;
    padding: 0.32rem 0.58rem;
    border: 1px solid rgba(126, 181, 255, 0.28);
    background: rgba(2, 8, 20, 0.62);
    color: #cfe2ff;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sbi-home-formation-card.is-selected {
    transform: translateY(-6px);
    border-color: rgba(0, 81, 255, 0.72);
    box-shadow: 0 22px 70px rgba(0, 81, 255, 0.13);
}

.sbi-home-formation-preview {
    margin-top: 1.35rem;
    border: 1px solid rgba(126, 181, 255, 0.2);
    background:
        linear-gradient(145deg, rgba(10, 18, 33, 0.86), rgba(3, 7, 14, 0.94)),
        radial-gradient(circle at 92% 0%, rgba(0, 81, 255, 0.2), transparent 22rem);
    padding: clamp(1.2rem, 2.5vw, 2rem);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.sbi-home-formation-preview[hidden] {
    display: none !important;
}

.sbi-home-formation-preview h3 {
    margin-top: 0.35rem;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1;
}

.sbi-home-formation-preview p {
    max-width: 820px;
    margin-top: 0.8rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.sbi-home-formation-preview-meta,
.sbi-home-formation-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1rem;
}

.sbi-home-formation-preview-meta span {
    padding: 0.45rem 0.72rem;
    border: 1px solid rgba(126, 181, 255, 0.2);
    background: rgba(255, 255, 255, 0.035);
    color: #d7e7ff;
    font-size: 0.82rem;
    font-weight: 800;
}

.sbi-home-formation-preview-actions .btn-primary,
.sbi-home-formation-preview-actions .public-outline-cta {
    min-height: 46px;
}

@media (max-width: 768px) {
    .sbi-home-formation-preview-actions {
        flex-direction: column;
    }

    .sbi-home-formation-preview-actions .btn-primary,
    .sbi-home-formation-preview-actions .public-outline-cta {
        width: 100%;
        justify-content: center;
    }
}


.card-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(4, 5, 8, 0.95) 10%, rgba(4, 5, 8, 0.4) 100%);
    z-index: 1;
    pointer-events: none;
}

.card-content {
    padding: 1.5rem;
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
}

.card-content h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.card-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.course-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* --- SECTION 7 : STATS & CITATION --- */
.section-stats {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    background: transparent;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.founder-block {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.founder-img-wrapper {
    width: 40%;
    position: relative;
}

.founder-img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    filter: none;
    clip-path: polygon(50px 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px);
}

/* --- ÉCLATS DE VERRE --- */
.shard {
    position: absolute;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.105),
        rgba(0, 81, 255, 0.035) 48%,
        rgba(255, 255, 255, 0.025)
    );
    border: 1px solid rgba(255, 255, 255, 0.16);
    z-index: 3;
    overflow: hidden;
    isolation: isolate;
    contain: paint;
    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, 0.035),
        0 0 18px rgba(0, 81, 255, 0.055);
}

.shard-glint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 1;
    overflow: hidden;
    clip-path: inherit;
    transform: translateZ(0);
}

.shard-glint::before {
    content: '';
    position: absolute;
    top: -35%;
    left: -80%;
    width: 95%;
    height: 180%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.00) 18%,
        rgba(255, 255, 255, 0.04) 30%,
        rgba(255, 255, 255, 0.12) 40%,
        rgba(255, 255, 255, 0.34) 50%,
        rgba(170, 220, 255, 0.18) 57%,
        rgba(255, 255, 255, 0.08) 64%,
        transparent 78%
    );
    filter: blur(7px);
    opacity: 0;
    transform: translate3d(-35%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-8deg);
    animation: shardSweep 8.5s infinite ease-in-out;
    animation-delay: var(--glint-delay, 0s);
}

.shard-glint::after {
    content: '';
    position: absolute;
    top: -45%;
    left: -95%;
    width: 130%;
    height: 220%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.00) 24%,
        rgba(120, 190, 255, 0.05) 38%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(120, 190, 255, 0.07) 60%,
        transparent 76%
    );
    filter: blur(16px);
    opacity: 0;
    transform: translate3d(-28%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-10deg);
    animation: shardSweepSoft 8.5s infinite ease-in-out;
    animation-delay: var(--glint-delay, 0s);
}

.shard-1 .shard-glint {
    --glint-rotate: -18deg;
    --glint-delay: 0.7s;
}

.shard-2 .shard-glint {
    --glint-rotate: -12deg;
    --glint-delay: 3.1s;
}

.shard-4 .shard-glint {
    --glint-rotate: -15deg;
    --glint-delay: 5s;
}

.delay-glint {
    --glint-delay: 5s;
}

@keyframes shardSweep {
    0%, 62% {
        opacity: 0;
        transform: translate3d(-40%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-8deg);
    }
    68% {
        opacity: 0.18;
        transform: translate3d(-18%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-8deg);
    }
    76% {
        opacity: 0.95;
        transform: translate3d(42%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-8deg);
    }
    84% {
        opacity: 0.35;
        transform: translate3d(82%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-8deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(110%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-8deg);
    }
}

@keyframes shardSweepSoft {
    0%, 60% {
        opacity: 0;
        transform: translate3d(-32%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-10deg);
    }
    68% {
        opacity: 0.10;
        transform: translate3d(-8%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-10deg);
    }
    76% {
        opacity: 0.45;
        transform: translate3d(38%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-10deg);
    }
    86% {
        opacity: 0.14;
        transform: translate3d(76%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-10deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(105%, 0, 0) rotate(var(--glint-rotate, -16deg)) skewX(-10deg);
    }
}

.shard-1 {
    top: -20px;
    left: -20px;
    width: 60px;
    height: 80px;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    animation: shardFloat 6s infinite ease-in-out;
}

.shard-2 {
    bottom: -30px;
    right: -10px;
    width: 90px;
    height: 70px;
    background: linear-gradient(135deg, rgba(0, 81, 255, 0.12), rgba(255, 255, 255, 0.026));
    border-color: rgba(0, 81, 255, 0.2);
    clip-path: polygon(0% 0%, 100% 40%, 40% 100%);
    animation: shardFloat 8s infinite ease-in-out reverse;
    z-index: -1;
}

.shard-4 {
    bottom: 20px;
    left: -30px;
    width: 70px;
    height: 50px;
    clip-path: polygon(0 40%, 100% 0, 80% 100%);
    animation: shardFloat 7s infinite ease-in-out 1s;
}

.quote-content {
    width: 60%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 3rem;
    border-radius: 2px;
    position: relative;
}

.quote-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 40px solid var(--sbi-blue);
    border-left: 40px solid transparent;
}

.shard-3 {
    top: 30%;
    right: -20px;
    width: 40px;
    height: 40px;
    background: var(--sbi-blue);
    border: none;
    backdrop-filter: none;
    overflow: visible;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: shardFloat 5s infinite ease-in-out 2s;
}

.shard-3::after {
    content: '';
    position: absolute;
    top: 17px;
    left: 17px;
    width: 6px;
    height: 6px;
    background: #fff;
    transform: rotate(45deg);
    animation: neonPulse 2s infinite alternate ease-in-out;
}

.quote-mark {
    font-size: 6rem;
    font-family: serif;
    line-height: 0;
    position: absolute;
    top: 3rem;
    left: -1rem;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(0, 81, 255, 0.6);
    animation: holoBreath 3s infinite alternate ease-in-out;
}

@keyframes holoBreath {
    0% {
        text-shadow: 0 0 5px rgba(0, 81, 255, 0.2);
        -webkit-text-stroke-color: rgba(0, 81, 255, 0.4);
    }
    100% {
        text-shadow: 0 0 15px rgba(0, 81, 255, 0.8);
        -webkit-text-stroke-color: rgba(0, 162, 255, 0.9);
    }
}

.quote-content blockquote {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.3;
    margin-top: 1rem;
    position: relative;
    z-index: 2;
}

.quote-sub {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 2;
}

.quote-author {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quote-author span {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.signature-text {
    font-family: 'Great Vibes', cursive;
    font-size: 2.8rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.3);
    transform: rotate(-3deg);
    transform-origin: left;
    animation: signNeon 4s infinite alternate ease-in-out;
}

@keyframes signNeon {
    0% {
        color: rgba(255, 255, 255, 0.3);
        text-shadow: none;
    }
    50% {
        color: rgba(255, 255, 255, 0.5);
        text-shadow: 0 0 5px rgba(0, 81, 255, 0.3);
    }
    100% {
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 0 0 10px rgba(0, 81, 255, 0.8), 0 0 20px rgba(0, 81, 255, 0.4);
    }
}

@keyframes shardFloat {
    0%   { transform: translateY(0) rotate(0deg); }
    50%  { transform: translateY(-15px) rotate(10deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* --- NOUVEAU BLOC CALCULATEUR --- */
.calculator-cta-box {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    display: block;
    overflow: visible;
    border-radius: 0;
    margin-top: clamp(2.75rem, 4vw, 4rem);
}

.calculator-panel {
    --panel-slant: 76px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34%;
    min-height: 315px;
    background:
        radial-gradient(circle at 18% 14%, rgba(0, 81, 255, 0.10), transparent 32%),
        linear-gradient(180deg, rgba(14, 20, 34, 0.98), rgba(10, 14, 23, 0.98));
    border: 1px solid rgba(0, 81, 255, 0.34);
    border-radius: 2px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 18px 46px rgba(0, 0, 0, 0.24),
        0 0 34px rgba(0, 81, 255, 0.07);
}

.calculator-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.035), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 42%);
    opacity: 0.75;
}

.calculator-panel-main {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.05rem calc(2.25rem + var(--panel-slant)) 1.8rem 2.25rem;
}

.calculator-panel-side {
    position: relative;
    z-index: 3;
    margin-left: calc(var(--panel-slant) * -1);
    padding: 2rem 1.8rem 2rem calc(var(--panel-slant) + 1.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(20, 28, 46, 0.96), rgba(14, 21, 36, 0.97));
    clip-path: polygon(var(--panel-slant) 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
}

.calculator-panel-side::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--panel-slant) + 4px);
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 1px),
        rgba(0, 81, 255, 0.48) 50%,
        transparent calc(50% + 1px)
    );
    opacity: 0.75;
    pointer-events: none;
}

.calculator-panel-side::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 81, 255, 0.18) 0.8px, transparent 0.8px);
    background-size: 13px 13px;
    opacity: 0.13;
    pointer-events: none;
}

.calculator-side-icon {
    position: relative;
    z-index: 2;
    color: var(--sbi-blue);
    opacity: 0.92;
    filter: drop-shadow(0 0 4px rgba(0, 81, 255, 0.10));
}

.calculator-side-icon::before {
    content: none;
}

.cta-main-content {
    margin-bottom: 1.45rem;
}

.display-amount {
    position: relative;
    display: inline-block;
    font-size: clamp(4rem, 5.6vw, 5.2rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.055em;
    color: #ffffff;
    margin: 0.45rem 0 1rem;
    text-shadow:
        0 0 18px rgba(0, 81, 255, 0.32),
        0 0 48px rgba(0, 81, 255, 0.18);
}

.display-amount::after {
    content: '';
    position: absolute;
    left: 0.08em;
    right: 0.18em;
    bottom: -0.02em;
    height: 0.22em;
    background: radial-gradient(ellipse at center, rgba(0, 81, 255, 0.28), transparent 70%);
    filter: blur(10px);
    opacity: 0.75;
    z-index: -1;
}

.display-amount .asterisk {
    color: var(--sbi-blue);
    font-size: 2rem;
    vertical-align: top;
    margin-left: 0.12rem;
    text-shadow: 0 0 14px rgba(0, 81, 255, 0.55);
}

.cta-description {
    font-size: 1.02rem;
    max-width: 520px;
    margin-bottom: 0;
    line-height: 1.42;
}

.cta-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.35rem;
}

.benefit-tag {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(0, 81, 255, 0.36);
    background: rgba(0, 81, 255, 0.045);
    color: #dce7ff;
    border-radius: 2px;
}

.benefit-tag-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.benefit-tag-icon svg {
    color: var(--sbi-blue);
    flex: 0 0 auto;
    filter: drop-shadow(0 0 6px rgba(0, 81, 255, 0.28));
}

.btn-calc-neon {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.72rem;
    width: 100%;
    padding: 1.12rem 1.45rem;
    padding-right: 2.9rem;
    background: var(--sbi-blue);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    text-align: center;
    font-weight: 800;
    border-radius: 2px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
    transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}

.btn-calc-neon::before {
    content: none;
}

.btn-calc-neon span {
    position: relative;
    z-index: 2;
}

.btn-calc-neon .arrow {
    transform: translateY(1px);
}

.btn-calc-neon:hover {
    transform: translateY(-2px);
    background: var(--sbi-blue-hover);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.30);
}

.cta-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1rem;
}

.shard-cta {
    top: -28px;
    right: -22px;
    width: 112px;
    height: 96px;
    clip-path: polygon(14% 0, 100% 22%, 74% 100%);
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255,255,255,0.05);
    opacity: 0.82;
    animation: shardFloat 6s infinite ease-in-out;
    transform: rotate(7deg);
}

@media (max-width: 1180px) {
    .calculator-cta-box {
        margin-top: 0;
    }

    .calculator-panel {
        grid-template-columns: 1fr;
    }

    .calculator-panel-main {
        padding: 1.9rem 1.8rem 1.6rem;
    }

    .calculator-panel-side {
        margin-left: 0;
        padding: 1.6rem;
        min-height: 150px;
        clip-path: none;
        border-top: 1px solid rgba(0, 81, 255, 0.24);
    }

    .calculator-panel-side::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .display-amount {
        font-size: 3.35rem;
    }

    .cta-description {
        max-width: none;
    }

    .benefit-tag {
        width: 100%;
        justify-content: flex-start;
    }

    .btn-calc-neon {
        font-size: 0.96rem;
        padding: 1rem 1rem;
        padding-right: 2.35rem;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
    }
}

@media (max-width: 560px) {
    .calculator-panel {
        min-height: auto;
    }

    .calculator-panel-main {
        padding: 1.5rem 1.2rem 1.35rem;
    }

    .calculator-panel-side {
        min-height: 128px;
        padding: 1rem;
    }

    .display-amount {
        font-size: 3.05rem;
    }

    .btn-calc-neon {
        font-size: 0.9rem;
        gap: 0.55rem;
    }
}


/* SBI 8.0P.13 - raccord visuel fondateur/aide -> Qualiopi */
.section-stats {
    padding-bottom: clamp(1.2rem, 2.4vw, 2rem);
    margin-bottom: 0;
}

.section-stats + .section-qualiopi,
.section-stats + .sbi-qualiopi-section {
    margin-top: -1.5rem;
}

/* --- SECTION 8 : NEWSLETTER --- */
.section-newsletter {
    padding-bottom: var(--space-xl);
    background: transparent;
}

.newsletter-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 2.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.news-text {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.news-icon {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--sbi-blue);
    color: white;
}

.news-text h3 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.news-text p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.news-form {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}

.news-form input {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: white;
    padding: 0.75rem 1rem;
    outline: none;
}

.news-form input:focus { border-color: var(--sbi-blue); }

/* --- SECTION 9 : FOOTER --- */
.site-footer {
    position: relative;
    padding-top: 4rem;
    padding-bottom: 2rem;
    background: var(--bg-dark);
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 2rem;
}

.footer-logo {
    height: 80px;
    margin-bottom: 1rem;
    object-fit: contain;
}

.brand-tagline {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.footer-links h4,
.footer-social h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

.footer-links a {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: #fff;
}

.footer-links a:hover { color: var(--sbi-blue); }

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.social-icons a:hover { color: var(--sbi-blue); }

/* =========================================================
   SBI 8.0P.37 - PJAX page fade, hero exit preserved
   ========================================================= */
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"] [data-sbi-public-shell-root] {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }

    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-loading [data-sbi-public-shell-root] {
        opacity: 0;
        transform: translateY(12px);
    }


    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-leaving-home .hero-video-bg,
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-leaving-home .hero-gradient-overlay,
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-leaving-home .hero-content,
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-leaving-home .hero-visual,
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-leaving-home .features-bar {
        opacity: 0;
        transition: opacity 300ms ease;
    }
}

@media (prefers-reduced-motion: reduce), (max-width: 768px) {
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"] [data-sbi-public-shell-root] {
        transition: none;
    }
}



/* =========================================================
   SBI 8.0P.39 - Desktop hero feature band full-width alignment
   PC only: keeps hero content/video/logo untouched, aligns the band itself.
   ========================================================= */
@media (min-width: 1025px) {
    .hero-section > .features-bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        z-index: 4;
        flex: 0 0 auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: stretch;
        justify-items: center;
        gap: 0 clamp(1rem, 2.1vw, 2.75rem);
        padding-left: 5%;
        padding-right: 5%;
        background: linear-gradient(180deg, rgba(4, 5, 8, 0.88) 0%, rgba(4, 5, 8, 0.97) 100%);
    }

    .hero-section > .features-bar .feature-item {
        width: max-content;
        max-width: 100%;
    }

    .hero-section > .features-bar .feature-item:first-child {
        justify-self: start;
    }

    .hero-section > .features-bar .feature-item:last-child {
        justify-self: end;
    }
}

@media (min-width: 1025px) and (max-width: 1380px) {
    .hero-section > .features-bar {
        gap: 0 clamp(0.75rem, 1.4vw, 1.5rem);
        padding-left: clamp(2rem, 4vw, 4rem);
        padding-right: clamp(2rem, 4vw, 4rem);
    }

    .hero-section > .features-bar .feature-item {
        width: auto;
    }

    .hero-section > .features-bar .feature-item:first-child,
    .hero-section > .features-bar .feature-item:last-child {
        justify-self: center;
    }
}

/* =========================================================
   SBI 8.0P.40 - Desktop hero band spacing + logo containment
   PC only: keeps mobile untouched, prevents the hero logo from sliding under the band.
   ========================================================= */
@media (min-width: 1025px) {
    .hero-large-logo {
        width: min(100%, 950px, calc(100vh - var(--header-height) - 10.75rem));
        max-width: min(950px, calc(100vh - var(--header-height) - 10.75rem));
        height: auto;
        object-fit: contain;
    }

    .hero-section > .features-bar {
        display: flex;
        grid-template-columns: none;
        align-items: flex-start;
        justify-content: space-between;
        gap: clamp(2rem, 4.4vw, 6rem);
        padding-left: 5%;
        padding-right: 5%;
    }

    .hero-section > .features-bar .feature-item {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        justify-self: auto;
    }

    .hero-section > .features-bar .feature-item:first-child,
    .hero-section > .features-bar .feature-item:last-child {
        justify-self: auto;
    }
}

@media (min-width: 1025px) and (max-width: 1380px) {
    .hero-large-logo {
        width: min(100%, 860px, calc(100vh - var(--header-height) - 10.25rem));
        max-width: min(860px, calc(100vh - var(--header-height) - 10.25rem));
    }

    .hero-section > .features-bar {
        justify-content: space-between;
        gap: clamp(1.25rem, 2.8vw, 3rem);
        padding-left: clamp(2rem, 5vw, 4rem);
        padding-right: clamp(2rem, 5vw, 4rem);
    }

    .hero-section > .features-bar .feature-item:first-child,
    .hero-section > .features-bar .feature-item:last-child {
        justify-self: auto;
    }
}


/* =========================================================
   SBI 8.0P.41 - Desktop hero band transparency + logo safe clearance
   PC only: keeps the centered full-width band, removes its fill,
   and keeps the hero logo clear of the band on shorter desktop screens.
   ========================================================= */
@media (min-width: 1025px) {
    .hero-large-logo {
        width: min(100%, 950px, calc(100vh - var(--header-height) - clamp(12.75rem, 20vh, 15.25rem)));
        max-width: min(950px, calc(100vh - var(--header-height) - clamp(12.75rem, 20vh, 15.25rem)));
        height: auto;
        object-fit: contain;
    }

    .hero-section > .features-bar {
        background: transparent;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (min-width: 1025px) and (max-width: 1380px) {
    .hero-large-logo {
        width: min(100%, 860px, calc(100vh - var(--header-height) - clamp(12.5rem, 22vh, 15.5rem)));
        max-width: min(860px, calc(100vh - var(--header-height) - clamp(12.5rem, 22vh, 15.5rem)));
    }
}


/* =========================================================
   SBI 8.0P.46 - PJAX app dissolve + progressive reveal
   ---------------------------------------------------------
   Keeps the public header persistent and makes public pages
   blend in/out instead of swapping brutally.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
    html.sbi-public-shell-ready .fade-in {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
        filter: blur(4px);
        transition:
            opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 720ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: calc(min(var(--sbi-fade-order, 0), 10) * 58ms);
        will-change: opacity, transform, filter;
    }

    html.sbi-public-shell-ready .fade-in.visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"] [data-sbi-public-shell-root] {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
        transition:
            opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 620ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform, filter;
    }

    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-loading [data-sbi-public-shell-root],
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-entering [data-sbi-public-shell-root] {
        opacity: 0;
        transform: translate3d(0, 16px, 0) scale(0.992);
        filter: blur(5px);
        pointer-events: none;
    }

    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-revealing [data-sbi-public-shell-root] {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }

    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-leaving-home .hero-video-bg,
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-leaving-home .hero-gradient-overlay,
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-leaving-home .hero-content,
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-leaving-home .hero-visual,
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-leaving-home .features-bar {
        opacity: 0;
        transform: translate3d(0, -8px, 0) scale(0.992);
        filter: blur(5px);
        transition:
            opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 540ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 540ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"] [data-sbi-public-shell-root] :where(
        .hero-content,
        .hero-visual,
        .features-bar,
        .public-page-hero-copy,
        .public-page-orbit,
        .public-track-card,
        .public-resource-card,
        .public-contact-panel,
        .aid-calc-hero,
        .aid-calc-card,
        .login-card,
        .contact-story,
        .contact-form-card,
        .contact-feature,
        .footer-shell
    ) {
        transition:
            opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 720ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform, filter;
    }

    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-loading [data-sbi-public-shell-root] :where(
        .hero-content,
        .hero-visual,
        .features-bar,
        .public-page-hero-copy,
        .public-page-orbit,
        .public-track-card,
        .public-resource-card,
        .public-contact-panel,
        .aid-calc-hero,
        .aid-calc-card,
        .login-card,
        .contact-story,
        .contact-form-card,
        .contact-feature,
        .footer-shell
    ),
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-entering [data-sbi-public-shell-root] :where(
        .hero-content,
        .hero-visual,
        .features-bar,
        .public-page-hero-copy,
        .public-page-orbit,
        .public-track-card,
        .public-resource-card,
        .public-contact-panel,
        .aid-calc-hero,
        .aid-calc-card,
        .login-card,
        .contact-story,
        .contact-form-card,
        .contact-feature,
        .footer-shell
    ) {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        filter: blur(4px);
    }

    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-revealing [data-sbi-public-shell-root] :where(.contact-story) {
        transition-delay: 80ms;
    }

    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-revealing [data-sbi-public-shell-root] :where(.contact-form-card, .hero-visual, .aid-calc-card, .login-card) {
        transition-delay: 160ms;
    }

    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-revealing [data-sbi-public-shell-root] :where(.features-bar, .contact-feature, .footer-shell) {
        transition-delay: 240ms;
    }
}


/* =========================================================
   SBI 8.0P.115 - Mobile PJAX anti-flash guard
   - Keeps the public shell hidden during mobile body swaps
   - Reveals after the synchronized CSS + page init pass
   ========================================================= */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-loading [data-sbi-public-shell-root],
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-entering [data-sbi-public-shell-root] {
        opacity: 0 !important;
        transition: none !important;
        pointer-events: none !important;
    }

    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"].sbi-public-shell-revealing [data-sbi-public-shell-root] {
        opacity: 1 !important;
        transition: opacity 160ms ease !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.sbi-public-shell-ready .fade-in,
    html.sbi-public-shell-ready .fade-in.visible,
    html.sbi-public-shell-ready body[data-sbi-public-shell="enabled"] [data-sbi-public-shell-root] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* =========================================================
   SBI 8.0P.90 - fiche formation index : styles modale partagés
   Le CSS de la fiche pleine page doit aussi exister sur l'index,
   qui ne charge pas sbi-public-pages.css.
   ========================================================= */
.public-formation-sheet {
    --public-blue: var(--sbi-blue, #0051ff);
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: clamp(0.75rem, 2vw, 1.4rem);
    background:
        radial-gradient(circle at 16% 10%, rgba(0, 81, 255, 0.22), transparent 24rem),
        radial-gradient(circle at 84% 4%, rgba(0, 201, 255, 0.14), transparent 22rem),
        rgba(1, 5, 14, 0.88);
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

html.sbi-formation-sheet-open,
body.sbi-formation-sheet-open {
    overflow: hidden;
}

html.sbi-formation-sheet-open {
    scrollbar-gutter: stable;
}

.public-formation-sheet.is-open {
    opacity: 1;
    pointer-events: auto;
}

.public-formation-sheet-shell {
    position: relative;
    width: min(1180px, 100%);
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 118, 255, 0.76) rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(126, 181, 255, 0.28);
    background:
        linear-gradient(150deg, rgba(5, 11, 24, 0.98), rgba(2, 6, 14, 0.98)),
        radial-gradient(circle at 82% 12%, rgba(0, 81, 255, 0.22), transparent 23rem);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.public-formation-sheet-shell::-webkit-scrollbar {
    width: 11px;
}

.public-formation-sheet-shell::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 81, 255, 0.035));
    border-left: 1px solid rgba(126, 181, 255, 0.08);
}

.public-formation-sheet-shell::-webkit-scrollbar-thumb {
    min-height: 72px;
    border: 3px solid rgba(3, 8, 18, 0.92);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(126, 181, 255, 0.9), rgba(0, 81, 255, 0.78));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 18px rgba(0, 81, 255, 0.16);
}

.public-formation-sheet-shell::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(214, 234, 255, 0.95), rgba(0, 118, 255, 0.9));
}

.public-formation-sheet-close {
    position: sticky;
    top: 1rem;
    z-index: 6;
    float: right;
    width: 46px;
    height: 46px;
    margin: 1rem 1rem 0 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(1, 5, 14, 0.74);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.public-formation-sheet-close:hover,
.public-formation-sheet-close:focus-visible {
    border-color: rgba(126, 181, 255, 0.72);
    outline: 2px solid rgba(126, 181, 255, 0.52);
    outline-offset: 2px;
}

.public-formation-sheet-hero {
    display: grid;
    grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr);
    min-height: clamp(360px, 48vh, 560px);
}

.public-formation-sheet-cover {
    position: relative;
    min-height: 100%;
    background:
        var(--sbi-cover-image),
        radial-gradient(circle at 40% 28%, rgba(0, 81, 255, 0.38), transparent 16rem),
        linear-gradient(135deg, rgba(0, 81, 255, 0.38), rgba(2, 6, 14, 0.94));
    background-size: cover;
    background-position: var(--sbi-cover-x, 50%) var(--sbi-cover-y, 50%);
    isolation: isolate;
}

.public-formation-sheet-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0 56%, rgba(5, 11, 24, 0.76)),
        linear-gradient(0deg, rgba(2, 6, 14, 0.58), transparent 42%);
    z-index: -1;
}

.public-formation-sheet-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 1rem;
    padding: clamp(2rem, 4.8vw, 4.8rem) clamp(1.5rem, 4.5vw, 4rem);
}

.public-formation-sheet-hero-copy h2 {
    max-width: 820px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.45rem, 6.6vw, 6.5rem);
    line-height: 0.88;
    letter-spacing: -0.075em;
    text-transform: uppercase;
}

.public-formation-sheet-hero-copy p {
    max-width: 720px;
    margin: 0;
    color: #dbeaff;
    font-size: clamp(1rem, 1.5vw, 1.28rem);
    line-height: 1.55;
}

.public-formation-sheet-body {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(1.2rem, 3.8vw, 3rem);
}

.public-formation-sheet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.public-formation-sheet-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0.48rem 0.78rem;
    border: 1px solid rgba(126, 181, 255, 0.26);
    background: rgba(255, 255, 255, 0.045);
    color: #eaf2ff;
    font-size: 0.82rem;
    font-weight: 900;
}

.public-formation-sheet .public-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    color: #fff;
    font-weight: 900;
}

.public-formation-sheet .public-formation-details {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(224, 235, 255, 0.78);
}

.public-formation-sheet .public-formation-details[hidden] {
    display: none !important;
}

.public-formation-sheet .public-formation-detail-intro,
.public-formation-sheet .public-formation-cta {
    grid-column: 1 / -1;
}

.public-formation-sheet .public-formation-detail-intro {
    margin: 0;
    padding: 0.95rem 1rem;
    border-left: 3px solid var(--public-blue);
    background: rgba(255, 255, 255, 0.035);
    color: #eaf2ff;
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.68;
}

.public-formation-sheet .public-formation-detail-block {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(126, 181, 255, 0.18);
    background: rgba(255, 255, 255, 0.035);
}

.public-formation-sheet .public-formation-detail-block h4 {
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.public-formation-sheet .public-formation-detail-block ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding-left: 1.1rem;
}

.public-formation-sheet .public-formation-detail-block li,
.public-formation-sheet .public-formation-mini-section p {
    color: rgba(224, 235, 255, 0.78);
    line-height: 1.62;
}

.public-formation-sheet .public-formation-mini-section + .public-formation-mini-section {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(126, 181, 255, 0.14);
}

.public-formation-sheet .public-formation-mini-section strong {
    display: block;
    color: #d7e7ff;
    line-height: 1.35;
}

.public-formation-sheet .public-formation-cta {
    justify-self: start;
    margin-top: 0.4rem;
}

@media (max-width: 900px) {
    .public-formation-sheet {
        padding: 0;
    }

    .public-formation-sheet-shell {
        width: 100%;
        max-height: 100%;
        border-left: 0;
        border-right: 0;
    }

    .public-formation-sheet-hero {
        grid-template-columns: 1fr;
    }

    .public-formation-sheet-cover {
        min-height: 260px;
    }

    .public-formation-sheet-cover::after {
        background: linear-gradient(0deg, rgba(5, 11, 24, 0.92), transparent 62%);
    }

    .public-formation-sheet .public-formation-details {
        grid-template-columns: 1fr;
    }
}



/* SBI 8.0P.94 - Index data safety only, visual design protected */
.sbi-home-formation-card.has-coming-cover.has-cover-image {
    background-position: center, center !important;
}