/* Optiges UI — la charte commune, chargée par chaque application APRÈS ses propres styles.
 *
 * Source : le design system « Optiges UI » (décisions de Driss du 17 octobre 2026).
 *   - une seule famille, Plus Jakarta Sans, 14 px, servie par Optiges ;
 *   - un seul accent pour le cadre : acc (#6366f1), bouton principal en acc-strong (#4f46e5) ;
 *   - la couleur de chaque application sert seulement à la reconnaître (pièce du logo,
 *     pastille, tuile) : jamais un bouton, jamais du texte ;
 *   - fond de page en dégradé bg-1 → bg-3, surfaces blanches, une seule ombre.
 *
 * Les règles générales sont écrites avec :where() pour ne pas prendre le pas sur les
 * réglages précis des écrans métier (plans, visas, lots), qui gardent leurs propres codes.
 * Chaque page porte <html data-app="…">.
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("polices/PlusJakartaSans.woff") format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --o-bg-1: #e8ecff;
  --o-bg-2: #f4f6fc;
  --o-bg-3: #eef1fb;
  --o-panel: #ffffff;
  --o-line: #e8ecf4;
  --o-txt: #141723;
  --o-muted: #64748b;
  --o-acc: #6366f1;
  --o-acc-strong: #4f46e5;
  --o-acc-soft: #eef2ff;
  --o-acc-ink: #3730a3;
  --o-on-acc: #ffffff;
  --o-err: #b91c1c;
  --o-radius-pill: 999px;
  --o-radius-card: 24px;
  --o-radius-panel: 16px;
  --o-radius-field: 12px;
  --o-shadow-1: 0 8px 32px rgba(20, 23, 35, .06);
  --o-font: "Plus Jakarta Sans", system-ui, "Segoe UI", sans-serif;
  --o-fond: linear-gradient(135deg, var(--o-bg-1) 0%, var(--o-bg-2) 45%, var(--o-bg-3) 100%);
}

/* Couleur d'identité de l'application : seulement pour la reconnaître. */
html[data-app="plateforme"] { --o-app: #f59e0b; }
html[data-app="documents"] { --o-app: #0078d4; }
html[data-app="observations"] { --o-app: #f97316; }
html[data-app="formulaires"] { --o-app: #0d9488; }
html[data-app="stock"] { --o-app: #c4a574; }
html[data-app="rh"] { --o-app: #db2777; }
html[data-app="gestion"] { --o-app: #16a34a; }

/* ---------- Police et fond ---------- */

:where(html[data-app]) body {
  font-family: var(--o-font);
  font-size: 14px;
  color: var(--o-txt);
  -webkit-font-smoothing: antialiased;
}
:where(html[data-app]) :is(button, input, select, textarea) { font-family: inherit; }

html[data-app]:not([data-app="plateforme"]),
:where(html[data-app]:not([data-app="plateforme"])) body {
  background: var(--o-fond);
  background-attachment: fixed;
}

/* ---------- Les couleurs d'action passent à l'accent Optiges ---------- */

/* Formulaires, Observations, Stock, RH, Gestion : --ff était la couleur de l'application
   ET la couleur des boutons. Les boutons prennent l'accent ; l'identité reste au logo. */
html[data-app] {
  --ff: var(--o-acc-strong);
  --ff-dark: var(--o-acc-ink);
  --ink: var(--o-txt);
  --line: var(--o-line);
}
/* Documents : mêmes rôles sous d'autres noms. Les couleurs de dossiers ne changent pas. */
html[data-app="documents"] {
  --ged-blue: var(--o-acc-strong);
  --ged-indigo: var(--o-acc-strong);
  --ged-blue-ink: var(--o-acc-ink);
  --font: var(--o-font);
  --canvas: var(--o-bg-2);
  --canvas-soft: var(--o-bg-3);
}

/* Bouton principal : acc-strong, texte blanc (6,29:1), en pilule. */
:where(html[data-app]) .primary {
  background: var(--o-acc-strong);
  color: var(--o-on-acc);
  border-radius: var(--o-radius-pill);
}
:where(html[data-app]) .primary:hover { background: var(--o-acc-ink); }
:where(html[data-app]) .primary:focus-visible { outline: 2px solid var(--o-acc-ink); outline-offset: 2px; }

/* Plateforme : le bouton par défaut est le bouton principal. */
:where(html[data-app="plateforme"]) button { background: var(--o-acc-strong); }
:where(html[data-app="plateforme"]) button:hover { background: var(--o-acc-ink); }

/* ---------- Le logo de l'application ---------- */

.o-marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--o-txt);
  text-decoration: none;
  letter-spacing: normal;
  white-space: nowrap;
}
.o-marque img { display: block; height: 24px; width: auto; flex-shrink: 0; }
.o-marque-app {
  padding-left: 10px;
  border-left: 1px solid var(--o-line);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--o-txt);
}
.o-symbole { display: block; width: 30px; height: 30px; }

/* ---------- RH : la barre latérale suit le cadre commun (claire) ---------- */

html[data-app="rh"] { --rail: transparent; }
html[data-app="rh"] .rail { background: transparent; color: var(--o-txt); border-right: 1px solid var(--o-line); }
html[data-app="rh"] .rail-btn { color: var(--o-muted); border-radius: var(--o-radius-pill); }
html[data-app="rh"] .rail-btn:hover { background: rgba(255, 255, 255, .6); color: var(--o-txt); }
html[data-app="rh"] .rail-btn.active { background: var(--o-panel); color: var(--o-txt); box-shadow: var(--o-shadow-1); }
html[data-app="rh"] .rail-btn small { color: var(--o-muted); }
html[data-app="rh"] .rail-btn.active small { color: var(--o-muted); }
html[data-app="rh"] .rail-who { border-top-color: var(--o-line); }
html[data-app="rh"] .rail-who b { color: var(--o-txt); }

/* ---------- Plateforme : logo en haut de la barre latérale ---------- */

.o-rail-logo { display: block; height: 24px; width: auto; }
.o-rail-symbole { display: none; width: 30px; height: 30px; }
html[data-app="plateforme"] .rail-name { display: flex; align-items: center; flex: none; }
html[data-app="plateforme"] .shell.is-compact .rail-name { display: flex; flex: none; }
html[data-app="plateforme"] .shell.is-compact .o-rail-logo { display: none; }
html[data-app="plateforme"] .shell.is-compact .o-rail-symbole { display: block; }
html[data-app="plateforme"] .shell.is-compact .app-version { display: none; }

/* La couleur d'une application n'écrit jamais de texte : liens actifs et « Ouvrir » en accent. */
html[data-app="plateforme"] .rail-link[class*="acc-"].on { color: var(--o-txt); }
html[data-app="plateforme"] .app-tile .go { color: var(--o-acc-ink); }

/* Page de connexion : l'icône de chaque application. */
.mod-icone { display: block; width: 40px; height: 40px; flex-shrink: 0; }

/* RH : sur grand écran, le logo est dans la barre latérale, pas en double dans l'en-tête. */
@media (min-width: 861px) {
  html[data-app="rh"] .app-header .o-marque { display: none; }
}

/* ---------- Téléphone : l'en-tête passe sur deux lignes au lieu de se chevaucher ---------- */

.o-marque { flex-shrink: 0; }
@media (max-width: 600px) {
  :where(html[data-app]) .app-header { flex-wrap: wrap; row-gap: 6px; }
  :where(html[data-app]) .app-header .app-version { display: none; }
  :where(html[data-app]) .app-header .o-marque { flex-basis: 100%; }
  .o-marque img { height: 22px; }
}