/*
 * ALGM Bénévoles — Composants front-end
 * ─────────────────────────────────────────────────────────────────────────────
 * Styles extraits du CSS inline présent dans :
 *  - includes/core/Shortcodes.php (formulaires inscription/connexion)
 *  - assets/js/app.js (composants Vue front)
 *
 * Variables disponibles (définies dans front.css) :
 *   --algm-bleu, --algm-or, --algm-blanc, --algm-gris, --algm-gris-bord,
 *   --algm-texte, --algm-erreur, --algm-succes, --algm-font,
 *   --algm-radius, --algm-shadow, --algm-transition
 *
 * Convention de nommage (BEM léger) :
 *   .algm-bv-{block}              → composant racine
 *   .algm-bv-{block}__{element}   → élément interne
 *   .algm-bv-{block}--{modifier}  → variante / état
 *
 * Pour les valeurs dynamiques (couleur d'équipe, etc.), utiliser :
 *   <div class="algm-bv-foo" :style="{'--foo-color': data.couleur}">
 *   .algm-bv-foo { background: var(--foo-color); }
 *
 * Voir docs/refactor-css-plan.md pour le contexte et le plan de migration.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Phase 1 : interactions hover/focus ─────────────────────────────────────── */
/* Migration des @mouseenter/@mouseleave/@focus/@blur de app.js vers du CSS pur. */

/* Carte mission cliquable — élévation au survol.
 * Utilisée dans la grille des missions (vue front "Disponibles"). */
.algm-bv-card--clickable {
  cursor: pointer;
  transition: box-shadow var(--algm-transition);
}
.algm-bv-card--clickable:hover,
.algm-bv-card--clickable:focus-visible {
  box-shadow: 0 4px 16px rgba(32, 35, 70, 0.12);
}

/* Textarea générique sans gestion d'erreur (ex. bio profil). */
.algm-bv-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: var(--algm-radius);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  outline: none;
  resize: vertical;
  transition: border-color var(--algm-transition);
}
.algm-bv-textarea:focus,
.algm-bv-textarea:focus-visible {
  border-color: var(--algm-bleu);
}
/* Variante textarea plus compact (formulaires denses, modales) */
.algm-bv-textarea--sm {
  padding: 9px 12px;
}

/* ── Phase 2 : composant upload photo (formulaire d'inscription) ────────────── */
/* Migration des style="..." de Shortcodes.php (formulaire register).
 * Le composant complet : cercle photo cliquable + badge crayon + label + hints. */

.algm-bv-photo-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

/* Cercle photo placeholder/preview, cliquable pour ouvrir le file picker */
.algm-bv-photo-upload__circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f0f0f0;
  border: 3px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

/* Petit badge crayon en surimpression sur le cercle */
.algm-bv-photo-upload__edit-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--algm-or);
  border: 2px solid var(--algm-blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* Bloc caption sous le cercle (label + hint + erreur) */
.algm-bv-photo-upload__caption {
  text-align: center;
}

/* Label cliquable "Ajouter une photo" */
.algm-bv-photo-upload__btn {
  display: inline-block;
  padding: 5px 14px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: var(--algm-radius);
  font-size: 12px;
  color: #555;
  cursor: pointer;
}

/* Texte d'aide sous le bouton (formats acceptés, taille max) */
.algm-bv-photo-upload__hint {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--algm-texte-muted);
}

/* Message d'erreur de validation. Affiché via JS quand le fichier est invalide. */
.algm-bv-photo-upload__error {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--algm-erreur);
  display: none;
}

/* Input file caché — l'interaction passe par le cercle (onclick → click()) */
.algm-bv-photo-upload__input {
  display: none;
}

/* <img> injecté en JS dans le cercle après sélection (preview) */
.algm-bv-photo-upload__preview {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

/* Message d'erreur générique du formulaire auth (ex. erreur email).
 * Initialement masqué, contenu rempli par JS. */
.algm-bv-auth-error {
  display: none;
}

/* ── Phase 3 : composants Vue statiques ─────────────────────────────────────── */

/* ─── Animation globale (anciennement injectée via JS, app.js l. 2839) ─── */
@keyframes algmFadeIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Sélect générique (anciennement injecté via JS, app.js l. 2840-2841) ─── */
.algm-bv-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: var(--algm-radius);
  font-size: 13px;
  background: var(--algm-blanc);
  cursor: pointer;
  outline: none;
}
.algm-bv-select:focus {
  border-color: var(--algm-bleu);
}
/* Variante compacte (utilisée dans les barres de filtres) */
.algm-bv-select--sm {
  font-size: 12px;
  padding: 8px 10px;
}

/* Variante compacte de info-box (alertes inline dans cartes) */
.algm-bv-info-box--inline {
  font-size: 11px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

/* ─── Form fields génériques (réutilisables par tous les composants Vue) ─── */
/* Note : .algm-bv-textarea est défini plus haut (Phase 1) avec un comportement similaire. */

.algm-bv-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--algm-bleu);
  margin-bottom: 5px;
}

.algm-bv-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: var(--algm-radius);
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
  transition: border-color var(--algm-transition);
}
.algm-bv-input:focus,
.algm-bv-input:focus-visible {
  border-color: var(--algm-bleu);
}

/* ─── Alertes (banner d'erreur/succès dans les formulaires) ─── */
/* TODO : à fusionner avec .algm-auth-notice (Shortcodes.php) lors d'un cleanup ultérieur. */

.algm-bv-alert {
  padding: 12px 14px;
  border-radius: var(--algm-radius);
  font-size: 13px;
  margin-bottom: 16px;
  border-left: 4px solid;
}
.algm-bv-alert--error {
  background: #f8d7da;
  color: #721c24;
  border-left-color: #dc3545;
}
.algm-bv-alert--success {
  background: #d4edda;
  color: #155724;
  border-left-color: #28a745;
}

/* ─── Toast (notification flottante en haut à droite, app.js Toast component) ─── */

.algm-bv-toast-container {
  position: fixed;
  top: 20px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.algm-bv-toast {
  background: var(--algm-bleu);
  color: var(--algm-blanc);
  padding: 12px 16px;
  border-radius: var(--algm-radius);
  border-left: 4px solid var(--algm-or);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  min-width: 240px;
  animation: algmFadeIn 0.25s ease;
}
.algm-bv-toast--error {
  background: var(--algm-erreur);
}
/* Variante admin : positionnement et taille légèrement différents */
.algm-bv-toast-container--admin {
  top: 36px;
  right: 24px;
  z-index: 99999;
}
.algm-bv-toast--lg {
  padding: 12px 18px;
  min-width: 260px;
}

/* ─── LoginView (page de connexion bénévole) ─── */

.algm-bv-login {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 16px;
  min-height: 50vh;
}

.algm-bv-login__card {
  background: var(--algm-blanc);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(32, 35, 70, 0.12);
  padding: 36px 32px;
  width: 100%;
  max-width: 420px;
  border-top: 4px solid var(--algm-or);
}

.algm-bv-login__header {
  text-align: center;
  margin-bottom: 24px;
}

.algm-bv-login__logo {
  font-family: Verdana, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--algm-bleu);
  letter-spacing: 1px;
}

.algm-bv-login__tagline {
  color: var(--algm-texte-muted);
  font-size: 13px;
  margin: 4px 0 0;
}

.algm-bv-login__title {
  font-family: Verdana, sans-serif;
  font-size: 1.1rem;
  color: var(--algm-bleu);
  margin: 0 0 20px;
  text-align: center;
}

.algm-bv-login__fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.algm-bv-login__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
}

.algm-bv-login__submit {
  background: var(--algm-or);
  color: var(--algm-bleu);
  border: none;
  border-radius: var(--algm-radius);
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  font-family: Verdana, sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}

.algm-bv-login__submit:hover {
  background-color: var(--algm-bleu);
  color: var(--algm-blanc);
}
.algm-bv-login__submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.algm-bv-login__footer {
  text-align: center;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.algm-bv-login__footer p {
  font-size: 13px;
  color: var(--algm-texte-muted);
  margin: 0;
}

.algm-bv-login__link {
  font-size: 13px;
  color: var(--algm-bleu);
  font-weight: 600;
  text-decoration: none;
}
.algm-bv-login__link:hover,
.algm-bv-login__link:focus-visible {
  text-decoration: underline;
}

/* ─── Phase 3.B — Génériques réutilisables ─── */

/* Titre de page (remplace le pattern h2.algm-bv-card__title hors carte) */
.algm-bv-page-title {
  font-family: Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--algm-bleu);
  margin: 0 0 16px;
}
.algm-bv-page-title--lg {
  margin-bottom: 20px;
}

/* Espacement vertical standard entre cartes principales */
.algm-bv-card--spaced {
  margin-bottom: 20px;
}

/* Variante carte sans padding interne (pour wrapper de tableau, header coloré pleine largeur, etc.).
 * overflow:hidden permet au contenu interne (header coloré, image, etc.) de respecter le border-radius. */
.algm-bv-card--flush {
  padding: 0;
  overflow: hidden;
}

/* Badge pill avec couleur de fond dynamique (depuis BDD : type de mission, équipe, pôle…).
 * Phase 5.11 : le background est désormais posé via :style="{'--type-couleur': item.couleur}"
 * et consommé par var(--type-couleur). Texte blanc par défaut. */
.algm-bv-color-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--algm-blanc);
  white-space: nowrap;
  background: var(--type-couleur, var(--algm-bleu));
}
/* Variante compacte (badge dans tableau, modale détail, etc.) */
.algm-bv-color-pill--sm {
  padding: 2px 10px;
  font-size: 11px;
}
.algm-bv-color-pill--xs {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 12px;
}

/* ─── Sous-onglets : bouton (manquait, anciennement géré par :style dynamique) ─── */
/* Utilisé dans .algm-bv-subtabs (ParcoursAdmin, BoiteAdmin, etc.).
 * Inactif : fond transparent, texte gris ; actif : fond bleu marine, texte or. */

.algm-bv-subtabs__btn {
  flex: 1;
  min-width: 140px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--algm-radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: #666;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.algm-bv-subtabs__btn:hover,
.algm-bv-subtabs__btn:focus-visible {
  background: rgba(32, 35, 70, 0.08);
  color: var(--algm-bleu);
}
.algm-bv-subtabs__btn--active {
  background: var(--algm-bleu);
  color: var(--algm-or);
}
.algm-bv-subtabs__btn--active:hover,
.algm-bv-subtabs__btn--active:focus-visible {
  background: var(--algm-bleu);
  color: var(--algm-or);
}

/* ─── Variantes stat-card pour KPIs admin (fond pâle au lieu de bleu marine) ─── */
/* Le `.algm-bv-stat-card` par défaut (front) a un fond bleu marine + chiffre or.
 * En admin, on a besoin de variantes selon le sens : neutre (blanc), avertissement (jaune), succès (vert). */

.algm-bv-stat-card--light {
  background: var(--algm-blanc);
  color: var(--algm-bleu);
  border: 1px solid #e5e5e5;
}
.algm-bv-stat-card--light .algm-bv-stat-card__value {
  color: var(--algm-bleu);
}
.algm-bv-stat-card--light .algm-bv-stat-card__label {
  color: var(--algm-texte-muted);
  opacity: 1;
}

.algm-bv-stat-card--warning {
  background: #fff3cd;
  border: 1px solid #f4d782;
}
.algm-bv-stat-card--warning .algm-bv-stat-card__value,
.algm-bv-stat-card--warning .algm-bv-stat-card__label {
  color: #856404;
  opacity: 1;
}

.algm-bv-stat-card--success {
  background: #d4edda;
  border: 1px solid #b8dec4;
}
.algm-bv-stat-card--success .algm-bv-stat-card__value,
.algm-bv-stat-card--success .algm-bv-stat-card__label {
  color: #155724;
  opacity: 1;
}

.algm-bv-stat-card--info {
  background: #cfe2ff;
  border: 1px solid #9ec5fe;
}
.algm-bv-stat-card--info .algm-bv-stat-card__value,
.algm-bv-stat-card--info .algm-bv-stat-card__label {
  color: #084298;
  opacity: 1;
}

/* État vide (aucune donnée) — par défaut padding 32px.
 * Flex column + align-items center pour empiler proprement
 * icône / texte / éventuel bouton CTA, peu importe les éléments
 * présents (certains empty states n'ont pas de bouton). */
.algm-bv-empty-state {
  text-align: center;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.algm-bv-empty-state--sm { padding: 24px; }
.algm-bv-empty-state--lg { padding: 40px; }

/* Bouton CTA d'un empty state (ex. "Voir les missions disponibles")
 * — espace explicite au-dessus pour le détacher du texte et padding
 * de la carte (32px) suffisant en bas pour ne pas coller au bord. */
.algm-bv-empty-state > .algm-bv-btn {
  margin-top: 12px;
}

.algm-bv-empty-state__icon {
  font-size: 32px;
  margin-bottom: 10px;
}
.algm-bv-empty-state__icon--lg { font-size: 36px; margin-bottom: 12px; }
.algm-bv-empty-state__icon--sm { font-size: 28px; margin-bottom: 8px; }

.algm-bv-empty-state__text {
  color: var(--algm-texte-muted);
  margin: 0;
  font-size: 13px;
}
/* Hint complémentaire sous le texte principal d'un empty state */
.algm-bv-empty-state__hint {
  color: #bbb;
  margin: 6px 0 0;
  font-size: 12px;
}

/* Bouton d'action destructive (désinscription, suppression) */
.algm-bv-btn-danger {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: var(--algm-radius);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.algm-bv-btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── Phase 3.B — DashboardView ─── */

.algm-bv-dashboard__profile-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.algm-bv-dashboard__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--algm-or);
  flex-shrink: 0;
  object-fit: cover;
}
.algm-bv-dashboard__profile-info {
  flex: 1;
  min-width: 0;
}
.algm-bv-dashboard__name {
  margin: 0 0 4px;
  color: var(--algm-bleu);
  font-family: Verdana, sans-serif;
  font-size: 1.1rem;
}
.algm-bv-dashboard__email {
  margin: 0 0 8px;
  color: var(--algm-texte-muted);
  font-size: 13px;
}

/* Progression niveau (XP) */
.algm-bv-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.algm-bv-progress__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--algm-bleu);
}
.algm-bv-progress__sub {
  font-size: 12px;
  color: var(--algm-texte-muted);
  margin-left: 6px;
}
.algm-bv-progress__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--algm-bleu);
}
.algm-bv-progress__bar {
  background: #f0f0f0;
  border-radius: var(--algm-radius);
  height: 12px;
  overflow: hidden;
}
/* Note : la barre de remplissage utilise un :style dynamique (largeur, couleur niveau) → Phase 5 */
.algm-bv-progress__legend {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 11px;
  color: var(--algm-texte-muted);
}
.algm-bv-progress__max {
  color: var(--algm-succes);
  font-weight: 600;
}

/* Badges (gamification) */
.algm-bv-badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.algm-bv-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 72px;
}
.algm-bv-badge__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f0f4ff;
  border: 2px solid var(--algm-bleu);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.algm-bv-badge__name {
  font-size: 10px;
  font-weight: 600;
  color: var(--algm-bleu);
  text-align: center;
  line-height: 1.2;
}
.algm-bv-badge__bonus {
  font-size: 10px;
  color: var(--algm-bleu);
  font-weight: 700;
}

/* ─── v1.7.0 — DashboardView refonte (« centre de pilotage personnel ») ─── */

/* Titre de section utilisé dans plusieurs blocs du dashboard */
.algm-bv-dash-title {
  font-family: Verdana, sans-serif;
  font-size: 0.95rem;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--algm-bleu);
  display: flex;
  align-items: center;
  gap: 8px;
}
.algm-bv-dash-title__count {
  background: var(--algm-or);
  color: var(--algm-bleu);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 0.75rem;
  font-weight: 700;
}
.algm-bv-dash-title__link {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--algm-bleu);
  text-decoration: none;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.algm-bv-dash-title__link:hover { text-decoration: underline; }

/* 1. Carte Bonjour (identité bénévole) ─────────────────────────────────────
 * v1.12.0 — Remplace l'ancienne .algm-bv-salut. Affiche avatar + prénom +
 * stats clés (rang / points / badges) + accès rapide profil et classement.
 * Plus de date du jour (information à faible valeur). */
.algm-bv-hello {
  background: linear-gradient(135deg, var(--algm-bleu) 0%, #2c2f5a 100%);
  color: var(--algm-blanc);
  border-radius: var(--algm-radius);
  padding: 20px 24px 18px;
  margin-bottom: 16px;
  border-bottom: 3px solid var(--algm-or);
}

.algm-bv-hello__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.algm-bv-hello__avatar {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--algm-or);
  color: var(--algm-bleu);
  border: 3px solid var(--algm-or);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: Verdana, sans-serif;
}
.algm-bv-hello__avatar--photo {
  background: var(--algm-blanc);
}
.algm-bv-hello__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.algm-bv-hello__avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.algm-bv-hello__main {
  min-width: 0;
  flex: 1;
}
.algm-bv-hello__hello {
  font-family: Verdana, sans-serif;
  font-size: 1.35rem;
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--algm-blanc);
  line-height: 1.2;
}
.algm-bv-hello__msg {
  font-size: 0.92rem;
  margin: 0;
  opacity: 0.9;
  line-height: 1.4;
}

/* Boutons d'action : Mon profil + Voir le classement ─────────────────────── */
.algm-bv-hello__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.algm-bv-hello__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--algm-transition), border-color var(--algm-transition), transform var(--algm-transition);
  min-height: 44px;
}
.algm-bv-hello__btn--primary {
  background: var(--algm-or);
  color: var(--algm-bleu);
  border-color: var(--algm-or);
}
.algm-bv-hello__btn--primary:hover {
  background: #f0c64a;
  border-color: #f0c64a;
  transform: translateY(-1px);
}
.algm-bv-hello__btn--secondary {
  background: transparent;
  color: var(--algm-blanc);
  border-color: rgba(255, 255, 255, 0.4);
}
.algm-bv-hello__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--algm-blanc);
  transform: translateY(-1px);
}
.algm-bv-hello__btn:focus-visible {
  outline: 2px solid var(--algm-or);
  outline-offset: 2px;
}
/* v1.12.0 — Icône SVG du bouton : hérite de la couleur du texte via
 * stroke="currentColor" côté HTML. Verrou flex-shrink pour éviter qu'elle
 * soit écrasée si le label déborde sur petit écran. */
.algm-bv-hello__btn-icon {
  flex-shrink: 0;
}

/* 2. Prochaine mission (hero) ────────────────────────────────────────────── */
.algm-bv-next-mission {
  background: var(--algm-blanc);
  border-radius: var(--algm-radius);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--algm-shadow);
  border-left: 4px solid var(--algm-or);
}
.algm-bv-next-mission__header {
  padding: 16px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.algm-bv-next-mission__label {
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--algm-bleu);
  font-weight: 700;
  letter-spacing: 1px;
}
.algm-bv-next-mission__countdown {
  background: var(--algm-bleu);
  color: var(--algm-blanc);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
}
.algm-bv-next-mission__body { padding: 12px 20px 20px; }
.algm-bv-next-mission__pole {
  display: inline-block;
  background: var(--algm-gris);
  color: var(--algm-bleu);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.algm-bv-next-mission__title {
  font-family: Verdana, sans-serif;
  font-size: 1.25rem;
  margin: 6px 0 12px;
  color: var(--algm-bleu);
}
.algm-bv-next-mission__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.algm-bv-next-mission__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
}
.algm-bv-next-mission__meta-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--algm-gris); border-radius: 50%;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.algm-bv-next-mission__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Liste des missions suivantes */
.algm-bv-next-mission__upcoming {
  border-top: 1px dashed var(--algm-gris-bord);
  padding: 12px 20px 16px;
  background: #FAFAFB;
}
.algm-bv-next-mission__upcoming-title {
  font-size: 0.78rem;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}
.algm-bv-upcoming-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--algm-gris-bord);
  font-size: 0.88rem;
}
.algm-bv-upcoming-item:last-child { border-bottom: none; }
.algm-bv-upcoming-item__date {
  background: var(--algm-bleu);
  color: var(--algm-blanc);
  border-radius: var(--algm-radius);
  width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 44px;
  font-family: Verdana, sans-serif;
}
.algm-bv-upcoming-item__day {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.algm-bv-upcoming-item__day:first-of-type {
  padding-top: 0.5em;
}
.algm-bv-upcoming-item__month {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}
.algm-bv-upcoming-item__info { flex: 1; min-width: 0; }
.algm-bv-upcoming-item__title { font-weight: 600; color: var(--algm-bleu); }
.algm-bv-upcoming-item__meta  { font-size: 0.8rem; color: #6B7280; }

/* 3. Actions à faire ─────────────────────────────────────────────────────── */
.algm-bv-action-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px;
  border-radius: var(--algm-radius);
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  margin-bottom: 8px;
}
.algm-bv-action-item:last-child { margin-bottom: 0; }
.algm-bv-action-item--info {
  background: #EFF6FF;
  border-color: #BFDBFE;
}
.algm-bv-action-item__icon {
  width: 36px; height: 36px; flex: 0 0 36px;
  background: var(--algm-or);
  color: var(--algm-bleu);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  font-weight: 700;
}
.algm-bv-action-item--info .algm-bv-action-item__icon {
  background: #2563EB;
  color: var(--algm-blanc);
}
.algm-bv-action-item__body { flex: 1; min-width: 0; }
.algm-bv-action-item__title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--algm-bleu);
  margin: 0 0 2px;
}
.algm-bv-action-item__desc {
  font-size: 0.85rem;
  color: #4B5563;
  margin: 0;
}

/* 4. Suggestions ─────────────────────────────────────────────────────────── */
.algm-bv-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.algm-bv-suggestion {
  border: 1px solid var(--algm-gris-bord);
  border-radius: var(--algm-radius);
  padding: 14px;
  cursor: pointer;
  background: var(--algm-blanc);
  transition: border-color var(--algm-transition), transform var(--algm-transition), box-shadow var(--algm-transition);
}
.algm-bv-suggestion:hover,
.algm-bv-suggestion:focus-visible {
  border-color: var(--algm-or);
  transform: translateY(-2px);
  box-shadow: var(--algm-shadow);
  outline: none;
}
.algm-bv-suggestion__match {
  font-size: 0.7rem;
  background: var(--algm-or);
  color: var(--algm-bleu);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 8px;
}
.algm-bv-suggestion__title {
  font-weight: 700;
  color: var(--algm-bleu);
  margin: 0 0 6px;
  font-size: 0.95rem;
}
.algm-bv-suggestion__meta {
  font-size: 0.82rem;
  color: #6B7280;
  margin: 0 0 10px;
  line-height: 1.5;
}
.algm-bv-suggestion__cta {
  font-size: 0.82rem;
  color: var(--algm-bleu);
  font-weight: 600;
}

/* 5. Mes chiffres en bref — variante 3 colonnes + bloc badges sous-jacent ── */
.algm-bv-stats-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 480px) {
  .algm-bv-stats-grid--3 { grid-template-columns: 1fr; }
}
.algm-bv-dash-badges {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--algm-gris-bord);
}
.algm-bv-dash-badges__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--algm-bleu);
  margin: 0 0 12px;
}
.algm-bv-dash-badges-empty {
  margin-top: 16px;
  padding: 14px;
  background: var(--algm-gris);
  border-radius: var(--algm-radius);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #6B7280;
}
.algm-bv-dash-badges-empty__icon { font-size: 1.4rem; }

/* Override : dans le dashboard, les badges peuvent s'élargir pour absorber
 * un nom long (« Première mission ») sur une seule ligne quand la place
 * est dispo, plutôt que d'imposer le wrap forcé par la largeur fixe 72px
 * de .algm-bv-badge (utilisée tel quel ailleurs, notamment ClassementView). */
.algm-bv-dash-badges .algm-bv-badge {
  width: auto;
  min-width: 72px;
  max-width: 120px;
}
.algm-bv-dash-badges .algm-bv-badge__name {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Responsive dashboard ──────────────────────────────────────────────────── */

/* ≤ 768px : tablette portrait — on commence à compacter */
@media (max-width: 768px) {
  /* 3 KPIs : 3 cartes restent acceptables, mais on accepte aussi 2 colonnes
   * sur les très petits écrans (≤480) via la règle déjà existante. */
  .algm-bv-stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ≤ 600px : smartphone — empilement vertical pour les blocs en ligne */
@media (max-width: 600px) {
  /* v1.12.0 — Carte Bonjour : avatar légèrement plus petit, stats inchangées
     (la grille 3 colonnes reste lisible), boutons sur 2 colonnes 1fr 1fr. */
  .algm-bv-hello {
    padding: 16px 16px 14px;
  }
  .algm-bv-hello__top {
    gap: 12px;
    margin-bottom: 14px;
  }
  .algm-bv-hello__avatar {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    font-size: 1.3rem;
  }
  .algm-bv-hello__hello { font-size: 1.15rem; }
  .algm-bv-hello__msg   { font-size: 0.88rem; }
  /* v1.12.0 — Sur mobile, les boutons d'action s'empilent verticalement
     pour éviter la troncature du label "Voir le classement" et offrir
     une surface tactile plus large. */
  .algm-bv-hello__actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .algm-bv-hello__btn { font-size: 0.9rem; padding: 12px 14px; }

  /* Hero prochaine mission */
  .algm-bv-next-mission__header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .algm-bv-next-mission__title { font-size: 1.1rem; }
  .algm-bv-next-mission__meta  { grid-template-columns: 1fr; }
  .algm-bv-next-mission__body  { padding: 12px 16px 16px; }
  .algm-bv-next-mission__upcoming { padding: 12px 16px 14px; }

  /* Titres de section : si un lien « Voir tout » est présent, il passe
   * sous le titre plutôt que d'écraser le titre. */
  .algm-bv-dash-title { flex-wrap: wrap; }
  .algm-bv-dash-title__link {
    margin-left: 0;
    flex-basis: 100%;
  }

  /* Actions à faire : empile (icône + texte) puis le bouton sous le bloc
   * pour éviter de tronquer la description sur écran étroit. */
  .algm-bv-action-item {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }
  .algm-bv-action-item__body { flex-basis: calc(100% - 46px); }
  .algm-bv-action-item .algm-bv-btn { margin-left: 46px; }

  /* Suggestions : 1 colonne pleine largeur */
  .algm-bv-suggestion-grid { grid-template-columns: 1fr; }

  /* Stats : 3 KPIs côte à côte restent OK jusqu'à ~480px (cf règle suivante) */
  .algm-bv-stats-grid--3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .algm-bv-stat-card { padding: 14px 8px; }
  .algm-bv-stat-card__value { font-size: 1.4rem; }
}

/* ≤ 480px : très petit écran — on bascule à 1 colonne pour les KPIs */
@media (max-width: 480px) {
  .algm-bv-stats-grid--3 { grid-template-columns: 1fr 1fr; }
  /* La 3ᵉ stat (Points XP) prend toute la largeur sous les 2 premières */
  .algm-bv-stats-grid--3 .algm-bv-stat-card:nth-child(3) {
    grid-column: 1 / -1;
  }
  .algm-bv-next-mission__countdown { font-size: 0.7rem; padding: 3px 8px; }
}

/* ─── Phase 3.B — MesMissionsView ─── */

/* Onglets toggle (À venir / Historique) */
.algm-bv-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: #f5f5f5;
  border-radius: var(--algm-radius);
  padding: 4px;
  width: fit-content;
}
/* Phase 5.2 — état actif/inactif des onglets. Bouton standard pour .algm-bv-tabs
 * et variante compacte injectée plus bas pour .algm-bv-tabs--sm. */
.algm-bv-tabs__btn {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: #666;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.algm-bv-tabs__btn:hover,
.algm-bv-tabs__btn:focus-visible {
  background: rgba(32, 35, 70, 0.08);
  color: var(--algm-bleu);
}
.algm-bv-tabs__btn--active,
.algm-bv-tabs__btn--active:hover,
.algm-bv-tabs__btn--active:focus-visible {
  background: var(--algm-bleu);
  color: var(--algm-or);
}

.algm-bv-mission-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.algm-bv-mission-row {
  padding: 14px 16px;
}
.algm-bv-mission-row__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.algm-bv-mission-row__main {
  flex: 1;
  min-width: 0;
}
.algm-bv-mission-row__title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.algm-bv-mission-row__title {
  margin: 0;
  color: var(--algm-bleu);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: Verdana, sans-serif;
}
.algm-bv-mission-row__meta {
  margin: 0;
  color: var(--algm-texte-muted);
  font-size: 12px;
}
.algm-bv-mission-row__meta + .algm-bv-mission-row__meta {
  margin-top: 2px;
}
.algm-bv-mission-row__pole {
  margin: 3px 0 0;
  color: var(--algm-texte-muted);
  font-size: 12px;
}
.algm-bv-mission-row__address-sub {
  color: var(--algm-texte-muted);
}
.algm-bv-mission-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.algm-bv-mission-row__points {
  color: var(--algm-bleu);
  font-weight: 700;
  font-size: 13px;
}

/* ─── Phase 3.B — ClassementView ─── */

.algm-bv-rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.algm-bv-rank-row {
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--algm-blanc);
  border: 1px solid #f0f0f0;
}
/* Variantes podium et "me" : voir Phase 5.7 plus bas. */

.algm-bv-rank-row__rank {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  background: #f0f0f0;
  color: #666;
}
/* Variantes médaille top 3 : voir Phase 5.7 plus bas. */

.algm-bv-rank-row__main {
  flex: 1;
  min-width: 0;
}
.algm-bv-rank-row__name-line {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.algm-bv-rank-row__display-name {
  font-weight: 700;
  color: var(--algm-bleu);
  font-size: 0.9rem;
}
.algm-bv-rank-row__you {
  font-size: 10px;
  background: var(--algm-or);
  color: var(--algm-bleu);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
}
.algm-bv-rank-row__sub {
  font-size: 11px;
  color: var(--algm-texte-muted);
  margin-top: 2px;
}
.algm-bv-rank-row__points {
  text-align: right;
  flex-shrink: 0;
}
.algm-bv-rank-row__pts-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--algm-bleu);
}
.algm-bv-rank-row__pts-label {
  font-size: 10px;
  color: var(--algm-texte-muted);
}

/* ─── Phase 3.C — Génériques M6 (réutilisables) ─── */

/* Barre de filtres horizontale (recherche + selects + checkbox) */
.algm-bv-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* Wrapper input recherche avec icône loupe absolute */
.algm-bv-search {
  flex: 1;
  min-width: 180px;
  position: relative;
}
.algm-bv-search__icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
  opacity: 0.6;
}
.algm-bv-search__input {
  width: 100%;
  padding: 8px 30px 8px 12px;
  border: 1px solid #ddd;
  border-radius: var(--algm-radius);
  font-size: 12px;
  box-sizing: border-box;
  outline: none;
  font-family: inherit;
  transition: border-color var(--algm-transition);
}
.algm-bv-search__input:focus,
.algm-bv-search__input:focus-visible {
  border-color: var(--algm-bleu);
}

/* Grille responsive de cartes (Outils, Contacts, et plus tard Missions) */
.algm-bv-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* Modifier carte avec padding standard (16px tout autour) */
.algm-bv-card--padded {
  padding: 16px;
}

/* Badge pôle (Outils/Contacts/FAQ). Variante --commun = pôle commun (mis en avant) */
.algm-bv-pole-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: #f0f0f0;
  color: #555;
  font-weight: 400;
}
.algm-bv-pole-badge--commun {
  background: var(--algm-bleu);
  color: var(--algm-or);
  font-weight: 700;
}
.algm-bv-pole-badge--xs {
  font-size: 10px;
}

/* ─── Phase 3.C — OutilsViewFront ─── */

.algm-bv-outil-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.algm-bv-outil-card__title {
  font-weight: 700;
  color: var(--algm-bleu);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.algm-bv-outil-card__icon {
  flex-shrink: 0;
}
.algm-bv-outil-card__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.algm-bv-outil-card__description {
  font-size: 12px;
  color: #555;
  line-height: 1.5;
  flex: 1;
}
.algm-bv-outil-card__link {
  display: inline-block;
  color: var(--algm-bleu);
  font-size: 12px;
  text-decoration: none;
  font-weight: 600;
  padding: 6px 0;
}
.algm-bv-outil-card__link:hover,
.algm-bv-outil-card__link:focus-visible {
  text-decoration: underline;
}
.algm-bv-outil-card__footer {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  font-size: 11px;
  flex-wrap: wrap;
}
.algm-bv-outil-card__type {
  color: var(--algm-texte-muted);
}

/* ─── Phase 3.C — ContactsViewFront ─── */

.algm-bv-contact-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.algm-bv-contact-card__name {
  font-weight: 700;
  color: var(--algm-bleu);
  font-size: 0.95rem;
}
.algm-bv-contact-card__role {
  font-size: 12px;
  color: var(--algm-texte-muted);
  font-style: italic;
  margin-top: 2px;
}
.algm-bv-contact-card__details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
}
.algm-bv-contact-card__link {
  color: var(--algm-bleu);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.algm-bv-contact-card__link--ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}
.algm-bv-contact-card__link:hover,
.algm-bv-contact-card__link:focus-visible {
  text-decoration: underline;
}
.algm-bv-contact-card__email-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.algm-bv-contact-card__availability {
  color: var(--algm-texte-muted);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.algm-bv-contact-card__footer {
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

/* ─── Phase 3.C — FaqViewFront ─── */

.algm-bv-faq-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.algm-bv-faq-section__title {
  margin: 0 0 10px;
  color: var(--algm-bleu);
  font-family: Verdana, sans-serif;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.algm-bv-faq-section__badge {
  background: var(--algm-bleu);
  color: var(--algm-or);
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.algm-bv-faq-section__count {
  color: var(--algm-texte-muted);
  font-size: 11px;
  font-weight: 400;
}
.algm-bv-faq-section__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.algm-bv-faq-item {
  overflow: hidden;
  padding: 0;
}
.algm-bv-faq-item__header {
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.algm-bv-faq-item__chevron {
  font-size: 13px;
  /* Icône décorative : or de marque conservé (WCAG ne s'applique pas aux
   * éléments purement décoratifs/illustratifs). */
  color: var(--algm-or);
  flex-shrink: 0;
  transition: transform 0.15s;
}
/* Note : rotation du chevron via :style → Phase 5 */
.algm-bv-faq-item__question {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--algm-bleu);
  font-size: 14px;
}
.algm-bv-faq-item__body {
  padding: 14px 16px 14px 38px;
  color: #555;
  font-size: 13px;
  line-height: 1.6;
  border-top: 1px solid #f5f5f5;
}
.algm-bv-faq-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed #f0f0f0;
}
.algm-bv-faq-item__date {
  font-size: 11px;
  color: var(--algm-texte-muted);
  font-style: italic;
}
.algm-bv-faq-item__votes {
  display: flex;
  align-items: center;
  gap: 8px;
}
.algm-bv-faq-item__vote-prompt {
  font-size: 11px;
  color: var(--algm-texte-muted);
}
.algm-bv-faq-item__thanks {
  margin-top: 6px;
  font-size: 11px;
  color: var(--algm-bleu);
  text-align: right;
  font-style: italic;
}
/* Note : boutons de vote 👍/👎 — bg/color/border conditionnel selon mon_vote → Phase 5 */

/* ─── Phase 3.C — BoiteAOutilsView (parent onglet) ─── */

.algm-bv-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: #f5f5f5;
  padding: 4px;
  border-radius: 10px;
  flex-wrap: wrap;
}
/* Note : style des sous-onglets actif/inactif → Phase 5 (classes conditionnelles) */
.algm-bv-subtabs__icon {
  margin-right: 5px;
}

/* ─── Phase 3.D — Génériques formulaire ─── */

/* Hint sous un titre de section (description courte gris) */
.algm-bv-form-hint {
  color: var(--algm-texte-muted);
  font-size: 12px;
  margin: 0 0 12px;
}
.algm-bv-form-hint--tight { margin-bottom: 14px; }

/* Variante input plus compact (utilisé dans formulaire mot de passe) */
.algm-bv-input--sm {
  padding: 9px 12px;
  font-size: 13px;
}

/* Grille 2 colonnes pour formulaire (ex. nouveau / confirmer mot de passe) */
.algm-bv-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Stack de fields (column gap standard) */
.algm-bv-form-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Footer d'actions (bouton + éventuel feedback à gauche) */
.algm-bv-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}
.algm-bv-form-saved {
  color: var(--algm-succes);
  font-size: 13px;
  font-weight: 600;
}

/* ─── Phase 3.D — ProfilView ─── */

.algm-bv-profile__identity-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Bloc photo (column avec photo + erreur éventuelle) */
.algm-bv-profile__photo {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.algm-bv-profile__photo-wrapper {
  position: relative;
  cursor: pointer;
}
.algm-bv-profile__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--algm-or);
  object-fit: cover;
  display: block;
}
/* Overlay de chargement pendant l'upload */
.algm-bv-profile__photo-loading {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.algm-bv-profile__photo-loading-text {
  color: var(--algm-blanc);
  font-size: 10px;
  font-weight: 700;
}
.algm-bv-profile__photo-error {
  color: var(--algm-erreur);
  font-size: 10px;
  margin: 0;
  max-width: 80px;
  text-align: center;
  line-height: 1.3;
}
.algm-bv-profile__photo-input {
  display: none;
}

/* Bloc info (nom + email + badges) */
.algm-bv-profile__info {
  flex: 1;
  min-width: 0;
}
.algm-bv-profile__name {
  margin: 0 0 4px;
  color: var(--algm-bleu);
  font-family: Verdana, sans-serif;
  font-size: 1.1rem;
}
.algm-bv-profile__email {
  margin: 0 0 8px;
  color: var(--algm-texte-muted);
  font-size: 13px;
}
.algm-bv-profile__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.algm-bv-profile__separator {
  color: var(--algm-texte-muted);
  font-size: 12px;
}
.algm-bv-profile__pole {
  color: var(--algm-texte-muted);
  font-size: 12px;
}
.algm-bv-profile__pole-bonus {
  background: var(--algm-or);
  color: var(--algm-bleu);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}
.algm-bv-profile__points {
  color: var(--algm-bleu);
  font-weight: 700;
  font-size: 13px;
}
.algm-bv-profile__photo-hint {
  margin: 8px 0 0;
  font-size: 10px;
  color: #ccc;
}

/* Liste des compétences (boutons toggle) */
.algm-bv-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Note : état actif/inactif des boutons compétence → Phase 5 */

.algm-bv-skill-count {
  color: var(--algm-texte-muted);
  font-size: 11px;
  margin: 10px 0 0;
}

/* Table des disponibilités (jours × créneaux) */
.algm-bv-availability-wrap {
  overflow-x: auto;
}
.algm-bv-availability-table {
  /* table-layout: fixed → toutes les colonnes-jours partagent la largeur restante
   * à parts égales, ce qui garantit l'alignement vertical entre l'en-tête de
   * jour (« Lun », « Mar »…) et la cellule juste en dessous. Sans ça, la
   * première colonne (Matin/Après-midi/Soir) prend autant que son contenu le
   * plus large, et les colonnes-jours sont dimensionnées différemment selon
   * leur contenu, créant un décalage visuel entre header et cellule. */
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  min-width: 360px;
  font-size: 13px;
}
/* Première colonne (labels de créneau) : largeur fixe, alignement gauche */
.algm-bv-availability-table th:first-child,
.algm-bv-availability-table td:first-child {
  width: 100px;
  padding: 6px 8px;
  text-align: left;
}
/* Colonnes-jours : largeur égale (auto-distribuée par table-layout: fixed),
 * contenu centré horizontalement et verticalement */
.algm-bv-availability-table th + th,
.algm-bv-availability-table td + td {
  text-align: center;
  vertical-align: middle;
  padding: 4px;
}
.algm-bv-availability-table th {
  background: #f5f5f5;
  color: var(--algm-bleu);
  font-weight: 600;
}
.algm-bv-availability-table th + th {
  text-transform: capitalize;
}
.algm-bv-availability-table td:first-child {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  text-transform: capitalize;
}
/* Bouton toggle d'une cellule du tableau (1 jour × 1 créneau).
 * En inline-block, on profite du `text-align: center` du td parent pour
 * centrer horizontalement, et `vertical-align: middle` pour aligner
 * verticalement. Pas de margin: auto + display: block (qui interagit
 * mal avec certains user-agents en contexte tableau). */
.algm-bv-availability-cell {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  background: #f0f0f0;
  color: #ccc;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  line-height: 32px;
  text-align: center;
  box-sizing: border-box;
}
.algm-bv-availability-cell:hover,
.algm-bv-availability-cell:focus-visible {
  background: #e0e0e8;
  outline: none;
}
.algm-bv-availability-cell--active {
  background: var(--algm-bleu);
  color: var(--algm-or);
  font-weight: 700;
}
.algm-bv-availability-cell--active:hover,
.algm-bv-availability-cell--active:focus-visible {
  background: #2c2f56;
}

/* ─── Vue mobile : disponibilités carte par jour ─────────────────────────── */
/* Affichée uniquement ≤ 640px (toggle dans responsive.css). Chaque jour est
 * une carte contenant 3 boutons toggle plein-largeur (matin / après-midi / soir).
 * Avantage vs. tableau : cibles tactiles 48px+, pas de scroll horizontal,
 * libellés explicites des créneaux. */
.algm-bv-availability-cards {
  display: none; /* visible ≤ 640px via responsive.css */
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.algm-bv-availability-day {
  border: 1px solid var(--algm-gris-bord);
  border-radius: var(--algm-radius);
  padding: 10px 12px;
  background: var(--algm-blanc);
}

.algm-bv-availability-day__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--algm-bleu);
  font-family: Verdana, sans-serif;
  margin-bottom: 8px;
}

.algm-bv-availability-day__slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* Bouton toggle d'un créneau dans une carte jour */
.algm-bv-availability-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  min-height: 56px;
  padding: 8px 4px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #fafafa;
  color: #666;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.algm-bv-availability-slot:hover,
.algm-bv-availability-slot:focus-visible {
  border-color: #c0c0c8;
  outline: none;
}
.algm-bv-availability-slot--active {
  background: var(--algm-bleu);
  border-color: var(--algm-bleu);
  color: var(--algm-or);
}
.algm-bv-availability-slot--active:hover,
.algm-bv-availability-slot--active:focus-visible {
  background: #2c2f56;
  border-color: #2c2f56;
}
.algm-bv-availability-slot__icon {
  font-size: 18px;
  line-height: 1;
}
.algm-bv-availability-slot__label {
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
}
.algm-bv-availability-slot__check {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--algm-bleu);
}

/* Compteur sous la grille (commun aux deux vues) */
.algm-bv-availability-counter {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--algm-texte-muted);
  font-style: italic;
}

/* ─── v1.7.0 — ProfilView refonte (3 onglets internes + barre sticky) ─── */

/* Wrapper de la page profil (réservé pour padding bottom à cause de la sticky bar) */
.algm-bv-profile {
  padding-bottom: 100px;
}

/* Header profil (toujours visible) */
.algm-bv-profile-header {
  background: linear-gradient(135deg, var(--algm-bleu) 0%, #2c2f5a 100%);
  border-radius: var(--algm-radius);
  color: var(--algm-blanc);
  padding: 22px 24px;
  margin-bottom: 14px;
  display: flex;
  gap: 20px;
  align-items: center;
  border-bottom: 3px solid var(--algm-or);
}
.algm-bv-profile-header__avatar-wrap {
  position: relative;
  flex: 0 0 88px;
  width: 88px; height: 88px;
  cursor: pointer;
}
.algm-bv-profile-header__avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 3px solid var(--algm-or);
  object-fit: cover;
  display: block;
  background: #ddd;
}
.algm-bv-profile-header__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  font-family: Verdana, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--algm-bleu);
  background: var(--algm-or);
}
.algm-bv-profile-header__edit-badge {
  position: absolute;
  bottom: 0; right: 0;
  width: 28px; height: 28px;
  background: var(--algm-or); color: var(--algm-bleu);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  border: 2px solid var(--algm-bleu);
  pointer-events: none;
}
.algm-bv-profile-header__avatar-loading {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  color: var(--algm-blanc);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.algm-bv-profile-header__photo-error {
  color: var(--algm-erreur);
  font-size: 12px;
  text-align: center;
  margin: -8px 0 12px;
  padding: 6px 12px;
  background: #fef2f2;
  border-radius: 4px;
}
.algm-bv-profile-header__info { flex: 1; min-width: 0; }
.algm-bv-profile-header__name {
  font-family: Verdana, sans-serif;
  font-size: 1.3rem;
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--algm-blanc);
}
.algm-bv-profile-header__email {
  font-size: 0.85rem;
  opacity: 0.85;
  margin: 0 0 10px;
}
.algm-bv-profile-header__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Chips d'identité (niveau, pôle, points) */
.algm-bv-chip {
  background: rgba(255,255,255,0.15);
  color: var(--algm-blanc);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.algm-bv-chip--gold {
  background: var(--algm-or);
  color: var(--algm-bleu);
}

/* Barre de complétude */
.algm-bv-completeness { margin-top: 8px; }
.algm-bv-completeness__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  opacity: 0.9;
  margin-bottom: 4px;
  gap: 8px;
}
.algm-bv-completeness__bar {
  background: rgba(255,255,255,0.15);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.algm-bv-completeness__fill {
  background: var(--algm-or);
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.algm-bv-completeness__hint {
  font-size: 0.75rem;
  opacity: 0.85;
  margin: 4px 0 0;
}

/* Onglets internes du profil */
.algm-bv-profile-tabs {
  display: flex;
  background: var(--algm-blanc);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 14px;
  box-shadow: var(--algm-shadow);
  gap: 2px;
}
.algm-bv-profile-tab {
  flex: 1;
  padding: 12px 8px;
  background: transparent;
  border: none;
  color: #6B7280;
  font-family: var(--algm-font);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.algm-bv-profile-tab:hover { background: var(--algm-gris); }
.algm-bv-profile-tab--active {
  background: var(--algm-bleu);
  color: var(--algm-blanc);
}

/* Compétences avec icônes (chips toggle) */
.algm-bv-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: var(--algm-gris);
  color: #555;
  transition: background 0.15s, color 0.15s;
  font-family: var(--algm-font);
}
.algm-bv-skill-chip:hover { background: #e5e7eb; }
.algm-bv-skill-chip--active {
  background: var(--algm-bleu);
  color: var(--algm-or);
}
.algm-bv-skill-chip--active:hover {
  background: #2c2f5a;
  color: var(--algm-or);
}
.algm-bv-skill-chip__icon { font-size: 0.95rem; line-height: 1; }
.algm-bv-skill-chip__label { line-height: 1.2; }

/* Cartes de la zone "Mon compte" — visuellement plus austères */
.algm-bv-card--secure {
  background: #F9FAFB;
  border: 1px solid var(--algm-gris-bord);
}

/* v1.9.0 — Variante "zone de danger" : utilisée en bas de Mon profil → Mon compte
 * pour la zone "Supprimer mon compte" (cf. ADR-001). Visuellement séparée des
 * cartes neutres avec une bordure rouge marquée et un fond très légèrement
 * teinté pour signaler une action irréversible. */
.algm-bv-card--danger {
  background: #fef7f6;
  border: 1px solid #f5c6cb;
  border-left: 4px solid var(--algm-erreur);
}

/* v1.9.0 — Carte repliable : entête est un bouton plein largeur, le body
 * est masqué via v-show côté Vue. Padding réduit quand fermée pour rester
 * compacte. */
.algm-bv-card--collapsible {
  padding: 0;
}
.algm-bv-card--collapsible .algm-bv-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: inherit;
}
.algm-bv-card--collapsible .algm-bv-card__toggle:hover,
.algm-bv-card--collapsible .algm-bv-card__toggle:focus-visible {
  background: rgba(192, 57, 43, 0.04);
  outline: none;
}
.algm-bv-card--collapsible .algm-bv-card__chevron {
  font-size: 18px;
  line-height: 1;
  color: var(--algm-erreur);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.algm-bv-card--collapsible .algm-bv-card__chevron--open {
  transform: rotate(180deg);
}
.algm-bv-card--collapsible .algm-bv-card__body {
  padding: 0 20px 18px 20px;
  border-top: 1px solid rgba(245, 198, 203, 0.6);
  padding-top: 14px;
}

/* v1.9.4 — Bugfix mobile (cf. ADR-001) :
 * Le titre dans le toggle d'une carte repliable est un <span> inline qui
 * hérite du style global `.algm-bv-card__title` (font, couleur OK, MAIS
 * filet or + padding-bottom 8px + margin-bottom 16px). Dans un bouton-toggle
 * ce filet n'a aucun sens visuel et les marges décollent le texte de manière
 * incohérente avec le chevron aligné en flex.
 *
 * On annule ici les trois propriétés en jeu — les autres restent (couleur,
 * police, taille). Le `margin:0` inline du Vue ne suffisait pas car il ne
 * couvre pas `border-bottom` ni `padding-bottom`. */
.algm-bv-card--collapsible .algm-bv-card__toggle .algm-bv-card__title {
  border-bottom: 0;
  padding-bottom: 0;
  margin: 0;
}

/* Barre sticky d'enregistrement (le point clé : visibilité permanente
 * de l'état "modifications non enregistrées" pendant qu'on remplit) */
.algm-bv-save-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--algm-blanc);
  border-top: 2px solid var(--algm-or);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  z-index: 100;
  gap: 12px;
}
.algm-bv-save-bar--saved {
  border-top-color: var(--algm-succes);
}
.algm-bv-save-bar__status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.92rem;
}
.algm-bv-save-bar__status--unsaved { color: #B45309; }
.algm-bv-save-bar__status--saved   { color: var(--algm-succes); }
.algm-bv-save-bar__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #D97706;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15);
  animation: algm-pulse-orange 1.6s ease-in-out infinite;
}
.algm-bv-save-bar__status--saved .algm-bv-save-bar__dot {
  background: var(--algm-succes);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
  animation: none;
}
@keyframes algm-pulse-orange {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.25); }
}
.algm-bv-save-bar__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Responsive ≤ 768px : sur mobile, .algm-bv-bottomnav est affichée en
 * position: fixed; bottom: 0 (cf. responsive.css). La barre sticky
 * d'enregistrement doit donc être REMONTÉE au-dessus du bottomnav,
 * sinon ses boutons sont cachés sous la nav et le bénévole ne peut
 * plus enregistrer son profil — bug critique. Hauteur bottomnav ≈
 * 52px (min-height) + 6px (padding-top) + 8px (padding-bottom) + safe-area. */
@media (max-width: 768px) {
  .algm-bv-save-bar {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
  /* Et on augmente le padding-bottom de la page profil pour que le contenu
   * ne soit jamais masqué par les deux barres empilées. */
  .algm-bv-profile {
    padding-bottom: 200px;
  }
}

/* Responsive header + sticky bar ≤ 600px */
@media (max-width: 600px) {
  .algm-bv-profile-header {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 18px 18px;
  }
  .algm-bv-profile-header__avatar-wrap { align-self: center; }
  .algm-bv-profile-header__name { font-size: 1.15rem; }

  .algm-bv-profile-tabs {
    overflow-x: auto;
  }
  .algm-bv-profile-tab {
    min-width: 33%;
    font-size: 0.82rem;
    padding: 10px 6px;
  }

  .algm-bv-save-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
    gap: 8px;
  }
  /* Boutons empilés verticalement (Annuler au-dessus, Enregistrer en-dessous).
   * Évite que le label long « Enregistrer mes modifications » soit cassé en
   * deux lignes ou déborde du bord droit du viewport sur mobile.
   *
   * Note : on ne met PAS `width: 100%` sur les boutons ; ils héritent du
   * comportement `align-items: stretch` (défaut) du flex parent, qui les
   * étire déjà à la largeur du conteneur. Avec `width: 100% + padding` et
   * `box-sizing: content-box` (défaut sur <button>), le bouton dépasserait
   * son conteneur et créerait un scroll horizontal. */
  .algm-bv-save-bar__actions {
    flex-direction: column;
    gap: 6px;
  }
  .algm-bv-save-bar__actions .algm-bv-btn {
    flex: none;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* Formulaires : passe les grilles 2-colonnes (ex. mot de passe nouveau /
   * confirmer) en 1 colonne pour éviter le wrap des labels et des inputs
   * trop étroits. */
  .algm-bv-form-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ─── Phase 3.E — Génériques (header de page + éléments formulaire) ─── */

/* Header de page : titre + sub + bouton d'action à droite */
.algm-bv-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.algm-bv-page-header__sub {
  margin: 4px 0 0;
  color: var(--algm-texte-muted);
  font-size: 12px;
}
/* Le titre dans un header de page n'a pas besoin du margin-bottom standard */
.algm-bv-page-header .algm-bv-page-title {
  margin: 0;
}

/* Sélecteur inline minimal (style transparent, ex. saison dans le sub-title) */
.algm-bv-inline-select {
  border: none;
  background: transparent;
  color: var(--algm-bleu);
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

/* Variante carte avec liseré or à gauche (formulaires en accent) */
.algm-bv-card--accent-or {
  border-left: 4px solid var(--algm-or);
}

/* Champ de formulaire avec margin-bottom standard */
.algm-bv-form-field {
  margin-bottom: 14px;
}
.algm-bv-form-field--last {
  margin-bottom: 16px;
}

/* Texte "(optionnel)" en gris dans un label */
.algm-bv-label__optional {
  color: var(--algm-texte-muted);
  font-weight: 400;
}

/* Message d'erreur sous un champ de formulaire */
.algm-bv-form-error {
  color: var(--algm-erreur);
  font-size: 11px;
  margin: 3px 0 0;
}

/* Footer d'actions avec gap réduit (formulaire avec 2 boutons côte à côte) */
.algm-bv-form-actions--gap10 {
  gap: 10px;
}

/* ─── Phase 3.E — HeuresView (rows spécifiques) ─── */

/* La row d'heure réutilise .algm-bv-mission-row + __inner/__main/__title-line/__side
 * mais ajoute des éléments propres à l'affichage des heures. */

.algm-bv-heure-row__hours {
  font-weight: 700;
  color: var(--algm-bleu);
  font-size: 1rem;
}
.algm-bv-heure-row__separator {
  color: var(--algm-texte-muted);
  font-size: 12px;
}
.algm-bv-heure-row__motif {
  color: #555;
  font-size: 12px;
}
.algm-bv-heure-row__pole {
  color: var(--algm-texte-muted);
  font-size: 11px;
}
/* Badge "Auto" pour les heures issues de présences validées (vs déclaration manuelle) */
.algm-bv-heure-row__auto {
  background: #e8f4fd;
  color: #0066aa;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.algm-bv-heure-row__comment {
  margin: 4px 0 0;
  color: var(--algm-texte-muted);
  font-size: 12px;
  font-style: italic;
}
.algm-bv-heure-row__validator {
  margin: 4px 0 0;
  color: var(--algm-texte-muted);
  font-size: 11px;
}

/* Variante du __points (réutilisé) avec font-size 12px au lieu de 13px */
.algm-bv-mission-row__points--sm {
  font-size: 12px;
}

/* ─── Phase 3.F — Système modal réutilisable ─── */

/* Backdrop sombre, plein écran, centre la dialog */
.algm-bv-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Container blanc de la modale */
.algm-bv-modal__dialog {
  background: var(--algm-blanc);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.algm-bv-modal__dialog--md  { max-width: 540px; }
.algm-bv-modal__dialog--lg  { max-width: 640px; }
/* Variante avec body scrollable (utilisée pour feedback / charte) */
.algm-bv-modal__dialog--scroll {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* Header bleu marine avec liseré or en bas */
.algm-bv-modal__header {
  background: var(--algm-bleu);
  color: var(--algm-blanc);
  padding: 16px 22px;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--algm-or);
  flex-shrink: 0;
}

.algm-bv-modal__title {
  margin: 0;
  font-family: Verdana, sans-serif;
  font-size: 1rem;
  color: var(--algm-blanc);
}

/* Bouton de fermeture ✕ dans le header */
.algm-bv-modal__close {
  background: none;
  border: none;
  color: var(--algm-blanc);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.algm-bv-modal__close:hover,
.algm-bv-modal__close:focus-visible {
  opacity: 0.7;
}

/* Body de la modale */
.algm-bv-modal__body {
  padding: 22px 24px;
  color: #333;
  font-size: 13px;
  line-height: 1.6;
}
.algm-bv-modal__body--scroll {
  overflow-y: auto;
  flex: 1;
}

/* Footer (boutons d'action) */
.algm-bv-modal__footer {
  padding: 16px 24px;
  border-top: 1px solid #eee;
  background: #fafafa;
  border-radius: 0 0 12px 12px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.algm-bv-modal__footer--tight { padding: 14px 24px; }
/* Variante footer en colonne (utilisée pour la modale charte avec checkbox d'acceptation) */
.algm-bv-modal__footer--column {
  flex-direction: column;
  align-items: stretch;
}
.algm-bv-modal__footer-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Loader centré dans body de modale */
.algm-bv-modal__loading {
  text-align: center;
  color: var(--algm-texte-muted);
  padding: 30px;
}

/* Bouton de taille moyenne (utilisé dans modales) */
.algm-bv-btn--md {
  font-size: 13px;
  padding: 7px 16px;
}

/* Variante "neutre" (annulation, action secondaire) */
.algm-bv-btn--neutral {
  background: var(--algm-blanc);
  color: var(--algm-bleu);
  border: 2px solid #ccc;
  border-radius: var(--algm-radius);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 9px 20px;
  font-size: 13px;
  transition: all 0.15s;
}
.algm-bv-btn--neutral:hover,
.algm-bv-btn--neutral:focus-visible {
  border-color: #999;
}

/* Variante destructive (suppression définitive) */
.algm-bv-btn--destructive {
  background: var(--algm-erreur);
  color: var(--algm-blanc);
  border: none;
  border-radius: var(--algm-radius);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 9px 20px;
  font-size: 13px;
  transition: background 0.15s;
}
.algm-bv-btn--destructive:hover,
.algm-bv-btn--destructive:focus-visible {
  background: var(--algm-bleu);
  color: var(--algm-blanc);
}

/* ─── Modale de confirmation (variante de modal__dialog avec contenu centré) ─── */
.algm-bv-confirm-dialog {
  max-width: 420px;
  padding: 28px;
}
.algm-bv-confirm-dialog__icon {
  font-size: 32px;
  text-align: center;
  margin-bottom: 12px;
}
.algm-bv-confirm-dialog__title {
  margin: 0 0 8px;
  text-align: center;
  color: var(--algm-bleu);
  font-family: Verdana, sans-serif;
}
.algm-bv-confirm-dialog__text {
  text-align: center;
  color: #555;
  font-size: 13px;
  margin: 0 0 24px;
}
.algm-bv-confirm-dialog__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* État désactivé universel pour les .algm-bv-btn (évite les :style opacity inline) */
[class*="algm-bv-btn"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Phase 3.F — Info box (encadrés contextuels) ─── */

/* Encadré d'information (fond bleu clair, liseré or) — anti-pattern factorisé.
 * 7 occurrences dans MonParcoursView (étapes auto-validées par le système). */
.algm-bv-info-box {
  margin: 6px 0 0;
  color: var(--algm-bleu);
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
  background: #f0f4ff;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--algm-or);
}
/* Variante "célébration" (jaune pâle, pour annoncer une fin de parcours) */
.algm-bv-info-box--celebration {
  background: #fff8e1;
}

/* ─── Phase 3.F — MonParcoursView (header + steps + checkbox modal) ─── */

/* Carte d'en-tête de progression (titre + % + barre) */
.algm-bv-parcours-header {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.algm-bv-parcours-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.algm-bv-parcours-header__sub {
  margin: 0;
  color: var(--algm-texte-muted);
  font-size: 12px;
}
.algm-bv-parcours-header__percent {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--algm-bleu);
}
.algm-bv-parcours-header .algm-bv-card__title {
  margin: 0 0 4px;
  border: none;
  padding: 0;
}

/* Barre de progression générique (avec une fill qui prend la largeur dynamique) */
.algm-bv-progress-bar {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}
/* Phase 5.5 — fill de la barre de progression. Largeur via --progress-width,
 * couleur via --progress-color (par défaut or, mais surchargeable). */
.algm-bv-progress-bar__fill {
  height: 100%;
  width: var(--progress-width, 0%);
  background: var(--progress-color, var(--algm-or));
  transition: width 0.3s;
}

/* Liste des phases du parcours */
.algm-bv-phase-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.algm-bv-phase__title {
  margin: 0 0 6px;
  color: var(--algm-bleu);
  font-family: Verdana, sans-serif;
  font-size: 14px;
}
.algm-bv-phase__desc {
  margin: 0 0 10px;
  color: var(--algm-texte-muted);
  font-size: 11px;
  font-style: italic;
}
.algm-bv-phase__steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Carte d'étape. La couleur de border-left et l'opacité dépendent du status,
 * gérés par les modifiers --current/--done/--blocked/--pending (Phase 5.4).
 * Valeur par défaut (sans modifier) : bordure grise neutre. */
.algm-bv-step {
  padding: 14px 16px;
  border-left: 4px solid #e5e5e5;
}
.algm-bv-step--current  { border-left-color: var(--algm-or); }
.algm-bv-step--done     { border-left-color: #28a745; }
.algm-bv-step--blocked  { border-left-color: #c0392b; }
.algm-bv-step--pending  { border-left-color: #e5e5e5; opacity: 0.55; }
.algm-bv-step__inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.algm-bv-step__icon {
  font-size: 18px;
  flex-shrink: 0;
}
.algm-bv-step__main {
  flex: 1;
  min-width: 0;
}
.algm-bv-step__title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.algm-bv-step__title {
  font-weight: 600;
  color: var(--algm-bleu);
  font-size: 14px;
}
/* Badge de status d'étape (pilule colorée à droite du titre).
 * Migration Phase 5.4 : remplace la fonction JS statusStyle(s.status).
 * 5 variantes selon status (done/current/blocked/skipped/pending). */
.algm-bv-step__status-badge {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.algm-bv-step__status-badge--done    { background: #d4edda; color: #155724; }
.algm-bv-step__status-badge--current { background: var(--algm-or); color: var(--algm-bleu); }
.algm-bv-step__status-badge--blocked { background: #f8d7da; color: #721c24; }
.algm-bv-step__status-badge--skipped { background: #e2e3e5; color: #6c757d; }
.algm-bv-step__status-badge--pending { background: #f0f0f0; color: var(--algm-texte-muted); }

/* Badge "Optionnel" pour étapes non obligatoires */
.algm-bv-step__optional-badge {
  background: #cce5ff;
  color: #004085;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.algm-bv-step__description {
  margin: 4px 0 0;
  color: #555;
  font-size: 12px;
  line-height: 1.5;
}
/* Footer de step (badge name + XP reward) */
.algm-bv-step__rewards {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.algm-bv-step__reward {
  font-size: 11px;
  color: var(--algm-texte-muted);
}
/* Bouton CTA de step (compact) */
.algm-bv-step__cta {
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 14px;
}

.algm-bv-parcours-footnote {
  margin-top: 16px;
  font-size: 11px;
  color: var(--algm-texte-muted);
  font-style: italic;
  text-align: center;
}

/* ─── Phase 3.F — Modale charte (checkbox d'acceptation + section spécifique) ─── */

.algm-bv-modal-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--algm-bleu);
  cursor: pointer;
  margin-bottom: 12px;
}
.algm-bv-modal-acceptance__checkbox {
  margin-top: 3px;
  cursor: pointer;
}

/* ─── Phase 3.F — Modale feedback (formulaire spécifique) ─── */

.algm-bv-modal-intro {
  margin: 0 0 14px;
  color: #555;
}

/* Note étoiles (5 boutons côte à côte) */
.algm-bv-rating-stars {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
/* Phase 5.3 — bouton étoile (état inactif = blanc/gris, actif = or/bleu).
 * L'état actif est posé via :class="{'algm-bv-rating-stars__btn--active': note >= n}". */
.algm-bv-rating-stars__btn {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: var(--algm-radius);
  font-size: 18px;
  cursor: pointer;
  background: var(--algm-blanc);
  /* Phase 5.12 — était #bbb (ratio 1.9:1, échec AA) → #666 (5.7:1, AA OK).
   * Les étoiles inactives restent visuellement légères mais bien lisibles. */
  color: #666;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
  padding: 0;
}
/* Seule la couleur du caractère ★ change selon l'état. Le carré (fond + bordure)
 * reste neutre dans tous les cas : actif, hover, focus. L'outline natif du
 * navigateur sert d'indicateur d'accessibilité pour le focus clavier.
 *
 * IMPORTANT : on redéfinit `background` explicitement car le thème WordPress
 * actif (theme-algm-block/style.css l. 662) applique un
 * `background-color: var(--wp--preset--color--or)` à tous les `button:hover`.
 * Sans override, le carré devient or au survol. Le bloc-frère theme-algm
 * fait pareil (l. 628) avec un orange #fd7f28. */
.algm-bv-rating-stars__btn:hover,
.algm-bv-rating-stars__btn:focus,
.algm-bv-rating-stars__btn:focus-visible,
.algm-bv-rating-stars__btn--active {
  /* L'étoile ★ est une icône décorative, l'or de marque est conservé. */
  color: var(--algm-or);
  background: var(--algm-blanc);
}

/* Checkbox inline avec label "Je reviens" (style libre) */
.algm-bv-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--algm-bleu);
  cursor: pointer;
  margin-bottom: 14px;
}
.algm-bv-checkbox-label__input {
  cursor: pointer;
}

/* Variante input/textarea avec margin-bottom intégré (pour stack form simple) */
.algm-bv-input--mb { margin-bottom: 14px; }

/* ─── Phase 3.G — Extensions info-box (alertes chevauchement) ─── */

/* Variante warning (jaune pâle, bordure ambrée) — alertes adjacence */
.algm-bv-info-box--warning {
  background: #fff8e6;
  color: #7a5c00;
  border: 1px solid #ffe0a3;
  border-left: 3px solid var(--algm-or);
  font-style: normal;
  margin-bottom: 1em;
}
/* Variante danger (rouge pâle) — alertes chevauchement */
.algm-bv-info-box--danger {
  background: #fff3f3;
  color: #721c24;
  border: 1px solid #f5b3b3;
  border-left: 3px solid #dc3545;
  font-style: normal;
  margin-bottom: 1em;
}

/* Variante carte de la info-box (bordure complète gauche épaisse, padding plus large) */
.algm-bv-info-box--card {
  padding: 12px;
  border-radius: 8px;
  border-left-width: 4px;
  font-size: 13px;
  margin: 0;
}
.algm-bv-info-box__title {
  font-weight: 700;
  margin-bottom: 4px;
}

/* ─── Phase 3.G — MissionsView header + filtres ─── */

/* Compteur "X missions" dans le header */
.algm-bv-page-header__counter {
  font-size: 12px;
  color: var(--algm-texte-muted);
}

/* Switcher compact 2 boutons (cartes/calendrier) — variante de .algm-bv-tabs */
.algm-bv-tabs--sm {
  display: flex;
  background: #f5f5f5;
  border-radius: var(--algm-radius);
  padding: 3px;
  gap: 2px;
}
/* Phase 5.2 — variante compacte des boutons (cartes/calendrier) */
.algm-bv-tabs--sm .algm-bv-tabs__btn {
  padding: 5px 12px;
  font-size: 12px;
}

/* Input date dans la barre de filtres */
.algm-bv-filter-date {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: var(--algm-radius);
  font-size: 12px;
  background: var(--algm-blanc);
  outline: none;
  font-family: inherit;
}
.algm-bv-filter-date:focus,
.algm-bv-filter-date:focus-visible {
  border-color: var(--algm-bleu);
}

/* Bouton "Réinitialiser" filtres (variante du btn-danger en plus large) */
.algm-bv-btn-danger--md {
  padding: 7px 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* ─── Phase 3.G — Carte mission (vue cartes) ─── */

/* Carte mission cliquable avec bandeau type coloré en haut */
.algm-bv-mission-card {
  padding: 0;
  overflow: hidden;
  /* Flex column + height 100% pour que toutes les cartes d'une même
     ligne de grille aient la même hauteur et que le bouton du bas
     soit toujours aligné, quel que soit le volume de contenu. */
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Bandeau de type en haut de la carte. La couleur de fond vient de la CSS
 * variable --type-couleur posée via :style depuis m.type_couleur (Phase 5.5). */
.algm-bv-mission-card__banner {
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--type-couleur, var(--algm-bleu));
}
.algm-bv-mission-card__type {
  color: var(--algm-blanc);
  font-size: 12px;
  font-weight: 600;
}
.algm-bv-mission-card__pts {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}
.algm-bv-mission-card__body {
  padding: 14px;
  /* Le body remplit la hauteur restante et organise ses enfants en
     colonne pour pouvoir pousser le bouton tout en bas. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* Le bouton "S'inscrire" est toujours collé en bas de la carte,
   quelle que soit la quantité de meta/tags/jauge au-dessus. */
.algm-bv-mission-card__body > .algm-bv-btn--full:last-child {
  margin-top: auto;
}
.algm-bv-mission-card__title {
  margin: 0 0 6px;
  color: var(--algm-bleu);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: Verdana, sans-serif;
  line-height: 1.3;
}
.algm-bv-mission-card__meta {
  margin: 0 0 4px;
  color: var(--algm-texte-muted);
  font-size: 12px;
}
.algm-bv-mission-card__meta--last {
  margin-bottom: 10px;
}

/* Tags compétences (variante carte vs modale) */
.algm-bv-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.algm-bv-skill-tag {
  background: #f0f4ff;
  color: var(--algm-bleu);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.algm-bv-skill-tag-more {
  color: var(--algm-texte-muted);
  font-size: 10px;
}

/* Jauge bénévoles (utilisée dans la carte ET dans la modale, légère variation) */
.algm-bv-gauge {
  margin-bottom: 12px;
}
.algm-bv-gauge__row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 3px;
}
.algm-bv-gauge__label {
  color: var(--algm-texte-muted);
}
.algm-bv-gauge__bar {
  background: #f0f0f0;
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
}
/* Phase 5.5 — fill de la jauge. Largeur via CSS variable --gauge-width
 * (valeur dynamique imprévisible), couleur via modifier .algm-bv-taux--*
 * qui pose une CSS variable --taux-color. */
.algm-bv-gauge__fill {
  height: 100%;
  width: var(--gauge-width, 0%);
  background: var(--taux-color, var(--algm-bleu));
  transition: width 0.3s;
}

.algm-bv-gauge--lg .algm-bv-gauge__bar {
  height: 8px;
  border-radius: var(--algm-radius);
}
.algm-bv-gauge--lg .algm-bv-gauge__row {
  font-size: 12px;
  margin-bottom: 4px;
}
.algm-bv-gauge__label--bold {
  color: var(--algm-texte-muted);
  font-weight: 600;
}

/* Bouton plein largeur (utilisé dans la carte mission et la modale détail) */
.algm-bv-btn--full {
  width: 100%;
  justify-content: center;
}

/* ─── Phase 3.G — Vue calendrier ─── */

/* Bandeau de navigation mois (bleu marine, ‹ titre ›) */
.algm-bv-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  background: var(--algm-bleu);
  border-radius: 10px;
  padding: 12px 16px;
}
.algm-bv-cal-nav__btn {
  background: rgba(255, 255, 255, 0.15);
  color: var(--algm-blanc);
  border: none;
  border-radius: var(--algm-radius);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s;
}
.algm-bv-cal-nav__btn:hover,
.algm-bv-cal-nav__btn:focus-visible {
  background: rgba(255, 255, 255, 0.25);
}
.algm-bv-cal-nav__title {
  color: var(--algm-blanc);
  font-weight: 700;
  font-family: Verdana, sans-serif;
  font-size: 0.95rem;
}

/* Grille calendrier */
.algm-bv-cal {
  background: var(--algm-blanc);
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
}
.algm-bv-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f8f9fa;
  border-bottom: 1px solid #e5e5e5;
}
.algm-bv-cal__weekday {
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--algm-bleu);
}
.algm-bv-cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
/* Note : .algm-bv-cal__day a un :style dynamique (today highlight, borders) → Phase 5 */

/* Légende sous le calendrier */
.algm-bv-cal-legend {
  margin-top: 14px;
}
.algm-bv-cal-legend__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--algm-bleu);
  margin: 0 0 8px;
}
.algm-bv-cal-legend__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.algm-bv-cal-legend__item {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.algm-bv-cal-legend__name {
  font-weight: 600;
  color: var(--algm-bleu);
  font-size: 12px;
}
.algm-bv-cal-legend__date {
  color: var(--algm-texte-muted);
  font-size: 11px;
  margin-left: 6px;
}
.algm-bv-cal-empty {
  text-align: center;
  padding: 32px;
  color: var(--algm-texte-muted);
  font-size: 13px;
}

/* ─── Phase 3.G — Modale détail mission ─── */

/* Header de la modale détail. Couleur de fond = --type-couleur (Phase 5.5),
 * posée via :style depuis detail.type_couleur. */
.algm-bv-mission-modal__header {
  padding: 18px 20px;
  border-radius: 12px 12px 0 0;
  border-bottom: 3px solid var(--algm-or);
  background: var(--type-couleur, var(--algm-bleu));
}
.algm-bv-mission-modal__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.algm-bv-mission-modal__type-tag {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  margin-bottom: 4px;
}
.algm-bv-mission-modal__title {
  margin: 0;
  color: var(--algm-blanc);
  font-family: Verdana, sans-serif;
  font-size: 1rem;
  line-height: 1.3;
}
.algm-bv-mission-modal__close {
  background: none;
  border: none;
  color: var(--algm-blanc);
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.algm-bv-mission-modal__close:hover,
.algm-bv-mission-modal__close:focus-visible {
  opacity: 0.7;
}
.algm-bv-mission-modal__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.algm-bv-mission-modal__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 13px;
}

/* Pavé stat dans la modale (DATE, POINTS XP, DURÉE, etc.) */
.algm-bv-stat-tile {
  background: #f8f9fa;
  border-radius: var(--algm-radius);
  padding: 10px;
}
.algm-bv-stat-tile--full {
  grid-column: 1 / -1;
}
.algm-bv-stat-tile__label {
  color: var(--algm-texte-muted);
  font-size: 11px;
  margin-bottom: 2px;
}
.algm-bv-stat-tile__value {
  font-weight: 600;
  color: var(--algm-bleu);
}
.algm-bv-stat-tile__value--xp {
  font-weight: 700;
  color: var(--algm-bleu);
  font-size: 1.1rem;
}
.algm-bv-stat-tile__sub {
  font-size: 11px;
  color: var(--algm-texte-muted);
  margin-top: 2px;
}

/* Section avec label "COMPÉTENCES REQUISES" */
.algm-bv-section-label {
  font-size: 12px;
  color: var(--algm-texte-muted);
  margin-bottom: 6px;
}
.algm-bv-skill-tags--lg {
  gap: 5px;
  margin-bottom: 0;
}
.algm-bv-skill-tag--lg {
  background: var(--algm-bleu);
  color: var(--algm-or);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* Description de la mission dans la modale */
.algm-bv-mission-description {
  background: #f8f9fa;
  border-radius: var(--algm-radius);
  padding: 14px;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

/* ─── Phase 4.C — Loader et pagination (Annuaire admin) ─── */

.algm-bv-loading {
  text-align: center;
  padding: 48px;
  color: var(--algm-texte-muted);
  font-size: 13px;
}

.algm-bv-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px;
  border-top: 1px solid #f0f0f0;
}

.algm-bv-pagination__btn {
  padding: 5px 12px;
  border: 1px solid #ddd;
  border-radius: var(--algm-radius);
  background: var(--algm-blanc);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.algm-bv-pagination__btn:hover,
.algm-bv-pagination__btn:focus-visible {
  border-color: var(--algm-bleu);
}
.algm-bv-pagination__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.algm-bv-pagination__btn--active {
  background: var(--algm-bleu);
  color: var(--algm-or);
  border-color: var(--algm-bleu);
  font-weight: 700;
}

.algm-bv-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  align-items: center;
}

.algm-bv-search {
  flex: 1;
  min-width: 220px;
  position: relative;
  display: flex;
  align-items: center;
}

.algm-bv-search__icon {
  position: absolute;
  right: 12px;
  font-size: 13px;
  pointer-events: none;
  opacity: 0.6;
}

.algm-bv-search__input {
  width: 100%;
  padding: 8px 34px 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.algm-bv-search__input:focus,
.algm-bv-search__input:focus-visible {
  border-color: var(--algm-bleu);
}

/* ── Phase 5 : variables CSS pour styles dynamiques (à venir) ───────────────── */
/* .algm-bv-team-badge, .algm-bv-pole-tag, etc. */

/* ─── Phase 5.1 — Modifier d'erreur partagé inputs/select/textarea ─────────── */
/* Remplace les :style dynamiques `border-color: formErrors.X ? '#c0392b' : '#ddd'`
 * Le rouge reste visible au focus pour ne pas masquer l'état d'erreur. */

.algm-bv-input--error,
.algm-bv-textarea--error,
.algm-bv-select--error,
.algm-bv-input--error:focus,
.algm-bv-textarea--error:focus,
.algm-bv-select--error:focus,
.algm-bv-input--error:focus-visible,
.algm-bv-textarea--error:focus-visible,
.algm-bv-select--error:focus-visible {
  border-color: #c0392b;
}

/* ─── Phase 5.11 — Bouton désactivé via aria-disabled (PolesView delete) ───── */
/* Le bouton est styled comme désactivé (cursor + opacity) quand aria-disabled
 * est posé, sans utiliser :disabled (qui empêcherait le @click conditionnel). */
[aria-disabled="true"].algm-bv-icon-btn {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Phase 5.11 — Input avec fond highlighted (champ heures auto-rempli) ──── */
/* Quand le champ heures est rempli automatiquement depuis date_fin, fond bleu pâle */
.ab-input--auto-filled {
  background: #f0f7ff;
}

/* ─── Phase 5.11 — Options de portée notification (3 radios + selection) ──── */
/* Labels cliquables pour radio buttons et checkboxes dans NotificationsAdmin.
 * 3 variantes selon l'élément ciblé. */

/* Radio de portée (Tous les bénévoles / Pôles / Sélection nominative) */
.algm-bv-scope-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
}
.algm-bv-scope-option--active {
  border-color: var(--algm-bleu);
  background: #f7f8ff;
}

/* Chip de pôle ciblé (radius pilule) */
.algm-bv-pole-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
}
.algm-bv-pole-chip--active {
  border-color: var(--algm-or);
  background: #fffbe6;
}

/* Row de sélection utilisateur (liste scrollable) */
.algm-bv-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.algm-bv-user-row--selected {
  background: #fffbe6;
}

/* ─── Phase 5.11 — Preview color picker (SettingsView types de mission) ────── */
/* Petit carré 32×32 + pilule label + input color. Preview pour le form. */
.algm-bv-color-preview {
  width: 32px;
  height: 32px;
  border-radius: var(--algm-radius);
  border: 2px solid #eee;
  background: var(--type-couleur, var(--algm-bleu));
}

/* Bouton de la palette rapide (28×28 carrés colorés cliquables) */
.algm-bv-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: var(--type-couleur, var(--algm-bleu));
  transition: transform 0.1s;
  outline-offset: 2px;
}
.algm-bv-color-swatch--selected {
  outline: 3px solid var(--algm-bleu);
}
.algm-bv-color-swatch:hover {
  transform: scale(1.05);
}

/* ─── Phase 5.11 — Bouton de soumission validation heures (3 variantes) ────── */
/* Couleur change selon le statut sélectionné dans le form (refuse=rouge,
 * modifie=bleu, autres=or par défaut). Override hover du thème. */
.algm-bv-validation-btn,
.algm-bv-validation-btn:hover,
.algm-bv-validation-btn:focus-visible {
  background: var(--algm-or);
  color: var(--algm-bleu);
}
.algm-bv-validation-btn--refuse,
.algm-bv-validation-btn--refuse:hover,
.algm-bv-validation-btn--refuse:focus-visible {
  background: #c0392b;
  color: var(--algm-blanc);
}
.algm-bv-validation-btn--modifie,
.algm-bv-validation-btn--modifie:hover,
.algm-bv-validation-btn--modifie:focus-visible {
  background: #2980b9;
  color: var(--algm-blanc);
}

/* ─── Phase 5.11 — Filter pill (boutons-pilules cliquables, MissionsAdmin) ──── */
/* Trois boutons "Aucun / Lieu répertorié / Saisie libre" et autres groupes
 * similaires. Inactif = gris, actif = bleu marine + or. */
.algm-bv-filter-pill {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #f5f5f5;
  color: #555;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.algm-bv-filter-pill:hover,
.algm-bv-filter-pill:focus-visible {
  background: #ebebeb;
  border-color: #bbb;
}
.algm-bv-filter-pill--active,
.algm-bv-filter-pill--active:hover,
.algm-bv-filter-pill--active:focus-visible {
  background: var(--algm-bleu);
  color: var(--algm-or);
  border-color: var(--algm-bleu);
}

/* ─── Phase 5.11 — Segment pill (boutons segments ParcoursAdmin) ───────────── */
/* Inactif = fond bleu marine + texte blanc, actif = fond or + texte bleu.
 * Polarité inversée par rapport à filter-pill (mise en avant du segment actif). */
.algm-bv-segment-pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: var(--algm-bleu);
  color: var(--algm-blanc);
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.algm-bv-segment-pill:hover,
.algm-bv-segment-pill:focus-visible {
  background: #2c2f5a;
  color: var(--algm-blanc);
}
.algm-bv-segment-pill--active,
.algm-bv-segment-pill--active:hover,
.algm-bv-segment-pill--active:focus-visible {
  background: var(--algm-or);
  color: var(--algm-bleu);
}

/* ─── Phase 5.11 — Toggle switch (SettingsView, préférences notifications) ─── */
/* Toggle on/off avec curseur qui glisse de gauche à droite quand activé.
 * Override `background` au hover pour neutraliser button:hover du thème. */
.algm-bv-toggle-switch {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
  background: #ccc;
  padding: 0;
}
.algm-bv-toggle-switch:hover,
.algm-bv-toggle-switch:focus-visible {
  background: #ccc;
}
.algm-bv-toggle-switch--on,
.algm-bv-toggle-switch--on:hover,
.algm-bv-toggle-switch--on:focus-visible {
  background: var(--algm-bleu);
}
.algm-bv-toggle-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--algm-blanc);
  transition: left 0.2s;
}
.algm-bv-toggle-switch--on .algm-bv-toggle-switch__knob {
  left: 23px;
}

/* ─── Phase 5.11 — Stat-card en mode alerte (dashboard, heures attente) ────── */
/* Quand un KPI est en alerte (ex. heures en attente > 0), la carte passe en
 * fond ambre au lieu du bleu marine par défaut. */
.algm-bv-stat-card--alert {
  background: #856404;
  color: var(--algm-blanc);
}

/* ─── Phase 5.11 — Alerte dashboard (4 variantes selon type) ────────────────── */
/* Remplace alerteStyle() (DashboardAdmin) qui retournait une string CSS avec
 * bordure gauche colorée selon type. Réutilise .algm-bv-alert mais override
 * bordure et fond pour rester neutre par défaut. */
.algm-bv-dashboard-alert {
  background: var(--algm-blanc);
  border: 1px solid #e5e5e5;
  border-left-width: 4px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--algm-bleu);
}
.algm-bv-dashboard-alert--warning { border-left-color: #ffc107; }
.algm-bv-dashboard-alert--info    { border-left-color: #17a2b8; }
.algm-bv-dashboard-alert--success { border-left-color: #28a745; }
.algm-bv-dashboard-alert--danger  { border-left-color: #dc3545; }

/* ─── Phase 5.11 — Boutons de présence (Inscrits modale) ──────────────────── */
/* Trois boutons rapides "Présent / Absent / Inscrit" pour marquer la présence
 * d'un bénévole. Override `background` au hover pour neutraliser button:hover
 * du thème. :disabled gère automatiquement l'opacity (bouton actif = grisé). */

.algm-bv-presence-btn {
  padding: 3px 8px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
}
.algm-bv-presence-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.algm-bv-presence-btn--present,
.algm-bv-presence-btn--present:hover,
.algm-bv-presence-btn--present:focus-visible {
  background: #d4edda;
  color: #155724;
}
.algm-bv-presence-btn--absent,
.algm-bv-presence-btn--absent:hover,
.algm-bv-presence-btn--absent:focus-visible {
  background: #f8d7da;
  color: #721c24;
}
.algm-bv-presence-btn--inscrit,
.algm-bv-presence-btn--inscrit:hover,
.algm-bv-presence-btn--inscrit:focus-visible {
  background: #fff3cd;
  color: #856404;
}

/* ─── Phase 5.11 — Avatar bénévole (composant PhotoBenevole, mode lecture) ──── */
/* Cercle photo ou initiales, taille variable via --avatar-size posée en :style. */

.algm-bv-avatar {
  width: var(--avatar-size, 64px);
  height: var(--avatar-size, 64px);
  flex-shrink: 0;
}
.algm-bv-avatar__img {
  width: var(--avatar-size, 64px);
  height: var(--avatar-size, 64px);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--algm-or);
}
.algm-bv-avatar__initials {
  width: var(--avatar-size, 64px);
  height: var(--avatar-size, 64px);
  border-radius: 50%;
  background: var(--algm-bleu);
  color: var(--algm-or);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--avatar-size, 64px) / 3);
  font-weight: 700;
  border: 3px solid var(--algm-or);
}

/* ─── Phase 5.10 — Rangées de tableau zebra (admin, 12 occurrences) ────────── */
/* Factorise le pattern :style="{background:i%2===0?'#fff':'#fafafa',
 * borderBottom:'1px solid #f0f0f0'}" qui était dupliqué dans 12 tableaux
 * admin (AnnuaireView, ModalInscrits, MissionsAdmin, GamificationView,
 * SettingsView, HeuresAdminView, MentorshipView, ParcoursAdmin, etc.).
 *
 * L'alternance pair/impair est désormais gérée par :nth-child(even) côté
 * CSS, plus besoin d'index dans le template Vue. */

.algm-bv-table-row {
  border-bottom: 1px solid #f0f0f0;
  background: var(--algm-blanc);
}
tbody > .algm-bv-table-row:nth-child(even) {
  background: #fafafa;
}
/* Variante cliquable (cursor + hover discret) */
.algm-bv-table-row--clickable {
  cursor: pointer;
}
.algm-bv-table-row--clickable:hover {
  background: #f5f5f7;
}
/* Variantes top 3 du classement (overrident l'alternance) */
.algm-bv-table-row--gold,
tbody > .algm-bv-table-row--gold:nth-child(even)   { background: #fffbea; }
.algm-bv-table-row--silver,
tbody > .algm-bv-table-row--silver:nth-child(even) { background: #f9f9f9; }
.algm-bv-table-row--bronze,
tbody > .algm-bv-table-row--bronze:nth-child(even) { background: #fafafa; }
/* Ligne sélectionnée (parcours admin) — override l'alternance */
.algm-bv-table-row--selected,
tbody > .algm-bv-table-row--selected:nth-child(even) { background: #fffbeb; }

/* v1.13 — Bénévole en attente d'activation (statut 'nouveau') : fond ambré
 * léger + liseré or à gauche pour le repérer immédiatement dans l'annuaire.
 * Override l'alternance pair/impair pour rester visible quelle que soit la
 * position de la ligne. */
.algm-bv-table-row--pending,
tbody > .algm-bv-table-row--pending:nth-child(even) { background: #fffdf3; }
.algm-bv-table-row--pending > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--algm-or, #EAB93A);
}

/* ─── Phase 5.8 — Cellules calendrier (MissionsView vue calendrier) ─────────── */
/* Migre 3 :style dynamiques inline (jour, numéro, mission pill). */

.algm-bv-cal__day {
  min-height: 80px;
  padding: 6px 4px;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background: var(--algm-blanc);
}
/* Dernière colonne de la semaine : pas de bordure droite. Utilise :nth-child
 * pour éviter d'avoir à poser une classe en Vue. */
.algm-bv-cal__days > .algm-bv-cal__day:nth-child(7n) {
  border-right: none;
}
.algm-bv-cal__day--today {
  background: #fffbea;
}

.algm-bv-cal__day-number {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--algm-bleu);
}
.algm-bv-cal__day-number--today {
  color: var(--algm-bleu);
}

/* Pilule mission affichée dans la cellule (cliquable, couleur de type via var) */
.algm-bv-cal__day-mission {
  background: var(--type-couleur, var(--algm-bleu));
  color: var(--algm-blanc);
  border-radius: 4px;
  padding: 2px 5px;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Phase 5.8 — Préférences de notification (ProfilView) ───────────────────── */
/* Carte de préférence avec checkbox. Variante --featured pour les notifications
 * globales (mis en avant par bordure or + fond crème). */

.algm-bv-notif-pref {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  background: var(--algm-blanc);
}
.algm-bv-notif-pref--featured {
  border-color: var(--algm-or);
  background: #fffbe6;
}

/* ─── Phase 5.7 — Checkbox de filtre "Mes pôles" (factorisation 4× dupliqué) ─ */
/* Pilule cliquable avec checkbox interne, présente dans MissionsView,
 * OutilsView, ContactsView et FaqView avec exactement le même style.
 * État actif (filters.mes_poles=true) : fond bleu marine + texte or. */

.algm-bv-filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--algm-radius);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  background: #f5f5f5;
  color: #555;
  border: 1px solid #ddd;
}
.algm-bv-filter-checkbox--active {
  background: var(--algm-bleu);
  color: var(--algm-or);
  border-color: var(--algm-bleu);
}
.algm-bv-filter-checkbox__input {
  margin: 0;
  cursor: pointer;
}

/* Style :disabled du select (remplace :style="{opacity: cond ? 0.5 : 1}") */
.algm-bv-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Phase 5.7 — FAQ : chevron rotatif + boutons de vote ────────────────────── */

/* Chevron qui tourne quand l'item est expandé (remplace :style transform) */
.algm-bv-faq-item__chevron {
  transform: rotate(-90deg);
  transition: transform 0.15s;
  display: inline-block;
}
.algm-bv-faq-item__chevron--expanded {
  transform: rotate(0deg);
}

/* Boutons de vote utile / pas utile (paire de boutons sous chaque réponse).
 * Override explicite du background pour neutraliser button:hover du thème. */
.algm-bv-vote-btn {
  padding: 5px 12px;
  border: 1px solid #ddd;
  border-radius: var(--algm-radius);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  background: var(--algm-blanc);
  color: #555;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.algm-bv-vote-btn:hover,
.algm-bv-vote-btn:focus-visible {
  background: var(--algm-blanc);
  border-color: #bbb;
}
.algm-bv-vote-btn:disabled {
  cursor: wait;
}
/* Vote "utile" actif : fond or + texte bleu */
.algm-bv-vote-btn--up-active,
.algm-bv-vote-btn--up-active:hover,
.algm-bv-vote-btn--up-active:focus-visible {
  background: var(--algm-or);
  color: var(--algm-bleu);
  border-color: var(--algm-or);
  font-weight: 700;
}
/* Vote "pas utile" actif : fond bleu marine + texte or */
.algm-bv-vote-btn--down-active,
.algm-bv-vote-btn--down-active:hover,
.algm-bv-vote-btn--down-active:focus-visible {
  background: var(--algm-bleu);
  color: var(--algm-or);
  border-color: var(--algm-bleu);
  font-weight: 700;
}

/* ─── Phase 5.7 — Médailles top 3 + ligne "Vous" du classement ───────────────── */

/* Variantes de fond de ligne selon le rang (top 2) ou si c'est l'utilisateur.
 * Pas de --bronze pour la row : le code original ne distingue que les 2
 * premiers (or = #fffbea, argent = #fafafa). La médaille est elle-même
 * gérée par .algm-bv-rank-row__rank--bronze plus bas. */
.algm-bv-rank-row--gold { background: #fffbea; }
.algm-bv-rank-row--silver { background: #fafafa; }
.algm-bv-rank-row--me { border: 2px solid var(--algm-or); }

/* Médaille du rang (badge rond à gauche) — défaut gris #f0f0f0 hérité de la base */
.algm-bv-rank-row__rank--gold   { background: var(--algm-or); color: var(--algm-blanc); }
.algm-bv-rank-row__rank--silver { background: #aaa;            color: var(--algm-blanc); }
.algm-bv-rank-row__rank--bronze { background: #cd7f32;         color: var(--algm-blanc); }
/* Variante compacte (22×22 au lieu de 32×32) utilisée dans HeuresAdminView stats */
.algm-bv-rank-row__rank--sm {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

/* ─── Phase 5.6 — Système de pills de status (factorisation 5 fonctions JS) ── */
/* Remplace presenceStyle, niveauStyle (×2), roleLocalStyle, statutStyle —
 * 5 fonctions qui retournaient des strings CSS quasi-identiques (background +
 * color + padding/radius/font fixes). Base + 2 tailles + 10 modifiers couleur.
 *
 * Usage :
 *   <span class="algm-bv-status-pill algm-bv-status-pill--success">…</span>
 *   <span class="algm-bv-status-pill algm-bv-status-pill--md
 *                algm-bv-status-pill--info">…</span> (ProfilView niveau)
 *   <span class="algm-bv-status-pill algm-bv-status-pill--xs
 *                algm-bv-status-pill--amber">…</span> (ClassementView niveau)
 */

.algm-bv-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
/* Tailles : md (un cran plus grand), xs (compact, radius plus serré) */
.algm-bv-status-pill--md { padding: 3px 12px; font-size: 12px; }
.algm-bv-status-pill--xs { padding: 2px 8px; border-radius: 12px; }

/* Modifiers couleur sémantiques (réutilisables largement) */
.algm-bv-status-pill--success { background: #d4edda; color: #155724; }
.algm-bv-status-pill--danger  { background: #f8d7da; color: #721c24; }
.algm-bv-status-pill--warning { background: #fff3cd; color: #856404; }
.algm-bv-status-pill--info    { background: #cce5ff; color: #004085; }
.algm-bv-status-pill--neutral { background: #e2e3e5; color: #383d41; }
/* v5.x — Brouillon mission : pill ambrée volontairement plus visible que
   les autres modifiers "neutres" pour que les missions oubliées en
   brouillon attirent l'œil dans la liste admin. Ne pas réutiliser ce
   modifier pour un état "neutre" classique — préférer --neutral. */
.algm-bv-status-pill--neutral-light {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffe69c;
} /* brouillon mission */
.algm-bv-status-pill--dark    { background: #6c757d; color: var(--algm-blanc); } /* mission archivée */
.algm-bv-status-pill--fallback { background: #eee; color: #333; }

/* Variante warning avec bordure ambrée d'attention (statut "suppression en cours") */
.algm-bv-status-pill--warning-attention {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

/* Modifiers couleur spécifiques (niveaux + rôles locaux ALGM) */
.algm-bv-status-pill--purple  { background: #d6d8f7; color: var(--algm-bleu); }   /* expert */
.algm-bv-status-pill--amber   { background: #ffeaa7; color: #6c4a00; }            /* légende */
.algm-bv-status-pill--bleu-or { background: var(--algm-bleu); color: var(--algm-or); } /* referent */
.algm-bv-status-pill--purple-solid { background: #5a4ba0; color: var(--algm-blanc); } /* coach */
.algm-bv-status-pill--or-bleu { background: var(--algm-or); color: var(--algm-bleu); } /* benevole */

/* ─── Phase 5.5 — Modifiers utilitaires de taux (vert/jaune/rouge) ─────────── */
/* Posent une CSS variable --taux-color consommée par tout élément descendant
 * (texte via .algm-bv-taux-text, jauge via .algm-bv-gauge__fill, etc.).
 * Remplace la fonction JS tauxColor() qui retournait des hex en dur. */

/* Couleurs vives pour fond (jauges, badges remplis) */
.algm-bv-taux--full    { --taux-color: #28a745; } /* ≥ 100 % : vert vif */
.algm-bv-taux--ok      { --taux-color: #ffc107; } /* ≥ 50 %  : jaune vif */
.algm-bv-taux--low     { --taux-color: #dc3545; } /* < 50 %  : rouge vif */
/* Phase 5.10 — variantes admin */
.algm-bv-taux--neutral { --taux-color: #bbb; }    /* "pas de délai défini" */
/* Variantes texte foncé (compteurs admin avec texte coloré) — posent une
 * 2e CSS variable consommée par .algm-bv-taux-text--dark uniquement. */
.algm-bv-taux--full-text { --taux-color-text: #155724; } /* vert foncé */
.algm-bv-taux--ok-text   { --taux-color-text: #856404; } /* jaune foncé */
.algm-bv-taux--low-text  { --taux-color-text: #721c24; } /* rouge foncé */

.algm-bv-taux-text {
  color: var(--taux-color, inherit);
  font-weight: 600;
}
/* Variante texte foncé (compteurs admin où on veut un contraste plus élevé) */
.algm-bv-taux-text--dark {
  color: var(--taux-color-text, var(--taux-color, inherit));
  font-weight: 600;
}

/* Modifier de couleur pleine pour la jauge (sans dépendre du tauxClass)
 * — utilisé pour les jauges de stats où la couleur est fixe (bleu marine). */
.algm-bv-gauge__fill--solid {
  background: var(--algm-bleu);
}

/* Pastille couleur de type mission (10px ronde, calendrier compact) */
.algm-bv-mission-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--type-couleur, var(--algm-bleu));
  flex-shrink: 0;
}
/* Variante moyenne (14×14, table admin types mission) */
.algm-bv-mission-dot--sm {
  width: 14px;
  height: 14px;
}

/* Badge de type mission (pilule colorée, MesMissionsView) */
.algm-bv-mission-type-badge {
  background: var(--type-couleur, var(--algm-bleu));
  color: var(--algm-blanc);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}