/* CSS refactored by Nicolas G. (properties made by Gemini) */
:root {
    /*
    Bleu sémiologie : #2978A0
    Vert sémiologie : #04C360
    Violet sémiologie : #872D84
    */

    --color-brand-purple: #872D84;
    --color-brand-green: #04C360;
    --color-link: #2978A0;

    --error-color: #e74c3c;

    --bg-light-primary: #faf5f1;
    --bg-light-secondary: #f3eeea;
    --body-gradient: linear-gradient(135deg, #872D84 0%, #04C360 100%);

    --text-dark: #2c3e50;
    --text-muted: #7f8c8d;
    --border-light: #ecf0f1;

    --button-hover-bg: #04a953; /* TODO: Vérifier la couleur vert foncé */
    --button-hover-red-bg : #cc4234; /* TODO: Vérifier la couleur rouge foncé */
    --button-hover-purple-bg: #72256f; /* TODO: Vérifier la couleur violet foncé */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color : var(--text-dark);
}


/*---------------------------------------*/
/* Composants de bases de l'applications */
/*---------------------------------------*/

/* Bouton outline */
.button-outline {
    background: none;
    border: 1px solid var(--text-dark);
    color: var(--text-dark);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background 0.2s;
    line-height: 1.6;
}

.button-outline.green {
    border-color: var(--color-brand-green);
    color: var(--color-brand-green);
}
.button-outline.red {
    border-color: var(--error-color);
    color: var(--error-color);
}
.button-outline.purple {
    border-color: var(--color-brand-purple);
    color: var(--color-brand-purple);
}

.button-outline.green:hover {
    background-color: #f0fff4; /* Vert très clair pour, quand on passe la souris au dessus du boutton, on voit une légère différence */
}
.button-outline.red:hover {
    background-color: #fff0f0; /* Rouge très clair pour, quand on passe la souris au dessus du boutton, on voit une légère différence */
}
.button-outline.purple:hover {
    background-color: #fbf0ff; /* Violet très clair pour, quand on passe la souris au dessus du boutton, on voit une légère différence */
}
.button-outline.green.active {
    background-color: var(--color-brand-green);
    color: var(--bg-light-primary);
}
.button-outline.red.active {
    background-color: var(--error-color);
    color: var(--bg-light-primary);
}
.button-outline.purple.active {
    background-color: var(--color-brand-purple);
    color: var(--bg-light-primary);
}

/* Bouton plein */
.button-action {
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    font-weight: 500;
    line-height: 1.6;
}
.button-action.green {
    background-color: var(--color-brand-green);
    color: #faf5f1; /* Couleur du texte des boutons, le passer en gris très foncé si on passe en darkmode */
}

.button-action.green span { /* Color les icons en beige */
    color: var(--bg-light-primary);
}
.button-action.green:hover {
    background-color: var(--button-hover-bg);
}
.button-action.red {
    background-color: var(--error-color);
    color: #faf5f1;
}

.button-action.red span {
    color: var(--bg-light-primary);
}

.button-action.red:hover {
    background-color: var(--button-hover-red-bg);
}
.button-action.purple {
    background-color: var(--color-brand-purple);
    color: #faf5f1; /* Couleur du texte des boutons, le passer en gris très foncé si on est darkmode */
}

.button-action.purple span {
    color: var(--bg-light-primary);
}
.button-action.purple:hover {
    background-color: var(--button-hover-purple-bg);
    color: #faf5f1; /* Couleur du texte des boutons, le passer en gris très foncé si on est darkmode */
}

/*---------------------------*/
/* Style des cards en global */
/*---------------------------*/

div.round{
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/*--------------------------------*/
/* Style des textes et des titres */
/*--------------------------------*/

h3.title.purple {
    color: var(--color-brand-purple);
    font-size: 1rem;
    margin-bottom: 0px;
}

h2.title.purple {
    color: var(--color-brand-purple);
    font-size: 1.4rem;
    margin-bottom: 0px;
}
/*---------------------*/
/* Style des checkboxs */
/*---------------------*/
.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
    height: 20px;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 22px;
    width: 22px;
    background-color: var(--bg-light-secondary);
    border-radius: 6px;
    transition: background-color 0.2s;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--color-brand-green);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: var(--bg-light-secondary) solid;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}