/* HNP Audit — charte HNP Audit et Conseil : bleu marine #0E2547, rouge #C0152B */
:root {
  --marine: #0E2547; --marine-2: #16315c; --marine-3: #22406f; --rouge: #C0152B; --rouge-pale: #fbe9ec;
  --encre: #18223a; --gris: #66708a; --gris-2: #9aa3b7; --trait: #e3e7ef; --fond: #f5f6f9; --blanc: #fff;
  --ok: #1d7a4f; --ok-pale: #e6f4ec; --attente: #a76b00; --attente-pale: #fdf3e0; --bleu-pale: #eaf0fa;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ombre: 0 1px 2px rgba(14, 37, 71, .06), 0 4px 16px rgba(14, 37, 71, .05);
  --rayon: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14.5px/1.5 var(--sans); color: var(--encre); background: var(--fond); }
a { color: var(--marine-3); text-decoration: none; }
a:hover { color: var(--rouge); }
h1, h2, h3 { font-family: var(--serif); color: var(--marine); font-weight: 700; letter-spacing: .1px; }
h1 { font-size: 27px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; }

/* ---------- structure ---------- */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.barre { background: var(--marine); color: #cdd5e4; padding: 22px 16px; display: flex; flex-direction: column; gap: 4px;
         position: sticky; top: 0; height: 100vh; }
.marque { display: block; background: var(--blanc); border-radius: 8px; padding: 10px 12px 8px; margin-bottom: 6px; }
.marque img { width: 100%; display: block; }
.marque-sous { font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase; color: #8fa0bf; margin: 4px 4px 18px; }
.qui { background: var(--marine-2); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; }
.qui b { color: #fff; display: block; font-size: 13.5px; }
.qui small { color: #8fa0bf; }
.pastille-nom { width: 34px; height: 34px; border-radius: 50%; background: var(--rouge); color: #fff; display: grid; place-items: center;
                font-weight: 700; font-size: 13px; flex: none; }
.nav { display: block; color: #cdd5e4; padding: 9px 12px; border-radius: 7px; font-size: 14px; }
.nav:hover { background: var(--marine-2); color: #fff; }
.nav.actif { background: #fff; color: var(--marine); font-weight: 600; box-shadow: inset 3px 0 0 var(--rouge); }
.groupe { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: #6f80a3; margin: 16px 12px 4px; }
.barre .bas { margin-top: auto; font-size: 13px; }
.barre .bas button { background: none; border: 0; color: #cdd5e4; padding: 0; cursor: pointer; font: inherit; }
.barre .bas button:hover { color: #fff; }
.contenu { padding: 30px 38px 60px; max-width: 1320px; width: 100%; }

/* ---------- en-têtes ---------- */
.entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.surtitre { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--rouge); font-weight: 700; margin-bottom: 4px; }
.sous-titre { color: var(--gris); margin: 2px 0 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fil { font-size: 13px; color: var(--gris); margin-bottom: 8px; }
.fil a { color: var(--gris); }
.fil a:hover { color: var(--rouge); }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--trait); background: var(--blanc); color: var(--marine);
       padding: 8px 14px; border-radius: 7px; font: 600 13.5px var(--sans); cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--marine-3); color: var(--marine); }
.btn.prim { background: var(--marine); border-color: var(--marine); color: #fff; }
.btn.prim:hover { background: var(--marine-3); }
.btn.rouge { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.btn.discret { border-color: transparent; background: transparent; color: var(--gris); }
.btn.discret:hover { color: var(--rouge); }
.btn.petit { padding: 5px 10px; font-size: 12.5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- cartes ---------- */
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 20px 22px; box-shadow: var(--ombre); }
.grille { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.deux { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.chiffre { position: relative; overflow: hidden; }
.chiffre .val { font: 700 30px var(--serif); color: var(--marine); }
.chiffre .lib { color: var(--gris); font-size: 13px; }
.chiffre::after { content: ""; position: absolute; right: 0; top: 0; width: 4px; height: 100%; background: var(--marine); }
.chiffre.alerte::after { background: var(--rouge); }
.mb { margin-bottom: 18px; }

/* ---------- tableaux ---------- */
table.t { width: 100%; border-collapse: collapse; }
.t th { text-align: left; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); font-weight: 700;
        padding: 10px 12px; border-bottom: 2px solid var(--marine); }
.t td { padding: 11px 12px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr:hover td { background: #fafbfd; }
.num { text-align: right; white-space: nowrap; }
.muet { color: var(--gris); }
.petit { font-size: 12.5px; }

/* ---------- badges ---------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
         background: var(--bleu-pale); color: var(--marine-3); white-space: nowrap; }
.badge.ok { background: var(--ok-pale); color: var(--ok); }
.badge.attente { background: var(--attente-pale); color: var(--attente); }
.badge.ko { background: var(--rouge-pale); color: var(--rouge); }
.badge.gris { background: #eef0f4; color: var(--gris); }

/* ---------- barre d'avancement ---------- */
.avance { height: 6px; background: #e9edf4; border-radius: 99px; overflow: hidden; min-width: 90px; }
.avance > i { display: block; height: 100%; background: linear-gradient(90deg, var(--marine), var(--marine-3)); border-radius: 99px; }

/* ---------- cinq parties ---------- */
.parcours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 4px 0 22px; position: relative; }
.etape { position: relative; padding: 0 10px; text-align: center; }
.etape::before { content: ""; position: absolute; top: 19px; left: -50%; width: 100%; height: 3px; background: var(--trait); z-index: 0; }
.etape:first-child::before { display: none; }
.etape.faite::before, .etape.courante::before { background: var(--marine); }
.etape .rond { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center;
               font: 700 16px var(--serif); background: var(--blanc); border: 3px solid var(--trait); color: var(--gris-2); }
.etape.faite .rond { background: var(--marine); border-color: var(--marine); color: #fff; }
.etape.courante .rond { border-color: var(--rouge); color: var(--rouge); box-shadow: 0 0 0 5px var(--rouge-pale); }
.etape .titre { font-weight: 600; font-size: 13px; color: var(--marine); line-height: 1.3; }
.etape .etat { font-size: 11.5px; color: var(--gris); margin-top: 2px; }

.partie { border-left: 4px solid var(--trait); }
.partie.v4 { border-left-color: var(--ok); }
.partie.v2, .partie.v3 { border-left-color: var(--attente); }
.partie.v1 { border-left-color: var(--marine-3); }
.partie.fermee { opacity: .62; }
.partie-tete { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.partie-num { font: 700 13px var(--sans); color: var(--rouge); letter-spacing: 1px; text-transform: uppercase; }
.visas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.visa { background: var(--fond); border-radius: 7px; padding: 8px 10px; font-size: 12.5px; }
.visa b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--gris); }
.visa.fait { background: var(--ok-pale); }
.visa.fait span { color: var(--ok); font-weight: 600; }

/* ---------- formulaires ---------- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--marine); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=password], input[type=file], select, textarea, input:not([type]) {
  width: 100%; padding: 9px 11px; border: 1px solid #d4dae6; border-radius: 7px; font: 14px var(--sans); color: var(--encre); background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(34, 64, 111, .25); border-color: var(--marine-3); }
textarea { min-height: 70px; resize: vertical; }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.champ.large { grid-column: 1 / -1; }
.champ ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
.champ ul label { font-weight: 400; color: var(--encre); display: flex; gap: 6px; align-items: center; }
.errorlist { color: var(--rouge); font-size: 12.5px; margin: 4px 0 0; padding: 0; list-style: none; }
.aide { color: var(--gris); font-size: 12px; margin-top: 3px; }

/* ---------- messages ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 18px; }
.messages li { padding: 11px 14px; border-radius: 8px; margin-bottom: 8px; background: var(--bleu-pale); color: var(--marine); border-left: 4px solid var(--marine-3); }
.messages .msg-success { background: var(--ok-pale); color: var(--ok); border-left-color: var(--ok); }
.messages .msg-error { background: var(--rouge-pale); color: var(--rouge); border-left-color: var(--rouge); }
.encart { padding: 11px 14px; border-radius: 8px; background: var(--attente-pale); color: var(--attente); border-left: 4px solid var(--attente); }
.encart.ko { background: var(--rouge-pale); color: var(--rouge); border-left-color: var(--rouge); }

/* ---------- documents ---------- */
.explorateur { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.arbre { padding: 14px 10px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; }
.arbre a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 6px; color: var(--encre); font-size: 13.5px; }
.arbre a:hover { background: var(--fond); }
.arbre a.actif { background: var(--marine); color: #fff; }
.arbre a .n { color: var(--gris-2); font-size: 12px; }
.arbre a.actif .n { color: #b8c4da; }
.arbre .niv2 { padding-left: 22px; }
.arbre .niv3 { padding-left: 34px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tuile { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 9px; background: #fff; color: var(--encre); }
.tuile:hover { border-color: var(--marine-3); color: var(--marine); box-shadow: var(--ombre); }
.dossier-ico { width: 30px; height: 24px; background: var(--marine); border-radius: 3px 5px 5px 5px; position: relative; flex: none; }
.dossier-ico::before { content: ""; position: absolute; top: -5px; left: 0; width: 13px; height: 6px; background: var(--marine); border-radius: 3px 3px 0 0; }
.dossier-ico.p::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); }
.fic { display: inline-grid; place-items: center; width: 38px; height: 44px; border-radius: 5px; font: 700 10px var(--sans); color: #fff; background: var(--gris-2); flex: none; }
.fic.PDF { background: #c0392b; } .fic.XLS, .fic.CSV { background: #1d7a4f; } .fic.DOC { background: #2b5797; }
.fic.PPT { background: #c55a11; } .fic.IMG { background: #7a4fbf; } .fic.ZIP { background: #5b6578; }
.doc-ligne td:first-child { width: 52px; }
.depot { border: 2px dashed #c9d2e3; border-radius: 10px; padding: 18px; text-align: center; background: #fafbfe; transition: .15s; }
.depot.survol { border-color: var(--rouge); background: var(--rouge-pale); }
details.versions summary { cursor: pointer; color: var(--gris); font-size: 12.5px; }
.verrou { color: var(--attente); font-size: 12.5px; font-weight: 600; }

/* ---------- connexion ---------- */
.connexion { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.connexion .gauche { background: var(--marine); color: #cdd5e4; padding: 60px; display: flex; flex-direction: column; justify-content: space-between;
                     background-image: radial-gradient(circle at 85% 15%, rgba(192, 21, 43, .35), transparent 40%); }
.connexion .gauche h1 { color: #fff; font-size: 40px; line-height: 1.15; max-width: 440px; }
.connexion .gauche .slogan { color: #ef8a98; font-family: var(--serif); font-style: italic; }
.connexion .droite { display: grid; place-items: center; padding: 40px; }
.connexion form { width: 100%; max-width: 360px; }

@media (max-width: 960px) {
  .app, .connexion { grid-template-columns: 1fr; }
  .barre { position: static; height: auto; }
  .g4, .g3, .deux, .explorateur, .champs, .visas { grid-template-columns: 1fr; }
  .parcours { grid-template-columns: 1fr; gap: 10px; } .etape::before { display: none; }
  .contenu { padding: 20px; }
}
@media print { .barre, .no-print { display: none !important; } .app { display: block; } body { background: #fff; } }