/* Charte Orange CI (DSI) appliquée à ITAP.
   Toujours utiliser ces variables : jamais de couleur codée en dur pour les surfaces. */
:root {
  --orange: #ff7900;
  --orange-hover: #f16e00;
  --on-orange: #000;          /* texte noir sur orange (contraste) */
  --bg: #f4f4f4;
  --card: #fff;
  --fg: #000;
  --muted: #595959;
  --line: #d9d9d9;
  --side: #000;               /* barre latérale */
  --ok: #1f9d55;   --ok-bg: #e8f6ee;   --ok-line: #bfe3cc;
  --warn: #e0a100; --warn-bg: #fff6dc;
  --bad: #d63224;  --bad-bg: #fde6e3;
  --info: #2a8fd6; --neutral: #8592a6;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --side-w: 250px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212; --card: #1e1e1e; --fg: #f2f2f2; --muted: #b0b0b0; --line: #333;
    --ok-bg: #12301f; --ok-line: #1f5a38; --warn-bg: #3a2f0a; --bad-bg: #3d1713;
  }
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--fg); }

/* Barre latérale noire 250 px, rabattable (body.menu-off) */
.side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); background: var(--side); color: #fff; padding: 16px; }
.side a { display: flex; gap: 10px; align-items: center; color: #fff; padding: 10px 12px; border-radius: 3px; text-decoration: none; }
.side a.active, .side a:hover { background: var(--orange); color: var(--on-orange); }
.main { margin-left: var(--side-w); padding: 24px; }
body.menu-off .side { display: none; }
body.menu-off .main { margin-left: 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 16px; }

.btn { background: var(--orange); color: var(--on-orange); border: 0; border-radius: 3px; padding: 10px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.btn:hover { background: var(--orange-hover); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }

/* Pastilles : statuts ITAP */
.pill { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); }
.pill.ok   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }   /* Réussi */
.pill.warn { background: var(--warn-bg); color: #8a6400; }                                       /* À valider, À investiguer */
.pill.bad  { background: var(--bad-bg);  color: var(--bad); }                                    /* Échoué */
.pill.info { background: transparent;    color: var(--info); border-color: var(--info); }        /* Prêt, En cours */
.pill.off  { background: transparent;    color: var(--neutral); }                                /* Brouillon, Bloqué */

/* Icônes : SVG en ligne, trait 2 px arrondi */
svg.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Animations discrètes, toujours désactivables */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-width: 800px) { .side { display: none; } .main { margin-left: 0; padding: 16px; } }