/* ==========================================================================
   Variables globales — palette pastel, glassmorphism
   ========================================================================== */
:root {
    /* Couleurs primaires — bleu-lavande doux */
    --couleur-primaire: #6C7CE7;
    --couleur-primaire-clair: #8B98F0;
    --couleur-primaire-fonce: #4E5BC4;

    /* Couleurs secondaires — accent corail doux */
    --couleur-accent: #FF9166;
    --couleur-accent-clair: #FFAB88;

    /* Neutres et texte */
    --couleur-texte: #2D2F45;
    --couleur-texte-doux: #6B6F8C;
    --couleur-bordure: #E4E6F5;

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

    /* Fond et surfaces */
    --fond-page-debut: #F5F3FB;
    --fond-page-fin: #FBF8FF;
    --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 */
    --ombre-legere: 0 2px 12px color-mix(in srgb, var(--couleur-primaire) 8%, transparent);
    --ombre-douce: 0 8px 32px color-mix(in srgb, var(--couleur-primaire) 14%, transparent);
    --ombre-flottante: 0 12px 40px color-mix(in srgb, var(--couleur-primaire) 20%, 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: #1C1E38;
    --sidebar-fond-fin: #14152A;
    --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: 34px;
    --logo-hauteur-sidebar: 34px;
    --logo-hauteur-auth: 44px;
    --logo-largeur-max: 190px;
}

/* ==========================================================================
   Mode sombre
   ========================================================================== */
html[data-theme="sombre"] {
    --couleur-texte: #EDEEFA;
    --couleur-texte-doux: #A8ACC8;
    --couleur-bordure: #383B57;

    --fond-page-debut: #16172B;
    --fond-page-fin: #1C1E38;
    --surface-bg: #21233F;
    --glass-bg: rgba(33, 35, 63, 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);
}