/* ============================================================
   OLA — Operational Legibility Agent · Grammaire de rendu
   Source de vérité : docs/ola/PROJECT_PACK_v1.1.md (Module 03)
   Calé sur Pack v1.1 (Notion, 2026-06-10). Zéro placeholder.
   En cas d'écart avec le Pack : corriger CE fichier → Drift Log.
   ============================================================ */

/* Polices auto-hébergées — zéro appel tiers (souveraineté, RGPD Art. 33).
   Fichiers à déposer dans static/fonts/ (SIL Open Font License). */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/NotoSans-VF.10f8972e3579.woff2") format('woff2');
}
@font-face {
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/NotoSansMono-VF.2db3aebbaa9b.woff2") format('woff2');
}

:root {
  /* --- Palette fonctionnelle fermée -------------------------- */
  --ola-ink:    #111111;  /* texte primaire */
  --ola-canvas: #F5F5F3;  /* structurel : fond de page, headers, surfaces passives */
  --ola-engage: #FFFFFF;  /* engageable : corps actifs, zones de saisie (DEC-02) */
  --ola-rule:   #D9D9D9;  /* bordures structurelles, séparateurs, inactif */
  --ola-info:   #3E5C76;  /* info / opérationnel */
  --ola-warn:   #A67C52;  /* warning / attention */
  --ola-crit:   #6B2D2D;  /* critique / blocage */
  --ola-valid:  #2F4F3E;  /* validé / complété */

  /* --- Échelle typographique : 6 niveaux, jamais plus --------- */
  --ola-t-caption: 11px;  /* méta, footer (mono UPPER, opacité .6-.7) */
  --ola-t-body:    13px;  /* prose (sans 400) */
  --ola-t-label:   13px;  /* labels mono (mono 500 UPPER) */
  --ola-t-block:   16px;  /* block heading (sans 500) */
  --ola-t-section: 20px;  /* section title (sans 500) */
  --ola-t-doc:     28px;  /* document title (sans 500, max 1/page) */

  /* --- Espacement grille 8px (valeurs nommées du Pack) -------- */
  --ola-s-section: 32px;  /* entre sections */
  --ola-s-header:  24px;  /* header de section → corps */
  --ola-s-row:     12px;  /* ligne de tableau */
  --ola-s-label:    8px;  /* label → valeur */
  --ola-pad:       16px;  /* padding de bloc (ou 24px) */
  --ola-pad-lg:    24px;
}

/* --- Base ----------------------------------------------------- */
html { background: var(--ola-canvas); }
body {
  font-family: "Noto Sans", Inter, Helvetica, sans-serif;
  font-size: var(--ola-t-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ola-ink);
  margin: 0;
}
em, i { font-style: normal; } /* no italics */

/* --- Double registre ------------------------------------------ */
.ola-mono, code, kbd, samp, .ola-id, .ola-value {
  font-family: "Noto Sans Mono", "IBM Plex Mono", monospace;
}
.ola-label, .ola-tag, .ola-state, .ola-meta {
  font-family: "Noto Sans Mono", "IBM Plex Mono", monospace;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ola-label { font-size: var(--ola-t-label); }
.ola-meta  { font-size: var(--ola-t-caption); opacity: 0.65; }

/* --- Bordures : 1px, structurel = rule, sémantique = couleur --- */
.ola-frame   { border: 1px solid var(--ola-rule); background: var(--ola-engage); }
.ola-divider { border: 0; border-top: 1px solid var(--ola-rule); margin: var(--ola-s-header) 0; }
table.ola    { border-collapse: collapse; width: 100%; font-size: var(--ola-t-body); }
table.ola th, table.ola td {
  border: 1px solid var(--ola-rule);
  padding: var(--ola-s-row) var(--ola-pad);
  text-align: left;
  vertical-align: top;
}
table.ola th {
  font-family: "Noto Sans Mono", "IBM Plex Mono", monospace;
  font-size: var(--ola-t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--ola-canvas);
}
table.ola td { background: var(--ola-engage); }
table.ola tbody tr:hover td { background: var(--ola-canvas); }

/* Tables éditables (TableBlock) rendues sans classe .ola : héritent du style OLA */
.ola-doc .ola-section-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--ola-t-body);
}
.ola-doc .ola-section-body table th,
.ola-doc .ola-section-body table td {
  border: 1px solid var(--ola-rule);
  padding: var(--ola-s-row) var(--ola-pad);
  text-align: left;
  vertical-align: top;
}
.ola-doc .ola-section-body table th {
  font-family: "Noto Sans Mono", "IBM Plex Mono", monospace;
  font-size: var(--ola-t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--ola-canvas);
}
.ola-doc .ola-section-body table td { background: var(--ola-engage); }
.ola-doc .ola-section-body table tbody tr:hover td { background: var(--ola-canvas); }

/* --- Champs de saisie : pleine largeur, padding grille, focus net --- */
.ola-doc form { max-width: 640px; }
.ola-frame,
.ola-doc input[type="text"],
.ola-doc input[type="email"],
.ola-doc input[type="password"],
.ola-doc input[type="tel"],
.ola-doc input[type="url"],
.ola-doc input[type="number"],
.ola-doc input[type="search"],
.ola-doc input[type="date"],
.ola-doc textarea,
.ola-doc select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: "Noto Sans", Inter, Helvetica, sans-serif;
  font-size: var(--ola-t-body);
  line-height: 1.5;
  color: var(--ola-ink);
  background: var(--ola-engage);
  border: 1px solid var(--ola-rule);
  padding: 12px var(--ola-pad);
  margin: 0 0 var(--ola-s-section);
  transition: border-color 0.15s ease, outline-color 0.15s ease;
}
.ola-doc textarea { resize: vertical; min-height: 120px; }
.ola-doc select { appearance: none; cursor: pointer; }
.ola-doc input:focus,
.ola-doc textarea:focus,
.ola-doc select:focus {
  border-color: var(--ola-ink);
  outline: 2px solid var(--ola-info);
  outline-offset: -1px;
}
.ola-doc input::placeholder,
.ola-doc textarea::placeholder { color: var(--ola-rule); }
.ola-doc input:disabled,
.ola-doc textarea:disabled,
.ola-doc select:disabled { background: var(--ola-canvas); color: var(--ola-rule); cursor: not-allowed; }

/* Label de champ : mono UPPER, collé à son champ (rythme grille) */
.ola-doc form .ola-label {
  margin: 0 0 var(--ola-s-label);
  color: var(--ola-ink);
}
.ola-doc form .ola-label + .ola-frame,
.ola-doc form .ola-label + input,
.ola-doc form .ola-label + textarea,
.ola-doc form .ola-label + select { margin-top: 0; }

/* Champ honeypot (anti-spam) : retiré du flux visuel */
.ola-doc .vhd-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* Groupe label+champ : rythme cohérent, marge sous le champ */
.ola-field { margin: 0 0 var(--ola-s-section); }
.ola-field > .ola-label { margin: 0 0 var(--ola-s-label); }
.ola-field input,
.ola-field textarea,
.ola-field select { margin-bottom: 0; }

/* Rangée de champs courts côte à côte (grille 8px) */
.ola-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ola-pad-lg);
}
@media (max-width: 640px) {
  .ola-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* Marqueur « requis » discret (registre mono, couleur info) */
.ola-req { color: var(--ola-info); font-size: var(--ola-t-caption); margin-left: 6px; }

/* Aide sous un champ */
.ola-hint { font-size: var(--ola-t-caption); color: var(--ola-ink); opacity: 0.6; margin: calc(var(--ola-s-label) * -1 + 4px) 0 0; }

/* --- Fragment frontière HDS : encadré sobre, registre note --- */
.vhd-frontiere-hds {
  border: 1px solid var(--ola-info);
  background: var(--ola-canvas);
  padding: var(--ola-pad) var(--ola-pad-lg);
  margin: var(--ola-s-header) 0;
}
.vhd-frontiere-hds p { margin: 0; }

/* --- Sémantique fonctionnelle (couleur = sens, jamais décor) --- */
.ola-info     { color: var(--ola-info); }
.ola-warn     { color: var(--ola-warn); }
.ola-critical { color: var(--ola-crit); }
.ola-ok       { color: var(--ola-valid); }
.ola-tag-info     { border: 1px solid var(--ola-info);  color: var(--ola-info); }
.ola-tag-warn     { border: 1px solid var(--ola-warn);  color: var(--ola-warn); }
.ola-tag-critical { border: 1px solid var(--ola-crit);  color: var(--ola-crit); }
.ola-tag-ok       { border: 1px solid var(--ola-valid); color: var(--ola-valid); }
.ola-tag-info, .ola-tag-warn, .ola-tag-critical, .ola-tag-ok { padding: 2px 8px; }
/* Fonds teintés fonctionnels (DEC-09) : couleur palette, opacité <= 0.15 */
.ola-row-warn     { background: rgba(166, 124, 82, 0.15); }
.ola-row-critical { background: rgba(107, 45, 45, 0.15); }
.ola-row-ok       { background: rgba(47, 79, 62, 0.15); }
a { color: var(--ola-info); text-decoration: underline; text-underline-offset: 2px; }

/* --- Boutons OLA : 1px, sans radius, sans ombre, registre mono ----
   Scopé sous .ola-doc : ne touche pas le header/footer du site. --- */
.ola-btn,
.ola-doc button,
.ola-doc input[type="submit"],
.ola-doc input[type="button"] {
  display: inline-block;
  font-family: "Noto Sans Mono", "IBM Plex Mono", monospace;
  font-size: var(--ola-t-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 12px 24px;
  border: 1px solid var(--ola-ink);
  background: var(--ola-engage);
  color: var(--ola-ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ola-btn:hover,
.ola-doc button:hover,
.ola-doc input[type="submit"]:hover,
.ola-doc input[type="button"]:hover {
  background: var(--ola-ink);
  color: var(--ola-canvas);
}
.ola-btn:focus-visible,
.ola-doc button:focus-visible,
.ola-doc input[type="submit"]:focus-visible,
.ola-doc input[type="button"]:focus-visible {
  outline: 2px solid var(--ola-info);
  outline-offset: 2px;
}

/* Action primaire (soumission) : pleine, inversion au survol */
.ola-btn--primary,
.ola-doc button[type="submit"],
.ola-doc input[type="submit"] {
  background: var(--ola-ink);
  color: var(--ola-canvas);
  border-color: var(--ola-ink);
}
.ola-btn--primary:hover,
.ola-doc button[type="submit"]:hover,
.ola-doc input[type="submit"]:hover {
  background: var(--ola-engage);
  color: var(--ola-ink);
}

/* Variante discrète (lien-action secondaire) */
.ola-btn--ghost {
  background: transparent;
  border-color: var(--ola-rule);
  color: var(--ola-ink);
}
.ola-btn--ghost:hover {
  background: var(--ola-ink);
  color: var(--ola-canvas);
  border-color: var(--ola-ink);
}

/* Groupe de boutons : espacement grille 8px */
.ola-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--ola-s-header);
}

/* --- Titres (échelle fermée) ----------------------------------- */
h1 { font-size: var(--ola-t-doc);     font-weight: 500; margin: var(--ola-s-section) 0 var(--ola-s-header); }
h2 { font-size: var(--ola-t-section); font-weight: 500; margin: var(--ola-s-section) 0 var(--ola-s-header); }
h3 { font-size: var(--ola-t-block);   font-weight: 500; margin: var(--ola-s-header) 0 var(--ola-s-label); }

/* --- Conteneur document ----------------------------------------- */
.ola-doc {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--ola-s-section) var(--ola-pad-lg) 64px;
}
.ola-section { margin-bottom: var(--ola-s-section); }
.ola-section > .ola-section-header {
  background: var(--ola-canvas);
  border: 1px solid var(--ola-rule);
  padding: var(--ola-s-label) var(--ola-pad);
  margin-bottom: var(--ola-s-header);
}
.ola-section > .ola-section-body {
  background: var(--ola-engage);
  border: 1px solid var(--ola-rule);
  padding: var(--ola-pad-lg);
}

/* --- Bloc LIMITS (surface passive, obligatoire en fin) ----------- */
.ola-limits {
  background: var(--ola-canvas);
  border: 1px solid var(--ola-rule);
  padding: var(--ola-pad) var(--ola-pad-lg);
  margin-top: 48px;
  font-size: var(--ola-t-body);
}
.ola-limits > .ola-limits-title {
  font-family: "Noto Sans Mono", "IBM Plex Mono", monospace;
  font-size: var(--ola-t-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin: 0 0 var(--ola-s-label);
}
.ola-limits ul { list-style: none; padding-left: 0; margin: 0; }
.ola-limits li::before { content: "- "; } /* hyphens, never bullets */

/* --- Garde-fous : neutraliser le drift SaaS (assoupli DRIFT-002) -- */
/* Le registre cérémoniel (charte v1.0) autorise un radius discret (2px) et
   un focus-ring : on ne neutralise plus que les ombres de texte. */
* {
  text-shadow: none !important;
}

/* =================================================================
   REGISTRE CÉRÉMONIEL (DRIFT-002) — re-skin sur tokens site-vhd.css
   Les pages OLA passent en Montserrat + triptyque Or/Bleu/Cyan.
   .ola-mono reste mono : la vraie donnée (dashboards) garde sa lisibilité.
   ================================================================= */
.ola-ceremoniel .ola-doc {
  max-width: 760px;
  font-family: var(--ff-corps, "Montserrat", Arial, sans-serif);
  color: var(--vhd-texte);
  padding-top: 48px;
}
.ola-ceremoniel .ola-doc p,
.ola-ceremoniel .ola-doc li,
.ola-ceremoniel .ola-doc td,
.ola-ceremoniel .ola-doc label {
  font-family: var(--ff-corps, "Montserrat", Arial, sans-serif);
}

/* Titres cérémoniels (Montserrat, plus de mono) */
.ola-ceremoniel .ola-doc h1 { font-family: var(--ff-titre); font-weight: 600; font-size: var(--t-h1); color: var(--vhd-bleu); letter-spacing: 0.02em; }
.ola-ceremoniel .ola-doc h2 { font-family: var(--ff-titre); font-weight: 600; font-size: var(--t-h2); color: var(--vhd-texte); }
.ola-ceremoniel .ola-doc h3 { font-family: var(--ff-titre); font-weight: 600; font-size: var(--t-h3); color: var(--vhd-texte); }

/* Section = une seule carte, filet d'accroche bleu à gauche */
.ola-ceremoniel .ola-doc .ola-section {
  background: #fff;
  border: 1px solid var(--vhd-filet);
  border-left: 3px solid var(--vhd-bleu);
  border-radius: 2px;
  padding: 1.75rem 2rem;
  margin: 1.75rem 0;
}
.ola-ceremoniel .ola-doc .ola-section > .ola-section-header {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0.75rem;
  font-family: var(--ff-titre);
  font-weight: 600;
  font-size: var(--t-h3);
  text-transform: none;
  letter-spacing: normal;
  color: var(--vhd-bleu);
}
.ola-ceremoniel .ola-doc .ola-section > .ola-section-body {
  background: none;
  border: 0;
  padding: 0;
}
/* Marqueur de section (« 01 · … ») : Or, sobre */
.ola-ceremoniel .ola-doc .ola-section-body > .ola-label:first-child,
.ola-ceremoniel .ola-doc .ola-section-header .ola-label {
  color: var(--vhd-or);
  font-family: var(--ff-titre);
  font-weight: 500;
}

/* Séparateurs : les cartes suffisent, on efface les filets redondants */
.ola-ceremoniel .ola-doc .ola-divider { display: none; }

/* Labels en registre cérémoniel (normal case, Montserrat) — sauf .ola-mono */
.ola-ceremoniel .ola-doc .ola-label {
  font-family: var(--ff-titre);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--vhd-texte);
  font-size: 0.95rem;
}
.ola-ceremoniel .ola-doc .ola-meta { color: var(--vhd-gris); font-family: var(--ff-corps); text-transform: none; letter-spacing: normal; }
/* La vraie donnée reste monospace */
.ola-ceremoniel .ola-doc .ola-mono, .ola-ceremoniel .ola-doc code, .ola-ceremoniel .ola-doc .ola-value, .ola-ceremoniel .ola-doc .ola-id {
  font-family: "Noto Sans Mono", "IBM Plex Mono", monospace;
}

/* Liens cérémoniels (bleu, soulignement discret) */
.ola-ceremoniel .ola-doc a { color: var(--vhd-bleu); text-decoration: none; border-bottom: 1px solid rgba(42, 86, 128, 0.35); }
.ola-ceremoniel .ola-doc a:hover { border-bottom-color: var(--vhd-bleu); }

/* Champs : fond clair, focus-ring bleu (charte) */
.ola-ceremoniel .ola-doc input[type="text"],
.ola-ceremoniel .ola-doc input[type="email"],
.ola-ceremoniel .ola-doc input[type="password"],
.ola-ceremoniel .ola-doc input[type="tel"],
.ola-ceremoniel .ola-doc input[type="url"],
.ola-ceremoniel .ola-doc input[type="number"],
.ola-ceremoniel .ola-doc input[type="search"],
.ola-ceremoniel .ola-doc input[type="date"],
.ola-ceremoniel .ola-doc textarea,
.ola-ceremoniel .ola-doc select,
.ola-ceremoniel .ola-doc .ola-frame {
  font-family: var(--ff-corps);
  background: var(--vhd-fond);
  border: 1px solid var(--vhd-filet);
  border-radius: 2px;
  color: var(--vhd-texte);
}
.ola-ceremoniel .ola-doc input:focus,
.ola-ceremoniel .ola-doc textarea:focus,
.ola-ceremoniel .ola-doc select:focus {
  border-color: var(--vhd-bleu);
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 86, 128, 0.12);
}

/* Boutons cérémoniels : Or plein, Montserrat, casse normale */
.ola-ceremoniel .ola-doc .ola-btn,
.ola-ceremoniel .ola-doc button,
.ola-ceremoniel .ola-doc input[type="submit"] {
  font-family: var(--ff-titre);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  border-radius: 2px;
}
.ola-ceremoniel .ola-doc .ola-btn--primary,
.ola-ceremoniel .ola-doc button[type="submit"],
.ola-ceremoniel .ola-doc input[type="submit"] {
  background: var(--vhd-or);
  border-color: var(--vhd-or);
  color: #fff;
}
.ola-ceremoniel .ola-doc .ola-btn--primary:hover,
.ola-ceremoniel .ola-doc button[type="submit"]:hover,
.ola-ceremoniel .ola-doc input[type="submit"]:hover {
  background: #73560f;
  border-color: #73560f;
  color: #fff;
}
.ola-ceremoniel .ola-doc .ola-btn:not(.ola-btn--primary) {
  background: #fff;
  border-color: var(--vhd-bleu);
  color: var(--vhd-bleu);
}
.ola-ceremoniel .ola-doc .ola-btn:not(.ola-btn--primary):hover {
  background: var(--vhd-bleu);
  color: #fff;
}
.ola-ceremoniel .ola-doc .ola-btn--ghost {
  background: transparent;
  border-color: var(--vhd-filet);
  color: var(--vhd-texte);
}
.ola-ceremoniel .ola-doc .ola-btn--ghost:hover {
  background: var(--vhd-fond-alt);
  border-color: var(--vhd-bleu);
  color: var(--vhd-bleu);
}

/* Marqueur requis / hint en registre cérémoniel */
.ola-ceremoniel .ola-doc .ola-req { color: var(--vhd-gris); font-family: var(--ff-corps); font-size: 0.75rem; text-transform: none; letter-spacing: normal; }
.ola-ceremoniel .ola-doc .ola-hint { color: var(--vhd-gris); font-family: var(--ff-corps); }

/* Fragment frontière HDS : encadré or sur fond alt (cohérent vitrine) */
.ola-ceremoniel .ola-doc .vhd-frontiere-hds {
  border: 1px solid var(--vhd-or);
  border-left-width: 3px;
  background: var(--vhd-fond-alt);
}

/* Bloc final (ex-LIMITS) : note discrète, plus une « console » */
.ola-ceremoniel .ola-doc .ola-limits {
  background: none;
  border: 0;
  border-top: 1px solid var(--vhd-filet);
  border-radius: 0;
  padding: 1.25rem 0 0;
  margin-top: 2.5rem;
  color: var(--vhd-gris);
}
.ola-ceremoniel .ola-doc .ola-limits > .ola-limits-title {
  font-family: "Noto Sans Mono", monospace;
  color: var(--vhd-gris-clr);
  opacity: 1;
}