/* ------------------------------------------------------------------
   figures.css — les illustrations dessinees.

   Meme grammaire que scene.css : une figure est une `.sc`, ses morceaux
   sont des `.pw` (parallaxe) contenant un `.pi` (entree). La difference
   tient au contenu du morceau : ici du HTML dessine, pas une capture.

   Regle : aucune couleur en dur qui ne soit pas un jeton de figure, et
   chaque jeton a sa valeur claire et sa valeur sombre. Une figure qui
   ne survit pas au changement de theme est un bug.
-------------------------------------------------------------------*/

:root{
  /* L'accent des figures est celui du folio, decline en trois valeurs.
     Le vert appartient a la banque et au prototype : il n'a pas sa place
     dans une figure signee par l'auteur du cas. */
  --fg-accent:var(--hl);
  --fg-accent-clair:color-mix(in srgb, var(--hl) 66%, var(--fg-plaque));
  --fg-accent-pale:color-mix(in srgb, var(--hl) 20%, var(--fg-plaque));
  --fg-rouge:#D6455C;
  --fg-ambre:#E0912F;
  --fg-plaque:#FFFFFF;        /* la surface d'un morceau dessine */
  --fg-plaque-2:#F3EFE4;      /* la surface morte, celle qu'on ecarte */
  --fg-sombre:#2E3440;        /* les blocs neutres du wireframe */
  --fg-ligne:rgba(10,18,32,.14);
  --fg-encre:#0A1220;
  --fg-mate:#6B6557;
}
html.theme-light{ --fg-plaque:#FFFFFF; --fg-plaque-2:#F1ECDF; --fg-ligne:rgba(10,18,32,.14); }
html:not(.theme-light){
  --fg-plaque:#12203A; --fg-plaque-2:#0F1A2D; --fg-ligne:rgba(242,235,219,.14);
  --fg-encre:#F2EBDB; --fg-mate:#908976;
}

/* Un morceau dessine : pas de capture, donc pas d'ombre portee de vitre
   ni de filet blanc. Il porte sa propre ombre, plus douce. */
.pi--nu{
  overflow:visible; outline:none;
  box-shadow:none; border-radius:0;
}
.pi--plaque{
  overflow:visible; outline:1px solid var(--fg-ligne); outline-offset:-1px;
  border-radius:.7cqw; background:var(--fg-plaque);
}

/* L'echelle interne d'une figure suit la largeur du conteneur : tout est
   en cqw, donc une figure de 400px et une figure de 900px sont la meme
   image, pas deux mises en page. */
.fg{ font-family:var(--sans); color:var(--fg-encre); overflow-wrap:break-word; }
/* Un enfant de flex ou de grille refuse par defaut de descendre sous la
   largeur de son contenu : c'est lui, pas la composition, qui fait
   deborder une figure etroite. On leve ce plancher partout. */
.fg *{ box-sizing:border-box; min-width:0; }
/* Les marges de bloc de la page n'ont rien a faire dans une figure :
   l'espacement y est tenu par les gap, pas par le flux. */
.fg p, .fg dl, .fg dd, .fg dt, .fg ul, .fg li, .fg h1, .fg h2, .fg h3{ margin:0; }
.fg-lbl{ font-size:1.55cqw; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-mate); line-height:1.3; }
.fg-t{ font-size:1.85cqw; font-weight:600; line-height:1.25; }
.fg-p{ font-size:1.6cqw; font-weight:400; line-height:1.4; color:var(--fg-mate); }
.fg-n{ font-family:var(--display); font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums; }

/* Le titre d'une figure, pose sous elle comme une legende de planche. */
.fg-cap{ position:absolute; left:var(--l); top:var(--t); width:var(--w);
  text-align:center; }
/* La legende est la voix de l'auteur, pas la marque du client :
   elle porte l'accent du folio. */
.fg-cap b{ display:block; font-size:1.7cqw; font-weight:700; letter-spacing:.02em;
  color:var(--hl); }
.fg-cap span{ display:block; margin-top:.45cqw; font-size:1.15cqw; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mate); }

/* L'ombre d'un morceau dessine. Quatre couches, jamais un noir : l'encre
   de la page poussee tres bas, comme pour les captures. */
:root{ --fg-om:
  0 .10cqw .45cqw rgba(10,18,32,.05),
  0 .75cqw 1.9cqw rgba(10,18,32,.06),
  0 2.2cqw 5.6cqw rgba(10,18,32,.07),
  0 5.6cqw 13cqw rgba(10,18,32,.06); }
html:not(.theme-light){ --fg-om:
  0 .10cqw .45cqw rgba(2,6,13,.34),
  0 .75cqw 1.9cqw rgba(2,6,13,.30),
  0 2.2cqw 5.6cqw rgba(2,6,13,.26),
  0 5.6cqw 13cqw rgba(2,6,13,.22); }
.pi--plaque{ box-shadow:var(--fg-om); }
.pi--morte{ background:var(--fg-plaque-2); }

/* ── LE PIVOT ────────────────────────────────────────────────────────
   A gauche l'exploration, morte : des panneaux vides, un rail de filtres,
   six onglets. A droite quatre objectifs, dont un en alerte. */
.fgx{ padding:2cqw; display:flex; flex-direction:column; gap:1.8cqw; }
.fgx-tabs{ display:flex; gap:.55cqw; flex-wrap:nowrap; }
.fgx-tabs span{ background:var(--fg-sombre); color:#fff; border-radius:.35cqw;
  padding:.45cqw .6cqw; font-size:.82cqw; font-weight:600; letter-spacing:.04em;
  white-space:nowrap; opacity:.72; }
.fgx-body{ display:grid; grid-template-columns:22% 1fr; gap:1.2cqw; }
.fgx-side{ background:var(--fg-sombre); color:#fff; border-radius:.35cqw; opacity:.72;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:.95cqw; font-weight:700; letter-spacing:.04em; line-height:1.45; padding:.6cqw; }
.fgx-grid{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:4.6cqw; gap:1cqw; }
.fgx-grid div{ border:1px solid var(--fg-ligne); background:var(--fg-plaque-2);
  border-radius:.35cqw; display:flex; align-items:center; justify-content:center;
  font-size:1cqw; font-weight:600; letter-spacing:.08em; color:var(--fg-mate); opacity:.8; }
.fgx-grid div:first-child{ grid-column:span 2; }

.fgo{ padding:2.4cqw; display:flex; flex-direction:column; gap:1.8cqw; }
.fgo-filtres{ display:flex; gap:.8cqw; }
.fgo-filtres span{ background:var(--fg-sombre); color:#fff; border-radius:.35cqw;
  padding:.6cqw 1cqw; font-size:1.05cqw; font-weight:600; letter-spacing:.06em; }
.fgo-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:1cqw; }
.fgo-tile{ display:flex; flex-direction:column; gap:.6cqw; }
.fgo-tile i{ height:9.6cqw; border-radius:.35cqw; background:var(--fg-accent);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-style:normal; font-size:1.3cqw; font-weight:700; letter-spacing:.08em; }
.fgo-tile.is-alerte i{ background:var(--fg-rouge); }
.fgo-tile b{ background:var(--fg-sombre); color:#fff; border-radius:.35cqw;
  text-align:center; padding:.7cqw .4cqw; font-size:1cqw; font-weight:700;
  letter-spacing:.04em; line-height:1.25; }

/* Le trait rouge qui condamne. Il n'est pas decoratif : c'est la decision. */
.fg-barre{ width:100%; height:100%; }
.fg-barre line{ stroke:var(--fg-rouge); stroke-width:9; stroke-linecap:round; }

/* ── LA FIGURE SUR PETIT ECRAN ───────────────────────────────────────
   Tout l'interieur d'une figure est en cqw : elle est donc deja la meme
   image a 400 px et a 980 px, en plus petit. Ce qui casse en premier
   n'est pas la composition, c'est le plancher de lisibilite du texte le
   plus fin. On lui rend donc du corps, et on reprend la place sur les
   marges internes, qui sont les seules a pouvoir la donner. */
@container (max-width: 560px){
  .fg-lbl{ font-size:1.95cqw; }
  .fg-p{   font-size:2.05cqw; }
  .fg-t{   font-size:2.35cqw; }
  .fg-cap b{ font-size:2.2cqw; }
  .fg-cap span{ font-size:1.7cqw; }
}
@container (max-width: 400px){
  .fg-lbl{ font-size:2.4cqw; }
  .fg-p{   font-size:2.5cqw; }
  .fg-t{   font-size:2.8cqw; }
  .fg-cap b{ font-size:2.6cqw; }
  .fg-cap span{ font-size:2.05cqw; }
}

/* ── UNE FIGURE EN FLUX ──────────────────────────────────────────────
   Une rangee de fiches n'a pas de hauteur connue d'avance : le texte y
   passe de deux a quatre lignes selon la largeur, et un `aspect-ratio`
   fixe finit toujours par la couper. Cette variante rend la hauteur au
   contenu et garde tout le reste : la parallaxe vit toujours sur .pw,
   l'entree toujours sur .pi. */
.sc--flux{
  aspect-ratio:auto;
  display:grid; align-items:stretch;
  grid-template-columns:var(--grille, repeat(var(--cols,3),minmax(0,1fr)));
  gap:var(--flux-gap,3.2cqw);
}
.sc--flux .pw{ position:static; width:auto; display:flex; }
.sc--flux .pw > .pi{ flex:1; }
/* La legende d'une figure en flux prend toute la rangee, sous les fiches. */
.sc--flux .fg-cap{ grid-column:1 / -1; margin-top:1.4cqw; display:block; }
/* Une figure ne peut pas interroger sa propre taille : c'est le cadre
   qui la porte qui devient le conteneur de requete. Les unites cqw des
   morceaux, elles, continuent de se resoudre sur la scene. */
.cx-vis{ container-type:inline-size; }
@container (max-width:560px){
  .sc--flux{ grid-template-columns:1fr; gap:3.4cqw; }
}
.sc--flux--centre{ align-items:center; }

/* ── Les libellés respirent ────────────────────────────────────────
   Le remise à zéro ci-dessus s'applique à tout le texte d'une figure, y
   compris aux libellés en capitales posés juste au-dessus de ce qu'ils
   nomment. Ils touchaient l'illustration : .spp-lab à 0 px, .fgsr-k à 5 px,
   mesuré le 01/09/2026 sur speos, hms et wejustice. Leur propre feuille ne
   pouvait rien : « .fg p » l'emporte sur « .fgsr-k » à spécificité égale de
   classe. La règle vit donc ici, avec le reset qu'elle corrige. */
.fg .fgsr-k, .fg .spp-lab, .fg .fgr-role{ margin-bottom:1.2cqw; }