/* Console Cèdrepolis — charte du cabinet : bleu nuit, or cèdre, écru ; Jost et Cormorant Garamond */
@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; src: url(/fonts/jost-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-display: swap; src: url(/fonts/jost-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-display: swap; src: url(/fonts/jost-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2'); }

:root {
  --nuit: #15244A; --cedre: #B8915A; --or: #C9A268; --ecru: #F4F1EA; --blanc: #FFFFFF;
  --texte: #1F2A44; --gris: #5B6478; --ligne: #E3DDD0;
  --rh: #225AA6; --qhse: #3F7F3A;
  --ok: #2E6B12; --ok-fond: #E8F2E0; --alerte: #A32D2D; --alerte-fond: #FBECEA;
  --j1: #9A7B1F; --j7: #C2700E; --j15: #C1501B; --j30: #B23A1E; --j45: #A32D2D;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ecru); color: var(--texte); font-family: 'Jost', system-ui, sans-serif; font-size: 15px; line-height: 1.5; }
a { color: var(--nuit); }
small { color: var(--gris); font-size: 12.5px; }

.entete { background: var(--nuit); color: var(--blanc); padding: 14px 28px; }
.marque { display: flex; align-items: center; gap: 14px; }
.marque img { width: 52px; height: auto; }
.marque strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 22px; letter-spacing: .14em; color: var(--or); }
.marque span { display: block; font-size: 13px; color: #D9DDE8; }

.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 20px; background: var(--blanc); border-bottom: 1px solid var(--ligne); }
.menu a { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 500; color: var(--texte); }
.menu a:hover { background: var(--ecru); }
.menu a[aria-current="page"] { background: var(--nuit); color: var(--blanc); }
.deconnexion { margin-left: auto; }
.deconnexion button { background: none; border: 1px solid var(--ligne); border-radius: 999px; padding: 7px 14px; font: inherit; color: var(--gris); cursor: pointer; }

.contenu { max-width: 1180px; margin: 0 auto; padding: 24px 24px 64px; }
h1 { font-family: 'Cormorant Garamond', serif; font-size: 34px; color: var(--nuit); margin: 4px 0 18px; }
h2 { font-size: 18px; font-weight: 600; color: var(--nuit); margin: 34px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--or); }
.compte { font-size: 13.5px; font-weight: 400; color: var(--gris); }

.bandeau { border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; }
.bandeau-alerte { background: var(--alerte-fond); color: var(--alerte); border: 1px solid #E8B9B4; }
.bandeau-ok { background: var(--ok-fond); color: var(--ok); }

.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; padding: 16px 18px; }
a.carte { text-decoration: none; color: inherit; }
a.carte:hover { border-color: var(--cedre); }
.indicateur span { display: block; font-size: 13px; color: var(--gris); }
.indicateur strong { display: block; font-size: 24px; font-weight: 600; color: var(--nuit); margin: 2px 0; }
.indicateur em { font-style: normal; font-size: 12.5px; color: var(--gris); }

.tableau { width: 100%; border-collapse: collapse; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; margin: 6px 0 10px; }
.tableau th, .tableau td { padding: 10px 12px; text-align: left; vertical-align: top; border-top: 1px solid #EFEAE0; }
.tableau thead th { background: #FAF8F3; font-size: 12.5px; font-weight: 600; color: var(--gris); border-top: 0; }
.tableau tbody th { font-weight: 500; }
.nombre { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.total { font-weight: 600; color: var(--nuit); }
.ligne-total th, .ligne-total td { font-weight: 600; background: #FAF8F3; }
.ligne-retard th, .ligne-retard td { color: var(--j15); }
.ligne-alerte th, .ligne-alerte td { background: #FDF4F3; }
.ligne-alerte th { color: var(--alerte); }
.defilement { overflow-x: auto; }
.vide { color: var(--gris); background: var(--blanc); border: 1px dashed var(--ligne); border-radius: 12px; padding: 14px 16px; }
.notes { color: var(--gris); font-size: 13.5px; padding-left: 18px; }

.outil { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: var(--blanc); }
.outil-rh { background: var(--rh); }
.outil-qhse { background: var(--qhse); }
.statut { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 999px; }
.statut-payee { background: var(--ok-fond); color: var(--ok); }
.statut-attente { background: #FEF3C7; color: #8A5A0B; }
.attention { color: var(--alerte); font-weight: 500; }

.palier { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 999px; color: var(--blanc); margin-top: 3px; white-space: nowrap; }
.palier-j1 { background: var(--j1); } .palier-j7 { background: var(--j7); } .palier-j15 { background: var(--j15); }
.palier-j30 { background: var(--j30); } .palier-j45 { background: var(--j45); }
.paliers .palier-carte { border-top: 5px solid var(--j1); }
.palier-carte-j7 { border-top-color: var(--j7) !important; } .palier-carte-j15 { border-top-color: var(--j15) !important; }
.palier-carte-j30 { border-top-color: var(--j30) !important; } .palier-carte-j45 { border-top-color: var(--j45) !important; background: #FDF4F3; }
.legende-paliers { color: var(--gris); font-size: 13px; }

.minuteur .piste { fill: #EDE7DA; }
.minuteur .repere { stroke: #B9AE98; stroke-width: 1; }
.minuteur .repere-alerte { stroke: var(--alerte); stroke-width: 2; }
.minuteur-j1 .rempli { fill: var(--j1); } .minuteur-j7 .rempli { fill: var(--j7); } .minuteur-j15 .rempli { fill: var(--j15); }
.minuteur-j30 .rempli { fill: var(--j30); } .minuteur-j45 .rempli { fill: var(--j45); }

.graphique { margin: 8px 0 6px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 12px 6px; }
.graphique .grille { stroke: #EFEAE0; }
.graphique .axe { fill: var(--gris); font-size: 11px; font-family: 'Jost', sans-serif; }
.barre-rh { fill: var(--rh); } .barre-qhse { fill: var(--qhse); }
figcaption { display: flex; gap: 16px; justify-content: center; font-size: 12.5px; color: var(--gris); }
.legende::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legende-rh::before { background: var(--rh); } .legende-qhse::before { background: var(--qhse); }
details { margin: 4px 0 12px; } summary { cursor: pointer; color: var(--nuit); font-weight: 500; }

.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; }
.filtres label { font-size: 13px; color: var(--gris); }
select, input { font: inherit; padding: 8px 10px; border: 1px solid #CFC7B6; border-radius: 8px; background: var(--blanc); color: var(--texte); }
.bouton { display: inline-block; background: var(--nuit); color: var(--blanc); border: 0; border-radius: 999px; padding: 10px 20px; font: inherit; font-weight: 600; cursor: pointer; }
.bouton:hover { background: #22356A; }
.bouton-discret { padding: 8px 16px; background: var(--cedre); }

.connexion { max-width: 420px; display: flex; flex-direction: column; gap: 6px; }
.connexion label { font-size: 13.5px; font-weight: 500; margin-top: 8px; }
.connexion .bouton { margin-top: 16px; }
.aide { font-size: 12.5px; color: var(--gris); }

@media (max-width: 640px) {
  .entete { padding: 12px 16px; } .contenu { padding: 16px 12px 48px; } h1 { font-size: 28px; }
  .deconnexion { margin-left: 0; } .tableau th, .tableau td { padding: 8px; font-size: 13.5px; }
}