/* Charte reprise du site vitrine BRITED Patrimoine (comme l'outil d'audit) */
:root {
  --encre: #1D2733;
  --encre-2: #4A5563;
  --discret: #687485;
  --brun: #2F5D7C;
  --brun-fonce: #22465E;
  --sable: #B9C7D3;
  --ligne: #D3DAE1;
  --fond: #F4F6F8;
  --panneau: #E8EDF1;
  --blanc: #FFFFFF;
  --alerte: #A3412C;
  --vigilance: #B7791F;
  --ok: #5E7D55;
  --grille: #E2E7EC;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Instrument Sans', -apple-system, 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 15px/1.5 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }
h1 { font-size: 34px; letter-spacing: -0.01em; }
h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--discret); margin: 18px 0 8px; font-weight: 500; }
button { font: inherit; cursor: pointer; }
a { color: var(--brun); }

.principal { background: var(--brun); color: var(--blanc); border: 0; border-radius: 6px; padding: 10px 18px; font-weight: 500; }
.principal:hover { background: var(--brun-fonce); }
.principal:disabled { opacity: 0.5; cursor: default; }
.secondaire { background: var(--blanc); color: var(--brun); border: 1px solid var(--sable); border-radius: 6px; padding: 8px 14px; }
.secondaire:hover { background: var(--panneau); }
.lien { background: none; border: 0; color: var(--brun); padding: 0; }
.lien:hover { text-decoration: underline; }
.danger { color: var(--alerte); }

/* Structure */
.cadre { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
aside { background: var(--panneau); border-right: 1px solid var(--ligne); padding: 24px 16px; position: sticky; top: 0; height: 100vh; overflow: auto; display: flex; flex-direction: column; }
.marque { font-family: var(--serif); font-size: 21px; letter-spacing: 0.16em; color: var(--encre); }
.sous-marque { color: var(--discret); font-size: 13px; margin: 2px 0 26px; }
aside nav { display: grid; gap: 2px; }
aside nav button { display: flex; justify-content: space-between; align-items: center; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; color: var(--encre-2); }
aside nav button:hover { background: var(--fond); }
aside nav button.actif { background: var(--blanc); color: var(--encre); font-weight: 600; }
.pastille { background: var(--brun); color: var(--blanc); border-radius: 10px; font-size: 11px; padding: 1px 7px; font-weight: 600; }
.statut { font-size: 12px; color: var(--discret); margin-top: auto; padding-top: 20px; }
main { padding: 32px 40px 80px; max-width: 1180px; width: 100%; }
.entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.entete p { margin: 6px 0 0; color: var(--encre-2); }

.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 10px; padding: 20px 22px; margin-bottom: 18px; }
.carte > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.carte h3 { font-size: 21px; }
.carte header small, .note { color: var(--discret); font-size: 13px; }
.intro { color: var(--encre-2); margin: 0 0 14px; }
.colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.colonnes > .carte { margin-bottom: 0; }
.pile { display: grid; gap: 18px; margin-bottom: 18px; }
.vide { color: var(--discret); font-style: italic; margin: 4px 0; }

/* Champs */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 18px; }
.champ { display: grid; gap: 4px; align-content: start; }
.champ > span { font-size: 13px; font-weight: 500; color: var(--encre-2); }
.champ small { color: var(--discret); font-size: 12px; }
input, select, textarea { font: inherit; color: var(--encre); background: var(--fond); border: 1px solid var(--ligne); border-radius: 6px; padding: 7px 9px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sable); border-color: var(--brun); }
input[type="checkbox"] { width: auto; accent-color: var(--brun); }
input[type="file"] { background: none; border: 1px dashed var(--sable); padding: 14px; }
.montant-saisie { text-align: right; font-variant-numeric: tabular-nums; }
.case { display: inline-flex; gap: 8px; align-items: center; color: var(--encre-2); font-size: 14px; white-space: nowrap; }

/* Indicateurs */
.indicateurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.indicateur { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 10px; padding: 16px 18px; }
.indicateur span { font-size: 13px; color: var(--encre-2); }
.indicateur strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.15; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.indicateur small { color: var(--discret); font-size: 12.5px; }
.progression { height: 6px; background: var(--panneau); border-radius: 3px; overflow: hidden; margin: 6px 0 4px; position: relative; }
.progression i { display: block; height: 100%; background: var(--brun); border-radius: 3px; }
.progression b { position: absolute; top: 0; height: 100%; background: var(--sable); border-radius: 0 3px 3px 0; }

.etat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.etat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.etat.ok { color: var(--ok); }
.etat.vigilance { color: var(--vigilance); }
.etat.alerte { color: var(--alerte); }

.liste-faire { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.liste-faire li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--panneau); }
.liste-faire li:last-child { border-bottom: 0; }

/* Graphique */
.legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--encre-2); margin-bottom: 8px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphique text { font: 11px var(--sans); fill: var(--discret); }
.graphique .axe { stroke: var(--grille); stroke-width: 1; }
.graphique .cible { stroke: var(--discret); stroke-width: 1; }
.graphique .zone { fill: transparent; }
.graphique .zone:hover { fill: rgba(110, 90, 71, 0.06); }
.infobulle { position: fixed; z-index: 10; pointer-events: none; background: var(--encre); color: var(--blanc); font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 6px; box-shadow: 0 4px 16px rgba(46, 36, 28, 0.2); max-width: 260px; }
.infobulle b { font-weight: 600; }
.infobulle .ligne-ib { display: flex; justify-content: space-between; gap: 14px; }
.infobulle .ligne-ib i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }
details.chiffres { margin-top: 12px; font-size: 13px; }
details.chiffres summary { cursor: pointer; color: var(--brun); }

.barres { display: grid; gap: 9px; }
.barre { display: grid; grid-template-columns: minmax(120px, 190px) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.barre-nom { color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-piste { height: 12px; }
.barre-valeur { display: block; height: 100%; background: var(--brun); border-radius: 0 4px 4px 0; min-width: 2px; }
.barre-chiffre { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sources { display: grid; gap: 8px; }
.source { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; font-size: 14px; }
.source i { width: 10px; height: 10px; border-radius: 2px; }
.source em { font-style: normal; color: var(--discret); font-size: 12.5px; min-width: 40px; text-align: right; }

/* Tableaux */
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tableau th { text-align: left; font-weight: 500; color: var(--discret); font-size: 12px; border-bottom: 1px solid var(--encre); padding: 6px 8px; white-space: nowrap; }
.tableau td { padding: 6px 8px; border-bottom: 1px solid var(--panneau); vertical-align: middle; }
.tableau .nombre { text-align: right; white-space: nowrap; }
.tableau tr.total td { font-weight: 600; border-top: 1px solid var(--encre); border-bottom: 0; }
.tableau tr.sous-total td { font-weight: 600; background: var(--fond); }
.tableau input, .tableau select { padding: 5px 7px; font-size: 13.5px; background: transparent; border-color: transparent; }
.tableau input:hover, .tableau select:hover { border-color: var(--ligne); background: var(--fond); }
.tableau select.a-categoriser { border-color: var(--vigilance); background: #FBF3E4; }
.recette { color: var(--ok); }
.libelle-op { max-width: 330px; }
.libelle-op div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.libelle-op small { color: var(--discret); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-ouverte td { background: var(--fond); }
.detail td { background: var(--fond); padding: 4px 16px 18px; }
.detail-grille { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.ventilation-ligne { display: grid; grid-template-columns: 1.4fr 1fr 120px 28px; gap: 6px; margin-bottom: 6px; }
.ventilation-ligne input, .ventilation-ligne select { background: var(--blanc); border-color: var(--ligne); }
.pieces { display: grid; gap: 6px; margin-bottom: 10px; }
.piece { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.icone-piece { font-size: 12px; color: var(--discret); white-space: nowrap; }
.icone-piece.manque { color: var(--vigilance); }
.filtres { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filtres input[type="search"] { max-width: 260px; }
.filtres select { width: auto; }
.suggestion { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #E6EFF5; border: 1px solid var(--sable); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; flex-wrap: wrap; }
.suggestion div { display: flex; gap: 8px; }
.resume-liste { display: flex; justify-content: space-between; color: var(--encre-2); font-size: 13px; margin-top: 10px; }

/* Import */
.etapes-import { display: grid; gap: 18px; }
.apercu { max-height: 360px; overflow: auto; border: 1px solid var(--panneau); border-radius: 6px; }
.alerte-boite { border-left: 3px solid var(--vigilance); background: #FBF3E4; padding: 10px 14px; border-radius: 0 6px 6px 0; margin: 12px 0; font-size: 14px; }
.alerte-boite.grave { border-color: var(--alerte); background: #F8E9E4; }
.alerte-boite.info { border-color: var(--brun); background: var(--panneau); }

/* Comptabilité */
.cloture ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--encre-2); font-size: 14px; }
.cloture b { color: var(--encre); font-weight: 600; }
.exports { display: flex; gap: 10px; flex-wrap: wrap; }
.journal { max-height: 480px; overflow: auto; }

@media (max-width: 1000px) {
  .indicateurs { grid-template-columns: 1fr 1fr; }
  .colonnes, .detail-grille { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cadre { grid-template-columns: 1fr; }
  aside { position: static; height: auto; }
  main { padding: 20px 16px 60px; }
}

/* Connexion et compte */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.connexion .carte { width: min(400px, 100%); padding: 28px; }
.connexion form { display: grid; gap: 14px; margin-top: 8px; }
.erreur-connexion { color: var(--alerte); font-size: 14px; margin: 0; min-height: 1em; }
.utilisateur { font-size: 12.5px; color: var(--encre-2); margin-top: 10px; }
.negatif { color: var(--alerte); }
.ventilation-ligne.avec-tva { grid-template-columns: 1.4fr 1fr 110px 150px 28px; }
#form-mdp { display: grid; gap: 14px; max-width: 420px; }
.joindre { display: inline-block; border: 1px dashed var(--sable); border-radius: 6px; padding: 3px 10px; font-size: 12.5px; color: var(--brun); cursor: pointer; }
.joindre:hover { background: var(--panneau); }
.joindre input { display: none; }