/* POINTS FORTS - PASTILLES DE REASSURANCE EN TETE DE MODALE */

/*
 * Sous-composant en cascade (§4.12). Les feuilles de `contacts` ciblent des
 * elements generiques descendants (`.contact-3 .contact-box a`, (0,2,1)) : une
 * classe nue perdrait. Chaque regle est donc qualifiee par le bloc racine PLUS
 * l'element — `.points-forts li.points-forts__item` pese (0,2,1) — exactement
 * comme le fait deja `mention-donnees`.
 *
 * DEUX REGLAGES SONT LAISSES AU PARENT, lus AVEC REPLI dans le var() et jamais
 * declares ici : une variable posee sur l'element lui-meme l'emporterait sur
 * celle heritee du parent, et l'ecriture du parent n'aurait aucun effet.
 *
 *   --points-forts-align   alignement de la rangee. Repli `flex-start`, le cas
 *                          courant ; `contact-4` et `contact-5`, dont le
 *                          formulaire est centre, posent `center`.
 *   --points-forts-teinte  couleur d'accent. Repli `--secondary`, la couleur
 *                          d'accent des cinq variantes.
 *
 * LA COULEUR DE TEXTE N'EST PAS UNE VARIABLE. Les cinq formulaires posent le
 * bloc sur un fond clair (`--white`, ou un `color-mix` de `--gray-light` vers
 * le blanc), y compris `contact-3` dont la section est `--primary` mais dont la
 * carte de formulaire est blanche (§4.13 : verifier le fond REEL). `--primary`
 * sur ce fond est donc juste partout ; le jour ou un parent sombre voudra ce
 * bloc, il faudra une variable — pas une devinette.
 */

.points-forts {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: var(--points-forts-align, flex-start);
}

.points-forts li.points-forts__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--points-forts-teinte, var(--secondary)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--points-forts-teinte, var(--secondary)) 30%, transparent);
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

.points-forts span.points-forts__icone {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--points-forts-teinte, var(--secondary));
}

.points-forts .points-forts__icone svg {
  width: 18px;
  height: 18px;
  color: var(--points-forts-teinte, var(--secondary));
}

/* Porte sa couleur meme si le parent stylise les `span` du formulaire. */
.points-forts span.points-forts__libelle {
  color: var(--primary);
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Pas de bascule au breakpoint : la rangee se replie d'elle-meme (`flex-wrap`),
   et forcer une pastille par ligne sur mobile empilerait quatre rangees au-dessus
   du premier champ de la modale — le formulaire passerait sous la ligne de
   flottaison avant d'avoir commence. */