/* ==========================================================================
   Variables globales — palette CreaplusWeb
   ==========================================================================

   Encre nuit #0B1530, bleu royal #1F48D6 (l'action), or #C9A45C (accent
   rare : montants, détails de marque). L'or n'est jamais une couleur de
   texte sur fond clair, où il manquerait de contraste.

   Contrastes (WCAG, 4,5 requis) : blanc sur bleu royal 6,9 ; lien sur fond
   clair 7,7 ; texte doux 5,6 ; or sur encre nuit 7,8.
   ========================================================================== */
:root {
    /* Couleurs primaires — bleu royal */
    --couleur-primaire: #1F48D6;
    --couleur-primaire-clair: #4C6EF0;
    --couleur-primaire-fonce: #1636A8;

    /* Couleur secondaire — or */
    --couleur-accent: #8A6A2A;
    --couleur-accent-clair: #E9D7AE;

    /* Liens de texte : bleu foncé, plus lisible que le bleu d'action */
    --couleur-lien: #1636A8;

    /* Neutres et texte — encre et gris bleutés */
    --couleur-texte: #121A33;
    --couleur-texte-doux: #5B6478;
    --couleur-bordure: #E3E7F0;

    /* États */
    --couleur-succes: #0F8A5F;
    --couleur-erreur: #C23452;
    --couleur-attention: #C9831B;
    --couleur-info: #1F48D6;

    /* Fond et surfaces */
    --fond-page-debut: #F3F5FA;
    --fond-page-fin: #FAFBFD;
    --surface-bg: #FFFFFF;
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.8);
    --champ-bg: rgba(255, 255, 255, 0.7);
    --champ-bg-focus: #FFFFFF;

    /* Rayons — arrondis prononcés, esprit iOS/One UI */
    --rayon-xs: 8px;
    --rayon-s: 12px;
    --rayon-m: 16px;
    --rayon-l: 22px;
    --rayon-xl: 28px;
    --rayon-pilule: 999px;

    /* Ombres douces — teintées par le texte, non par le rouge : une ombre
       rouge donnerait un halo rosé sous chaque carte. */
    --ombre-legere: 0 2px 12px color-mix(in srgb, var(--couleur-texte) 7%, transparent);
    --ombre-douce: 0 8px 32px color-mix(in srgb, var(--couleur-texte) 10%, transparent);
    --ombre-flottante: 0 12px 40px color-mix(in srgb, var(--couleur-texte) 15%, transparent);

    /* Transitions élégantes */
    --transition-douce: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-rapide: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* Back-office — sidebar sombre, dimensions de structure */
    --sidebar-fond: #0B1530;
    --sidebar-fond-fin: #070E22;
    --sidebar-texte: rgba(255, 255, 255, 0.72);
    --sidebar-actif: var(--couleur-primaire-clair);
    --sidebar-largeur: 264px;
    --sidebar-largeur-reduite: 86px;
    --topbar-hauteur: 68px;

    /* Logo issu des réglages — dimensions par emplacement.
       Le nom du site disparaît dès qu'un logo est chargé : celui-ci occupe
       donc la place que le texte libère. Ces quatre valeurs suffisent à
       ajuster un logo trop petit ou trop imposant sur un nouveau projet. */
    --logo-hauteur: 38px;
    --logo-hauteur-sidebar: 36px;
    --logo-hauteur-auth: 52px;
    --logo-largeur-max: 190px;

    /* Marque CreaplusWeb */
    --encre: #0B1530;
    --or: #C9A45C;
    --police-titres: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ==========================================================================
   Mode sombre
   ========================================================================== */
html[data-theme="sombre"] {
    --couleur-lien: #9DB2FF;

    --couleur-texte: #E9EDF7;
    --couleur-texte-doux: #A3ACC2;
    --couleur-bordure: #253153;

    --fond-page-debut: #070D1F;
    --fond-page-fin: #0B1530;
    --surface-bg: #111C3B;
    --glass-bg: rgba(17, 28, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --champ-bg: rgba(255, 255, 255, 0.06);
    --champ-bg-focus: rgba(255, 255, 255, 0.1);

    --ombre-legere: 0 2px 12px rgba(0, 0, 0, 0.3);
    --ombre-douce: 0 8px 32px rgba(0, 0, 0, 0.45);
    --ombre-flottante: 0 12px 40px rgba(0, 0, 0, 0.55);
}