/* ------------------------------------------------------------------
   fig-atelier.css — LE MUR OU LE PERIMETRE A ETE ARRETE.

   Une photographie de terrain, stylisee pour tenir sur le fond creme
   comme sur le bleu nuit, et trois morceaux dessines qui en sortent :
   la puce des dix objectifs retenus, la puce des huit ecartes, et
   l'etiquette qui dit ou la decision a ete prise.

   Les deux puces ne decorent pas la photo, elles la designent : la
   vive est posee a la hauteur des deux rangees retenues, la sourde a la
   hauteur des deux rangees grises. Elles sont plus en avant que la
   photo (--px plus eleve), donc plus mobiles au defilement.

   Aucune couleur en dur : les jetons --fg-* de figures.css, plus deux
   jetons locaux qui ont chacun leur valeur claire et leur valeur
   sombre. Toutes les tailles en cqw.
-------------------------------------------------------------------*/

:root{
  --fat-sourd:#C6C0B2;        /* la pastille ecartee, sourde */
  --fat-sur-accent:#FFFFFF;     /* l'encre posee sur --fg-accent plein */
  --fat-accent:var(--hl);       /* l'accent du folio, en texte */
}
html.theme-light{ --fat-sourd:#C6C0B2; --fat-sur-accent:#FFFFFF; --fat-accent:var(--hl); }
html:not(.theme-light){ --fat-sourd:#46536B; --fat-sur-accent:#FFFFFF; --fat-accent:var(--hl); }

/* L'ombre des morceaux poses DEVANT la photo : meme encre que celle de
   la grammaire, mais portee plus loin, pour qu'ils s'en decollent. */
:root{ --fat-om:
  0 .12cqw .5cqw   rgba(10,18,32,.06),
  0 1.1cqw 2.6cqw  rgba(10,18,32,.09),
  0 3.2cqw 7.4cqw  rgba(10,18,32,.10),
  0 8cqw   18cqw   rgba(10,18,32,.09); }
html:not(.theme-light){ --fat-om:
  0 .12cqw .5cqw   rgba(2,6,13,.42),
  0 1.1cqw 2.6cqw  rgba(2,6,13,.38),
  0 3.2cqw 7.4cqw  rgba(2,6,13,.34),
  0 8cqw   18cqw   rgba(2,6,13,.28); }
.fat-avant.pi--plaque{ box-shadow:var(--fat-om); }

/* ── LA PHOTO ────────────────────────────────────────────────────────
   .pi--plaque laisse deborder son contenu ; ici il faut au contraire
   que l'image soit coupee par le rayon. Le filet et l'ombre restent
   ceux de la grammaire. */
.fat-photo.pi--plaque{ overflow:hidden; background:var(--fg-plaque-2); }
.fat-photo img{ display:block; width:100%; height:auto; }
/* Sur le bleu nuit, la photo est trop chaude et trop claire : on la
   rentre d'un cran pour qu'elle se pose sur le fond au lieu d'y briller. */
html:not(.theme-light) .fat-photo img{ filter:brightness(.86) saturate(.93); }

/* ── LES DEUX PUCES ──────────────────────────────────────────────────
   Une pastille chiffree, un intitule, une precision. */
.fat-puce{
  display:flex; align-items:center; gap:1.2cqw;
  padding:1.4cqw 1.6cqw;
}
.fat-pt{
  flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
}
.fat-puce--in .fat-pt{
  width:6cqw; height:6cqw; font-size:2.5cqw;
  background:var(--fg-accent); color:var(--fat-sur-accent);
}
.fat-puce--out .fat-pt{
  width:5.2cqw; height:5.2cqw; font-size:2.15cqw;
  background:var(--fat-sourd); color:var(--fg-encre);
}
.fat-txt{ min-width:0; }
.fat-txt b{ display:block; font-size:1.7cqw; font-weight:700; line-height:1.2;
  letter-spacing:.005em; }
.fat-txt span{ display:block; margin-top:.45cqw; font-size:1cqw; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--fg-mate); }
.fat-puce--in .fat-txt b{ color:var(--fat-accent); }
.fat-puce--out .fat-txt b{ color:var(--fg-mate); }

/* ── L'ETIQUETTE ─────────────────────────────────────────────────────
   Le filet d'accent a gauche n'est pas un ornement : il rattache la phrase
   aux dix objectifs retenus. */
.fat-etq{
  display:grid; grid-template-columns:.3cqw 1fr; gap:1.15cqw;
  padding:1.35cqw 1.6cqw;
}
.fat-etq i{ display:block; background:var(--fat-accent); border-radius:.15cqw; }
.fat-etq em{ display:block; font-style:normal;
  font-size:1.05cqw; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-mate); }
.fat-etq p{ margin:.5cqw 0 0; font-size:1.45cqw; font-weight:400; line-height:1.35;
  color:var(--fg-encre); }