/* ==========================================================================
   CRB — Conseil Régional de la Bagoué
   Variables globales (palette officielle, typographies, espacement, ombres)
   --------------------------------------------------------------------------
   Cette feuille est partagée entre le front public, l'admin et l'auth.
   Ne JAMAIS hardcoder une couleur dans front.css ou admin.css —
   toujours passer par une variable --crb-*.
   ========================================================================== */

:root {
    /* ==== Palette officielle CRB (issue des 20 visuels institutionnels) ==== */
    --crb-c-green-deep:    #0F5132;  /* Vert Profond — bandeaux, header, footer */
    --crb-c-green-primary: #1B6B43;  /* Vert principal — boutons, liens actifs */
    --crb-c-green-leaf:    #2D8F5A;  /* Vert feuille — accents, success */
    --crb-c-orange-ci:     #F77F00;  /* Orange Côte d'Ivoire — CTA, slogan */
    --crb-c-orange-warm:   #E76F0F;  /* Orange chaud — hover CTA */
    --crb-c-gold:          #C68642;  /* Or — accents éditoriaux (crocodiles logo) */
    --crb-c-blue-water:    #5BA3C7;  /* Bleu eau — fond logo, illustrations */
    --crb-c-cream:         #FAF7EE;  /* Crème — fond principal */
    --crb-c-paper:         #FFFFFF;  /* Blanc — cards, formulaires */
    --crb-c-ink:           #1A2A1F;  /* Encre — corps de texte */
    --crb-c-glass-border:  rgba(15, 81, 50, 0.12);

    /* ==== Sémantiques (alertes, états) ==== */
    --crb-c-success:  #15803D;
    --crb-c-warning:  #D97706;
    --crb-c-error:    #B91C1C;
    --crb-c-info:     #1D4ED8;

    /* ==== Surfaces dérivées (transparences) ==== */
    --crb-c-green-deep-08:   rgba(15, 81, 50, 0.08);
    --crb-c-green-deep-15:   rgba(15, 81, 50, 0.15);
    --crb-c-green-deep-40:   rgba(15, 81, 50, 0.40);
    --crb-c-green-deep-70:   rgba(15, 81, 50, 0.70);
    --crb-c-green-leaf-25:   rgba(45, 143, 90, 0.25);
    --crb-c-orange-ci-15:    rgba(247, 127, 0, 0.15);
    --crb-c-orange-ci-30:    rgba(247, 127, 0, 0.30);
    --crb-c-blue-water-12:   rgba(91, 163, 199, 0.12);
    --crb-c-blue-water-25:   rgba(91, 163, 199, 0.25);
    --crb-c-gold-15:         rgba(198, 134, 66, 0.15);
    --crb-c-gold-30:         rgba(198, 134, 66, 0.30);
    --crb-c-cream-on-dark:   rgba(250, 247, 238, 0.42);

    /* ==== Typographies ====
       Marcellus — capitales romaines de prestige, héritage des inscriptions
       monumentales (frontispices d'institutions, médailles, armoiries). Une
       police qui imprime immédiatement l'autorité institutionnelle. Une
       seule graisse (regular 400) — c'est sa force : la sobriété monumentale.
       Réservée aux H1, H2, slogan, citations.

       Manrope — sans-serif géométrique chaleureux, variable font moderne
       (graisses 200-800). Utilisée par des institutions africaines de
       qualité, l'ONU, des banques de référence. Lisibilité maximale sur
       mobile (16px corps), kerning et tabular-nums natifs.

       Fallbacks : Marcellus → Trajan/Times serif ; Manrope → SF Pro/Segoe UI. */
    --crb-font-display: "Marcellus", "Times New Roman", "Cambria", serif;
    --crb-font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;

    /* ==== Échelle d'espacement (rythmique 4px) ==== */
    --crb-space-1:  4px;
    --crb-space-2:  8px;
    --crb-space-3:  12px;
    --crb-space-4:  16px;
    --crb-space-5:  24px;
    --crb-space-6:  32px;
    --crb-space-7:  48px;
    --crb-space-8:  64px;
    --crb-space-9:  96px;

    /* ==== Rayons ==== */
    --crb-radius-sm: 6px;
    --crb-radius-md: 10px;
    --crb-radius-lg: 18px;
    --crb-radius-pill: 999px;

    /* ==== Ombres ==== */
    --crb-shadow-soft:   0 2px 8px rgba(15, 81, 50, 0.08);
    --crb-shadow-medium: 0 8px 24px rgba(15, 81, 50, 0.14);
    --crb-shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.35);
    --crb-shadow-glow-green:  0 0 32px rgba(45, 143, 90, 0.45);
    --crb-shadow-glow-orange: 0 0 32px rgba(247, 127, 0, 0.45);

    /* ==== Transitions ==== */
    --crb-transition-fast: 0.18s ease-out;
    --crb-transition-base: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    --crb-transition-slow: 0.5s cubic-bezier(0.22, 1, 0.36, 1);

    /* ==== Z-index (ordre canonique) ==== */
    --crb-z-bg:      0;
    --crb-z-base:    1;
    --crb-z-overlay: 50;
    --crb-z-drawer:  90;
    --crb-z-modal:   100;
    --crb-z-toast:   200;
}

/* ==========================================================================
   Reset minimal (sans Bootstrap pour la landing — chargement allégé)
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Filet de sécurité mobile : aucune section ne doit produire de scroll horizontal.
       `overflow-x: clip` clippe sans casser `position: sticky` (contrairement à `hidden`). */
    overflow-x: clip;
}

body {
    font-family: var(--crb-font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--crb-c-ink);
    background-color: var(--crb-c-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Manrope — kerning et ligatures activés par défaut, optimisations OpenType */
    font-feature-settings: "kern" on, "liga" on, "calt" on, "cv11" on;
    text-rendering: optimizeLegibility;
    /* Double protection : si un navigateur ne supporte pas `overflow-x: clip` sur html,
       body assume le rôle. Combiné avec html, garantit zéro débordement horizontal. */
    overflow-x: clip;
}

/* Titres — Marcellus single weight, registre monumental institutionnel.
   Pas de letter-spacing négatif (Marcellus est déjà condensé), pas de ligatures
   discrétionnaires (single weight = pas d'alternance stylistique). */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--crb-font-display);
    font-feature-settings: "kern" on, "liga" on;
    letter-spacing: 0;
    line-height: 1.12;
}

/* Chiffres tabulaires — alignement parfait des digits dans les colonnes
   (compte à rebours, chiffres-clés, prix, dates). À appliquer là où des
   chiffres se succèdent visuellement. */
.crb-tabular,
.crb-countdown__value,
.crb-figure-card__value {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" on, "lnum" on;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

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

/* ==========================================================================
   Drapeau CI — composant réutilisable
   ========================================================================== */
.crb-flag-bar {
    display: flex;
    height: 5px;
    width: 196px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.crb-flag-bar__band {
    flex: 1;
}

.crb-flag-bar__band--orange { background: var(--crb-c-orange-ci); }
.crb-flag-bar__band--white  { background: #FFFFFF; }
.crb-flag-bar__band--green  { background: var(--crb-c-green-deep); }

/* ==========================================================================
   Accessibilité — focus visible (WCAG 2.2)
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--crb-c-orange-ci);
    outline-offset: 3px;
    border-radius: var(--crb-radius-sm);
}

/* ==========================================================================
   Préférence motion réduite — respecte les utilisateurs sensibles
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}