/* ------------------------------------------------------------------
   fig-roles.css — TROIS ROLES, TROIS OBJECTIFS, TROIS FREINS.

   Une fiche par role, et dans chaque fiche la meme lecture : le metier,
   le verbe qui le resume, puis l'objectif, le frein, et la reponse du
   produit. Rien de decoratif : chaque ligne existe parce qu'elle a
   change une decision de conception.

   Un fil relie le frein de celui qui tient un magasin a l'objectif de
   celui qui regle le contrat : c'est la meme variable, les seuils, vue
   des deux cotes.
-------------------------------------------------------------------*/

.fgr{ display:flex; flex-direction:column; gap:1.4cqw; padding:2cqw 1.9cqw 2.1cqw; }

.fgr-role{ font-size:1.15cqw; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-mate); line-height:1.3;
  margin-bottom:.6cqw; }
.fgr-verbe{ font-family:var(--display); font-weight:700; font-size:4.4cqw;
  line-height:1; letter-spacing:-.02em; color:var(--hl); }

.fgr-l{ margin:0; display:flex; flex-direction:column; gap:1.2cqw;
  padding-top:1.4cqw; border-top:1px solid var(--fg-ligne); }
.fgr-l div{ display:flex; flex-direction:column; gap:.35cqw; }
.fgr-l dt{ font-size:1.02cqw; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-mate); }
.fgr-l dd{ margin:0; font-size:1.55cqw; line-height:1.42; color:var(--fg-encre); }
.fgr-l .est-rep dt{ color:var(--hl); }
.fgr-l .est-rep dd{ color:var(--fg-mate); }

/* Le fil : le meme mot, marque de la meme facon dans deux fiches. */
.fgr-lien{ color:var(--hl); font-weight:600;
  border-bottom:1px dashed color-mix(in srgb, var(--hl) 55%, transparent); }

@container (max-width:560px){
  .fgr{ padding:3.6cqw 3.4cqw; gap:2.6cqw; }
  .fgr-role{ font-size:2.4cqw; }
  .fgr-verbe{ font-size:9cqw; }
  .fgr-l{ gap:2.4cqw; padding-top:2.6cqw; }
  .fgr-l dt{ font-size:2.1cqw; }
  .fgr-l dd{ font-size:3.2cqw; }
}