:root {
    --action: #677DB7;
    --action-survol: #5569A3;
    --texte: #1F1F2F;
    --texte-secondaire: #6C799C;
    --texte-desactive: #AAB0C0;
    --surface: #FFFFFF;
    --fond: #F5F5F7;
    --bordure: #DDE2EC;
    --ligne-selectionnee: #EEF1F8;
    --ligne-alternee: #F8F9FC;
    --bordure-cellule: #E8EBF0;
    --survol-secondaire: #F0F1F5;
    --selection-liste: #E3E8F5;
    --erreur: #C62828;
    --succes: #2E7D32;
    --avertissement: #EF6C00;
    --info: #677DB7;
    --fond-succes: #E8F5E9;
    --fond-erreur: #FFEBEE;
    --fond-info: #EEF1F8;
    --texte-sur-action: #FFFFFF;
    --nav: #252538;
    --nav-indicateur: #2E2E44;
    --nav-separateur: #3A3A52;
    --nav-lien-actif: #A8B8E8;
    --nav-texte: #C5CAD8;
    --nav-combo: #2A2A40;
    --nav-combo-bordure: #4A4A62;
    --sage: #96A188;
    --sage-survol: #7E8D72;
    --espace-2: 2px;
    --espace-4: 4px;
    --espace-8: 8px;
    --espace-12: 12px;
    --espace-16: 16px;
    --espace-20: 20px;
    --padding-controle-x: 10px;
    --padding-controle-y: 6px;
    --padding-carte: 14px;
    --padding-dialogue: 16px;
    --rayon-2: 2px;
    --rayon-4: 4px;
    --rayon-6: 6px;
    --rayon-10: 10px;
    --rayon-pill: 999px;
    --taille-display: 24px;
    --taille-titre: 18px;
    --taille-sous-titre: 14px;
    --taille-corps: 13px;
    --taille-legende: 11px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: "Segoe UI", sans-serif;
    font-size: var(--taille-corps);
    font-weight: 400;
    color: var(--texte);
    background: var(--fond);
    line-height: 1.45;
}

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

a:hover {
    color: var(--action-survol);
}

h1, h2, legend {
    color: var(--texte);
    font-weight: 600;
}

h1 {
    font-size: var(--taille-display);
    font-weight: 700;
    margin: 0 0 var(--espace-16);
}

h2, legend {
    font-size: var(--taille-titre);
    margin: 0 0 var(--espace-12);
}

legend {
    font-size: var(--taille-sous-titre);
    padding: 0 var(--espace-8);
}

.barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-12) var(--espace-16);
    background: var(--nav);
    color: var(--nav-texte);
    padding: var(--espace-12) var(--espace-16);
    border-bottom: 1px solid var(--nav-separateur);
}

.marque {
    display: flex;
    align-items: center;
    color: var(--texte-sur-action);
    text-decoration: none;
}

.logo {
    display: block;
    height: 32px;
    width: auto;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-4);
}

.nav a, .lien-barre {
    color: var(--nav-texte);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--rayon-4);
    font: inherit;
    cursor: pointer;
    padding: var(--padding-controle-y) var(--padding-controle-x);
}

.nav a:hover, .lien-barre:hover {
    background: var(--nav-indicateur);
    color: var(--texte-sur-action);
}

.nav a.actif {
    background: var(--nav-indicateur);
    color: var(--nav-lien-actif);
}

.nav form { margin: 0; }

body.page-public .barre {
    justify-content: center;
}

body.page-admin .barre {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}

body.page-admin .nav {
    justify-content: center;
}

.contenu {
    padding: var(--espace-20) var(--espace-16);
    max-width: 1100px;
}

.contenu-etroit {
    max-width: 560px;
    margin: 0 auto;
}

.contenu-installation {
    max-width: 720px;
}

.pied {
    padding: var(--espace-16);
    color: var(--texte-secondaire);
    font-size: var(--taille-legende);
    text-align: center;
}

.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-10);
    padding: var(--padding-carte);
    margin-bottom: var(--espace-16);
}

.carte-connexion { margin-top: var(--espace-20); }

.piege {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.groupe {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-10);
    padding: var(--padding-carte);
    margin: 0 0 var(--espace-16);
}

.champ {
    display: flex;
    flex-direction: column;
    gap: var(--espace-4);
    margin-bottom: var(--espace-12);
}

.champ span, .coche span {
    font-size: var(--taille-corps);
}

input, select, textarea {
    font: inherit;
    color: var(--texte);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-6);
    padding: var(--padding-controle-y) var(--padding-controle-x);
    width: 100%;
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus, button:focus-visible, .bouton:focus-visible, a:focus-visible {
    outline: var(--espace-2) solid var(--action);
    outline-offset: var(--espace-2);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--action);
}

input:disabled, select:disabled, textarea:disabled, button:disabled {
    color: var(--texte-desactive);
    cursor: not-allowed;
}

button, .bouton {
    display: inline-block;
    background: var(--action);
    color: var(--texte-sur-action);
    border: 1px solid var(--action);
    border-radius: var(--rayon-6);
    padding: var(--padding-controle-y) var(--padding-controle-x);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

button:hover, .bouton:hover {
    background: var(--action-survol);
    border-color: var(--action-survol);
    color: var(--texte-sur-action);
}

button.secondaire, .bouton.secondaire {
    background: var(--surface);
    color: var(--texte);
    border-color: var(--bordure);
}

button.secondaire:hover, .bouton.secondaire:hover {
    background: var(--survol-secondaire);
    border-color: var(--bordure);
    color: var(--texte);
}

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

button.danger:hover {
    background: var(--fond-erreur);
    border-color: var(--erreur);
    color: var(--erreur);
}

.coche {
    display: flex;
    align-items: center;
    gap: var(--espace-8);
    margin-bottom: var(--espace-12);
}

.coche input { width: auto; }

.actions, .entete-page, .ligne-lien, .ligne-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-8);
    align-items: center;
}

.entete-page {
    justify-content: space-between;
    margin-bottom: var(--espace-16);
}

.entete-page h1 { margin: 0; }

.ligne-form { align-items: flex-end; }

.ligne-form .champ {
    margin: 0;
    flex: 1;
    min-width: 12rem;
}

.ligne-supprimer, .zone-danger { margin-top: var(--espace-12); }

.table-scroll { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: var(--espace-8) var(--espace-12);
    border-bottom: 1px solid var(--bordure-cellule);
    vertical-align: top;
}

th {
    color: var(--texte);
    font-weight: 600;
}

tbody tr:nth-child(even) {
    background: var(--ligne-alternee);
}

tbody tr:hover {
    background: var(--survol-secondaire);
}

tbody tr.selectionnee, tbody tr.selectionnee:hover {
    background: var(--ligne-selectionnee);
}

.indicateurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--espace-12);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--espace-16);
}

.indicateurs li {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-10);
    padding: var(--padding-carte);
}

.indicateurs strong {
    display: block;
    color: var(--texte);
    font-size: var(--taille-display);
    font-weight: 700;
}

.indicateurs span {
    color: var(--texte-secondaire);
    font-size: var(--taille-legende);
}

.message {
    border-radius: var(--rayon-6);
    padding: var(--espace-8) var(--espace-12);
    margin: 0 0 var(--espace-12);
}

.message-erreur {
    background: var(--fond-erreur);
    color: var(--erreur);
}

.message-succes {
    background: var(--fond-succes);
    color: var(--succes);
}

.message-info {
    background: var(--fond-info);
    color: var(--info);
}

.message-avertissement {
    background: var(--surface);
    color: var(--avertissement);
    border: 1px solid var(--avertissement);
}

.etat-alignee { color: var(--succes); }
.etat-manquante, .etat-differente { color: var(--erreur); }
.etat-supplementaire { color: var(--avertissement); }

.intro, .aide {
    color: var(--texte-secondaire);
    font-size: var(--taille-legende);
}

.prose h2 { margin-top: var(--espace-20); }

.prose ul { padding-left: var(--espace-20); }

body.page-lecteur {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--fond);
}

body.page-lecteur ._df_book { height: 100vh; }

.lecteur-mentions {
    position: fixed;
    z-index: 10000;
    top: var(--espace-8);
    right: var(--espace-12);
    font-size: var(--taille-legende);
    color: var(--texte-secondaire);
    text-decoration: none;
}

.lecteur-mentions:hover { color: var(--texte); }

body.page-invitation {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-invitation .contenu {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.invitation-logo {
    display: block;
    height: 64px;
    width: auto;
    max-width: 220px;
    margin: 0 auto var(--espace-16);
    object-fit: contain;
}

.apercu-logo {
    display: block;
    align-self: center;
    height: 36px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-4);
    padding: var(--espace-4);
}

.champ-fichier {
    flex: 0 1 16rem;
}

.invitation {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-top: 4px solid var(--sage);
    border-radius: var(--rayon-10);
    padding: var(--padding-dialogue);
    text-align: center;
}

.invitation h1 {
    display: flex;
    flex-direction: column;
    gap: var(--espace-8);
    margin: 0 0 var(--espace-12);
}

.invitation-kicker {
    color: var(--texte);
    font-size: var(--taille-sous-titre);
    font-weight: 600;
}

.invitation-invite {
    font-size: var(--taille-titre);
    font-weight: 600;
}

.invitation-document {
    font-size: var(--taille-display);
    font-weight: 700;
}

.invitation .aide {
    margin: 0 0 var(--espace-16);
}

.invitation .champ {
    text-align: left;
}

.invitation .message {
    text-align: left;
}

.invitation button {
    width: 100%;
}

body.page-connexion {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-connexion .contenu {
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.porte {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-top: 4px solid var(--action);
    border-radius: var(--rayon-10);
    padding: var(--espace-20);
}

.porte-kicker {
    margin: 0 0 var(--espace-8);
    color: var(--action);
    font-size: var(--taille-legende);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.porte h1 {
    margin-bottom: var(--espace-8);
}

.porte-chapo {
    margin: 0 0 var(--espace-16);
    color: var(--texte-secondaire);
}

.porte .champ span {
    font-weight: 600;
}

.porte input {
    padding: var(--espace-8) var(--padding-controle-x);
}

.porte button {
    width: 100%;
    margin-top: var(--espace-4);
    padding: var(--espace-8) var(--padding-controle-x);
}

.porte-note {
    margin: var(--espace-16) 0 0;
    color: var(--texte-secondaire);
    font-size: var(--taille-legende);
}

@media (max-width: 720px) {
    .contenu { padding: var(--espace-16) var(--espace-12) var(--espace-20); }
    .barre { padding: var(--espace-12); }
    body.page-admin .barre { display: flex; }
    body.page-admin .nav { justify-content: flex-start; }
}