/* ==========================================================================
   Composants du design system Vitalite
   --------------------------------------------------------------------------
   Chaque bloc remplace un motif qui etait ecrit en style inline, souvent
   duplique dans une dizaine de fichiers de l'ancienne application.

   Catalogue visuel : commun/assets/apercu.html
   ========================================================================== */


/* ==========================================================================
   1. En-tete d'application
   Remplace le bandeau construit en HTML inline dans portefeuille_vitalite.php
   (logo, bloc utilisateur a droite, barre de navigation a degrade).
   ========================================================================== */

.app-header {
  flex-shrink: 0;
  background-color: #fff;
}

/* Bandeau superieur : logo a gauche, identite de l'utilisateur a droite. */
.app-header .bandeau-identite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  background-color: var(--vit-surface);
}

.app-header .marque img {
  height: 42px;
  width: auto;
}

.app-header .utilisateur {
  text-align: right;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--vit-texte-doux);
}

.app-header .utilisateur .nom {
  font-weight: var(--vit-graisse-titre);
  color: var(--vit-texte);
}

/* Barre de navigation a degrade. */
.app-header .navbar {
  background: var(--vit-header-bg);
  box-shadow: var(--vit-ombre-entete);
}

.app-header .navbar-brand,
.app-header .navbar .titre-page {
  color: #fff;
  font-weight: var(--vit-graisse-titre);
  font-size: 1.25rem;
}

.app-header .nav-link {
  color: rgba(255, 255, 255, .9);
  border-radius: var(--vit-rayon-sm);
  padding: .4rem .7rem;
  transition: background-color var(--vit-transition), color var(--vit-transition);
}

.app-header .nav-link:hover,
.app-header .nav-link:focus,
.app-header .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, .2);
  text-decoration: none;
}

/* Entree dont l'ecran n'est pas encore livre. Le gris de Bootstrap serait
   illisible sur le degrade : elle reste blanche, simplement estompee. */
.app-header .nav-link.disabled {
  color: rgba(255, 255, 255, .45);
  cursor: default;
}

/* Compteur accole a un onglet (impayes) : pastille ronde en exposant. */
.app-header .nav-link .compteur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: .2em;
  padding: 0 .25rem;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
  color: var(--vit-primary-dark);
  background-color: #fff;
  border-radius: 50%;
}

.app-header .nav-link .compteur.vide {
  display: none;
}


/* ==========================================================================
   2. Boutons
   .btn-app remplace le <button class='btn' style='background:#239bd7;color:white'>
   recopie dans quatre fichiers du legacy.
   ========================================================================== */

.btn-app {
  color: #fff;
  background-color: var(--vit-secondary);
  border-color: var(--vit-secondary);
}

.btn-app:hover,
.btn-app:focus {
  color: #fff;
  background-color: var(--vit-secondary-hover);
  border-color: var(--vit-secondary-hover);
}

.btn-vitalite {
  color: #fff;
  background-color: var(--vit-primary);
  border-color: var(--vit-primary);
}

.btn-vitalite:hover,
.btn-vitalite:focus {
  color: #fff;
  background-color: var(--vit-primary-dark);
  border-color: var(--vit-primary-dark);
}


/* ==========================================================================
   3. Cartes et panneaux
   ========================================================================== */

.card {
  border: none;
  border-radius: var(--vit-rayon);
  box-shadow: var(--vit-ombre-carte);
}

.card-header {
  background-color: var(--vit-surface);
  border-bottom: 2px solid var(--vit-primary);
  font-weight: var(--vit-graisse-titre);
  color: var(--vit-texte);
}

/* Panneau de recherche multicritere, present en tete de chaque liste. */
.search-panel {
  padding: 1rem;
  margin-bottom: 1.5rem;
  background-color: var(--vit-surface);
  border-radius: var(--vit-rayon);
  box-shadow: var(--vit-ombre-carte);
}

.search-panel .form-label {
  font-weight: 500;
  font-size: .875rem;
  color: #495057;
}

/* Bloc d'information en lecture seule (fiche contrat, fiche utilisateur). */
.bloc-info {
  padding: 1rem;
  background-color: var(--vit-fond);
  border: 1px solid var(--vit-bordure-forte);
  border-radius: var(--vit-rayon-sm);
}

.bloc-info .bloc-titre {
  margin-bottom: .75rem;
  padding-bottom: .35rem;
  font-size: .8rem;
  font-weight: var(--vit-graisse-titre);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--vit-secondary);
  border-bottom: 1px solid var(--vit-bordure-forte);
}

.bloc-info dl {
  margin-bottom: 0;
  font-size: .875rem;
}

.bloc-info dt {
  font-weight: 500;
  color: var(--vit-texte-doux);
}

.bloc-info dd {
  margin-bottom: .35rem;
}


/* ==========================================================================
   4. Tableaux
   Remplace le pseudo-tableau du legacy : des div.col-sm-* avec
   « border-bottom: solid 1px black » et « background:#FCFCFC » ecrits en
   inline dans une quinzaine de fichiers.
   ========================================================================== */

.table-vitalite {
  --bs-table-bg: var(--vit-surface);
  margin-bottom: 0;
  vertical-align: middle;
}

.table-vitalite > thead > tr > th {
  padding: .75rem;
  font-weight: var(--vit-graisse-titre);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
  background-color: var(--vit-primary-dark);
  border-bottom: none;
  white-space: nowrap;
}

.table-vitalite > tbody > tr > td {
  padding: .625rem .75rem;
  font-size: .875rem;
  border-color: var(--vit-bordure);
}

.table-vitalite > tbody > tr:nth-child(even) {
  background-color: var(--vit-ligne-alt);
}

.table-vitalite > tbody > tr:hover {
  background-color: var(--vit-survol);
}

/* Ligne entiere cliquable (ouverture d'une fiche). */
.table-vitalite tr.ligne-cliquable {
  cursor: pointer;
}

/* Conteneur a defilement horizontal pour les tableaux larges. */
.table-cadre {
  overflow: hidden;
  background-color: var(--vit-surface);
  border-radius: var(--vit-rayon);
  box-shadow: var(--vit-ombre-carte);
}

/* Message affiche quand une recherche ne renvoie rien. */
.table-vide {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--vit-texte-doux);
}

.table-vide i {
  display: block;
  margin-bottom: .5rem;
  font-size: 2rem;
  opacity: .4;
}


/* ==========================================================================
   5. Statuts
   Remplace le calcul PHP $style_statut_contrat = "style='color:green|red|#868686'"
   duplique dans une dizaine de fichiers.
   ========================================================================== */

.statut {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 500;
  white-space: nowrap;
}

.statut::before {
  content: '';
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: currentColor;
}

.statut-actif    { color: var(--vit-succes); }  /* contrat en cours, sans motif */
.statut-alerte   { color: var(--vit-alerte); }  /* a surveiller */
.statut-probleme { color: var(--vit-danger); }  /* impaye, motif bloquant */
.statut-inactif  { color: var(--vit-neutre); }  /* resilie, suspendu */

/* Pastille compacte, pour les cellules de tableau denses. */
.badge-statut {
  padding: .3em .6em;
  font-size: .75rem;
  font-weight: var(--vit-graisse-titre);
  border-radius: var(--vit-rayon-sm);
}

.badge-statut.actif    { color: #0f5132; background-color: rgba(26, 159, 95, .15); }
.badge-statut.alerte   { color: #7a4d00; background-color: rgba(224, 142, 11, .18); }
.badge-statut.probleme { color: #842029; background-color: rgba(208, 52, 44, .15); }
.badge-statut.inactif  { color: #495057; background-color: rgba(134, 134, 134, .18); }


/* ==========================================================================
   6. Chargement
   Remplace load.gif (105 Ko) et les deux animations .spinner / .spinner2
   du legacy.
   ========================================================================== */

.spinner-vitalite {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
  border: 3px solid rgba(0, 179, 185, .25);
  border-top-color: var(--vit-primary-dark);
  border-radius: 50%;
  animation: spinner-vitalite .8s linear infinite;
}

.spinner-vitalite.sm {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
}

.spinner-vitalite.clair {
  border-color: rgba(255, 255, 255, .35);
  border-top-color: #fff;
}

@keyframes spinner-vitalite {
  to { transform: rotate(360deg); }
}

/* Zone de chargement inseree dans un conteneur pendant un appel AJAX. */
.zone-chargement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 3rem 1rem;
  font-size: .875rem;
  color: var(--vit-texte-doux);
}

/* Voile plein ecran, pour les traitements bloquants. */
.overlay-chargement {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: #fff;
  background-color: rgba(0, 0, 0, .45);
}

.overlay-chargement[hidden] {
  display: none;
}


/* ==========================================================================
   7. Pagination
   ========================================================================== */

.pagination .page-link {
  padding: .35rem .65rem;
  color: var(--vit-secondary);
  border-radius: var(--vit-rayon-sm);
}

.pagination .page-item.active .page-link {
  color: #fff;
  background-color: var(--vit-secondary);
  border-color: var(--vit-secondary);
}

.pagination .page-item:not(.disabled) .page-link:hover {
  color: var(--vit-secondary);
  background-color: rgba(35, 155, 215, .1);
  border-color: var(--vit-secondary);
}

/* Rappel du nombre de resultats, a cote de la pagination. */
.compte-resultats {
  font-size: .875rem;
  color: var(--vit-texte-doux);
}

.compte-resultats strong {
  color: var(--vit-texte);
}


/* ==========================================================================
   8. Depot de fichier
   ========================================================================== */

.upload-zone {
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--vit-primary-dark);
  border-radius: var(--vit-rayon);
  background-color: rgba(0, 179, 185, .05);
  transition: background-color var(--vit-transition), border-color var(--vit-transition);
}

.upload-zone:hover,
.upload-zone.survol {
  background-color: rgba(0, 179, 185, .12);
  border-color: var(--vit-secondary);
}

.upload-zone i {
  display: block;
  margin-bottom: .5rem;
  font-size: 2.5rem;
  color: var(--vit-primary);
}

.upload-zone .consigne {
  font-size: .8125rem;
  color: var(--vit-texte-doux);
}


/* ==========================================================================
   9. Alertes et infobulles
   ========================================================================== */

.alert-vitalite {
  color: #0d6b5c;
  background-color: rgba(0, 205, 174, .15);
  border-color: var(--vit-primary);
}

/* Infobulle large, pour les textes longs (motif de resiliation, synthese). */
.tooltip-large .tooltip-inner {
  max-width: 320px;
  padding: .6rem .85rem;
  font-size: .875rem;
  text-align: left;
  background-color: #2c3e50;
  border-radius: var(--vit-rayon);
  box-shadow: var(--vit-ombre-flottante);
}

.tooltip-large .tooltip-arrow::before {
  border-top-color: #2c3e50;
  border-bottom-color: #2c3e50;
  border-left-color: #2c3e50;
  border-right-color: #2c3e50;
}


/* ==========================================================================
   10. Select2
   Le theme select2-bootstrap-5-theme fait l'essentiel du travail, mais il code
   en dur le bleu de Bootstrap : ces regles le raccordent a la palette Vitalite
   et rendent le champ de recherche du menu bien lisible.

   Les selecteurs reprennent volontairement la longueur de ceux du theme : le
   theme cible par exemple
   « .select2-container--bootstrap-5 .select2-dropdown .select2-results__options
     .select2-results__option.select2-results__option--highlighted »,
   soit cinq classes. Une surcharge plus courte serait ignoree, quelle que soit
   sa position dans le fichier.

   Le marqueur d'initialisation est la classe .js-select2, jamais un attribut
   data-select2 : ce nom est celui de la cle de stockage interne de la lib, qui
   casse alors (voir commun/assets/js/select2-vitalite.js).
   ========================================================================== */

/* Hauteur alignee sur celle d'un .form-control, en simple comme en multiple. */
.select2-container--bootstrap-5 .select2-selection {
  min-height: calc(1.5em + .75rem + 2px);
  border-color: var(--vit-bordure);
}

/* Focus identique a celui des champs natifs, defini dans base.css. */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--vit-secondary);
  box-shadow: var(--vit-anneau-focus);
}

/* --- Menu deroulant ------------------------------------------------------ */

.select2-container--bootstrap-5 .select2-dropdown {
  border-color: var(--vit-secondary);
  box-shadow: var(--vit-ombre-flottante);
}

/* Champ de recherche : c'est lui qui rend les listes longues utilisables, il
   doit se voir. La loupe est integree en fond, faute de pouvoir inserer une
   icone dans le balisage genere par la lib. */
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  padding-left: 2rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: .625rem center;
  background-size: .875rem;
  border-color: var(--vit-bordure);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
  border-color: var(--vit-secondary);
  box-shadow: var(--vit-anneau-focus);
}

/* Option sous le curseur : aplat de marque. Le theme se contente d'un gris. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  color: #fff;
  background-color: var(--vit-secondary);
}

/* Option deja choisie : teinte legere seulement, pour rester distincte de
   l'option survolee. Les peindre a l'identique empeche de voir ou l'on est. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected {
  font-weight: var(--vit-graisse-titre);
  color: var(--vit-texte);
  background-color: var(--vit-survol);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected.select2-results__option--highlighted {
  color: #fff;
  background-color: var(--vit-secondary);
}

/* Intitule d'un <optgroup>. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option .select2-results__group {
  font-size: .75rem;
  font-weight: var(--vit-graisse-titre);
  color: var(--vit-primary-dark);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Ascenseur discret : la liste des codes apporteurs depasse largement les
   15 rem de hauteur maximale imposees par le theme. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options::-webkit-scrollbar {
  width: 8px;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options::-webkit-scrollbar-thumb {
  background-color: var(--vit-bordure);
  border-radius: var(--vit-rayon-sm);
}

/* --- Selection multiple -------------------------------------------------- */

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  color: #fff;
  background-color: var(--vit-primary-dark);
  border-color: var(--vit-primary-dark);
}

/* La croix du theme est un SVG gris fonce, invisible sur l'aplat turquoise :
   seule la couleur du trace change ici. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/.75rem auto no-repeat;
  border-radius: 2px;
  opacity: .75;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
  background: rgba(0, 0, 0, .25) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/.75rem auto no-repeat;
  opacity: 1;
}

/* --- Largeur ------------------------------------------------------------- */

/* Le legacy posait « width: 100% !important » parce qu'il n'imposait aucune
   largeur a l'initialisation. Le composant passe width: '100%', ce qui place la
   largeur en style inline : il ne reste qu'a empecher un debordement quand un
   champ est initialise dans un conteneur encore masque. */
.select2-container {
  max-width: 100%;
}


/* ==========================================================================
   11. Page de connexion
   Reprend le visuel actuel : fond photo, carte a degrade turquoise.
   ========================================================================== */

/* Le logo est au-dessus de la carte, pas dedans : la colonne empile les deux. */
.page-connexion {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1rem;
  background-image: url('../img/banner-home.jpg');
  background-size: cover;
  background-position: center;
}

.carte-connexion {
  width: 100%;
  max-width: 26rem;
  padding: 1.75rem;
  color: #fff;
  background: linear-gradient(var(--vit-primary), var(--vit-primary-dark));
  border-radius: var(--vit-rayon);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .4);
}

.carte-connexion .form-label {
  font-weight: var(--vit-graisse-titre);
  color: #fff;
}

.carte-connexion .form-control:focus {
  border-color: #fff;
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .3);
}

.carte-connexion a,
.carte-connexion .cliquable {
  color: #fff;
  text-decoration: underline;
}

/* Place hors du cadre, comme dans l'ancienne application. L'espacement avec la
   carte vient du gap de .page-connexion, d'ou l'absence de marge ici. */
.logo-connexion {
  display: block;
  width: 100%;
  max-width: 20rem;
}

/* Bouton d'affichage du mot de passe. Il se fond dans le champ : meme fond et
   meme bordure qu'un .form-control, seule l'icone porte la couleur. */
.btn-oeil {
  color: var(--vit-texte-doux);
  background-color: #fff;
  border: 1px solid var(--vit-bordure);
}

.btn-oeil:hover,
.btn-oeil:focus {
  color: var(--vit-secondary);
  background-color: #fff;
  border-color: var(--vit-bordure);
}

/* Sur l'aplat turquoise, l'anneau de marque serait illisible : on reprend le
   blanc deja utilise par les champs de la carte. */
.carte-connexion .btn-oeil:focus,
.carte-connexion .btn-oeil:focus-visible {
  border-color: #fff;
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .3);
}

/* Le gris de .form-text disparait sur le turquoise : rappel de la politique de
   mot de passe et messages d'aide passent en blanc attenue. */
.carte-connexion .form-text {
  color: rgba(255, 255, 255, .85);
}

/* Code a usage unique : une case par chiffre. La saisie, le collage et le
   passage d'une case a l'autre sont geres par js/champ-otp.js. */
.champ-otp {
  display: flex;
  gap: .5rem;
}

/* flex-basis a zero et min-width a zero : sans les deux, les champs refusent de
   descendre sous leur largeur intrinseque et le groupe deborde de la carte sur
   les petits ecrans. */
.champ-otp .form-control {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 1.5rem;
  font-weight: var(--vit-graisse-titre);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 400px) {
  .champ-otp {
    gap: .3rem;
  }

  .champ-otp .form-control {
    font-size: 1.25rem;
  }
}

/* Outil de recette affiche sous la carte, uniquement en environnement de
   developpement (cf. api/appareil_oubli.php). Il n'a pas d'equivalent en
   production : ne pas s'en servir pour une fonctionnalite destinee aux
   utilisateurs. */
.outil-dev {
  opacity: .75;
}

.outil-dev:hover {
  opacity: 1;
}


/* ==========================================================================
   12. Tableau de bord
   Remplace les <div class="panel panel-primary"> et les listes
   « Libelle : <strong>valeur</strong> » de portefeuille_vitalite_stats_*.php,
   ecrites en Bootstrap 3 avec des styles inline.
   ========================================================================== */

/* Compteur de tete : une grande valeur, son libelle, une precision facultative.
   Le liseré colore reprend les couleurs de statut de la section 5. */
.kpi {
  height: 100%;
  padding: 1rem 1.1rem;
  background-color: var(--vit-surface);
  border-left: 4px solid var(--vit-primary);
  border-radius: var(--vit-rayon);
  box-shadow: var(--vit-ombre-carte);
}

.kpi .kpi-libelle {
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--vit-texte-doux);
}

.kpi .kpi-valeur {
  margin-top: .15rem;
  font-size: 1.75rem;
  font-weight: var(--vit-graisse-titre);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi .kpi-detail {
  margin-top: .25rem;
  font-size: .8125rem;
  color: var(--vit-texte-doux);
}

.kpi-actif    { border-left-color: var(--vit-succes); }
.kpi-alerte   { border-left-color: var(--vit-alerte); }
.kpi-probleme { border-left-color: var(--vit-danger); }
.kpi-inactif  { border-left-color: var(--vit-neutre); }

.kpi-actif .kpi-valeur    { color: var(--vit-succes); }
.kpi-alerte .kpi-valeur   { color: var(--vit-alerte); }
.kpi-probleme .kpi-valeur { color: var(--vit-danger); }
.kpi-inactif .kpi-valeur  { color: var(--vit-neutre); }

/* Ligne de mesure : libelle a gauche, valeur a droite. Le legacy ecrivait
   « Total : <strong>42</strong> (12%) » au fil du texte, ce qui empechait toute
   lecture en colonne. */
.mesure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--vit-bordure);
}

.mesure:last-child {
  border-bottom: none;
}

.mesure .mesure-libelle {
  font-size: .875rem;
}

.mesure .mesure-valeur {
  font-weight: var(--vit-graisse-titre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card .mesure .mesure-valeur {
  white-space: normal;
  text-align: right;
}

.mesure .mesure-part {
  margin-left: .35rem;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--vit-texte-doux);
}

/* Precisions sous une mesure (repartition d'un compteur). */
.mesure-details {
  margin: 0 0 .5rem 0;
  padding-left: 1.1rem;
  font-size: .8125rem;
  color: var(--vit-texte-doux);
}

/* Hauteur maitrisee pour les canvas Chart.js : sans conteneur dimensionne, le
   graphique responsive grandit a chaque redimensionnement de la fenetre. */
.cadre-graphique {
  position: relative;
  height: 260px;
}

/* Onglets d'un encart (motifs globaux / 12 mois) : plus compacts que le
   nav-underline Bootstrap, pour tenir dans le card-header. */
.card-header .nav-underline {
  gap: .75rem;
}

.card-header .nav-underline .nav-link {
  padding: .15rem 0;
  font-size: .875rem;
}


/* ==========================================================================
   13. Liste de fichiers (documents, bordereaux)
   Remplace les lignes cliquables du legacy, sans recherche ni aperçu.
   ========================================================================== */

.badge-fichier {
  display: inline-block;
  min-width: 3.2rem;
  padding: .2em .45em;
  font-size: .6875rem;
  font-weight: var(--vit-graisse-titre);
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--vit-neutre);
  border-radius: var(--vit-rayon-sm);
}

.badge-fichier-pdf  { background-color: #d0342c; }
.badge-fichier-xls,
.badge-fichier-xlsx { background-color: #1a9f5f; }
.badge-fichier-csv  { background-color: #239bd7; }

.table-vitalite th.triable {
  cursor: pointer;
  user-select: none;
}

.table-vitalite th.triable:hover {
  background-color: var(--vit-primary);
}

.cadre-apercu {
  width: 100%;
  height: min(70vh, 720px);
  border: 0;
  background-color: var(--vit-fond);
}

/* ==========================================================================
   14. Utilitaires
   ========================================================================== */

.texte-doux { color: var(--vit-texte-doux); }
.texte-petit { font-size: .8125rem; }
.texte-marque { color: var(--vit-primary-dark); }

/* Colonne de tableau qui ne doit pas se couper (dates, montants, references). */
.nowrap { white-space: nowrap; }

/* Contenu deja mis en forme a la source (journaux d'import). Les retours a la
   ligne sont conserves, mais les lignes longues se replient : sur telephone un
   <pre> deborde de son bloc et masque la fin de chaque ligne. */
.texte-brut {
  font-size: .8125rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Montant aligne a droite, chiffres de largeur fixe pour l'alignement. */
.montant {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Pastilles compactes : horloge « Différé » a cote de la date d'effet,
   boite « Réclamation en cours » a cote du numero de police. */
.pastille-differe,
.pastille-reclamation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  margin-left: .35rem;
  vertical-align: middle;
  font-size: .7rem;
}

.alerte-saisie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: .25rem;
  font-size: .65rem;
  color: #7a4d00;
  background-color: rgba(224, 142, 11, .18);
  border-radius: 50%;
}

.nouvelle-affaire {
  font-style: italic;
  color: var(--vit-texte-doux);
}

/* Onglets d'espace (Utilisateurs : Courtiers / Admin-Gestion). */
.onglets-espace {
  flex-wrap: wrap;
  gap: .25rem;
  border-bottom: 2px solid var(--vit-bordure-forte);
}

.onglets-espace .nav-link {
  padding: .5rem 1rem;
  font-weight: var(--vit-graisse-titre);
  color: var(--vit-texte-doux);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.onglets-espace .nav-link.active {
  color: var(--vit-primary-dark);
  background: transparent;
  border-bottom-color: var(--vit-primary);
}

.onglets-espace .nav-link.disabled {
  color: var(--vit-texte-doux);
  opacity: .5;
  cursor: default;
}

.onglets-espace .nav-link .pastille-attente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-left: .35rem;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
  color: #fff;
  background-color: #d0342c;
  border-radius: 50%;
}

.liste-cabinets {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.liste-alertes {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.liste-alertes .badge-statut i {
  margin-right: .2em;
}

.carte-cabinet .card-body {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.carte-cabinet-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}

.carte-cabinet-titre {
  margin: 0;
  font-size: 1.1rem;
  font-weight: var(--vit-graisse-titre);
  line-height: 1.3;
}

.carte-cabinet-titre a {
  color: inherit;
  text-decoration: none;
}

.carte-cabinet-titre a:hover,
.carte-cabinet-titre a:focus {
  color: var(--vit-primary-dark);
  text-decoration: underline;
}

.carte-cabinet-affaires {
  text-align: right;
}

.carte-cabinet-affaires .texte-doux {
  display: block;
}

.carte-cabinet-affaires .btn-link {
  display: block;
  margin-top: .25rem;
  font-size: .875rem;
}

.carte-cabinet-comptes {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--vit-bordure);
}

.carte-cabinet-comptes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--vit-bordure);
}

.carte-cabinet-comptes li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.carte-cabinet-compte {
  flex: 1 1 12rem;
  min-width: 0;
}

.carte-cabinet-compte-nom {
  font-weight: 500;
}

.carte-cabinet-compte a {
  color: inherit;
}

.carte-cabinet-connexion {
  margin-left: auto;
  font-size: .8125rem;
  color: var(--vit-texte-doux);
}

/* Modal creation courtier : le form casse le scroll Bootstrap, on le rétablit. */

#modal-courtier-creer .modal-content {
  overflow: hidden;
}

#modal-courtier-creer .modal-content > form {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

#modal-courtier-creer .modal-header,
#modal-courtier-creer .modal-footer {
  flex-shrink: 0;
}

#modal-courtier-creer .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.maj-rapport-liste {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.maj-rapport-liste li + li {
  margin-top: .35rem;
}

/* Actions du generateur de courriers. d-flex ne convient pas : son display
   vient en !important et l'emporte sur l'attribut hidden, qui masque les
   boutons tant qu'aucun type de courrier n'est choisi. */
#courrier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}