/* ============================================================
   Module admin — disposition deux panneaux (rail + contenu),
   en-têtes de sous-écrans, cartes campagne, listes, catalogue
   gamification. Design system « Style Partoo ».
   ============================================================ */

/* ===== SHELL : BARRE AU-DESSUS, CONTENU EN DESSOUS ===== */
.admin-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-shell__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* ===== BARRE DE SECTIONS =====
   Cinq domaines sur une ligne. Le nombre d'entrées derrière chacun n'a plus
   d'importance : la barre ne grandit pas, et rien ne défile jamais.

   Une rangée de boutons arrondis se lit comme une série de filtres. Trois
   choses en font un menu : l'étiquette qui la nomme, une icône par domaine, et
   le petit bec qui relie le panneau ouvert à son bouton. */
.admin-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 20, 40, 0.04);
  /* Elle passe à la ligne plutôt que de sortir du champ : sur une fenêtre
     étroite, mieux vaut deux rangées qu'un bouton coupé au bord. */
  flex-wrap: wrap;
  row-gap: 4px;
  /* Les menus s'ouvrent par-dessus le contenu. */
  position: relative;
  z-index: 20;
}



.admin-bar__group { position: relative; }

.admin-bar__button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px 6px 7px;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: #5B6172;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background 0.16s ease, color 0.16s ease;
  /* Le triangle natif du navigateur n'a pas sa place : on dessine le nôtre. */
  list-style: none;
}
.admin-bar__button::-webkit-details-marker { display: none; }
.admin-bar__button:hover { background: var(--gray-100); color: var(--gray-700); }
.admin-bar__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* L'icône du domaine, dans la même pastille ronde que les entrées de la barre
   latérale : c'est le langage du système, on ne le réinvente pas ici. */
.admin-bar__icon {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease, color 0.16s ease;
}
.admin-bar__icon .lucide { width: 14px; height: 14px; }
.admin-bar__button:hover .admin-bar__icon { background: var(--gray-200); }

/* Le domaine où l'on travaille, et l'écran ouvert dedans. Sans liste
   permanente, c'est ce qui répond à « où suis-je ? » sans un clic. */
.admin-bar__group.is-current > .admin-bar__button {
  background: var(--brand-indigo-tint);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}
.admin-bar__group.is-current > .admin-bar__button .admin-bar__icon,
.admin-bar__group.is-current > .admin-bar__button:hover .admin-bar__icon {
  background: var(--accent);
  color: #fff;
}
.admin-bar__here { margin-left: 2px; }

.admin-bar__chevron {
  width: 13px;
  height: 13px;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.16s ease;
}
.admin-bar__button:hover .admin-bar__chevron { opacity: 0.8; }
.admin-bar__group[open] > .admin-bar__button .admin-bar__chevron {
  transform: rotate(180deg);
  opacity: 1;
}
.admin-bar__group[open] > .admin-bar__button { background: var(--gray-100); }

/* Le menu déroulant. */
.admin-bar__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 236px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(16, 20, 40, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: adminMenuIn 0.16s ease;
}
/* Le bec. C'est lui qui dit « ce panneau appartient à ce bouton » — sans lui,
   une carte flottante ressemble à n'importe quelle autre carte. */
.admin-bar__menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 26px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-left: 1px solid var(--gray-200);
  border-top: 1px solid var(--gray-200);
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
}
/* Sur une fenêtre étroite, la barre maigrit plutôt que de passer à la ligne :
   deux rangées ont l'air d'un accident. On sacrifie dans l'ordre inverse de
   l'utilité — d'abord le libellé de l'interrupteur, dont l'icône et la pastille
   disent déjà l'état ; puis le nom de l'écran ouvert, dont la teinte indigo du
   domaine porte encore l'information. */
@media (max-width: 1439.98px) {
  .admin-bar__platform-label { display: none; }
  .admin-bar__platform { padding: 6px 10px; }
}
@media (max-width: 1319.98px) {
  .admin-bar__here { display: none; }
}

/* Le dernier domaine s'ouvre vers la gauche : ancré à gauche comme les autres,
   son panneau sortirait de l'écran sur une fenêtre étroite. Le bec suit. */
.admin-bar__group:last-of-type .admin-bar__menu {
  left: auto;
  right: 0;
}
.admin-bar__group:last-of-type .admin-bar__menu::before {
  left: auto;
  right: 26px;
}

@keyframes adminMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Même langage que les entrées de la barre latérale principale : pastille
   ronde pour l'icône, sélection en teinte indigo pâle. */
.admin-bar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: #5B6172;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}
.admin-bar__bullet {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease, color 0.16s ease;
}
.admin-bar__bullet .lucide { width: 14px; height: 14px; }
.admin-bar__item:hover { background: var(--gray-100); color: var(--gray-700); }
.admin-bar__item.is-active {
  background: var(--brand-indigo-tint);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}
.admin-bar__item.is-active .admin-bar__bullet {
  background: var(--accent);
  color: #fff;
}

.admin-bar__spacer { flex: 1; }

/* L'interrupteur de plateforme, chassé du pied du rail, se pose au bout de la
   barre. Sa pastille dit l'état avant qu'on lise le mot. */
.admin-bar__platform-form { margin: 0; }
.admin-bar__platform {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  background: #fff;
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  color: var(--gray-600);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.admin-bar__platform:hover { border-color: var(--gray-300); color: var(--gray-700); }
.admin-bar__platform .lucide { width: 14px; height: 14px; }
.admin-bar__platform::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-300);
}
.admin-bar__platform--on::before { background: var(--status-success-fg); }

/* ===== EN-TÊTE DE SOUS-ÉCRAN ===== */
.admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.admin-head__text {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.admin-head__icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius-lg);
  background: var(--brand-indigo-tint);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-head__icon .lucide { width: 19px; height: 19px; }
.admin-head__title {
  font-size: 24px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}
.admin-head__sub {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 4px 0 0;
}
.admin-head__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: none;
  flex-wrap: wrap;
}

/* Ligne de métadonnées sous un titre (dates, périmètre…) */
.admin-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-top: 5px;
}
.admin-meta .lucide { width: 13px; height: 13px; flex: none; }

/* ===== CARTES CAMPAGNE ===== */
.campaign-card {
  display: block;
  height: 100%;
  transition: border-color 0.16s ease;
}
.campaign-card:hover { border-color: #D6D8FC; }

.campaign-card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.campaign-card__period {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-top: 3px;
}
.campaign-card__period .lucide { width: 12px; height: 12px; }
.campaign-card__stats {
  display: flex;
  gap: 26px;
  margin-top: 16px;
}
.campaign-card__stat-value {
  font-size: 26px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
.campaign-card__stat-label {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: 2px;
}

/* Rangée de stat cards (campaigns/show, help) */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.admin-stats--3 { grid-template-columns: repeat(3, 1fr); }
.admin-stats .ds-card { padding: 15px 17px; }
.admin-stats .stat-card__figure { font-size: 26px; }

/* ===== LISTES ADMIN (avatars, progression) ===== */
img.ds-avatar { object-fit: cover; }

.admin-row-progress {
  width: 130px;
  flex: none;
}

/* Métadonnées d'une ligne collaborateur */
.collab-row__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-top: 2px;
}
.collab-row__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.collab-row__meta .lucide { width: 11px; height: 11px; }
.ds-row__chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--gray-300);
}

/* Cellule d'actions de table : petits boutons espacés */
.admin-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.admin-actions form { margin: 0; display: inline-flex; }
.admin-actions .btn { padding: 6px 10px; }
.admin-actions .btn .lucide { width: 13px; height: 13px; }

/* ===== BANDEAU FONCTIONNALITÉ (module absences on/off) ===== */
.admin-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-feature__text {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.admin-feature__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.admin-feature__hint {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-top: 2px;
}

/* Interrupteur DS rendu par un button_to (pas une checkbox) */
.admin-switch-form { margin: 0; flex: none; }
.admin-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  padding: 4px 0;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.16s ease;
}
.admin-switch:hover { color: var(--text-primary); }
.admin-switch__track {
  width: 36px;
  height: 21px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--gray-300);
  padding: 2px;
  display: flex;
  justify-content: flex-start;
  transition: background 0.18s ease;
}
.admin-switch--on .admin-switch__track {
  background: var(--accent);
  justify-content: flex-end;
}
.admin-switch__knob {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
}

/* Barre de filtres (selects) */
.admin-filters {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}


.admin-user-link {
  color: var(--text-primary);
  text-decoration: none;
}
.admin-user-link:hover { color: var(--accent); }

/* Sélecteur d'icône des catégories de documents (banque Lucide) */
.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.icon-pick {
  /* Ancre l'input masqué : sans cela il se rattache au bloc racine,
     échappe au rognage de la coque et rend la fenêtre défilable. */
  position: relative;
  margin: 0;
  cursor: pointer;
}
.icon-pick__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.icon-pick__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--gray-150);
  background: #fff;
  color: var(--gray-600);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.icon-pick__chip .lucide {
  width: 18px;
  height: 18px;
}
.icon-pick:hover .icon-pick__chip {
  border-color: var(--gray-300);
  color: var(--gray-700);
}
.icon-pick:has(.icon-pick__input:checked) .icon-pick__chip {
  border: 2px solid var(--accent);
  background: var(--brand-indigo-tint);
  color: var(--accent);
  margin: -1px;
}
.icon-pick__input:focus-visible + .icon-pick__chip {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}




.help-rarity { display: inline-flex; gap: 2px; }
.help-rarity .lucide { width: 11px; height: 11px; }
.help-star--filled { color: var(--status-warning-fg); fill: var(--status-warning-fg); }
.help-star--empty { color: var(--gray-300); }

/* ===== ÉDITEUR MARKDOWN (admin/hr_documents) ===== */
/* Le contrôleur Stimulus markdown-preview bascule la classe `active`
   sur les onglets du seg-control. */
.seg-control__item.active {
  background: #fff;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  box-shadow: 0 2px 8px -2px rgba(16, 24, 40, 0.16);
}

.markdown-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  min-height: 420px;
}

/* ===== MOBILE ===== */
@media (max-width: 991.98px) {
  .admin-shell { gap: 14px; }
  /* La barre passe à la ligne plutôt que de défiler : un conteneur qui défile
     découperait les menus déroulants, qui en sortent par le bas. */
  .admin-bar {
    flex-wrap: wrap;
    border-radius: 18px;
  }
  .admin-bar__spacer { display: none; }
  .admin-bar__here { display: none; }
  .admin-bar__menu {
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 40px);
  }
  .admin-bar__platform { margin-left: auto; }
  .admin-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767.98px) {
  .admin-stats,
  .admin-stats--3 { grid-template-columns: repeat(2, 1fr); }
  .admin-head__icon { display: none; }
  .admin-row-progress { display: none; }
  }

/* Logos des tiers en visite : fond neutre, l'image n'est jamais rognée. */
.visit-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--gray-150);
  overflow: hidden;
}
.visit-logo img {
  max-width: 90%;
  max-height: 80%;
  object-fit: contain;
}
.visit-logo--empty {
  background: var(--gray-100);
  color: var(--gray-400);
}
.visit-logo--empty .lucide { width: 18px; height: 18px; }
.visit-logo--lg { width: 160px; height: 96px; }

/* ===== Palette de teintes des écrans (Administration → Autre → Écrans) ===== */
.tint-swatches {
  display: grid;
  grid-template-columns: repeat(6, 46px);
  gap: 10px;
}
/* `position: relative` obligatoire : chaque pastille enveloppe un bouton radio
   posé en `.visually-hidden`, que Bootstrap met en `position: absolute`. Sans
   parent positionné, ces champs se rattachent au document lui-même — ils
   échappent alors au `overflow: hidden` du shell, étirent la page bien au-delà
   de la fenêtre, et la page se retrouve avec deux ascenseurs verticaux : celui
   du document et celui de `.app-content`. Même remarque sur `.tile`. */
.tint-swatch {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
  box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(23, 27, 45, .12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tint-swatch:hover { transform: scale(1.08); }
.tint-swatch.is-selected {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--swatch);
}

/* ===== Icône de projet ===== */
.project-icon {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--brand-indigo-tint);
  color: var(--accent);
}
/* `contain` et non `cover` : une icône de projet est un logo, pas une photo.
   Les logos déposés sont souvent des bandeaux très larges — `cover` les
   recadrait au centre, et « modulotech » se lisait « ulc ». Mieux vaut un logo
   entier sur un fond teinté qu'une tranche méconnaissable. */
.project-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.project-icon .lucide { width: 16px; height: 16px; }
.project-icon-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* ============================================================
   Mon compte — coordonnées personnelles du collaborateur
   ============================================================ */
.account-page { max-width: 720px; }

/* La mention de confidentialité ouvre la page : on demande des données
   sensibles, on dit d'emblée qui les lit. */
.account-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--brand-indigo-tint-2);
  border: 1px solid var(--brand-indigo-tint);
}
.account-notice__icon {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--accent);
}
.account-notice__icon .lucide { width: 16px; height: 16px; }
.account-notice__title {
  font-weight: var(--weight-semibold);
  margin-bottom: 2px;
}
.account-notice__text {
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.account-card { padding: var(--space-6); margin-bottom: var(--space-4); }
.account-card__head { margin-bottom: var(--space-5); }
.account-card__title {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  margin: 0;
}
.account-card__hint {
  font-size: var(--text-sm);
  color: var(--gray-500);
}

.account-readonly {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.account-readonly__label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  font-weight: var(--weight-semibold);
  margin-bottom: 2px;
}
.account-readonly__value { color: var(--gray-700); }

.account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.account-field--wide { grid-column: 1 / -1; }

/* Un IBAN se relit caractère par caractère : chasse fixe et interlettrage. */
.account-iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

.account-bank-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  font-size: var(--text-sm);
}
.account-bank-note .lucide { width: 15px; height: 15px; flex: none; }

.account-actions {
  display: flex;
  justify-content: flex-end;
  padding-bottom: var(--space-6);
}

@media (max-width: 640px) {
  .account-readonly,
  .account-fields { grid-template-columns: minmax(0, 1fr); }
}

.account-hr .account-readonly { gap: var(--space-4) var(--space-5); }
.account-reveal {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-family: var(--font-sans, inherit);
  letter-spacing: normal;
  padding: 0 0 0 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.account-reveal .lucide { width: 13px; height: 13px; }

/* ===== Fiche collaborateur : colonne latérale =====
   Deux encarts qui ne disent pas la même chose : ce qu'EST le compte, puis ce
   à quoi il DONNE ACCÈS. Les distinguer visuellement évite de lire le second
   comme une suite du premier. */
.user-side {
  position: sticky;
  top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
@media (max-width: 991px) {
  .user-side { position: static; }
}

/* --- Type de compte : sobre, neutre, sans teinte d'accent --- */
.user-kind {
  padding: var(--space-5);
  background: var(--gray-25);
  border-color: var(--gray-150);
}
.user-kind__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--gray-150);
}
.user-kind__chip {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--gray-150);
  color: var(--gray-600);
}
.user-kind__chip .lucide { width: 16px; height: 16px; }
.user-kind__title {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  margin: 0;
}
.user-kind__state {
  font-size: 12px;
  color: var(--gray-500);
}
.user-kind .form-check-label { font-weight: var(--weight-medium); font-size: 14px; }
.user-kind .form-text { margin-top: 3px; padding-left: 1.6em; font-size: 12px; }

/* Coché, le compte sort des listes de collaborateurs : l'encart le dit. */
.user-kind.is-technical {
  background: var(--status-warning-bg);
  border-color: color-mix(in srgb, var(--status-warning-fg) 25%, transparent);
}
.user-kind.is-technical .user-kind__head { border-bottom-color: color-mix(in srgb, var(--status-warning-fg) 20%, transparent); }
.user-kind.is-technical .user-kind__chip { color: var(--status-warning-fg); border-color: transparent; }
.user-kind.is-technical .user-kind__state { color: var(--status-warning-fg); font-weight: var(--weight-medium); }

.user-kind__locked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-150);
}
.user-kind__locked > .lucide {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 3px;
  color: var(--gray-400);
}
.user-kind__locked .form-check-label { font-size: 13px; font-weight: var(--weight-normal, 400); }

/* --- Accès : teinté, chaque droit sur sa carte, allumé quand il est accordé --- */
.user-access {
  padding: var(--space-5);
  background: var(--brand-indigo-tint-2);
  border-color: var(--brand-indigo-tint);
}
.user-access__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--brand-indigo-tint);
}
.user-access__chip {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
}
.user-access__chip .lucide { width: 16px; height: 16px; }
.user-access__title {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  margin: 0;
}
.user-access__hint {
  font-size: 12px;
  color: var(--gray-500);
  line-height: var(--leading-normal);
}
.user-access__item {
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  padding: 11px 13px;
  margin-bottom: 8px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.user-access__item:last-child { margin-bottom: 0; }
.user-access__item:hover { border-color: var(--gray-200); }
.user-access__item:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 1px 6px rgba(86, 93, 246, 0.14);
}
.user-access__item:has(input:checked) .form-check-label { color: var(--accent); }
.user-access .form-check-label {
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 1.35;
}
.user-access .form-text {
  margin-top: 3px;
  padding-left: 1.6em;
  font-size: 12px;
  line-height: var(--leading-normal);
}

/* ============================================================
   Carte des collaborateurs (Apple Plans)
   ============================================================ */
.user-map { padding: 0; overflow: hidden; }
.user-map__canvas {
  height: min(68vh, 640px);
  width: 100%;
  background: var(--gray-100);
}
.user-map__legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 12px var(--space-6);
  border-top: 1px solid var(--gray-100);
  font-size: var(--text-sm);
  color: var(--gray-600);
}
.user-map__count b {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--brand-ink);
}
.user-map__missing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gray-500);
}
.user-map__missing .lucide { width: 14px; height: 14px; }
.user-map__error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-6);
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
  font-size: var(--text-sm);
}
.user-map__error .lucide { width: 16px; height: 16px; flex: none; }

/* --- Pastilles de la carte des collaborateurs ---
   L'ombre est portée par le conteneur, jamais par ses parties : avec une
   ombre sur le disque et une autre sur la pointe, une couture grise
   apparaissait à leur jonction. `drop-shadow` suit la silhouette de
   l'ensemble.

   Les dimensions doivent rester d'accord avec les constantes du contrôleur
   user_map, dont MapKit se sert pour réserver la place. */
.map-pin {
  position: relative;
  cursor: pointer;
  /* Le point d'ancrage est la pointe : c'est depuis elle que la pastille
     grandit au survol, sinon elle semble se décoller du sol. */
  transform-origin: 50% 100%;
  transition: transform 0.16s ease;
  filter: drop-shadow(0 5px 8px rgba(16, 24, 40, 0.26))
          drop-shadow(0 1px 1px rgba(16, 24, 40, 0.13));
}
.map-pin:hover { transform: scale(1.07); }

/* Collaborateur seul : silhouette SVG d'un tenant, visage posé dessus. */
.map-pin--single {
  width: 46px;
  height: 56px;
}
.map-pin__casing {
  position: absolute;
  inset: 0;
  width: 46px;
  height: 56px;
  fill: #fff;
}
.map-pin--single .map-pin__face {
  position: absolute;
  top: 4px;
  left: 4px;
}

.map-pin__face {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  /* Trait intérieur très pâle : sur une photo claire, le bord du visage se
     confondait avec le blanc de la silhouette. */
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.1);
}
.map-pin__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Position approximative : la silhouette passe en ambre, comme le statut
   « à vérifier » du reste de l'application. */
.map-pin--approximate .map-pin__casing { fill: var(--status-warning-bg); }
.map-pin--approximate .map-pin__face { background: var(--status-warning-fg); }

/* Groupe : la même silhouette qu'une pastille isolée, plus un compteur.
   Garder une seule forme sur la carte la rend beaucoup plus calme qu'un
   second objet, pilule ou gros disque, qui entrait en concurrence visuelle
   avec les collaborateurs eux-mêmes. */
.map-pin__count {
  position: absolute;
  top: -3px;
  right: -9px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  line-height: 21px;
  text-align: center;
  /* L'anneau blanc détache le compteur du visage qu'il chevauche. */
  box-shadow: 0 0 0 2.5px #fff;
}

/* --- Écran de configuration, tant que la clé Apple manque --- */
.user-map__setup {
  padding: var(--space-8);
  max-width: 720px;
}
.user-map__setup-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-indigo-tint);
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.user-map__setup-icon .lucide { width: 20px; height: 20px; }
.user-map__setup-title {
  font-size: 19px;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}
.user-map__setup-text { color: var(--gray-600); }
.user-map__steps {
  color: var(--gray-700);
  font-size: var(--text-sm);
  padding-left: var(--space-5);
  margin: var(--space-4) 0;
}
.user-map__steps li { margin-bottom: 6px; }
.user-map__code {
  background: var(--gray-50);
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  margin-bottom: var(--space-4);
}
.user-map__setup-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  color: var(--gray-500);
}
.user-map__setup-note .lucide { width: 14px; height: 14px; flex: none; margin-top: 2px; }

.user-map__pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-4);
}

/* Refus d'apparaître sur la carte, dans « Mon compte » */
.account-optout {
  margin-top: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: var(--gray-50);
}
.account-optout .form-text { margin-top: 2px; padding-left: 1.6em; }

/* État de l'adresse personnelle, sous le champ : confirmée ou non, et le
   bouton qui envoie le lien. Une adresse non confirmée n'est pas une erreur de
   saisie — c'est un fait en attente, d'où le ton neutre. */
.account-verify {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}
.account-verify__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-600);
}
.account-verify__state svg { width: 15px; height: 15px; }
.account-verify__state--done { color: var(--status-success-fg); }

/* Un écran qui emprunte ses réglages n'a pas de formulaire : à la place, on
   dit d'où viennent ses réglages, pour qu'on ne les cherche pas ici. */
.screen-form__borrowed {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  background: var(--brand-indigo-tint);
  color: var(--gray-700);
  font-size: 13px;
  line-height: 1.45;
}
.screen-form__borrowed svg { width: 16px; height: 16px; flex: none; color: var(--brand-indigo); }

/* ── Envoi des bulletins sur l'adresse personnelle ─────────────────────
   Une carte en tête de « Mes bulletins ». La phrase de passe s'y affiche une
   seule fois, à sa création : elle doit se lire et se recopier sans hésiter,
   d'où la police à espacement fixe et la taille. */
.payslip-mail { margin-bottom: var(--space-5); }
.payslip-mail__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.payslip-mail__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.payslip-mail__title svg { width: 17px; height: 17px; color: var(--brand-indigo); }
.payslip-mail__text { margin: 0 0 var(--space-3); color: var(--gray-600); font-size: 14px; }
.payslip-mail__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.payslip-mail__secret {
  margin: 0 0 var(--space-3);
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}
.payslip-mail__secret-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.payslip-mail__secret-value {
  margin: 4px 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.payslip-mail__secret-hint { font-size: 13px; }

/* ── Administration des écrans muraux ─────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Écrans repliables : le résumé est toute la carte tant qu'elle est fermée,
   d'où la ligne complète cliquable et le chevron qui dit où l'on en est. */
.screen-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
}
.screen-card__head::-webkit-details-marker { display: none; }
.screen-card__head:hover { background: var(--surface-sunken); }
.screen-card[open] .screen-card__head {
  border-bottom: 1px solid var(--gray-150);
  border-radius: 0;
}
.screen-card__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.screen-card__id .ds-card__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* L'ambiance en cours se lit sans déplier : c'est le réglage qu'on vérifie. */
.screen-card__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.screen-card__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--swatch);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.screen-card__chevron {
  display: flex;
  flex: none;
  color: var(--gray-500);
  transition: transform 0.18s ease;
}
.screen-card[open] .screen-card__chevron { transform: rotate(180deg); }

.screen-card__body {
  display: grid;
  grid-template-columns: 576px 1fr;
  gap: 26px;
  align-items: start;
  padding: 22px;
}
@media (max-width: 1240px) {
  .screen-card__body { grid-template-columns: 1fr; }
}
/* Sur une fenêtre étroite, le résumé garde le nom et « Ouvrir » ; le reste
   n'est que du confort. */
@media (max-width: 860px) {
  .screen-card__head { gap: 12px; padding: 14px 16px; }
  .screen-card__state { display: none; }
  .screen-card__id .ds-card__meta { display: none; }
  .screen-card__body { padding: 16px; }
}

/* Aperçu : l'écran réel chargé en 1920×1080 puis réduit au quart. Une maquette
   dessinée à la main mentirait tôt ou tard ; celui-ci ne peut pas. */
.screen-preview { margin: 0; }
.screen-preview__viewport {
  width: 576px;
  max-width: 100%;
  height: 324px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border-default);
  background: #07080F;
}
.screen-preview__frame {
  width: 1920px;
  height: 1080px;
  border: 0;
  transform: scale(0.3);
  transform-origin: 0 0;
  pointer-events: none;
}
.screen-preview figcaption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Tuiles carrées : ambiances et rythmes tiennent chacun sur une ligne, au
   lieu des grandes cartes qui poussaient le formulaire sur deux écrans. */
.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 92px;
  height: 92px;
  padding: 8px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tile:hover { border-color: var(--gray-300); }
.tile.is-on {
  border-color: var(--brand-indigo);
  box-shadow: 0 0 0 3px var(--brand-indigo-tint);
}
.tile__swatch {
  width: 46px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.tile__swatch--night { background: linear-gradient(140deg, #07080F 0%, var(--accent, #565DF6) 300%); }
.tile__swatch--tint { background: linear-gradient(140deg, #FBFCFE 0%, var(--accent, #565DF6) 250%); }
.tile__swatch--terminal { background: linear-gradient(140deg, #040705 0%, #2BE86B 300%); }
.tile__name { font-size: 0.84rem; font-weight: 600; line-height: 1.15; }
.tile__hint { font-size: 0.74rem; color: var(--text-muted); }
.tile--text { justify-content: center; gap: 3px; }

.tint-swatches--compact {
  /* 8 colonnes : la palette et le rythme tiennent alors sur la même ligne à
     côté de l'aperçu, et les trois rangées font la hauteur d'une tuile. */
  grid-template-columns: repeat(8, 26px);
  gap: 7px;
}
.tint-swatches--compact .tint-swatch { width: 26px; height: 26px; }

.screen-form__field { margin-bottom: 16px; }
/* Accent et rythme partagent une ligne : deux réglages courts. */
.screen-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 16px;
}
.screen-form__switches { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.screen-form__submit { display: flex; align-items: center; gap: 10px; }
.screen-form__submit form { margin: 0; }

/* Jetons d'API — le secret ne s'affiche qu'une fois, il doit se voir. */
.api-token-reveal {
  border-color: var(--accent);
  background: var(--accent-soft, var(--surface));
}

.api-token-reveal__value {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.9rem;
}

.api-token-usage {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--surface-muted, rgba(0, 0, 0, 0.04));
  font-size: 0.8rem;
  overflow-x: auto;
}