/* La fiche du projet (Client, Secteur, Services, Mise en ligne, Langues) : trois alternatives au texte seul, « Repères » retenu par Theo le 22/09, les autres
   par la clé fiche= dans l'adresse (le panneau Cmd+G qui les proposait est retiré le 24/09, Theo : « c'était juste une démo »). Theo, 22/09 : « simple et beau mais peut-être trop simple, juste texte et virgule ». Les trois gardent la rangée de cellules
   à filets et le libellé en capitales ; seul le contenu de chaque cellule change. Le script (/fiche-versions.js) reconstruit les valeurs à partir du texte
   d'origine, qui reste dans le HTML et revient tel quel sur « Texte ». */

/* ---- Commun : le logo du client à la place de son nom, en crème (masque), la ville en dessous ---- */
.fiche .f-client { display: grid; gap: 10px; justify-items: start; }
.fiche .f-logo { display: block; height: calc(26px * var(--taille, 1)); aspect-ratio: var(--ratio, 3.5); background: currentColor; -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; }
.fiche .f-ville { font-size: 14px; color: rgba(var(--encre-sombre),0.6); }

/* ---- A · Pastilles : chaque élément dans une pastille à filet, angles 4 px, comme le secteur des cartes projets ; la date précédée du carré terre brûlée ---- */
.fiche:is([data-v="pastilles"], [data-v="reperes"]) .f-val { display: flex; flex-wrap: wrap; align-content: flex-end; gap: 8px; }
.fiche .f-pastille { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px 6px; border: 1px solid var(--filet); border-radius: 4px; background: rgba(var(--encre-sombre),0.03); font-size: 15px; line-height: 1.2; white-space: nowrap; }
.fiche .f-pastille.f-date::before { content: ""; width: 7px; height: 7px; background: #9c3a14; flex: none; }
.fiche .f-pastille b { font-weight: 500; letter-spacing: 0.04em; font-size: 12px; color: rgba(var(--encre-sombre),0.55); }

/* ---- B · Index : le libellé numéroté 01 à 05, et chaque valeur en liste, un élément par ligne sous un filet, puce carrée kaki ---- */
.fiche[data-v="index"] i { display: flex; gap: 12px; }
.fiche[data-v="index"] i::before { content: attr(data-n); color: rgba(var(--encre-sombre),0.85); font-variant-numeric: tabular-nums; }
.fiche .f-liste { display: grid; margin: 0; padding: 0; list-style: none; align-self: end; }
.fiche .f-liste li { display: flex; align-items: center; gap: 10px; padding: 7px 0 6px; border-top: 1px solid var(--filet); font-size: 16px; line-height: 1.25; }
.fiche .f-liste li:last-child { border-bottom: 1px solid var(--filet); }
.fiche .f-liste li::before { content: ""; width: 5px; height: 5px; background: #8a8770; flex: none; }
.fiche .f-liste li b { margin-left: auto; font-weight: 400; font-size: 12px; letter-spacing: 0.06em; color: rgba(var(--encre-sombre),0.45); }

/* ---- C · Repères : un repère en grand par cellule (le poids des chiffres clés), le détail en petit dessous ; les services en pastilles, les langues par leur nombre ---- */
.fiche .f-repere { display: grid; gap: 10px; align-self: end; }
.fiche .f-grand { font-size: clamp(30px, 2.6vw, 42px); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.fiche .f-petit { font-size: 14px; line-height: 1.35; color: rgba(var(--encre-sombre),0.6); text-wrap: pretty; }
.fiche[data-v="reperes"] .f-logo { height: calc(34px * var(--taille, 1)); } /* --taille : le coefficient propre à chaque logo, posé par /fiche-versions.js (Aristid 1, Shotgun 0,76, Erevo 0,65) pour que les trois marques pèsent pareil dans la cellule (Theo, 25/09) */

@media (max-width: 1100px) {
  .fiche .f-grand { font-size: 30px; }
  .fiche .f-liste { margin-top: 4px; }
}