/* ==========================================================================
   CRB — Styles front public
   Préfixe : crb-  (ne JAMAIS utiliser de classes sans préfixe)
   --------------------------------------------------------------------------
   Cette feuille s'appuie uniquement sur les variables --crb-* définies
   dans app.css. Toute couleur en dur est interdite.

   Page courante : Landing "Site en construction"
   - Fond atmosphérique vert profond (couleur signature 60%)
   - Logo officiel encadré drapeau CI
   - Compte à rebours stylisé jusqu'à l'ouverture
   - Carte de la région en filigrane
   - Formulaire de notification e-mail (AJAX)
   - Liens vers les pages institutionnelles existantes (Facebook)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fond atmosphérique de la landing
   -------------------------------------------------------------------------- */
.crb-landing {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse 85% 55% at 12% 90%,
            var(--crb-c-green-deep-70) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 65% 48% at 88% 8%,
            var(--crb-c-orange-ci-30) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse 55% 40% at 50% 50%,
            var(--crb-c-blue-water-12) 0%,
            transparent 58%
        ),
        linear-gradient(155deg, #061d12 0%, #0c2818 50%, #051912 100%);
    color: var(--crb-c-cream);
}

/* Filigrane carte de la région (texture institutionnelle) */
.crb-landing__map {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(820px, 95vw);
    height: auto;
    opacity: 0.04;
    filter: invert(1) contrast(1.4);
    pointer-events: none;
    z-index: var(--crb-z-bg);
}

/* Ondulations bleu eau (rappel du logo) */
.crb-landing__ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid var(--crb-c-blue-water-25);
    pointer-events: none;
    z-index: var(--crb-z-bg);
    animation: crb-ripple 9s ease-out infinite;
}

.crb-landing__ripple--1 {
    width: 280px;
    height: 280px;
    animation-delay: 0s;
}
.crb-landing__ripple--2 {
    width: 520px;
    height: 520px;
    animation-delay: 2.2s;
}
.crb-landing__ripple--3 {
    width: 800px;
    height: 800px;
    animation-delay: 4.4s;
}
.crb-landing__ripple--4 {
    width: 1120px;
    height: 1120px;
    animation-delay: 6.6s;
}

@keyframes crb-ripple {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Particules flottantes (couleurs palette CRB) */
.crb-landing__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--crb-z-bg);
}

.crb-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: crb-float linear infinite;
}

@keyframes crb-float {
    0% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
    12% {
        opacity: 0.75;
    }
    88% {
        opacity: 0.25;
    }
    100% {
        opacity: 0;
        transform: translateY(-92vh) scale(0);
    }
}

/* --------------------------------------------------------------------------
   2. Layout principal (centré, vertical)
   -------------------------------------------------------------------------- */
.crb-landing__page {
    position: relative;
    z-index: var(--crb-z-base);
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Padding inline strictement symétrique (gauche === droite). Propriété
       logique préférée à `padding-left/right` pour expliciter l'intention. */
    padding-block: var(--crb-space-7);
    padding-inline: var(--crb-space-4);
    text-align: center;
    gap: var(--crb-space-5);
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2 bis. Sections institutionnelles — espacement vertical homogène
   -------------------------------------------------------------------------- */
.crb-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--crb-space-4);
}

/* ── Hero présidentiel : 2 colonnes desktop, identité + portrait ────────── */
.crb-hero--president {
    /* Largeur 100 % sur mobile : épouse exactement les paddings inline de
       `.crb-landing__page` (gauche === droite). Le min(1240px, …) ne
       s'active qu'à partir du desktop (>= 992px). */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    box-sizing: border-box;
}

.crb-hero--president .crb-hero__identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--crb-space-4);
    width: 100%;
}

@media (min-width: 992px) {
    .crb-hero--president {
        /* Desktop : largeur étendue jusqu'à 1240px, centrée par margin auto.
           `align-items: flex-start` aligne les hauts des deux colonnes : le
           logo (haut de la colonne identité) et le médaillon « LE PRÉSIDENT »
           (haut de la colonne portrait) se retrouvent au même niveau Y. */
        width: min(1240px, 96vw);
        max-width: min(1240px, 96vw);
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: var(--crb-space-7);
        text-align: left;
    }

    .crb-hero--president .crb-hero__identity {
        flex: 1 1 540px;
        align-items: flex-start;
        text-align: left;
    }

    .crb-hero--president .crb-landing__title,
    .crb-hero--president .crb-landing__slogan {
        text-align: left;
    }

    /* Logo + drapeau CI + eyebrow « République de Côte d'Ivoire »
       restent centrés horizontalement dans la colonne identité, même en desktop —
       traitement officiel cérémonial (drapeau au-dessus, devise en haut). */
    .crb-hero--president .crb-logo-wrap,
    .crb-hero--president .crb-flag-bar,
    .crb-hero--president .crb-landing__institution {
        align-self: center;
    }
}

/* --------------------------------------------------------------------------
   2 ter. Portrait présidentiel — autorité institutionnelle immédiate
   --------------------------------------------------------------------------
   Le portrait du Président est le premier élément qui imprime "cette
   structure ne rigole pas". Halo doré radial, bordure-filet en or,
   reveal au scroll, hover scale 1.02 (Loi de Fitts respectée).
   -------------------------------------------------------------------------- */
.crb-president-portrait {
    position: relative;
    flex: 0 0 auto;
    width: min(540px, 94vw);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: crb-portrait-rise 1.1s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Halo doré radial extérieur — signature dopaminergique amplifiée, inspire le respect.
   Plus large, plus saturé, animation pulse plus marquée pour visibilité. */
.crb-president-portrait__halo {
    position: absolute;
    top: -14%;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    aspect-ratio: 1;
    background: radial-gradient(
        circle at 50% 45%,
        rgba(247, 127, 0, 0.5) 0%,
        rgba(198, 134, 66, 0.32) 25%,
        rgba(91, 163, 199, 0.18) 50%,
        rgba(15, 81, 50, 0.08) 70%,
        transparent 85%
    );
    border-radius: 50%;
    filter: blur(14px);
    pointer-events: none;
    z-index: 0;
    animation: crb-halo-pulse 5s ease-in-out infinite;
}

/* Halo intérieur — cercle doré net juste autour du cadre, effet médaillon */
.crb-president-portrait__halo--inner {
    top: -2%;
    width: 104%;
    background: radial-gradient(
        circle,
        rgba(198, 134, 66, 0) 47%,
        rgba(198, 134, 66, 0.55) 49%,
        rgba(247, 127, 0, 0.35) 50%,
        rgba(198, 134, 66, 0.25) 52%,
        transparent 55%
    );
    filter: blur(2px);
    animation-duration: 7s;
    animation-delay: 0.3s;
}

/* Médaillon "Le Président" — bandeau doré gravé en arc au-dessus du portrait */
.crb-president-portrait__medallion {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-bottom: var(--crb-space-3);
    padding: 6px 22px;
    font-family: var(--crb-font-display);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--crb-c-paper);
    background: linear-gradient(
        135deg,
        var(--crb-c-gold) 0%,
        #dba770 50%,
        var(--crb-c-gold) 100%
    );
    border-radius: var(--crb-radius-pill);
    box-shadow:
        0 0 0 1px rgba(198, 134, 66, 0.6),
        0 4px 14px rgba(198, 134, 66, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    animation: crb-medallion-shine 4s ease-in-out infinite;
}

/* Cadre du portrait — cercle avec triple filet doré amplifié + ombre profonde */
.crb-president-portrait__frame {
    position: relative;
    z-index: 1;
    width: min(460px, 88vw);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(
        circle at 50% 30%,
        rgba(91, 163, 199, 0.25) 0%,
        rgba(15, 81, 50, 0.5) 55%,
        rgba(6, 29, 18, 0.9) 100%
    );
    box-shadow:
        0 0 0 2px var(--crb-c-gold),
        0 0 0 8px var(--crb-c-green-deep),
        0 0 0 9px rgba(198, 134, 66, 0.45),
        0 0 0 12px rgba(15, 81, 50, 0.4),
        0 28px 70px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(247, 127, 0, 0.25),
        inset 0 -40px 60px rgba(6, 29, 18, 0.4);
    transition:
        transform var(--crb-transition-base),
        box-shadow var(--crb-transition-base);
}

.crb-president-portrait__frame:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 0 0 2px var(--crb-c-gold),
        0 0 0 8px var(--crb-c-green-deep),
        0 0 0 9px rgba(198, 134, 66, 0.7),
        0 0 0 12px rgba(15, 81, 50, 0.4),
        0 36px 84px rgba(0, 0, 0, 0.65),
        0 0 120px rgba(247, 127, 0, 0.4),
        inset 0 -40px 60px rgba(6, 29, 18, 0.4);
}

.crb-president-portrait__img {
    /* Image PNG carrée 1024x1024 déjà détourée (fond transparent).
       `object-fit: contain` + `object-position: center` suffisent —
       toute transformation (scale + transform-origin bas) faisait sortir
       le visage du cadre rond. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.45));
}

/* Cartouche caption — eyebrow + nom + titre + citation */
.crb-president-portrait__caption {
    position: relative;
    z-index: 1;
    margin-top: var(--crb-space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 460px;
}

.crb-president-portrait__eyebrow {
    font-family: var(--crb-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--crb-c-gold);
}

/* Filet doré sous le nom — séparation institutionnelle */
.crb-president-portrait__rule {
    display: block;
    width: 60px;
    height: 1px;
    margin: var(--crb-space-2) auto;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--crb-c-gold) 50%,
        transparent 100%
    );
    opacity: 0.7;
}

.crb-president-portrait__name {
    font-family: var(--crb-font-display);
    font-weight: 400; /* Marcellus single weight */
    font-size: clamp(1.45rem, 2.8vw, 1.95rem);
    letter-spacing: 0.01em;
    color: var(--crb-c-cream);
    line-height: 1.1;
    margin-top: 4px;
}

.crb-president-portrait__title {
    font-family: var(--crb-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--crb-c-orange-ci);
    margin-bottom: var(--crb-space-2);
}

/* Mention secondaire — fonctions ministérielles + parlementaires.
   Plus discrète que le titre principal (PCR-BAGOUÉ) qui reste prioritaire. */
.crb-president-portrait__extra-title {
    display: block;
    font-family: var(--crb-font-body);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(250, 247, 238, 0.7);
    margin-bottom: var(--crb-space-3);
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* Badge Facebook officiel vérifié — preuve d'autorité externe Meta.
   Lien cliquable vers la page Facebook personnelle vérifiée du Président
   (118K abonnés, badge bleu Meta — vérification indépendante de l'institution). */
.crb-president-portrait__verified {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--crb-space-4);
    padding: 8px 16px;
    font-family: var(--crb-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--crb-c-cream);
    text-decoration: none;
    background: rgba(24, 119, 242, 0.12); /* Bleu Meta sur fond translucide */
    border: 1px solid rgba(24, 119, 242, 0.45);
    border-radius: var(--crb-radius-pill);
    transition:
        background var(--crb-transition-fast),
        border-color var(--crb-transition-fast),
        transform var(--crb-transition-fast);
}

.crb-president-portrait__verified:hover,
.crb-president-portrait__verified:focus-visible {
    background: rgba(24, 119, 242, 0.22);
    border-color: #1877f2;
    transform: translateY(-1px);
}

.crb-president-portrait__verified-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #1877f2; /* Bleu officiel Meta — couleur du badge de vérification */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.crb-president-portrait__verified-label {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .crb-president-portrait__verified-label {
        white-space: normal;
        text-align: left;
    }
}

.crb-president-portrait__quote {
    /* Citation italique → Manrope italic 500 (Marcellus pas d'italique) */
    font-family: var(--crb-font-body);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(0.92rem, 1.6vw, 1.05rem);
    line-height: 1.55;
    color: rgba(250, 247, 238, 0.88);
    padding: var(--crb-space-3) var(--crb-space-4);
    border-top: 1px solid rgba(198, 134, 66, 0.25);
    border-bottom: 1px solid rgba(198, 134, 66, 0.25);
    margin: 0;
    quotes: none;
    position: relative;
}

.crb-president-portrait__quote-mark {
    color: var(--crb-c-gold);
    font-style: normal;
    font-weight: 700;
    font-size: 1.3em;
    line-height: 0.6;
    margin: 0 4px;
    vertical-align: -0.1em;
}

.crb-president-portrait__quote-mark--close {
    margin-left: 0;
    margin-right: 0;
}

@keyframes crb-portrait-rise {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes crb-halo-pulse {
    0%,
    100% {
        opacity: 0.85;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.06);
    }
}

@keyframes crb-medallion-shine {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(198, 134, 66, 0.6),
            0 4px 14px rgba(198, 134, 66, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(247, 127, 0, 0.7),
            0 6px 22px rgba(247, 127, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
}

@media (max-width: 575.98px) {
    .crb-president-portrait {
        /* Mobile : on respecte l'ordre HTML (logo + identité d'abord, puis portrait).
           L'identité institutionnelle prime sur l'autorité personnelle au premier scroll. */
        width: 100%;
        max-width: 100%;
    }

    .crb-president-portrait__frame {
        width: min(280px, 78vw);
    }

    /* Halo dimensionné pour ne JAMAIS dépasser la largeur de l'écran sur mobile.
       Sans cette borne, 130% de 94vw ≈ 122vw → débordement horizontal latent. */
    .crb-president-portrait__halo {
        width: min(110%, 92vw);
    }

    .crb-president-portrait__halo--inner {
        width: min(104%, 84vw);
    }

    .crb-president-portrait__medallion {
        font-size: 0.7rem;
        letter-spacing: 0.35em;
        padding: 5px 16px;
    }

    .crb-president-portrait__quote {
        font-size: 0.92rem;
    }
}

.crb-section__eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--crb-c-orange-ci);
    font-weight: 600;
    margin-bottom: var(--crb-space-2);
}

.crb-section__title {
    font-family: var(--crb-font-display);
    font-weight: 400; /* Marcellus single weight */
    font-size: clamp(1.85rem, 4.8vw, 2.7rem);
    letter-spacing: 0;
    color: var(--crb-c-cream);
    line-height: 1.12;
    margin-bottom: var(--crb-space-3);
    text-align: center;
}

.crb-section__title--light {
    color: var(--crb-c-orange-ci);
    font-style: italic;
}

/* Variantes encre — sections sur fond clair */
.crb-section__title--ink {
    color: var(--crb-c-green-deep);
}
.crb-section__eyebrow--ink {
    color: var(--crb-c-orange-ci);
}

.crb-section__intro {
    max-width: 720px;
    margin: 0 auto var(--crb-space-5);
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(250, 247, 238, 0.78);
    text-align: center;
}

.crb-section__intro--ink {
    color: rgba(26, 42, 31, 0.75);
}

.crb-section__intro strong {
    color: var(--crb-c-orange-ci);
    font-weight: 600;
}

/* Section sur fond crème — alternance institutionnelle, scande la lecture.
   Full-bleed : la section dépasse les paddings du parent pour atteindre les
   bords du viewport. `max-width: 100vw` borne la largeur même si le parent
   est plus étroit que prévu. */
.crb-section--cream {
    background: var(--crb-c-cream);
    color: var(--crb-c-ink);
    padding: var(--crb-space-7) var(--crb-space-5);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    border-top: 4px solid var(--crb-c-gold);
    border-bottom: 4px solid var(--crb-c-gold);
    box-shadow:
        inset 0 6px 12px rgba(0, 0, 0, 0.05),
        inset 0 -6px 12px rgba(0, 0, 0, 0.05);
}

.crb-section--cream .crb-section__title {
    color: var(--crb-c-green-deep);
}

/* Mobile : alléger les paddings pour donner plus d'espace utile aux cards. */
@media (max-width: 575.98px) {
    .crb-section--cream {
        padding: var(--crb-space-5) var(--crb-space-3);
    }
}

/* --------------------------------------------------------------------------
   3. Logo + anneau drapeau CI
   -------------------------------------------------------------------------- */
.crb-logo-wrap {
    animation: crb-fade-drop 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-logo-ring {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    padding: 5px;
    /* Anneau drapeau CI : orange + blanc + vert (proportions du drapeau ivoirien) */
    background: conic-gradient(
        var(--crb-c-orange-ci) 0deg 120deg,
        #ffffff 120deg 240deg,
        var(--crb-c-green-deep) 240deg 360deg
    );
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 3px var(--crb-c-blue-water-12),
        var(--crb-shadow-glow-green),
        var(--crb-shadow-strong);
    animation: crb-ring-pulse 4s ease-in-out infinite;
}

.crb-logo-ring__img {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--crb-c-paper);
}

@keyframes crb-ring-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 3px var(--crb-c-blue-water-12),
            var(--crb-shadow-glow-green),
            var(--crb-shadow-strong);
    }
    50% {
        box-shadow:
            0 0 0 4px var(--crb-c-blue-water-25),
            0 0 48px rgba(45, 143, 90, 0.6),
            var(--crb-shadow-strong);
    }
}

/* --------------------------------------------------------------------------
   4. Titres et textes institutionnels
   -------------------------------------------------------------------------- */
.crb-landing__institution {
    font-weight: 300;
    font-size: clamp(0.7rem, 1.8vw, 0.84rem);
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--crb-c-orange-ci);
    animation: crb-fade-drop 1s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-landing__title {
    font-family: var(--crb-font-display);
    font-weight: 400; /* Marcellus n'a qu'une graisse — c'est sa force monumentale */
    font-size: clamp(2.4rem, 7.4vw, 5rem);
    letter-spacing: -0.005em;
    line-height: 1.02;
    color: var(--crb-c-cream);
    animation: crb-fade-drop 1s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-landing__title-accent {
    /* « Bagoué » = mot-clé institutionnel le plus important du H1.
       Doit être plus visible que « Conseil Régional de la ».
       Orange CI sur fond vert profond = ratio 4.6:1 (WCAG AA conforme),
       et cohérent avec le slogan italique orange et le drapeau ivoirien. */
    font-style: normal;
    color: var(--crb-c-orange-ci);
}

.crb-landing__subtitle {
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* Contraste WCAG AA respecté — passage de 0.5 à 0.78 d'opacité */
    color: rgba(250, 247, 238, 0.78);
    animation: crb-fade-drop 1s 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-landing__slogan {
    /* Slogan en italique → Manrope italic (Marcellus n'a pas d'italique) */
    font-family: var(--crb-font-body);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 2.8vw, 1.45rem);
    line-height: 1.4;
    color: var(--crb-c-orange-ci);
    margin-top: var(--crb-space-2);
    max-width: 760px;
    animation: crb-fade-drop 1s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --------------------------------------------------------------------------
   4 bis. Devise CRB (Espérance · Développement · Solidarité)
   --------------------------------------------------------------------------
   Bandeau visuel fort — c'est la signature du logo CRB, le filet doré
   qui ancre la légitimité institutionnelle à chaque visite.
   -------------------------------------------------------------------------- */
.crb-values {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(var(--crb-space-3), 3vw, var(--crb-space-6));
    list-style: none;
    padding: var(--crb-space-4) var(--crb-space-6);
    margin-top: var(--crb-space-3);
    position: relative;
    /* Doubles filets dorés au-dessus et au-dessous, plus saturés */
    border-top: 2px solid var(--crb-c-gold);
    border-bottom: 2px solid var(--crb-c-gold);
    background: linear-gradient(
        180deg,
        rgba(198, 134, 66, 0.06) 0%,
        rgba(198, 134, 66, 0.02) 50%,
        rgba(198, 134, 66, 0.06) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(247, 127, 0, 0.18),
        inset 0 -1px 0 rgba(247, 127, 0, 0.18);
    animation: crb-fade-drop 1s 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-values__item {
    /* Devise en italique → Manrope italic (Marcellus n'a pas d'italique).
       Display inline-flex pour intégrer le séparateur ✦ DANS la flow flex
       (sinon `position: absolute` du ::after ignore le centrage justify-content). */
    display: inline-flex;
    align-items: center;
    gap: var(--crb-space-3);
    font-family: var(--crb-font-body);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    color: var(--crb-c-gold);
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Séparateur ✦ en flow inline (pas absolute) → flex calcule la largeur réelle
   et `justify-content: center` centre vraiment chaque ligne, sans traînée. */
.crb-values__item:not(:last-child)::after {
    content: "✦";
    color: var(--crb-c-orange-ci);
    opacity: 0.65;
    font-size: 0.7em;
    line-height: 1;
    font-style: normal;
}

@media (max-width: 575.98px) {
    .crb-values {
        gap: var(--crb-space-2);
        padding: var(--crb-space-3) var(--crb-space-3);
    }

    .crb-values__item {
        gap: var(--crb-space-2);
    }
}

/* --------------------------------------------------------------------------
   5. Badge "Site en construction"
   -------------------------------------------------------------------------- */
.crb-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--crb-space-3);
    background: var(--crb-c-green-deep-15);
    border: 1px solid var(--crb-c-green-leaf-25);
    border-radius: var(--crb-radius-pill);
    padding: 10px 26px;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--crb-c-green-leaf);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: crb-fade-drop 1s 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--crb-c-green-leaf);
    box-shadow: 0 0 8px var(--crb-c-green-leaf);
    animation: crb-pulse-dot 2s ease-in-out infinite;
}

@keyframes crb-pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.6);
    }
}

/* --------------------------------------------------------------------------
   6. Compte à rebours
   -------------------------------------------------------------------------- */
.crb-countdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 4vw, 38px);
    width: 100%;
    max-width: 100%;
    animation: crb-fade-drop 1s 0.54s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-countdown__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--crb-space-2);
}

.crb-countdown__circle {
    position: relative;
    /* Cercles dimensionnés pour tenir 4 colonnes sur mobile (≥ 360px) :
       4 × 76px + 3 × 10px = ~334px → laisse 26px de marge à 360px. */
    width: clamp(76px, 10vw, 160px);
    height: clamp(76px, 21vw, 160px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crb-countdown__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.crb-countdown__ring-bg {
    fill: none;
    stroke: rgba(250, 247, 238, 0.08);
    stroke-width: 3.5;
}

.crb-countdown__ring-fg {
    fill: none;
    stroke-width: 3.5;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    stroke-linecap: round;
    transform-origin: center;
    transform: rotate(-90deg);
    transition: stroke-dashoffset 0.95s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Couleurs des anneaux = palette CRB */
.crb-countdown__ring-fg--days {
    stroke: var(--crb-c-green-leaf);
}
.crb-countdown__ring-fg--hours {
    stroke: var(--crb-c-orange-ci);
}
.crb-countdown__ring-fg--mins {
    stroke: var(--crb-c-blue-water);
}
.crb-countdown__ring-fg--secs {
    stroke: var(--crb-c-gold);
}

.crb-countdown__box--days .crb-countdown__circle {
    filter: drop-shadow(0 0 8px rgba(45, 143, 90, 0.55));
}
.crb-countdown__box--hours .crb-countdown__circle {
    filter: drop-shadow(0 0 8px rgba(247, 127, 0, 0.55));
}
.crb-countdown__box--mins .crb-countdown__circle {
    filter: drop-shadow(0 0 8px rgba(91, 163, 199, 0.55));
}
.crb-countdown__box--secs .crb-countdown__circle {
    filter: drop-shadow(0 0 8px rgba(198, 134, 66, 0.55));
}

.crb-countdown__value {
    /* Chiffres compte à rebours → Manrope 700 tabular-nums (Marcellus pas idéal pour les digits compactés) */
    font-family: var(--crb-font-body);
    font-size: clamp(2.1rem, 6.5vw, 3.4rem);
    font-weight: 700;
    color: var(--crb-c-cream);
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings:
        "tnum" on,
        "lnum" on;
}

.crb-countdown__label {
    font-size: clamp(0.7rem, 1.5vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(250, 247, 238, 0.6);
}

/* Date de lancement — cartouche doré institutionnel */
.crb-launch-date {
    display: inline-flex;
    align-items: center;
    gap: var(--crb-space-3);
    margin-top: var(--crb-space-2);
    padding: 12px 24px;
    font-family: var(--crb-font-body);
    font-size: clamp(0.72rem, 1.5vw, 0.92rem);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--crb-c-cream);
    background: rgba(15, 81, 50, 0.45);
    border: 1px solid rgba(198, 134, 66, 0.55);
    border-radius: var(--crb-radius-pill);
    box-shadow:
        0 0 0 1px rgba(198, 134, 66, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: crb-fade-drop 1s 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-launch-date::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--crb-c-orange-ci);
    box-shadow: 0 0 12px var(--crb-c-orange-ci);
    animation: crb-pulse-dot 2s ease-in-out infinite;
}

.crb-launch-date strong {
    color: var(--crb-c-orange-ci);
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   7. Barre de progression — étapes nommées du projet
   -------------------------------------------------------------------------- */
.crb-progress {
    /* width: 100 % du parent (= page content area, soit viewport - 32 px de
       padding-inline). max-width plafonne au-delà de 640 px pour conserver
       la lisibilité sur desktop. Cohérent avec toutes les autres sections. */
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    animation: crb-fade-drop 1s 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-progress__labels {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(250, 247, 238, 0.7);
    margin-bottom: var(--crb-space-3);
}

.crb-progress__labels strong {
    font-family: var(--crb-font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--crb-c-orange-ci);
    letter-spacing: 0;
}

.crb-progress__track {
    height: 10px;
    background: rgba(15, 81, 50, 0.4);
    border: 1px solid rgba(198, 134, 66, 0.25);
    border-radius: var(--crb-radius-pill);
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

.crb-progress__fill {
    height: 100%;
    width: 0;
    /* Gradient palette CRB : vert profond → vert feuille → orange CI */
    background: linear-gradient(
        90deg,
        var(--crb-c-green-deep) 0%,
        var(--crb-c-green-leaf) 50%,
        var(--crb-c-orange-ci) 100%
    );
    border-radius: var(--crb-radius-pill);
    transition: width 2.2s 1s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow:
        var(--crb-shadow-glow-green),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Étapes nommées du projet sous la barre */
.crb-progress__steps {
    display: flex;
    justify-content: space-between;
    margin-top: var(--crb-space-3);
    padding: 0;
    list-style: none;
}

.crb-progress__step {
    flex: 1;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(250, 247, 238, 0.4);
    position: relative;
    padding-top: 14px;
}

.crb-progress__step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: rgba(250, 247, 238, 0.18);
    border: 1.5px solid rgba(250, 247, 238, 0.25);
    transition:
        background var(--crb-transition-base),
        border-color var(--crb-transition-base);
}

.crb-progress__step--done {
    color: var(--crb-c-green-leaf);
}

.crb-progress__step--done::before {
    background: var(--crb-c-green-leaf);
    border-color: var(--crb-c-green-leaf);
    box-shadow: 0 0 10px rgba(45, 143, 90, 0.5);
}

.crb-progress__step--current {
    color: var(--crb-c-orange-ci);
}

.crb-progress__step--current::before {
    background: var(--crb-c-orange-ci);
    border-color: var(--crb-c-orange-ci);
    box-shadow: 0 0 12px rgba(247, 127, 0, 0.6);
    animation: crb-pulse-dot 2s ease-in-out infinite;
}

@media (max-width: 575.98px) {
    .crb-progress__step {
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }
}

/* --------------------------------------------------------------------------
   8. Section "Notre territoire" — carte région avec pastilles départements
   --------------------------------------------------------------------------
   La carte du Bagoué (asset region_bagoue.jpg) devient enfin centrale,
   plus en filigrane à 4 %. Pastilles cliquables au-dessus.
   -------------------------------------------------------------------------- */
.crb-territory-map {
    width: 100%;
    max-width: 1200px;
    margin: var(--crb-space-7) auto;
    text-align: center;
}

.crb-territory-map__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--crb-space-5);
    margin-top: var(--crb-space-5);
    align-items: center;
}

@media (min-width: 992px) {
    .crb-territory-map__layout {
        grid-template-columns: 1.2fr 1fr;
        gap: var(--crb-space-7);
    }
}

/* Visuel de la carte — gradient doré derrière + image lumineuse */
.crb-territory-map__visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    aspect-ratio: 1;
    border-radius: var(--crb-radius-lg);
    background: radial-gradient(
        circle at 50% 50%,
        rgba(247, 127, 0, 0.18) 0%,
        rgba(15, 81, 50, 0.32) 60%,
        transparent 100%
    );
    padding: var(--crb-space-4);
}

.crb-territory-map__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* La carte est en niveaux de gris à l'origine — on la teinte en or institutionnel */
    filter: brightness(1.15) sepia(0.4) hue-rotate(-15deg) saturate(1.9)
        drop-shadow(0 12px 32px rgba(0, 0, 0, 0.9));
    opacity: 0.92;
}

/* Pastilles départements — positionnement absolu sur la carte.
   Le point (dot) est ancré sur la coordonnée (top, left) ; le label
   coule à sa droite. Sans cet ancrage, un label long (« Boundiali ·
   Chef-lieu ») tire le point vers la gauche jusqu'à le sortir du lobe. */
.crb-territory-map__pin {
    position: absolute;
    transform: translate(-8px, -50%); /* -8px = demi-largeur du dot (16 px) */
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--crb-space-2);
    pointer-events: none;
}

/* Positions calées sur la carte officielle de la région : Tengréla au nord
   (frontière Mali), Kouto au centre, Boundiali chef-lieu au sud.
   Les valeurs ci-dessous représentent désormais la position du POINT,
   pas du centre de la pastille — direct et indépendant du label. */
.crb-territory-map__pin--tengrela {
    top: 24%;
    left: 50%;
}
.crb-territory-map__pin--kouto {
    top: 52%;
    left: 50%;
}
.crb-territory-map__pin--boundiali {
    top: 72%;
    left: 50%;
}

.crb-territory-map__pin-dot {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--crb-c-orange-ci);
    border: 3px solid var(--crb-c-paper);
    box-shadow:
        0 0 0 2px var(--crb-c-orange-ci),
        0 0 16px rgba(247, 127, 0, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.4);
    animation: crb-pulse-dot 2.4s ease-in-out infinite;
}

.crb-territory-map__pin--boundiali .crb-territory-map__pin-dot {
    width: 20px;
    height: 20px;
    background: var(--crb-c-orange-ci);
}

.crb-territory-map__pin--tengrela .crb-territory-map__pin-dot,
.crb-territory-map__pin--kouto .crb-territory-map__pin-dot {
    background: var(--crb-c-gold);
    box-shadow:
        0 0 0 2px var(--crb-c-gold),
        0 0 14px rgba(198, 134, 66, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.crb-territory-map__pin-label {
    font-family: var(--crb-font-body);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--crb-c-paper);
    background: rgba(15, 81, 50, 0.92);
    padding: 4px 10px;
    border-radius: var(--crb-radius-sm);
    border: 1px solid rgba(198, 134, 66, 0.4);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Liste des départements à droite */
.crb-territory-map__list {
    display: flex;
    flex-direction: column;
    gap: var(--crb-space-3);
    list-style: none;
}

.crb-territory-map__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Padding compacté sur mobile : la version 16/16 laissait des cards de
       150 px de haut alors que le contenu utile en réclame ~110. */
    padding: var(--crb-space-3) var(--crb-space-4);
    padding-right: var(--crb-space-7); /* réserve la place du numérotage */
    background: rgba(15, 81, 50, 0.32);
    border: 1px solid rgba(91, 163, 199, 0.18);
    border-left: 3px solid var(--crb-c-gold);
    border-radius: var(--crb-radius-md);
    text-align: left;
    transition:
        background var(--crb-transition-base),
        transform var(--crb-transition-fast),
        border-left-color var(--crb-transition-base);
}

.crb-territory-map__card:hover {
    background: rgba(15, 81, 50, 0.5);
    transform: translateX(6px);
    border-left-color: var(--crb-c-orange-ci);
}

.crb-territory-map__card--chef {
    border-left-color: var(--crb-c-orange-ci);
    background: rgba(247, 127, 0, 0.1);
}

/* Numérotage 01–03 — Marcellus or, top-right de la card. */
.crb-territory-map__card-num {
    position: absolute;
    top: var(--crb-space-3);
    right: var(--crb-space-4);
    font-family: var(--crb-font-display);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--crb-c-gold);
    opacity: 0.65;
    line-height: 1;
}

.crb-territory-map__card--chef .crb-territory-map__card-num {
    color: var(--crb-c-orange-ci);
    opacity: 0.85;
}

.crb-territory-map__card-eyebrow {
    font-family: var(--crb-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--crb-c-gold);
}

.crb-territory-map__card-name {
    font-family: var(--crb-font-display);
    font-size: 1.45rem;
    color: var(--crb-c-cream);
    line-height: 1.1;
    margin-top: 2px;
}

.crb-territory-map__card-value {
    font-family: var(--crb-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--crb-c-orange-ci);
    margin-top: 4px;
}

.crb-territory-map__card-suffix {
    font-size: 0.78rem;
    color: rgba(250, 247, 238, 0.55);
}

/* --------------------------------------------------------------------------
   8 bis. Scroll cue — invitation à scroller sous le hero
   -------------------------------------------------------------------------- */
.crb-scroll-cue {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--crb-space-2);
    margin-top: var(--crb-space-5);
    color: rgba(250, 247, 238, 0.6);
    text-decoration: none;
    transition: color var(--crb-transition-base);
    animation: crb-fade-drop 1s 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-scroll-cue:hover,
.crb-scroll-cue:focus-visible {
    color: var(--crb-c-orange-ci);
}

.crb-scroll-cue__label {
    font-family: var(--crb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.crb-scroll-cue__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid currentColor;
    animation: crb-scroll-bounce 2.4s ease-in-out infinite;
}

.crb-scroll-cue__arrow svg {
    width: 16px;
    height: 16px;
}

@keyframes crb-scroll-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .crb-scroll-cue__arrow {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   9. Formulaire notification e-mail
   -------------------------------------------------------------------------- */
.crb-notify-block {
    width: 100%;
    max-width: 640px;
    margin: var(--crb-space-7) auto;
    text-align: center;
}

.crb-notify {
    width: 100%;
    margin-top: var(--crb-space-4);
    animation: crb-fade-drop 1s 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-notify__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.crb-notify__assurance {
    margin-top: var(--crb-space-3);
    font-size: 0.78rem;
    color: rgba(250, 247, 238, 0.55);
    letter-spacing: 0.02em;
}

.crb-notify__label {
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(250, 247, 238, 0.5);
    margin-bottom: var(--crb-space-3);
}

.crb-notify__row {
    display: flex;
    border: 1px solid var(--crb-c-blue-water-25);
    border-radius: var(--crb-radius-md);
    overflow: hidden;
    background: rgba(15, 81, 50, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        border-color var(--crb-transition-fast),
        box-shadow var(--crb-transition-fast);
}

.crb-notify__row:focus-within {
    border-color: var(--crb-c-orange-ci);
    box-shadow: 0 0 0 3px var(--crb-c-orange-ci-15);
}

.crb-notify__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 14px 18px;
    font-family: var(--crb-font-body);
    font-size: 0.9rem;
    color: var(--crb-c-cream);
    min-width: 0;
}

.crb-notify__input::placeholder {
    color: rgba(250, 247, 238, 0.32);
}

.crb-notify__btn {
    background: var(--crb-c-orange-ci);
    color: var(--crb-c-paper);
    border: none;
    padding: 14px 22px;
    font-family: var(--crb-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition:
        background var(--crb-transition-fast),
        box-shadow var(--crb-transition-fast);
    white-space: nowrap;
}

.crb-notify__btn:hover {
    background: var(--crb-c-orange-warm);
    box-shadow: 0 0 18px var(--crb-c-orange-ci-30);
}

.crb-notify__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* État de chargement (AJAX en cours) — loader léger sans overlay opaque */
.crb-notify.is-loading .crb-notify__row {
    border-color: var(--crb-c-orange-ci);
    box-shadow: 0 0 0 3px var(--crb-c-orange-ci-15);
}

.crb-notify.is-loading .crb-notify__btn {
    background: var(--crb-c-orange-warm);
    position: relative;
    padding-left: 36px;
}

.crb-notify.is-loading .crb-notify__btn::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--crb-c-paper);
    border-radius: 50%;
    animation: crb-spin 0.7s linear infinite;
}

@keyframes crb-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------------------------------------------------------
   9 bis. Overlay loader CRB — affiché pendant les soumissions AJAX
   --------------------------------------------------------------------------
   Durée minimale d'affichage pilotée par CRB_LOADER_MIN_MS (lu via
   data-loader-ms côté JS). Permet au visiteur de lire le titre + sous-titre.
   -------------------------------------------------------------------------- */
.crb-loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 29, 18, 0.78); /* vert très sombre ~ palette */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--crb-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--crb-space-4);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.crb-loader-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.crb-loader-overlay__card {
    width: min(420px, 100%);
    background: var(--crb-c-paper);
    border: 1px solid var(--crb-c-glass-border);
    border-radius: var(--crb-radius-lg);
    padding: var(--crb-space-7) var(--crb-space-5);
    text-align: center;
    box-shadow: var(--crb-shadow-strong);
    transform: translateY(12px) scale(0.97);
    transition: transform 0.3s var(--crb-transition-base);
}

.crb-loader-overlay.is-visible .crb-loader-overlay__card {
    transform: translateY(0) scale(1);
}

.crb-loader-overlay__spinner {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--crb-space-5);
    border: 3px solid var(--crb-c-green-deep-08);
    border-top-color: var(--crb-c-green-primary);
    border-radius: 50%;
    animation: crb-spin 0.7s linear infinite;
}

.crb-loader-overlay__title {
    font-family: var(--crb-font-display);
    font-size: 1.6rem;
    font-weight: 400; /* Marcellus single weight */
    letter-spacing: 0;
    color: var(--crb-c-green-deep);
    margin-bottom: var(--crb-space-3);
}

.crb-loader-overlay__subtitle {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--crb-c-ink);
    opacity: 0.78;
}

.crb-notify__msg {
    margin-top: var(--crb-space-2);
    font-size: 0.8rem;
    min-height: 20px;
    letter-spacing: 0.02em;
}

.crb-notify__msg--success {
    color: var(--crb-c-green-leaf);
}
.crb-notify__msg--error {
    color: var(--crb-c-orange-ci);
}

/* --------------------------------------------------------------------------
   9 ter. Modale liste d'attente — auto-display
   --------------------------------------------------------------------------
   S'affiche automatiquement (délai + scroll) pour proposer au visiteur
   engagé de rejoindre la liste d'attente. Z-index `--crb-z-drawer` (90)
   pour rester SOUS l'overlay loader (`--crb-z-modal` = 100) qui doit
   apparaître par-dessus pendant la soumission AJAX.
   Mobile-first ; cibles tactiles 44 px ; piégeage du focus côté JS.
   -------------------------------------------------------------------------- */
.crb-waitlist {
    position: fixed;
    inset: 0;
    z-index: var(--crb-z-drawer);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--crb-space-3);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.crb-waitlist.is-visible {
    opacity: 1;
    visibility: visible;
}

.crb-waitlist__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 29, 18, 0.84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
}

.crb-waitlist__card {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - var(--crb-space-5));
    overflow-y: auto;
    padding: var(--crb-space-7) var(--crb-space-5) var(--crb-space-5);
    /* Carte vert profond institutionnel + filet doré : registre du sceau. */
    background:
        radial-gradient(circle at 50% 0%, rgba(198, 134, 66, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #103E27 0%, #0B2D1C 100%);
    border: 1px solid var(--crb-c-gold-30);
    border-radius: var(--crb-radius-lg);
    box-shadow: var(--crb-shadow-strong);
    text-align: center;
    transform: translateY(28px) scale(0.96);
    transition: transform 0.4s var(--crb-transition-base);
}

.crb-waitlist.is-visible .crb-waitlist__card {
    transform: translateY(0) scale(1);
}

/* Bouton de fermeture × — cible tactile 44 px (WCAG 2.2 AA) */
.crb-waitlist__close {
    position: absolute;
    top: var(--crb-space-3);
    right: var(--crb-space-3);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 247, 238, 0.06);
    border: 1px solid rgba(250, 247, 238, 0.14);
    border-radius: 50%;
    color: var(--crb-c-cream);
    cursor: pointer;
    transition:
        background var(--crb-transition-fast),
        border-color var(--crb-transition-fast),
        transform var(--crb-transition-fast);
}

.crb-waitlist__close:hover,
.crb-waitlist__close:focus-visible {
    background: var(--crb-c-orange-ci-15);
    border-color: var(--crb-c-orange-ci);
    color: var(--crb-c-orange-ci);
    transform: scale(1.04);
    outline: none;
}

.crb-waitlist__close svg {
    width: 18px;
    height: 18px;
}

/* Médaillon logo en tête de carte — registre institutionnel */
.crb-waitlist__crest {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--crb-space-4);
    border-radius: 50%;
    background: rgba(91, 163, 199, 0.18);
    border: 1px solid var(--crb-c-gold-30);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.crb-waitlist__crest-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.crb-waitlist__eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--crb-c-orange-ci);
    font-weight: 600;
    margin-bottom: var(--crb-space-2);
}

.crb-waitlist__title {
    font-family: var(--crb-font-display);
    font-weight: 400;
    font-size: clamp(1.55rem, 4.6vw, 2rem);
    color: var(--crb-c-cream);
    line-height: 1.18;
    margin-bottom: var(--crb-space-3);
}

.crb-waitlist__desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(250, 247, 238, 0.78);
    margin-bottom: var(--crb-space-5);
}

.crb-waitlist__form {
    text-align: left;
}

.crb-waitlist__label {
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(250, 247, 238, 0.58);
    margin-bottom: var(--crb-space-2);
}

.crb-waitlist__row {
    display: flex;
    flex-direction: column;
    gap: var(--crb-space-2);
    border: 1px solid var(--crb-c-blue-water-25);
    border-radius: var(--crb-radius-md);
    padding: 6px;
    background: rgba(15, 81, 50, 0.32);
    transition:
        border-color var(--crb-transition-fast),
        box-shadow var(--crb-transition-fast);
}

.crb-waitlist__row:focus-within {
    border-color: var(--crb-c-orange-ci);
    box-shadow: 0 0 0 3px var(--crb-c-orange-ci-15);
}

.crb-waitlist__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 12px 14px;
    font-family: var(--crb-font-body);
    font-size: 16px; /* anti-zoom iOS — CLAUDE.md */
    color: var(--crb-c-cream);
    min-width: 0;
}

.crb-waitlist__input::placeholder {
    color: rgba(250, 247, 238, 0.32);
}

.crb-waitlist__btn {
    background: var(--crb-c-orange-ci);
    color: var(--crb-c-paper);
    border: none;
    padding: 14px 20px;
    min-height: 44px;
    font-family: var(--crb-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--crb-radius-sm);
    cursor: pointer;
    transition:
        background var(--crb-transition-fast),
        box-shadow var(--crb-transition-fast),
        transform var(--crb-transition-fast);
    white-space: nowrap;
}

.crb-waitlist__btn:hover,
.crb-waitlist__btn:focus-visible {
    background: var(--crb-c-orange-warm);
    box-shadow: 0 0 18px var(--crb-c-orange-ci-30);
    outline: none;
}

.crb-waitlist__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loader léger pendant la soumission AJAX (mirror du form principal) */
.crb-waitlist__form.is-loading .crb-waitlist__row {
    border-color: var(--crb-c-orange-ci);
    box-shadow: 0 0 0 3px var(--crb-c-orange-ci-15);
}

.crb-waitlist__form.is-loading .crb-waitlist__btn {
    background: var(--crb-c-orange-warm);
    position: relative;
    padding-left: 38px;
}

.crb-waitlist__form.is-loading .crb-waitlist__btn::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--crb-c-paper);
    border-radius: 50%;
    animation: crb-spin 0.7s linear infinite;
}

.crb-waitlist__assurance {
    margin-top: var(--crb-space-3);
    font-size: 0.74rem;
    line-height: 1.5;
    color: rgba(250, 247, 238, 0.5);
    letter-spacing: 0.02em;
    text-align: center;
}

.crb-waitlist__msg {
    margin-top: var(--crb-space-2);
    font-size: 0.8rem;
    min-height: 20px;
    letter-spacing: 0.02em;
    text-align: center;
}

.crb-waitlist__msg--success {
    color: var(--crb-c-green-leaf);
}

.crb-waitlist__msg--error {
    color: var(--crb-c-orange-ci);
}

.crb-waitlist__signature {
    margin-top: var(--crb-space-5);
    font-size: 0.82rem;
    color: rgba(250, 247, 238, 0.62);
    line-height: 1.6;
    font-style: italic;
}

.crb-waitlist__signature strong {
    color: var(--crb-c-gold);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* À partir de 480 px — input + bouton sur la même ligne */
@media (min-width: 480px) {
    .crb-waitlist__row {
        flex-direction: row;
        align-items: stretch;
    }
}

/* Désactive le scroll du body quand la modale est ouverte. */
body.crb-no-scroll {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   10. Réseaux sociaux + contact
   -------------------------------------------------------------------------- */
.crb-socials {
    display: flex;
    gap: var(--crb-space-3);
    animation: crb-fade-drop 1s 0.86s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-soc {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--crb-c-blue-water-25);
    border-radius: 50%;
    color: rgba(250, 247, 238, 0.55);
    transition:
        border-color var(--crb-transition-fast),
        color var(--crb-transition-fast),
        background var(--crb-transition-fast),
        box-shadow var(--crb-transition-fast),
        transform var(--crb-transition-fast);
}

.crb-soc:hover,
.crb-soc:focus-visible {
    border-color: var(--crb-c-green-leaf);
    color: var(--crb-c-paper);
    background: var(--crb-c-green-deep-40);
    box-shadow: 0 0 14px var(--crb-c-green-leaf-25);
    transform: translateY(-3px);
}

.crb-soc__icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Bandeau contact (e-mail + téléphone + adresse) */
.crb-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--crb-space-5);
    font-size: 0.82rem;
    color: rgba(250, 247, 238, 0.55);
    animation: crb-fade-drop 1s 0.92s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crb-contact__item {
    display: inline-flex;
    align-items: center;
    gap: var(--crb-space-2);
    transition: color var(--crb-transition-fast);
}

.crb-contact__item:hover {
    color: var(--crb-c-orange-ci);
}

.crb-contact__icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   11. Footer institutionnel enrichi (partenaires + mentions + crédit)
   -------------------------------------------------------------------------- */
.crb-landing__footer {
    margin-top: var(--crb-space-8);
    width: 100%;
    text-align: center;
    animation: crb-fade-drop 1s 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Bandeau partenaires — Sous l'égide de … */
.crb-landing__partners {
    padding: var(--crb-space-5) var(--crb-space-4);
    border-top: 1px solid rgba(198, 134, 66, 0.25);
    border-bottom: 1px solid rgba(198, 134, 66, 0.25);
    margin-bottom: var(--crb-space-5);
}

.crb-landing__partners-eyebrow {
    display: block;
    font-family: var(--crb-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--crb-c-gold);
    margin-bottom: var(--crb-space-3);
}

.crb-landing__partners-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--crb-space-2);
    list-style: none;
}

.crb-landing__partners-item {
    font-family: var(--crb-font-display);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    color: var(--crb-c-cream);
    letter-spacing: 0.02em;
}

.crb-landing__partners-sep {
    color: var(--crb-c-orange-ci);
    opacity: 0.5;
    font-size: 0.9em;
}

/* Ligne principale du footer */
.crb-landing__footer-line {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(250, 247, 238, 0.6);
    padding: 0 var(--crb-space-4);
}

.crb-landing__footer-line strong {
    color: var(--crb-c-orange-ci);
    font-weight: 700;
}

.crb-landing__footer-sep {
    margin: 0 var(--crb-space-3);
    color: rgba(250, 247, 238, 0.25);
}

.crb-landing__footer a {
    color: var(--crb-c-cream);
    text-decoration: underline;
    text-decoration-color: rgba(198, 134, 66, 0.4);
    text-underline-offset: 3px;
    transition:
        color var(--crb-transition-fast),
        text-decoration-color var(--crb-transition-fast);
}

.crb-landing__footer a:hover {
    color: var(--crb-c-orange-ci);
    text-decoration-color: var(--crb-c-orange-ci);
}

.crb-landing__footer-mentions {
    margin-top: var(--crb-space-3);
    padding: var(--crb-space-3) var(--crb-space-4);
    font-size: 0.7rem;
    color: rgba(250, 247, 238, 0.4);
    letter-spacing: 0.04em;
    border-top: 1px solid rgba(250, 247, 238, 0.06);
}

/* Crédit agence — discret par essence, mais soigné typographiquement.
   Filet doré très fin au-dessus, italique léger, opacité réduite à 35 %.
   Le nom « ST Lab » se révèle au hover : passage en or institutionnel,
   underline doré, micro-translation. Cible tactile 44 px préservée
   par padding vertical du <a>. */
.crb-landing__credits {
    margin: var(--crb-space-4) auto 0;
    padding-top: var(--crb-space-3);
    max-width: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--crb-font-body);
    font-size: 0.7rem;
    font-style: italic;
    letter-spacing: 0.08em;
    color: rgba(250, 247, 238, 0.35);
    border-top: 1px solid rgba(198, 134, 66, 0.18);
    text-transform: uppercase;
}

.crb-landing__credits-label {
    font-weight: 400;
}

.crb-landing__credits-link {
    display: inline-block;
    padding: 6px 4px; /* cible tactile confortable malgré la petite taille */
    color: rgba(198, 134, 66, 0.7);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition:
        color var(--crb-transition-fast),
        border-color var(--crb-transition-fast),
        transform var(--crb-transition-fast);
}

.crb-landing__credits-link:hover,
.crb-landing__credits-link:focus-visible {
    color: var(--crb-c-gold);
    border-bottom-color: var(--crb-c-gold);
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 575.98px) {
    .crb-landing__partners-list {
        flex-direction: column;
        gap: var(--crb-space-2);
    }

    .crb-landing__partners-sep {
        display: none;
    }

    .crb-landing__footer-line {
        display: flex;
        flex-direction: column;
        gap: var(--crb-space-2);
    }

    .crb-landing__footer-sep {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   12. Animations partagées
   -------------------------------------------------------------------------- */
@keyframes crb-fade-drop {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   12 bis. Mot du Président
   -------------------------------------------------------------------------- */
.crb-president {
    width: 100%;
    max-width: 720px;
    margin: var(--crb-space-7) auto var(--crb-space-5);
    padding: var(--crb-space-6) var(--crb-space-5);
    text-align: center;
    position: relative;
    border-top: 1px solid rgba(198, 134, 66, 0.25);
    border-bottom: 1px solid rgba(198, 134, 66, 0.25);
}

.crb-president__quote-mark {
    font-family: var(--crb-font-display);
    font-size: 4rem;
    line-height: 1;
    color: var(--crb-c-orange-ci);
    opacity: 0.5;
    margin-bottom: var(--crb-space-2);
}

.crb-president__quote {
    font-family: var(--crb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.15rem, 2.6vw, 1.55rem);
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--crb-c-cream);
    margin-bottom: var(--crb-space-5);
    quotes: none;
}

.crb-president__quote::before,
.crb-president__quote::after {
    content: none;
}

.crb-president__cite {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.crb-president__name {
    font-family: var(--crb-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--crb-c-orange-ci);
    letter-spacing: 0.04em;
}

.crb-president__title {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(250, 247, 238, 0.55);
}

/* --------------------------------------------------------------------------
   12 ter. 4 axes d'action — Santé, Éducation, Infrastructures, Agriculture
   -------------------------------------------------------------------------- */
.crb-actions {
    width: 100%;
    max-width: 1080px;
    margin: var(--crb-space-7) auto;
    text-align: center;
}

.crb-actions__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--crb-space-4);
    margin-top: var(--crb-space-5);
}

.crb-action-card {
    position: relative;
    background: rgba(15, 81, 50, 0.42);
    border: 1px solid rgba(91, 163, 199, 0.22);
    border-radius: var(--crb-radius-lg);
    /* Padding compacté : la version aérée (32/16/24) faisait des cards de
       400 px de haut sur mobile → trop de scroll. 24/20 max + texte resserré. */
    padding: var(--crb-space-5) var(--crb-space-4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-align: center;
    overflow: hidden;
    transition:
        transform var(--crb-transition-base),
        border-color var(--crb-transition-base),
        box-shadow var(--crb-transition-base);
}

/* Filet doré toujours visible au sommet de chaque card (au lieu d'apparaître
   uniquement au hover — sur mobile il n'y a pas de hover, l'accent éditorial
   doit être présent dès l'arrivée pour signaler la qualité institutionnelle). */
.crb-action-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--crb-c-gold) 50%,
        transparent 100%
    );
    border-radius: 0 0 3px 3px;
    transition:
        width var(--crb-transition-base),
        background var(--crb-transition-base);
}

.crb-action-card:hover {
    transform: translateY(-6px);
    border-color: var(--crb-c-orange-ci);
    box-shadow:
        0 16px 40px rgba(247, 127, 0, 0.22),
        0 0 0 1px var(--crb-c-orange-ci);
}

.crb-action-card:hover::before {
    width: 70%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--crb-c-orange-ci) 50%,
        transparent 100%
    );
}

.crb-action-card:hover .crb-action-card__icon {
    transform: scale(1.08) rotate(-3deg);
}

/* Numérotage discret en haut-droite (01–04) — Marcellus or sur fond
   transparent pour ne pas voler la vedette à l'icône. */
.crb-action-card__num {
    position: absolute;
    top: var(--crb-space-3);
    right: var(--crb-space-4);
    font-family: var(--crb-font-display);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--crb-c-gold);
    opacity: 0.7;
    line-height: 1;
}

/* Icône — ramenée à 64px sur mobile (80px était surdimensionné dans une
   card compactée). Halo coloré conservé. */
.crb-action-card__icon {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--crb-space-3);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        var(--crb-c-green-leaf) 0%,
        var(--crb-c-green-deep) 100%
    );
    box-shadow: 0 8px 24px rgba(45, 143, 90, 0.5);
    transition: transform var(--crb-transition-base);
}

.crb-action-card__icon::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.18;
    z-index: -1;
    filter: blur(12px);
}

.crb-action-card--heart .crb-action-card__icon {
    background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
    box-shadow: 0 8px 24px rgba(185, 28, 28, 0.5);
}
.crb-action-card--book .crb-action-card__icon {
    background: linear-gradient(
        135deg,
        var(--crb-c-blue-water) 0%,
        #2b6986 100%
    );
    box-shadow: 0 8px 24px rgba(91, 163, 199, 0.5);
}
.crb-action-card--road .crb-action-card__icon {
    background: linear-gradient(135deg, var(--crb-c-gold) 0%, #8b5c2e 100%);
    box-shadow: 0 8px 24px rgba(198, 134, 66, 0.5);
}
.crb-action-card--leaf .crb-action-card__icon {
    background: linear-gradient(
        135deg,
        var(--crb-c-green-leaf) 0%,
        var(--crb-c-green-deep) 100%
    );
    box-shadow: 0 8px 24px rgba(45, 143, 90, 0.5);
}

.crb-action-card__icon svg {
    width: 36px;
    height: 36px;
    color: var(--crb-c-paper);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.crb-action-card__title {
    /* Titre card → Manrope 700 (sans-serif gras pour cards, plus net que serif single-weight) */
    font-family: var(--crb-font-body);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--crb-c-cream);
    margin-bottom: var(--crb-space-2);
    letter-spacing: -0.005em;
}

.crb-action-card__slogan {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(250, 247, 238, 0.78);
}

/* Marqueur Phase 2 — pastille discrète sous le slogan, signale au visiteur
   que le contenu détaillé arrive (Anticipation civique). */
.crb-action-card__cta {
    display: inline-block;
    margin-top: var(--crb-space-3);
    padding: 4px 12px;
    font-family: var(--crb-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--crb-c-gold);
    background: rgba(198, 134, 66, 0.08);
    border: 1px solid rgba(198, 134, 66, 0.3);
    border-radius: var(--crb-radius-pill);
}

@media (min-width: 576px) {
    .crb-actions__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .crb-actions__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------------------
   12 quater. Chiffres-clés — La Bagoué en chiffres (fond crème)
   -------------------------------------------------------------------------- */
.crb-figures {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}

.crb-figures__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--crb-space-4);
    margin-top: var(--crb-space-5);
}

.crb-figure-card {
    background: var(--crb-c-paper);
    border: 1px solid var(--crb-c-glass-border);
    border-top: 3px solid var(--crb-c-orange-ci);
    border-radius: var(--crb-radius-md);
    padding: var(--crb-space-5) var(--crb-space-3) var(--crb-space-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: var(--crb-shadow-soft);
    transition:
        transform var(--crb-transition-base),
        box-shadow var(--crb-transition-base),
        border-top-color var(--crb-transition-base);
}

.crb-figure-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--crb-shadow-medium);
    border-top-color: var(--crb-c-green-primary);
}

/* Icône au-dessus du chiffre — médaillon institutionnel.
   Conteneur agrandi (48 → 56 px), filet doré 1 px ceinturant le cercle,
   ombre portée plus marquée. Couleur de fond modulée par variant
   (.crb-figure-card--people, --map, --wheat, --leaf). */
.crb-figure-card__icon {
    position: relative;
    width: 56px;
    height: 56px;
    margin-bottom: var(--crb-space-3);
    border-radius: 50%;
    color: var(--crb-c-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Background par défaut — surchargé par les variants ci-dessous. */
    background: linear-gradient(
        135deg,
        var(--crb-c-green-deep) 0%,
        var(--crb-c-green-primary) 100%
    );
    box-shadow:
        0 0 0 1px rgba(198, 134, 66, 0.45),
        0 0 0 5px rgba(15, 81, 50, 0.06),
        0 8px 18px rgba(15, 81, 50, 0.22);
    transition:
        transform var(--crb-transition-base),
        box-shadow var(--crb-transition-base);
}

.crb-figure-card:hover .crb-figure-card__icon {
    transform: scale(1.06);
    box-shadow:
        0 0 0 1px rgba(198, 134, 66, 0.7),
        0 0 0 6px rgba(247, 127, 0, 0.08),
        0 10px 22px rgba(15, 81, 50, 0.28);
}

.crb-figure-card__icon svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

/* Variants palette CRB — chaque chiffre-clé a sa propre teinte de fond,
   l'icône reste or pour rester lisible et institutionnelle. */
.crb-figure-card--people .crb-figure-card__icon {
    background: linear-gradient(
        135deg,
        var(--crb-c-green-deep) 0%,
        var(--crb-c-green-primary) 100%
    );
}

.crb-figure-card--map .crb-figure-card__icon {
    background: linear-gradient(
        135deg,
        #2b6986 0%,
        var(--crb-c-blue-water) 100%
    );
}

.crb-figure-card--wheat .crb-figure-card__icon {
    /* Maïs — gradient or chaud, l'icône bascule en vert profond pour le contraste. */
    background: linear-gradient(135deg, var(--crb-c-gold) 0%, #8b5c2e 100%);
    color: var(--crb-c-green-deep);
}

.crb-figure-card--leaf .crb-figure-card__icon {
    background: linear-gradient(
        135deg,
        var(--crb-c-green-leaf) 0%,
        var(--crb-c-green-deep) 100%
    );
}

.crb-figure-card__value {
    /* Chiffres-clés → Manrope 800 (extra-bold) — impact maximal sur grands chiffres */
    font-family: var(--crb-font-body);
    font-weight: 800;
    font-size: clamp(1.85rem, 5.4vw, 3rem);
    letter-spacing: -0.02em;
    color: var(--crb-c-orange-ci);
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings:
        "tnum" on,
        "lnum" on;
}

.crb-figure-card__label {
    font-family: var(--crb-font-body);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--crb-c-green-deep);
    margin-top: 4px;
}

.crb-figure-card__suffix {
    font-size: 0.72rem;
    color: rgba(26, 42, 31, 0.55);
    line-height: 1.3;
}

@media (min-width: 768px) {
    .crb-figures__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------------------
   12 quinquies. Patrimoine emblématique
   -------------------------------------------------------------------------- */
.crb-heritage {
    width: 100%;
    max-width: 1080px;
    margin: var(--crb-space-7) auto;
    text-align: center;
}

.crb-heritage__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--crb-space-4);
    margin-top: var(--crb-space-4);
    text-align: left;
}

.crb-heritage-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(15, 81, 50, 0.32);
    border: 1px solid rgba(91, 163, 199, 0.18);
    border-radius: var(--crb-radius-md);
    overflow: hidden;
    transition:
        transform var(--crb-transition-base),
        box-shadow var(--crb-transition-base),
        border-color var(--crb-transition-base);
}

.crb-heritage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    border-color: var(--crb-c-gold);
}

.crb-heritage-card:hover .crb-heritage-card__symbol {
    transform: scale(1.1);
}

/* Numérotage 01–04 — superposé sur le bandeau coloré, top-right.
   Pastille foncée semi-transparente pour assurer la lisibilité quel que
   soit la couleur du bandeau (bleu, vert, or, vert profond). */
.crb-heritage-card__num {
    position: absolute;
    top: var(--crb-space-3);
    right: var(--crb-space-3);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    padding: 0 10px;
    font-family: var(--crb-font-display);
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--crb-c-cream);
    background: rgba(6, 29, 18, 0.55);
    border: 1px solid rgba(198, 134, 66, 0.5);
    border-radius: var(--crb-radius-pill);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    line-height: 1;
}

/* Bandeau visuel coloré au sommet de chaque card — réduit de 90 → 76px sur
   mobile pour que le contenu utile (nom + lieu + description) gagne en
   priorité visuelle au-dessus du fold. */
.crb-heritage-card__band {
    position: relative;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        var(--crb-c-green-leaf) 0%,
        var(--crb-c-green-deep) 100%
    );
    overflow: hidden;
}

@media (min-width: 768px) {
    .crb-heritage-card__band {
        height: 90px;
    }
}

.crb-heritage-card__band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255, 255, 255, 0.18) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(0, 0, 0, 0.2) 0%,
            transparent 50%
        );
}

.crb-heritage-card__symbol {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--crb-c-paper);
    transition: transform var(--crb-transition-base);
}

.crb-heritage-card__symbol svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Variantes de bandeau par tone — référence palette CRB */
.crb-heritage-card--blue .crb-heritage-card__band {
    background: linear-gradient(
        135deg,
        var(--crb-c-blue-water) 0%,
        #1f4d62 100%
    );
}
.crb-heritage-card--leaf .crb-heritage-card__band {
    background: linear-gradient(
        135deg,
        var(--crb-c-green-leaf) 0%,
        var(--crb-c-green-deep) 100%
    );
}
.crb-heritage-card--gold .crb-heritage-card__band {
    background: linear-gradient(135deg, var(--crb-c-gold) 0%, #6e4523 100%);
}
.crb-heritage-card--deep .crb-heritage-card__band {
    background: linear-gradient(
        135deg,
        var(--crb-c-green-deep) 0%,
        #051912 100%
    );
}

.crb-heritage-card__body {
    padding: var(--crb-space-4) var(--crb-space-5);
    flex: 1;
}

.crb-heritage-card__name {
    /* Nom de site patrimonial → Manrope 700 (sans-serif gras, lisibilité card) */
    font-family: var(--crb-font-body);
    font-weight: 700;
    letter-spacing: -0.005em;
    font-size: 1.15rem;
    color: var(--crb-c-cream);
    margin-bottom: 4px;
}

.crb-heritage-card__location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--crb-c-gold);
    margin-bottom: var(--crb-space-2);
    text-transform: uppercase;
}

.crb-heritage-card__icon {
    width: 14px;
    height: 14px;
}

.crb-heritage-card__desc {
    font-size: 0.88rem;
    line-height: 1.55;
    /* Opacité passée de 0.72 → 0.82 — descriptif descriptif texte courant
       sur fond vert profond, contraste WCAG AA renforcé. */
    color: rgba(250, 247, 238, 0.82);
}

@media (min-width: 768px) {
    .crb-heritage__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------------------------------
   12 sexies. Vision — 5 axes (Bagoué plus productive…)
   -------------------------------------------------------------------------- */
.crb-vision {
    width: 100%;
    max-width: 720px;
    margin: var(--crb-space-7) auto;
    padding: var(--crb-space-6) var(--crb-space-5);
    text-align: center;
    background: linear-gradient(
        135deg,
        rgba(247, 127, 0, 0.08) 0%,
        rgba(15, 81, 50, 0.15) 100%
    );
    border: 1px solid rgba(247, 127, 0, 0.2);
    border-radius: var(--crb-radius-lg);
}

.crb-vision__list {
    display: flex;
    flex-direction: column;
    gap: var(--crb-space-3);
    list-style: none;
    margin-top: var(--crb-space-4);
    text-align: left;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.crb-vision__item {
    display: flex;
    align-items: center;
    gap: var(--crb-space-3);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--crb-c-cream);
    padding: var(--crb-space-2) 0;
    border-bottom: 1px solid rgba(198, 134, 66, 0.15);
}

.crb-vision__item:last-child {
    border-bottom: none;
}

/* Médaillon numéroté 01–05 — remplace l'ancien check vert.
   Ancrage civique : « voici l'ordre de nos 5 engagements ».
   Conserve le réflexe dopaminergique (forme circulaire ressentie comme bouton). */
.crb-vision__num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--crb-c-orange-ci) 0%,
        var(--crb-c-orange-warm) 100%
    );
    color: var(--crb-c-paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--crb-font-display);
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    box-shadow:
        0 0 0 1px rgba(198, 134, 66, 0.4),
        0 6px 14px rgba(247, 127, 0, 0.28);
}

.crb-vision__label {
    flex: 1;
}

/* --------------------------------------------------------------------------
   13. Responsive — mobile-first
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .crb-notify__row {
        flex-direction: column;
    }

    .crb-notify__btn {
        border-radius: 0 0 var(--crb-radius-md) var(--crb-radius-md);
    }

    .crb-territory {
        padding: var(--crb-space-4) var(--crb-space-3);
    }

    .crb-territory__list {
        gap: var(--crb-space-2);
    }

    .crb-contact {
        flex-direction: column;
        gap: var(--crb-space-3);
    }
}

/* ==========================================================================
   14. SweetAlert2 — habillage charte CRB (palette stricte, Marcellus + Manrope).
   --------------------------------------------------------------------------
   Classes ajoutées dynamiquement via la factory `crbSwal*()` côté JS.
   Le HTML rendu par SweetAlert reçoit `customClass` ciblant ces sélecteurs.
   ========================================================================== */
.crb-swal-popup {
    background: var(--crb-c-cream);
    border: 1px solid rgba(198, 134, 66, 0.45);
    border-radius: var(--crb-radius-lg);
    box-shadow:
        0 0 0 1px rgba(15, 81, 50, 0.08),
        0 24px 64px rgba(15, 81, 50, 0.28);
    padding: var(--crb-space-6) var(--crb-space-5);
    color: var(--crb-c-ink);
}

.crb-swal-icon {
    margin: var(--crb-space-3) auto var(--crb-space-4);
}

.crb-swal-title {
    font-family: var(--crb-font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    letter-spacing: 0;
    color: var(--crb-c-green-deep);
    line-height: 1.18;
    margin-bottom: var(--crb-space-3);
}

.crb-swal-text {
    font-family: var(--crb-font-body);
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--crb-c-ink);
    opacity: 0.92;
}

.crb-swal-text strong {
    color: var(--crb-c-green-deep);
    font-weight: 700;
}

.crb-swal-actions {
    margin-top: var(--crb-space-5);
    gap: var(--crb-space-3);
}

.crb-swal-btn {
    font-family: var(--crb-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    padding: 12px 24px;
    min-height: 44px; /* Cible tactile WCAG 2.2 AA */
    border-radius: var(--crb-radius-md);
    border: none;
    transition:
        transform var(--crb-transition-fast),
        box-shadow var(--crb-transition-fast),
        background var(--crb-transition-fast);
}

.crb-swal-btn--primary {
    background: linear-gradient(
        135deg,
        var(--crb-c-orange-ci) 0%,
        var(--crb-c-orange-warm) 100%
    );
    color: var(--crb-c-paper);
    box-shadow: 0 8px 18px rgba(247, 127, 0, 0.32);
}

.crb-swal-btn--primary:hover,
.crb-swal-btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(247, 127, 0, 0.42);
}

.crb-swal-btn--ghost {
    background: transparent;
    color: var(--crb-c-green-deep);
    border: 1px solid rgba(15, 81, 50, 0.3);
}

.crb-swal-btn--ghost:hover,
.crb-swal-btn--ghost:focus-visible {
    background: rgba(15, 81, 50, 0.06);
}

/* Bandeau d'accroche supérieur — utilisé dans les popups dopaminergiques
   (ex. confirmation d'inscription : « Bienvenue, enfant de la Bagoué »). */
.crb-swal-popup .crb-swal-eyebrow {
    display: block;
    font-family: var(--crb-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--crb-c-orange-ci);
    margin-bottom: var(--crb-space-2);
}

/* ==========================================================================
   15. Flash messages — bandeau fixe top-right (palette sémantique CRB).
   --------------------------------------------------------------------------
   Construit dynamiquement par `crbFlash(type, message)` (cf. landing.js).
   Pattern repris de CLAUDE.md §9.5 — JAMAIS de couleur en dur côté JS,
   toutes les teintes vivent dans ces classes.
   ========================================================================== */
.crb-flash-wrap {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: var(--crb-z-modal);
    display: flex;
    flex-direction: column;
    gap: var(--crb-space-2);
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.crb-flash {
    pointer-events: auto;
    position: relative;
    display: flex;
    gap: var(--crb-space-3);
    align-items: flex-start;
    padding: var(--crb-space-3) var(--crb-space-4);
    background: var(--crb-c-cream);
    border: 1px solid rgba(198, 134, 66, 0.35);
    border-left-width: 4px;
    border-radius: var(--crb-radius-md);
    box-shadow: 0 12px 32px rgba(15, 81, 50, 0.18);
    overflow: hidden;
    animation: crb-flash-slide-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes crb-flash-slide-in {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.crb-flash.is-leaving {
    animation: crb-flash-slide-out 0.32s cubic-bezier(0.7, 0, 0.84, 0) both;
}

@keyframes crb-flash-slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

.crb-flash__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--crb-c-paper);
}

.crb-flash__icon svg {
    width: 18px;
    height: 18px;
}

.crb-flash__body {
    flex: 1;
    min-width: 0;
}

.crb-flash__title {
    font-family: var(--crb-font-body);
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
}

.crb-flash__message {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--crb-c-ink);
    margin: 0;
}

.crb-flash__close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: rgba(26, 42, 31, 0.5);
    transition: color var(--crb-transition-fast);
}

.crb-flash__close:hover,
.crb-flash__close:focus-visible {
    color: var(--crb-c-ink);
}

.crb-flash__close svg {
    width: 16px;
    height: 16px;
}

.crb-flash__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    animation: crb-flash-progress 5s linear forwards;
}

@keyframes crb-flash-progress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* Variantes sémantiques — teintes CLAUDE.md §9.5 */
.crb-flash--success {
    border-left-color: var(--crb-c-success);
}
.crb-flash--success .crb-flash__icon {
    background: var(--crb-c-success);
}
.crb-flash--success .crb-flash__title {
    color: var(--crb-c-green-deep);
}
.crb-flash--success .crb-flash__progress {
    background: linear-gradient(
        90deg,
        var(--crb-c-success),
        var(--crb-c-green-leaf)
    );
}

.crb-flash--error {
    border-left-color: var(--crb-c-error);
}
.crb-flash--error .crb-flash__icon {
    background: var(--crb-c-error);
}
.crb-flash--error .crb-flash__title {
    color: #7f1d1d;
}
.crb-flash--error .crb-flash__progress {
    background: linear-gradient(90deg, var(--crb-c-error), #dc2626);
}

.crb-flash--warning {
    border-left-color: var(--crb-c-warning);
}
.crb-flash--warning .crb-flash__icon {
    background: var(--crb-c-warning);
}
.crb-flash--warning .crb-flash__title {
    color: #92400e;
}
.crb-flash--warning .crb-flash__progress {
    background: linear-gradient(90deg, var(--crb-c-warning), #f59e0b);
}

.crb-flash--info {
    border-left-color: var(--crb-c-info);
}
.crb-flash--info .crb-flash__icon {
    background: var(--crb-c-info);
}
.crb-flash--info .crb-flash__title {
    color: #1e3a8a;
}
.crb-flash--info .crb-flash__progress {
    background: linear-gradient(90deg, var(--crb-c-info), #3b82f6);
}

@media (max-width: 575.98px) {
    .crb-flash-wrap {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

/* ==========================================================================
   16. Page de confirmation — bloc CTA d'activation des notifications push.
   --------------------------------------------------------------------------
   Affiché après le double opt-in. Adresse l'utilisateur comme « enfant de la
   Bagoué » — ton chaleureux, dale-carnegien, propose sans imposer.
   ========================================================================== */
.crb-push-cta {
    width: 100%;
    max-width: 720px;
    margin: var(--crb-space-7) auto 0;
    padding: var(--crb-space-6) var(--crb-space-5);
    background: linear-gradient(
        135deg,
        rgba(247, 127, 0, 0.08) 0%,
        rgba(15, 81, 50, 0.18) 100%
    );
    border: 1px solid rgba(247, 127, 0, 0.32);
    border-radius: var(--crb-radius-lg);
    text-align: center;
    box-sizing: border-box;
}

.crb-push-cta__eyebrow {
    display: block;
    font-family: var(--crb-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--crb-c-orange-ci);
    margin-bottom: var(--crb-space-3);
}

.crb-push-cta__title {
    font-family: var(--crb-font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--crb-c-cream);
    line-height: 1.18;
    margin-bottom: var(--crb-space-3);
}

.crb-push-cta__body {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(250, 247, 238, 0.86);
    max-width: 560px;
    margin: 0 auto var(--crb-space-5);
}

.crb-push-cta__body em {
    color: var(--crb-c-orange-ci);
    font-style: italic;
}

.crb-push-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--crb-space-3);
}

.crb-push-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--crb-space-2);
    padding: 14px 28px;
    min-height: 48px; /* Cible tactile généreuse — action centrale de la page */
    font-family: var(--crb-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    border-radius: var(--crb-radius-pill);
    border: none;
    cursor: pointer;
    transition:
        transform var(--crb-transition-fast),
        box-shadow var(--crb-transition-fast),
        background var(--crb-transition-fast);
}

.crb-push-cta__btn--primary {
    background: linear-gradient(
        135deg,
        var(--crb-c-orange-ci) 0%,
        var(--crb-c-orange-warm) 100%
    );
    color: var(--crb-c-paper);
    box-shadow:
        0 0 0 1px rgba(198, 134, 66, 0.45),
        0 10px 22px rgba(247, 127, 0, 0.42);
}

.crb-push-cta__btn--primary:hover,
.crb-push-cta__btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(198, 134, 66, 0.7),
        0 14px 28px rgba(247, 127, 0, 0.55);
}

.crb-push-cta__btn--ghost {
    background: transparent;
    color: var(--crb-c-cream);
    border: 1px solid rgba(250, 247, 238, 0.32);
}

.crb-push-cta__btn--ghost:hover,
.crb-push-cta__btn--ghost:focus-visible {
    background: rgba(250, 247, 238, 0.06);
    border-color: rgba(250, 247, 238, 0.5);
}

.crb-push-cta__hint {
    margin-top: var(--crb-space-4);
    font-size: 0.82rem;
    color: rgba(250, 247, 238, 0.55);
    font-style: italic;
}

.crb-push-cta__feedback {
    margin-top: var(--crb-space-3);
    min-height: 22px;
    font-size: 0.86rem;
    font-weight: 600;
}

.crb-push-cta__feedback--success {
    color: var(--crb-c-green-leaf);
}
.crb-push-cta__feedback--error {
    color: var(--crb-c-orange-ci);
}

/* État : navigateur ne supporte pas les notifications, ou permission refusée. */
.crb-push-cta.is-disabled .crb-push-cta__btn--primary {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .crb-push-cta__actions {
        flex-direction: column;
    }
    .crb-push-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   17. Modale d'activation push — pattern repris de cabinetsanteverte
       (sv-admin-push-modal) adapté à la charte CRB et au contexte public.
   --------------------------------------------------------------------------
   Affichée automatiquement au DOMContentLoaded sur la page de confirmation
   si Notification.permission === 'default'. Snooze 24h via localStorage.
   ========================================================================== */
.crb-push-modal {
    position: fixed;
    inset: 0;
    z-index: var(--crb-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--crb-space-4);
    background: rgba(6, 29, 18, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow-y: auto;
    animation: crb-push-modal-fadein 0.3s ease;
}

.crb-push-modal.is-hidden {
    display: none !important;
}

.crb-push-modal__card {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--crb-c-cream);
    border: 1px solid rgba(198, 134, 66, 0.45);
    border-radius: var(--crb-radius-lg);
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
    animation: crb-push-modal-card-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Visuel haut — cœur de la Bagoué (cloche) sur fond vert profond + halo doré.
   Hauteur réduite (148 → 110 px) pour alléger la modale sur mobile. */
.crb-push-modal__visual {
    position: relative;
    height: 110px;
    background: linear-gradient(
        135deg,
        var(--crb-c-green-deep) 0%,
        #051912 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.crb-push-modal__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 30% 40%,
            rgba(247, 127, 0, 0.32),
            transparent 55%
        ),
        radial-gradient(
            circle at 75% 65%,
            rgba(198, 134, 66, 0.22),
            transparent 50%
        );
}

.crb-push-modal__bell {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--crb-c-orange-ci) 0%,
        var(--crb-c-orange-warm) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--crb-c-paper);
    box-shadow:
        0 0 0 1px rgba(198, 134, 66, 0.5),
        0 8px 24px rgba(247, 127, 0, 0.45);
    animation: crb-push-modal-bell 2.2s ease-in-out infinite;
}

.crb-push-modal__bell svg {
    width: 28px;
    height: 28px;
}

.crb-push-modal__ring {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--crb-c-orange-ci);
    opacity: 0;
    z-index: 1;
    animation: crb-push-modal-ring 2.2s ease-out infinite;
}

.crb-push-modal__ring--delay {
    animation-delay: 1.1s;
}

.crb-push-modal__body {
    padding: var(--crb-space-5) var(--crb-space-5) var(--crb-space-4);
}

.crb-push-modal__eyebrow {
    font-family: var(--crb-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--crb-c-orange-ci);
    margin: 0 0 var(--crb-space-2);
    text-align: center;
}

.crb-push-modal__title {
    font-family: var(--crb-font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 4vw, 1.75rem);
    color: var(--crb-c-green-deep);
    text-align: center;
    margin: 0 0 var(--crb-space-2);
    line-height: 1.2;
    letter-spacing: 0;
}

.crb-push-modal__subtitle {
    font-family: var(--crb-font-body);
    font-size: 0.94rem;
    color: var(--crb-c-ink);
    text-align: center;
    margin: 0 0 var(--crb-space-4);
    line-height: 1.55;
    opacity: 0.9;
}

.crb-push-modal__benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--crb-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--crb-space-2);
}

.crb-push-modal__benefit {
    display: flex;
    align-items: center;
    gap: var(--crb-space-3);
    padding: var(--crb-space-3);
    background: var(--crb-c-paper);
    border: 1px solid rgba(198, 134, 66, 0.25);
    border-radius: var(--crb-radius-md);
    transition:
        border-color var(--crb-transition-fast),
        transform var(--crb-transition-fast);
}

.crb-push-modal__benefit:hover {
    border-color: var(--crb-c-orange-ci);
    transform: translateX(2px);
}

.crb-push-modal__benefit-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--crb-c-paper);
}

.crb-push-modal__benefit-icon svg {
    width: 20px;
    height: 20px;
}

.crb-push-modal__benefit-icon--instant {
    background: linear-gradient(
        135deg,
        var(--crb-c-orange-ci) 0%,
        var(--crb-c-orange-warm) 100%
    );
}
.crb-push-modal__benefit-icon--quiet {
    background: linear-gradient(
        135deg,
        var(--crb-c-green-leaf) 0%,
        var(--crb-c-green-deep) 100%
    );
}
.crb-push-modal__benefit-icon--free {
    background: linear-gradient(135deg, var(--crb-c-gold) 0%, #8b5c2e 100%);
    color: var(--crb-c-cream);
}

.crb-push-modal__benefit-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crb-push-modal__benefit-text strong {
    font-family: var(--crb-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--crb-c-green-deep);
}

.crb-push-modal__benefit-text span {
    font-size: 0.82rem;
    color: rgba(26, 42, 31, 0.72);
    line-height: 1.4;
}

.crb-push-modal__cta {
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    background: linear-gradient(
        135deg,
        var(--crb-c-orange-ci) 0%,
        var(--crb-c-orange-warm) 100%
    );
    color: var(--crb-c-paper);
    border: none;
    border-radius: var(--crb-radius-md);
    font-family: var(--crb-font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--crb-space-2);
    box-shadow:
        0 0 0 1px rgba(198, 134, 66, 0.45),
        0 8px 22px rgba(247, 127, 0, 0.4);
    transition:
        transform var(--crb-transition-fast),
        box-shadow var(--crb-transition-fast);
    margin-bottom: var(--crb-space-2);
}

.crb-push-modal__cta:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(198, 134, 66, 0.7),
        0 12px 28px rgba(247, 127, 0, 0.55);
}

.crb-push-modal__cta:active {
    transform: translateY(0) scale(0.99);
}

.crb-push-modal__cta[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.crb-push-modal__cta svg {
    width: 18px;
    height: 18px;
}

.crb-push-modal__later {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--crb-space-2);
    background: transparent;
    border: none;
    color: var(--crb-c-ink);
    opacity: 0.65;
    font-family: var(--crb-font-body);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--crb-radius-sm);
    transition:
        opacity var(--crb-transition-fast),
        background var(--crb-transition-fast);
}

.crb-push-modal__later:hover {
    opacity: 1;
    background: rgba(198, 134, 66, 0.06);
}

.crb-push-modal__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    color: rgba(26, 42, 31, 0.6);
    margin: var(--crb-space-3) 0 0;
    text-align: center;
    line-height: 1.4;
}

.crb-push-modal__note svg {
    width: 14px;
    height: 14px;
    color: var(--crb-c-green-primary);
    flex-shrink: 0;
}

@keyframes crb-push-modal-fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes crb-push-modal-card-in {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes crb-push-modal-bell {
    0%,
    100% {
        transform: rotate(0);
    }
    15% {
        transform: rotate(-12deg);
    }
    30% {
        transform: rotate(10deg);
    }
    45% {
        transform: rotate(-6deg);
    }
    60% {
        transform: rotate(4deg);
    }
    75% {
        transform: rotate(0);
    }
}

@keyframes crb-push-modal-ring {
    0% {
        transform: scale(1);
        opacity: 0.65;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

@media (max-width: 575.98px) {
    .crb-push-modal {
        padding: var(--crb-space-3);
    }
    .crb-push-modal__card {
        max-width: 100%;
    }
    .crb-push-modal__visual {
        height: 124px;
    }
    .crb-push-modal__bell,
    .crb-push-modal__ring {
        width: 60px;
        height: 60px;
    }
    .crb-push-modal__bell svg {
        width: 28px;
        height: 28px;
    }
    .crb-push-modal__body {
        padding: var(--crb-space-5) var(--crb-space-4) var(--crb-space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .crb-push-modal,
    .crb-push-modal__card,
    .crb-push-modal__bell,
    .crb-push-modal__ring {
        animation: none;
    }
}