/*
 * Tokens de design — Application Alive Technology
 * Valeurs par défaut reprises telles quelles de docs/palette-branding.md, docs/typographie.md
 * et docs/design-system.md (validés) — servent de filet de secours si aucun réglage n'est
 * encore enregistré en base, et de valeurs "Réinitialiser" dans l'écran Admin. Les 5 couleurs
 * (--couleur-*) et 3 réglages typo (--police-principale/--taille-base/--poids-texte) sont
 * réellement pilotables sans redéploiement depuis le 21/09/2026 : Commun\Branding::styleInline()
 * les surcharge à chaque page via un <style> injecté après ce fichier (cf. commun/Layout.php,
 * auth/_layout.php), pas ce fichier lui-même — ne jamais modifier ces 8 valeurs ici pour
 * changer l'apparence en production, passer par configuration-graphique/.
 */

:root {
  /* Couleurs de marque ("Brand true") */
  --brand-blue: #00b2ff;
  --brand-violet: #b800c7;
  --brand-amber: #ffba00;

  /* Action principale (dérivé du bleu, conforme WCAG AA) */
  --action-700: #007db2;
  --action-100: #d7f1fc;

  /* Accent secondaire */
  --accent-700: #b800c7;
  --accent-100: #f3ddf7;

  /* États */
  --success-700: #15803d;
  --success-100: #dcf5e3;
  --danger-700: #d92d20;
  --danger-100: #fbdedb;
  --warning-500: #ffba00;
  --warning-100: #fff3a2;

  /* Neutres */
  --white: #ffffff;
  --gray-50: #f8f8f8;
  --gray-100: #f0f0f0;
  --gray-200: #dcdcdc;
  --gray-300: #c7c7c7;
  --gray-400: #9d9d9d;
  --gray-600: #5a5a5a;
  --gray-700: #3d3d3d;
  --gray-900: #1f1f1f;

  /* Branding configurable (valeurs par défaut, cf. spec fonctionnelle "Configuration graphique") */
  --couleur-fond: #f8f8f8;
  --couleur-banniere: #ffffff;
  --couleur-accent: var(--action-700);
  --couleur-texte-principal: #1f1f1f;
  --couleur-texte-secondaire: #5a5a5a;

  /*
   * Couleurs des tags/pastilles par catégorie (introduites le 22/09/2026, cf. Commun\Vue::tag()/
   * chipCheck() et docs/design-system.md, "Tags de valeur") — source unique pour les composants
   * qui les utilisent (.tag-*, .parametre-icone-*, .chip-tag-*). `-bg`/`-fg` encore utilisés par
   * .parametre-icone-* (pastille d'icône, pas un tag de texte, non concernée par le retour
   * ci-dessous) ; `-solid`/`-solid-fg` ajoutés le 22/09/2026 (2) pour .tag-* et .chip-check (retour
   * de Matthias : couleur pleine + texte qui ressort, plutôt que fond très légèrement teinté).
   * Contraste vérifié (WCAG AA, 4.5:1) : bleu et violet passent en texte blanc directement ;
   * ambre ne passe pas (texte foncé nécessaire, même formule déjà utilisée pour --tag-ambre-fg) ;
   * accent suit la couleur configurable (`--couleur-accent`, texte blanc par défaut — un Admin
   * qui choisirait un accent très clair en Configuration graphique pourrait dégrader ce contraste,
   * risque accepté, même famille que l'avertissement de contraste déjà non-bloquant de cet écran).
   */
  --tag-bleu-bg: color-mix(in srgb, var(--brand-blue) 16%, white);
  --tag-bleu-fg: color-mix(in srgb, var(--brand-blue) 75%, black);
  --tag-bleu-solid: var(--action-700);
  --tag-violet-bg: color-mix(in srgb, var(--brand-violet) 16%, white);
  --tag-violet-fg: var(--brand-violet);
  --tag-violet-solid: var(--brand-violet);
  --tag-ambre-bg: color-mix(in srgb, var(--brand-amber) 20%, white);
  --tag-ambre-fg: color-mix(in srgb, var(--brand-amber) 55%, black);
  --tag-ambre-solid: var(--brand-amber);
  --tag-accent-bg: color-mix(in srgb, var(--couleur-accent) 16%, white);
  --tag-accent-fg: var(--couleur-accent);
  --tag-accent-solid: var(--couleur-accent);
  --tag-gris-bg: var(--gray-100);
  --tag-gris-fg: var(--gray-600);
  --tag-gris-solid: var(--gray-600);

  /* Espacements (base 4px) */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Rayons */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px; /* token manquant, utilisé par .raccourci-couleur-marque sans être défini — corrigé le 22/09/2026 */

  /* Ombres */
  --shadow-md: 0 4px 12px rgba(31, 31, 31, 0.10);

  --police-principale: 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--police-principale);
  font-size: 14px;
  line-height: 20px;
  color: var(--couleur-texte-principal);
  background-color: var(--couleur-fond);
}

a {
  color: var(--couleur-lien);
}

.page-auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.marque-auth {
  margin-bottom: var(--space-6);
}

.marque-auth__logo {
  display: block;
  height: 64px;
  width: auto;
  max-width: 80vw;
}

.carte-auth {
  width: 100%;
  max-width: 400px;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-6);
}

.carte-auth__bienvenue {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: var(--couleur-texte-principal);
  margin: 0 0 var(--space-6);
}

.carte-auth__titre {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--couleur-texte-principal);
}

.carte-auth__texte {
  font-size: 14px;
  color: var(--couleur-texte-secondaire);
  margin: 0 0 var(--space-6);
}

.champ {
  margin-bottom: var(--space-4);
}

.champ label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: var(--space-2);
  color: var(--couleur-texte-principal);
}

.champ input {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--couleur-texte-principal);
}

.champ input:focus {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
  border-color: var(--couleur-accent);
}

.champ input[type='text'] {
  letter-spacing: 4px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background-color: var(--couleur-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.bouton:hover {
  filter: brightness(0.92);
}

.bouton:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
}

.message {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: var(--space-4);
}

.message--info {
  background-color: var(--action-100);
  color: var(--action-texte);
}

.message--erreur {
  background-color: var(--danger-100);
  color: var(--danger-texte);
}

.lien-retour {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: 13px;
}

/*
 * Palette catégorielle pour les badges de Rôle (ancienne palette des écrans Profils et Rôles & permissions, supprimés au sous-lot 5.3 ; conservée, réutilisable) — 8 teintes
 * à ordre fixe, validées via la skill dataviz (references/palette.md). Assignation : couleur
 * choisie explicitement par un Admin (colonne `role.couleur`, écran "Rôles & permissions", ajouté
 * le 22/09/2026), avec repli calculé à partir de l'id du Rôle tant qu'aucun choix n'a été fait
 * (cf. RoleModel::couleurEffective()) — pas un simple calcul par position alphabétique comme
 * avant cette date. Contraste : couleur pleine en fond, texte blanc ou foncé selon la teinte
 * (cf. --role-N-fg ci-dessous, retour de Matthias du 22/09/2026 (2)) — teinte et libellé du Rôle
 * toujours affichés ensemble, jamais la couleur seule pour porter l'identité.
 */
:root {
  --role-1: #2976d2;
  --role-2: #eb6834;
  --role-3: #1baf7a;
  --role-4: #eda100;
  --role-5: #e87ba4;
  --role-6: #008300;
  --role-7: #4a3aa7;
  --role-8: #d14342;

  /*
   * Couleur de texte par teinte de Rôle — ajoutée le 22/09/2026 (retour de Matthias : couleur
   * pleine + texte qui "ressort", plutôt que fond très légèrement teinté + texte neutre). Les 8
   * teintes ci-dessus n'offrent pas toutes un contraste AA (4.5:1) suffisant avec du texte blanc
   * (vérifié : #2976d2, #008300, #4a3aa7, #d14342 oui ; #eb6834, #1baf7a, #eda100, #e87ba4 non,
   * texte foncé nécessaire) — seul le texte s'adapte par teinte, la palette reste celle que
   * Matthias a choisie sur l'écran "Rôles & permissions".
   *
   * CORRECTIF DU 04/10/2026 (2e relecture critique/sécurité du 23/09/2026, point signalé à
   * Matthias puis tranché par lui) : un recalcul indépendant du contraste réel a montré que les
   * 2 teintes d'origine n'atteignaient pas 4.5:1 : #2a78d6 (texte blanc, 4.42) et #e34948 (texte
   * foncé, 4.17 ; 3.95 en blanc). Matthias a choisi de retoucher légèrement ces 2 teintes plutôt
   * que de garder l'écart : `--role-1` et `--role-8` très légèrement assombris (facteur ~0.98 et
   * ~0.92) pour atteindre 4.55 et 4.57:1 avec le blanc — écart visuel minime, les 6 autres teintes
   * n'ont pas bougé. Relecture du 04/10/2026 : `--role-8-fg` était resté en texte foncé (3.60 avec
   * la nouvelle teinte, pire qu'avant) ; passé en blanc pour que le correctif tienne réellement.
   */
  --role-1-fg: #ffffff;
  --role-2-fg: #1f1f1f;
  --role-3-fg: #1f1f1f;
  --role-4-fg: #1f1f1f;
  --role-5-fg: #1f1f1f;
  --role-6-fg: #ffffff;
  --role-7-fg: #ffffff;
  --role-8-fg: #ffffff;
}

.badge-role {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
}

/*
 * Mapping numéro → couleur/texte posé une seule fois par teinte (--role-couleur/--role-couleur-fg),
 * réutilisé par les 3 familles de composants qui en ont besoin (.badge-role-N, .badge-role-N-fond,
 * .chip-tag-role-N ci-dessous) — plutôt que de répéter la même formule 8 fois par famille (24
 * lignes quasi identiques avant ce regroupement, corrigé en relecture critique/sécurité du
 * 22/09/2026). Fonctionne car chaque élément ne porte jamais qu'une seule de ces 3 classes à la fois.
 */
.badge-role-1, .badge-role-1-fond, .chip-tag-role-1 { --role-couleur: var(--role-1); --role-couleur-fg: var(--role-1-fg); }
.badge-role-2, .badge-role-2-fond, .chip-tag-role-2 { --role-couleur: var(--role-2); --role-couleur-fg: var(--role-2-fg); }
.badge-role-3, .badge-role-3-fond, .chip-tag-role-3 { --role-couleur: var(--role-3); --role-couleur-fg: var(--role-3-fg); }
.badge-role-4, .badge-role-4-fond, .chip-tag-role-4 { --role-couleur: var(--role-4); --role-couleur-fg: var(--role-4-fg); }
.badge-role-5, .badge-role-5-fond, .chip-tag-role-5 { --role-couleur: var(--role-5); --role-couleur-fg: var(--role-5-fg); }
.badge-role-6, .badge-role-6-fond, .chip-tag-role-6 { --role-couleur: var(--role-6); --role-couleur-fg: var(--role-6-fg); }
.badge-role-7, .badge-role-7-fond, .chip-tag-role-7 { --role-couleur: var(--role-7); --role-couleur-fg: var(--role-7-fg); }
.badge-role-8, .badge-role-8-fond, .chip-tag-role-8 { --role-couleur: var(--role-8); --role-couleur-fg: var(--role-8-fg); }

.badge-role-1, .badge-role-2, .badge-role-3, .badge-role-4,
.badge-role-5, .badge-role-6, .badge-role-7, .badge-role-8 {
  background-color: var(--role-couleur);
  color: var(--role-couleur-fg);
}

/*
 * Sélecteur de couleur d'un Rôle (écran Rôles & permissions, ajouté le 22/09/2026, retour de
 * Matthias) — pastilles pleines dans les 8 teintes déjà utilisées par .badge-role-*, plutôt
 * qu'un sélecteur de couleur libre (cohérent avec la charte, jamais de couleur hors palette).
 */
.badge-role-1-fond, .badge-role-2-fond, .badge-role-3-fond, .badge-role-4-fond,
.badge-role-5-fond, .badge-role-6-fond, .badge-role-7-fond, .badge-role-8-fond {
  background-color: var(--role-couleur);
}

.pastille-choix-couleur {
  display: inline-block;
  cursor: pointer;
  margin: 0 var(--space-2) var(--space-2) 0;
}

.pastille-choix-couleur-cercle {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--gray-200);
}

.pastille-choix-couleur input:checked + .pastille-choix-couleur-cercle {
  border-color: var(--white);
  box-shadow: 0 0 0 2px var(--couleur-texte-principal);
}

.pastille-choix-couleur input:focus-visible + .pastille-choix-couleur-cercle {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
}

/*
 * Tags interactifs (cf. Commun\Vue::chipCheck()) dans les 8 teintes de Rôle — écran Profils
 * (sélection des Rôles préremplis), ajouté le 22/09/2026 : mêmes couleurs que .badge-role-xxx et
 * .pastille-choix-couleur-cercle (--role-couleur posé plus haut), pour qu'un Rôle porte toujours
 * la même couleur partout où il apparaît (liste "Rôles & permissions", sélecteur Profils...).
 */
.chip-check-input:checked + .chip-tag-role-1,
.chip-check-input:checked + .chip-tag-role-2,
.chip-check-input:checked + .chip-tag-role-3,
.chip-check-input:checked + .chip-tag-role-4,
.chip-check-input:checked + .chip-tag-role-5,
.chip-check-input:checked + .chip-tag-role-6,
.chip-check-input:checked + .chip-tag-role-7,
.chip-check-input:checked + .chip-tag-role-8 {
  background-color: var(--role-couleur);
  border-color: var(--role-couleur);
  color: var(--role-couleur-fg);
}

.ligne-cliquable {
  cursor: pointer;
}

.ligne-cliquable:hover {
  background-color: var(--action-100);
}

.ligne-cliquable:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: -2px;
}

/*
 * Icônes (Commun\Vue::icone(), cf. docs/design-system.md) — la couleur suit toujours le texte
 * environnant (stroke="currentColor" posé sur le SVG lui-même) ; flex-shrink évite qu'une icône
 * ne se déforme dans un conteneur flex étroit (ex. libellé de module long dans la barre latérale).
 */
.icone {
  flex-shrink: 0;
}

/*
 * Icône devant un titre de section (cf. docs/design-system.md §Icônes) — premier usage réel,
 * module Configuration graphique (21/09/2026). À réutiliser tel quel par les prochains modules
 * plutôt que de redéclarer une variante locale. Couleur en --couleur-accent (pas le token fixe
 * --action-700, corrigé en relecture critique/sécurité le 21/09/2026) : ce module rend
 * justement cette couleur configurable par l'Admin, ses propres icônes de titre doivent la
 * suivre comme le reste de l'interface (liens, boutons, focus).
 */
.icone-titre {
  width: 20px;
  height: 20px;
  color: var(--couleur-accent);
  margin-right: var(--space-2);
  vertical-align: -4px;
}

/*
 * Raccourci "couleur de marque" (module Configuration graphique) — cible tactile de 48×48px,
 * padding réduit à 4px (retour Matthias du 21/09/2026 : la pastille visible restait trop petite
 * malgré une cible tactile déjà conforme) pour que la couleur elle-même reste bien visible.
 */
.raccourci-couleur-marque {
  width: 48px;
  height: 48px;
  padding: 4px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  background-clip: content-box;
  cursor: pointer;
  flex-shrink: 0;
}

.raccourci-couleur-marque:hover,
.raccourci-couleur-marque:focus-visible {
  border-color: var(--gray-400);
}

.raccourci-couleur-marque:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
}

/*
 * Pastille principale d'un champ couleur (module Configuration graphique) — remplace l'ancien
 * duo "code hexa + petit sélecteur" (retour Matthias du 21/09/2026 : voir la couleur, cliquer
 * dessus pour ouvrir le nuancier natif du navigateur, jamais de code affiché). Grand format
 * (64px) pour que ce soit le repère visuel principal du champ, pas un simple accessoire.
 */
.pastille-couleur-principale {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
}

.pastille-couleur-principale::-webkit-color-swatch-wrapper {
  padding: 0;
}

.pastille-couleur-principale::-webkit-color-swatch {
  border: none;
  border-radius: var(--radius-md);
}

.pastille-couleur-principale::-moz-color-swatch {
  border: none;
  border-radius: var(--radius-md);
}

.pastille-couleur-principale:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
}

.pastille-couleur-principale.is-invalid {
  border-color: var(--danger-700);
}

/*
 * Layout applicatif commun (barre latérale + barre du haut), cf. commun/Layout.php —
 * brique Navigation, Lot 1. Retouche visuelle du 19/09/2026 (retour Matthias : rendu jugé trop
 * plat) — s'appuie uniquement sur les tokens déjà validés (docs/palette-branding.md), pas de
 * nouvelle couleur : liseré dégradé reprenant les trois teintes de marque du logo, légère
 * profondeur sur la barre du haut, coin actif du menu plus marqué.
 */
.app-topbar {
  background-color: var(--couleur-banniere);
  box-shadow: 0 1px 0 var(--gray-200), var(--shadow-md);
  position: relative;
  z-index: 2;
}

.app-topbar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-violet), var(--brand-amber));
}

.app-topbar__logo {
  height: 28px;
  width: auto;
  transition: opacity 0.15s ease;
  /* Téléphone (400 px) : la barre débordait de 6 px (logo + bouton de déconnexion), trouvé par
     les tests automatiques du 04/10/2026. Le logo peut désormais rétrécir sans se déformer. */
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.app-topbar > div:first-child,
.app-topbar > div:first-child > a {
  min-width: 0;
}

/*
 * Affordance de clic sur le logo (retour Matthias du 21/09/2026) : le lien vers l'accueil
 * existait déjà (commun/Layout.php, <a href="/">) mais ne donnait aucun indice visuel d'être
 * cliquable — léger effet au survol/focus pour le rendre perceptible.
 */
.app-topbar a:hover .app-topbar__logo,
.app-topbar a:focus-visible .app-topbar__logo {
  opacity: 0.8;
}

.app-topbar a:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/*
 * Bug corrigé le 21/09/2026 (retour Matthias : la barre de gauche n'avait pas la couleur de
 * bannière, et la couleur de fond restait invisible) : au-delà du seuil desktop, Bootstrap
 * applique à `.offcanvas-lg` un fond `transparent !important` (vérifié dans le CSS compilé
 * officiel) — un `!important` l'emporte sur n'importe quelle spécificité de sélecteur, y compris
 * un id. Sans fond propre, la barre latérale laissait transparaître celui de `.app-layout`
 * derrière (--couleur-fond) au lieu de --couleur-banniere. Corrigé en ciblant l'id
 * `#app-sidebar` (déjà posé dans commun/Layout.php) ET en posant `!important` à notre tour —
 * seul moyen de contrer explicitement le `!important` de Bootstrap sur cette même propriété.
 */
#app-sidebar {
  background-color: var(--couleur-banniere) !important;
  width: 260px;
}

/*
 * Panneau latéral de fiche (création/modification), ajouté le 22/09/2026 (retour de Matthias :
 * la pop-up centrée était trop petite pour lire confortablement une fiche à plusieurs onglets —
 * préférence pour un panneau qui s'ouvre depuis la droite et occupe une bonne partie de l'écran,
 * "à la Notion"). Remplace `.modal-lg`/`.modal-dialog-scrollable` pour toute fiche de
 * création/modification (Client, Ressource, Profil, Rôle, valeur de Paramètres) — construit sur
 * le composant Bootstrap `offcanvas` (déjà utilisé par la barre de navigation mobile,
 * `#app-sidebar` ci-dessus), pas un composant maison : hérite gratuitement de son
 * accessibilité (focus trap, fermeture Échap) et de son JS (`data-bs-toggle="offcanvas"`).
 * Les pop-ups de confirmation (archivage...) restent des `.modal` classiques, volontairement
 * petites — ce n'est pas ce que ce retour visait.
 *
 * Largeur "deux tiers de l'écran" plafonnée à 960px (au-delà, un formulaire aussi large devient
 * difficile à lire, même sur un très grand écran) ; pleine largeur sous le seuil mobile (`sm`),
 * où "deux tiers" serait trop étroit pour rester utilisable.
 *
 * `!important` sur `width` (retour de Matthias du 22/09/2026 : le panneau ne prenait presque pas
 * de largeur malgré `--bs-offcanvas-width` posée ci-dessus) — Bootstrap fixe lui-même `width:
 * var(--bs-offcanvas-width)` sur `.offcanvas-end` avec la même spécificité qu'ici (une seule
 * classe), la variable seule ne suffisait donc pas à garantir la victoire dans tous les cas.
 * Même situation déjà rencontrée et corrigée de la même façon pour `#app-sidebar` ci-dessus.
 */
.panel-fiche {
  --bs-offcanvas-width: min(66vw, 960px);
  width: min(66vw, 960px) !important;
}

@media (max-width: 575.98px) {
  .panel-fiche {
    --bs-offcanvas-width: 100vw;
    width: 100vw !important;
  }
}

/* Le formulaire remplit tout le panneau (même patron flex que .offcanvas lui-même) pour que le
   pied (Annuler/Enregistrer) reste visible en bas, hors de la zone qui défile. */
.panel-fiche-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* min-height: 0 : sans lui, un corps de formulaire plus haut que l'écran (mobile) ne défile pas et recouvre le pied. */
.panel-fiche-form > .offcanvas-body {
  min-height: 0;
}

.panel-fiche-pied {
  flex-shrink: 0;
}

/* Opportunité : tableau Kanban. Colonnes côte à côte avec défilement horizontal ; sur mobile,
   chaque colonne prend presque toute la largeur et s'aligne au défilement. */
.kanban {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 0.75rem;
}

.kanban-colonne {
  /* Les colonnes se partagent toute la largeur disponible, et défilent seulement quand l'écran est trop étroit. */
  flex: 1 1 12rem;
  min-width: 12rem;
  background-color: var(--surface-kanban);
  border-radius: var(--radius-md);
  padding: 0.6rem;
  border: 2px solid transparent;
}

.kanban-colonne.kanban-survol {
  border-color: var(--bs-primary);
}

.kanban-entete {
  margin-bottom: 0.6rem;
}

.kanban-corps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 2.5rem;
}

.kanban-colonne-repliee .kanban-corps {
  display: none;
}

.kanban-colonne-repliee {
  flex: 0 1 10rem;
  min-width: 9rem;
}

.kanban-carte {
  background-color: var(--white);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.7rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.kanban-carte[draggable="true"] {
  cursor: grab;
}

@media (max-width: 767.98px) {
  .kanban {
    scroll-snap-type: x mandatory;
  }

  .kanban-colonne,
  .kanban-colonne-repliee {
    flex: 0 0 85vw;
    min-width: 0;
    scroll-snap-align: start;
  }
}

.app-layout {
  background-color: var(--couleur-fond);
}

.app-content {
  background-color: var(--couleur-fond);
  min-width: 0; /* évite qu'un contenu large (tableau) ne fasse déborder le flex parent */
}

.nav-pills .nav-link {
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--couleur-accent);
  box-shadow: var(--shadow-md);
}

.nav-pills .nav-link:not(.active):hover {
  background-color: var(--gray-100);
}

/*
 * Pastilles colorées par catégorie de liste (onglet "Paramètres" de Ressources & Rôles,
 * ajouté le 22/09/2026 suite au retour de Matthias — premier jet jugé trop terne). Fond teinté
 * (color-mix) volontairement conservé ici (contrairement à .badge-role/.tag-*, passés en couleur
 * pleine le 22/09/2026 (2)) : ce n'est pas un tag de texte mais un fond de pastille d'icône,
 * jamais la teinte seule pour porter l'information (toujours doublée du libellé). Réutilise les
 * 3 couleurs de marque (bleu/violet/ambre, cf. --brand-*) plutôt que la palette catégorielle des
 * Rôles, pour ne pas laisser croire que ces listes sont liées aux Rôles.
 */
.parametre-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.parametre-icone .icone {
  width: 18px;
  height: 18px;
}

.parametre-icone-bleu { background-color: var(--tag-bleu-bg); color: var(--tag-bleu-fg); }
.parametre-icone-violet { background-color: var(--tag-violet-bg); color: var(--tag-violet-fg); }
.parametre-icone-ambre { background-color: var(--tag-ambre-bg); color: var(--tag-ambre-fg); }
.parametre-icone-accent { background-color: var(--tag-accent-bg); color: var(--tag-accent-fg); }

.parametre-categorie-carte {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.parametre-categorie-carte:hover {
  border-color: var(--gray-300);
}

.parametre-categorie-carte:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
}

/*
 * Filet de secours générique : si une future catégorie utilise un accent sans classe
 * .parametre-categorie-carte-* dédiée (typo, ou couleur pas encore prévue), la sélection reste
 * visible (bordure + ombre) plutôt que de ne plus rien afficher du tout.
 */
.parametre-categorie-carte.active {
  border-color: var(--couleur-accent);
  box-shadow: var(--shadow-md);
}

/*
 * État sélectionné = fond teinté à la couleur de la catégorie (pas juste une bordure) — retour
 * de Matthias du 22/09/2026 : la sélection doit se voir directement sur la carte, comme un
 * onglet actif, plutôt que d'être répétée dans un titre en dessous.
 */
/*
 * box-shadow non répété ici : déjà posé par le filet de secours générique .active ci-dessus.
 * Pourcentages volontairement différents de --tag-*-bg (10-14 % ici contre 16-20 % pour un tag/
 * icône) : cette carte est une grande surface cliquable, pas une petite pastille — un fond aussi
 * saturé que .tag-* y serait trop appuyé visuellement. Décision assumée, pas un oubli d'harmoniser
 * avec les tokens --tag-* (relevé et clarifié en relecture critique/sécurité du 22/09/2026).
 */
.parametre-categorie-carte.active.parametre-categorie-carte-bleu { background-color: color-mix(in srgb, var(--brand-blue) 10%, var(--white)); border-color: var(--brand-blue); }
.parametre-categorie-carte.active.parametre-categorie-carte-violet { background-color: color-mix(in srgb, var(--brand-violet) 10%, var(--white)); border-color: var(--brand-violet); }
.parametre-categorie-carte.active.parametre-categorie-carte-ambre { background-color: color-mix(in srgb, var(--brand-amber) 14%, var(--white)); border-color: var(--brand-amber); }
.parametre-categorie-carte.active.parametre-categorie-carte-accent { background-color: color-mix(in srgb, var(--couleur-accent) 10%, var(--white)); border-color: var(--couleur-accent); }

.parametre-vide {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--gray-600);
}

/*
 * En-tête de colonne triable (Commun\Vue::enteteTri, Lot 19.2 bis, 08/10/2026) : la flèche est toujours visible
 * (double flèche sur une colonne non triée, simple flèche sur la colonne triée), la colonne triée est en gras.
 */
.tri-entete {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.tri-entete:hover,
.tri-entete:focus-visible {
  color: var(--couleur-accent, inherit);
}
.tri-fleche {
  color: var(--gray-600);
  font-weight: 400;
  margin-left: 2px;
}
.tri-actif {
  font-weight: 700;
}
.tri-actif .tri-fleche {
  color: inherit;
  font-weight: 700;
}

/*
 * Listes à colonnes personnalisables (Commun\ListeAffichage, Lot 19.3) : mise en page fixe, chaque colonne a la largeur
 * de son col dans le colgroup, la colonne Actions absorbe le reste. Le texte trop long est coupé par des points de
 * suspension (la largeur se règle en tirant le bord droit de l en-tete, ou depuis le panneau Colonnes).
 */
.liste-ajustable {
  table-layout: fixed;
  width: 100%;
}
.liste-ajustable th,
.liste-ajustable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Le contour de focus clavier ne doit pas être rogné par overflow:hidden (WCAG 2.4.7). */
.liste-ajustable th a:focus-visible,
.liste-ajustable td a:focus-visible,
.liste-ajustable td button:focus-visible,
.liste-ajustable td input:focus-visible {
  outline-offset: -2px;
}
.liste-ajustable th[data-colonne] {
  position: relative;
  padding-right: 14px;
}
.col-poignee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}
.col-poignee::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  right: 4px;
  width: 2px;
  background: var(--gray-300);
  border-radius: 1px;
}
.col-poignee:hover::after,
.col-poignee.col-poignee-active::after {
  background: var(--couleur-accent);
}
.liste-ajustable.liste-redimensionnement {
  cursor: col-resize;
  user-select: none;
}
.liste-ajustable th.col-deposer-avant {
  box-shadow: inset 3px 0 0 var(--couleur-accent);
}

/*
 * Barre du haut des listes (Commun\ListeBarre, Lot 19.8) : recherche, Filtre, menus Affichage et Données.
 * Bureau : tout sur une ligne, les menus à droite. Mobile : la recherche prend la ligne, puis les boutons se partagent
 * la largeur (cibles tactiles de 40 px).
 */
.barre-liste {
  padding: 0.5rem 0.75rem;
}
.barre-liste-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.barre-liste-recherche {
  flex: 1 1 16rem;
  min-width: 0;
}
.barre-liste-menus {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.barre-liste-menu {
  min-width: 15rem;
  max-width: min(22rem, 92vw);
}
.barre-liste-menu .dropdown-item {
  white-space: normal;
}
@media (max-width: 767.98px) {
  .barre-liste-recherche {
    flex-basis: 100%;
  }
  .barre-liste-menus {
    display: contents;
  }
  .barre-liste-ligne > .btn,
  .barre-liste-ligne .dropdown {
    flex: 1 1 0;
  }
  .barre-liste .btn,
  .barre-liste .form-control {
    min-height: 40px;
  }
  .barre-liste [data-recherche-bouton] {
    min-width: 40px;
  }
  .barre-liste-ligne .dropdown > .btn {
    width: 100%;
  }
}

/* Densité compacte des lignes (réglage de la personne) ; sur mobile la liste reste toujours confortable. */
.liste-ajustable.liste-compacte > tbody > tr > td {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
@media (max-width: 767.98px) {
  .liste-ajustable.liste-compacte > tbody > tr > td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* Panneau Colonnes : une ligne par colonne (poignée, case, libellé, boutons). */
.panel-colonnes {
  --bs-offcanvas-width: min(92vw, 520px);
  width: min(92vw, 520px) !important;
}
.colonnes-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--white);
  margin-bottom: 0.35rem;
}
.colonnes-item.colonnes-glisse {
  opacity: 0.45;
}
.colonnes-item.colonnes-deposer-avant {
  box-shadow: 0 -3px 0 var(--couleur-accent);
}
.colonnes-poignee {
  cursor: grab;
  color: var(--gray-600);
  user-select: none;
}
.colonnes-libelle {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.colonnes-item:not(.colonnes-affichee) .colonnes-libelle {
  color: var(--gray-600);
}
.colonnes-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.colonnes-largeur {
  min-width: 3.6rem;
  text-align: center;
}

/*
 * Tag générique (pilule colorée) pour une valeur de liste de référence — cf. Commun\Vue::tag(),
 * introduit le 22/09/2026 (retour de Matthias sur l'onglet Paramètres : besoin d'un langage
 * visuel réutilisable d'écran en écran, "à la Notion/Monday", plutôt qu'un traitement par écran).
 * Mêmes couleurs que .parametre-icone-* : la couleur d'un tag reflète toujours la catégorie de
 * liste_valeur dont la valeur vient, cohérent partout où elle est réutilisée.
 */
.tag {
  /* Règle commune à toutes les listes (demande de Matthias, 08/11/2026) : texte un peu plus petit, et un libellé trop
     long pour sa colonne est coupé par « … » (le libellé complet s'affiche au survol, attribut title de Vue::tag()).
     La largeur des colonnes n'est jamais adaptée automatiquement : elle reste celle réglée par la personne. */
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

/* Couleur pleine + texte blanc (bleu/violet/gris/accent) ou foncé (ambre, cf. --tag-ambre-solid
   ci-dessus) — retour de Matthias du 22/09/2026, remplace le fond très légèrement teinté. */
.tag-bleu { background-color: var(--tag-bleu-solid); color: #ffffff; }
.tag-violet { background-color: var(--tag-violet-solid); color: #ffffff; }
.tag-ambre { background-color: var(--tag-ambre-solid); color: #1f1f1f; }
.tag-accent { background-color: var(--tag-accent-solid); color: #ffffff; }
.tag-gris { background-color: var(--tag-gris-solid); color: #ffffff; }
.tag-rouge { background-color: var(--danger-700); color: #ffffff; } /* retard, alerte : blanc sur #d92d20 = 4,8:1 (AA), identique en jour et en nuit */
.tag-vert { background-color: var(--success-700); color: #ffffff; } /* validé, complet : blanc sur #15803d = 5,0:1 (AA), identique en jour et en nuit */

/*
 * Case à cocher stylée en tag coloré cliquable (cf. Commun\Vue::chipCheck()) — checkbox natif
 * masqué visuellement (`.visually-hidden` Bootstrap, reste focusable au clavier), label visible
 * qui se colore quand coché. Introduit le 22/09/2026 (retour de Matthias : uniformiser fiches et
 * listes avec le même langage "tag"). Mêmes couleurs que .tag-xxx et .parametre-icone-xxx : un
 * chip non coché reste neutre (gris), coché il prend la couleur de sa catégorie.
 */
.chip-check {
  display: inline-block;
  margin: 0 var(--space-2) var(--space-2) 0;
}

.chip-check-label {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--gray-300);
  background-color: var(--white);
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip-check-label:hover {
  border-color: var(--gray-400);
}

.chip-check-input:focus-visible + .chip-check-label {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
}

.chip-check-input:checked + .chip-tag-bleu { background-color: var(--tag-bleu-solid); border-color: var(--tag-bleu-solid); color: #ffffff; }
.chip-check-input:checked + .chip-tag-violet { background-color: var(--tag-violet-solid); border-color: var(--tag-violet-solid); color: #ffffff; }
.chip-check-input:checked + .chip-tag-ambre { background-color: var(--tag-ambre-solid); border-color: var(--tag-ambre-solid); color: #1f1f1f; }
.chip-check-input:checked + .chip-tag-accent { background-color: var(--tag-accent-solid); border-color: var(--tag-accent-solid); color: #ffffff; }
.chip-check-input:checked + .chip-tag-gris { background-color: var(--tag-gris-solid); border-color: var(--tag-gris-solid); color: #ffffff; }

/* ---------- Matrice des droits éditable (droits-acces, sous-lot 5.9) ---------- */
.matrice { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 820px; }
.matrice th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600); font-weight: 600; padding: .6rem .4rem; border-bottom: 1px solid var(--gray-200); text-align: center; white-space: nowrap; }
.matrice th:first-child, .matrice th:nth-child(2) { text-align: left; }
.matrice td { padding: .35rem .4rem; border-bottom: 1px solid var(--gray-100); text-align: center; vertical-align: middle; }
.matrice td:first-child { text-align: left; font-weight: 500; }
.matrice td:nth-child(2) { text-align: left; color: var(--gray-600); font-size: .9rem; }
.matrice tr.module-debut td { border-top: 1px solid var(--gray-200); }
.matrice tr.modifiee td { background: var(--surface-modifiee); }
.matrice tr.modifiee td:first-child { box-shadow: inset 3px 0 0 var(--warning-500); }
.matrice .portee { font-size: .85rem; border-radius: 999px; min-width: 8.5rem; }

/* Case = pastille cliquable : la vraie case à cocher est masquée visuellement mais jamais retirée (clavier, lecteurs d'écran). Coché = couleur pleine ET coche, jamais la couleur seule. */
.droit { position: relative; display: inline-block; margin: 0; }
.droit input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.droit span { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: .55rem; border: 1.5px solid var(--gray-300); color: transparent; background: #ffffff; transition: background-color .12s, border-color .12s; font-weight: 700; }
.droit input:hover + span { border-color: var(--action-700); }
.droit input:checked + span { background: var(--action-700); border-color: var(--action-700); color: #ffffff; }
.droit input:checked + span::before { content: "✓"; }
.droit input:focus-visible + span { outline: 3px solid var(--brand-blue); outline-offset: 2px; }
.droit.sensible input:checked + span { background: var(--danger-700); border-color: var(--danger-700); }

.matrice-edition .barre-enregistrement { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; background: #ffffff; border-top: 1px solid var(--gray-200); padding: .7rem .25rem; box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); }

/*
 * Cartes d'onglet et lignes de liste cliquables (06/10/2026, retour de Matthias — docs/design-system.md,
 * « Cartes d'onglet et lignes de liste cliquables »). Habillage seul : aucun comportement.
 */
.carte-onglet {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(31, 31, 31, 0.05);
  margin-bottom: var(--space-4);
}

.carte-onglet-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray-100);
}

.carte-onglet-titre {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.carte-onglet-compteur {
  font-weight: 400;
  color: var(--gray-600);
  font-size: 0.85rem;
}

.carte-onglet-corps {
  padding: var(--space-4);
}

.carte-onglet-corps-liste {
  padding: 0;
}

.liste-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.liste-ligne + .liste-ligne {
  border-top: 1px solid var(--gray-100);
}

.liste-ligne-lien,
.liste-ligne-fixe {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  color: inherit;
  text-decoration: none;
}

.liste-ligne-lien:hover {
  background: var(--gray-50);
  color: inherit;
}

.liste-ligne-lien:focus-visible {
  outline: 2px solid var(--action-700);
  outline-offset: -2px;
}

.liste-ligne-principal {
  min-width: 0;
  overflow-wrap: anywhere;
}

.liste-ligne-nom {
  font-weight: 600;
}

.liste-ligne-secondaire {
  color: var(--gray-600);
  font-size: 0.85rem;
}

.liste-ligne-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  min-width: 0;
}

.liste-ligne-fleche {
  margin-left: auto;
  color: var(--gray-400);
}

@media (max-width: 575.98px) {
  .liste-ligne-lien,
  .liste-ligne-fixe {
    grid-template-columns: minmax(0, 1fr);
  }

  .liste-ligne-fleche {
    display: none;
  }
}

/* Barre de répartition par étape : segments proportionnels, contour et séparateurs pour ne pas dépendre de la couleur seule
   (la légende dit les valeurs en texte). */
.barre-repartition {
  display: flex;
  height: 16px;
  border: 1px solid var(--gray-600);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--white);
}

.barre-repartition-segment {
  height: 100%;
  min-width: 4px;
  border-right: 2px solid var(--white);
}

.barre-repartition-segment:last-child {
  border-right: 0;
}

.legende-repartition {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.legende-repartition li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.legende-repartition-pastille {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.legende-repartition-valeurs {
  margin-left: auto;
  color: var(--gray-600);
  white-space: nowrap;
}

.repartition-couleur-1 { background: var(--role-1); }
.repartition-couleur-2 { background: var(--role-2); }
.repartition-couleur-3 { background: var(--role-3); }
.repartition-couleur-4 { background: var(--role-4); }
.repartition-couleur-5 { background: var(--role-5); }
.repartition-couleur-6 { background: var(--role-6); }
.repartition-couleur-7 { background: var(--role-7); }
.repartition-couleur-8 { background: var(--role-8); }
.repartition-couleur-perdu { background: var(--gray-400); }

/* ---------------------------------------------------------------------------------------------------------------
   Bleu Bootstrap aligné sur la charte (09/10/2026, retour de Matthias : « plein de bleus différents »).
   Bootstrap garde son bleu par défaut (#0d6efd) pour les boutons « primary », les boutons en contour, les onglets
   « pills » actifs, les cases cochées et l'anneau de focus des champs. On les rattache à la couleur d'accent de la
   charte (--couleur-accent, #007db2 par défaut : la version du bleu du logo qui passe le contraste AA avec du texte
   blanc), donc ils suivent aussi la configuration graphique. Survol et clic = même teinte assombrie.
   --------------------------------------------------------------------------------------------------------------- */
:root {
  --accent-survol: color-mix(in srgb, var(--couleur-accent) 85%, #000000);
  --accent-clic: color-mix(in srgb, var(--couleur-accent) 72%, #000000);
  --accent-halo: color-mix(in srgb, var(--couleur-accent) 28%, transparent);
  --bs-link-color: var(--couleur-lien);
  --bs-link-hover-color: var(--couleur-lien-survol);
}

.btn-primary {
  --bs-btn-bg: var(--couleur-accent);
  --bs-btn-border-color: var(--couleur-accent);
  --bs-btn-hover-bg: var(--accent-survol);
  --bs-btn-hover-border-color: var(--accent-survol);
  --bs-btn-active-bg: var(--accent-clic);
  --bs-btn-active-border-color: var(--accent-clic);
  --bs-btn-disabled-bg: var(--couleur-accent);
  --bs-btn-disabled-border-color: var(--couleur-accent);
  --bs-btn-focus-shadow-rgb: 0, 125, 178;
}

.btn-outline-primary {
  --bs-btn-color: var(--couleur-accent);
  --bs-btn-border-color: var(--couleur-accent);
  --bs-btn-hover-bg: var(--couleur-accent);
  --bs-btn-hover-border-color: var(--couleur-accent);
  --bs-btn-active-bg: var(--accent-survol);
  --bs-btn-active-border-color: var(--accent-survol);
  --bs-btn-disabled-color: var(--couleur-accent);
  --bs-btn-disabled-border-color: var(--couleur-accent);
  --bs-btn-focus-shadow-rgb: 0, 125, 178;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--couleur-accent);
}

.bg-primary { background-color: var(--couleur-accent) !important; }
.text-primary { color: var(--couleur-accent) !important; }
.border-primary { border-color: var(--couleur-accent) !important; }

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--couleur-accent);
  border-color: var(--couleur-accent);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--couleur-accent);
  box-shadow: 0 0 0 0.25rem var(--accent-halo);
}

/*
 * Choix en pastilles (11/10/2026, retour de Matthias : « beaucoup de lignes, une par une »).
 * Les listes à choix multiple utilisent .chip-check tel quel ; les listes à choix unique de 5 options ou moins
 * sont transformées par assets/js/listes-graphiques.js en boutons .chip-bouton qui reprennent le même aspect.
 */
.chip-bouton {
  font-family: inherit;
  line-height: inherit;
  appearance: none;
}

.chip-bouton:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
}

.chip-bouton.chip-choisi.chip-tag-accent {
  background-color: var(--tag-accent-solid);
  border-color: var(--tag-accent-solid);
  color: #ffffff;
}

/* Lecture seule : pas de transparence sur ce qui est choisi (la valeur doit rester lisible, contraste conservé). */
.chip-check-input:disabled + .chip-check-label,
.chip-bouton:disabled {
  cursor: default;
}

.chip-check-input:disabled:not(:checked) + .chip-check-label,
.chip-bouton:disabled:not(.chip-choisi) {
  opacity: 0.65;
}

/* Sur un champ de formulaire, une pastille trop longue passe à la ligne plutôt que de déborder (mobile). */
.champ-decouverte .chip-check-label,
.question-choix .chip-check-label {
  white-space: normal;
  text-align: left;
}

/*
 * Pastille de couleur d'un poste (écran Droits & accès, RES-06, 11/10/2026) : cercle devant le nom, dans les
 * huit teintes de .badge-role-N-fond ; « aucune couleur » = cercle vide en pointillés dans le sélecteur.
 */
.pastille-poste {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: var(--space-2);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.pastille-choix-couleur-cercle.pastille-aucune {
  background: var(--white);
  border: 2px dashed var(--gray-200);
}

/* En-tête d'une carte de poste ou d'habilitation (Droits & accès) : nom et étiquettes passent à la ligne sur mobile au lieu de déborder. */
.carte-droits-entete {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* ---- Écran « Droits & accès » unique et fenêtre « Droits » (DRT-05, moteur v2) ---- */
.drt-grille-defilement {
    overflow-x: auto;
    max-width: 100%;
}
.drt-grille-defilement:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}
.drt-grille th,
.drt-grille td {
    white-space: nowrap;
}
.drt-grille .drt-col-service {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 11rem;
    max-width: 14rem;
    background: var(--white);
    white-space: normal;
}
.drt-grille thead .drt-col-service {
    z-index: 3;
    background: var(--surface-entete);
}
.drt-grille .drt-ligne-admin > * {
    background: var(--surface-admin);
}
.drt-grille .drt-ligne-admin .drt-col-service {
    background: var(--surface-admin);
}
.drt-grille tr.drt-modifiee > td,
.drt-grille tr.drt-modifiee > th {
    background: var(--surface-modifiee);
}
.drt-grille-defilement .drt-entete-onglet {
    min-width: 8.5rem;
    white-space: normal;
}
/* Modules réductibles de la grille (08/11/2026) : le nom du module est un bouton (▾ ouvert, ▸ réduit) ; réduit, le module
   n'occupe qu'une colonne « Droits » qui résume V / M / A / Val du service. */
.drt-module-bascule {
    background: none;
    border: 0;
    padding: 0.1rem 0.4rem;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    border-radius: 0.25rem;
}
.drt-module-bascule:hover { text-decoration: underline; }
.drt-module-bascule:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Module réduit : colonne étroite, le nom passe à la ligne (« Achats & préparation logistique » n'élargit plus la grille). */
.drt-grille .drt-entete-module.drt-reduit {
    width: 5.6rem;
    min-width: 5.6rem;
    max-width: 5.6rem;
    vertical-align: bottom;
}
.drt-grille .drt-entete-module.drt-reduit .drt-module-bascule {
    font-size: 0.78rem;
    line-height: 1.15;
    padding: 0.1rem 0.15rem;
    white-space: normal;
    overflow-wrap: break-word;
}
.drt-grille .drt-resume {
    width: 5.6rem;
    min-width: 5.6rem;
    max-width: 5.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}
.drt-cases {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}
.drt-case {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 1.6rem;
    cursor: pointer;
    margin: 0;
}
.drt-case .drt-input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
}
.drt-case-lettre {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--texte-doux);
}
.drt-case-inactive,
.drt-case-inactive .drt-input {
    cursor: not-allowed;
    opacity: 0.55;
}
.drt-case-vide {
    visibility: hidden;
    min-height: 1.6rem;
    cursor: default;
}
.drt-sensible {
    background: var(--surface-modifiee);
}
.drt-alerte:empty {
    display: none;
}
.drt-bouton-droits svg {
    width: 1em;
    height: 1em;
}

/* Fenêtre « Droits » : <dialog> natif, placé dans le panneau latéral ouvert */
.drt-dialogue {
    width: min(42rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.drt-dialogue[open] {
    display: flex;
    flex-direction: column;
}
.drt-dialogue::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.drt-dialogue-tete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bord-leger);
}
.drt-dialogue-corps {
    padding: 1rem;
    overflow-y: auto;
}
.drt-fenetre-table th[scope="row"] {
    font-weight: 500;
}
@media (max-width: 575.98px) {
    .drt-dialogue {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
    }
    .drt-grille .drt-col-service {
        min-width: 8.5rem;
    }
}

/* ==========================================================================
   MODE JOUR / NUIT (08/11/2026, palette validée par Matthias : docs/cadrage/maquette-mode-jour-nuit.html)
   Le thème est porté par l'attribut data-bs-theme de <html> (Bootstrap 5.3 adapte ses propres composants : champs, tableaux,
   fenêtres, menus). Il suit d'abord le réglage de l'ordinateur ; le choix de chacun est retenu par son navigateur (commun/Layout.php).
   Les couleurs de marque, les pastilles pleines et les boutons pleins ne changent pas. Contrastes vérifiés (WCAG AA).
   Règle de maintenance : jamais de couleur en dur dans un composant ; utiliser une variable ci-dessous (ou --white / --gray-*,
   qui s'inversent en nuit), sinon l'élément restera clair en mode nuit.
   ========================================================================== */
:root {
  /* Surfaces et textes qui changent en nuit (valeurs du jour = valeurs d'origine) */
  --surface-kanban: #eef1f5;
  --surface-modifiee: #fff8e1;
  --surface-entete: #f8f9fa;
  --surface-admin: #f1f3f5;
  --texte-doux: #495057;
  --bord-leger: #dee2e6;
  /* Textes de statut (distincts des fonds pleins --success-700 / --danger-700, qui portent du texte blanc) */
  --action-texte: var(--action-700);
  --success-texte: var(--success-700);
  --danger-texte: var(--danger-700);
  /* Liens */
  --couleur-lien: var(--couleur-accent);
  --couleur-lien-survol: var(--accent-survol);
  /* Logo : pastille claire en nuit (« Alive » est en noir pur, la charte interdit de l'inverser) */
  --logo-fond: transparent;
}

:root[data-bs-theme="dark"] {
  color-scheme: dark;
  /* Base : prend le pas sur « Configuration graphique » (écrite en ligne, avec la même spécificité, avant ce fichier) */
  --couleur-fond: #121519;
  --couleur-banniere: #1b1f24;
  --couleur-texte-principal: #eceff2;
  --couleur-texte-secondaire: #a7b0ba;
  --couleur-lien: #4cc3ff;
  --couleur-lien-survol: #8fd9ff;
  /* Gamme de gris inversée : --white = surface des cartes ; les gris clairs deviennent des surfaces sombres, les gris foncés du texte clair */
  --white: #1b1f24;
  --gray-50: #171b20;
  --gray-100: #232930;
  --gray-200: #343b43;
  --gray-300: #46505a;
  --gray-400: #7a8591;
  --gray-600: #a7b0ba;
  --gray-700: #cbd2d9;
  --gray-900: #eceff2;
  --surface-kanban: #171b20;
  --surface-modifiee: #3a2e0a;
  --surface-entete: #1f242a;
  --surface-admin: #232930;
  --texte-doux: #a7b0ba;
  --bord-leger: #343b43;
  --logo-fond: #ffffff;
  /* Statuts : fonds teintés sombres, textes clairs ; les fonds pleins (-700) gardent leur valeur */
  --action-100: color-mix(in srgb, var(--brand-blue) 22%, #1b1f24);
  --action-texte: #7fd4ff;
  --success-100: #12301f;
  --success-texte: #5fd48a;
  --danger-100: #3a1714;
  --danger-texte: #ff8a80;
  --warning-100: #3a2e0a;
  /* Pastilles : les fonds pleins ne changent pas ; les variantes teintées (pastilles d'icône) deviennent sombres */
  --tag-gris-fg: #a7b0ba;
  --tag-gris-solid: #5a5a5a;
  --tag-gris-bg: #232930;
  --tag-bleu-bg: color-mix(in srgb, var(--brand-blue) 22%, #1b1f24);
  --tag-bleu-fg: #7fd4ff;
  --tag-violet-bg: color-mix(in srgb, var(--brand-violet) 30%, #1b1f24);
  --tag-violet-fg: #e58ff0;
  --tag-ambre-bg: color-mix(in srgb, var(--brand-amber) 22%, #1b1f24);
  --tag-ambre-fg: #ffd666;
  --tag-accent-bg: color-mix(in srgb, var(--couleur-accent) 30%, #1b1f24);
  --tag-accent-fg: #7fd4ff;
  /* Bootstrap */
  --bs-body-bg: #1b1f24;
  --bs-body-color: #eceff2;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: #a7b0ba;
  --bs-secondary-bg: #232930;
  --bs-tertiary-color: #a7b0ba;
  --bs-tertiary-bg: #232930;
  --bs-border-color: #343b43;
  --bs-link-color: #4cc3ff;
  --bs-link-hover-color: #8fd9ff;
  --bs-link-color-rgb: 76, 195, 255;
  --bs-link-hover-color-rgb: 143, 217, 255;
}

/* Logo : pastille claire en nuit */
:root[data-bs-theme="dark"] .app-topbar__logo {
  background: var(--logo-fond);
  border-radius: 8px;
  padding: 3px 8px;
  box-sizing: content-box;
  max-width: calc(100% - 16px);
}

/* Bouton soleil / lune de la barre du haut */
.theme-bascule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.theme-bascule .theme-icone { font-size: 1rem; line-height: 1; }

/* Pastilles de rôle (écran Ressources) : fin liseré clair en nuit, pour que la teinte la plus foncée (rôle 7) reste visible */
:root[data-bs-theme="dark"] .badge-role,
:root[data-bs-theme="dark"] .badge-role-1-fond, :root[data-bs-theme="dark"] .badge-role-2-fond,
:root[data-bs-theme="dark"] .badge-role-3-fond, :root[data-bs-theme="dark"] .badge-role-4-fond,
:root[data-bs-theme="dark"] .badge-role-5-fond, :root[data-bs-theme="dark"] .badge-role-6-fond,
:root[data-bs-theme="dark"] .badge-role-7-fond, :root[data-bs-theme="dark"] .badge-role-8-fond {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Page de connexion (sans menu) : logo sur pastille claire en nuit */
:root[data-bs-theme="dark"] .marque-auth__logo {
  background: var(--logo-fond);
  border-radius: 10px;
  padding: 6px 12px;
  box-sizing: content-box;
  max-width: calc(100% - 24px);
}

/* Boutons « contour » de Bootstrap : leurs couleurs sont fixes (gris #6c757d, rouge #dc3545, accent), insuffisantes sur fond sombre.
   Variantes claires en nuit (contraste >= 4,5) ; le survol reprend un fond plein lisible. */
:root[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #a7b0ba;
  --bs-btn-border-color: #7a8591;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #46505a;
  --bs-btn-hover-border-color: #a7b0ba;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #46505a;
  --bs-btn-active-border-color: #a7b0ba;
  --bs-btn-disabled-color: #a7b0ba;
  --bs-btn-disabled-border-color: #7a8591;
}
:root[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #ff8a80;
  --bs-btn-border-color: #ff8a80;
  --bs-btn-hover-color: #1f1f1f;
  --bs-btn-hover-bg: #ff8a80;
  --bs-btn-hover-border-color: #ff8a80;
  --bs-btn-active-color: #1f1f1f;
  --bs-btn-active-bg: #ff8a80;
  --bs-btn-active-border-color: #ff8a80;
  --bs-btn-disabled-color: #ff8a80;
  --bs-btn-disabled-border-color: #ff8a80;
}
:root[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #4cc3ff;
  --bs-btn-border-color: #4cc3ff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--couleur-accent);
  --bs-btn-hover-border-color: var(--couleur-accent);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--couleur-accent);
  --bs-btn-active-border-color: var(--couleur-accent);
  --bs-btn-disabled-color: #4cc3ff;
  --bs-btn-disabled-border-color: #4cc3ff;
}

/* Textes colorés de Bootstrap (astérisque des champs obligatoires, messages) : valeurs fixes trop sombres sur fond sombre. */
:root[data-bs-theme="dark"] .text-danger { color: #ff8a80 !important; }
:root[data-bs-theme="dark"] .text-success { color: #5fd48a !important; }
:root[data-bs-theme="dark"] .text-primary { color: #4cc3ff !important; }

/* Fiche opportunité à deux niveaux (09/11/2026) : sous-onglets en pastilles, plus discrets que les groupes. */
.opp-sous-onglets .nav-link {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  color: var(--texte-doux, var(--gray-700));
}
.opp-sous-onglets .nav-link:not(.active):hover { background-color: var(--gray-100); }
.opp-sous-onglets .nav-link.active { color: #fff; }

/* Pastille ronde d'initiales d'une personne (temps d'avant-vente) : même couleur en jour et en nuit, blanc sur #1d4e89 = 8,9:1. */
.avatar-initiales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #1d4e89;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.avatar-initiales .btn-close { margin-left: 0.25rem; }
.puce-personne {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.125rem 0.5rem 0.125rem 0.125rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  font-size: 0.8125rem;
}
.puce-personne button { border: 0; background: none; padding: 0 0.125rem; line-height: 1; color: var(--bs-body-color); }

/* Bandeau de statut en haut de la fiche opportunité (09/11/2026) : une étape par statut, l'étape courante en couleur d'accent. */
.opp-bandeau-statut {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.opp-etape {
  flex: 1 0 auto;
  white-space: nowrap;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  cursor: pointer;
}
.opp-etape:hover:not(:disabled):not(.opp-etape-courante) { border-color: var(--couleur-accent); }
.opp-etape:disabled { cursor: default; opacity: 0.85; }
.opp-etape-courante { background: var(--couleur-accent); border-color: var(--couleur-accent); color: #fff; font-weight: 600; }
.opp-etape-perdu:not(.opp-etape-courante) { color: var(--danger-texte, #b02a37); }
.opp-etape-perdu.opp-etape-courante { background: #b02a37; border-color: #b02a37; color: #fff; }