/* ==========================================================================
   In Pulse - components.css
   Composants réutilisables. Nommage français en kebab-case.
   Aucune couleur en dur : tout passe par les tokens (tokens.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Boutons
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-xs);
  padding: 0.75rem 1.5rem;
  border-radius: var(--rayon-sm);
  border: 1px solid transparent;
  font-family: var(--police-texte);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duree-rapide) var(--courbe-standard),
              border-color var(--duree-rapide) var(--courbe-standard),
              color var(--duree-rapide) var(--courbe-standard),
              box-shadow var(--duree-rapide) var(--courbe-standard);
}

/* Principal : encre sur clair / or sur nuit (résolu par les tokens) */
.bouton--principal {
  background-color: var(--bouton-principal-fond);
  color: var(--bouton-principal-texte);
  box-shadow: var(--ombre-douce);
}

.bouton--principal:hover {
  background-color: var(--bouton-principal-fond-hover);
  color: var(--bouton-principal-texte);
  box-shadow: var(--ombre-moyenne);
}

/* Secondaire : contour fin */
.bouton--secondaire {
  background-color: transparent;
  border-color: var(--couleur-filet-fort);
  color: var(--couleur-encre);
}

.bouton--secondaire:hover {
  border-color: var(--couleur-accent);
  color: var(--couleur-accent-texte);
  background-color: var(--couleur-accent-fond);
}

/* Discret : texte seul */
.bouton--discret {
  background-color: transparent;
  color: var(--couleur-accent-texte);
  padding-inline: var(--espace-sm);
}

.bouton--discret:hover {
  color: var(--couleur-accent-hover);
  background-color: var(--couleur-accent-fond);
}

/* Danger : pour lever une alerte */
.bouton--danger {
  background-color: var(--couleur-danger);
  color: var(--couleur-surface);
}

.bouton--danger:hover {
  box-shadow: var(--ombre-moyenne);
}

/* Tailles */
.bouton--grand {
  padding: 1rem 2rem;
  font-size: var(--taille-base);
}

.bouton--petit {
  padding: 0.5rem 1rem;
  font-size: var(--taille-xs);
}

.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. Cartes
   -------------------------------------------------------------------------- */
.carte {
  background-color: var(--couleur-surface);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-douce);
  padding: var(--espace-lg);
}

.carte--reliee {
  transition: box-shadow var(--duree-normale) var(--courbe-standard),
              border-color var(--duree-normale) var(--courbe-standard),
              transform var(--duree-normale) var(--courbe-standard);
}

.carte--reliee:hover {
  border-color: var(--couleur-filet-fort);
  box-shadow: var(--ombre-moyenne);
  transform: translateY(-2px);
}

/* Carte soulignée d'un filet or (mise en avant discrète) */
.carte--or {
  border-top: 2px solid var(--couleur-accent);
}

/* Carte sur fond légèrement teinté */
.carte--teintee {
  background-color: var(--couleur-surface-2);
}

.carte__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espace-md);
  margin-bottom: var(--espace-md);
}

.carte__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
}

.carte__pied {
  margin-top: var(--espace-md);
  padding-top: var(--espace-md);
  border-top: 1px solid var(--couleur-filet);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

/* Titre nu placé directement dans une carte : espace sous le titre pour éviter
   qu'il ne « colle » à son contenu (couvre aussi le markup injecté par JS). */
.carte > .section-app__titre,
.carte > .carte__titre {
  margin-bottom: var(--espace-md);
}

/* --------------------------------------------------------------------------
   3. Badges, pastilles, tags, étiquettes
   -------------------------------------------------------------------------- */

/* Badge : pilule de statut avec texte */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--rayon-rond);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.02em;
  background-color: var(--couleur-fond-2);
  color: var(--couleur-texte-secondaire);
  border: 1px solid var(--couleur-filet);
}

.badge--succes {
  background-color: var(--couleur-succes-fond);
  color: var(--couleur-succes);
  border-color: transparent;
}

.badge--attention {
  background-color: var(--couleur-attention-fond);
  color: var(--couleur-attention);
  border-color: transparent;
}

.badge--danger {
  background-color: var(--couleur-danger-fond);
  color: var(--couleur-danger);
  border-color: transparent;
}

.badge--info {
  background-color: var(--couleur-info-fond);
  color: var(--couleur-info);
  border-color: transparent;
}

.badge--or {
  background-color: var(--couleur-accent-fond);
  color: var(--couleur-accent-texte);
  border-color: transparent;
}

/* Badges de codification d'urgence U1→U4 (réutilisent les paires de tokens
   d'état, déjà validées AA en clair et en sombre). */
.badge--u1 {
  background-color: var(--couleur-danger-fond);
  color: var(--couleur-danger);
  border-color: transparent;
}

.badge--u2 {
  background-color: var(--couleur-attention-fond);
  color: var(--couleur-attention);
  border-color: transparent;
}

.badge--u3 {
  background-color: var(--couleur-info-fond);
  color: var(--couleur-info);
  border-color: transparent;
}

.badge--u4 {
  background-color: var(--couleur-accent-fond);
  color: var(--couleur-accent-texte);
  border-color: transparent;
}

/* Badges aux couleurs des profils dirigeant */
.badge--pilote {
  background-color: var(--profil-pilote-fond);
  color: var(--profil-pilote);
  border-color: transparent;
}

.badge--visionnaire {
  background-color: var(--profil-visionnaire-fond);
  color: var(--profil-visionnaire);
  border-color: transparent;
}

.badge--batisseur {
  background-color: var(--profil-batisseur-fond);
  color: var(--profil-batisseur);
  border-color: transparent;
}

.badge--stratege {
  background-color: var(--profil-stratege-fond);
  color: var(--profil-stratege);
  border-color: transparent;
}

/* Pastille : point de couleur (statut ou profil), à côté d'un libellé */
.pastille {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-texte-discret);
  flex-shrink: 0;
}

.pastille--succes { background-color: var(--couleur-succes); }
.pastille--attention { background-color: var(--couleur-attention); }
.pastille--danger { background-color: var(--couleur-danger); }
.pastille--info { background-color: var(--couleur-info); }
.pastille--or { background-color: var(--couleur-accent); }
.pastille--pilote { background-color: var(--profil-pilote); }
.pastille--visionnaire { background-color: var(--profil-visionnaire); }
.pastille--batisseur { background-color: var(--profil-batisseur); }
.pastille--stratege { background-color: var(--profil-stratege); }

/* Tag : mot-clé sobre */
.tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--rayon-xs);
  border: 1px solid var(--couleur-filet);
  background-color: var(--couleur-surface);
  font-size: var(--taille-xs);
  color: var(--couleur-texte-secondaire);
}

.liste-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
}

/* Liste d'actions compacte (pistes proposées, plan d'action d'un tableau) */
.liste-actions-mini {
  list-style: none;
  display: grid;
  gap: var(--espace-2xs);
}

.liste-actions-mini li {
  position: relative;
  padding-left: var(--espace-md);
  font-size: var(--taille-sm);
}

.liste-actions-mini li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--couleur-accent);
}

/* Étiquette : sur-titre en petites capitales, souvent doré */
.etiquette {
  display: block;
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--couleur-accent-texte);
  margin-bottom: var(--espace-xs);
}

/* --------------------------------------------------------------------------
   4. Filets & séparateurs
   -------------------------------------------------------------------------- */
.filet {
  border: none;
  border-top: 1px solid var(--couleur-filet);
  margin-block: var(--espace-lg);
}

.filet--or {
  border-top-color: var(--couleur-accent);
}

/* Séparateur orné : court trait or centré (entre deux sections) */
.separateur-orne {
  display: flex;
  justify-content: center;
  margin-block: var(--espace-xl);
}

.separateur-orne::before {
  content: "";
  width: 3rem;
  height: 2px;
  background-color: var(--couleur-accent);
}

/* --------------------------------------------------------------------------
   5. Navigation vitrine (header fixe fin) & pied de page
   -------------------------------------------------------------------------- */
.entete-site {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--hauteur-entete);
  background-color: var(--couleur-fond);
  border-bottom: 1px solid var(--couleur-filet);
}

.entete-site__interieur {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-lg);
}

/* Marque : logo + nom en toutes lettres */
.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-sm);
  color: var(--couleur-encre);
  text-decoration: none;
  font-family: var(--police-titre);
  font-size: var(--taille-md);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.01em;
}

.marque:hover {
  color: var(--couleur-encre);
}

.marque__logo {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--couleur-accent);
  flex-shrink: 0;
}

.entete-site__nav {
  display: flex;
  align-items: center;
  gap: var(--espace-lg);
}

.lien-nav {
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
  color: var(--couleur-texte-secondaire);
  text-decoration: none;
  padding-block: var(--espace-xs);
  border-bottom: 2px solid transparent;
  transition: color var(--duree-rapide) var(--courbe-standard),
              border-color var(--duree-rapide) var(--courbe-standard);
}

.lien-nav:hover {
  color: var(--couleur-encre);
}

.lien-nav--actif {
  color: var(--couleur-encre);
  border-bottom-color: var(--couleur-accent);
}

/* Décale le contenu sous le header fixe */
.sous-entete {
  padding-top: var(--hauteur-entete);
}

/* Pied de page */
.pied-page {
  background-color: var(--couleur-fond-2);
  border-top: 1px solid var(--couleur-filet);
  padding-block: var(--espace-2xl);
  margin-top: var(--espace-3xl);
  color: var(--couleur-texte-secondaire);
  font-size: var(--taille-sm);
}

.pied-page__colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--espace-xl);
  margin-bottom: var(--espace-xl);
}

.pied-page__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-base);
  color: var(--couleur-encre);
  margin-bottom: var(--espace-sm);
}

.pied-page a {
  color: var(--couleur-texte-secondaire);
  text-decoration: none;
}

.pied-page a:hover {
  color: var(--couleur-accent-texte);
}

.pied-page__mentions {
  padding-top: var(--espace-lg);
  border-top: 1px solid var(--couleur-filet);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-md);
  font-size: var(--taille-xs);
  color: var(--couleur-texte-discret);
}

/* --------------------------------------------------------------------------
   6. Tableau de prix (3 colonnes, une mise en avant)
   -------------------------------------------------------------------------- */
.tableau-prix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--espace-lg);
  align-items: stretch;
}

.carte-prix {
  display: flex;
  flex-direction: column;
  background-color: var(--couleur-surface);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-lg);
  padding: var(--espace-xl);
  box-shadow: var(--ombre-douce);
}

.carte-prix--mise-en-avant {
  border: 1px solid var(--couleur-accent);
  border-top-width: 3px;
  box-shadow: var(--ombre-moyenne);
  position: relative;
}

.carte-prix__mention {
  position: absolute;
  top: calc(-1 * var(--espace-md));
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--couleur-accent);
  color: var(--couleur-sur-accent);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.875rem;
  border-radius: var(--rayon-rond);
  white-space: nowrap;
}

/* Offre ponctuelle (Booster) : distincte des adhésions annuelles, traitement
   sobre sur fond teinté plutôt que la mise en avant dorée « Recommandée ». */
.carte-prix--ponctuelle {
  background-color: var(--couleur-surface-2);
  border-style: dashed;
}

.carte-prix--ponctuelle .etiquette {
  margin-bottom: var(--espace-xs);
}

.carte-prix__nom {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-encre);
}

.carte-prix__prix {
  font-family: var(--police-titre);
  font-size: var(--taille-2xl);
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
  margin-block: var(--espace-sm);
}

.carte-prix__periode {
  font-family: var(--police-texte);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-normale);
  color: var(--couleur-texte-discret);
}

.carte-prix__liste {
  list-style: none;
  padding: 0;
  margin-block: var(--espace-lg);
  flex-grow: 1;
  display: grid;
  gap: var(--espace-sm);
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

.carte-prix__liste li {
  display: flex;
  gap: var(--espace-xs);
  align-items: baseline;
}

.carte-prix__liste li::before {
  content: "-";
  color: var(--couleur-accent);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. Formulaires
   -------------------------------------------------------------------------- */
.formulaire {
  display: grid;
  gap: var(--espace-lg);
}

.champ {
  display: grid;
  gap: var(--espace-xs);
}

.champ__etiquette {
  font-size: var(--taille-sm);
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
}

.champ__etiquette .optionnel {
  font-weight: var(--graisse-normale);
  color: var(--couleur-texte-discret);
}

.champ__saisie {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--couleur-filet-fort);
  border-radius: var(--rayon-sm);
  background-color: var(--couleur-surface);
  color: var(--couleur-texte);
  font-size: var(--taille-sm);
  transition: border-color var(--duree-rapide) var(--courbe-standard),
              box-shadow var(--duree-rapide) var(--courbe-standard);
}

.champ__saisie::placeholder {
  color: var(--couleur-texte-discret);
}

.champ__saisie:hover {
  border-color: var(--couleur-accent);
}

.champ__saisie:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 1px;
  border-color: var(--couleur-accent);
}

textarea.champ__saisie {
  resize: vertical;
  min-height: 7rem;
  line-height: var(--interligne-normal);
}

select.champ__saisie {
  appearance: none;
  -webkit-appearance: none;
  /* Chevron dessiné en SVG inline, teinté via les tokens impossible :
     on utilise un chevron neutre en bordure, dessiné en CSS pur. */
  background-image: none;
  padding-right: 2.5rem;
}

/* Enveloppe du select pour dessiner le chevron avec la couleur des tokens */
.champ__select {
  position: relative;
}

.champ__select::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--couleur-texte-secondaire);
  border-bottom: 1.5px solid var(--couleur-texte-secondaire);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Messages d'aide et d'erreur */
.champ__aide {
  font-size: var(--taille-xs);
  color: var(--couleur-texte-discret);
}

.champ__erreur {
  font-size: var(--taille-xs);
  color: var(--couleur-danger);
  font-weight: var(--graisse-moyenne);
}

.champ--erreur .champ__saisie {
  border-color: var(--couleur-danger);
}

/* Cases à cocher et boutons radio stylés */
.case {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--espace-sm);
  cursor: pointer;
  font-size: var(--taille-sm);
  color: var(--couleur-texte);
}

.case input[type="checkbox"],
.case input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  border: 1.5px solid var(--couleur-filet-fort);
  background-color: var(--couleur-surface);
  flex-shrink: 0;
  display: grid;
  place-content: center;
  transition: border-color var(--duree-rapide) var(--courbe-standard),
              background-color var(--duree-rapide) var(--courbe-standard);
}

.case input[type="checkbox"] {
  border-radius: var(--rayon-xs);
}

.case input[type="radio"] {
  border-radius: var(--rayon-rond);
}

.case input[type="checkbox"]::before {
  content: "";
  width: 0.625rem;
  height: 0.35rem;
  border-left: 2px solid var(--couleur-sur-accent);
  border-bottom: 2px solid var(--couleur-sur-accent);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  margin-bottom: 0.125rem;
  transition: transform var(--duree-rapide) var(--courbe-standard);
}

.case input[type="radio"]::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-sur-accent);
  transform: scale(0);
  transition: transform var(--duree-rapide) var(--courbe-standard);
}

.case input:checked {
  background-color: var(--couleur-accent);
  border-color: var(--couleur-accent);
}

.case input:checked::before {
  transform: rotate(-45deg) scale(1);
}

.case input[type="radio"]:checked::before {
  transform: scale(1);
}

.case input:hover {
  border-color: var(--couleur-accent);
}

/* Groupe de choix empilés */
.groupe-choix {
  display: grid;
  gap: var(--espace-sm);
}

/* Carte-option : un choix radio présenté comme une carte cliquable
   (utilisé par le questionnaire de profil) */
.carte-option {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-sm);
  padding: var(--espace-md);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-md);
  background-color: var(--couleur-surface);
  cursor: pointer;
  transition: border-color var(--duree-rapide) var(--courbe-standard),
              background-color var(--duree-rapide) var(--courbe-standard);
}

.carte-option:hover {
  border-color: var(--couleur-accent);
}

.carte-option:has(input:checked) {
  border-color: var(--couleur-accent);
  background-color: var(--couleur-accent-fond);
}

/* --------------------------------------------------------------------------
   8. Progression, jauges, avancement
   -------------------------------------------------------------------------- */

/* Barre de progression simple (largeur du remplissage en style inline) */
.barre-progression {
  width: 100%;
  height: 0.5rem;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-fond-2);
  border: 1px solid var(--couleur-filet);
  overflow: hidden;
}

.barre-progression__remplissage {
  display: block;
  height: 100%;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-accent);
  transition: width var(--duree-lente) var(--courbe-douce);
}

.barre-progression__remplissage--succes { background-color: var(--couleur-succes); }
.barre-progression__remplissage--attention { background-color: var(--couleur-attention); }
.barre-progression__remplissage--danger { background-color: var(--couleur-danger); }
.barre-progression__remplissage--info { background-color: var(--couleur-info); }
.barre-progression__remplissage--pilote { background-color: var(--profil-pilote); }
.barre-progression__remplissage--visionnaire { background-color: var(--profil-visionnaire); }
.barre-progression__remplissage--batisseur { background-color: var(--profil-batisseur); }
.barre-progression__remplissage--stratege { background-color: var(--profil-stratege); }

/* Jauge : barre de progression avec libellé et valeur */
.jauge {
  display: grid;
  gap: var(--espace-xs);
}

.jauge__entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espace-md);
}

.jauge__libelle {
  font-size: var(--taille-sm);
  font-weight: var(--graisse-moyenne);
  color: var(--couleur-texte);
}

.jauge__valeur {
  font-family: var(--police-titre);
  font-size: var(--taille-base);
  font-weight: var(--graisse-demi);
  color: var(--couleur-accent-texte);
}

/* --------------------------------------------------------------------------
   9. Liste d'étapes numérotées (déroulé 1-2-3)
   -------------------------------------------------------------------------- */
.etapes {
  list-style: none;
  padding: 0;
  counter-reset: etape;
  display: grid;
  gap: var(--espace-xl);
}

.etapes--horizontales {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.etapes__item {
  counter-increment: etape;
  position: relative;
  padding-left: 4rem;
}

.etapes__item::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-content: center;
  border: 1px solid var(--couleur-accent);
  border-radius: var(--rayon-rond);
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  font-weight: var(--graisse-demi);
  color: var(--couleur-accent-texte);
  background-color: var(--couleur-surface);
}

.etapes__titre {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  color: var(--couleur-encre);
  margin-bottom: var(--espace-xs);
}

.etapes__texte {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

/* --------------------------------------------------------------------------
   10. Timeline verticale simple
   -------------------------------------------------------------------------- */
.timeline {
  list-style: none;
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--espace-lg);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background-color: var(--couleur-filet-fort);
}

.timeline__item {
  position: relative;
  padding-left: var(--espace-xl);
}

.timeline__point {
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1rem;
  height: 1rem;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-surface);
  border: 2px solid var(--couleur-accent);
}

.timeline__point--succes { border-color: var(--couleur-succes); }
.timeline__point--attention { border-color: var(--couleur-attention); }
.timeline__point--danger { border-color: var(--couleur-danger); }

.timeline__date {
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--couleur-texte-discret);
}

.timeline__titre {
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
  margin-block: var(--espace-2xs);
}

.timeline__texte {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

/* --------------------------------------------------------------------------
   11. Stat / chiffre clé
   -------------------------------------------------------------------------- */
.stat {
  display: grid;
  gap: var(--espace-2xs);
}

.stat__chiffre {
  font-family: var(--police-titre);
  font-size: var(--taille-3xl);
  font-weight: var(--graisse-demi);
  line-height: 1;
  color: var(--couleur-encre);
  letter-spacing: -0.02em;
}

.stat__chiffre--or {
  color: var(--couleur-accent-texte);
}

.stat__legende {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
  max-width: 16rem;
}

.grille-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--espace-xl);
}

/* --------------------------------------------------------------------------
   12. Avatar (initiales des experts)
   -------------------------------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-encre);
  color: var(--couleur-sur-encre);
  font-family: var(--police-titre);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-demi);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  border: 1px solid var(--couleur-filet);
}

.avatar--or {
  background-color: var(--couleur-accent);
  color: var(--couleur-sur-accent);
}

.avatar--grand {
  width: 3.75rem;
  height: 3.75rem;
  font-size: var(--taille-base);
}

/* Rangée d'avatars superposés */
.rangee-avatars {
  display: flex;
}

.rangee-avatars .avatar:not(:first-child) {
  margin-left: -0.625rem;
  box-shadow: var(--ombre-douce);
}

/* --------------------------------------------------------------------------
   13. Bouton de bascule de thème (lune / soleil)
   -------------------------------------------------------------------------- */
.bascule-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--rayon-rond);
  border: 1px solid var(--couleur-filet-fort);
  background-color: var(--couleur-surface);
  color: var(--couleur-texte-secondaire);
  transition: color var(--duree-rapide) var(--courbe-standard),
              border-color var(--duree-rapide) var(--courbe-standard);
}

.bascule-theme:hover {
  color: var(--couleur-accent-texte);
  border-color: var(--couleur-accent);
}

.bascule-theme svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* En thème clair : on montre la lune (= passer en sombre).
   En thème sombre : on montre le soleil (= revenir au clair). */
.bascule-theme__soleil { display: none; }
.bascule-theme__lune { display: block; }

[data-theme="sombre"] .bascule-theme__soleil { display: block; }
[data-theme="sombre"] .bascule-theme__lune { display: none; }