/* /assets/styles/components.css */

/* Resilio Design System — Composants
   À importer APRÈS le fichier design-system.{app}.css correspondant.
   ─────────────────────────────────────────────────────────────────────────────
   Convention couleurs dans ce fichier :
   - var(--token) pour toutes les couleurs de base
   - var(--token-hover) pour les états :hover définis dans design-system.*.css
   - color-mix(in srgb, var(--token) X%, transparent) pour les opacités alpha inline
   - color-mix(in hsl, var(--token) X%, white) pour les teintes "light" (fin de gradient)
   Aucune valeur hsl()/hsla()/rgba()/hex hardcodée dans ce fichier.
*/

/* ==========================================================================
   Global Styles & Typography
   ========================================================================== */

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  color: var(--text-primary-color);
  line-height: 1.6;
}

h1, h2, h3 {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary-color);
  margin-bottom: var(--spacing-sm);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p {
  margin-bottom: var(--spacing-sm);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition-default);
}

a:hover {
  color: var(--accent-color);
}

/* ==========================================================================
   App Layout
   ========================================================================== */

.app-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Gradient de fond commun à toutes les pages (personnalisé par thème via --page-background) */
main {
  background: var(--page-background);
}

.content-wrapper {
  flex: 1;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.page-background {
  touch-action: none;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.resilio-navbar {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border-color);
    min-height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    padding-top: 0;
    padding-bottom: 0;
}

/* Variante light */
.resilio-navbar--light {
    background-color: var(--header-light-bg);
    backdrop-filter: blur(8px);
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 exige encore le préfixe */
    -webkit-backdrop-filter: blur(8px);
    border-bottom-color: var(--header-light-border);
}

/* Brand */
.resilio-navbar__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    text-decoration: none;
    margin-right: unset;
}

.resilio-navbar__brand-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color); /* bleu ciel sur fond marine */
    font-size: 1rem;
    flex-shrink: 0;
    transition: background-color var(--transition-default);
}

.header-logo {
    width: 32px;
    height: 32px;
}

.resilio-navbar__brand-text {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--header-text-color);
    transition: color var(--transition-default);
}

.resilio-navbar--light .resilio-navbar__brand-text {
    color: var(--header-light-text);
}

.resilio-navbar__brand:hover .resilio-navbar__brand-text {
    color: var(--secondary-color); /* bleu ciel au hover — var(--header-brand-hover) */
}

/* Séparateur + titre de page courante */
.resilio-navbar__page-sep {
    color: var(--border-color);
    margin: 0 0.25rem;
    font-size: 1rem;
    align-items: center;
}

.resilio-navbar__page-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary-color);
    align-items: center;
}

/* Toggler */
.resilio-navbar__toggler {
    border: none;
    color: var(--text-secondary-color);
    padding: 0.25rem 0.5rem;
}

.resilio-navbar--light .resilio-navbar__toggler {
    color: var(--header-light-text-muted);
}

/* Nav links */
.resilio-navbar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem !important;
    border-radius: var(--border-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--header-text-muted);
    transition: background-color var(--transition-default), color var(--transition-default);
    white-space: nowrap;
}

.resilio-navbar--light .nav-link {
    color: var(--header-light-text-muted);
}

.resilio-navbar .nav-link:hover,
.resilio-navbar .nav-link:focus {
    /* bleu ciel à 15% sur fond marine */
    background-color: color-mix(in srgb, var(--secondary-color) 15%, transparent);
    color: var(--secondary-color);
}

.resilio-navbar .nav-link.active {
    background-color: color-mix(in srgb, var(--secondary-color) 15%, transparent);
    color: var(--secondary-color);
    font-weight: 600;
}

/* Bouton profil utilisateur */
.resilio-navbar .nav-link.nav-link--user {
    background-color: var(--accent-color);
    color: var(--surface-color);
    border-radius: var(--border-radius-md);
}

.resilio-navbar .nav-link.nav-link--user:hover {
    background-color: var(--accent-color-hover);
    color: var(--surface-color);
}

/* Mobile */
@media (max-width: 991.98px) {
    .resilio-navbar .navbar-nav {
        padding: 0.5rem 0;
        gap: 0.25rem;
    }

    .resilio-navbar .nav-link {
        border-radius: var(--border-radius-md);
    }
}

/* Tenant brand */
.resilio-navbar__tenant-sep {
    color: var(--border-color);
    font-size: 0.875rem;
    margin: 0 0.5rem;
    align-items: center;
}

.resilio-navbar__tenant {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.resilio-navbar__tenant-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--border-radius-md);
    background-color: color-mix(in srgb, var(--secondary-color) 20%, transparent); /* bleu ciel à 20% */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Suffixe de portée — rendu APRÈS le tenant (« Ho-Oh Lore × Nexelio Administration »).
   Volontairement plus discret que le nom du tenant : c'est une qualification de portée,
   pas une identité. Décision de Guillaume, 2026-09-20 (intention 070). */
.resilio-navbar-suffix {
    align-items: center;
    margin-left: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary-color);
}

.resilio-navbar__tenant-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary-color);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resilio-navbar--light .resilio-navbar__tenant-name {
    color: var(--header-light-text);
}

/* Sous-barre */
.resilio-subbar {
    border-bottom: 1px solid var(--border-color);
    background-color: var(--surface-color);
}

.resilio-subbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.header-sub-actions {
    padding-left: 1rem;
    margin-left: 1rem;
    border-left: 1px solid var(--border-color);
}

header .btn-outline-secondary:hover {
  color: var(--header-bg);
  background-color: var(--header-text-muted);
}

header .btn-outline-danger {
  color: var(--license-urgent-bg);
  border-color: var(--license-urgent-bg);
}

header .btn-outline-danger:hover {
  color: var(--header-bg);
  background-color: var(--license-urgent-bg);
}

/* ==========================================================================
   Resilio Score Component
   ========================================================================== */

.resilio-score {
  text-align: right;
  margin-left: auto;
}

.resilio-score p {
  margin: 0;
}

.resilio-score .score-label {
  font-size: var(--font-size-small);
  color: var(--text-secondary-color);
}

.resilio-score .score-value {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Card Component
   ========================================================================== */

.card {
  background-color: var(--surface-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow-subtle);
  transition: var(--transition-default);
  border: 1px solid var(--border-color);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--box-shadow-medium);
}

.card-title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  margin-top: 0;
  margin-bottom: 0;
}

.card-content {
  color: var(--text-secondary-color);
  margin-bottom: auto;
}

/* ==========================================================================
   Button Component
   ========================================================================== */

.btn {
  display: inline-block;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: var(--transition-default);
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-subtle);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--surface-color);
}

.btn-primary:hover {
  background-color: var(--primary-color-hover);
}

.btn-secondary {
  background-color: var(--surface-color);
  color: var(--text-primary-color);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--muted-color);
}

.btn-success {
  background-color: var(--success-color);
  color: var(--surface-color);
}

.btn-success:hover {
  opacity: 0.9;
}

/* CTA accent (orange) */
.btn-accent {
  background-color: var(--accent-color);
  color: var(--surface-color);
}

.btn-accent:hover {
  background-color: var(--accent-color-hover);
}

/* ==========================================================================
   Badge Component
   ========================================================================== */

.badge {
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  border-radius: 9999px;
  text-transform: none;
  letter-spacing: normal;
}

/* Resilio Level Badges */
.badge-high {
  background-color: var(--resilio-high-color);
  color: var(--surface-color);
}

.badge-medium {
  background-color: var(--resilio-medium-color);
  color: var(--surface-color);
}

.badge-low {
  background-color: var(--resilio-low-color);
  color: var(--surface-color);
}

/* Skill Level Badges */
.badge-expert {
  background-color: var(--skill-expert-color);
  color: var(--surface-color);
}

.badge-master {
  background-color: var(--skill-master-color);
  color: var(--surface-color);
}

.badge-beginner {
  background-color: var(--skill-beginner-color);
  color: var(--surface-color);
}

/* ==========================================================================
   Role Components — SPEC 029 (référentiel de rôles, sélecteur, badges)
   ========================================================================== */

/* --- resilio-role-badge (Atom) --- */

.resilio-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--border-radius-full);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.resilio-role-badge-sm {
  padding: 3px 8px 3px 7px;
  font-size: 11px;
}

.resilio-role-badge-membre {
  background-color: color-mix(in srgb, var(--resilio-role-membre-color) 12%, white);
  color: var(--resilio-role-membre-text);
  border: 1px solid color-mix(in srgb, var(--resilio-role-membre-color) 22%, transparent);
}

.resilio-role-badge-contenu {
  background-color: color-mix(in srgb, var(--resilio-role-contenu-color) 12%, white);
  color: var(--resilio-role-contenu-text);
  border: 1px solid color-mix(in srgb, var(--resilio-role-contenu-color) 22%, transparent);
}

.resilio-role-badge-manager {
  background-color: color-mix(in srgb, var(--resilio-role-manager-color) 12%, white);
  color: var(--resilio-role-manager-text);
  border: 1px solid color-mix(in srgb, var(--resilio-role-manager-color) 22%, transparent);
}

.resilio-role-badge-direction {
  background-color: color-mix(in srgb, var(--resilio-role-direction-color) 12%, white);
  color: var(--resilio-role-direction-text);
  border: 1px solid color-mix(in srgb, var(--resilio-role-direction-color) 22%, transparent);
}

.resilio-role-badge-admin {
  background-color: color-mix(in srgb, var(--resilio-role-admin-color) 12%, white);
  color: var(--resilio-role-admin-text);
  border: 1px solid color-mix(in srgb, var(--resilio-role-admin-color) 22%, transparent);
}

/* --- resilio-role-selector / resilio-role-grid (Molecule, radiogroup) --- */

.resilio-role-selector {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.resilio-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.resilio-role-grid-1 {
  grid-template-columns: 1fr;
}

@media (max-width: 767px) {
  .resilio-role-grid {
    grid-template-columns: 1fr;
  }
}

/* --- resilio-role-card (Molecule) --- */

.resilio-role-card {
  --rc-color: var(--resilio-role-membre-color);

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: 14px var(--spacing-sm);
  min-height: 44px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: var(--surface-color);
  transition: var(--transition-default);
  cursor: pointer;
}

.resilio-role-card-membre { --rc-color: var(--resilio-role-membre-color); }
.resilio-role-card-contenu { --rc-color: var(--resilio-role-contenu-color); }
.resilio-role-card-manager { --rc-color: var(--resilio-role-manager-color); }
.resilio-role-card-direction { --rc-color: var(--resilio-role-direction-color); }
.resilio-role-card-admin { --rc-color: var(--resilio-role-admin-color); }

.resilio-role-card:hover,
.resilio-role-card.is-hover {
  border-color: color-mix(in srgb, var(--rc-color) 45%, var(--border-color));
  box-shadow: var(--box-shadow-subtle);
  transform: translateY(-2px);
}

.resilio-role-card:has(input:checked),
.resilio-role-card.is-selected {
  border-color: var(--rc-color);
  background-color: color-mix(in srgb, var(--rc-color) 8%, var(--surface-color));
}

.resilio-role-card:has(input:focus-visible),
.resilio-role-card.is-focus {
  outline: 3px solid color-mix(in srgb, var(--secondary-color) 55%, transparent);
  outline-offset: 2px;
}

.resilio-role-card.is-disabled {
  background-color: var(--muted-color);
  border-style: dashed;
  opacity: 0.85;
  cursor: not-allowed;
}

.resilio-role-card-radio {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: var(--border-radius-full);
  border: 2px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surface-color);
  transition: var(--transition-default);
}

.resilio-role-card.is-selected .resilio-role-card-radio,
.resilio-role-card:has(input:checked) .resilio-role-card-radio {
  background-color: var(--rc-color);
  border-color: var(--rc-color);
}

.resilio-role-card-radio .bi {
  opacity: 0;
  transform: scale(0.5);
  transition: var(--transition-default);
  font-size: 12px;
}

.resilio-role-card.is-selected .resilio-role-card-radio .bi,
.resilio-role-card:has(input:checked) .resilio-role-card-radio .bi {
  opacity: 1;
  transform: scale(1);
}

.resilio-role-card-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--border-radius-md);
  background-color: color-mix(in srgb, var(--rc-color) 8%, transparent);
  color: var(--rc-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.resilio-role-card.is-selected .resilio-role-card-icon,
.resilio-role-card:has(input:checked) .resilio-role-card-icon {
  background-color: var(--rc-color);
  color: var(--surface-color);
}

.resilio-role-card-body {
  min-width: 0;
}

.resilio-role-card-title {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary-color);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.resilio-role-card-default {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--secondary-color);
  background-color: color-mix(in srgb, var(--secondary-color) 12%, transparent);
  border-radius: var(--border-radius-full);
  padding: 1px 6px;
  font-weight: var(--font-weight-semibold);
}

/* bascule 048 (RG-11 #1) : texte informatif => secondary. */
.resilio-role-card-desc {
  font-size: 13px;
  color: var(--text-secondary-color);
  margin-top: 2px;
}

/* bascule 048 (RG-11 #2) : idem. */
.resilio-role-card-locknote {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary-color);
  margin-top: var(--spacing-xs);
}

/* --- resilio-role-manager-auto (Molecule) --- */

.resilio-role-manager-auto {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-md);
  background-color: color-mix(in srgb, var(--resilio-role-manager-color) 8%, var(--surface-color));
  border: 1px solid color-mix(in srgb, var(--resilio-role-manager-color) 28%, transparent);
}

.resilio-role-manager-auto-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--border-radius-md);
  background-color: color-mix(in srgb, var(--resilio-role-manager-color) 16%, transparent);
  color: var(--resilio-role-manager-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* bascule 048 (RG-11 #10) : fond --muted-color, où secondary vaut 4,88 depuis D-1 bis.
   secondary — et non primary — parce que « Lecture seule » qualifie un état DÉSACTIVÉ :
   une pastille grise à texte neutre dit exactement cela. Les badges de rôle voisins portent
   leur propre couleur forte ; celui-ci doit rester en retrait. */
.resilio-role-manager-auto-readonly {
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary-color);
  background-color: var(--muted-color);
  border-radius: var(--border-radius-full);
  padding: 2px 8px;
  font-weight: var(--font-weight-semibold);
}

/* bascule 048 (RG-11 #11). L'occurrence nommée par l'item 060 : elle était à 2,76:1 sur un
   fond teinté. Fond = color-mix(--resilio-role-manager-color 8%, --surface-color), où
   secondary vaut 4,90 depuis D-1 bis => secondary. C'est une NOTE explicative : elle doit
   être lue (US-03) sans devenir le titre du bloc. Hiérarchie tenue par la graisse (400 vs
   600 des chips au-dessus) et par le conteneur. */
.resilio-role-manager-auto-note {
  font-size: 13px;
  color: var(--text-secondary-color);
  margin-top: 4px;
}

/* --- resilio-banner (Molecule, 3 tons : info / attention / verrouillage) --- */

.resilio-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  border: 1px solid transparent;
  font-size: var(--font-size-small);
}

.resilio-banner-info {
  background-color: color-mix(in srgb, var(--secondary-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--secondary-color) 30%, transparent);
  color: var(--text-on-success-bg);
}

.resilio-banner-warn {
  background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 32%, transparent);
  color: var(--text-on-warning-bg);
}

.resilio-banner-lock {
  background-color: var(--muted-color);
  border-color: var(--border-color);
  color: var(--text-secondary-color);
}

.resilio-banner-title {
  font-weight: var(--font-weight-semibold);
  color: inherit;
}

/* bascule 048 (RG-11 #12) : le fond dépend de la variante de ton (info / warn / lock) ; le
   pire cas est .resilio-banner-lock sur --muted-color, où secondary vaut 4,88 depuis D-1
   bis => secondary. `color: inherit` a été écarté : sur les variantes info et warn il
   donnerait au sous-texte les accents forts --text-on-success-bg / --text-on-warning-bg,
   aussi appuyés que le titre. Le ton est porté par le fond, la bordure et le titre. */
.resilio-banner-sub {
  font-size: 12px;
  color: var(--text-secondary-color);
  margin-top: 2px;
}

/* ==========================================================================
   User List & Detail — SPEC 029 v1.3, correction post-vérification
   (VERIFICATION.md, non-conformité n°2 : écran liste + fiche)
   ========================================================================== */

/* --- resilio-user-grouphead (liste, en-tête de groupement par équipe) --- */

.resilio-user-grouphead td {
  background-color: var(--muted-color);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.resilio-user-grouphead i {
  margin-right: var(--spacing-xs);
  color: var(--text-secondary-color);
}

/* --- resilio-user-mcard (liste, cartes mobiles empilées) --- */

.resilio-user-mcard {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: var(--surface-color);
  color: inherit;
  text-decoration: none;
}

.resilio-user-mcard + .resilio-user-mcard {
  margin-top: var(--spacing-xs);
}

.resilio-user-mcard:hover {
  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
}

/* --- resilio-user-detail-row (fiche utilisateur, grille dédiée) --- */

.resilio-user-detail-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color);
  align-items: start;
}

.resilio-user-detail-row:last-child {
  border-bottom: none;
}

.resilio-user-detail-row > *:first-child {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary-color);
}

.resilio-user-detail-row > *:nth-child(2) {
  font-size: var(--font-size-small);
  color: var(--text-primary-color);
}

@media (max-width: 767px) {
  .resilio-user-detail-row {
    grid-template-columns: 90px 1fr;
  }
}

/* ==========================================================================
   Page Header & Layout
   ========================================================================== */

.page-header {
  background-color: var(--background-soft);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--spacing-md);
}

.page-header .btn-secondary {
  margin-bottom: var(--spacing-md);
}

.page-header h1 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .grid-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Team Member Card
   ========================================================================== */

.team-member-card .card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  background-color: unset !important;
  border-bottom: unset !important;
}

.team-member-card .avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
}

.team-member-card .card-content {
  padding-top: 0;
}

.team-member-card .skills-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--muted-color);
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-xs);
}

/* ==========================================================================
   Company Card
   ========================================================================== */

.company-card {
  transition: var(--transition-default);
  border: 1px solid var(--border-color);
}

.company-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--box-shadow-medium);
}

.company-icon {
  font-size: 2.5rem;
  color: var(--accent-color);
}

.contact-vignette {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 50rem;
  font-size: 0.8rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   Indicators
   ========================================================================== */

.indicator {
  text-align: center;
}

.indicator-value {
  font-size: 1.5rem;
  font-weight: bold;
}

.indicator-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--text-secondary-color);
}

/* ==========================================================================
   Avatar Component
   ========================================================================== */

.avatar-container {
  border-radius: 9999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--accent-color);
  font-weight: var(--font-weight-semibold);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

.avatar-initials {
  text-transform: uppercase;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.app-footer {
    border-top: 1px solid var(--border-color);
    background-color: var(--surface-color);
    margin-top: auto;
    padding: 0 15px;
}

.app-footer__grid {
    padding: var(--spacing-lg) 0 var(--spacing-md);
}

.app-footer__brand-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--text-primary-color);
    margin-bottom: var(--spacing-xs);
    font-size: 1rem;
}

.app-footer__brand-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    object-fit: contain;
}

.app-footer__brand-desc {
    font-size: 0.875rem;
    color: var(--text-secondary-color);
    line-height: 1.6;
}

.app-footer__col-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary-color);
    margin-bottom: var(--spacing-sm);
}

.app-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.app-footer__links a {
    font-size: 0.875rem;
    color: var(--text-secondary-color);
    text-decoration: none;
    transition: color var(--transition-default);
}

.app-footer__links a:hover {
    color: var(--text-primary-color);
}

.app-footer__bottom {
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-sm) 0;
}

.app-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary-color);
}

.footer-heart {
    color: var(--footer-heart-color);
}

/* ==========================================================================
   Member Card Component (Organism)
   ========================================================================== */

.resilio-card-member {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--surface-color);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--box-shadow-subtle);
  transition: var(--transition-default);
}

.resilio-card-member:hover {
  transform: translateY(-4px);
  box-shadow: var(--box-shadow-medium);
}

/* Header Section */
.resilio-card-member-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.resilio-card-member-avatar {
  flex-shrink: 0;
}

.resilio-card-member-identity {
  flex: 1;
  min-width: 0;
}

.resilio-card-member-name {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary-color);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resilio-card-member-role {
  font-size: var(--font-size-small);
  color: var(--text-secondary-color);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges Section */
.resilio-card-member-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.resilio-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  border-radius: 9999px;
  transition: var(--transition-default);
}

.resilio-badge-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Badge "Partageur de savoir" */
.resilio-badge-sharer {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--resilio-high-color) 12%, transparent) 0%,
    color-mix(in srgb, var(--resilio-high-color) 8%, transparent) 100%);
  color: var(--text-on-success-bg);
  border: 1px solid color-mix(in srgb, var(--resilio-high-color) 20%, transparent);
}

.resilio-badge-sharer .resilio-badge-icon {
  fill: var(--resilio-high-color);
}

/* Badge "Membre clé à risque" */
.resilio-badge-risk {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--resilio-medium-color) 12%, transparent) 0%,
    color-mix(in srgb, var(--resilio-medium-color) 8%, transparent) 100%);
  color: var(--text-on-warning-bg);
  border: 1px solid color-mix(in srgb, var(--resilio-medium-color) 20%, transparent);
}

.resilio-badge-risk .resilio-badge-icon {
  fill: var(--resilio-medium-color);
}

/* Badge "À motiver" — bleu marine → bleu ciel */
.resilio-badge-motivation {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 12%, transparent) 0%,
    color-mix(in srgb, var(--secondary-color) 8%, transparent) 100%);
  color: var(--text-on-primary-bg);
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.resilio-badge-motivation .resilio-badge-icon {
  fill: var(--secondary-color);
}

/* Themes Section */
.resilio-card-member-themes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.resilio-card-member-themes-title {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.resilio-card-member-themes-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.resilio-card-member-themes-more {
  font-size: var(--font-size-small);
  color: var(--secondary-color); /* bleu ciel — plus lisible que le marine sur fond blanc */
  text-align: center;
  margin-top: var(--spacing-xs);
}

.resilio-card-member-themes-more:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Theme Level Item (Molecule) */
.resilio-theme-level {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.resilio-theme-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}

.resilio-theme-level-name {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary-color);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Progress Bar */
.resilio-theme-level-progress {
  width: 100%;
  height: 6px;
  background-color: var(--muted-color);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.resilio-theme-level-bar {
  height: 100%;
  border-radius: 9999px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Gradients de barre — color-mix(in hsl, ...) pour une teinte light cohérente */
.resilio-theme-level-bar[data-level="expert"] {
  /* Orange (accent) → orange clair (+13% lightness via color-mix avec white) */
  background: linear-gradient(90deg,
    var(--skill-expert-color) 0%,
    color-mix(in hsl, var(--skill-expert-color) 60%, white) 100%);
}

.resilio-theme-level-bar[data-level="master"] {
  /* Bleu ciel (secondary) → bleu ciel clair */
  background: linear-gradient(90deg,
    var(--skill-master-color) 0%,
    color-mix(in hsl, var(--skill-master-color) 60%, white) 100%);
}

.resilio-theme-level-bar[data-level="beginner"] {
  /* Vert → vert clair */
  background: linear-gradient(90deg,
    var(--skill-beginner-color) 0%,
    color-mix(in hsl, var(--skill-beginner-color) 60%, white) 100%);
}

/* Effet de brillance sur la barre */
.resilio-theme-level-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--surface-color) 30%, transparent) 50%,
    transparent 100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Actions Section */
.resilio-card-member-actions {
  display: flex;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--border-color);
}

.resilio-card-member-actions .btn {
  flex: 1;
}

/* États */
.resilio-card-member.is-inactive {
  opacity: 0.6;
}

.resilio-card-member.is-inactive .resilio-card-member-name::after {
  content: ' (Inactif)';
  font-size: var(--font-size-small);
  color: var(--text-secondary-color);
  font-weight: var(--font-weight-regular);
}

/* Responsive */
@media (max-width: 768px) {
  .resilio-card-member-badges {
    flex-direction: column;
  }

  .resilio-badge {
    justify-content: center;
  }
}

/* Empty state */
.resilio-card-member-themes-empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-secondary-color);
  font-size: var(--font-size-small);
  background-color: var(--muted-color);
  border-radius: var(--border-radius-md);
}

.resilio-card-member-themes-empty svg {
  width: 32px;
  height: 32px;
  margin-bottom: var(--spacing-xs);
  opacity: 0.5;
}

.resilio-card-member-themes-empty p {
  margin: 0;
}

/* ==========================================================================
   LOGIN LAYOUT — Split panel (hero + form)
   ========================================================================== */

.login-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.login-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Hero panel — gradient bleu marine → fond clair → bleu ciel */
.login-layout__hero {
    display: none;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-color) 8%, transparent) 0%,
      var(--background-color) 50%,
      color-mix(in srgb, var(--secondary-color) 6%, transparent) 100%
    );
    position: relative;
    overflow: hidden;
    padding: clamp(var(--spacing-md), 5vh, var(--spacing-xl)) var(--spacing-lg);
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.login-layout__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.5;
}

.login-layout__hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
}

.login-layout__hero-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-color);
    margin-bottom: 0.25rem;
}

.login-layout__hero-subtitle {
    font-size: var(--font-size-small);
    color: var(--text-secondary-color);
    margin-bottom: var(--spacing-lg);
}

.login-feature-card {
    background: color-mix(in srgb, var(--surface-color) 80%, transparent);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    max-width: 300px;
    transition: box-shadow var(--transition-default), transform var(--transition-default);
}

.login-feature-card:hover {
    box-shadow: var(--box-shadow-medium);
    transform: translateY(-2px);
}

.login-feature-card:nth-child(2) { margin-left: 2rem; }
.login-feature-card:nth-child(3) { margin-left: 4rem; }

.login-feature-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--border-radius-md);
    background-color: color-mix(in srgb, var(--secondary-color) 10%, transparent); /* bleu ciel à 10% */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--secondary-color);
    font-size: 1rem;
}

.login-feature-card__title {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary-color);
    margin-bottom: 0.125rem;
}

.login-feature-card__desc {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    line-height: 1.5;
    margin: 0;
}

/* Form panel */
.login-layout__form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(var(--spacing-sm), 4vh, var(--spacing-lg)) var(--spacing-lg);
    background-color: var(--background-color);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--box-shadow-medium);
}

.login-card__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent); /* bleu marine à 10% */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-sm);
    color: var(--primary-color);
    font-size: 1.5rem;
}

.login-card__title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-color);
    text-align: center;
    margin-bottom: 0.25rem;
}

.login-card__subtitle {
    font-size: var(--font-size-small);
    color: var(--text-secondary-color);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

/* Responsive */
@media (min-width: 992px) {
    .login-layout {
        flex-direction: row;
    }

    .login-layout__hero {
        display: flex;
        width: 55%;
    }

    .login-layout__form-panel {
        width: 45%;
    }
}

/* ==========================================================================
   TOKEN DISPLAY — Affiché dans la login-card après auth JWT
   ========================================================================== */

.login-token-display__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--spacing-sm);
}

.login-token-display__success {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--success-color);
    flex-shrink: 0;
}

.login-token-display__title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-color);
    margin: 0;
}

.login-token-display__code-wrapper {
    position: relative;
    margin-bottom: var(--spacing-sm);
}

.login-token-display__code {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm);
    padding-right: 2.75rem;
    font-size: 0.7rem;
    color: var(--text-secondary-color);
    word-break: break-all;
    white-space: pre-wrap;
    max-height: 120px;
    overflow-y: auto;
    margin-bottom: 0;
}

.login-token-display__copy-btn {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--surface-color);
    color: var(--text-secondary-color);
    cursor: pointer;
    line-height: 1;
    transition: var(--transition-fast);
}

.login-token-display__copy-btn:hover {
    background-color: var(--background-color);
    color: var(--text-primary-color);
    border-color: var(--text-secondary-color);
}

.login-token-display__copy-btn--copied {
    border-color: var(--success-color);
    color: var(--success-color);
}

.login-token-display__hint {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    text-align: center;
    margin: var(--spacing-sm) 0 0;
    line-height: 1.5;
}

/* ==========================================================================
   Page Hero — commun aux pages légales et aux pages de contenu
   ========================================================================== */

.resilio-page-hero {
    background-color: var(--header-bg);
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    border-bottom: 1px solid var(--header-border-color);
}

.resilio-page-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    color: #f1f5f9;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 var(--spacing-sm);
    max-width: 80%;
}

.resilio-page-hero-subtitle {
    font-size: 1.125rem;
    color: #94a3b8;
    max-width: 600px;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   Breadcrumb / badge de section
   ========================================================================== */

/* Neutralise les styles Bootstrap par défaut du breadcrumb */
.resilio-page-breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
}

/* Séparateur discret (le breadcrumb est souvent à 1 seul item) */
.resilio-page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(148, 163, 184, 0.5);
}

/* Premier item = badge identique au badge Blog
   La double sélectivité .breadcrumb-item.resilio-page-tag est nécessaire pour
   surpasser le .breadcrumb-item.active { color: var(--bs-secondary-color) } de Bootstrap */
.resilio-page-tag,
.breadcrumb-item.resilio-page-tag,
.breadcrumb-item.resilio-page-tag.active {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: var(--border-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
}

/* Quand c'est un lien (breadcrumb avec sous-page) */
.resilio-page-breadcrumb a.resilio-page-tag {
    text-decoration: none;
}

.resilio-page-breadcrumb a.resilio-page-tag:hover {
    background: rgba(59, 130, 246, 0.2);
}

/* ── Profil Rich — Atomes (intention 015) ──────────────────────────────────── */

/* level-chip */
.resilio-level-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--level-chip-padding, 2px 8px);
    border-radius: var(--level-chip-radius, 12px);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.resilio-level-chip-expert {
    background: color-mix(in srgb, var(--skill-expert-color) 12%, transparent);
    color: var(--skill-expert-color);
}

.resilio-level-chip-master {
    background: color-mix(in srgb, var(--skill-master-color) 12%, transparent);
    color: var(--skill-master-color);
}

.resilio-level-chip-beginner {
    background: color-mix(in srgb, var(--skill-beginner-color) 12%, transparent);
    color: var(--skill-beginner-color);
}

.resilio-level-chip-none {
    background: var(--muted-color);
    color: var(--text-secondary-color);
}

.resilio-level-chip-lg {
    font-size: 14px;
    padding: 4px 12px;
}

/* sparkline */
.resilio-sparkline {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* matrix-cell */
.resilio-matrix-cell {
    width: var(--matrix-cell-size, 36px);
    height: var(--matrix-cell-size, 36px);
    border-radius: var(--matrix-cell-radius, 4px);
    border: none;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.resilio-matrix-cell-expert  { background: var(--skill-expert-color); }
.resilio-matrix-cell-master  { background: var(--skill-master-color); }
.resilio-matrix-cell-beginner { background: var(--skill-beginner-color); }
.resilio-matrix-cell-none    { background: var(--skill-none-color); opacity: 0.3; }
.resilio-matrix-cell-empty   { background: var(--muted-color); opacity: 0.4; }
.resilio-matrix-cell-mini    { width: 14px; height: 14px; }

.resilio-matrix-cell-vital {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--resilio-low-color);

    /* Bord blanc pour détacher le point rouge de n'importe quel fond de cellule
       (notamment l'orange « Sachant ») ; box-shadow = fin liseré sombre pour le
       cas d'un fond clair/blanc. */
    border: 2px solid var(--surface-color);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--resilio-low-color) 55%, transparent);
    box-sizing: content-box;
}

/* ── Badges criticité connaissance (partagé : résilience + simulateur) ──────── */

.resilio-resilience-criticality-badge--vitale,
.resilio-resilience-criticality-badge--important,
.resilio-resilience-criticality-badge--accessoire {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2em 0.55em;
    border-radius: var(--border-radius-sm, 4px);
    white-space: nowrap;
}

.resilio-resilience-criticality-badge--vitale {
    background-color: color-mix(in srgb, var(--skill-expert-color) 12%, transparent);
    color: var(--skill-expert-color);
    border: 1px solid color-mix(in srgb, var(--skill-expert-color) 30%, transparent);
}

.resilio-resilience-criticality-badge--important {
    background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.resilio-resilience-criticality-badge--accessoire {
    background-color: var(--muted-color);
    color: var(--text-secondary-color);
    border: 1px solid var(--border-color);
}

/* ── Badges niveau de résilience (partagé : résilience + simulateur) ─────────── */

.resilio-resilience-level-badge--resilient,
.resilio-resilience-level-badge--fragile,
.resilio-resilience-level-badge--critique {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15em 0.45em;
    border-radius: var(--border-radius-sm, 4px);
}

.resilio-resilience-level-badge--resilient {
    background-color: var(--success-color);
    color: var(--surface-color);
}

.resilio-resilience-level-badge--fragile {
    background-color: var(--resilio-medium-color);
    color: var(--surface-color);
}

.resilio-resilience-level-badge--critique {
    background-color: var(--resilio-low-color);
    color: var(--surface-color);
}

/* ── Composants 017b — eval-crit-badge ──────────────────────────────────────── */

.resilio-eval-crit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.resilio-eval-crit-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Variante vitale — orange (accent) */
.resilio-eval-crit-badge-vitale {
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--text-on-warning-bg);
}

.resilio-eval-crit-badge-vitale .resilio-eval-crit-dot {
    background: var(--accent-color);
}

/* Variante important — teal (secondary) */
.resilio-eval-crit-badge-important {
    background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
    color: var(--secondary-color);
}

.resilio-eval-crit-badge-important .resilio-eval-crit-dot {
    background: var(--secondary-color);
}

/* Variante accessoire — gris neutre */
.resilio-eval-crit-badge-accessoire {
    background: var(--muted-color);
    color: var(--text-secondary-color);
}

.resilio-eval-crit-badge-accessoire .resilio-eval-crit-dot {
    background: var(--text-secondary-color);
}

/* ── Composants 017b — knowledge-eval-row ───────────────────────────────────── */

.resilio-knowledge-eval-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-primary-color);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.12s ease;
    cursor: pointer;
}

.resilio-knowledge-eval-row:last-child {
    border-bottom: none;
}

.resilio-knowledge-eval-row:hover {
    background-color: color-mix(in srgb, var(--secondary-color) 4%, transparent);
}

.resilio-knowledge-eval-row-body {
    flex: 1;
    min-width: 0;
}

.resilio-knowledge-eval-row-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary-color);
    font-weight: 600;
    margin-bottom: 2px;
}

.resilio-knowledge-eval-row-sep {
    color: var(--border-color);
}

.resilio-knowledge-eval-row-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resilio-knowledge-eval-row-arrow {
    color: var(--text-secondary-color);
    flex-shrink: 0;
    font-size: 12px;
}

/* ── Composants 017b — lvl-chip-none (anticipé depuis 017c) ─────────────────── */

.resilio-lvl-chip-none {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text-secondary-color);
    background: var(--muted-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Composants 017b — responsive A3 ────────────────────────────────────────── */

@media (max-width: 575px) {
    .resilio-knowledge-eval-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .resilio-knowledge-eval-row-body {
        flex-basis: 100%;
    }

    .resilio-knowledge-eval-row-arrow {
        margin-left: auto;
    }
}

/* === 017c — InputSearch === */
.resilio-input-search-wrapper {
    position: relative;
}

.resilio-input-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary-color);
    font-size: 14px;
    pointer-events: none;
}

.resilio-input-search {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-family: inherit;
    font-size: 15px;
    background: var(--muted-color);
    transition: border-color 0.15s;
}

.resilio-input-search:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--surface-color);
    box-shadow: none;
}

/* === 017c — ProfileHeader === */
.resilio-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: center;
}

.resilio-profile-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.resilio-profile-header-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.resilio-profile-header-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    margin: 0;
}

/* ==========================================================================
   Composant Tabs DS — intention 019
   ========================================================================== */

.resilio-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--spacing-md);
  gap: 0;
}

.resilio-tab {
  padding: 8px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary-color);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-duration) ease;
  margin-bottom: -1px;
}

.resilio-tab.active,
.resilio-tab[aria-selected="true"] {
  color: var(--text-primary-color);
  border-bottom: 2px solid var(--accent-color);
}

/* stylelint-disable-next-line selector-not-notation -- :not(a, b) aurait la spécificité 0,1,0 au lieu de 0,2,0 : cascade modifiée */
.resilio-tab:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.resilio-tab:hover:not(.active, [aria-selected="true"]) {
  color: var(--text-primary-color);
  background: color-mix(in srgb, var(--muted-color) 60%, transparent);
}

/* bascule 048 (RG-11 #13) : fond --surface-subtle-color, où secondary vaut 4,63 depuis D-1
   bis. secondary est aussi la couleur de .resilio-tab : la pastille et son libellé forment
   un seul objet, et la valeur ne domine pas son étiquette. */
.resilio-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 6px;
  background: var(--surface-subtle-color);
  color: var(--text-secondary-color);
  border-radius: var(--border-radius-full);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  margin-left: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   C05 — Badges type de forfait (licence)
   Utilisés dans resilio-application-admin-front
   ═══════════════════════════════════════════════════════════════════ */

.resilio-license-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) calc(var(--spacing-xs) * 1.5);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.resilio-license-plan-badge-growth {
  background-color: color-mix(in srgb, var(--resilio-high-color) 12%, transparent);
  color: var(--resilio-high-color);
}

.resilio-license-plan-badge-pro {
  background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
}

.resilio-license-plan-badge-enterprise {
  background-color: color-mix(in srgb, var(--resilio-medium-color) 12%, transparent);
  color: var(--resilio-medium-color);
}

/* CONSERVATION 048 (RG-12 n°1) : la ligne `background-color` ci-dessous emploie
   --text-muted-color comme TEINTE DE FOND, pas comme couleur de texte. WCAG 1.4.3 est hors
   champ pour un fond. Elle ne bascule pas.
   Le texte passe à secondary (RG-11 #14) : 4,62 sur cette teinte à 12 % depuis D-1 bis. Les
   autres forfaits portent une couleur forte (--primary-color, --resilio-high-color…) ;
   « démo » est le forfait neutre, et secondary l'exprime sans le rendre illisible. */
.resilio-license-plan-badge-demo {
  background-color: color-mix(in srgb, var(--text-muted-color) 12%, transparent);
  color: var(--text-secondary-color);
}

/* ═══════════════════════════════════════════════════════════════════
   C11 — Composants thématiques enrichis (accordion/cards)
   Utilisés dans resilio-application-front templates/thematic/
   ═══════════════════════════════════════════════════════════════════ */

.resilio-thematic-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.resilio-thematic-item {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow-subtle);
  overflow: hidden;
  transition: box-shadow var(--transition-duration) var(--transition-timing);
}

.resilio-thematic-item:hover {
  box-shadow: var(--box-shadow-medium);
}

.resilio-thematic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  user-select: none;
}

.resilio-thematic-header:hover {
  background: var(--surface-subtle-color);
}

.resilio-thematic-body {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.resilio-kit-mini-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-subtle-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-small);
  transition: background-color var(--transition-duration) var(--transition-timing);
}

.resilio-kit-mini-card:hover {
  background: var(--surface-color);
}

/* bascule 048 (RG-11 #15, EC-2) : fond réel mesuré = --surface-color (`background:
   transparent` dans un .card-body blanc, thematic/index.html.twig:85-87) => secondary,
   5,43 (QO-08). primary aurait rendu l'affordance d'ajout plus lourde que les kits réels
   qu'elle complète. */
.resilio-kit-mini-card--add {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary-color);
  font-size: var(--font-size-small);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-duration) var(--transition-timing);
}

.resilio-kit-mini-card--add:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

/* ==========================================================================
   Status components — SPEC 032 (santé de service : ok / degraded / down)
   Convention resilio-<composant>-<element>, tokens only, jamais de hex.
   ========================================================================== */

/* --- resilio-status-badge (Atom) --- */
.resilio-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 12px 4px 10px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}
/* stylelint-disable-next-line no-descending-specificity -- icône .bi d'un composant distinct de .resilio-role-card ; la remonter sauterait 200+ règles */
.resilio-status-badge .bi { font-size: 0.9em; }

.resilio-status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--border-radius-full);
    flex-shrink: 0;
}

.resilio-status-badge-lg {
    font-size: var(--font-size-body);
    padding: 8px 18px 8px 14px;
    gap: var(--spacing-sm);
}
.resilio-status-badge-lg .resilio-status-dot { width: 10px; height: 10px; }

.resilio-status-badge-ok {
    background: color-mix(in srgb, var(--success-color) 10%, var(--surface-color));
    color: var(--text-on-success-bg);
    border-color: color-mix(in srgb, var(--success-color) 24%, transparent);
}
.resilio-status-badge-ok .resilio-status-dot { background: var(--success-color); }

/* Intention 064 (DESIGN.md § 7.1) : 4e état — fermeture volontaire, bleu, ni vert
   (« tout va bien », faux) ni rouge (« panne », faux — confusion que D-23 interdit). */
.resilio-status-badge-maintenance {
    background: color-mix(in srgb, var(--maintenance-color) 10%, var(--surface-color));
    color: var(--maintenance-text);
    border-color: var(--maintenance-border);
}
.resilio-status-badge-maintenance .resilio-status-dot { background: var(--maintenance-color); }

/* Écran plateforme (DESIGN.md § 7.2) : dépassement de l'heure de retour annoncée —
   ambre, jamais rouge (une fermeture qui dure est à regarder, pas une panne),
   porté par du TEXTE, jamais la seule couleur. */
.resilio-tenant-maintenance-overdue {
    color: var(--text-on-warning-bg);
    font-weight: var(--font-weight-semibold);
}

.resilio-status-badge-degraded {
    background: color-mix(in srgb, var(--resilio-medium-color) 12%, var(--surface-color));
    color: var(--text-on-warning-bg);
    border-color: color-mix(in srgb, var(--resilio-medium-color) 26%, transparent);
}
.resilio-status-badge-degraded .resilio-status-dot { background: var(--resilio-medium-color); }

.resilio-status-badge-down {
    background: color-mix(in srgb, var(--resilio-low-color) 10%, var(--surface-color));
    color: var(--text-on-danger-bg);
    border-color: color-mix(in srgb, var(--resilio-low-color) 24%, transparent);
}
.resilio-status-badge-down .resilio-status-dot { background: var(--resilio-low-color); }

.resilio-status-badge-unknown {
    background: var(--muted-color);
    color: var(--text-secondary-color);
    border-color: var(--border-color);
}
.resilio-status-badge-unknown .resilio-status-dot { background: var(--text-secondary-color); }

/* Lueur pulsée douce — uniquement sur le badge lg (bandeau de page), décorative,
   désactivée si l'utilisateur réduit les animations (WCAG 2.3.3 / bien-être). */
@media (prefers-reduced-motion: no-preference) {
    .resilio-status-badge-lg.resilio-status-badge-ok .resilio-status-dot {
        animation: resilio-status-pulse-ok 2.4s ease-in-out infinite;
    }

    .resilio-status-badge-lg.resilio-status-badge-degraded .resilio-status-dot {
        animation: resilio-status-pulse-degraded 2.4s ease-in-out infinite;
    }
}

@keyframes resilio-status-pulse-ok {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-color) 40%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--success-color) 0%, transparent); }
}

@keyframes resilio-status-pulse-degraded {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--resilio-medium-color) 40%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--resilio-medium-color) 0%, transparent); }
}

/* --- resilio-status-component-card (Molecule) --- */
.resilio-status-component-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-subtle);
    transition: var(--transition-default);
}
.resilio-status-component-card:hover { box-shadow: var(--box-shadow-medium); }

.resilio-status-component-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.resilio-status-component-name {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary-color);
}

.resilio-status-component-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-small);
    color: var(--text-secondary-color);
}

.resilio-status-component-version {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--muted-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary-color);
    font-variant-numeric: tabular-nums;
}
.resilio-status-component-message { color: var(--text-secondary-color); }

/* --- resilio-status-banner (Molecule — synthèse globale d'une page) --- */
.resilio-status-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    border: 1px solid transparent;
}
.resilio-status-banner-icon { font-size: 1.75rem; flex-shrink: 0; }
.resilio-status-banner-text { display: flex; flex-direction: column; gap: 2px; }
.resilio-status-banner-title { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); }
.resilio-status-banner-desc  { font-size: var(--font-size-small); color: var(--text-secondary-color); }

.resilio-status-banner-ok {
    background: color-mix(in srgb, var(--success-color) 8%, var(--surface-color));
    border-color: color-mix(in srgb, var(--success-color) 22%, transparent);
}

.resilio-status-banner-ok .resilio-status-banner-icon,
.resilio-status-banner-ok .resilio-status-banner-title { color: var(--text-on-success-bg); }

.resilio-status-banner-degraded {
    background: color-mix(in srgb, var(--resilio-medium-color) 10%, var(--surface-color));
    border-color: color-mix(in srgb, var(--resilio-medium-color) 24%, transparent);
}

.resilio-status-banner-degraded .resilio-status-banner-icon,
.resilio-status-banner-degraded .resilio-status-banner-title { color: var(--text-on-warning-bg); }

.resilio-status-banner-down {
    background: color-mix(in srgb, var(--resilio-low-color) 8%, var(--surface-color));
    border-color: color-mix(in srgb, var(--resilio-low-color) 22%, transparent);
}

.resilio-status-banner-down .resilio-status-banner-icon,
.resilio-status-banner-down .resilio-status-banner-title { color: var(--text-on-danger-bg); }

.resilio-status-banner-unknown {
    background: var(--muted-color);
    border-color: var(--border-color);
}

.resilio-status-banner-unknown .resilio-status-banner-icon,
.resilio-status-banner-unknown .resilio-status-banner-title { color: var(--text-secondary-color); }

/* --- resilio-status-grid (layout des cartes composant) --- */
.resilio-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-md);
}

/* --- resilio-status-summary (bande de compteurs — dashboard flotte) --- */
.resilio-status-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.resilio-status-summary-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-small);
    color: var(--text-secondary-color);
}
.resilio-status-summary-count { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); color: var(--text-primary-color); }
.resilio-status-summary-item .resilio-status-dot { width: 10px; height: 10px; }
.resilio-status-summary-ok       .resilio-status-dot { background: var(--success-color); }
.resilio-status-summary-degraded .resilio-status-dot { background: var(--resilio-medium-color); }
.resilio-status-summary-down     .resilio-status-dot { background: var(--resilio-low-color); }
.resilio-status-summary-unknown  .resilio-status-dot { background: var(--text-secondary-color); }

/* --- resilio-status-updated (horodatage « Actualisé … ») --- */
.resilio-status-updated {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-small);
    color: var(--text-secondary-color);
}

/* --- resilio-status-page (wrapper de la page /status tenant) --- */
.resilio-status-page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.resilio-status-page-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary-color);
    margin: 0 0 4px;
}
.resilio-status-page-subtitle { color: var(--text-secondary-color); margin: 0; }

.resilio-status-section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary-color);
    margin: 0 0 var(--spacing-sm);
}

.resilio-status-empty {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--text-secondary-color);
    background: var(--surface-color);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
}
/* stylelint-disable-next-line no-descending-specificity -- icône .bi d'un composant distinct de .resilio-role-card ; la remonter sauterait 200+ règles */
.resilio-status-empty .bi { font-size: 2rem; display: block; margin-bottom: var(--spacing-sm); }
.resilio-status-empty-hint { font-size: var(--font-size-small); }

@media (max-width: 767px) {
    .resilio-status-banner { flex-direction: column; align-items: flex-start; text-align: left; }
    .resilio-status-page-title { font-size: var(--font-size-h2); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Surlignage des occurrences — controller Stimulus list-filter
   Posé par assets/controllers/list_filter_controller.js (élément <mark>).
   La couleur passait auparavant en style inline dans le JS ; elle vient
   desormais du token --resilio-highlight-color, defini par chaque theme.
   ───────────────────────────────────────────────────────────────────────── */
.resilio-list-filter-mark {
    background: var(--resilio-highlight-color);
    border-radius: 2px;
    padding: 0 1px;
}

/* ==========================================================================
   Pages légales — @DesignSystem/legal/*
   ========================================================================== */

.resilio-legal p,
.resilio-legal li,
.resilio-legal dd,
.resilio-legal address {
    max-width: 34rem;
}

/* ==========================================================================
   Pages d'erreur HTTP — gabarit unique @DesignSystem/error/error.html.twig
   ========================================================================== */

.resilio-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-sm);
    min-height: 60vh;
}

.resilio-error-page-code {
    font-size: clamp(4rem, 12vw, 6rem);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    line-height: 1;
    margin: 0 0 var(--spacing-sm);
}

.resilio-error-page-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary-color);
    line-height: 1.25;
    max-width: 24rem;
    margin: 0 0 var(--spacing-sm);
}

.resilio-error-page-message {
    font-size: var(--font-size-body);
    color: var(--text-secondary-color);
    line-height: 1.6;
    max-width: 34rem;
    margin: 0 0 var(--spacing-lg);
}

/* ==========================================================================
   Infobulle (atom) et bouton indisponible (molecule) — intention 078
   Gabarit : _components/_unavailable_button.html.twig
   Contrôleur : tooltip_controller.js (Échap, WCAG 1.4.13)
   Sans JS : l'infobulle s'affiche au survol et au focus ; seule la fermeture
   à Échap manque.
   ========================================================================== */
.resilio-tooltip {
    /* Propriétés locales au composant (D-17) — pas de token global. */
    --resilio-focus-ring-width: 2px;
    --resilio-focus-ring-offset: 2px;
    --resilio-z-index-tooltip: 50;
    --resilio-tooltip-max-width: 20rem;

    position: relative;
    display: inline-block;
}

.resilio-tooltip-content {
    display: none;
    position: absolute;
    top: calc(100% + var(--spacing-xs));
    left: 0;
    z-index: var(--resilio-z-index-tooltip);
    width: max-content;
    max-width: min(var(--resilio-tooltip-max-width), calc(100vw - 2 * var(--spacing-sm)));
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--text-primary-color);
    color: var(--surface-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-medium);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    text-align: left;
    white-space: normal;
}

/* Pont invisible entre l'élément et l'infobulle (WCAG 1.4.13, contenu survolable). */
.resilio-tooltip-content::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: var(--spacing-xs);
}

.resilio-tooltip:hover .resilio-tooltip-content,
.resilio-tooltip:focus-within .resilio-tooltip-content {
    display: block;
}

/* Après Échap (tooltip_controller.js) : masquée jusqu'à la sortie du pointeur ou du focus. */
.resilio-tooltip.is-dismissed .resilio-tooltip-content {
    display: none;
}

/* Bouton indisponible : focalisable (aria-disabled sans disabled), inopérant par construction. */
.btn.resilio-unavailable-btn,
.btn.resilio-unavailable-btn:hover,
.btn.resilio-unavailable-btn:focus-visible,
.btn.resilio-unavailable-btn:active {
    background-color: var(--muted-color);
    color: var(--text-secondary-color);
    border-color: var(--border-color);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn.resilio-unavailable-btn:focus-visible {
    outline: var(--resilio-focus-ring-width) solid var(--primary-color);
    outline-offset: var(--resilio-focus-ring-offset);
}

/* Intention 094 (R-1) — message « session expirée » focalisé à l'arrivée sur /login (A-4).
   Propriétés locales au composant, comme .resilio-tooltip (D-17) : aucun token global
   d'anneau de focus n'existe (token manquant : --resilio-focus-ring-width / -offset au niveau :root). */
.resilio-login-session-notice {
    --resilio-focus-ring-width: 2px;
    --resilio-focus-ring-offset: 2px;
    border-radius: var(--border-radius-md);
}

.resilio-login-session-notice:focus {
    outline: none;
}

.resilio-login-session-notice:focus-visible {
    outline: var(--resilio-focus-ring-width) solid var(--primary-color);
    outline-offset: var(--resilio-focus-ring-offset);
}

/* ==========================================================================
   Préférences de progression et de transmission — intention 018
   Gabarits : _pref_pill, _pref_switch, _pref_control, _pref_meta, _pref_marks, _pref_tag,
              _pair_tag, _pref_badge, _pref_side_panel (templates/_components/)
   Évolutions par prop facultative : matrix-cell (preferences), _transfer_card et _transfer_row
              (motivation) ; variante de bandeau .resilio-banner-neutral
   Contrôleurs : pref_control_controller.js, side_panel_controller.js
   Règles de la section : aucun token nouveau (propriétés --resilio-… LOCALES, convention D-17) ;
   teintes en color-mix(in srgb, var(--token) N%, transparent) avec 3 ≤ N ≤ 22 ; anneau de focus
   existant (2 px --primary-color, décalage 2 px) ; cibles ≥ 44 px ; mouvement déclaré seulement
   sous (prefers-reduced-motion: no-preference) ; chaque sélecteur porte une classe resilio-pref-…
   ou resilio-pair-…, hors .resilio-banner-neutral, .resilio-transfer-card-pair et
   .resilio-transfer-row-pair. Aucune règle ne cible un sélecteur existant seul.
   Thème servi de référence : ho-oh-lore (les teintes « transmettre » n'ont pas de valeur sous le
   thème default : pas de repli écrit pour lui).
   ========================================================================== */

/* ── Propriétés locales (anneau de focus, cible tactile, épaisseur d'état) ───────────────────── */
.resilio-pref-pill,
.resilio-pref-switch,
.resilio-pref-meta-action,
.resilio-pref-badge,
.resilio-pref-side-panel-close,
.resilio-pref-side-panel-title {
    --resilio-focus-ring-width: 2px;
    --resilio-focus-ring-offset: 2px;
    --resilio-pref-target-size: 44px;
    --resilio-pref-border-width: 2px;
}

/* ── Pastille à état (PrefPill) ──────────────────────────────────────────────────────────────── */
.resilio-pref-pill {
    --resilio-pref-cross-size: 20px;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-height: var(--resilio-pref-target-size);
    min-width: var(--resilio-pref-target-size);
    padding: 0 var(--spacing-sm);
    border: var(--resilio-pref-border-width) solid transparent;
    border-radius: var(--border-radius-full);
    background-color: var(--surface-color);
    color: var(--text-primary-color);
    font-family: inherit;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.resilio-pref-pill .bi {
    font-size: var(--font-size-body);
}

.resilio-pref-pill-label {
    min-width: 0;
}

.resilio-pref-pill-sub {
    font-weight: var(--font-weight-regular);
}

.resilio-pref-pill:hover {
    border-color: var(--text-secondary-color);
    box-shadow: var(--box-shadow-subtle);
}

.resilio-pref-pill:focus-visible {
    outline: var(--resilio-focus-ring-width) solid var(--primary-color);
    outline-offset: var(--resilio-focus-ring-offset);
}

/* Actif : fond teinté + bordure de 2 px + croix de retrait (décorative). */
.resilio-pref-pill[aria-pressed="true"] {
    padding-right: calc(var(--resilio-pref-cross-size) + var(--spacing-sm));
}

.resilio-pref-pill-progress[aria-pressed="true"] {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--text-on-primary-bg);
}

.resilio-pref-pill-notnow[aria-pressed="true"] {
    border-color: var(--text-secondary-color);
    background-color: var(--surface-color);
    color: var(--text-primary-color);
}

/* À renouveler : pointillés (le texte « à renouveler » porte le sens, jamais la seule bordure). */
.resilio-pref-pill.is-renew {
    border: var(--resilio-pref-border-width) dashed var(--text-secondary-color);
    background-color: var(--surface-color);
    color: var(--text-secondary-color);
}

.resilio-pref-pill-x {
    position: absolute;
    top: 50%;
    right: calc(var(--spacing-xs) / 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--resilio-pref-cross-size);
    height: var(--resilio-pref-cross-size);
    border: 1px solid currentColor;
    border-radius: 50%;
    background-color: var(--surface-color);
    font-size: calc(var(--resilio-pref-cross-size) / 2);
    transform: translateY(-50%);
}

.resilio-pref-pill-x .bi {
    font-size: inherit;
}

.resilio-pref-pill[aria-busy="true"],
.resilio-pref-switch[aria-busy="true"],
.resilio-pref-meta-action[aria-busy="true"] {
    cursor: progress;
}

/* Icône d'envoi : pose statique (flèche circulaire) ; elle ne tourne que sans demande de mouvement réduit. */
.resilio-pref-spin {
    display: inline-block;
}

/* ── Bascule « Je peux transmettre » (PrefSwitch) ────────────────────────────────────────────── */
.resilio-pref-switch {
    --resilio-pref-track-width: 40px;
    --resilio-pref-track-height: 24px;
    --resilio-pref-knob-size: 14px;
    --resilio-pref-knob-gap: 3px;

    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-height: var(--resilio-pref-target-size);
    min-width: var(--resilio-pref-target-size);
    padding: 0 calc(var(--spacing-xs) / 2);
    border: 0;
    border-radius: var(--border-radius-md);
    background: none;
    color: var(--text-primary-color);
    font-family: inherit;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.resilio-pref-switch:focus-visible {
    outline: var(--resilio-focus-ring-width) solid var(--primary-color);
    outline-offset: var(--resilio-focus-ring-offset);
}

.resilio-pref-switch-track {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--resilio-pref-track-width);
    height: var(--resilio-pref-track-height);
    border: var(--resilio-pref-border-width) solid var(--text-secondary-color);
    border-radius: var(--border-radius-full);
    background-color: var(--surface-color);
    color: var(--text-secondary-color);
}

.resilio-pref-switch-track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--resilio-pref-knob-gap);
    width: var(--resilio-pref-knob-size);
    height: var(--resilio-pref-knob-size);
    border-radius: 50%;
    background-color: var(--text-secondary-color);
    transform: translateY(-50%);
}

/* Piste active : la bordure (transparente) laisse voir le fond plein, ce qui évite un trait de même couleur que lui. */
.resilio-pref-switch[aria-checked="true"] .resilio-pref-switch-track {
    border-color: transparent;
    background-color: var(--secondary-color);
    color: var(--surface-color);
}

.resilio-pref-switch[aria-checked="true"] .resilio-pref-switch-track::after {
    left: calc(100% - var(--resilio-pref-knob-size) - var(--resilio-pref-knob-gap));
    background-color: var(--surface-color);
}

.resilio-pref-switch:hover .resilio-pref-switch-track {
    box-shadow: var(--box-shadow-subtle);
}

/* Piste d'envoi : l'icône d'attente remplace la bille. */
.resilio-pref-switch[aria-busy="true"] .resilio-pref-switch-track::after {
    display: none;
}

.resilio-pref-switch-icon {
    color: var(--text-secondary-color);
    font-size: var(--font-size-body);
}

.resilio-pref-switch[aria-checked="true"] .resilio-pref-switch-icon {
    color: var(--text-on-secondary-bg);
}

.resilio-pref-switch-state {
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-regular);
}

/* ── Contrôle de saisie « forme E » (PrefControl) ────────────────────────────────────────────── */
.resilio-pref-control {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.resilio-pref-control-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.resilio-pref-control-excl {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-xs) / 2);
    padding: calc(var(--spacing-xs) / 4);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    background-color: var(--muted-color);
}

.resilio-pref-control-or {
    padding: 0 calc(var(--spacing-xs) / 4);
    color: var(--text-secondary-color);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

/* Niveau maximum : remplace le groupe exclusif. */
.resilio-pref-control-max {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-height: 44px;
    padding: 0 var(--spacing-sm);
    border-radius: var(--border-radius-full);
    background-color: var(--muted-color);
    color: var(--text-secondary-color);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

.resilio-pref-control-max-info {
    margin: 0;
    color: var(--text-secondary-color);
    font-size: var(--font-size-small);
}

.resilio-pref-control-meta:not(:empty),
.resilio-pref-control-live:not(:empty),
.resilio-pref-control-max-info {
    margin-top: var(--spacing-xs);
}

/* ── Ligne de méta (PrefMeta) ────────────────────────────────────────────────────────────────── */
.resilio-pref-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-sm);
    color: var(--text-secondary-color);
    font-size: var(--font-size-small);
    line-height: 1.45;
}

.resilio-pref-meta > .bi {
    color: var(--text-on-secondary-bg);
}

.resilio-pref-meta-error {
    padding: calc(var(--spacing-xs) / 2) calc(var(--spacing-xs) / 2) calc(var(--spacing-xs) / 2) var(--spacing-sm);
    border-radius: var(--border-radius-md);
    background-color: var(--muted-color);
    color: var(--text-primary-color);
}

.resilio-pref-meta-saved {
    color: var(--text-on-secondary-bg);
    font-weight: var(--font-weight-semibold);
}

.resilio-pref-meta-notice {
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-regular);
}

.resilio-pref-meta-action {
    min-height: var(--resilio-pref-target-size);
    min-width: var(--resilio-pref-target-size);
    padding: 0 calc(var(--spacing-xs) / 2);
    border: 0;
    border-radius: var(--border-radius-md);
    background: none;
    color: var(--primary-color);
    font-family: inherit;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.resilio-pref-meta-action:hover {
    color: var(--primary-color-hover);
}

.resilio-pref-meta-action:focus-visible {
    outline: var(--resilio-focus-ring-width) solid var(--primary-color);
    outline-offset: var(--resilio-focus-ring-offset);
}

/* ── Icônes de restitution (PrefMarks) ───────────────────────────────────────────────────────── */
.resilio-pref-marks {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing-xs);
}

.resilio-pref-mark {
    font-size: var(--font-size-body);
    line-height: 1;
}

.resilio-pref-mark-progress {
    color: var(--text-on-primary-bg);
}

.resilio-pref-mark-transmit,
.resilio-pref-mark-manager {
    color: var(--text-on-secondary-bg);
}

.resilio-pref-mark-notnow,
.resilio-pref-mark-renew {
    color: var(--text-secondary-color);
}

/* ── Étiquettes de restitution (PrefTag, PairTag) ────────────────────────────────────────────── */
.resilio-pref-tag,
.resilio-pair-tag {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-xs) / 2);
    padding: calc(var(--spacing-xs) / 4) var(--spacing-xs);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    white-space: nowrap;
}

.resilio-pref-tag-progress {
    background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--text-on-primary-bg);
}

.resilio-pref-tag-transmit {
    background-color: color-mix(in srgb, var(--secondary-color) 12%, transparent);
    color: var(--text-on-secondary-bg);
}

.resilio-pref-tag-notnow {
    background-color: var(--muted-color);
    color: var(--text-secondary-color);
}

.resilio-pref-tag-renew {
    border: 1px dashed var(--text-secondary-color);
    background-color: var(--surface-color);
    color: var(--text-secondary-color);
}

.resilio-pair-tag {
    border: 1px solid var(--secondary-color);
    background-color: color-mix(in srgb, var(--secondary-color) 12%, transparent);
    color: var(--text-on-secondary-bg);
}

.resilio-pair-tag-slot {
    display: flex;
}

/* ── Badge de mini-pictos (PrefBadge) ────────────────────────────────────────────────────────── */
.resilio-pref-badge {
    --resilio-pref-chip-height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--resilio-pref-target-size);
    min-width: var(--resilio-pref-target-size);
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-full);
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.resilio-pref-badge:focus-visible {
    outline: var(--resilio-focus-ring-width) solid var(--primary-color);
    outline-offset: var(--resilio-focus-ring-offset);
}

.resilio-pref-badge-body {
    display: inline-flex;
    align-items: center;
    min-height: var(--resilio-pref-chip-height);
    padding: 0 calc(var(--spacing-xs) / 2);
    border: 1px solid var(--text-secondary-color);
    border-radius: var(--border-radius-full);
    background-color: var(--surface-color);
    color: var(--text-primary-color);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

.resilio-pref-badge:hover .resilio-pref-badge-body {
    border-color: var(--primary-color);
    box-shadow: var(--box-shadow-subtle);
}

.resilio-pref-badge-seg {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-xs) / 2);
    padding: 0 calc(var(--spacing-xs) * 0.75);
}

.resilio-pref-badge-seg + .resilio-pref-badge-seg {
    border-left: 1px solid var(--border-color);
}

.resilio-pref-badge-seg-progress {
    color: var(--text-on-primary-bg);
}

.resilio-pref-badge-seg-transmit {
    color: var(--text-on-secondary-bg);
}

.resilio-pref-badge-seg-notnow {
    color: var(--text-secondary-color);
}

/* Ouvert : badge plein (le panneau est affiché). */
.resilio-pref-badge[aria-expanded="true"] .resilio-pref-badge-body {
    border-color: transparent;
    background-color: var(--text-on-secondary-bg);
    color: var(--surface-color);
}

.resilio-pref-badge[aria-expanded="true"] .resilio-pref-badge-seg {
    color: inherit;
}

.resilio-pref-badge-empty {
    color: var(--text-secondary-color);
    font-size: var(--font-size-small);
}

/* Carte dont le panneau est ouvert : fond teinté et ombre, SANS bordure colorée. */
.resilio-pref-card-active {
    background-image: linear-gradient(
        color-mix(in srgb, var(--secondary-color) 4%, transparent),
        color-mix(in srgb, var(--secondary-color) 4%, transparent)
    );
    box-shadow: var(--box-shadow-medium);
}

/* ── Panneau latéral nominatif (PrefSidePanel) ───────────────────────────────────────────────── */
/* Hôte : posé par side_panel_controller.js sur le parent du panneau (grille des cartes + panneaux). */
.resilio-pref-side-panel-host {
    --resilio-pref-side-panel-width: 400px;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--spacing-sm);
}

.resilio-pref-side-panel-host.is-open {
    grid-template-columns: minmax(0, 1fr) var(--resilio-pref-side-panel-width);
}

.resilio-pref-side-panel {
    --resilio-pref-side-panel-width: 400px;
    --resilio-pref-side-panel-offset: 0px;
    --resilio-pref-arrow-size: 14px;
    --resilio-pref-z-index-sheet: 40;

    position: relative;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--resilio-pref-side-panel-width);
    margin-top: var(--resilio-pref-side-panel-offset);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background-color: var(--surface-color);
    box-shadow: var(--box-shadow-medium);
}

.resilio-pref-side-panel[hidden] {
    display: none;
}

.resilio-pref-side-panel-arrow {
    position: absolute;
    top: var(--spacing-md);
    left: calc(var(--resilio-pref-arrow-size) / -2);
    width: var(--resilio-pref-arrow-size);
    height: var(--resilio-pref-arrow-size);
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    background-color: var(--surface-color);
    transform: rotate(45deg);
}

.resilio-pref-side-panel-head {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.resilio-pref-side-panel-heading {
    flex: 1;
    min-width: 0;
}

.resilio-pref-side-panel-title {
    margin: 0;
    color: var(--text-primary-color);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.resilio-pref-side-panel-title:focus-visible {
    outline: var(--resilio-focus-ring-width) solid var(--primary-color);
    outline-offset: var(--resilio-focus-ring-offset);
}

.resilio-pref-side-panel-kit {
    margin: calc(var(--spacing-xs) / 4) 0 0;
    color: var(--text-secondary-color);
    font-size: var(--font-size-small);
}

.resilio-pref-side-panel-close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-height: var(--resilio-pref-target-size);
    min-width: var(--resilio-pref-target-size);
    margin: calc(var(--spacing-xs) * -1) calc(var(--spacing-xs) * -1) 0 0;
    border: 0;
    border-radius: var(--border-radius-md);
    background: none;
    color: var(--text-secondary-color);
    font-size: var(--font-size-h3);
    cursor: pointer;
}

.resilio-pref-side-panel-close:hover {
    background-color: var(--muted-color);
}

.resilio-pref-side-panel-close:focus-visible {
    outline: var(--resilio-focus-ring-width) solid var(--primary-color);
    outline-offset: var(--resilio-focus-ring-offset);
}

.resilio-pref-side-panel-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0 calc(var(--spacing-xs) / 2);
}

.resilio-pref-side-panel-knowers {
    color: var(--text-secondary-color);
    font-size: var(--font-size-small);
}

.resilio-pref-side-panel-section {
    margin-top: var(--spacing-sm);
}

.resilio-pref-side-panel-section + .resilio-pref-side-panel-section {
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.resilio-pref-side-panel-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-small);
}

.resilio-pref-side-panel-count {
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-regular);
}

.resilio-pref-side-panel-people {
    margin: 0;
    padding: 0;
    list-style: none;
}

.resilio-pref-side-panel-person {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: calc(var(--spacing-xs) / 2) 0;
    font-size: var(--font-size-small);
}

.resilio-pref-side-panel-name {
    flex: 1;
    min-width: 0;
    color: var(--text-primary-color);
}

.resilio-pref-side-panel-empty,
.resilio-pref-side-panel-note {
    margin: calc(var(--spacing-xs) / 2) 0 0;
    color: var(--text-secondary-color);
    font-size: var(--font-size-small);
    line-height: 1.45;
}

.resilio-pref-side-panel-note > .bi {
    margin-right: calc(var(--spacing-xs) / 2);
}

/* ── Évolutions par prop facultative ─────────────────────────────────────────────────────────── */
/* Case de matrice : pastilles de coin (la case reste le <button> existant). */
.resilio-pref-matrix-marks {
    --resilio-matrix-pref-size: 20px;

    position: absolute;
    right: calc(var(--resilio-matrix-pref-size) / -4);
    bottom: calc(var(--resilio-matrix-pref-size) / -4);
    display: flex;
    flex-direction: row-reverse;
    pointer-events: none;
}

.resilio-pref-matrix-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--resilio-matrix-pref-size);
    height: var(--resilio-matrix-pref-size);
    border-radius: 50%;
    background-color: var(--surface-color);
    box-shadow: 0 0 0 1px var(--border-color);
    font-size: calc(var(--resilio-matrix-pref-size) * 0.6);
    line-height: 1;
}

.resilio-pref-matrix-mark-progress {
    color: var(--text-on-primary-bg);
}

.resilio-pref-matrix-mark-transmit {
    color: var(--text-on-secondary-bg);
}

.resilio-pref-matrix-mark-notnow {
    color: var(--text-secondary-color);
}

/* Carte et ligne de transfert : paire motivée = fond teinté, bordure STANDARD (jamais colorée). */
.resilio-transfer-card.resilio-transfer-card-pair {
    background-image: linear-gradient(
        color-mix(in srgb, var(--secondary-color) 3%, transparent),
        color-mix(in srgb, var(--secondary-color) 3%, transparent)
    );
}

.resilio-transfer-row.resilio-transfer-row-pair {
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-md);
    background-image: linear-gradient(
        color-mix(in srgb, var(--secondary-color) 3%, transparent),
        color-mix(in srgb, var(--secondary-color) 3%, transparent)
    );
}

/* Signal sous la personne : avatar à gauche, prénom puis étiquette en colonne. */
.resilio-pref-transfer-person {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-xs) * 0.75);
}

.resilio-pref-transfer-person-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing-xs) / 4);
}

/* Bandeau neutre (bandeau « modifié par votre manager », bandeau de l'onglet « Mes préférences »). */
.resilio-banner-neutral {
    background-color: var(--muted-color);
    color: var(--text-primary-color);
}

.resilio-banner-neutral > .bi {
    color: var(--text-secondary-color);
}

/* ── Petit écran : bascule sous le groupe, pastilles en deux colonnes égales, panneau en feuille basse ── */
@media (max-width: 767px) {
    .resilio-pref-control-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .resilio-pref-control-excl {
        display: flex;
        width: 100%;
    }

    .resilio-pref-control-excl .resilio-pref-pill {
        flex: 1;
        justify-content: center;
        min-width: 0;
        padding: 0 var(--spacing-xs);
        white-space: normal;
        text-align: center;
    }

    .resilio-pref-control-excl .resilio-pref-pill[aria-pressed="true"] {
        padding-right: calc(var(--resilio-pref-cross-size) + var(--spacing-xs));
    }

    .resilio-pref-side-panel-host.is-open {
        grid-template-columns: minmax(0, 1fr);
    }

    .resilio-pref-side-panel {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--resilio-pref-z-index-sheet);
        grid-column: auto;
        max-width: none;
        max-height: 80vh;
        margin-top: 0;
        overflow-y: auto;
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    }

    .resilio-pref-side-panel-arrow {
        display: none;
    }
}

/* ── Mouvement : déclaré seulement quand l'utilisateur n'a pas demandé moins de mouvement ───────── */
@keyframes resilio-pref-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .resilio-pref-spin {
        animation: resilio-pref-spin calc(var(--transition-duration) * 3) linear infinite;
    }

    .resilio-pref-pill,
    .resilio-pref-pill-x,
    .resilio-pref-switch-track,
    .resilio-pref-switch-track::after {
        transition: var(--transition-default);
    }

    .resilio-pref-side-panel {
        transition: margin-top var(--transition-duration) var(--transition-timing);
    }
}