:root {
    --couleur-fond: #f3f5f9;
    --couleur-surface: #ffffff;
    --couleur-bordure: #e2e5ec;
    --couleur-texte: #1c2130;
    --couleur-texte-attenue: #5b6372;
    --couleur-primaire: #2563eb;
    --couleur-primaire-fonce: #1d4ed8;
    --couleur-primaire-claire: #eaf1ff;
    --couleur-succes: #1f8a4c;
    --couleur-succes-fond: #e6f6ec;
    --couleur-erreur: #c23b32;
    --couleur-erreur-fond: #fbe9e7;
    --rayon: 8px;
    --ombre: 0 1px 2px rgba(20, 24, 36, 0.06), 0 1px 1px rgba(20, 24, 36, 0.04);
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--couleur-fond);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--couleur-texte);
    margin: 0;
    line-height: 1.45;
}

h1, h2, h3 {
    line-height: 1.25;
}

a {
    color: var(--couleur-primaire);
}

.page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5em;
}

/* ---------- En-tête commun du site ---------- */

.site-header {
    background: var(--couleur-surface);
    border-bottom: 1px solid var(--couleur-bordure);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.7em 1.5em;
    display: flex;
    align-items: center;
    gap: 1.5em;
    flex-wrap: wrap;
}

.site-header__brand {
    font-weight: 700;
    color: var(--couleur-texte);
    text-decoration: none;
    font-size: 1.05em;
    white-space: nowrap;
}

.site-header__nav {
    display: flex;
    gap: 0.3em;
    flex-wrap: wrap;
    flex: 1;
}

.site-header__nav a {
    color: var(--couleur-texte-attenue);
    text-decoration: none;
    padding: 0.45em 0.7em;
    border-radius: 6px;
    font-size: 0.92em;
    font-weight: 600;
}

.site-header__nav a:hover {
    background: var(--couleur-primaire-claire);
    color: var(--couleur-primaire-fonce);
}

.site-header__nav a.actif {
    background: var(--couleur-primaire-claire);
    color: var(--couleur-primaire-fonce);
}

.site-header__compte {
    display: flex;
    align-items: center;
    gap: 0.8em;
    font-size: 0.9em;
    white-space: nowrap;
}

.site-header__pseudo {
    font-weight: 600;
    color: var(--couleur-texte);
}

.site-header__compte a {
    color: var(--couleur-texte-attenue);
    text-decoration: none;
}

.site-header__compte a:hover {
    color: var(--couleur-primaire);
    text-decoration: underline;
}

@media (max-width: 760px) {
    .site-header__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .site-header__nav {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .site-header__compte {
        justify-content: space-between;
    }
}

/* ---------- Page de connexion ---------- */

.connexion {
    max-width: 380px;
    margin: 12vh auto;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 2em;
}

.connexion h1 {
    margin-top: 0;
    font-size: 1.3em;
    text-align: center;
}

.connexion .champ {
    margin-bottom: 1.1em;
}

.connexion label {
    display: block;
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 0.3em;
    color: var(--couleur-texte-attenue);
}

.connexion input {
    width: 100%;
    padding: 0.6em 0.75em;
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
    font-size: 1em;
}

.connexion button {
    width: 100%;
}

.connexion .erreur {
    color: var(--couleur-erreur);
    background: var(--couleur-erreur-fond);
    border-radius: 6px;
    padding: 0.6em 0.8em;
    margin-bottom: 1em;
    font-size: 0.92em;
}

/* ---------- Boutons ---------- */

button, .bouton {
    background: var(--couleur-primaire);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.55em 1.1em;
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
}

button:hover, .bouton:hover {
    background: var(--couleur-primaire-fonce);
}

/* ---------- Barre de titre de page ---------- */

.barre-haut {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2em;
    flex-wrap: wrap;
    gap: 0.5em;
}

.barre-haut h1 {
    font-size: 1.4em;
    margin: 0;
}

.barre-haut nav a {
    margin-left: 1em;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92em;
}

/* ---------- Recherche ---------- */

.recherche {
    margin-bottom: 1.5em;
}

.recherche input[type="search"] {
    width: 100%;
    max-width: 480px;
    padding: 0.6em 0.8em;
    font-size: 1em;
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
    background: var(--couleur-surface);
}

.recherche .resultats {
    margin-top: 0.5em;
    color: var(--couleur-texte-attenue);
    font-size: 0.9em;
}

/* ---------- Arbres (catalogue) ---------- */

.colonnes {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
}

@media (max-width: 900px) {
    .colonnes {
        flex-direction: column;
    }
}

.colonne {
    flex: 1 1 50%;
    min-width: 0;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.1em;
}

.colonne h2 {
    margin-top: 0;
    font-size: 1.05em;
}

.arbre, .arbre ul {
    list-style: none;
    margin: 0;
    padding-left: 1.2em;
}

.arbre {
    padding-left: 0;
}

.arbre > li {
    margin-bottom: 0.6em;
}

.arbre > li > .noeud__ligne > .noeud__nom {
    font-weight: 600;
    font-size: 1.03em;
}

.noeud__ligne {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    padding: 0.2em 0;
    flex-wrap: wrap;
}

.noeud__toggle {
    width: 1.1em;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85em;
    padding: 0;
    color: var(--couleur-texte-attenue);
}

.noeud__toggle--vide {
    cursor: default;
}

.noeud__nom {
    text-decoration: none;
    color: var(--couleur-texte);
}

.noeud__nom:hover {
    text-decoration: underline;
}

.noeud--trouve > .noeud__ligne .noeud__nom {
    background-color: #fff3a3;
    padding: 0 0.25em;
    border-radius: 3px;
}

/* ---------- Badges ---------- */

.badge {
    display: inline-block;
    font-size: 0.72em;
    padding: 0.15em 0.6em;
    border-radius: 10px;
    color: #fff;
    white-space: nowrap;
    font-weight: 600;
}

.badge--tickets { background: #64748b; }
.badge--statut { background: #70788a; }

.badge--conserver { background: #2f9e55; }
.badge--renommer { background: #2b7fd1; }
.badge--deplacer { background: #2b94b0; }
.badge--renommer_deplacer { background: #c9790f; }
.badge--fusionner { background: #7c4fd6; }
.badge--supprimer { background: #c23b32; }
.badge--creer { background: #2f9e55; }

.badge--import-excel {
    background: #8b2fc2;
}

/* ---------- Indicateurs ---------- */

.cartes-indicateurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
    margin-bottom: 1.5em;
}

.carte-indicateur {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.1em;
}

.carte-indicateur .valeur {
    font-size: 1.7em;
    font-weight: 700;
    color: var(--couleur-primaire-fonce);
}

.carte-indicateur .libelle {
    color: var(--couleur-texte-attenue);
    font-size: 0.85em;
}

/* ---------- Diff ---------- */

.diff-section {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    margin-bottom: 1em;
    padding: 0.2em 1.1em 1.1em;
}

.diff-section summary {
    cursor: pointer;
    padding: 0.8em 0;
    font-weight: 600;
    font-size: 1.03em;
}

.boutons-export {
    display: flex;
    gap: 0.8em;
    margin-bottom: 1.5em;
    flex-wrap: wrap;
}

.boutons-export a {
    text-decoration: none;
    color: #fff;
    background: var(--couleur-primaire);
    border-radius: 6px;
    padding: 0.6em 1.1em;
    font-weight: 600;
}

.boutons-export a:hover {
    background: var(--couleur-primaire-fonce);
}

/* ---------- Fiches ---------- */

.fiche {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.6em;
    max-width: 800px;
}

.fiche dl {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0.5em 1em;
    margin: 0;
}

@media (max-width: 600px) {
    .fiche dl {
        grid-template-columns: 1fr;
    }
}

.fiche dt {
    font-weight: 600;
    color: var(--couleur-texte-attenue);
}

.fiche dd {
    margin: 0;
}

.fiche h2 {
    margin-top: 1.5em;
    font-size: 1.05em;
    border-top: 1px solid var(--couleur-bordure);
    padding-top: 1em;
}

.fiche ul.simple {
    padding-left: 1.2em;
    margin: 0.3em 0;
}

.fiche + .fiche {
    margin-top: 1.5em;
}

/* ---------- Messages flash ---------- */

.flash {
    max-width: 1400px;
    margin: 1em auto 0;
    padding: 0.7em 1.1em;
    border-radius: 6px;
    font-size: 0.95em;
}

.flash--success {
    background: var(--couleur-succes-fond);
    color: #1a5c35;
    border: 1px solid #b9e3c7;
}

.flash--error {
    background: var(--couleur-erreur-fond);
    color: #7a2a20;
    border: 1px solid #f0b3ac;
}

/* ---------- Formulaires d'édition ---------- */

.edition-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1em;
    margin-bottom: 1em;
}

.formulaire-court {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.formulaire-court label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--couleur-texte-attenue);
}

.formulaire-court select,
.formulaire-court input[type="text"] {
    padding: 0.45em;
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
}

.formulaire-court button {
    align-self: flex-start;
}

.formulaire-inline {
    display: inline;
}

.bouton-lien {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--couleur-primaire);
    border: 1px dashed var(--couleur-primaire);
    border-radius: 6px;
    padding: 0.4em;
}

.bouton-danger {
    background: var(--couleur-erreur);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.55em 1.1em;
    cursor: pointer;
}

.bouton-danger:hover {
    background: #a52f27;
}

.avertissement {
    color: #7a4f10;
    background: #fdf3df;
    border: 1px solid #f0d9a0;
    border-radius: 6px;
    padding: 0.7em 1.1em;
}

/* ---------- Commentaires ---------- */

.commentaires {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
}

.commentaires li {
    border-bottom: 1px solid var(--couleur-bordure);
    padding: 0.6em 0;
}

.commentaires li p {
    margin: 0.3em 0 0;
}

.commentaire-date {
    color: var(--couleur-texte-attenue);
    font-size: 0.85em;
    margin-left: 0.5em;
}

textarea {
    width: 100%;
    max-width: 600px;
    padding: 0.5em;
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
    font-family: inherit;
    display: block;
    margin-bottom: 0.5em;
}

/* ---------- Filtres / tableaux ---------- */

.filtres {
    display: flex;
    gap: 0.6em;
    align-items: center;
    margin-bottom: 1em;
    flex-wrap: wrap;
}

.filtres select,
.filtres input {
    padding: 0.45em 0.6em;
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
    background: var(--couleur-surface);
}

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

.tableau-historique {
    width: 100%;
    border-collapse: collapse;
    background: var(--couleur-surface);
    border-radius: var(--rayon);
    overflow: hidden;
}

.tableau-historique th,
.tableau-historique td {
    text-align: left;
    padding: 0.55em 0.75em;
    border-bottom: 1px solid var(--couleur-bordure);
    font-size: 0.92em;
}

.tableau-historique th {
    background: #f8f9fc;
    color: var(--couleur-texte-attenue);
    font-weight: 600;
}

.historique-noeud li {
    margin-bottom: 0.4em;
}

/* ---------- Page d'accueil ---------- */

.accueil-hero {
    background: linear-gradient(135deg, var(--couleur-primaire) 0%, #4338ca 100%);
    color: #fff;
    border-radius: var(--rayon);
    padding: 2em;
    margin-bottom: 1.5em;
}

.accueil-hero h1 {
    margin: 0 0 0.3em;
    font-size: 1.6em;
}

.accueil-hero p {
    margin: 0;
    opacity: 0.92;
    max-width: 700px;
}

.accueil-raccourcis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1em;
    margin-bottom: 1.5em;
}

.carte-raccourci {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.2em;
    text-decoration: none;
    color: var(--couleur-texte);
    display: block;
}

.carte-raccourci:hover {
    border-color: var(--couleur-primaire);
}

.carte-raccourci strong {
    display: block;
    font-size: 1.05em;
    margin-bottom: 0.3em;
}

.carte-raccourci span {
    color: var(--couleur-texte-attenue);
    font-size: 0.9em;
}

.accueil-recherche {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.3em;
    margin-bottom: 1.5em;
}

.accueil-recherche input[type="search"] {
    width: 100%;
    padding: 0.65em 0.8em;
    font-size: 1.05em;
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
    margin-bottom: 0.8em;
}

.resultats-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.resultat-item {
    border-bottom: 1px solid var(--couleur-bordure);
    padding: 0.7em 0;
}

.resultat-item:last-child {
    border-bottom: none;
}

.resultat-item a {
    font-weight: 600;
    text-decoration: none;
}

.resultat-item .chemin {
    display: block;
    color: var(--couleur-texte-attenue);
    font-size: 0.88em;
    margin-top: 0.15em;
}

/* ---------- Simulateur ---------- */

.simulateur-intro {
    background: var(--couleur-primaire-claire);
    border: 1px solid #c7d9fb;
    border-radius: var(--rayon);
    padding: 1.1em 1.3em;
    margin-bottom: 1.5em;
    font-size: 0.95em;
}

.simulateur-barre {
    position: relative;
    margin-bottom: 1.2em;
}

.simulateur-barre input[type="search"] {
    width: 100%;
    padding: 0.8em 1em;
    font-size: 1.1em;
    border: 2px solid var(--couleur-primaire);
    border-radius: 8px;
}

.simulateur-resultats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.simulateur-resultat {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 0.9em 1.1em;
}

.simulateur-resultat .chemin-complet {
    font-weight: 600;
    display: block;
}

.simulateur-resultat .groupe {
    color: var(--couleur-texte-attenue);
    font-size: 0.88em;
}

.simulateur-vide {
    color: var(--couleur-texte-attenue);
    font-style: italic;
}