/* =========================================================
   UI ATOMES
   Boutons, titres/surtitres, badges — posés à côté des classes
   Bootstrap (.btn, etc.), jamais à la place de bootstrap.min.css.
   ========================================================= */

/* Titre de hero : les deux rôles typographiques se répondent DANS le même
   titre — --font-base porte la phrase, --font-display détache la partie
   accentuée, qui devient le mot sur lequel l'œil se pose. Tant que les deux
   tokens pointent sur la même pile (cas du socle), le mélange est invisible ;
   il apparaît dès qu'un projet leur donne deux familles distinctes.
   Ce mélange est propre au hero : ailleurs, un titre garde une seule voix,
   sans quoi l'effet perdrait sa valeur de signal. */
.ui-display-title {
  color: var(--color-titre-hero);
  font-family: var(--font-titre);
  font-size: var(--fs-display-2);   /* .display-2 */
  font-weight: var(--fw-light);     /* $display-font-weight */
  line-height: var(--lh-heading);
}

.ui-display-title .ui-accent {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: var(--fw-light);
}

/* Sous 820px, le hero descend d'un cran dans l'échelle « display ». */
@media (width <= 820px) {
  .ui-display-title { font-size: var(--fs-display-4); }
}

@media (width <= 560px) {
  .ui-display-title { font-size: var(--fs-display-6); }
}

.ui-section-title {
  margin-bottom: var(--space-3);
  font-family: var(--font-titre);
}

/* Un titre de section ouvre une page (h1) ou une section (h2) : il prend
   la taille Bootstrap de son niveau, pas une valeur à lui. Sélecteurs
   qualifiés par l'élément — leur spécificité (0,1,1) doit rester
   supérieure à celle des variantes ci-dessous. */
h1.ui-section-title { font-size: var(--fs-h1); color: var(--color-titre); }
h2.ui-section-title { font-size: var(--fs-h2); }

.ui-section-title.is-compact { font-size: var(--fs-h3); }

.ui-section-title.is-light { color: var(--white); }

.ui-card-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);    /* $headings-font-weight */
  line-height: var(--lh-heading);
}

.ui-card-title .ui-line-a { color: var(--color-titre); }
.ui-card-title .ui-line-b { color: var(--color-primary); }
.ui-card-title.is-large { font-size: var(--fs-h3); }

.ui-footer-title {
  font-family: var(--font-base);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.ui-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* --color-primary et non --color-primary : un sur-titre est du petit
   texte (12px), et Énergie pleine n'y tient pas le seuil AA. Voir le jeton. */
.ui-eyebrow--accent { color: var(--color-brand-pink-ink); }
.ui-eyebrow--light { color: var(--on-dark-subtle); }

/* ---- Boutons : équivalent maison de .btn/.btn-primary,
   posé en plus de .btn pour l'habillage (majuscules, pilule,
   ombre) que Bootstrap ne fournit pas par défaut. ---- */
.ui-btn {
  font-family: var(--font-base);
  border-radius: var(--radius-sm);   /* $btn-border-radius */
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  /* $btn-padding-y .375rem / $btn-padding-x .75rem. Le padding vertical est
     porté par min-height pour que tous les boutons d'une rangée s'alignent,
     quel que soit leur contenu (icône, flèche, texte sur deux mots). */
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);     /* $btn-font-weight */
  display: inline-flex;
  border: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.ui-btn.ui-btn-slim {
  /* .btn-sm : $btn-padding-y-sm .25rem / -x-sm .5rem / font .875rem */
  min-height: var(--control-h-sm);
  padding: 0 var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}

.ui-btn.ui-btn-large {
  /* .btn-lg : $btn-padding-y-lg .5rem / -x-lg 1rem / font 1.25rem */
  min-height: var(--control-h-lg);
  padding: 0 var(--space-4);
  font-size: var(--fs-lead);
}

/* Libellé BLANC, sur décision explicite. À signaler pour qui reprendra ce
   fichier : Énergie porte du blanc à 3,76:1, sous les 4,5:1 du texte courant,
   et de la Nuit à 4,79:1. La palette prescrit la seconde ; le choix retenu est
   la première. Deux façons de le rattraper sans toucher au libellé, le jour
   où l'on voudra : assombrir le fond des seuls boutons (--color-primary
   convient, 6,26:1 en blanc), ou repasser le libellé à --color-dark. */
.ui-btn-primary {
  background: var(--color-bouton);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.ui-btn-primary:hover {
  background: var(--color-bouton-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.ui-btn-outline {
  background: transparent;
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
}

.ui-btn-outline:hover {
  background: var(--color-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.ui-btn-outline span { transition: transform 0.25s ease; }
.ui-btn-outline:hover span { transform: translateX(3px); }

.ui-btn-soft {
  background: var(--surface-douce);
  color: var(--color-dark);
}

.ui-btn-soft:hover {
  background: var(--white);
  color: var(--color-dark);
  transform: translateY(-2px);
}

/* CTA collection : fond plein, inversion au survol. La variante
   contour est .ui-btn-outline (mêmes couleurs, même comportement
   au survol) — pas de classe séparée pour ça. */
.ui-btn-ghost {
  background: var(--color-dark);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.ui-btn-ghost:hover {
  background: var(--white);
  color: var(--color-dark);
  box-shadow: var(--shadow-lg);
}

/* Habillage de marque pour .btn.btn-link (Bootstrap) : sa couleur lit
   --bs-link-color, jamais remappée globalement (voir ui-theme.css) —
   on la fixe donc ici, comme les autres variantes .ui-btn-*. */
.ui-btn-link {
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover);
  padding: 0;
  font-weight: var(--fw-bold);
}

/* Lien texte rouge, soulignement révélé au survol : une seule
   classe, pas de combo d'utilitaires Bootstrap à recomposer à
   chaque usage (testé : .link-primary + .link-underline +
   .link-underline-opacity-0 + .link-underline-opacity-100-hover +
   .fw-semibold pour ce seul résultat, jamais utilisé avec d'autre
   couleur — pas de gain à garder ça éclaté). */
.ui-text-link {
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}

.ui-text-link:hover {
  text-decoration-color: currentColor;
}

/* LE BADGE — un seul dessin, des déclinaisons de couleur (30 sept. 2026).
   Avant : « Vous a liké » faisait 34px, « Vous avez matché » 26, la région
   d'une carte 37, les taux 34 avec d'autres marges — quatre objets pour une
   même idée. Désormais une hauteur (32px), un rembourrage, un corps (12px),
   un picto (16px), une pilule, 8px de marge latérale et 4 entre picto et
   texte ; seule la couleur change :
     (défaut) blanc, texte pétrole   — Contact, Demande envoyée…
     --like     blanc, texte rose    — Vous a liké, Like envoyé, C'est un match
     --danger   blanc, texte rouge   — Profil bloqué, Profil signalé
     --accent   rose plein           — la région sur une photo
     --primaire pétrole plein        — « Vous »
   Les molécules ne gardent que la POSITION du badge (coin de la photo…). */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 2rem;
  margin: 0;
  padding: 0 var(--space-2);   /* 8px de chaque côté (30 sept. 2026) */
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--color-titre);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
}
.ui-badge > .material-symbols-outlined { font-size: var(--icon-sm); line-height: 1; }
/* « Vous a liké », « Like envoyé » : fond clair, texte rose (secondaire) ;
   « C'est un match » seul en couleur vive, plein (1er oct. 2026). */
.ui-badge--like { color: var(--color-brand-pink); }
.ui-badge--match { background: var(--color-brand-pink); color: var(--white); }
.ui-badge--match .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
.ui-badge--contact { color: var(--color-titre); }
.ui-badge--danger { color: var(--color-danger); }
.ui-badge--accent { background: var(--color-brand-pink-ink); color: var(--on-dark); }
.ui-badge--primaire { background: var(--color-primary); color: var(--white); }

/* Pastille de statut à 3 couleurs, posée sur .badge.rounded-pill
   (Bootstrap). Utilisée pour indiquer un état (personnalisé /
   utilisé / pas encore utilisé, à faire / à prévoir…). */
.ui-status-badge {
  align-items: center;
  display: inline-flex;
  padding: 0.35em 0.65em;        /* $badge-padding-y / -x */
  font-size: var(--fs-caption);  /* $badge-font-size .75rem */
  font-weight: var(--fw-bold);   /* $badge-font-weight */
}

.ui-status-badge--neutral { background: var(--teinte-neutre); color: var(--color-dark-soft); }
.ui-status-badge--accent { background: color-mix(in srgb, var(--color-primary) 6%, transparent); color: var(--color-primary); }
.ui-status-badge--warning { background: color-mix(in srgb, var(--filet-doux) 12%, transparent); color: var(--text-muted); }

/* Posé sur .badge (Bootstrap) : la boîte/le texte viennent de là,
   ce bloc ne porte que l'habillage propre à la barre utilitaire
   (fond translucide, pilule, survol). */
/* Fond DÉRIVÉ de la barre et non une couleur à part : un voile de blanc à
   14 % sur --color-titre, la teinte que la barre porte elle-même. La puce se
   détache donc en s'éclaircissant, comme un relief, et suit automatiquement le
   pétrole le jour où il bouge.

   Elle employait --color-dark-soft, un vert-gris hérité de la charte
   précédente : sur une barre devenue pétrole, il jurait sans qu'aucune règle
   ne le relie plus à rien. */
.ui-utility-badge {
  background: color-mix(in srgb, var(--white) 12%, var(--color-titre));
  border: 0;
  border-radius: var(--radius-pill);
  align-items: center;
  display: inline-flex;
  color: var(--white);
  letter-spacing: 0.1em;
  padding: 0.35em 0.65em;
  line-height: 1;
  font-size: var(--fs-caption);
  font-family: inherit;
  /* Semi-gras et non gras : à 12px avec 0.1em d'interlettrage, le 700 tassait
     les lettres et faisait peser une rangée qui n'est que secondaire. */
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.ui-utility-badge:hover {
  background: var(--white);
  color: var(--color-dark);
}

/* Variante fond blanc, pour les contextes clairs (la variante de
   base est pensée pour la barre utilitaire, fond pétrole). */
.ui-utility-badge--outline {
  background: var(--white);
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
}

.ui-utility-badge--outline:hover {
  background: var(--color-dark);
  color: var(--white);
}

/* Étiquette rouge compacte au-dessus d'un titre (numéro d'engagement,
   "N° 01" de produit…) : un seul rendu pour ces deux usages, qui ne
   différaient que par la balise porteuse. */
.ui-kicker {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
}

.ui-arrow-link {
  width: max-content;
  max-width: 100%;
  margin-top: var(--space-3);
  align-items: center;
  gap: var(--space-2);
  display: flex;
  color: var(--color-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s ease, transform 0.2s ease;
}

.ui-arrow-link:hover {
  color: var(--color-primary-hover);
  transform: translateX(3px);
}

.ui-arrow-link span { font-size: var(--fs-base); }

.ui-block-button {
  width: 100%;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
}

.ui-block-button:hover {
  color: var(--white);
  background: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.ui-block-button span {
  font-size: var(--fs-lead);
  transition: transform 0.2s ease;
}

.ui-block-button:hover span {
  transform: translateX(4px);
}

/* Petit bouton rond outline (ex. « i » d'info à côté d'un label) :
   posé sur .btn.rounded-circle (Bootstrap). */
/* LE BOUTON-ICÔNE EST UN BOUTON, pas une pastille : c'est une déclinaison de
   « .btn », et il en suit l'échelle de hauteurs — les mêmes jetons que
   « .ui-btn », au même rang. Il portait 22 / 30 / 18px, une échelle à lui,
   sans rapport avec les 56 / 64 / 44 des boutons ordinaires ; deux
   commandes voisines n'y avaient pas la même zone tactile, et la plus petite
   tombait sous les 24px du critère WCAG 2.5.8.
   Carré, puisqu'il ne porte qu'un signe : la largeur suit la hauteur. */
.ui-icon-button {
  /* CENTRAGE EXPLICITE, et c'est la correction d'un vrai défaut : l'atome
     s'en remettait au « display: inline-block » et au « text-align » de
     « .btn » pour placer son glyphe. Dès qu'il devient ÉLÉMENT D'UN CONTENEUR
     FLEX — ce qui arrive sur la ligne du nom d'un profil — son display est
     blockifié, le centrage de .btn ne s'applique plus, et le pictogramme part
     en haut du disque. Mesuré : glyphe 9px trop haut, display « block » là où
     le même bouton hors flex rendait « inline-block ».
     « inline-grid » + « place-items » centre dans les deux cas, comme le fait
     déjà .ui-membre-rond de l'en-tête. */
  display: inline-grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  padding: 0;
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
  font: var(--fw-bold) var(--fs-base) / 1 var(--font-display);
}

.ui-icon-button:hover,
.ui-icon-button:focus-visible {
  color: var(--white);
  background: var(--color-dark);
}

.ui-icon-button-large { width: var(--control-h-lg); height: var(--control-h-lg); font-size: var(--icon-md); }
.ui-icon-button-slim { width: var(--control-h-sm); height: var(--control-h-sm); font-size: var(--icon-sm); }

/* ---- Spinner (chargement) : la couleur du spinner Bootstrap suit
   currentColor — on la remappe sur la palette du système. ---- */
.ui-spinner { color: var(--color-dark); }
.ui-spinner--danger { color: var(--color-danger); }

/* ---- Barre de progression : piste claire (--border) + remplissage vert. ---- */
.ui-progress { background-color: var(--border); }
.ui-progress .progress-bar { background-color: var(--color-dark); color: var(--white); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }

/* ---- Popover : bulle Bootstrap habillée via ses variables. Même parti que
   l'infobulle — on ne redéclare que ce que Bootstrap lit à l'exécution. ---- */
.ui-popover {
  --bs-popover-bg: var(--white);
  --bs-popover-border-color: var(--border);
  --bs-popover-border-radius: var(--radius-sm);
  --bs-popover-header-bg: var(--surface-douce);
  --bs-popover-header-color: var(--color-dark);
  --bs-popover-header-font-size: var(--fs-sm);
  --bs-popover-body-color: var(--text-muted);
  --bs-popover-font-size: var(--fs-sm);
  --bs-popover-box-shadow: var(--shadow-md);
}

/* ---- Infobulle : bulle Bootstrap habillée via ses variables
   (--bs-tooltip-*), appliquée avec data-bs-custom-class="ui-tooltip". ---- */
.ui-tooltip {
  --bs-tooltip-bg: var(--color-dark);
  --bs-tooltip-color: var(--white);
  --bs-tooltip-border-radius: var(--radius-sm);
  --bs-tooltip-font-size: var(--fs-caption);
}

/* Bouton de fermeture rond : posé sur .btn-close (Bootstrap), même
   technique que .ui-nav-offcanvas .btn-close (icône par ligature
   Material Symbols) mais en variante autonome, fond clair + croix
   verte, pour un contexte hors offcanvas (ex. popover produit). */
.ui-close-button {
  /* AU RANG « SMALL », comme le bouton-icône : c'en est un, avec un glyphe au
     lieu d'un signe. Il portait 34px, une mesure à lui seul — ni celle des
     boutons, ni celle des ronds, ni celle des champs. Une croix de fermeture
     voisine toujours d'autre chose : elle doit s'y accorder. */
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  padding: 0;
  background-color: var(--surface-douce);
  background-image: none;
  border-radius: 50%;
  opacity: 1;
}

.ui-close-button::before {
  content: 'close';
  font-family: 'Material Symbols Outlined';
  font-size: var(--icon-md);
  color: var(--color-dark);
}

/* Croix de fermeture, partout où Bootstrap en pose une (modale, toast,
   offcanvas, alerte) : son SVG en background-image cède la place au glyphe
   Material, qui suit la couleur du texte. Règle générique — les variantes
   ci-dessus et dans les organismes ne changent que la teinte.

   Seule surcharge de règle native du projet, et elle est contrainte :
   --bs-btn-close-bg attend une *image*, pas un glyphe de police. Les
   opacités, elles, passent bien par les variables (voir ui-theme.css). */
.btn-close {
  display: inline-grid;
  place-items: center;
  background-image: none;
}

.btn-close::before {
  content: 'close';
  font-family: 'Material Symbols Outlined';
  font-size: var(--icon-md);
  line-height: 1;
  color: currentcolor;
}

/* Icônes utilitaires (panier, adresse, téléphone, email) : Google
   Material Symbols Outlined, chargée en <link> dans le <head>. Les
   logos de marque (Facebook, YouTube, X) restent en SVG inline —
   Material Symbols ne fournit aucun logo tiers. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  vertical-align: -3px;
  font-size: var(--icon-md);
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

/* ---- Champs de formulaire ----
   Posés sur .form-control / .form-select (Bootstrap). Tout ce qui suit
   reprend les valeurs natives ($input-*) : ce bloc ne fait que rebrancher
   les couleurs du système sur la géométrie de Bootstrap, sans la déplacer.
   Les états — focus, disabled, is-invalid — sont laissés à Bootstrap, qui
   les gère déjà ; on ne redéclare que ce qui doit suivre nos tokens. */
.ui-form-control,
.ui-form-select {
  /* $input-padding-y .375rem · $input-padding-x .75rem · $input-font-size 1rem.
     La hauteur se déduit de ces valeurs (--control-h) plutôt que d'être posée
     en dur : elle suit l'échelle si le corps de texte change. */
  min-height: var(--control-h);
  padding-left: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--shadow-color) 6%, transparent);   /* $input-box-shadow */
  font: var(--fw-normal) var(--fs-base) / var(--lh-base) var(--font-base);
  color: var(--text);
}

.ui-form-control { padding-right: var(--space-3); }

/* Chevron du <select> : un <select> n'accepte pas de pseudo-élément, l'icône
   ne peut donc pas être un glyphe. On garde le mécanisme de Bootstrap
   (background-image) mais avec le tracé Material « expand_more », pour que
   la forme reste celle du reste du système. */
.ui-form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%236c757d'%3e%3cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
}

/* Astérisque des champs requis. Décorative : c'est l'attribut « required »
   qui porte l'information pour les technologies d'assistance, elle n'est là
   que pour l'œil qui balaie le formulaire. */
.ui-form-required {
  color: var(--color-danger);
  font-weight: var(--fw-bold);
}

.ui-form-control::placeholder,
.ui-form-select::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* FOCUS — anneau natif de Bootstrap ($input-focus-box-shadow). La version
   précédente le supprimait (box-shadow:none; outline:none), ce qui rendait
   la navigation au clavier illisible. On garde donc l'anneau, teinté par
   --color-primary. */
.ui-form-control:focus,
.ui-form-select:focus {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 0.25rem var(--focus-ring);
  outline: 0;
}

/* DÉSACTIVÉ — $input-disabled-bg = $secondary-bg. Bootstrap laisse la
   couleur du texte inchangée et force opacity:1 (Safari l'atténue sinon). */
.ui-form-control:disabled,
.ui-form-select:disabled {
  background-color: var(--surface-appuyee);
  opacity: 1;
}

/* ERREUR — on emploie .is-invalid, la classe d'état de Bootstrap, et non une
   classe maison : Bootstrap pose déjà la bordure rouge, l'icône et l'anneau
   de focus assorti. Ce bloc ne fait que garantir que notre habillage ne
   repasse pas devant (spécificité égale, déclaré après bootstrap.min.css). */
.ui-form-control.is-invalid,
.ui-form-select.is-invalid {
  border-color: var(--color-danger);
  /* Bootstrap glisse ici son propre pictogramme d'erreur en background-image.
     On le retire : le message sous le champ (.ui-form-error) en porte déjà un,
     en Material Symbols — deux icônes pour une même erreur se contredisent
     plus qu'elles ne s'appuient. */
  background-image: none;
  padding-right: var(--space-3);
}

.ui-form-control.is-invalid:focus,
.ui-form-select.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-danger);   /* $form-feedback-invalid + 25 % */
}

/* Message d'erreur sous le champ — pendant de .invalid-feedback, mais rendu
   en permanence dans la doc pour être visible sans interaction. */
.ui-form-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--fs-sm);          /* $form-feedback-font-size = .875em */
  color: var(--color-danger);
}
.ui-form-error .material-symbols-outlined { font-size: var(--icon-sm); }

/* En <textarea>, le champ garde son habillage mais reprend la main sur sa
   hauteur : --control-h l'écraserait à une ligne. */
textarea.ui-form-control {
  min-height: calc(var(--fs-base) * var(--lh-base) * 4);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  line-height: var(--lh-base);
  resize: vertical;
}

.ui-form-label {
  display: block; /* libellé toujours au-dessus du champ */
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
}

.ui-form-text {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* Bootstrap remplit la case avec --bs-form-check-bg, qui vaut --bs-body-bg —
   remappé sur --white par ui-theme. La case héritait donc du beige du fond
   de page, y compris posée sur une section blanche. On la force au blanc et
   sur le filet du système, comme .ui-form-control et .ui-form-select le
   font déjà : un champ se lit blanc, quel que soit son support. */
.ui-form-check-input {
  background-color: var(--white);
  border-color: var(--border);
}

.ui-form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.ui-form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

.ui-form-range::-webkit-slider-thumb { background-color: var(--color-primary); }
.ui-form-range::-moz-range-thumb { background-color: var(--color-primary); }

.ui-input-group-text {
  border: 1px solid var(--border);
  background-color: var(--surface-douce);
  color: var(--color-dark);
}

/* ---- Alertes ----
   Variantes natives de Bootstrap (.alert-success / -danger / -warning) :
   fond, bordure, rayon, padding et couleur de texte viennent tous de
   bootstrap.min.css et ne sont pas retouchés. L'info, seule, prend les
   couleurs du site (plus bas).

   .ui-alert n'ajoute qu'une chose que Bootstrap ne fait pas : placer une
   icône en regard du message. L'icône hérite de currentColor, donc de la
   couleur d'emphase de la variante — elle suit sans être déclarée. */
.ui-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* L'ALERTE INFO AUX COULEURS DU SITE (29 sept. 2026) : la brume minérale
   des sections et le pétrole, au lieu du cyan de Bootstrap. */
.ui-alert.alert-info {
  --bs-alert-bg: var(--section-teinte-4);
  --bs-alert-border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  --bs-alert-color: var(--color-primary);
  --bs-alert-link-color: var(--color-primary);
}

/* Variante multi-lignes : les phrases s'empilent et l'icône se cale en haut
   plutôt qu'au milieu d'un bloc devenu haut. */
.ui-alert--stack {
  align-items: flex-start;
}

.ui-alert--stack .material-symbols-outlined { margin-top: 2px; }

.ui-alert-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ui-alert .material-symbols-outlined {
  font-size: var(--icon-md);
  flex-shrink: 0;
}

/* ---- Pastille de compteur et médaillon (remontés depuis la couche molécules :
     ces classes sont posées par des atomes, elles doivent pouvoir être
     surchargées par les couches supérieures) ---- */
/* LE COMPTEUR — un nombre, et rien d'autre (30 sept. 2026). Le « 12 » de
   Mes demandes, le « 3 » de la cloche, les filtres actifs, les participants
   d'un groupe, les membres d'une communauté : ils faisaient 18, 20, 21 ou
   30px. Désormais une taille — 20px de haut, 20 de large au moins, 12px de
   texte, en pilule — et deux couleurs :
     (défaut)  rose plein    — ce qui est nouveau, ce qu'on compte en personnes
     --neutre  pétrole plein — un réglage (filtres actifs), un total de hero
   Il ne se confond pas avec .ui-badge (32px, un mot) : lui ne porte qu'un
   chiffre, collé à un libellé ou posé sur un picto. */
.ui-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-brand-pink-ink);
  color: var(--white);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.ui-count-badge--neutre { background: var(--color-titre); }

.ui-kicker--medallion {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 85px;
  height: 85px;
  margin: 0;
  border: 3px solid var(--border-soft);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  transform: translate(calc(50% - 20px), calc(-50% + 20px)) rotate(15deg);
}

/* ---- Fil d’Ariane (remonté depuis la couche organismes — atomes/fil-ariane.snip) ---- */
.ui-breadcrumb {
  --bs-breadcrumb-divider: '›';
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  min-height: 54px;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.ui-breadcrumb .breadcrumb-item a { color: inherit; }

.ui-breadcrumb .breadcrumb-item a:hover { color: var(--color-primary); }

.ui-breadcrumb .breadcrumb-item.active { color: var(--color-dark); font-weight: var(--fw-semibold); }

/* Sous 560px le fil ne se replie pas : il DÉFILE. « overflow: hidden »
   coupait la fin de la ligne — c'est-à-dire la page courante, la seule
   entrée que le visiteur ne peut pas deviner. Le fil d'une communauté
   compte six niveaux (accueil, liste, pays, région, ville, nom) : c'est là
   que la troncature se voyait. Les entrées cessent aussi de se comprimer,
   sans quoi elles se chevaucheraient au lieu de sortir du cadre. */
@media (width <= 560px) {
  .ui-breadcrumb {
    white-space: nowrap;
    overflow-x: auto;
  }

  .ui-breadcrumb .breadcrumb-item { flex: 0 0 auto; }
}


/* « EN COURS DE VÉRIFICATION » (2 oct. 2026) : la pastille posée par le
   script sur une image floutée par la détection de nudité, en bas à gauche,
   lisible sur n'importe quel flou. Sur une petite vignette, le picto seul. */
.ui-verification-cadre { position: relative; }
.ui-verification {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: calc(100% - var(--space-3));
  border-radius: var(--radius-pill);
  background: var(--color-dark);
  padding: var(--space-1) var(--space-2);
  color: var(--white);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  pointer-events: none;
}
.ui-verification > .material-symbols-outlined { font-size: var(--icon-sm); }
.ui-verification--picto { left: var(--space-1); bottom: var(--space-1); padding: var(--space-1); }
.ui-verification--picto > .ui-verification-texte {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}