/* ------------------------------------------------------------------
   fig-segments.css — QUATRE SEGMENTS SONDES, UN SEUL RETENU.

   Quatre fiches sur une meme ligne de fond. Les trois ecartees sont en
   surface sourde, la retenue en surface vive avec le filet de l'accent
   du folio en tete. Le contraste doit se lire de loin, en une seconde.

   L'accent est celui du folio, jamais le vert de la banque : c'est une
   figure d'analyse, pas la reproduction d'une planche du client.
-------------------------------------------------------------------*/

:root{ --fs-sur-cle:#FFFFFF; }

.fs{
  position:relative;
  display:flex; flex-direction:column; gap:1.3cqw;
  padding:1.9cqw 1.7cqw 2cqw;
}
.fs--in{ padding-top:2.4cqw;
  outline:1px solid color-mix(in srgb, var(--hl) 62%, transparent); }
.fs--in::before{
  content:""; position:absolute; left:0; right:0; top:0; height:.6cqw;
  background:var(--hl); border-radius:.7cqw .7cqw 0 0;
}

.fs-top{ display:flex; align-items:center; justify-content:space-between; gap:.6cqw; }
.fs-i{ font-family:var(--display); font-size:1.6cqw; font-weight:700; line-height:1;
  color:var(--fg-mate); font-variant-numeric:tabular-nums; }
.fs--in .fs-i{ color:var(--hl); }

.fs-v{ font-size:1.02cqw; font-weight:700; letter-spacing:.13em; line-height:1;
  text-transform:uppercase; border-radius:2cqw; padding:.5cqw .9cqw; white-space:nowrap; }
.fs-v--out{ color:var(--fg-mate); border:1px solid var(--fg-ligne); }
.fs-v--in{ color:var(--fs-sur-cle); background:var(--hl); border:1px solid var(--hl); }

.fs-t{ font-size:2.05cqw; font-weight:500; line-height:1.32; color:var(--fg-encre); }
.fs-t b{ font-weight:700; }
.fs--in .fs-t b{ color:var(--hl); }
.fs--out .fs-t{ color:var(--fg-mate); }

.fs-p{ margin-top:auto; padding-top:1.3cqw; border-top:1px solid var(--fg-ligne);
  font-size:1.55cqw; font-weight:400; line-height:1.45; color:var(--fg-mate); }
.fs--out .fs-p{ opacity:.82; }
.fs--in .fs-p{ color:var(--fg-encre); }

@container (max-width:560px){
  .fs{ padding:3.4cqw 3.2cqw 3.6cqw; gap:2.2cqw; }
  .fs--in{ padding-top:4.2cqw; }
  .fs--in::before{ height:1.1cqw; }
  .fs-i{ font-size:2.9cqw; }
  .fs-v{ font-size:2.1cqw; border-radius:4cqw; padding:1cqw 1.8cqw; }
  .fs-t{ font-size:4.2cqw; }
  .fs-p{ padding-top:2.4cqw; font-size:3.2cqw; }
}