/* =======================================================
    Palette de couleurs - Clinique Les Genêts
   ======================================================= */

:root {
    /* Couleurs principales */
    --main-color: #172b81;          /* Bleu principal */
    --accent-color: #f9d804;        /* Jaune accent */
    --neutral-color: #ffffff;       /* Blanc */

    /* Variantes de tons */
    --main-color-light: #1f3a9d;
    --main-color-dark: #0f1e5c;
    --accent-color-dark: #d4b903;

    /* Couleurs supplémentaires */
    --red-color: #e53935;
    --red-color-light: #ef5350;
    --red-color-dark: #b71c1c;

    --green-color: #43a047;
    --green-color-light: #66bb6a;
    --green-color-dark: #2e7d32;

    --gray-color: #9e9e9e;
    --gray-color-light: #e0e0e0;
    --gray-color-dark: #616161;

    --black-color: #000000;
    --black-color-light: #2b2b2b;
    --black-color-dark: #000000; /* pour cohérence visuelle */

    /* Arrière-plans */
    --background-light: #f5f7fb;
    --background-dark: #0f1e5c;

    /* Textes */
    --text-on-main: #ffffff;
    --text-on-accent: #172b81;
    --text-on-dark: #ffffff;
    --text-on-light: #172b81;
}

/* =======================================================
   Classes Utilitaires
   ======================================================= */

/* Texte */
.text-main   { color: var(--main-color) !important; }
.text-accent { color: var(--accent-color) !important; }
.text-red    { color: var(--red-color) !important; }
.text-green  { color: var(--green-color) !important; }
.text-gray   { color: var(--gray-color) !important; }
.text-black  { color: var(--black-color) !important; }
.text-light  { color: var(--neutral-color) !important; }

/* Fonds */
.bg-main   { background-color: var(--main-color) !important; color: var(--text-on-main); }
.bg-accent { background-color: var(--accent-color) !important; color: var(--text-on-accent); }
.bg-red    { background-color: var(--red-color) !important; color: var(--text-on-dark); }
.bg-green  { background-color: var(--green-color) !important; color: var(--text-on-dark); }
.bg-gray   { background-color: var(--gray-color) !important; color: var(--text-on-light); }
.bg-black  { background-color: var(--black-color) !important; color: var(--text-on-dark); }
.bg-light  { background-color: var(--neutral-color) !important; }

/* Bordures */
.border-main   { border-color: var(--main-color) !important; }
.border-accent { border-color: var(--accent-color) !important; }
.border-red    { border-color: var(--red-color) !important; }
.border-green  { border-color: var(--green-color) !important; }
.border-gray   { border-color: var(--gray-color) !important; }
.border-black  { border-color: var(--black-color) !important; }

/* =======================================================
   Boutons
   ======================================================= */

.btn-main {
    background-color: var(--main-color);
    color: var(--text-on-main);
    border: none;
    transition: background-color 0.3s ease, transform 0.1s ease;
}
.btn-main:hover { background-color: var(--main-color-light); transform: translateY(-1px); }
.btn-main:active { background-color: var(--main-color-dark); transform: translateY(0); }

.btn-accent {
    background-color: var(--accent-color);
    color: var(--text-on-accent);
    border: none;
    transition: background-color 0.3s ease, transform 0.1s ease;
}
.btn-accent:hover { background-color: var(--accent-color-dark); transform: translateY(-1px); }
.btn-accent:active { background-color: var(--main-color); color: var(--neutral-color); }

.btn-red {
    background-color: var(--red-color);
    color: var(--text-on-dark);
    border: none;
    transition: background-color 0.3s ease, transform 0.1s ease;
}
.btn-red:hover { background-color: var(--red-color-light); transform: translateY(-1px); }
.btn-red:active { background-color: var(--red-color-dark); transform: translateY(0); }

.btn-green {
    background-color: var(--green-color);
    color: var(--text-on-dark);
    border: none;
    transition: background-color 0.3s ease, transform 0.1s ease;
}
.btn-green:hover { background-color: var(--green-color-light); transform: translateY(-1px); }
.btn-green:active { background-color: var(--green-color-dark); transform: translateY(0); }

.btn-gray {
    background-color: var(--gray-color);
    color: var(--text-on-dark);
    border: none;
    transition: background-color 0.3s ease, transform 0.1s ease;
}
.btn-gray:hover { background-color: var(--gray-color-light); transform: translateY(-1px); }
.btn-gray:active { background-color: var(--gray-color-dark); transform: translateY(0); }

.btn-black {
    background-color: var(--black-color);
    color: var(--text-on-dark);
    border: none;
    transition: background-color 0.3s ease, transform 0.1s ease;
}
.btn-black:hover { background-color: var(--black-color-light); transform: translateY(-1px); }
.btn-black:active { background-color: var(--black-color-dark); transform: translateY(0); }