/* ==========================================================
   APPLICATION CIS LEYME
   Styles généraux et identité visuelle
   ========================================================== */

:root {
    /*
     * Identité CIS Leyme :
     * rouge sombre pour l'action et bleu nuit pour les
     * éléments secondaires.
     */
    --color-primary: #8b1e24;
    --color-primary-dark: #68161b;
    --color-secondary: #182433;

    --color-background: #f4f5f7;
    --color-surface: #ffffff;

    --color-text: #20252b;
    --color-muted: #6b7280;
    --color-border: #d9dde3;

    --color-danger: #b42318;
    --color-success: #217a43;
}


/* ==========================================================
   BASE
   ========================================================== */

* {
    box-sizing: border-box;
}

html {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--color-text);
    background: var(--color-background);
}

body {
    margin: 0;
}

a {
    color: var(--color-primary);
}


/* ==========================================================
   TITRES
   ========================================================== */

h1,
h2,
h3 {
    color: var(--color-secondary);
}

h1 {
    margin-top: 0;
}


/* ==========================================================
   BOUTONS
   ========================================================== */

.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 8px 14px;

    border: 0;
    border-radius: 7px;

    background: var(--color-primary);
    color: #ffffff;

    font: inherit;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;
}

.button:hover,
button:hover {
    background: var(--color-primary-dark);
}

.button-danger {
    background: var(--color-danger);
}

.button-success {
    background: var(--color-success);
}


/* ==========================================================
   FORMULAIRES
   ========================================================== */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;

    padding: 10px 12px;

    border: 1px solid var(--color-border);
    border-radius: 7px;

    background: #ffffff;
    color: var(--color-text);

    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(139, 30, 36, 0.18);
    border-color: var(--color-primary);
}


/* ==========================================================
   TABLEAUX
   ========================================================== */

table {
    width: 100%;

    border-collapse: collapse;

    background: #ffffff;
}

th,
td {
    padding: 12px;

    border-bottom: 1px solid var(--color-border);

    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--color-secondary);

    font-size: 0.85rem;
}


/* ==========================================================
   MESSAGES
   ========================================================== */

.alert {
    padding: 12px 16px;

    border-radius: 7px;

    margin-bottom: 20px;
}

.alert-error {
    background: #fff0f0;

    border: 1px solid #efb8b8;

    color: #8c1d18;
}


/* ==========================================================
   COMPOSANTS UTILISÉS PAR LES PAGES EXISTANTES
   ========================================================== */

/*
 * Carte blanche utilisée notamment par les formulaires
 * d'administration.
 */
.card {
    background: var(--color-surface);

    border-radius: 8px;

    padding: 25px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


/*
 * Espacement entre les différents champs d'un formulaire.
 */
.form-group {
    margin-bottom: 18px;
}


label {
    display: block;

    margin-bottom: 6px;

    font-weight: 700;
}


/*
 * Message d'erreur placé sous un champ.
 */
.error {
    margin-top: 6px;

    color: var(--color-danger);
}


/*
 * Ancienne classe conservée pour les pages existantes.
 */
.success {
    padding: 12px 16px;

    margin-bottom: 20px;

    border: 1px solid #b9dfc7;
    border-radius: 7px;

    background: #eaf7ef;

    color: #216e3a;
}


/*
 * Certaines pages peuvent contenir des tableaux plus larges
 * que l'écran d'un smartphone.
 */
.table-responsive {
    width: 100%;

    overflow-x: auto;
}


/* ==========================================================
   ADAPTATION SMARTPHONE
   ========================================================== */

@media (max-width: 700px) {

    .card {
        padding: 18px;
    }


    /*
     * Un tableau ne doit jamais élargir toute la page.
     */
    table {
        min-width: 650px;
    }

}

/* ==========================================================
   PAGE D'AUTHENTIFICATION
   ========================================================== */

/*
 * Structure utilisée lorsqu'aucun utilisateur n'est connecté.
 *
 * La page occupe toute la hauteur de l'écran afin que
 * le pied de page reste naturellement en bas.
 */
.auth-page {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background: var(--color-background);
}


/*
 * Zone principale de connexion.
 */
.auth-page__main {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;

    padding: 40px 20px;
}


/*
 * Logo principal de la page de connexion.
 *
 * Il est volontairement beaucoup plus visible que
 * le petit logo présent dans l'application connectée.
 */
.auth-page__logo {
    display: block;

    width: 190px;
    height: 190px;

    margin: 0 auto 25px;

    object-fit: contain;
}


/*
 * La carte de connexion ne doit pas occuper toute
 * la largeur de l'écran sur ordinateur.
 */
.auth-page .auth-card {
    width: 100%;
    max-width: 480px;

    margin: 0;
}


/*
 * Titre de la fenêtre de connexion.
 */
.auth-page .auth-card h2 {
    margin-top: 0;
}


/*
 * Pied de page spécifique aux pages non connectées.
 * Il occupe toute la largeur de l'écran.
 */
.auth-page__footer {
    width: 100%;

    padding: 18px 20px;

    text-align: center;

    font-size: 0.78rem;

    color: var(--color-muted);

    background: #ffffff;

    border-top: 1px solid var(--color-border);
}


.auth-page__footer strong {
    color: var(--color-text);

    font-weight: 600;
}


/* ==========================================================
   AUTHENTIFICATION - SMARTPHONE
   ========================================================== */

@media (max-width: 700px) {

    .auth-page__main {
        justify-content: flex-start;

        padding: 25px 16px;
    }


    .auth-page__logo {
        width: 150px;
        height: 150px;

        margin-bottom: 18px;
    }


    .auth-page .auth-card {
        max-width: 100%;
    }


    .auth-page__footer {
        padding: 15px;

        font-size: 0.72rem;
    }

}
/*
 * Bouton secondaire utilisé dans le contenu des pages.
 *
 * Contrairement à .button-secondary du header,
 * ce bouton doit rester visible sur un fond blanc.
 */
.button-outline {
    background: #ffffff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.button-outline:hover {
    background: var(--color-primary);
    color: #ffffff;
}