/* e-Mairie — charte commune (couleurs de la présentation « e-Mairie » de MW Friend Technology) */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/vendor/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/vendor/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/vendor/inter/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('/vendor/inter/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap; src: url('/vendor/inter/inter-latin-800-normal.woff2') format('woff2'); }

:root {
  --nuit: #111438;          /* fond sombre, barre latérale */
  --nuit-2: #1D2042;        /* cartes sur fond sombre */
  --nuit-3: #2B2F58;        /* bordures sur fond sombre */
  --vert: #4AA45B;          /* action principale */
  --vert-fonce: #3C8A4B;
  --vert-clair: #6FD08C;    /* accents sur fond sombre */
  --vert-pale: #E5F4E8;
  --indigo: #2E3191;        /* graphiques, MW Friend */
  --indigo-2: #5B5FC7;
  --bleu: #3BA3D9;
  --orange: #E8A33D;
  --rouge: #D9534F;
  --texte: #1D2042;
  --texte-2: #5A5F7E;
  --texte-3: #8A8FAA;
  --texte-sombre: #A1A8C9;  /* texte secondaire sur fond sombre */
  --bordure: #E3E6EF;
  --fond: #F5F7FB;
  --blanc: #FFFFFF;
  --ombre: 0 1px 2px rgba(17, 20, 56, .05), 0 4px 16px rgba(17, 20, 56, .05);
  --rayon: 12px;
  --police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--police); color: var(--texte); background: var(--fond); font-size: 15px; line-height: 1.5; }
img, svg { max-width: 100%; }
a { color: var(--indigo); }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 .8em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 10px;
  border: 1px solid var(--bordure); background: var(--blanc); color: var(--texte); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: #C9CEDD; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-principal { background: var(--vert); border-color: var(--vert); color: #fff; }
.btn-principal:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.btn-doux { background: var(--vert-pale); border-color: #C8E7CF; color: var(--vert-fonce); }
.btn-danger { color: var(--rouge); }
.btn-plein { width: 100%; }
.btn-grand { min-height: 48px; font-size: 16px; padding: 12px 22px; }
.btn-petit { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.lien { background: none; border: 0; padding: 0; color: var(--indigo); font-weight: 600; cursor: pointer; }

/* Formulaires */
.champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.champ > span { font-size: 13px; font-weight: 600; color: var(--texte-2); }
.champ .aide { font-size: 12px; color: var(--texte-3); font-weight: 400; }
input[type=text], input[type=password], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=time],
input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--blanc); font-size: 15px; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 3px solid rgba(74, 164, 91, .25); border-color: var(--vert); }
.case { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--vert); }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 640px) { .grille-2, .grille-3 { grid-template-columns: 1fr; } }

/* Cartes, pastilles */
.carte { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre); }
.carte h3 { font-size: 15px; }
.pastille { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: #EEF0F6; color: var(--texte-2); }
.pastille.vert { background: var(--vert-pale); color: var(--vert-fonce); }
.pastille.orange { background: #FCF0DC; color: #A86A12; }
.pastille.rouge { background: #FBE5E4; color: #B63A36; }
.pastille.bleu { background: #E3F1FA; color: #1F79A8; }
.pastille.indigo { background: #E7E8F8; color: var(--indigo); }
.point { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }

/* Indicateurs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.kpi { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 14px 16px; box-shadow: var(--ombre); }
.kpi .titre { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texte-2); font-weight: 500; }
.kpi .ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--vert-pale); color: var(--vert-fonce); flex: none; }
.kpi .ico svg { width: 16px; height: 16px; }
.kpi .valeur { font-size: 26px; font-weight: 800; margin-top: 8px; letter-spacing: -.02em; }
.kpi .valeur small { font-size: 13px; font-weight: 600; color: var(--texte-2); margin-left: 3px; }
.kpi .sous { font-size: 12px; font-weight: 600; color: var(--vert); margin-top: 2px; }
.kpi .sous.orange { color: #C27D17; } .kpi .sous.rouge { color: var(--rouge); } .kpi .sous.gris { color: var(--texte-3); }

/* Tableaux */
.tableau-wrap { overflow-x: auto; }
table.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; font-size: 12px; font-weight: 600; color: var(--texte-3); padding: 8px 10px; border-bottom: 1px solid var(--bordure); white-space: nowrap; }
.tableau td { padding: 10px; border-bottom: 1px solid #EEF0F5; vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .nb { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau tr.cliquable { cursor: pointer; }
.tableau tr.cliquable:hover td { background: #F8F9FC; }

/* Barres de progression */
.barre { height: 7px; border-radius: 99px; background: #ECEEF4; overflow: hidden; }
.barre > i { display: block; height: 100%; border-radius: 99px; background: var(--vert); }
.barre.orange > i { background: var(--orange); } .barre.indigo > i { background: var(--indigo); } .barre.rouge > i { background: var(--rouge); }

/* Fenêtre modale et messages */
.modale-fond { position: fixed; inset: 0; background: rgba(17, 20, 56, .55); display: grid; place-items: center; padding: 16px; z-index: 100; }
.modale { background: var(--blanc); border-radius: 16px; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modale.large { width: min(940px, 100%); }
.modale-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--bordure); position: sticky; top: 0; background: var(--blanc); z-index: 1; }
.modale-tete h2 { margin: 0; font-size: 18px; }
.modale-corps { padding: 20px; }
.modale-pied { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--bordure); position: sticky; bottom: 0; background: var(--blanc); }
.fermer { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--texte-3); padding: 4px 8px; }
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; width: min(460px, calc(100% - 32px)); }
.toast { background: var(--nuit); color: #fff; padding: 12px 16px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.toast.erreur { background: #B63A36; }
.toast.succes { background: var(--vert-fonce); }
.vide { text-align: center; color: var(--texte-3); padding: 28px 12px; font-size: 14px; }
.alerte { padding: 12px 14px; border-radius: 10px; background: #FCF0DC; color: #7A4C0C; font-size: 14px; margin-bottom: 14px; }
.alerte.info { background: #E3F1FA; color: #155A80; }
.alerte.succes { background: var(--vert-pale); color: var(--vert-fonce); }
.alerte.erreur { background: #FBE5E4; color: #8E2A27; }
.muet { color: var(--texte-2); }
.petit { font-size: 13px; }
.chargement { padding: 40px; text-align: center; color: var(--texte-3); }

/* Ticket thermique 58 mm (impression et aperçu) */
.ticket58 { width: 58mm; max-width: 100%; padding: 4mm 3mm; background: #fff; color: #000; font-family: 'Courier New', ui-monospace, monospace; font-size: 11px; line-height: 1.35; margin: 0 auto; }
.ticket58 .c { text-align: center; }
.ticket58 .t { font-weight: 700; font-size: 13px; }
.ticket58 hr { border: 0; border-top: 1px dashed #000; margin: 5px 0; }
.ticket58 .qr svg { width: 34mm; height: 34mm; display: block; margin: 4px auto; }
.ticket58 .gros { font-size: 14px; font-weight: 700; }
@media print {
  body.impression-ticket > *:not(#zone-impression) { display: none !important; }
  body.impression-ticket #zone-impression { display: block !important; }
  @page { size: 58mm auto; margin: 0; }
}
#zone-impression { display: none; }