/* ------------------------------------------------------------------
   fig-sp-recherche.css — LA RECHERCHE TRANSVERSE (SPEOS).

   Trois compteurs posent la mesure : sept metiers internes, six
   organisations clientes, plus de trente entretiens. Dessous, la
   ligne d'insight EST le propos : les sept metiers nommes, chacun sur
   son morceau de trajet, et aucune ligne d'un bout a l'autre.
   C'est l'ecart entre 7 et 0 qui fait la figure.
-------------------------------------------------------------------*/

/* Un compteur : le nombre, la population, la precision. */
.fgsr{ padding:2.1cqw 1.6cqw 2.2cqw; display:flex; flex-direction:column;
  gap:.55cqw; align-items:center; text-align:center; }
.fgsr-n{ display:flex; align-items:baseline; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:6.2cqw;
  line-height:1; letter-spacing:-.02em; color:var(--fg-encre);
  font-variant-numeric:tabular-nums; }
.fgsr-n .fg-n{ font-family:inherit; font-weight:inherit; }
.fgsr-n .fgsr-plus{ font-size:3.4cqw; font-weight:700; margin-left:.15cqw;
  color:var(--fg-mate); transform:translateY(-.2cqw); }
.fgsr-k{ font-size:1.5cqw; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-encre); line-height:1.3;
  margin-top:.5cqw; margin-bottom:.8cqw; }
.fgsr-s{ font-size:1.28cqw; font-weight:500; line-height:1.35;
  color:var(--fg-mate); }

/* La bande d'insight prend toute la rangee. */
.fgsr-pleine{ grid-column:1 / -1; }
.fgsr-ins{ padding:2.1cqw 2.2cqw 1.9cqw; display:flex;
  flex-direction:column; gap:1.7cqw; }

/* Sept metiers, nommes.

   Ce qu'il y avait avant, et pourquoi c'est parti. Chaque metier etait reduit a
   une pastille ronde de .9cqw posee sur un segment pointille. Sept points
   anonymes ne disent rien : Christophe a lu « un truc qui bug, pas fini », et il
   avait raison. La figure appauvrissait le texte, qui nomme les sept metiers un
   par un dans la puce juste a cote.

   Elle les nomme donc a son tour, cote a cote, chacun sur le morceau de trajet
   qu'il couvre. Le lecteur voit sept etiquettes distinctes, sept segments qui ne
   se rejoignent pas, et dessous le trajet complet a zero. L'ecart entre 7 et 0
   est la figure ; il se lit maintenant sans etre devine.

   La ligne cassee reste l'idiome de fig-sp-acces.css (l.47) : l'etape 03 et
   l'etape 04 disent la meme idee avec la meme forme. */
.fgsr-rangee{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:.7cqw; align-items:end; }
.fgsr-paire{ display:flex; flex-direction:column; align-items:center;
  gap:.75cqw; min-width:0; }
.fgsr-metier{ font-size:1.05cqw; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--fg-encre); line-height:1.25;
  text-align:center; text-wrap:balance; hyphens:none; }
.fgsr-seg{ display:block; width:100%; height:0;
  border-top:.26cqw dashed color-mix(in srgb, var(--fg-mate) 78%, transparent); }

/* Le trajet complet : l'espace vide, marque au cuivre. */
.fgsr-trajet{ display:flex; align-items:center; justify-content:space-between;
  gap:1.2cqw; padding:1.25cqw 1.5cqw;
  border:1px dashed color-mix(in srgb, var(--fg-accent) 50%, transparent);
  border-radius:.55cqw; }
.fgsr-borne{ font-size:1.05cqw; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-mate); white-space:nowrap; }
.fgsr-zero{ display:flex; align-items:baseline; gap:.55cqw;
  color:var(--fg-accent); white-space:nowrap; }
.fgsr-zero b{ font-family:var(--display); font-weight:700; font-size:2.5cqw;
  line-height:1; letter-spacing:-.01em; }
.fgsr-zero span{ font-size:1.4cqw; font-weight:700; letter-spacing:.05em; }

/* Sous 560 px, on rend du corps au texte fin et de la chair aux paires. */
@container (max-width:560px){
  .fgsr{ padding:3.4cqw 2.6cqw 3.6cqw; }
  .fgsr-n{ font-size:9.4cqw; }
  .fgsr-n .fgsr-plus{ font-size:5.2cqw; }
  .fgsr-k{ font-size:2.35cqw; }
  .fgsr-s{ font-size:2.1cqw; }
  .fgsr-ins{ padding:3.2cqw 3cqw 3cqw; gap:2.6cqw; }
  /* Sept etiquettes sur une rangee tiennent a 899 px, pas a 560 : « SERVICE
     CLIENT » ne passe pas dans 80 px. La rangee se replie sur deux colonnes
     et les segments tombent : la metaphore de la ligne brisee ne se lit plus
     a cette largeur, et sept traits de 40 px ne diraient rien. Ce qui reste,
     les sept metiers nommes, porte le propos a lui seul. */
  .fgsr-rangee{ grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.6cqw 2.4cqw; align-items:start; }
  .fgsr-paire{ align-items:flex-start; gap:0; }
  .fgsr-metier{ font-size:2.15cqw; letter-spacing:.05em; text-align:left; }
  .fgsr-seg{ display:none; }
  .fgsr-trajet{ padding:2cqw 2.2cqw; }
  .fgsr-borne{ font-size:1.7cqw; }
  .fgsr-zero b{ font-size:4cqw; }
  .fgsr-zero span{ font-size:2.2cqw; }
}