/* ================================================
   GBONHI GROUP - Styles Principaux
   Design: Dark luxury, inspiré de l'Afrique moderne
   ================================================ */

/* ---- Variables CSS (couleurs et espacements) ---- */
:root {
    --or: #f5c842;
    --or-clair: rgba(245, 200, 66, 0.15);
    --or-bord: rgba(245, 200, 66, 0.3);
    --fond: #0a0a0a;
    --fond-2: #0e0e0e;
    --fond-3: #111111;
    --fond-4: #161616;
    --texte: #f5f0e8;
    --texte-muted: #888888;
    --texte-dim: #555555;
    --bord: rgba(255, 255, 255, 0.07);
    --bord-2: rgba(255, 255, 255, 0.12);
    --transition: 0.25s ease;
    --radius: 8px;
    --radius-lg: 14px;
}

/* ---- Reset de base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--fond);
    color: var(--texte);
    line-height: 1.7;
    overflow-x: hidden;
}

/* ---- Conteneur centré ---- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ================================================
   TYPOGRAPHIE
================================================ */
h1, h2, h3, h4 {
    font-family: 'Syne', sans-serif;
    line-height: 1.15;
}

h1 { font-size: clamp(4rem, 8vw, 8rem); font-weight: 800; line-height: 1.05; }
h2 { font-size: clamp(2.6rem, 4.5vw, 4.5rem); font-weight: 700; line-height: 1.12; }
h3 { font-size: 1.4rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { color: var(--texte-muted); line-height: 1.85; }

a { text-decoration: none; color: inherit; }

/* ================================================
   BOUTONS
================================================ */
.btn {
    display: inline-block;
    padding: 0.7rem 1.8rem;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
}

.btn-gold {
    background: var(--or);
    color: #0a0a0a;
    font-weight: 600;
}

.btn-gold:hover {
    background: #e8b930;
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--texte);
    border: 1px solid var(--bord-2);
}

.btn-outline:hover {
    border-color: var(--or);
    color: var(--or);
}

/* ---- Tag de section (petite étiquette dorée) ---- */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--or);
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.section-tag::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--or);
}

/* ================================================
   NAVIGATION
================================================ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.97);
    border-bottom: 1px solid var(--bord);
    backdrop-filter: blur(10px);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    gap: 2rem;
}

/* Logo — styles définis dans la section LOGOS plus bas */

/* Liens de navigation */
.nav-links {
    display: flex;
    list-style: none;
    gap: 2.2rem;
}

.nav-links a {
    color: var(--texte-muted);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: color var(--transition);
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--texte);
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--or);
}

/* Hamburger (mobile) */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--texte);
    transition: all var(--transition);
}

/* Menu mobile */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--fond-3);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--bord);
    gap: 1rem;
}

.mobile-menu a {
    color: var(--texte-muted);
    font-size: 1rem;
}

.mobile-menu.open {
    display: flex;
}

/* ================================================
   SECTION HERO (page d'accueil)
================================================ */
.hero {
    min-height: 88vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 75% 50%, rgba(245, 200, 66, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 15% 85%, rgba(180, 100, 30, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

/* Grande lettre G en arrière-plan décoratif */
.hero-deco {
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Syne', sans-serif;
    font-size: 55vw;
    font-weight: 800;
    color: rgba(245, 200, 66, 0.025);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.hero .container {
    display: flex;
    justify-content: center;
}

.hero-content {
    max-width: 680px;
    width: 100%;
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-badge {
    display: inline-block;
    background: var(--or-clair);
    color: var(--or);
    padding: 0.4rem 1.2rem;
    border-radius: 3px;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    border: 1px solid var(--or-bord);
}

.hero h1 {
    margin-bottom: 1.5rem;
    color: var(--texte);
}

.hero h1 em {
    color: var(--or);
    font-style: normal;
}

.hero .hero-desc {
    font-size: 1.1rem;
    color: #999;
    line-height: 1.9;
    margin-bottom: 2.5rem;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.hero-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 4rem;
    justify-content: center;
}

/* Statistiques sous le hero */
.hero-stats {
    display: flex;
    gap: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--bord);
    justify-content: center;
    flex-wrap: wrap;
}

.stat-num {
    font-family: 'Syne', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--or);
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--texte-dim);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.3rem;
}

/* ================================================
   SECTION PÔLES (grille des 5 domaines)
================================================ */
.poles-section {
    padding: 6rem 0;
    background: var(--fond);
}

.poles-intro {
    margin-bottom: 3rem;
    max-width: 600px;
}

.poles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    border: 1px solid var(--bord);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bord); /* Lignes de séparation */
    gap: 1px;
}

.pole-card {
    background: var(--fond-3);
    padding: 2rem 1.5rem;
    position: relative;
    transition: background var(--transition);
    cursor: pointer;
}

.pole-card:hover {
    background: var(--fond-4);
}

.pole-card:hover .pole-emoji {
    transform: scale(1.15);
}

.pole-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: var(--or-clair);
    color: var(--or);
    font-size: 0.62rem;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pole-emoji {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 1rem;
    transition: transform var(--transition);
}

.pole-name {
    color: var(--or);
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.pole-desc {
    font-size: 0.82rem;
    color: var(--texte-muted);
    line-height: 1.7;
}

.pole-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--or);
    opacity: 0;
    transition: opacity var(--transition);
}

.pole-card:hover .pole-link {
    opacity: 1;
}

/* ================================================
   SECTION PARTICIPATION
================================================ */
.participation-section {
    padding: 6rem 0;
    background: var(--fond-2);
    border-top: 1px solid var(--bord);
    border-bottom: 1px solid var(--bord);
}

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

.participation-text h2 {
    margin-bottom: 1.5rem;
}

.participation-text p {
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* Cartes de participation */
.p-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.p-card {
    background: var(--fond-3);
    border: 1px solid var(--bord);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    transition: border-color var(--transition);
}

.p-card:hover {
    border-color: var(--or-bord);
}

.p-card-icon {
    width: 48px;
    height: 48px;
    background: var(--or-clair);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.p-card-content h4 {
    color: var(--texte);
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

.p-card-content p {
    font-size: 0.83rem;
    line-height: 1.65;
}

/* ================================================
   SECTION GAINS (avantages)
================================================ */
.gains-section {
    padding: 6rem 0;
    background: var(--fond-3);
}

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

.gain-card {
    background: var(--fond-2);
    border: 1px solid var(--bord);
    border-radius: var(--radius);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition);
}

.gain-card:hover {
    border-color: var(--or-bord);
    transform: translateY(-3px);
}

/* Ligne dorée en haut de chaque carte */
.gain-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--or);
    opacity: 0;
    transition: opacity var(--transition);
}

.gain-card:hover::before {
    opacity: 1;
}

.gain-num {
    font-family: 'Syne', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: rgba(245, 200, 66, 0.1);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.gain-card h4 {
    color: var(--texte);
    margin-bottom: 0.5rem;
}

.gain-card p {
    font-size: 0.83rem;
    line-height: 1.7;
}

/* ================================================
   SECTION CONTRAT
================================================ */
.contrat-section {
    padding: 6rem 0;
    background: var(--fond);
}

.contrat-box {
    background: var(--fond-3);
    border: 1px solid var(--or-bord);
    border-radius: var(--radius-lg);
    padding: 3rem;
    max-width: 780px;
    margin: 3rem auto 0;
}

.contrat-box-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--or);
    margin-bottom: 2rem;
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bord);
}

.clause-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.clause-item {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--bord);
}

.clause-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.clause-num {
    width: 30px;
    height: 30px;
    background: var(--or-clair);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--or);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.clause-text {
    font-size: 0.88rem;
    color: var(--texte-muted);
    line-height: 1.75;
}

.clause-text strong {
    color: var(--texte);
    font-weight: 500;
}

/* ================================================
   FORMULAIRE DE PARTICIPATION
================================================ */
.form-section {
    padding: 6rem 0;
    background: var(--fond-2);
}

.form-container {
    max-width: 680px;
    margin: 0 auto;
    background: var(--fond-3);
    border: 1px solid var(--bord);
    border-radius: var(--radius-lg);
    padding: 3rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--texte-muted);
    margin-bottom: 0.5rem;
    letter-spacing: 0.3px;
}

.form-group label span.required {
    color: var(--or);
}

.form-control {
    width: 100%;
    background: var(--fond-2);
    border: 1px solid var(--bord-2);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    color: var(--texte);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    transition: border-color var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--or-bord);
}

.form-control::placeholder {
    color: var(--texte-dim);
}

select.form-control {
    cursor: pointer;
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

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

/* ================================================
   CTA (Appel à l'action)
================================================ */
.cta-section {
    padding: 7rem 0;
    text-align: center;
    background: linear-gradient(135deg, #0e0900 0%, var(--fond) 40%, #050e05 100%);
    border-top: 1px solid var(--bord);
}

.cta-section h2 {
    margin-bottom: 1.2rem;
}

.cta-section h2 em {
    color: var(--or);
    font-style: normal;
}

.cta-section p {
    max-width: 520px;
    margin: 0 auto 2.5rem;
    font-size: 1rem;
}

.cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ================================================
   PIED DE PAGE
================================================ */
.footer {
    background: #050505;
    border-top: 1px solid var(--bord);
}

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

.footer-logo {
    margin-bottom: 0.5rem;
}

.footer-brand p {
    font-size: 0.85rem;
    max-width: 260px;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

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

.footer-social a {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--texte-dim);
    font-size: 0.82rem;
    transition: color var(--transition);
}

.footer-social a:hover {
    color: var(--or);
}

.footer-social a svg {
    flex-shrink: 0;
}

.footer-links h4 {
    color: var(--texte);
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
    letter-spacing: 1px;
}

.footer-links a {
    display: block;
    color: var(--texte-dim);
    font-size: 0.82rem;
    margin-bottom: 0.6rem;
    transition: color var(--transition);
}

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

.footer-bottom {
    border-top: 1px solid var(--bord);
    padding: 1.2rem 2rem;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.78rem;
    color: var(--texte-dim);
}

/* ================================================
   MESSAGES D'ALERTE (formulaires)
================================================ */
.alert {
    padding: 1rem 1.2rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

/* Erreurs de validation */
.invalid-feedback {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    display: block;
}

.form-control.is-invalid {
    border-color: rgba(239, 68, 68, 0.5);
}

/* ================================================
   PAGE PÔLES (détail de chaque pôle)
================================================ */
.pole-detail {
    padding: 5rem 0;
    border-bottom: 1px solid var(--bord);
}

.pole-detail:nth-child(even) {
    background: var(--fond-2);
}

.pole-detail-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.pole-detail-inner.reverse {
    direction: rtl;
}

.pole-detail-inner.reverse > * {
    direction: ltr;
}

.pole-visual {
    background: var(--fond-3);
    border: 1px solid var(--bord);
    border-radius: var(--radius-lg);
    padding: 3rem;
    text-align: center;
}

.pole-visual-emoji {
    font-size: 5rem;
    display: block;
    margin-bottom: 1rem;
}

.pole-visual-name {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--or);
}

.pole-detail-text h2 {
    margin-bottom: 1rem;
}

.pole-detail-text p {
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
}

.pole-detail-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 1.5rem;
}

.pole-detail-features li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.88rem;
    color: var(--texte-muted);
}

.pole-detail-features li::before {
    content: '→';
    color: var(--or);
    font-weight: 700;
}

/* ================================================
   PAGE HERO GÉNÉRIQUE (pour sous-pages)
================================================ */
.page-hero {
    padding: 5rem 0 4rem;
    border-bottom: 1px solid var(--bord);
    background: linear-gradient(to bottom, var(--fond-2), var(--fond));
}

.page-hero h1 {
    margin-bottom: 1rem;
}

.page-hero h1 em {
    color: var(--or);
    font-style: normal;
}

.page-hero .desc {
    max-width: 560px;
    font-size: 1rem;
}

/* ================================================
   LOGOS — NAVBAR & FOOTER
================================================ */
.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-img {
    height: 46px;
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.logo-text {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--or);
    letter-spacing: 3px;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
}

.logo-text small {
    font-size: 0.55rem;
    font-weight: 400;
    color: var(--texte-muted);
    letter-spacing: 4px;
    text-transform: uppercase;
}

.footer-logo-img {
    height: 54px;
    width: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 1rem;
}

/* ================================================
   LOGOS — CARTES DES PÔLES (home page)
================================================ */
.pole-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0 auto 1.2rem;
    border-radius: var(--radius-lg);
    background: var(--fond-3);
    border: 1px solid var(--bord);
    padding: 8px;
    overflow: hidden;
}

.pole-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ================================================
   LOGOS — VISUELS DÉTAIL PÔLES
================================================ */
.pole-visual-img {
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: var(--radius-lg);
    margin: 0 auto;
    display: block;
}

/* ================================================
   SECTION APP / INNOVATION DIGITALE
================================================ */
.app-section {
    padding: 6rem 0;
    background: var(--fond-3);
    border-top: 1px solid var(--bord);
    border-bottom: 1px solid var(--bord);
}

.app-section-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 5rem;
    align-items: center;
}

.app-text h2 em {
    color: var(--or);
    font-style: normal;
}

.app-features {
    list-style: none;
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.app-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.88rem;
    color: var(--texte-muted);
}

.app-feat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--or);
    flex-shrink: 0;
}

.app-soon-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.app-soon-badge {
    background: var(--or-clair);
    color: var(--or);
    border: 1px solid var(--or-bord);
    padding: 0.3rem 1rem;
    border-radius: 3px;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

.app-soon-platforms {
    font-size: 0.82rem;
    color: var(--texte-dim);
    letter-spacing: 1px;
}

/* Maquette téléphone */
.app-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-phone-mockup {
    width: 230px;
    height: 440px;
    background: var(--fond-4);
    border: 1.5px solid var(--bord-2);
    border-radius: 36px;
    padding: 14px;
    box-shadow:
        0 0 0 1px var(--bord),
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(245, 200, 66, 0.06);
    position: relative;
}

.app-phone-mockup::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--bord-2);
    border-radius: 2px;
}

.app-phone-inner {
    width: 100%;
    height: 100%;
    background: var(--fond);
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 1.5rem;
    gap: 0.5rem;
}

.app-screen-brand {
    font-family: 'Syne', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--or);
    line-height: 1;
}

.app-screen-title {
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: var(--texte-dim);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.app-screen-poles {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}

.asp-item {
    background: var(--fond-4);
    border: 1px solid var(--bord);
    border-radius: 6px;
    padding: 0.45rem 0.8rem;
    font-size: 0.72rem;
    color: var(--texte-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.asp-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
}

/* ================================================
   SCROLLBAR PERSONNALISÉE
================================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--fond); }
::-webkit-scrollbar-thumb { background: rgba(245,200,66,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245,200,66,0.55); }

/* ================================================
   KEYFRAMES
================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(38px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-38px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(38px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes floatAlt {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%     { transform: translateY(-10px) rotate(1deg); }
}
@keyframes glowPulse {
    0%,100% { box-shadow: 0 0 20px rgba(245,200,66,0.15), 0 4px 40px rgba(0,0,0,0.3); }
    50%     { box-shadow: 0 0 40px rgba(245,200,66,0.35), 0 4px 40px rgba(0,0,0,0.3); }
}
@keyframes marqueeFlow {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes cursorBlink {
    0%,100% { opacity: 1; }
    50%     { opacity: 0; }
}
@keyframes scanline {
    0%   { top: 14px; opacity: 0.7; }
    100% { top: calc(100% - 14px); opacity: 0; }
}
@keyframes orbDrift1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(28px,-38px) scale(1.08); }
    66%     { transform: translate(-18px,22px) scale(0.94); }
}
@keyframes orbDrift2 {
    0%,100% { transform: translate(0,0); }
    50%     { transform: translate(-35px,18px); }
}
@keyframes orbDrift3 {
    0%,100% { transform: translate(0,0); }
    50%     { transform: translate(18px,-22px); }
}
@keyframes statusPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.4; transform: scale(0.75); }
}
@keyframes gradientShift {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}
@keyframes rpGlow {
    0%,100% { box-shadow: 0 0 0 4px rgba(245,200,66,0.08), 0 0 14px rgba(245,200,66,0.25); }
    50%     { box-shadow: 0 0 0 6px rgba(245,200,66,0.15), 0 0 24px rgba(245,200,66,0.45); }
}

/* ================================================
   SCROLL REVEAL SYSTEM
================================================ */
[data-reveal] {
    opacity: 0;
    transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal="up"]    { transform: translateY(36px); }
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(0.9); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}
.poles-grid .pole-card[data-reveal]  { transition-delay: var(--stagger, 0ms); }
.gains-grid .gain-card[data-reveal]  { transition-delay: var(--stagger, 0ms); }

/* ================================================
   NAVBAR — ÉTATS AVANCÉS
================================================ */
.navbar {
    transition: transform 0.32s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.navbar.scrolled {
    border-bottom-color: rgba(245,200,66,0.12);
    box-shadow: 0 4px 30px rgba(0,0,0,0.45);
}
.navbar.nav-up {
    transform: translateY(-100%);
}

/* Hamburger → croix animée */
.hamburger span { transition: transform 0.25s ease, opacity 0.25s ease; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================
   HERO — ORBES & TYPED LINE
================================================ */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
    z-index: 0;
}
.hero-orb-1 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(245,200,66,0.09) 0%, transparent 70%);
    top: -120px; right: 8%;
    animation: orbDrift1 14s ease-in-out infinite;
}
.hero-orb-2 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(200,100,30,0.07) 0%, transparent 70%);
    bottom: -40px; right: 28%;
    animation: orbDrift2 17s ease-in-out infinite;
}
.hero-orb-3 {
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(60,180,100,0.05) 0%, transparent 70%);
    top: 35%; right: 4%;
    animation: orbDrift3 20s ease-in-out infinite;
}

/* Gradient animé sur "Grand" */
.hero h1 em {
    background: linear-gradient(135deg, #f5c842, #e09820, #f5e042, #f5c842);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
    animation: gradientShift 3.5s linear infinite;
}

/* Typewriter line */
.hero-typed-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    color: var(--texte-muted);
}
.hero-typed-prefix {
    color: var(--or);
    font-weight: 600;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.hero-typewriter {
    color: var(--texte);
    font-weight: 700;
    min-width: 7ch;
    letter-spacing: 0.5px;
}
.hero-cursor {
    color: var(--or);
    font-weight: 300;
    animation: cursorBlink 0.88s step-end infinite;
}

/* 4ème stat */
.stat-sep {
    width: 1px;
    height: 32px;
    background: var(--bord-2);
    flex-shrink: 0;
}

/* Bouton avec glow pulsant */
.btn-glow {
    animation: glowPulse 3s ease-in-out infinite;
}

/* ================================================
   MARQUEE BAND
================================================ */
.marquee-band {
    background: var(--fond-2);
    border-top: 1px solid var(--bord);
    border-bottom: 1px solid var(--bord);
    overflow: hidden;
    padding: 0.85rem 0;
    user-select: none;
}
.marquee-track {
    display: flex;
    gap: 2.8rem;
    animation: marqueeFlow 26s linear infinite;
    width: max-content;
}
.marquee-track span {
    font-size: 0.7rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--texte-dim);
    white-space: nowrap;
    font-weight: 500;
    transition: color var(--transition);
}
.marquee-track span:hover { color: var(--or); }

/* ================================================
   VISION SECTION
================================================ */
.vision-section {
    padding: 6rem 0;
    background: var(--fond-2);
    border-top: 1px solid var(--bord);
}
.vision-title {
    margin-bottom: 2.5rem;
    max-width: 660px;
    line-height: 1.18;
}
.vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 4rem;
}
.vision-quote {
    grid-column: 1 / -1;
    border-left: 2px solid var(--or);
    padding: 1.1rem 2rem;
    background: var(--or-clair);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-top: 0.5rem;
}
.vision-quote blockquote {
    font-style: italic;
    color: var(--texte-muted);
    font-size: 1rem;
    line-height: 1.75;
}
.vision-quote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-style: normal;
    color: var(--or);
}

/* ================================================
   POLE CARD — VARIANTE TECH & HOVER AMÉLIORÉ
================================================ */
.pole-card {
    position: relative;
    overflow: hidden;
}
.pole-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(245,200,66,0.4), transparent);
    opacity: 0;
    transition: opacity var(--transition);
}
.pole-card:hover::before { opacity: 1; }
.pole-card:hover {
    border-color: rgba(245,200,66,0.22);
    box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(245,200,66,0.1);
    transform: translateY(-5px);
}

.pole-card-tech {
    border-color: rgba(0,140,255,0.18);
    background: linear-gradient(145deg, var(--fond-4), rgba(0,60,130,0.08));
}
.pole-card-tech::before {
    background: linear-gradient(to right, transparent, rgba(0,150,255,0.4), transparent);
}
.pole-card-tech:hover {
    border-color: rgba(0,140,255,0.45);
    box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,100,255,0.1), 0 0 30px rgba(0,100,255,0.08);
}
.pole-badge-tech {
    background: rgba(0,140,255,0.1);
    color: #5cbfff;
    border-color: rgba(0,140,255,0.2);
}
.pole-logo-wrap-tech {
    background: rgba(0,20,60,0.6);
    border-color: rgba(0,100,200,0.2);
}
.pole-link-tech { color: #5cbfff; }
.pole-link-tech:hover { color: #90d4ff; }

/* ================================================
   APP SECTION — ÉLÉMENTS AVANCÉS
================================================ */
.app-scanline {
    position: absolute;
    left: 14px; right: 14px;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(245,200,66,0.35), transparent);
    top: 14px;
    animation: scanline 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
    border-radius: 1px;
}

.asp-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--texte-dim);
    margin-left: auto;
    flex-shrink: 0;
}
.asp-dot-on {
    background: #4dca6e;
    box-shadow: 0 0 6px rgba(77,202,110,0.7);
    animation: statusPulse 2.2s ease-in-out infinite;
}

.app-screen-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.58rem;
    color: #4dca6e;
    margin-top: 0.4rem;
    letter-spacing: 0.5px;
}
.app-status-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #4dca6e;
    flex-shrink: 0;
    animation: statusPulse 2.2s ease-in-out infinite;
}

/* Floating cards autour du téléphone */
.app-float {
    position: absolute;
    background: rgba(22,22,22,0.92);
    border: 1px solid var(--bord-2);
    border-radius: var(--radius);
    padding: 0.5rem 0.85rem;
    font-size: 0.63rem;
    color: var(--texte-muted);
    line-height: 1.5;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    pointer-events: none;
    white-space: nowrap;
}
.app-float strong {
    color: var(--texte);
    display: block;
    font-size: 0.78rem;
}
.app-float-1 {
    top: 14%; left: -85px;
    animation: floatAlt 4.2s ease-in-out infinite;
}
.app-float-2 {
    bottom: 22%; left: -80px;
    animation: floatAlt 5s ease-in-out infinite 1.6s;
}
.app-float-3 {
    top: 42%; right: -80px;
    animation: floatAlt 4.6s ease-in-out infinite 0.9s;
}

/* ================================================
   ROADMAP DIGITALE
================================================ */
.roadmap-section {
    padding: 6rem 0;
    background: var(--fond-2);
    border-top: 1px solid var(--bord);
    border-bottom: 1px solid var(--bord);
}
.roadmap-section h2 em {
    color: var(--or);
    font-style: normal;
}

.roadmap-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    position: relative;
}
.roadmap-line {
    position: absolute;
    top: 11px;
    left: calc(100% / 6 + 12px);
    right: calc(100% / 6 + 12px);
    height: 1px;
    background: linear-gradient(to right, var(--or), rgba(245,200,66,0.3), rgba(245,200,66,0.08));
    z-index: 0;
}

.roadmap-phase {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.roadmap-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--bord-2);
    background: var(--fond);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.rp-active {
    border-color: var(--or);
    background: var(--or-clair);
    animation: rpGlow 2.5s ease-in-out infinite;
}
.rp-active::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--or);
}
.rp-soon  { border-color: rgba(245,200,66,0.35); background: rgba(245,200,66,0.04); }
.rp-future{ border-color: var(--bord); }

.roadmap-badge {
    display: inline-block;
    font-size: 0.66rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.22rem 0.7rem;
    border-radius: 3px;
    font-weight: 600;
    align-self: flex-start;
}
.rp-badge-active { background: var(--or-clair); color: var(--or); border: 1px solid var(--or-bord); }
.rp-badge-soon   { background: rgba(245,200,66,0.07); color: rgba(245,200,66,0.65); border: 1px solid rgba(245,200,66,0.14); }
.rp-badge-future { background: rgba(255,255,255,0.02); color: var(--texte-dim); border: 1px solid var(--bord); }

.roadmap-num-label {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--texte-dim);
}
.roadmap-content h4 {
    font-size: 1.08rem;
    color: var(--texte);
    margin: 0.15rem 0 0.4rem;
}
.roadmap-content ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.roadmap-content ul li {
    font-size: 0.82rem;
    color: var(--texte-muted);
    padding-left: 1rem;
    position: relative;
    line-height: 1.5;
}
.roadmap-content ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--texte-dim);
    font-size: 0.65rem;
    top: 3px;
}

/* ================================================
   GAINS — cta gradients
================================================ */
.cta-section h2 em,
.roadmap-section h2 em {
    background: linear-gradient(135deg, #f5c842, #e09820, #f5e042, #f5c842);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
    animation: gradientShift 3.5s linear infinite;
}

/* ================================================
   RESPONSIVE (Mobile)
================================================ */
@media (max-width: 900px) {
    .nav-links, .navbar .btn-gold {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .participation-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .gains-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pole-detail-inner {
        grid-template-columns: 1fr;
    }

    .pole-detail-inner.reverse {
        direction: ltr;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .app-section-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .app-visual { order: -1; }
    .app-float  { display: none; }

    .vision-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .roadmap-track {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .roadmap-line { display: none; }
}

@media (max-width: 600px) {
    .container {
        padding: 0 1.2rem;
    }

    .gains-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }

    .hero-stats { gap: 1rem; }
    .stat-sep   { display: none; }
    .hero-typed-line { flex-wrap: wrap; }

    .marquee-track { animation-duration: 18s; }

    .contrat-box { padding: 1.5rem; }
}

/* ================================================
   HERO SPLIT — Deux récits, une vision
================================================ */
.hero-split {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--fond);
}

.hs-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.hs-bg-left {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 50%;
    background: radial-gradient(ellipse at 15% 50%, rgba(245,200,66,0.06) 0%, transparent 60%);
}
.hs-bg-right {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 50%;
    background: radial-gradient(ellipse at 85% 40%, rgba(245,200,66,0.09) 0%, transparent 55%);
}

/* Particules */
.hs-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.hs-p {
    position: absolute;
    border-radius: 50%;
    background: var(--or);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
.pa { animation-name: pfA; }
.pb { animation-name: pfB; }
.pc { animation-name: pfC; }
.pd { animation-name: pfD; }

@keyframes pfA {
    0%,100% { opacity: 0; transform: translate(0,0); }
    25%,75% { opacity: 0.5; }
    50%     { opacity: 0.5; transform: translate(-12px,-40px); }
}
@keyframes pfB {
    0%,100% { opacity: 0; transform: translate(0,0); }
    25%,75% { opacity: 0.35; }
    50%     { opacity: 0.35; transform: translate(18px,-32px); }
}
@keyframes pfC {
    0%,100% { opacity: 0; transform: translate(0,0); }
    25%,75% { opacity: 0.6; }
    50%     { opacity: 0.6; transform: translate(22px,-8px); }
}
@keyframes pfD {
    0%,100% { opacity: 0; transform: scale(0.8); }
    50%     { opacity: 0.45; transform: scale(1.4) translate(-5px,-18px); }
}

/* Layout intérieur */
.hs-inner {
    flex: 1;
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 80px);
}

.hs-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem 4.5rem 4rem;
}

.hs-left {
    border-right: 1px solid var(--bord);
}

.hs-right {
    align-items: center;
    text-align: center;
}

/* Séparateur central */
.hs-sep {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 0;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    overflow: visible;
}
.hs-sep-line {
    flex: 1;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(245,200,66,0.4), transparent);
}
.hs-sep-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--fond-3);
    border: 1px solid var(--or-bord);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--or);
    flex-shrink: 0;
    animation: rpGlow 3s ease-in-out infinite;
}

/* Contenu panneau gauche */
.hs-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--or);
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-weight: 500;
}
.hs-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--or);
    animation: statusPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.hs-heading {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.8rem, 5vw, 5.8rem);
    font-weight: 800;
    line-height: 1.04;
    margin-bottom: 1.8rem;
    color: var(--texte);
}
.hs-em {
    background: linear-gradient(135deg, #f5c842, #e09820, #f5e042, #f5c842);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
    animation: gradientShift 3.5s linear infinite;
}

.hs-desc {
    font-size: 0.97rem;
    color: var(--texte-muted);
    line-height: 1.85;
    margin-bottom: 2.2rem;
    max-width: 480px;
}

.hs-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.hs-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.hs-trait {
    background: var(--fond-3);
    border: 1px solid var(--bord);
    color: var(--texte-muted);
    font-size: 0.74rem;
    padding: 0.28rem 0.85rem;
    border-radius: 20px;
    transition: border-color var(--transition), color var(--transition);
}
.hs-trait:hover {
    border-color: var(--or-bord);
    color: var(--or);
}

/* Contenu panneau droit */
.hs-empire-logo {
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hs-logo-glow {
    position: absolute;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,200,66,0.18) 0%, transparent 70%);
    animation: glowPulse 3s ease-in-out infinite;
    pointer-events: none;
}
.hs-logo-img {
    height: 120px;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 24px rgba(245,200,66,0.3));
}

.hs-empire-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 800;
    color: var(--texte);
    margin-bottom: 0.4rem;
    letter-spacing: 2px;
}
.hs-empire-tagline {
    font-size: 0.76rem;
    color: var(--texte-dim);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 2.2rem;
}

.hs-poles-strip {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.hs-pole-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.hpm-logo {
    width: 46px; height: 46px;
    object-fit: contain;
    border-radius: 10px;
    background: var(--fond-3);
    border: 1px solid var(--bord);
    padding: 5px;
    transition: border-color var(--transition), transform var(--transition);
}
.hs-pole-mini:hover .hpm-logo {
    border-color: var(--or-bord);
    transform: translateY(-4px);
}
.hs-pole-mini span {
    font-size: 0.6rem;
    color: var(--texte-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hs-empire-btns {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.btn-ghost-dark {
    display: inline-block;
    background: transparent;
    color: var(--texte-muted);
    border: 1px solid var(--bord);
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all var(--transition);
}
.btn-ghost-dark:hover {
    color: var(--texte);
    border-color: var(--bord-2);
}

.hs-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(77,202,110,0.08);
    border: 1px solid rgba(77,202,110,0.2);
    color: #4dca6e;
    font-size: 0.7rem;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    letter-spacing: 1px;
}
.hs-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4dca6e;
    animation: statusPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* Barre de stats */
.hs-statsbar {
    background: var(--fond-2);
    border-top: 1px solid var(--bord);
    position: relative;
    z-index: 2;
}
.hs-statsbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(245,200,66,0.35), transparent);
}
.hs-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    padding: 1.6rem 0;
    flex-wrap: wrap;
}
.hs-stat { text-align: center; }
.hs-stat-num {
    font-family: 'Syne', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--or);
    line-height: 1;
    margin-bottom: 0.25rem;
    display: block;
}
.hs-stat-label {
    font-size: 0.68rem;
    color: var(--texte-dim);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.hs-stat-sep {
    width: 1px; height: 28px;
    background: var(--bord-2);
    flex-shrink: 0;
}

/* ================================================
   MANIFESTE — L'Esprit Gbonhi
================================================ */
.manifeste-section {
    padding: 7rem 0;
    background: var(--fond-2);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--bord);
}
.manifeste-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 5% 50%, rgba(245,200,66,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 95% 15%, rgba(200,100,30,0.05) 0%, transparent 50%);
    pointer-events: none;
}
.manifeste-header {
    max-width: 800px;
    margin-bottom: 4rem;
}
.manifeste-headline {
    font-size: clamp(2.4rem, 4.5vw, 4.2rem);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}
.manifeste-headline em { color: var(--or); font-style: normal; }
.manifeste-lead {
    font-size: 1.02rem;
    line-height: 1.9;
    max-width: 680px;
    color: var(--texte-muted);
}

/* Grille bâtisseurs */
.dreamers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 5rem;
}
.dreamer-card {
    background: var(--fond-3);
    border: 1px solid var(--bord);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    transition-delay: var(--stagger, 0ms);
}
.dreamer-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(245,200,66,0.55), transparent);
    opacity: 0;
    transition: opacity var(--transition);
}
.dreamer-card:hover {
    border-color: rgba(245,200,66,0.28);
    transform: translateY(-7px);
    box-shadow: 0 22px 55px rgba(0,0,0,0.4), 0 0 0 1px rgba(245,200,66,0.07);
}
.dreamer-card:hover::before { opacity: 1; }
.dreamer-card-social { border-color: rgba(77,202,110,0.15); }
.dreamer-card-social::before {
    background: linear-gradient(to right, transparent, rgba(77,202,110,0.45), transparent);
}
.dreamer-card-social:hover { border-color: rgba(77,202,110,0.32); }

.dreamer-num {
    position: absolute;
    top: 1rem; right: 1.2rem;
    font-family: 'Syne', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: rgba(245,200,66,0.06);
    line-height: 1;
}
.dreamer-icon { font-size: 2rem; margin-bottom: 1rem; display: block; }
.dreamer-card h4 { color: var(--texte); font-size: 1rem; margin-bottom: 0.6rem; }
.dreamer-card p { font-size: 0.83rem; line-height: 1.7; margin-bottom: 1rem; }
.dreamer-prompt {
    font-size: 0.78rem;
    color: var(--or);
    font-style: italic;
    border-left: 2px solid var(--or-bord);
    padding-left: 0.75rem;
    line-height: 1.6;
}
.dreamer-card-social .dreamer-prompt {
    color: #4dca6e;
    border-left-color: rgba(77,202,110,0.3);
}

/* Porte sociale */
.social-door {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 3.5rem;
    background: var(--fond-3);
    border: 1px solid var(--bord);
    border-radius: var(--radius-lg);
}
.sd-left h3 {
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    margin: 1rem 0;
    line-height: 1.2;
}
.sd-left h3 em { color: var(--or); font-style: normal; }
.sd-left p { font-size: 0.92rem; line-height: 1.85; margin-bottom: 0.8rem; }

.manifeste-blockquote {
    background: var(--fond-2);
    border: 1px solid var(--bord);
    border-radius: var(--radius-lg);
    padding: 2rem 2rem 1.5rem;
    position: relative;
}
.mbq-mark {
    font-family: 'Syne', sans-serif;
    font-size: 5rem;
    font-weight: 800;
    color: var(--or-bord);
    line-height: 0.8;
    margin-bottom: -1rem;
    display: block;
}
.manifeste-blockquote p {
    font-style: italic;
    font-size: 0.95rem;
    color: var(--texte-muted);
    line-height: 1.8;
    margin-bottom: 1rem;
}
.manifeste-blockquote cite {
    font-style: normal;
    font-size: 0.8rem;
    color: var(--or);
    display: block;
}
.manifeste-blockquote cite small {
    color: var(--texte-dim);
    font-size: 0.72rem;
    display: block;
    margin-top: 0.2rem;
}

.sd-stats-mini {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--bord);
    margin-top: 1.5rem;
}
.sdm-item { text-align: center; flex: 1; }
.sdm-num {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--or);
    display: block;
    line-height: 1;
    margin-bottom: 0.2rem;
}
.sdm-label {
    font-size: 0.65rem;
    color: var(--texte-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.sdm-sep {
    width: 1px; height: 30px;
    background: var(--bord-2);
    flex-shrink: 0;
}

/* Marquee inversé */
.marquee-reverse .marquee-track {
    animation-direction: reverse;
}

/* ================================================
   RED CARPET — L'Univers Gbonhi
================================================ */
.redcarpet-section {
    padding: 7rem 0;
    background: #050505;
    border-top: 1px solid var(--bord);
    border-bottom: 1px solid var(--bord);
    position: relative;
    overflow: hidden;
}
.rc-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 110%, rgba(245,200,66,0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 50% -10%, rgba(245,200,66,0.04) 0%, transparent 40%);
    pointer-events: none;
}
.rc-deco-g {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Syne', sans-serif;
    font-size: 70vw;
    font-weight: 800;
    color: rgba(245,200,66,0.018);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.rc-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}
.rc-tag {
    justify-content: center;
    letter-spacing: 4px;
    margin-bottom: 1.5rem;
    font-size: 0.72rem;
}
.rc-tag::before { display: none; }
.rc-headline {
    font-size: clamp(2.6rem, 5vw, 5rem);
    line-height: 1.1;
    margin-bottom: 1.2rem;
}
.rc-headline em {
    background: linear-gradient(135deg, #f5c842, #e09820, #f5e042, #f5c842);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
    animation: gradientShift 3.5s linear infinite;
}
.rc-subline {
    max-width: 520px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.75;
}

/* Showcase cinématique des pôles */
.poles-showcase {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--bord);
    border: 1px solid var(--bord);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-bottom: 3rem;
}
.psc-card {
    background: var(--fond-4);
    padding: 2.5rem 1.5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.psc-card:hover {
    background: #111111;
    transform: translateY(-5px);
    z-index: 2;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.psc-glow {
    position: absolute;
    top: -40px; left: 50%;
    transform: translateX(-50%);
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,200,66,0.18) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.psc-glow-amber { background: radial-gradient(circle, rgba(255,160,50,0.2) 0%, transparent 70%); }
.psc-glow-teal  { background: radial-gradient(circle, rgba(0,200,180,0.15) 0%, transparent 70%); }
.psc-glow-blue  { background: radial-gradient(circle, rgba(0,140,255,0.18) 0%, transparent 70%); }
.psc-glow-green { background: radial-gradient(circle, rgba(60,200,80,0.14) 0%, transparent 70%); }
.psc-card:hover .psc-glow { opacity: 1; }

.psc-logo-wrap {
    width: 80px; height: 80px;
    background: var(--fond-3);
    border: 1px solid var(--bord);
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    padding: 10px;
    margin-bottom: 1.2rem;
    transition: border-color var(--transition);
    position: relative; z-index: 1;
}
.psc-logo-tech { background: rgba(0,20,60,0.5); border-color: rgba(0,100,200,0.2); }
.psc-card:hover .psc-logo-wrap { border-color: var(--or-bord); }
.psc-tech:hover  .psc-logo-wrap { border-color: rgba(0,140,255,0.45); }
.psc-agri:hover  .psc-logo-wrap { border-color: rgba(60,200,80,0.35); }
.psc-logo { width: 100%; height: 100%; object-fit: contain; }

.psc-domain-tag {
    font-size: 0.58rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--or);
    background: var(--or-clair);
    border: 1px solid var(--or-bord);
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    margin-bottom: 0.75rem;
    position: relative; z-index: 1;
}
.psc-domain-blue  { color: #5cbfff; background: rgba(0,140,255,0.08); border-color: rgba(0,140,255,0.2); }
.psc-domain-green { color: #4dca6e; background: rgba(77,202,110,0.08); border-color: rgba(77,202,110,0.2); }

.psc-name {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--texte);
    margin-bottom: 0.6rem;
    position: relative; z-index: 1;
}
.psc-desc {
    font-size: 0.78rem;
    color: var(--texte-muted);
    line-height: 1.65;
    margin-bottom: 1.2rem;
    flex: 1;
    position: relative; z-index: 1;
}
.psc-link {
    font-size: 0.75rem;
    color: var(--or);
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition);
    position: relative; z-index: 1;
}
.psc-link-blue  { color: #5cbfff; }
.psc-link-green { color: #4dca6e; }
.psc-card:hover .psc-link { opacity: 1; transform: translateY(0); }

.psc-num {
    position: absolute;
    bottom: 1rem; right: 1.2rem;
    font-family: 'Syne', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: rgba(245,200,66,0.05);
    line-height: 1;
    pointer-events: none;
}
.psc-num-blue { color: rgba(0,140,255,0.06); }

.rc-footer-cta {
    text-align: center;
    position: relative; z-index: 1;
}

/* ================================================
   GALERIE D'ACTIVITÉS — Slideshow CSS pur
================================================ */
.activities-section {
    padding: 6rem 0 0;
    background: var(--fond-3);
    border-top: 1px solid var(--bord);
}
.act-header { margin-bottom: 3rem; }
.act-header h2 em { color: var(--or); font-style: normal; }
.act-header p { font-size: 0.95rem; }

.gallery-container {
    position: relative;
    height: 62vh;
    min-height: 400px;
    overflow: hidden;
    margin-top: 2rem;
}
.gallery-slider { position: absolute; inset: 0; }

.gslide {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: galleryReveal 30s linear infinite;
    display: flex;
    align-items: flex-end;
}

/* Fonds cinématiques de chaque slide */
.gslide-1 {
    background: linear-gradient(145deg, #140520 0%, #090010 45%, #1e0a00 100%);
    animation-delay: 0s;
}
.gslide-1::before {
    content: 'EVENT';
    position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
    font-family: 'Syne', sans-serif; font-size: 20vw; font-weight: 800;
    color: rgba(245,200,66,0.04); line-height: 1; pointer-events: none;
}
.gslide-2 {
    background: linear-gradient(145deg, #1e0a00 0%, #0d0500 45%, #221000 100%);
    animation-delay: 5s;
}
.gslide-2::before {
    content: 'FOOD';
    position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
    font-family: 'Syne', sans-serif; font-size: 20vw; font-weight: 800;
    color: rgba(255,140,0,0.04); line-height: 1; pointer-events: none;
}
.gslide-3 {
    background: linear-gradient(145deg, #001520 0%, #000b14 45%, #001c1a 100%);
    animation-delay: 10s;
}
.gslide-3::before {
    content: 'STYLE';
    position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
    font-family: 'Syne', sans-serif; font-size: 20vw; font-weight: 800;
    color: rgba(0,200,180,0.04); line-height: 1; pointer-events: none;
}
.gslide-4 {
    background: linear-gradient(145deg, #00041a 0%, #000210 45%, #001030 100%);
    animation-delay: 15s;
}
.gslide-4::before {
    content: 'TECH';
    position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
    font-family: 'Syne', sans-serif; font-size: 20vw; font-weight: 800;
    color: rgba(0,140,255,0.05); line-height: 1; pointer-events: none;
}
.gslide-5 {
    background: linear-gradient(145deg, #001a00 0%, #000d00 45%, #002200 100%);
    animation-delay: 20s;
}
.gslide-5::before {
    content: 'AGRI';
    position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
    font-family: 'Syne', sans-serif; font-size: 20vw; font-weight: 800;
    color: rgba(60,200,80,0.04); line-height: 1; pointer-events: none;
}
.gslide-6 {
    background: linear-gradient(145deg, #0d0d0d 0%, #080808 45%, #111111 100%);
    animation-delay: 25s;
}
.gslide-6::before {
    content: 'GBONHI';
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    font-family: 'Syne', sans-serif; font-size: 14vw; font-weight: 800;
    color: rgba(245,200,66,0.04); line-height: 1; pointer-events: none; white-space: nowrap;
}

/* Photo réelle optionnelle — couvre le fond dégradé */
.gslide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Voile dégradé latéral — reste lisible même avec une photo */
.gslide::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.15) 100%),
        linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.gslide-overlay {
    position: relative; z-index: 2;
    padding: 2.5rem 3rem 3.5rem;
    max-width: 600px;
}
.gslide-pole {
    display: inline-block;
    background: var(--or-clair);
    color: var(--or);
    border: 1px solid var(--or-bord);
    padding: 0.25rem 0.85rem;
    border-radius: 3px;
    font-size: 0.67rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 600;
}
.gslide-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 5.5vw, 4.5rem);
    font-weight: 800;
    color: var(--texte);
    line-height: 1.08;
    margin-bottom: 0.75rem;
}
.gslide-desc {
    font-size: 0.95rem;
    color: rgba(245,240,232,0.7);
    line-height: 1.7;
    max-width: 380px;
}

/* Indicateurs */
.gallery-indicators {
    position: absolute;
    bottom: 1.8rem; right: 2rem;
    display: flex;
    gap: 0.4rem;
    z-index: 10;
}
.gi {
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    width: 24px;
    animation: giActive 30s linear infinite;
    transition: none;
}
.gi-1 { animation-delay: 0s; }
.gi-2 { animation-delay: 5s; }
.gi-3 { animation-delay: 10s; }
.gi-4 { animation-delay: 15s; }
.gi-5 { animation-delay: 20s; }
.gi-6 { animation-delay: 25s; }

@keyframes galleryReveal {
    0%     { opacity: 0; }
    3%     { opacity: 1; }
    16.66% { opacity: 1; }
    19.66% { opacity: 0; }
    100%   { opacity: 0; }
}
@keyframes giActive {
    0%     { background: var(--or); width: 34px; }
    16.66% { background: var(--or); width: 34px; }
    16.67% { background: rgba(255,255,255,0.2); width: 24px; }
    100%   { background: rgba(255,255,255,0.2); width: 24px; }
}

/* ================================================
   ÉVÉNEMENTS À VENIR
================================================ */
.events-preview-section {
    padding: 6rem 0;
    background: var(--fond);
    border-top: 1px solid var(--bord);
}
.ep-header { margin-bottom: 3rem; }
.ep-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}
.ep-title-row h2 em { color: var(--or); font-style: normal; }
.ep-see-all { flex-shrink: 0; margin-bottom: 0.5rem; }

.ep-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.ep-card {
    background: var(--fond-3);
    border: 1px solid var(--bord);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    transition: border-color var(--transition), transform var(--transition);
}
.ep-card:hover {
    border-color: var(--or-bord);
    transform: translateY(-5px);
}
.ep-card-badge {
    position: absolute;
    top: 1rem; left: 1rem;
    background: var(--or);
    color: #0a0a0a;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 3px;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 2;
}
.ep-visual {
    height: 160px;
    position: relative;
}
.ep-card-featured .ep-visual { height: 200px; }

.ep-visual-1 {
    background: linear-gradient(135deg, #140520 0%, #1e0a00 100%);
}
.ep-visual-1::after {
    content: '✦';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 4rem; color: rgba(245,200,66,0.14);
}
.ep-visual-2 {
    background: linear-gradient(135deg, #1e0a00 0%, #221000 100%);
}
.ep-visual-2::after {
    content: '◆';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 3.5rem; color: rgba(255,140,0,0.14);
}
.ep-visual-3 {
    background: linear-gradient(135deg, #00041a 0%, #001030 100%);
}
.ep-visual-3::after {
    content: '◉';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 3.5rem; color: rgba(0,140,255,0.18);
}

.ep-info { padding: 1.5rem; }
.ep-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.ep-pole-tag {
    background: var(--or-clair);
    color: var(--or);
    border: 1px solid var(--or-bord);
    font-size: 0.6rem;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}
.ep-pole-food { background: rgba(255,140,0,0.1); color: #ffab40; border-color: rgba(255,140,0,0.25); }
.ep-pole-tech { background: rgba(0,140,255,0.08); color: #5cbfff; border-color: rgba(0,140,255,0.22); }
.ep-date { font-size: 0.7rem; color: var(--texte-dim); letter-spacing: 1px; }
.ep-name {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem; font-weight: 700;
    color: var(--texte); margin-bottom: 0.5rem; line-height: 1.3;
}
.ep-desc { font-size: 0.82rem; color: var(--texte-muted); line-height: 1.65; margin-bottom: 1rem; }
.ep-link { font-size: 0.8rem; color: var(--or); font-weight: 600; transition: opacity var(--transition); }
.ep-link:hover { opacity: 0.7; }

/* ================================================
   CTA FINAL — Épique
================================================ */
.cta-final {
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #050505;
    border-top: 1px solid var(--bord);
}
.cta-final-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% -5%,  rgba(245,200,66,0.13) 0%, transparent 48%),
        radial-gradient(ellipse at 15% 110%, rgba(200,100,30,0.08) 0%, transparent 48%),
        radial-gradient(ellipse at 85% 110%, rgba(245,200,66,0.06) 0%, transparent 42%);
    pointer-events: none;
}
.cta-final::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(245,200,66,0.55), transparent);
}

.cta-final-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cfp { position: absolute; border-radius: 50%; background: var(--or); animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.cfp1 { width:3px;height:3px;left:10%;top:25%; animation-name:pfA; animation-duration:8s;animation-delay:0s; }
.cfp2 { width:2px;height:2px;left:85%;top:20%; animation-name:pfB; animation-duration:10s;animation-delay:1s; }
.cfp3 { width:4px;height:4px;left:15%;top:70%; animation-name:pfC; animation-duration:9s;animation-delay:2s; }
.cfp4 { width:2px;height:2px;left:75%;top:75%; animation-name:pfD; animation-duration:11s;animation-delay:0.5s; }
.cfp5 { width:3px;height:3px;left:50%;top:15%; animation-name:pfA; animation-duration:7s;animation-delay:3s; }

.cta-final-inner {
    position: relative; z-index: 1;
    max-width: 720px; margin: 0 auto;
}
.cta-final-badge {
    display: inline-block;
    background: var(--or-clair);
    color: var(--or);
    border: 1px solid var(--or-bord);
    padding: 0.4rem 1.5rem;
    border-radius: 3px;
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2rem;
}
.cta-final-title {
    font-size: clamp(2.8rem, 5.5vw, 5.5rem);
    line-height: 1.08;
    margin-bottom: 1.5rem;
}
.cta-final-title em {
    background: linear-gradient(135deg, #f5c842, #e09820, #f5e042, #f5c842);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
    animation: gradientShift 3.5s linear infinite;
}
.cta-final-desc {
    font-size: 1.05rem; color: var(--texte-muted);
    line-height: 1.8; max-width: 540px;
    margin: 0 auto 3rem;
}
.cta-final-btns {
    display: flex; gap: 1rem;
    justify-content: center; flex-wrap: wrap;
    margin-bottom: 2rem;
}
.btn-ghost-light {
    display: inline-block;
    background: transparent;
    color: var(--texte-muted);
    border: 1px solid var(--bord-2);
    padding: 0.7rem 1.8rem;
    border-radius: var(--radius);
    font-size: 0.88rem; font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}
.btn-ghost-light:hover {
    color: var(--texte);
    background: rgba(255,255,255,0.03);
}
.cta-final-note { font-size: 0.85rem; color: var(--texte-dim); }
.cta-note-link { color: var(--or); font-weight: 500; transition: opacity var(--transition); }
.cta-note-link:hover { opacity: 0.75; }

/* ================================================
   STAGGER — Nouveaux éléments de grille
================================================ */
.dreamers-grid .dreamer-card[data-reveal] { transition-delay: var(--stagger, 0ms); }

/* ================================================
   RESPONSIVE — Nouveaux composants
================================================ */
@media (max-width: 1200px) {
    .dreamers-grid { grid-template-columns: repeat(2, 1fr); }
    .poles-showcase { grid-template-columns: repeat(3, 1fr); }
    .hs-panel { padding: 4rem 3rem; }
}

@media (max-width: 900px) {
    .hs-inner { flex-direction: column; min-height: auto; }
    .hs-panel { padding: 4rem 2rem 2.5rem; }
    .hs-left { border-right: none; border-bottom: 1px solid var(--bord); }
    .hs-right { align-items: flex-start; text-align: left; }
    .hs-sep { display: none; }
    .hs-poles-strip { justify-content: flex-start; }
    .hs-empire-btns { justify-content: flex-start; }

    .dreamers-grid { grid-template-columns: 1fr 1fr; }
    .social-door { grid-template-columns: 1fr; gap: 2.5rem; }

    .poles-showcase { grid-template-columns: repeat(2, 1fr); }

    .ep-grid { grid-template-columns: 1fr; }
    .ep-title-row { flex-direction: column; align-items: flex-start; }

    .gallery-container { height: 55vh; }
    .gslide-title { font-size: clamp(1.6rem, 6vw, 2.5rem); }
    .gslide-overlay { padding: 2rem 1.5rem; }

    .hs-stats { gap: 2rem; }
}

@media (max-width: 600px) {
    .hs-panel { padding: 3rem 1.2rem 2rem; }
    .hs-heading { font-size: clamp(2.5rem, 12vw, 4rem); }
    .hs-stats { gap: 1.2rem; }
    .hs-stat-sep { display: none; }

    .dreamers-grid { grid-template-columns: 1fr; }
    .social-door { padding: 2rem 1.5rem; }
    .sd-stats-mini { gap: 1rem; }

    .poles-showcase { grid-template-columns: repeat(2, 1fr); }
    .psc-card { padding: 1.8rem 1rem; }

    .gallery-container { height: 55vw; min-height: 280px; }

    .cta-final { padding: 5rem 0; }
    .cta-final-btns { flex-direction: column; align-items: center; }
    .cta-final-btns .btn,
    .cta-final-btns .btn-ghost-light { width: 100%; max-width: 300px; text-align: center; }
}

/* ================================================
   ALLIANCE DES BÂTISSEURS — Horizontal scroll
================================================ */
.alliance-section {
    padding: 5rem 0 0;
    background: var(--fond);
    border-top: 1px solid var(--bord);
    overflow: hidden;
}

.alliance-head {
    margin-bottom: 2.5rem;
}

.alliance-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, rgba(245,200,66,0.12), rgba(245,200,66,0.04));
    border: 1px solid var(--or-bord);
    border-radius: 999px;
    padding: 0.45rem 1.2rem 0.45rem 0.8rem;
    margin-bottom: 1.5rem;
}
.acb-icon {
    font-size: 1rem;
    line-height: 1;
}
.acb-text {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--or);
}

.alliance-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}
.alliance-head-row h2 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--texte);
    line-height: 1.15;
    margin-bottom: 0.6rem;
}
.alliance-head-row h2 em {
    color: var(--or);
    font-style: normal;
}
.alliance-head-row p {
    font-size: 0.88rem;
    color: var(--texte-muted);
    line-height: 1.7;
    max-width: 480px;
}

.alliance-nav {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.alliance-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fond-2);
    border: 1px solid var(--bord);
    color: var(--texte-muted);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.alliance-nav-btn:hover {
    background: var(--or-bord);
    border-color: var(--or);
    color: var(--or);
}

/* Scrolling track */
.alliance-scroll-wrapper {
    position: relative;
}
.alliance-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0 2rem 2.5rem;
    /* start cards aligned with container left edge */
    padding-left: max(2rem, calc((100vw - 1200px) / 2 + 2rem));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.alliance-track::-webkit-scrollbar { display: none; }

/* Individual card */
.acard {
    flex-shrink: 0;
    width: 280px;
    border-radius: var(--radius-lg);
    background: var(--fond-2);
    border: 1px solid var(--bord);
    scroll-snap-align: start;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
}
.acard:hover {
    border-color: var(--or-bord);
    transform: translateY(-4px);
}

.acard-visual {
    height: 140px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Image optionnelle — couvre le fond dégradé quand présente */
.acard-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
/* Overlay sombre pour lisibilité du texte sur image */
.acard-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
    pointer-events: none;
}
.acard-visual-deco {
    position: absolute;
    top: 0.5rem;
    left: 0.9rem;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 3.5rem;
    color: rgba(255,255,255,0.18);
    line-height: 1;
    z-index: 2;
}
.acard-visual-icon {
    font-size: 2.8rem;
    z-index: 2;
    position: relative;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
}

/* Visual backgrounds per card */
.av-fondation  { background: linear-gradient(135deg, #0d1f38, #1a3a5c); }
.av-equipe     { background: linear-gradient(135deg, #1a1a2e, #2d2d4e); }
.av-event-mod  { background: linear-gradient(135deg, #1f0d10, #4a1020); }
.av-office     { background: linear-gradient(135deg, #0d200d, #1a401a); }
.av-partenaire { background: linear-gradient(135deg, #20180a, #3d300f); }
.av-gala       { background: linear-gradient(135deg, #1f1200, #3d2800); }
.av-app        { background: linear-gradient(135deg, #0d0d22, #1a1a44); }
.av-food       { background: linear-gradient(135deg, #1a0d0d, #3d1515); }
.av-style      { background: linear-gradient(135deg, #1a0d1a, #3d1f3d); }
.av-agri       { background: linear-gradient(135deg, #0d1a0d, #1f3d1f); }

.acard-info {
    padding: 1.1rem 1.1rem 1.3rem;
}

.acard-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

/* Status badges */
.acard-status {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}
.acard-status.done {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.2);
}
.acard-status.inprog {
    background: rgba(245, 200, 66, 0.12);
    color: var(--or);
    border: 1px solid var(--or-bord);
}
.acard-status.upcoming {
    background: rgba(148, 163, 184, 0.08);
    color: var(--texte-dim);
    border: 1px solid var(--bord);
}

.acard-pole-tag {
    font-size: 0.62rem;
    color: var(--texte-dim);
    letter-spacing: 0.5px;
}

.acard-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--texte);
    line-height: 1.25;
    margin-bottom: 0.45rem;
}

.acard-desc {
    font-size: 0.78rem;
    color: var(--texte-muted);
    line-height: 1.65;
}

/* Responsive */
@media (max-width: 600px) {
    .alliance-head-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .alliance-nav { align-self: flex-start; }
    .acard { width: 240px; }
    .acard-visual { height: 110px; }
}