/* ============================================================
   Gestion SEM — feuille de style de l'application
   Image de marque L'effet futé : bleu dominant, accents sobres.
   ============================================================ */

@font-face {
    font-family: 'Lexend';
    src: url('/assets/fonts/Lexend-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Lexend';
    src: url('/assets/fonts/Lexend-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

:root {
    --bleu: #2C2C6B;
    --bleu-fonce: #232357;
    --saumon: #F77562;
    --saumon-fonce: #e05a47;
    --vert: #23A97D;
    --jaune: #F6BB3F;
    --noir: #161615;
    --gris: #6b6d7f;
    --fond: #F5F6FA;
    --carte: #ffffff;
    --bord: #E3E5EF;
    --rayon: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--noir);
    background: var(--fond);
}

h1, h2, h3 {
    font-family: 'Lexend', Verdana, sans-serif;
    font-weight: 700;
    color: var(--bleu);
    line-height: 1.25;
    margin: 0 0 .5rem;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

.sous-titre {
    font-family: 'Lexend', Verdana, sans-serif;
    font-weight: 300;
    color: var(--gris);
    margin: 0 0 1.25rem;
}

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

/* ---------- Barre supérieure ---------- */
.topbar {
    background: var(--bleu);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 1.5rem;
    height: 62px;
}
.topbar__logo img { height: 30px; display: block; }
.topbar__nav { display: flex; gap: .25rem; flex: 1; }
.topbar__nav a, .topbar__nav span {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
    padding: .45rem .8rem;
    border-radius: 6px;
}
.topbar__nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.topbar__nav a.actif { background: rgba(255, 255, 255, .16); color: #fff; }
.topbar__nav span.a-venir { color: rgba(255, 255, 255, .38); cursor: default; }
.topbar__nav span.a-venir small { font-size: .65rem; vertical-align: super; }
.topbar__user { display: flex; align-items: center; gap: .75rem; font-size: .88rem; }
.topbar__user a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.topbar__user a:hover { color: #fff; }

/* ---------- Mise en page ---------- */
.conteneur { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }

.carte {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.carte--accent { border-top: 3px solid var(--saumon); }

.grille { display: grid; gap: 1.25rem; }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- Formulaires ---------- */
.champ { margin-bottom: 1.1rem; }
.champ label {
    display: block;
    font-weight: 500;
    font-size: .88rem;
    margin-bottom: .35rem;
    color: var(--bleu);
}
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="password"] {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--bord);
    border-radius: 6px;
    font: inherit;
    color: var(--noir);
    background: #fff;
}
.champ input:focus {
    outline: 2px solid var(--bleu);
    outline-offset: 0;
    border-color: var(--bleu);
}
.champ .erreur { color: var(--saumon-fonce); font-size: .82rem; margin-top: .3rem; }
.case { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }

.btn {
    display: inline-block;
    border: 0;
    border-radius: 6px;
    padding: .65rem 1.4rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn--principal { background: var(--saumon); color: #fff; }
.btn--principal:hover { background: var(--saumon-fonce); }
.btn--secondaire { background: transparent; color: var(--bleu); border: 1.5px solid var(--bleu); }
.btn--secondaire:hover { background: var(--bleu); color: #fff; }
.btn--danger { background: transparent; color: #b3362a; border: 1.5px solid #b3362a; }
.btn--danger:hover { background: #b3362a; color: #fff; }
.btn--bloc { width: 100%; }

/* ---------- Alertes et badges ---------- */
.alerte {
    border-radius: 6px;
    padding: .8rem 1rem;
    font-size: .9rem;
    margin-bottom: 1.1rem;
    border: 1px solid transparent;
}
.alerte--succes { background: #e7f6f0; border-color: var(--vert); color: #14684d; }
.alerte--erreur { background: #fdeeec; border-color: var(--saumon); color: #a03225; }
.alerte--info { background: #ececf5; border-color: var(--bleu); color: var(--bleu); }
.alerte--attention { background: #fdf4e0; border-color: var(--jaune); color: #8a6414; }

.badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    padding: .15rem .6rem;
    border-radius: 99px;
}
.badge--vert { background: #e7f6f0; color: var(--vert); }
.badge--bleu { background: #ececf5; color: var(--bleu); }
.badge--jaune { background: #fdf4e0; color: #8a6414; }

/* ---------- Pages d'authentification ---------- */
.page-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.page-auth__logo img { height: 52px; margin-bottom: 1.75rem; }
.page-auth .carte { width: 100%; max-width: 430px; padding: 2rem; }
.page-auth__pied { margin-top: 1.25rem; font-size: .82rem; color: var(--gris); text-align: center; }

/* ---------- Divers ---------- */
.texte-petit { font-size: .85rem; color: var(--gris); }
.separateur { border: 0; border-top: 1px solid var(--bord); margin: 1.5rem 0; }
.liste-codes {
    font-family: monospace;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: 6px;
    padding: 1rem;
    columns: 2;
    margin: .75rem 0;
}
.liste-codes li { margin-bottom: .3rem; }
table.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tableau th {
    text-align: left;
    font-family: 'Lexend', Verdana, sans-serif;
    font-weight: 700;
    color: var(--bleu);
    border-bottom: 2px solid var(--bord);
    padding: .5rem .6rem;
}
table.tableau td { border-bottom: 1px solid var(--bord); padding: .55rem .6rem; vertical-align: top; }

/* ---------- Compléments formulaires et tableaux ---------- */
.champ select, select.select-inline {
    padding: .5rem .6rem;
    border: 1px solid var(--bord);
    border-radius: 6px;
    font: inherit;
    color: var(--noir);
    background: #fff;
    max-width: 100%;
}
.champ select { width: 100%; }
.champ textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--bord);
    border-radius: 6px;
    font: inherit;
    color: var(--noir);
    min-height: 90px;
    resize: vertical;
}
.champ textarea:focus, .champ select:focus { outline: 2px solid var(--bleu); border-color: var(--bleu); }

.btn--petit { padding: .3rem .7rem; font-size: .78rem; font-weight: 500; }
.actions-groupe { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.form-inline { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }

.badge--gris { background: #eceef4; color: var(--gris); }
.badge--rouge { background: #fdeeec; color: #a03225; }

details.liste-deroulante { position: relative; }
details.liste-deroulante summary {
    cursor: pointer;
    font-size: .82rem;
    color: var(--bleu);
    user-select: none;
}
details.liste-deroulante .panneau {
    position: absolute;
    z-index: 10;
    background: #fff;
    border: 1px solid var(--bord);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(22, 22, 21, .12);
    padding: .75rem 1rem;
    min-width: 230px;
    margin-top: .35rem;
}
details.liste-deroulante .panneau .case { margin-bottom: .4rem; }

.sous-nav { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.sous-nav a {
    text-decoration: none;
    font-weight: 500;
    font-size: .88rem;
    padding: .4rem .9rem;
    border-radius: 99px;
    color: var(--bleu);
    border: 1px solid var(--bord);
    background: #fff;
}
.sous-nav a.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }

.liste-etapes { padding-left: 1.2rem; margin: .5rem 0; }
.liste-etapes li { margin-bottom: .45rem; font-size: .88rem; }
code.code-inline {
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: 4px;
    padding: .05rem .35rem;
    font-size: .85em;
    word-break: break-all;
}