/* ==========================================================================
   Variables globales — palette RICC
   ==========================================================================

   Couleurs relevées sur le logo : rouge #CB3F40, rouge foncé #A00200,
   noir, crème #E8D8BC. Le rouge porte l'action, le crème reste un accent
   de surface : il n'est jamais une couleur de texte sur fond clair, où il
   serait illisible. L'accent « texte » est un bronze tiré du crème.

   Contrastes vérifiés (rapport WCAG, 4,5 requis pour du texte courant) :
   blanc sur rouge 4,9 ; lien sur fond clair 7,9 ; lien sur fond sombre 7,6 ;
   texte doux 5,4 en clair et 7,4 en sombre ; blanc sur bronze 5,0.
   ========================================================================== */
:root {
    /* Couleurs primaires — rouge du logo */
    --couleur-primaire: #CB3F40;
    --couleur-primaire-clair: #DC6C6D;
    --couleur-primaire-fonce: #A00200;

    /* Couleurs secondaires — bronze et crème du logo */
    --couleur-accent: #8C6A2F;
    --couleur-accent-clair: #E8D8BC;

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

    /* Neutres et texte — noirs et gris chauds */
    --couleur-texte: #211C1B;
    --couleur-texte-doux: #6E6460;
    --couleur-bordure: #EDE5DC;

    /* États */
    --couleur-succes: #4CAF7D;
    --couleur-erreur: #E85D6B;
    --couleur-attention: #F0A860;
    --couleur-info: #5B9FE8;

    /* Fond et surfaces */
    --fond-page-debut: #FBF8F3;
    --fond-page-fin: #FFFDFA;
    --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: #1B1716;
    --sidebar-fond-fin: #110E0D;
    --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;
}

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

    --couleur-texte: #F2ECE6;
    --couleur-texte-doux: #B8ADA6;
    --couleur-bordure: #3A3331;

    --fond-page-debut: #161212;
    --fond-page-fin: #1B1716;
    --surface-bg: #241F1E;
    --glass-bg: rgba(36, 31, 30, 0.65);
    --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);
}