/*
 * Feuille de style principale. CSS natif, sans compilation.
 * Contrastes vérifiés AA, cibles tactiles ≥ 44 px, focus toujours visible (§12).
 */
:root {
    --bleu: #123f7a;
    --bleu-clair: #e8eef7;
    --texte: #1d1d1f;
    --gris: #595959;
    --bordure: #c9ced6;
    --vert: #1b6e2f;
    --rouge: #a4161a;
    --jaune: #fff3c4;
    --fond: #f6f7f9;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--texte);
    background: var(--fond);
    line-height: 1.5;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--bleu); }
:focus-visible { outline: 3px solid #f0a500; outline-offset: 2px; }

.conteneur { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
main.conteneur { padding-top: 1.5rem; padding-bottom: 2rem; min-height: 60vh; }

/* Lien d'évitement : visible seulement au focus clavier. */
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 1rem; top: 1rem; z-index: 10; background: #fff; padding: .75rem 1rem; }

.bandeau-env { background: var(--jaune); color: #4a3b00; text-align: center; padding: .4rem; font-weight: 600; }

.entete { background: var(--bleu); color: #fff; }
.entete--admin { background: #1f2937; }
.entete__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; min-height: 64px; }
.entete__titre { color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; padding: .5rem 0; }
.nav { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; }
.nav a, .nav .bouton-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; color: #fff; text-decoration: none; border-radius: 4px; }
.nav a:hover, .nav .bouton-lien:hover { background: rgba(255, 255, 255, .15); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }

.pied { background: #e5e7eb; color: var(--gris); padding: 1rem 0; font-size: .9rem; }

.en-ligne { display: inline; margin: 0; }
.bouton-lien { background: none; border: 0; font: inherit; cursor: pointer; }

.bouton {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem;
    background: var(--bleu); color: #fff; border: 2px solid var(--bleu); border-radius: 6px;
    font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.bouton:hover { background: #0c2c57; }
.bouton--secondaire { background: #fff; color: var(--bleu); }
.bouton--secondaire:hover { background: var(--bleu-clair); }

.formulaire { display: grid; gap: 1rem; margin: 1rem 0; }
.formulaire--etroit { max-width: 420px; }
.champ { display: grid; gap: .35rem; }
.champ label { font-weight: 600; }
.champ input[type="email"], .champ input[type="password"], .champ input[type="text"] {
    min-height: 44px; padding: .5rem .75rem; font: inherit; border: 1px solid var(--gris); border-radius: 6px;
}
.champ--case { display: flex; align-items: center; gap: .6rem; }
.champ--case input { width: 22px; height: 22px; }
.champ--case label { font-weight: 400; }

.message { padding: .75rem 1rem; border-radius: 6px; margin: 1rem 0; border-left: 5px solid; }
.message ul { margin: 0; padding-left: 1.2rem; }
.message--succes { background: #e6f4ea; border-color: var(--vert); }
.message--erreur { background: #fde8e8; border-color: var(--rouge); }
.message--info { background: var(--bleu-clair); border-color: var(--bleu); }

.carte { background: #fff; border: 1px solid var(--bordure); border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0; }
.carte h2 { margin-top: 0; font-size: 1.2rem; }
.liste-def { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; }
.liste-def dt { color: var(--gris); }
.liste-def dd { margin: 0; }
.journal { background: #111827; color: #e5e7eb; padding: 1rem; overflow-x: auto; font-size: .85rem; max-height: 400px; }
.texte-markdown h1, .texte-markdown h2 { font-size: 1.1rem; }

@media (max-width: 720px) {
    .liste-def { grid-template-columns: 1fr; }
    .liste-def dd { margin-bottom: .5rem; }
}