/* =====================================================================
   05 — Notre proposition de valeur  (#proposition, section--tint)
   En-tête centré, phrase de marché en Jost, puis trois cartes blanches
   (solide / fragile / à renforcer).
   Ne cible que des classes préfixées .valeur__… — tokens uniquement.
   ===================================================================== */

/* ---- En-tête ------------------------------------------------------- */
.valeur__entete { max-width: 48rem; }

/* Phrase de marché : affirmation de Lucidian (sans guillemets), en Jost marine (ton institutionnel) */
.valeur__marche {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--color-heading);
  text-wrap: balance;
}

/* ---- Trois constats ------------------------------------------------- */
.valeur__carte { gap: var(--space-4); }

.valeur__icone {
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.valeur__carte:hover .valeur__icone {
  background: var(--color-marine);
  color: var(--color-gold-light);
}

/* Deux lignes réservées pour les trois titres : les paragraphes partent de la même hauteur ≥ 900 px */
.valeur__titre { text-wrap: balance; }
@media (min-width: 900px) {
  .valeur__titre { min-height: calc(2em * var(--leading-snug)); }
}
.valeur__texte { max-width: none; }

/* 640–899 px : la grille à trois passe en deux colonnes ; la troisième carte
   occupe toute la largeur plutôt que de rester orpheline à gauche */
@media (min-width: 640px) and (max-width: 899.98px) {
  .valeur__carte:last-child { grid-column: 1 / -1; }
  .valeur__carte:last-child .valeur__texte { max-width: 68ch; }
}

@media (min-width: 1200px) {
  .valeur__grille { gap: var(--space-6); }
}