/* ============================================================
   ITIWE — Marquage « IA » (G.2)
   Le suffixe « IA » comme tampon/trademark sur les titres.
   3 directions à arbitrer. Toutes utilisent la palette du
   design system (tokens.css) — aucune couleur hors charte.

   USAGE
   -----
   Le suffixe est un <span> qui REMPLACE l'espace + « IA » du
   titre. L'espacement est géré par la marge du span.

     <h1>Le Trésorier<span class="ia-mark ia-mark--caps">IA</span></h1>

   Direction A — ia-mark--caps      · Capitale-sceau (typographique)
   Direction B — ia-mark--cartouche · Cartouche estampillé (badge)
   Direction C — ia-mark--delta     · Delta-ligature (lié au mark)
   ============================================================ */

.ia-mark {
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* ---- Direction A · Capitale-sceau -------------------------
   Mono, capitales espacées, vermillon, légèrement surélevé.
   Le suffixe se lit comme un poinçon de marque (façon ™),
   sans conteneur. Le plus discret, monte/descend en taille
   sans jamais casser. */
.ia-mark--caps {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 0.46em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vermillon);
  vertical-align: 0.42em;
  margin-left: 0.32em;
}
/* variante encre (contexte sobre) */
.ia-mark--caps.ia-mark--ink { color: var(--ink); }
/* variante fond sombre */
.ia-mark--on-ink.ia-mark--caps { color: var(--vermillon); }

/* ---- Direction B · Cartouche estampillé -------------------
   Petit cartouche plein vermillon, texte papier, mono.
   Angle franc (r-xs). Lisible et hiérarchisé même très petit —
   idéal pour les cases denses de l'organigramme. */
.ia-mark--cartouche {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 600;
  font-size: 0.36em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-warm);
  background: var(--vermillon);
  padding: 0.34em 0.5em 0.3em;
  border-radius: var(--r-xs);
  vertical-align: 0.4em;
  margin-left: 0.36em;
  line-height: 1;
}
/* variante contour (sur fonds clairs où le plein pèse trop) */
.ia-mark--cartouche.ia-mark--outline {
  color: var(--vermillon);
  background: transparent;
  box-shadow: inset 0 0 0 1.2px var(--vermillon);
}
/* variante fond sombre */
.ia-mark--on-ink.ia-mark--cartouche {
  color: var(--ink);
  background: var(--paper-warm);
}

/* ---- Direction C · Delta-ligature -------------------------
   Lié à la géométrie du mark ITIWE : un petit delta (le
   triangle interne du mark) connecte le nom au suffixe.
   « IA » repris en serif italique, même famille que le titre,
   en vermillon. Le plus signé / le plus identitaire. */
.ia-mark--delta {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--vermillon);
  font-size: 0.94em;
  margin-left: 0.24em;
}
.ia-mark--delta .ia-delta {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-right: 0.14em;
  vertical-align: 0.04em;
  color: var(--vermillon);
}
.ia-mark--delta .ia-delta svg { width: 100%; height: 100%; display: block; }
/* variante fond sombre */
.ia-mark--on-ink.ia-mark--delta,
.ia-mark--on-ink.ia-mark--delta .ia-delta { color: var(--vermillon); }

/* ---- Direction D · Mark-ligature -------------------------
   « I » + le mark ITIWE EN LIEU ET PLACE du A. Le suffixe
   devient une signature de marque : I + [mark]. Le « I » est
   en mono (lecture d'abréviation), le A est le mark — plein,
   triangle seul, ou filaire. */
.ia-mark--mark {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 600;
  color: var(--vermillon);
  font-size: 0.52em;
  letter-spacing: 0;
  margin-left: 0.45em;          /* espace-mot avant le suffixe */
  vertical-align: 0;
  white-space: nowrap;
}
.ia-mark--mark .ia-i { display: inline-block; }
.ia-mark--mark .ia-glyph {
  display: inline-block;
  height: 0.73em;               /* = hauteur de capitale du I */
  width: 0.85em;                /* viewBox recadrée 128×110 */
  margin-left: 0.1em;           /* espacement inter-lettre classique */
  vertical-align: baseline;
  color: currentColor;
}
.ia-mark--mark .ia-glyph--tri { width: 0.81em; }
.ia-mark--mark .ia-glyph svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* échelle « grand » — le mark se lit comme un logo, cap-height */
.ia-mark--mark.ia-mark--grand {
  font-size: 0.74em;
  margin-left: 0.32em;
}
/* échelle « trademark » — discret, surélevé façon ™ */
.ia-mark--mark.ia-mark--tm {
  font-size: 0.4em;
  vertical-align: 0.5em;
}
/* fond sombre */
.ia-mark--on-ink.ia-mark--mark,
.ia-mark--on-ink.ia-mark--mark .ia-glyph { color: var(--vermillon); }

/* ============================================================
   MARQUAGE « IA » — SYSTÈME CANONIQUE (VALIDÉ)
   « I » capitale-sceau (mono) + le mark ITIWE en lieu du A.
     • Fond clair  : mark FILAIRE, vermillon.
     • Fond sombre : mark PLEIN, couleur INVERSÉE (papier).
   La forme du mark et la couleur basculent via .ia-mark--on-ink.
   Markup (les deux glyphes coexistent, le CSS montre le bon) :
     <span class="ia-mark ia-mark--sceau">
       <span class="ia-i">I</span>
       <span class="ia-glyph ia-glyph--filaire">…outline svg…</span>
       <span class="ia-glyph ia-glyph--plein">…filled svg…</span>
     </span>
   ============================================================ */
.ia-mark--sceau {
  font-family: var(--font-mono);
  font-weight: 600;
  font-style: normal;
  color: var(--vermillon);
  font-size: 0.4em;             /* ~40% — échelle ™ */
  letter-spacing: 0;
  margin-left: 0.06em;          /* accolé au mot, comme ™ */
  vertical-align: 0.98em;       /* haut du poinçon ≈ haut des capitales */
  white-space: nowrap;
}
.ia-mark--sceau .ia-i { display: inline-block; }
.ia-mark--sceau .ia-glyph {
  display: inline-block;
  height: 0.73em;               /* = hauteur de capitale du I */
  width: 0.85em;
  margin-left: 0.1em;           /* espacement inter-lettre classique */
  vertical-align: baseline;
  color: currentColor;
}
.ia-mark--sceau .ia-glyph svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Fond clair (défaut) : filaire visible, plein caché */
.ia-mark--sceau .ia-glyph--plein { display: none; }

/* Fond sombre : inversion — plein papier, filaire caché */
.ia-mark--sceau.ia-mark--on-ink { color: var(--paper-warm); }
.ia-mark--sceau.ia-mark--on-ink .ia-glyph--filaire { display: none; }
.ia-mark--sceau.ia-mark--on-ink .ia-glyph--plein { display: inline-block; }

/* échelle « grand » — conservée pour compat ; le poinçon reste à l'échelle ™ */
.ia-mark--sceau.ia-mark--grand { font-size: 0.4em; margin-left: 0.06em; }

/* contexte dense / petite taille (cases, chips) : sur fond clair le
   filaire devient illisible — on bascule sur le mark PLEIN (vermillon),
   même logique de lisibilité que sur fond sombre. */
.ia-mark--sceau.ia-mark--dense .ia-glyph--filaire { display: none; }
.ia-mark--sceau.ia-mark--dense .ia-glyph--plein { display: inline-block; }