/* ===========================================================================
   Socle — charte graphique commune des applications métier.
   Une seule feuille pour toutes les applis : tokens + composants.
   Aucune dépendance externe (police système, pas de CDN) : rien ne casse
   hors ligne ou derrière un filtrage.
   =========================================================================== */

:root{
  /* — Marque : couleur de l'entité, injectée par le bandeau (palette officielle).
       Ville #123c5a · ComCom #822661 · CCAS #7c3aed · OT #0e7490 · DSI #0f172a — */
  --marque:#123c5a;
  --marque-fonce:color-mix(in srgb, var(--marque) 76%, #000);
  --marque-clair:color-mix(in srgb, var(--marque) 12%, #fff);
  --marque-contraste:#fff;
  /* Texte accentué (chiffres clés, titres, liens de tableau). Distinct de --marque-fonce,
     qui reste un FOND (bandeau, survol de bouton) et doit rester sombre dans les deux
     thèmes. Confondre les deux rend le texte illisible en thème sombre. */
  --marque-texte:var(--marque-fonce);

  /* — Neutres : légèrement biaisés vers le bleu de la marque, jamais gris pur — */
  --fond:#f4f6f9;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --encre:#1b232d;
  --encre-douce:#5a6673;
  --ligne:#dde3ea;

  /* — Sémantique (indépendante de la marque) — */
  --ok:#166534;      --ok-fond:#dcfce7;
  --alerte:#92400e;  --alerte-fond:#fef3c7;
  --erreur:#991b1b;  --erreur-fond:#fee2e2;
  --info:#1e40af;    --info-fond:#dbeafe;

  /* — Formes & rythme — */
  --r:10px; --r-s:7px; --r-pilule:99px;
  --ombre:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --ombre-h:0 4px 12px rgba(16,24,40,.10);
  --pas:16px;

  color-scheme:light dark;
}

/* Thème sombre : préférence système, puis choix explicite (data-theme) qui prime. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]){
    --fond:#12171d; --surface:#1b222b; --surface-2:#212a34;
    --encre:#e6eaee; --encre-douce:#98a3b0; --ligne:#2f3a46;
    --marque-clair:color-mix(in srgb, var(--marque) 26%, #12171d);
    /* La marque pure est trop sombre pour du texte sur fond sombre : on l'éclaircit. */
    --marque-texte:color-mix(in srgb, var(--marque) 45%, #fff);
    --ok:#7fc397; --ok-fond:#1c3025; --alerte:#d9b26a; --alerte-fond:#33291a;
    --erreur:#e59595; --erreur-fond:#331f1f; --info:#8fb3e8; --info-fond:#1c2637;
    --ombre:0 1px 2px rgba(0,0,0,.35); --ombre-h:0 4px 14px rgba(0,0,0,.45);
  }
}
:root[data-theme="sombre"]{
  --fond:#12171d; --surface:#1b222b; --surface-2:#212a34;
  --encre:#e6eaee; --encre-douce:#98a3b0; --ligne:#2f3a46;
  --marque-clair:color-mix(in srgb, var(--marque) 26%, #12171d);
    /* La marque pure est trop sombre pour du texte sur fond sombre : on l'éclaircit. */
    --marque-texte:color-mix(in srgb, var(--marque) 45%, #fff);
  --ok:#7fc397; --ok-fond:#1c3025; --alerte:#d9b26a; --alerte-fond:#33291a;
  --erreur:#e59595; --erreur-fond:#331f1f; --info:#8fb3e8; --info-fond:#1c2637;
  --ombre:0 1px 2px rgba(0,0,0,.35); --ombre-h:0 4px 14px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font:400 16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(15px,.95rem + .1vw,16.5px);
}
img{max-width:100%;height:auto}
/* Dans une interface applicative, les liens de tableaux et de cartes ne sont pas
   soulignés au repos (convention des outils métier) ; le soulignement revient au
   survol et au focus, et reste systématique dans les paragraphes de texte. */
a{color:var(--marque);text-decoration:none;text-underline-offset:2px}
a:hover,a:focus-visible{text-decoration:underline}
p a,li a{text-decoration:underline}
/* Un at-rule ne peut pas figurer dans une liste de sélecteurs : la règle était
   invalide, et l'erreur emportait tout ce qui suivait — dont la couleur du
   titre du bandeau, qui s'affichait alors en bleu foncé sur fond bleu foncé. */
:root[data-theme="sombre"] a{color:var(--marque-texte)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]) a{color:var(--marque-texte)}
}

/* ————————————————— Bandeau commun ————————————————— */
.sc-entete{
  display:flex;align-items:center;gap:14px;padding:11px clamp(12px,3vw,24px);
  background:linear-gradient(115deg,var(--marque-fonce),var(--marque));
  color:var(--marque-contraste);position:sticky;top:0;z-index:50;
}
/* Logo + titre : un seul lien vers l'accueil du module. */
.sc-marque{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;min-width:0}
.sc-marque:hover{text-decoration:none}
.sc-marque:hover .sc-logo{box-shadow:0 0 0 3px color-mix(in srgb,#fff 35%,transparent)}
.sc-entete .sc-logo{
  flex:none;width:36px;height:36px;border-radius:9px;background:#fff;color:var(--marque);
  display:grid;place-items:center;font-weight:800;font-size:.82rem;overflow:hidden;
}
.sc-entete .sc-logo img{width:100%;height:100%;object-fit:contain;padding:3px;background:#fff}
.sc-titre{min-width:0;line-height:1.2;display:block}
.sc-titre b{display:block;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-titre span{font-size:.76rem;opacity:.88}
.sc-nav{margin-left:auto;display:flex;align-items:center;gap:7px}
.sc-nav a,.sc-nav button{
  font:inherit;font-size:.83rem;color:inherit;text-decoration:none;cursor:pointer;
  padding:7px 12px;border-radius:var(--r-s);border:none;
  background:color-mix(in srgb,#fff 14%,transparent);
}
.sc-nav a.sc-apps{background:color-mix(in srgb,#fff 24%,transparent);font-weight:600}
.sc-nav a:hover,.sc-nav button:hover{background:color-mix(in srgb,#fff 30%,transparent)}
.sc-moi{display:flex;align-items:center;gap:8px;font-size:.83rem}
.sc-avatar{
  width:31px;height:31px;border-radius:50%;background:#fff;color:var(--marque);
  display:grid;place-items:center;font-size:.74rem;font-weight:700;flex:none;
}
/* Ruban d'avertissement (mode privilégié, environnement de test…) */
.sc-ruban{background:#b91c1c;color:#fff;text-align:center;padding:5px 12px;font-size:.8rem;font-weight:600}

/* ————————————————— Mise en page ————————————————— */
.sc-main{max-width:1180px;margin:0 auto;padding:clamp(14px,3vw,26px) clamp(12px,3vw,24px) 60px;display:grid;gap:var(--pas)}
.sc-pied{border-top:1px solid var(--ligne);color:var(--encre-douce);font-size:.8rem;
  padding:14px clamp(12px,3vw,24px);text-align:center}
h1{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin:0;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:1.15rem;margin:0;letter-spacing:-.005em}

/* ————————————————— Composants ————————————————— */
.sc-carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r);
  box-shadow:var(--ombre);padding:16px 18px}
.sc-carte-tete{display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px solid var(--ligne);font-weight:600}
.sc-carte-tete .sc-pilule{margin-left:auto}

/* Grille de tuiles / indicateurs — s'adapte à SON conteneur, pas à l'écran */
.sc-grille{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.sc-kpi{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--ombre)}
.sc-kpi .v{font-size:1.55rem;font-weight:700;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.sc-kpi .l{font-size:.78rem;color:var(--encre-douce)}
.sc-kpi .d{font-size:.75rem;font-weight:600;color:var(--ok);margin-top:2px}

/* Tableaux : défilent dans leur propre conteneur, jamais la page */
.sc-table-wrap{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r);
  box-shadow:var(--ombre);overflow:hidden}
.sc-table-scroll{overflow-x:auto}
table.sc-t{width:100%;border-collapse:collapse;font-size:.9rem}
.sc-t th{text-align:left;font-size:.71rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--encre-douce);font-weight:600;padding:9px 16px;border-bottom:1px solid var(--ligne);
  background:var(--surface-2);white-space:nowrap}
.sc-t td{padding:10px 16px;border-bottom:1px solid var(--ligne);vertical-align:middle}
.sc-t tbody tr:last-child td{border-bottom:none}
.sc-t tbody tr:hover{background:var(--marque-clair)}
.sc-t .num{text-align:right;font-variant-numeric:tabular-nums}

/* Pilules d'état : la couleur ne porte jamais seule l'information (libellé explicite) */
.sc-pilule{display:inline-block;padding:2px 10px;border-radius:var(--r-pilule);
  font-size:.74rem;font-weight:600;white-space:nowrap}
.sc-pilule.ok{background:var(--ok-fond);color:var(--ok)}
.sc-pilule.alerte{background:var(--alerte-fond);color:var(--alerte)}
.sc-pilule.erreur{background:var(--erreur-fond);color:var(--erreur)}
.sc-pilule.info{background:var(--info-fond);color:var(--info)}
.sc-pilule.neutre{background:var(--surface-2);color:var(--encre-douce);border:1px solid var(--ligne)}

/* Messages */
.sc-flash{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-s);padding:11px 15px;font-size:.9rem}
.sc-flash.ok{background:var(--ok-fond);color:var(--ok)}
.sc-flash.erreur{background:var(--erreur-fond);color:var(--erreur)}
.sc-flash.info{background:var(--info-fond);color:var(--info)}
.sc-flash.alerte{background:var(--alerte-fond);color:var(--alerte)}

/* Boutons */
.sc-btn{font:inherit;font-size:.9rem;font-weight:600;padding:9px 17px;border-radius:var(--r-s);
  border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.3}
.sc-btn.principal{background:var(--marque);color:#fff}
.sc-btn.secondaire{background:var(--surface);color:var(--encre);border-color:var(--ligne)}
.sc-btn.danger{background:var(--erreur-fond);color:var(--erreur)}
.sc-btn:disabled,.sc-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.sc-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}

/* Formulaires */
.sc-champ{display:grid;gap:5px;margin-bottom:12px}
.sc-champ label{font-size:.79rem;font-weight:600;color:var(--encre-douce)}
.sc-champ .aide{font-size:.76rem;color:var(--encre-douce)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=number],input[type=search],select,textarea{
  font:inherit;font-size:.92rem;padding:9px 12px;border:1px solid var(--ligne);
  border-radius:var(--r-s);background:var(--surface);color:var(--encre);width:100%;max-width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--marque);outline-offset:-1px;border-color:var(--marque)}
/* Focus clavier toujours visible (accessibilité) */
a:focus-visible,button:focus-visible,.sc-btn:focus-visible,summary:focus-visible{
  outline:2px solid var(--marque);outline-offset:2px;border-radius:3px}

/* État vide : jamais un écran blanc sans explication */
.sc-vide{text-align:center;color:var(--encre-douce);padding:34px 18px;display:grid;gap:8px;justify-items:center}
.sc-vide .ico{font-size:1.8rem;opacity:.6}

/* ————————————————— Adaptatif ————————————————— */
/* Le composant s'adapte à la largeur de son conteneur (pas seulement de l'écran) */
.sc-conteneur{container-type:inline-size}
@container (max-width:520px){
  .sc-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sc-titre span{display:none}
  .sc-nav a:not(.sc-apps):not(.sc-theme){display:none}
  .sc-t th,.sc-t td{padding:9px 11px}
  .sc-moi span{display:none}
}
@media (prefers-reduced-motion: no-preference){
  .sc-btn,.sc-nav a,.sc-nav button,.sc-kpi{transition:background-color .13s ease,box-shadow .13s ease,filter .13s ease}
  .sc-kpi:hover{box-shadow:var(--ombre-h)}
  .sc-btn:hover{filter:brightness(1.07)}
}

/* ————————————————— Impression ————————————————— */
@media print{
  .sc-entete,.sc-nav,.sc-actions,.sc-pied{display:none!important}
  body{background:#fff;color:#000}
  .sc-carte,.sc-table-wrap,.sc-kpi{box-shadow:none;border-color:#999}
}