/*
 * Nouvelle interface GRC Cible : charte et structure des pages (au-dessus de Bootstrap 5.3)
 */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/inter-5.1.0/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/inter-5.1.0/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/inter-5.1.0/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/inter-5.1.0/inter-latin-700-normal.woff2') format('woff2'); }

/* ---------- Charte ---------- */
:root {
  --ui-fond: #F5F6F8;          /* remplissage neutre dans les cartes */
  --ui-page: #F5F6F8;          /* fond des pages, teinté par le thème */
  --ui-surface: #FFFFFF;
  --ui-bordure: #DDE1E6;
  --ui-bordure-legere: #EDEFF2;
  --ui-bordure-champ: #C4CAD1;
  --ui-texte: #1A1D21;
  --ui-texte-2: #555E68;
  --ui-texte-3: #3A4149;
  --ui-accent: #1E4E8C;
  --ui-accent-fonce: #173E70;
  --ui-accent-clair: #E8EFF8;
  --ui-succes: #1B6B3F;
  --ui-succes-fond: #E3F4EA;
  --ui-attention: #8A5300;
  --ui-attention-fond: #FFF1DB;
  --ui-danger: #A3261E;
  --ui-danger-fort: #B42318;
  --ui-danger-fond: #FDE7E7;
  --ui-neutre: #4A525B;
  --ui-neutre-fond: #EEF0F3;
  --ui-rayon: 8px;
  --ui-rayon-carte: 14px;
  /* Relief des cartes : ombre douce plutôt qu'une bordure */
  --ui-ombre: 0 1px 2px rgba(19, 48, 79, 0.06), 0 4px 16px rgba(19, 48, 79, 0.07);
  --ui-entete-hauteur: 60px;
  --ui-menu-largeur: 260px;

  /* En-tête et menu : variables du thème (thème clair par défaut, voir « Thèmes » plus bas) */
  --ui-entete-fond: var(--ui-surface);
  --ui-entete-bordure: var(--ui-bordure);
  --ui-entete-texte: var(--ui-texte);
  --ui-entete-icone: var(--ui-texte-2);
  --ui-entete-survol: var(--ui-fond);
  --ui-entete-avatar: var(--ui-accent-clair);
  --ui-entete-avatar-texte: var(--ui-accent);
  --ui-menu-fond: var(--ui-surface);
  --ui-menu-bordure: var(--ui-bordure);
  --ui-menu-texte: var(--ui-texte);
  --ui-menu-texte-2: var(--ui-texte-3);
  --ui-menu-titre: var(--ui-texte-2);
  --ui-menu-icone: var(--ui-texte-2);
  --ui-menu-survol: var(--ui-fond);
  --ui-menu-survol-texte: var(--ui-texte);
  --ui-menu-actif: var(--ui-accent-clair);
  --ui-menu-actif-texte: var(--ui-accent);
  --ui-menu-filet: var(--ui-bordure);
  /* Fond du bandeau du tableau de bord (dégradé de l'accent, remplacé par les thèmes « pop ») */
  --ui-bandeau-fond: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-fonce) 100%);

  /* Bootstrap */
  --bs-body-font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.45;
  --bs-body-color: var(--ui-texte);
  /* Bootstrap peint modales, menus déroulants, champs et notifications avec --bs-body-bg : la surface blanche.
     Le gris de fond est porté par body.ui */
  --bs-body-bg: var(--ui-surface);
  --bs-secondary-color: var(--ui-texte-2);
  --bs-border-color: var(--ui-bordure);
  --bs-border-radius: var(--ui-rayon);
  --bs-primary: var(--ui-accent);
  --bs-primary-rgb: 30, 78, 140;
  --bs-link-color: var(--ui-accent);
  --bs-link-color-rgb: 30, 78, 140;
  --bs-link-hover-color: var(--ui-accent-fonce);
  --bs-link-hover-color-rgb: 23, 62, 112;
  --bs-focus-ring-color: rgba(30, 78, 140, 0.35);
}

/* ---------- Composants Bootstrap aux couleurs de la charte ---------- */
/* Les utilitaires d'affichage (.d-flex...) sont déclarés après [hidden] dans Bootstrap et l'emportent :
   un bloc masqué par l'attribut hidden (onglet de la fiche commercial, sections de connexion) restait visible */
[hidden] { display: none !important; }
/* Bootstrap fait flotter les <legend> : le bloc qui suit (flex) se retrouve sans largeur à côté du flottant */
fieldset > legend { float: none; }
.btn { --bs-btn-font-weight: 500; --bs-btn-border-radius: var(--ui-rayon); --bs-btn-padding-x: 1rem; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.btn-sm { --bs-btn-padding-x: 0.75rem; min-height: 32px; }
.btn-primary { --bs-btn-bg: var(--ui-accent); --bs-btn-border-color: var(--ui-accent); --bs-btn-hover-bg: var(--ui-accent-fonce); --bs-btn-hover-border-color: var(--ui-accent-fonce); --bs-btn-active-bg: var(--ui-accent-fonce); --bs-btn-active-border-color: var(--ui-accent-fonce); --bs-btn-disabled-bg: #DDE1E6; --bs-btn-disabled-border-color: #DDE1E6; --bs-btn-disabled-color: #6B737C; --bs-btn-font-weight: 600; }
.btn-secondaire { --bs-btn-color: var(--ui-texte); --bs-btn-bg: var(--ui-surface); --bs-btn-border-color: var(--ui-bordure-champ); --bs-btn-hover-color: var(--ui-texte); --bs-btn-hover-bg: var(--ui-fond); --bs-btn-hover-border-color: #AEB5BD; --bs-btn-active-bg: var(--ui-neutre-fond); --bs-btn-active-border-color: #AEB5BD; }
.btn-sensible { --bs-btn-color: var(--ui-danger); --bs-btn-bg: var(--ui-surface); --bs-btn-border-color: #E8B4B0; --bs-btn-hover-color: var(--ui-danger); --bs-btn-hover-bg: var(--ui-danger-fond); --bs-btn-hover-border-color: #E8B4B0; --bs-btn-active-bg: var(--ui-danger-fond); }
.btn-danger { --bs-btn-bg: var(--ui-danger-fort); --bs-btn-border-color: var(--ui-danger-fort); --bs-btn-hover-bg: var(--ui-danger); --bs-btn-hover-border-color: var(--ui-danger); --bs-btn-font-weight: 600; }

.form-control, .form-select { min-height: 40px; border-color: var(--ui-bordure-champ); border-radius: var(--ui-rayon); font-size: 0.875rem; }
.form-control:disabled { background: var(--ui-fond); color: var(--ui-texte-2); border-color: var(--ui-bordure); }
.form-label { font-weight: 500; margin-bottom: 0.375rem; }
.form-text { color: var(--ui-texte-2); font-size: 0.8125rem; }
.invalid-feedback { color: var(--ui-danger); font-size: 0.8125rem; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ui-danger-fort); }

.modal-content { border: 0; border-radius: var(--ui-rayon-carte); }
.modal-header, .modal-footer { border-color: var(--ui-bordure); }
.modal-title { font-weight: 700; }

.dropdown-menu { --bs-dropdown-border-color: var(--ui-bordure); --bs-dropdown-border-radius: var(--ui-rayon); --bs-dropdown-link-active-bg: var(--ui-accent); font-size: 0.875rem; box-shadow: 0 8px 24px rgba(26, 29, 33, 0.12); }
.dropdown-item.ui-item-sensible { color: var(--ui-danger); }

/* ---------- Structure ---------- */
body.ui { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--ui-page); }
.icone { flex: 0 0 auto; }

.ui-lien-evitement { position: absolute; top: 8px; left: 8px; z-index: 1100; padding: 8px 12px; background: var(--ui-surface); border-radius: var(--ui-rayon); }

.ui-entete { position: sticky; top: 0; z-index: 1030; height: var(--ui-entete-hauteur); background: var(--ui-entete-fond); border-bottom: 1px solid var(--ui-entete-bordure); color: var(--ui-entete-texte); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; }
.ui-entete-gauche, .ui-entete-droite { display: flex; align-items: center; gap: 8px; }
.ui-entete-droite { gap: 2px; }
.ui-marque { display: flex; align-items: center; gap: 10px; color: var(--ui-entete-texte); text-decoration: none; font-size: 1rem; }
.ui-marque:hover { color: var(--ui-entete-texte); }

.ui-bouton-icone { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--ui-rayon); color: var(--ui-texte-2); }
.ui-bouton-icone:hover, .ui-bouton-icone:focus-visible { background: var(--ui-fond); color: var(--ui-texte); }
.ui-entete .ui-bouton-icone { color: var(--ui-entete-icone); }
.ui-entete .ui-bouton-icone:hover, .ui-entete .ui-bouton-icone:focus-visible { background: var(--ui-entete-survol); color: var(--ui-entete-texte); }
.ui-pastille { position: absolute; top: 7px; right: 7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--ui-danger-fort); color: #FFFFFF; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }

.ui-utilisateur { min-height: 44px; border: 0; gap: 10px; padding: 0 8px 0 6px; color: var(--ui-entete-texte); font-weight: 500; }
.ui-utilisateur:hover, .ui-utilisateur:focus-visible, .ui-utilisateur.show { background: var(--ui-entete-survol); color: var(--ui-entete-texte); }
.ui-entete .ui-avatar { background: var(--ui-entete-avatar); color: var(--ui-entete-avatar-texte); }
.ui-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--ui-accent-clair); color: var(--ui-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8125rem; flex: 0 0 auto; }

.ui-alertes { width: min(360px, calc(100vw - 32px)); padding: 0; }
.ui-alertes-titre { margin: 0; padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--ui-bordure); }
#ui-alertes-liste { max-height: 320px; overflow-y: auto; }
.ui-alerte { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--ui-bordure-legere); }
.ui-alerte .ui-bouton-icone { width: 36px; height: 36px; min-height: 36px; }
.ui-alertes-pied { display: flex; align-items: center; gap: 8px; padding: 12px 16px; text-decoration: none; font-weight: 500; }

.ui-corps { flex: 1 0 auto; display: flex; align-items: stretch; }

.ui-menu { background: var(--ui-menu-fond); color: var(--ui-menu-texte); }
.ui-menu .offcanvas-header { color: var(--ui-menu-texte); }
.ui-menu .offcanvas-header .ui-bouton-icone { color: var(--ui-menu-texte); }
@media (min-width: 992px) {
  /* Bootstrap rend transparent un menu offcanvas-lg sur grand écran (!important) : le fond du thème doit l'emporter.
     Raccourci background et non background-color : le fond peut être un dégradé */
  .ui-menu.offcanvas-lg { background: var(--ui-menu-fond) !important; }
  .ui-menu { width: var(--ui-menu-largeur); flex: 0 0 var(--ui-menu-largeur); border-right: 1px solid var(--ui-menu-bordure); position: sticky; top: var(--ui-entete-hauteur); height: calc(100vh - var(--ui-entete-hauteur)); overflow-y: auto; }
}
.ui-menu .offcanvas-body { padding: 16px 12px; gap: 2px; }
.ui-menu-titre { margin: 16px 10px 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-menu-titre); }
.ui-menu-titre:first-child { margin-top: 4px; }
.ui-menu-entree, .ui-menu-groupe { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--ui-rayon); background: transparent; color: var(--ui-menu-texte); font-weight: 500; text-decoration: none; text-align: left; }
.ui-menu-entree .icone, .ui-menu-groupe .icone { color: var(--ui-menu-icone); }
.ui-menu-entree:hover, .ui-menu-groupe:hover { background: var(--ui-menu-survol); color: var(--ui-menu-survol-texte); }
.ui-menu-entree.active { background: var(--ui-menu-actif); color: var(--ui-menu-actif-texte); font-weight: 600; }
.ui-menu-entree.active .icone { color: var(--ui-menu-actif-texte); }
.ui-menu-groupe:not(.collapsed) { font-weight: 600; }
.ui-menu-chevron { display: inline-flex; transition: transform 0.15s ease; }
.ui-menu-groupe:not(.collapsed) .ui-menu-chevron { transform: rotate(90deg); }
.ui-menu-enfants { margin: 2px 0 6px 21px; padding-left: 8px; border-left: 1px solid var(--ui-menu-filet); }
.ui-menu-lien { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 6px; color: var(--ui-menu-texte-2); text-decoration: none; }
.ui-menu-lien:hover { background: var(--ui-menu-survol); color: var(--ui-menu-survol-texte); }
.ui-menu-lien.active { background: var(--ui-menu-actif); color: var(--ui-menu-actif-texte); font-weight: 600; }

.ui-contenu { flex: 1 1 auto; min-width: 0; padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 20px; }
.ui-contenu:focus { outline: none; }
@media (max-width: 575.98px) { .ui-contenu { padding: 20px 16px 32px; } }


/* ---------- Elements de page ---------- */
/* Racine du gabarit d'un écran : espace entre ses blocs (titre, barre d'outils, cartes, rangées) */
.ui-page { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ui-titre-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ui-fil { margin: 0 0 4px; font-size: 0.8125rem; color: var(--ui-texte-2); }
.ui-titre-page h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; font-weight: 700; }
.ui-titre-page p { margin: 4px 0 0; color: var(--ui-texte-2); }

.ui-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ui-recherche { position: relative; flex: 1 1 280px; max-width: 360px; }
.ui-recherche .icone { position: absolute; left: 12px; top: 11px; color: var(--ui-texte-2); pointer-events: none; }
.ui-recherche .form-control { padding-left: 38px; }

.ui-filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-filtre { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ui-bordure-champ); background: var(--ui-surface); color: var(--ui-texte); font-size: 0.8125rem; font-weight: 500; }
.ui-filtre:hover { background: var(--ui-fond); }
.ui-filtre[aria-pressed="true"] { background: var(--ui-accent); border-color: var(--ui-accent); color: #FFFFFF; }

.ui-carte { background: var(--ui-surface); border: 1px solid transparent; border-radius: var(--ui-rayon-carte); box-shadow: var(--ui-ombre); }
.ui-tableau { overflow-x: auto; }
.ui-tableau table { width: 100%; margin: 0; border-collapse: collapse; }
.ui-tableau th { padding: 12px 16px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-texte-2); text-align: left; border-bottom: 1px solid var(--ui-bordure); white-space: nowrap; }
.ui-tableau td { padding: 12px 16px; border-bottom: 1px solid var(--ui-bordure-legere); vertical-align: middle; }
.ui-tableau tbody tr:last-child td { border-bottom: 0; }
.ui-tableau tr.ui-ligne-inactive td { color: var(--ui-texte-2); }
.ui-tableau-vide { padding: 32px 16px; text-align: center; color: var(--ui-texte-2); }
.ui-compteur { margin: 0; font-size: 0.8125rem; color: var(--ui-texte-2); }

.ui-personne { display: flex; align-items: center; gap: 12px; }
.ui-personne .ui-avatar { width: 36px; height: 36px; background: var(--ui-neutre-fond); color: var(--ui-texte-3); }
.ui-personne-nom { display: block; font-weight: 600; }
.ui-personne-detail { display: block; font-size: 0.8125rem; color: var(--ui-texte-2); }

.ui-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.ui-badge-succes { background: var(--ui-succes-fond); color: var(--ui-succes); }
.ui-badge-neutre { background: var(--ui-neutre-fond); color: var(--ui-neutre); }
.ui-badge-attention { background: var(--ui-attention-fond); color: var(--ui-attention); }
.ui-badge-danger { background: var(--ui-danger-fond); color: var(--ui-danger); }

.ui-facteurs { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: var(--ui-texte-3); }
.ui-facteur { display: inline-flex; align-items: center; gap: 6px; }
.ui-facteur .icone { color: var(--ui-accent); }
.ui-texte-attention { color: var(--ui-attention); font-size: 0.8125rem; }

.ui-actions { text-align: right; white-space: nowrap; }
.ui-actions .ui-bouton-icone { width: 32px; height: 32px; min-height: 32px; vertical-align: middle; }

.ui-section-titre { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-texte-2); }
.ui-resume { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 10px; background: var(--ui-fond); }
.ui-resume div { display: flex; justify-content: space-between; gap: 12px; }
.ui-resume dt { font-weight: 400; color: var(--ui-texte-2); }
.ui-resume dd { margin: 0; font-weight: 600; text-align: right; }

.ui-message { padding: 12px 14px; border-radius: var(--ui-rayon); font-weight: 500; }
.ui-message-succes { background: var(--ui-succes-fond); color: var(--ui-succes); }
.ui-message-erreur { background: var(--ui-danger-fond); color: var(--ui-danger); }

.ui-secret { display: block; padding: 12px; border-radius: var(--ui-rayon); background: var(--ui-fond); font-size: 1.5rem; letter-spacing: 0.06em; text-align: center; color: var(--ui-texte); user-select: all; }

.toast { --bs-toast-border-radius: var(--ui-rayon); --bs-toast-font-size: 0.875rem; }

/* ---------- Pages sans connexion ---------- */
body.ui-publique { align-items: center; justify-content: center; gap: 24px; padding: 40px 16px; }
.ui-publique-marque { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.ui-publique-carte { width: 100%; box-sizing: border-box; background: var(--ui-surface); border: 1px solid transparent; border-radius: var(--ui-rayon-carte); box-shadow: var(--ui-ombre); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.ui-publique-etroite { max-width: 420px; }
.ui-publique-large { max-width: 580px; }
@media (max-width: 575.98px) { .ui-publique-carte { padding: 24px 20px; } }
.ui-publique-carte h1 { margin: 0; font-size: 1.375rem; font-weight: 700; }
.ui-publique-carte .ui-intro { margin: 4px 0 0; color: var(--ui-texte-2); }
.ui-publique-pied { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.75rem; color: var(--ui-texte-2); }
.ui-publique .form-control, .ui-publique .btn { min-height: 44px; }
.ui-lien-secondaire { align-self: center; font-size: 0.8125rem; }

.ui-etapes { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.75rem; font-weight: 600; color: var(--ui-texte-2); }
.ui-etape { display: flex; align-items: center; gap: 6px; }
.ui-etape-numero { width: 20px; height: 20px; border-radius: 999px; background: var(--ui-neutre-fond); color: var(--ui-neutre); display: inline-flex; align-items: center; justify-content: center; font-size: 0.6875rem; }
.ui-etape-faite { color: var(--ui-succes); }
.ui-etape-faite .ui-etape-numero { background: var(--ui-succes-fond); color: var(--ui-succes); }
.ui-etape-courante { color: var(--ui-accent); }
.ui-etape-courante .ui-etape-numero { background: var(--ui-accent); color: #FFFFFF; }

.ui-mot-de-passe { position: relative; }
.ui-mot-de-passe .form-control { padding-right: 96px; }
.ui-mot-de-passe .ui-afficher { position: absolute; right: 4px; top: 4px; min-height: 36px; height: 36px; padding: 0 12px; border: 0; color: var(--ui-accent); font-weight: 500; }
.ui-mot-de-passe .ui-afficher:hover { background: var(--ui-accent-clair); }

.ui-regles { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; color: var(--ui-texte-2); }
.ui-regle { display: flex; align-items: center; gap: 8px; }
.ui-regle .icone-ok { display: none; }
.ui-regle.ui-regle-ok { color: var(--ui-succes); }
.ui-regle.ui-regle-ok .icone-ok { display: inline; }
.ui-regle.ui-regle-ok .icone-attente { display: none; }

.ui-choix { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 575.98px) { .ui-choix { grid-template-columns: minmax(0, 1fr); } }
.ui-choix-carte { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--ui-bordure-champ); border-radius: 10px; background: var(--ui-surface); cursor: pointer; }
.ui-choix-carte:has(input:checked) { border: 2px solid var(--ui-accent); padding: 13px 15px; background: var(--ui-accent-clair); }
.ui-choix-carte:has(input:focus-visible) { box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); }
.ui-choix-titre { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ui-choix-titre input { margin: 0; accent-color: var(--ui-accent); }
.ui-choix-detail { font-size: 0.8125rem; color: var(--ui-texte-3); }

.ui-qrcode { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ui-qrcode-image { width: 168px; height: 168px; flex: 0 0 168px; border: 1px solid var(--ui-bordure); border-radius: var(--ui-rayon); padding: 4px; background: #FFFFFF; }
.ui-qrcode-image svg { width: 100%; height: 100%; display: block; }
.ui-qrcode-texte { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; }
.ui-cle-manuelle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-cle-manuelle code { padding: 6px 10px; border-radius: 6px; background: var(--ui-fond); color: var(--ui-texte); font-size: 0.8125rem; letter-spacing: 0.04em; }

.ui-code { max-width: 180px; font-size: 1.25rem; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.ui-separateur { display: flex; align-items: center; gap: 12px; color: var(--ui-texte-2); font-size: 0.8125rem; }
.ui-separateur::before, .ui-separateur::after { content: ''; flex: 1; height: 1px; background: var(--ui-bordure); }
.ui-note { margin: 0; font-size: 0.8125rem; color: var(--ui-texte-2); text-align: center; }

/* ---------- Mon compte ---------- */
.ui-colonnes { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ui-colonne-etroite { flex: 1 1 280px; max-width: 360px; }
.ui-colonne-large { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ui-carte-corps { padding: 20px 24px; }
.ui-carte h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.ui-carte .ui-intro { margin: 4px 0 0; color: var(--ui-texte-2); }
.ui-carte-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ui-identite { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.ui-identite dt { font-size: 0.8125rem; font-weight: 400; color: var(--ui-texte-2); }
.ui-identite dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ui-facteur-ligne { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-top: 1px solid var(--ui-bordure-legere); flex-wrap: wrap; }
.ui-facteur-icone { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: var(--ui-accent-clair); color: var(--ui-accent); display: flex; align-items: center; justify-content: center; }
.ui-facteur-texte { flex: 1 1 200px; }
.ui-facteur-texte p { margin: 0; }
.ui-facteur-texte .ui-detail { font-size: 0.8125rem; color: var(--ui-texte-2); }
.ui-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-cles { margin: 0 24px 6px 78px; padding: 0; list-style: none; }
@media (max-width: 575.98px) { .ui-cles { margin-left: 24px; } }
.ui-cle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ui-bordure-legere); flex-wrap: wrap; }
.ui-cle p { margin: 0; }

.progress { --bs-progress-bar-bg: var(--ui-accent); --bs-progress-bg: var(--ui-neutre-fond); --bs-progress-height: 8px; --bs-progress-border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .progress-bar { transition: none; } }

/* ---------- Tableau de bord ---------- */
:root {
  /* Couleurs des graphiques, validées pour le contraste et le daltonisme sur fond blanc */
  --ui-serie: #2a78d6;
  --ui-serie-contexte: #878F98;
}
.ui-chiffres { font-variant-numeric: tabular-nums; }
.ui-detail { display: block; font-size: 0.8125rem; color: var(--ui-texte-2); }

/* Bandeau d'accueil : couleur d'accent du thème, texte blanc (contraste AA vérifié pour chaque thème) */
.ui-bandeau { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: 28px 32px; border-radius: var(--ui-rayon-carte); color: #FFFFFF; background: var(--ui-bandeau-fond); box-shadow: var(--ui-ombre); position: relative; overflow: hidden; }
.ui-bandeau::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); pointer-events: none; }
.ui-bandeau-texte { min-width: 0; position: relative; }
.ui-bandeau-date { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 500; opacity: 0.85; }
.ui-bandeau h1 { margin: 0; font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.ui-bandeau-resume { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; padding: 0; list-style: none; }
.ui-bandeau-resume li { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 0.8125rem; font-weight: 500; }
.ui-bandeau-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.ui-bandeau-actions .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; border-radius: var(--ui-rayon); }
.ui-bandeau-principal { --bs-btn-bg: #FFFFFF; --bs-btn-color: var(--ui-accent-fonce); --bs-btn-border-color: #FFFFFF; --bs-btn-hover-bg: var(--ui-accent-clair); --bs-btn-hover-color: var(--ui-accent-fonce); --bs-btn-hover-border-color: var(--ui-accent-clair); --bs-btn-active-bg: var(--ui-accent-clair); --bs-btn-active-color: var(--ui-accent-fonce); }
.ui-bandeau-secondaire { --bs-btn-bg: rgba(255, 255, 255, 0.12); --bs-btn-color: #FFFFFF; --bs-btn-border-color: rgba(255, 255, 255, 0.4); --bs-btn-hover-bg: rgba(255, 255, 255, 0.22); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-border-color: rgba(255, 255, 255, 0.6); --bs-btn-active-bg: rgba(255, 255, 255, 0.28); --bs-btn-active-color: #FFFFFF; }
.ui-bandeau .btn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
@media (max-width: 575.98px) { .ui-bandeau { padding: 22px 20px; } .ui-bandeau h1 { font-size: 1.5rem; } }

/* Présentation de l'application (modale de l'accueil) : en-tête au fond du bandeau, « Le saviez-vous ? », encart de l'entreprise */
.ui-presentation { overflow: hidden; }
.ui-presentation-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px; color: #FFFFFF; background: var(--ui-bandeau-fond); }
.ui-presentation-entete .modal-title { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.ui-presentation-surtitre { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 500; opacity: 0.85; }
.ui-presentation-intro { margin: 10px 0 0; max-width: 60ch; opacity: 0.92; }
.ui-presentation .modal-body { display: flex; flex-direction: column; gap: 20px; padding: 24px 28px; }
.ui-presentation-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 20px; margin: 0; padding: 0; list-style: none; }
.ui-presentation-points li { display: flex; align-items: flex-start; gap: 12px; color: var(--ui-texte-2); }
.ui-presentation-points strong { display: block; color: var(--ui-texte); }
.ui-astuces { padding: 16px 18px; border-radius: var(--ui-rayon); background: var(--ui-accent-clair); }
.ui-astuces-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ui-astuces-entete h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--ui-accent); }
.ui-astuces-navigation { display: flex; align-items: center; gap: 8px; }
.ui-astuces-navigation .btn { display: inline-flex; align-items: center; padding: 4px 6px; }
.ui-astuces-compteur { min-width: 3.5em; text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--ui-texte-2); font-variant-numeric: tabular-nums; }
.ui-astuce { display: flex; align-items: flex-start; gap: 14px; min-height: 96px; }
.ui-astuce[hidden] { display: none; }
.ui-astuce-icone { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-surface); color: var(--ui-accent); }
.ui-astuce-titre { margin: 0 0 2px; font-weight: 700; }
.ui-astuce-texte { margin: 0 0 6px; color: var(--ui-texte-3); }
.ui-sponsor { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--ui-rayon); background: var(--ui-fond); }
.ui-sponsor-monogramme { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: #FFFFFF; background: var(--ui-bandeau-fond); }
.ui-sponsor-etiquette { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-texte-2); }
.ui-sponsor h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.ui-sponsor-texte { margin: 0 0 6px; color: var(--ui-texte-3); }
.ui-sponsor a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 575.98px) { .ui-presentation-entete, .ui-presentation .modal-body { padding: 20px; } }

.ui-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.ui-tuile { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.ui-tuile p { margin: 0; }
.ui-tuile-tete { display: flex; align-items: center; gap: 10px; }
.ui-tuile-icone { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: var(--ui-accent-clair); color: var(--ui-accent); display: inline-flex; align-items: center; justify-content: center; }
.ui-tuile-libelle { font-size: 0.8125rem; font-weight: 500; color: var(--ui-texte-2); }
.ui-tuile-milieu { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ui-tuile-valeur { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ui-tuile-courbe { flex: 0 1 120px; min-width: 0; }
.ui-mini-courbe { width: 100%; height: auto; display: block; overflow: visible; }
.ui-mini-courbe .ui-courbe-courante { fill: none; stroke: var(--ui-serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-mini-courbe .ui-courbe-precedente { fill: none; stroke: var(--ui-serie-contexte); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: 0.6; }
.ui-mini-courbe .ui-point-courant { fill: var(--ui-serie); stroke: var(--ui-surface); stroke-width: 1.5; }
.ui-tuile-ecart { font-size: 0.8125rem; color: var(--ui-texte-2); }
.ui-ecart { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--ui-neutre-fond); color: var(--ui-texte-3); font-weight: 600; font-variant-numeric: tabular-nums; }

.ui-rangee { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.ui-bloc { display: flex; flex-direction: column; min-width: 0; }
.ui-bloc-large { flex: 2 1 520px; }
.ui-bloc-etroit { flex: 1 1 300px; }
.ui-bloc-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ui-bordure); flex-wrap: wrap; }
.ui-bloc-entete h2 { margin: 0; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ui-bloc-entete-onglets { flex-direction: column; align-items: stretch; padding-bottom: 0; }
.ui-bloc-outils { display: flex; align-items: center; gap: 8px; }
.ui-bloc-outils .form-select { min-height: 36px; width: auto; max-width: 240px; }
.ui-bloc-vide { padding: 24px 20px; color: var(--ui-texte-2); list-style: none; margin: 0; }
.ui-bloc-pied { margin-top: auto; padding: 12px 20px; border-top: 1px solid var(--ui-bordure-legere); font-weight: 500; text-decoration: none; }
.ui-bloc-entete-sans-filet { border-bottom: 0; padding-bottom: 8px; }
.ui-bloc-moitie { flex: 1 1 420px; }

.ui-filtres-taches { padding: 0 20px 12px; }
.ui-filtre [data-compte] { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--ui-neutre-fond); color: var(--ui-texte-3); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-filtre[aria-pressed="true"] [data-compte] { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }
.ui-filtre-alerte:not([aria-pressed="true"]) [data-compte] { background: var(--ui-danger-fond); color: var(--ui-danger); }

.ui-taches { margin: 0; padding: 0 12px 12px; list-style: none; max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ui-tache { display: flex; gap: 14px; padding: 12px 14px; border-radius: 10px; background: var(--ui-surface); border: 1px solid var(--ui-bordure-legere); border-left: 3px solid transparent; align-items: center; transition: background-color 0.15s; }
.ui-tache:hover { background: var(--ui-fond); }
.ui-tache-retard { background: #FFF6F6; border-color: #F7DADA; border-left-color: var(--ui-danger-fort); }
.ui-tache-retard:hover { background: var(--ui-danger-fond); }
.ui-tache-quand { flex: 0 0 48px; height: 52px; border-radius: 10px; background: var(--ui-accent-clair); color: var(--ui-accent-fonce); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.ui-tache-retard .ui-tache-quand { background: var(--ui-danger-fond); color: var(--ui-danger); }
.ui-tache-jour { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-tache-mois { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.ui-tache-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.ui-tache-titre { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-tache-detail { margin: 0; color: var(--ui-texte-3); }
.ui-tache-infos { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: center; font-size: 0.8125rem; color: var(--ui-texte-2); }
.ui-tache-priorite { font-weight: 600; color: var(--ui-texte-3); }
.ui-tache-commercial { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-texte-2); }
.ui-badge-retard { background: var(--ui-danger-fond); color: var(--ui-danger); padding: 1px 8px; }
.ui-pastille-couleur { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; }
.ui-tache .btn { flex: 0 0 auto; }
.ui-tache-terminer { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 575.98px) { .ui-tache { flex-wrap: wrap; } .ui-tache-terminer { margin-left: 62px; } }

.ui-segments { display: inline-flex; border: 1px solid var(--ui-bordure-champ); border-radius: var(--ui-rayon); overflow: hidden; }
.ui-segment { min-height: 32px; padding: 0 10px; border: 0; background: var(--ui-surface); color: var(--ui-texte); font-size: 0.8125rem; font-weight: 500; }
.ui-segment + .ui-segment { border-left: 1px solid var(--ui-bordure-champ); }
.ui-segment:hover { background: var(--ui-fond); }
.ui-segment[aria-pressed="true"] { background: var(--ui-accent); color: #FFFFFF; }

/* Rendez-vous en frise : heure, point à la couleur de l'événement sur un fil vertical, libellé */
.ui-rdv { max-height: 460px; overflow-y: auto; padding: 4px 0 12px; }
.ui-rdv[aria-busy="true"] { opacity: 0.6; }
.ui-rdv-jour { margin: 10px 20px 2px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ui-texte-2); }
.ui-rdv-ligne { --ui-rdv-couleur: var(--ui-accent); display: grid; grid-template-columns: 52px 14px minmax(0, 1fr); column-gap: 10px; padding: 0 20px; position: relative; }
.ui-rdv-heure { padding: 8px 0; font-weight: 600; font-size: 0.8125rem; }
.ui-rdv-point { position: relative; }
.ui-rdv-point::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--ui-bordure-legere); }
.ui-rdv-point::after { content: ""; position: absolute; left: 1px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--ui-rdv-couleur); box-shadow: 0 0 0 3px var(--ui-surface); }
.ui-rdv-texte { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; padding: 6px 0 10px; }
.ui-rdv-passe .ui-rdv-heure, .ui-rdv-passe .ui-rdv-texte { opacity: 0.55; }
.ui-rdv-passe .ui-rdv-point::after { opacity: 0.45; }

.ui-projets { margin: 0; padding: 0 8px 8px; list-style: none; }
.ui-projet { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; }
.ui-projet:hover { background: var(--ui-fond); }
.ui-projet .ui-avatar { width: 38px; height: 38px; }
.ui-projet-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ui-projet-corps .ui-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-projet-nom { font-weight: 600; text-decoration: none; color: var(--ui-texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-projet-nom:hover { color: var(--ui-accent); text-decoration: underline; }
.ui-projet-age { flex: 0 0 auto; font-size: 0.75rem; color: var(--ui-texte-2); white-space: nowrap; }
.ui-graphique .ui-aire-courante { fill: var(--ui-serie); fill-opacity: 0.1; stroke: none; }

.ui-onglets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: -1px; }
.ui-onglet { min-height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ui-texte-3); font-weight: 500; }
.ui-onglet:hover { color: var(--ui-texte); }
.ui-onglet[aria-selected="true"] { border-bottom-color: var(--ui-accent); color: var(--ui-accent); font-weight: 600; }
.ui-panneau { padding: 20px; }
.ui-panneau:focus-visible { outline: 2px solid var(--bs-focus-ring-color); outline-offset: -2px; }

.ui-graphiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 28px; }
.ui-graphique-bloc { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ui-graphique-bloc figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ui-graphique-titre { font-weight: 600; }
.ui-graphique-vide { margin: 0; padding: 24px 0; color: var(--ui-texte-2); }
.ui-graphique-zone { position: relative; }
.ui-graphique { width: 100%; height: auto; display: block; overflow: visible; }
.ui-graphique .ui-grille { stroke: var(--ui-bordure-legere); stroke-width: 1; }
.ui-graphique .ui-axe { stroke: var(--ui-bordure-champ); stroke-width: 1; }
.ui-graphique .ui-graduation { font-size: 11px; fill: var(--ui-texte-2); font-variant-numeric: tabular-nums; }
.ui-graphique .ui-courbe-courante { fill: none; stroke: var(--ui-serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-graphique .ui-courbe-precedente { fill: none; stroke: var(--ui-serie-contexte); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-graphique .ui-point-courant { fill: var(--ui-serie); stroke: var(--ui-surface); stroke-width: 2; }
.ui-graphique .ui-etiquette-courante { font-size: 12px; font-weight: 600; fill: var(--ui-texte); }
.ui-graphique .ui-etiquette-precedente { font-size: 12px; fill: var(--ui-texte-2); }
.ui-graphique .ui-reticule { stroke: var(--ui-bordure-champ); stroke-width: 1; }
.ui-graphique .ui-cible { fill: transparent; }
.ui-infobulle { position: absolute; top: 0; transform: translateX(12px); pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--ui-rayon); background: var(--ui-surface); border: 1px solid var(--ui-bordure); box-shadow: 0 8px 24px rgba(26, 29, 33, 0.12); font-size: 0.8125rem; white-space: nowrap; z-index: 2; }
.ui-infobulle.ui-infobulle-gauche { transform: translateX(calc(-100% - 12px)); }

.ui-legende { display: flex; gap: 14px; font-size: 0.75rem; color: var(--ui-texte-3); }
.ui-legende-element { display: inline-flex; align-items: center; gap: 6px; }
.ui-legende-trait { width: 14px; height: 2px; display: inline-block; }
.ui-legende-courante { background: var(--ui-serie); }
.ui-legende-precedente { background: var(--ui-serie-contexte); }

.ui-barres { margin: 0; padding: 6px 0 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
/* Même nom que la barre d'outils des listes (.ui-barre) : limité aux graphiques */
.ui-barres > .ui-barre { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr) 52px; gap: 10px; align-items: center; }
.ui-barre-libelle { font-size: 0.8125rem; color: var(--ui-texte-3); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-barre-piste { height: 18px; background: var(--ui-fond); border-radius: 4px; overflow: hidden; }
.ui-barre-valeur-trace { display: block; height: 100%; min-width: 2px; background: var(--ui-serie); border-radius: 0 4px 4px 0; }
.ui-barre-nombre { font-size: 0.8125rem; font-weight: 600; }
.ui-graphique-donnees { align-self: flex-start; min-height: 32px; font-size: 0.8125rem; }
.ui-graphique-tableau { max-height: 280px; overflow-y: auto; border: 1px solid var(--ui-bordure-legere); border-radius: var(--ui-rayon); }
.ui-graphique-tableau td, .ui-graphique-tableau th { padding: 6px 12px; }
.ui-message-info { background: var(--ui-accent-clair); color: var(--ui-accent-fonce); font-weight: 400; }
.ui-message-info a { font-weight: 600; }

/* ---------- Référentiels ---------- */
.ui-tri { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 600; color: inherit; text-transform: inherit; letter-spacing: inherit; display: inline-flex; align-items: center; gap: 4px; }
.ui-tri:hover { color: var(--ui-texte); }
th[aria-sort="ascending"] .ui-tri, th[aria-sort="descending"] .ui-tri { color: var(--ui-texte); }
th[aria-sort="ascending"] .ui-tri::after { content: '↑'; }
th[aria-sort="descending"] .ui-tri::after { content: '↓'; }

.ui-pastille-operateur { min-width: 40px; height: 28px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; flex: 0 0 auto; }
.ui-couleurs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ui-couleur { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 999px; border: 0; padding: 0; }
.ui-couleur[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--ui-texte); }
.ui-couleur:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--ui-accent); }
.ui-couleur-autre { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ui-texte-3); margin-bottom: 10px; }
.ui-couleur-autre input { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--ui-bordure-champ); border-radius: var(--ui-rayon); background: var(--ui-surface); }
.ui-apercu { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--ui-rayon); background: var(--ui-fond); font-size: 0.8125rem; }
.ui-colonne-texte { width: 60%; }
.ui-texte-tronque { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
.ui-filtre-liste { display: flex; align-items: center; gap: 8px; }
.ui-filtre-liste .form-select { min-width: 220px; max-width: 320px; }
.ui-nombre { max-width: 140px; font-variant-numeric: tabular-nums; }

/* Modale à onglets (fiche commercial) : onglets sous le titre, sur le filet de l'en-tête */
.ui-modale-entete-onglets { flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 0; }
.ui-modale-entete-onglets .ui-onglets { margin-bottom: -1px; }
.ui-champ-court { max-width: 300px; }
.ui-iban { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-transform: uppercase; }
.ui-texte-succes { color: var(--ui-succes); font-weight: 500; }
.ui-rib { padding: 12px 14px; border-radius: var(--ui-rayon); background: var(--ui-fond); }
.ui-rib-grille { display: grid; grid-template-columns: 1fr 1fr 1.6fr 0.6fr; gap: 12px; font-variant-numeric: tabular-nums; }
.ui-rib-grille dt { font-size: 0.8125rem; font-weight: 400; color: var(--ui-texte-2); }
.ui-rib-grille dd { margin: 0; font-weight: 600; }
@media (max-width: 575.98px) { .ui-rib-grille { grid-template-columns: 1fr 1fr; } }

/* Logo du cabinet (fiche cabinet, onglet Courriers) */
.ui-logo { display: flex; align-items: center; justify-content: center; width: 240px; height: 130px; padding: 8px; border-radius: var(--ui-rayon); background: var(--ui-fond); }
.ui-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- Thèmes (préférence de l'utilisateur, attribut data-theme sur <html>) ----------
   Contrastes vérifiés (WCAG) : texte blanc sur en-tête ≥ 6:1, texte du menu ≥ 9:1, élément actif ≥ 6,8:1,
   accent sur blanc ≥ 6:1 et sur le fond teinté ≥ 5,4:1. Cartes, tableaux, modales et graphiques ne changent pas.
   Thèmes « pop » (aurore, neon, lagon, crepuscule, jungle) : en-tête, menu et bandeau en dégradé, contrastes vérifiés
   aux deux extrémités (texte blanc sur en-tête ≥ 5,1:1, texte du menu ≥ 10:1, élément actif ≥ 7,1:1). */
html[data-theme="ocean"], html[data-theme="foret"], html[data-theme="aubergine"], html[data-theme="terracotta"],
html[data-theme="aurore"], html[data-theme="neon"], html[data-theme="lagon"], html[data-theme="crepuscule"],
html[data-theme="jungle"] {
  --ui-entete-bordure: transparent;
  --ui-entete-texte: #FFFFFF;
  --ui-entete-icone: rgba(255, 255, 255, 0.9);
  --ui-entete-survol: rgba(255, 255, 255, 0.14);
  --ui-entete-avatar: rgba(255, 255, 255, 0.18);
  --ui-entete-avatar-texte: #FFFFFF;
  --ui-menu-bordure: transparent;
  --ui-menu-survol: rgba(255, 255, 255, 0.10);
  --ui-menu-survol-texte: #FFFFFF;
  --ui-menu-actif: rgba(255, 255, 255, 0.18);
  --ui-menu-actif-texte: #FFFFFF;
  --ui-menu-filet: rgba(255, 255, 255, 0.18);
}
html[data-theme="ocean"] {
  --ui-accent: #1E4E8C; --ui-accent-fonce: #173E70; --ui-accent-clair: #E3ECF7;
  --bs-primary-rgb: 30, 78, 140; --bs-link-color-rgb: 30, 78, 140; --bs-link-hover-color-rgb: 23, 62, 112;
  --ui-page: #EAF1F8; --ui-entete-fond: #1E4E8C;
  --ui-menu-fond: #13304F; --ui-menu-texte: #D6E2F0; --ui-menu-texte-2: #D6E2F0; --ui-menu-titre: #95A2B0; --ui-menu-icone: #95A2B0;
}
html[data-theme="foret"] {
  --ui-accent: #22694F; --ui-accent-fonce: #1A5440; --ui-accent-clair: #E2F0E9;
  --bs-primary-rgb: 34, 105, 79; --bs-link-color-rgb: 34, 105, 79; --bs-link-hover-color-rgb: 26, 84, 64;
  --bs-focus-ring-color: rgba(34, 105, 79, 0.35);
  --ui-page: #EDF4F0; --ui-entete-fond: #1F5C46;
  --ui-menu-fond: #153F30; --ui-menu-texte: #D3E6DC; --ui-menu-texte-2: #D3E6DC; --ui-menu-titre: #96A9A2; --ui-menu-icone: #96A9A2;
}
html[data-theme="aubergine"] {
  --ui-accent: #5B3F8C; --ui-accent-fonce: #4A3373; --ui-accent-clair: #ECE6F6;
  --bs-primary-rgb: 91, 63, 140; --bs-link-color-rgb: 91, 63, 140; --bs-link-hover-color-rgb: 74, 51, 115;
  --bs-focus-ring-color: rgba(91, 63, 140, 0.35);
  --ui-page: #F3F0F8; --ui-entete-fond: #5B3F8C;
  --ui-menu-fond: #36245A; --ui-menu-texte: #E2D9F2; --ui-menu-texte-2: #E2D9F2; --ui-menu-titre: #A59CB5; --ui-menu-icone: #A59CB5;
}
html[data-theme="terracotta"] {
  --ui-accent: #A6461F; --ui-accent-fonce: #87391A; --ui-accent-clair: #F8E4DA;
  --bs-primary-rgb: 166, 70, 31; --bs-link-color-rgb: 166, 70, 31; --bs-link-hover-color-rgb: 135, 57, 26;
  --bs-focus-ring-color: rgba(166, 70, 31, 0.35);
  --ui-page: #FBF1EC; --ui-entete-fond: #A6461F;
  --ui-menu-fond: #4F2414; --ui-menu-texte: #F2DDD3; --ui-menu-texte-2: #F2DDD3; --ui-menu-titre: #B09C95; --ui-menu-icone: #B09C95;
}
html[data-theme="aurore"] {
  --ui-accent: #BE185D; --ui-accent-fonce: #9D174D; --ui-accent-clair: #FCE7F3;
  --bs-primary-rgb: 190, 24, 93; --bs-link-color-rgb: 190, 24, 93; --bs-link-hover-color-rgb: 157, 23, 77;
  --bs-focus-ring-color: rgba(190, 24, 93, 0.35);
  --ui-page: #FDF2F7; --ui-entete-fond: linear-gradient(90deg, #BE185D 0%, #C2410C 100%);
  --ui-bandeau-fond: linear-gradient(135deg, #BE185D 0%, #C2410C 100%);
  --ui-menu-fond: linear-gradient(180deg, #4A1030 0%, #2A0B1C 100%);
  --ui-menu-texte: #FBDCEA; --ui-menu-texte-2: #FBDCEA; --ui-menu-titre: #C49AAE; --ui-menu-icone: #C49AAE;
}
html[data-theme="neon"] {
  --ui-accent: #6D28D9; --ui-accent-fonce: #5B21B6; --ui-accent-clair: #EDE9FE;
  --bs-primary-rgb: 109, 40, 217; --bs-link-color-rgb: 109, 40, 217; --bs-link-hover-color-rgb: 91, 33, 182;
  --bs-focus-ring-color: rgba(109, 40, 217, 0.35);
  --ui-page: #F5F3FF; --ui-entete-fond: linear-gradient(90deg, #6D28D9 0%, #0E7490 100%);
  --ui-bandeau-fond: linear-gradient(135deg, #6D28D9 0%, #0E7490 100%);
  --ui-menu-fond: linear-gradient(180deg, #2E1065 0%, #0F2A44 100%);
  --ui-menu-texte: #E4DCFB; --ui-menu-texte-2: #E4DCFB; --ui-menu-titre: #A9A3C9; --ui-menu-icone: #A9A3C9;
}
html[data-theme="lagon"] {
  --ui-accent: #115E59; --ui-accent-fonce: #134E4A; --ui-accent-clair: #CCFBF1;
  --bs-primary-rgb: 17, 94, 89; --bs-link-color-rgb: 17, 94, 89; --bs-link-hover-color-rgb: 19, 78, 74;
  --bs-focus-ring-color: rgba(17, 94, 89, 0.35);
  --ui-page: #EEF8F7; --ui-entete-fond: linear-gradient(90deg, #0F766E 0%, #1D4ED8 100%);
  --ui-bandeau-fond: linear-gradient(135deg, #0F766E 0%, #1D4ED8 100%);
  --ui-menu-fond: linear-gradient(180deg, #0B3B3A 0%, #0B2447 100%);
  --ui-menu-texte: #D5F1EE; --ui-menu-texte-2: #D5F1EE; --ui-menu-titre: #93B4B6; --ui-menu-icone: #93B4B6;
}
html[data-theme="crepuscule"] {
  --ui-accent: #4338CA; --ui-accent-fonce: #3730A3; --ui-accent-clair: #E0E7FF;
  --bs-primary-rgb: 67, 56, 202; --bs-link-color-rgb: 67, 56, 202; --bs-link-hover-color-rgb: 55, 48, 163;
  --bs-focus-ring-color: rgba(67, 56, 202, 0.35);
  --ui-page: #F3F2FD; --ui-entete-fond: linear-gradient(90deg, #4338CA 0%, #BE123C 100%);
  --ui-bandeau-fond: linear-gradient(135deg, #4338CA 0%, #BE123C 100%);
  --ui-menu-fond: linear-gradient(180deg, #1E1B4B 0%, #3B0A1E 100%);
  --ui-menu-texte: #E3E1FB; --ui-menu-texte-2: #E3E1FB; --ui-menu-titre: #A9A6CC; --ui-menu-icone: #A9A6CC;
}
html[data-theme="jungle"] {
  --ui-accent: #065F46; --ui-accent-fonce: #064E3B; --ui-accent-clair: #D1FAE5;
  --bs-primary-rgb: 6, 95, 70; --bs-link-color-rgb: 6, 95, 70; --bs-link-hover-color-rgb: 6, 78, 59;
  --bs-focus-ring-color: rgba(6, 95, 70, 0.35);
  --ui-page: #EEF8F3; --ui-entete-fond: linear-gradient(90deg, #047857 0%, #3F6212 100%);
  --ui-bandeau-fond: linear-gradient(135deg, #047857 0%, #3F6212 100%);
  --ui-menu-fond: linear-gradient(180deg, #053D2E 0%, #1A2E05 100%);
  --ui-menu-texte: #D6F0E3; --ui-menu-texte-2: #D6F0E3; --ui-menu-titre: #A3C2B3; --ui-menu-icone: #A3C2B3;
}

/* Choix du thème (Mon compte) */
.ui-themes { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ui-theme { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--ui-bordure-champ); border-radius: 10px; cursor: pointer; background: var(--ui-surface); }
.ui-theme:has(input:checked) { border: 2px solid var(--ui-accent); padding: 9px; }
.ui-theme:has(input:focus-visible) { box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); }
.ui-theme-apercu { height: 44px; border-radius: 6px; overflow: hidden; display: flex; border: 1px solid var(--ui-bordure); }
.ui-theme-menu { width: 30%; }
.ui-theme-droite { flex: 1; display: flex; flex-direction: column; }
.ui-theme-entete { height: 12px; }
.ui-theme-page { flex: 1; display: flex; align-items: center; justify-content: center; }
.ui-theme-bouton { width: 24px; height: 8px; border-radius: 3px; }
.ui-theme-nom { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; }
.ui-theme-nom input { margin: 0; accent-color: var(--ui-accent); }

/* Info version : rendu du changelog markdown */
.ui-changelog h1 { font-size: 1.25rem; font-weight: 700; margin: 0 0 12px; }
.ui-changelog h2 { font-size: 1.1rem; font-weight: 700; margin: 24px 0 8px; padding-top: 16px; border-top: 1px solid var(--ui-fond); }
.ui-changelog h1 + h2, .ui-changelog h2:first-child { margin-top: 8px; padding-top: 0; border-top: 0; }
.ui-changelog h3 { font-size: .9rem; font-weight: 700; margin: 16px 0 6px; color: var(--ui-texte-2); text-transform: uppercase; letter-spacing: .04em; }
.ui-changelog ul { padding-left: 1.25rem; }
.ui-changelog li { margin: 4px 0; }
.ui-changelog code { background: var(--ui-fond); padding: 1px 5px; border-radius: 4px; }

/* Extractions clients : pagination des résultats sous le tableau */
.ui-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 400; }

/* Textes de courrier : éditeurs Quill (thème snow) aux couleurs de la charte */
.ui-message-attention { background: var(--ui-attention-fond); color: var(--ui-attention); }
.ui-editeur .ql-toolbar.ql-snow { border-color: var(--ui-bordure-champ); border-radius: var(--ui-rayon) var(--ui-rayon) 0 0; background: var(--ui-fond); font-family: inherit; }
.ui-editeur .ql-container.ql-snow { border-color: var(--ui-bordure-champ); border-radius: 0 0 var(--ui-rayon) var(--ui-rayon); background: var(--ui-surface); font-family: inherit; font-size: 0.9375rem; }
.ui-editeur:focus-within .ql-container.ql-snow { box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); }
.ui-editeur .ql-editor.ql-blank::before { font-style: normal; color: var(--ui-texte-2); }
.ui-editeur-court .ql-editor { min-height: 4.5rem; }
.ui-editeur-moyen .ql-editor { min-height: 9rem; }
.ui-editeur-long .ql-editor { min-height: 24rem; }

/* Calendrier : barre de navigation, vues mois, semaine/jour (grille horaire) et liste.
   La couleur du conseiller ne sert qu'au filet gauche : le texte reste aux couleurs de la charte (contraste garanti). */
.ui-calendrier-barre { justify-content: space-between; }
.ui-calendrier-navigation, .ui-calendrier-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-calendrier-outils .form-select { width: auto; max-width: 260px; }
.ui-calendrier-periode { margin: 0 0 0 8px; font-size: 1.125rem; font-weight: 700; }
.ui-calendrier { overflow: hidden; }
.ui-calendrier[aria-busy="true"] > * { opacity: 0.6; }
.ui-calendrier-horaires { margin: 0; padding: 0; border: 0; }
.ui-calendrier-horaires legend { float: none; width: auto; font-size: inherit; }
.ui-calendrier-date-heure { display: flex; gap: 8px; }
.ui-calendrier-date-heure input[type="date"] { flex: 1 1 60%; }
.ui-calendrier-date-heure input[type="time"] { flex: 1 1 40%; }

.ui-cal-evt { --ui-cal-couleur: var(--ui-accent); width: 100%; display: flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 6px; border: 0; border-left: 3px solid var(--ui-cal-couleur); border-radius: 4px; background: var(--ui-accent-clair); color: var(--ui-texte); font-size: 0.75rem; text-align: left; }
.ui-cal-evt:hover { background: var(--ui-neutre-fond); }
.ui-cal-evt-heure { flex: 0 0 auto; font-weight: 600; }
.ui-cal-evt-libelle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-cal-evt-traite { opacity: 0.6; }
.ui-cal-evt-traite .ui-cal-evt-libelle, .ui-cal-evt-traite .ui-cal-bloc-libelle { text-decoration: line-through; }

.ui-cal-mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ui-cal-mois-entete { padding: 10px 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-texte-2); border-bottom: 1px solid var(--ui-bordure); }
.ui-cal-mois-jour { min-height: 118px; padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; border-bottom: 1px solid var(--ui-bordure-legere); border-right: 1px solid var(--ui-bordure-legere); cursor: pointer; }
.ui-cal-mois-jour:nth-child(7n + 7) { border-right: 0; }
.ui-cal-mois-jour:hover { background: var(--ui-fond); }
.ui-cal-fin-semaine { background: var(--ui-page); }
.ui-cal-hors-mois .ui-cal-numero { color: var(--ui-texte-2); font-weight: 400; }
.ui-cal-numero { align-self: flex-start; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-texte); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-cal-numero:hover { background: var(--ui-neutre-fond); }
.ui-cal-numero.ui-cal-aujourdhui, .ui-cal-aujourdhui .ui-cal-tete-bouton { background: var(--ui-accent); color: #FFFFFF; }
.ui-cal-plus { align-self: flex-start; padding: 0 6px; border: 0; background: transparent; color: var(--ui-accent); font-size: 0.75rem; font-weight: 600; }
.ui-cal-plus:hover { text-decoration: underline; }

.ui-cal-semaine { --ui-cal-jours: 7; --ui-cal-heure: 48px; overflow-x: auto; }
.ui-cal-ligne { display: grid; grid-template-columns: 56px repeat(var(--ui-cal-jours), minmax(0, 1fr)); min-width: calc(56px + var(--ui-cal-jours) * 96px); }
.ui-cal-tete, .ui-cal-journees { overflow-y: hidden; scrollbar-gutter: stable; }
.ui-cal-tete { border-bottom: 1px solid var(--ui-bordure); }
.ui-cal-tete-jour { padding: 8px 4px; text-align: center; }
.ui-cal-tete-bouton { display: inline-block; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-texte); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
button.ui-cal-tete-bouton:hover { background: var(--ui-neutre-fond); }
.ui-cal-aujourdhui button.ui-cal-tete-bouton:hover { background: var(--ui-accent-fonce); }
.ui-cal-journees { border-bottom: 1px solid var(--ui-bordure); }
.ui-cal-journees-jour { min-height: 34px; padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; border-left: 1px solid var(--ui-bordure-legere); cursor: pointer; }
.ui-cal-gouttiere-libelle { align-self: center; padding-right: 8px; font-size: 0.6875rem; color: var(--ui-texte-2); text-align: right; }
.ui-cal-defilement { max-height: 640px; overflow-y: auto; scrollbar-gutter: stable; }
.ui-cal-corps { height: calc(24 * var(--ui-cal-heure)); }
.ui-cal-heures { position: relative; }
.ui-cal-heures span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 0.6875rem; color: var(--ui-texte-2); }
.ui-cal-colonne { position: relative; border-left: 1px solid var(--ui-bordure-legere); background-image: repeating-linear-gradient(to bottom, var(--ui-bordure-legere) 0, var(--ui-bordure-legere) 1px, transparent 1px, transparent var(--ui-cal-heure)); cursor: pointer; }
.ui-cal-bloc { --ui-cal-couleur: var(--ui-accent); position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 2px 6px; overflow: hidden; border: 1px solid var(--ui-surface); border-left: 3px solid var(--ui-cal-couleur); border-radius: 4px; background: var(--ui-accent-clair); color: var(--ui-texte); font-size: 0.75rem; line-height: 1.25; text-align: left; z-index: 1; }
.ui-cal-bloc:hover, .ui-cal-bloc:focus-visible { z-index: 3; box-shadow: var(--ui-ombre); }
.ui-cal-bloc-heure { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.ui-cal-bloc-libelle { font-weight: 500; overflow-wrap: anywhere; }
.ui-cal-bloc-detail { color: var(--ui-texte-2); white-space: nowrap; }
.ui-cal-maintenant { position: absolute; left: 0; right: 0; height: 2px; background: var(--ui-danger-fort); z-index: 2; pointer-events: none; }
.ui-cal-maintenant::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-danger-fort); }

.ui-cal-lien { padding: 0; border: 0; background: transparent; color: var(--ui-accent); font-weight: 600; text-align: left; display: inline-flex; align-items: center; gap: 6px; }
.ui-cal-lien:hover { text-decoration: underline; }
.ui-cal-lien.ui-cal-evt-traite { opacity: 1; }

@media (max-width: 575.98px) {
  .ui-cal-mois-jour { min-height: 72px; padding: 2px; }
  .ui-cal-mois-jour .ui-cal-evt-heure { display: none; }
}

/* Projets : projet choisi dans la liste, recherche du client dans la fiche, évènements du suivi */
.ui-tableau tr[data-projet] { cursor: pointer; }
.ui-tableau tr.ui-ligne-choisie td { background: var(--ui-accent-clair); }
.ui-projet-choix { padding: 0; border: 0; background: transparent; color: var(--ui-accent); font-weight: 600; text-align: left; display: block; }
.ui-projet-choix:hover { text-decoration: underline; }
.ui-projet-etape { display: inline-flex; align-items: center; gap: 6px; white-space: normal; text-align: left; }
.ui-projet-client .ui-recherche { max-width: none; }
.ui-projet-suggestions { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.ui-projet-suggestion { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--ui-bordure-legere); border-radius: var(--ui-rayon); background: var(--ui-surface); color: var(--ui-texte); text-align: left; }
.ui-projet-suggestion:hover, .ui-projet-suggestion:focus-visible { background: var(--ui-fond); }
.ui-projet-evenements { max-height: none; }
.ui-projet-note { white-space: pre-line; }
.ui-projet-evenement-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.ui-tache-faite .ui-tache-quand { background: var(--ui-succes-fond); color: var(--ui-succes); }
#projets-suivi:focus { outline: none; }
@media (max-width: 575.98px) { .ui-projet-evenement-actions { margin-left: 62px; } }

/* Compagnies : compagnie choisie dans la liste, coordonnées, services et documents */
.ui-compagnie-choix, .ui-compagnie-lien { padding: 0; border: 0; background: transparent; color: var(--ui-accent); font-weight: 600; text-align: left; }
.ui-compagnie-choix { display: block; }
.ui-compagnie-lien { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.ui-compagnie-choix:hover, .ui-compagnie-lien:hover { text-decoration: underline; }
.ui-compagnie-fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 32px; }
.ui-compagnie-fiche .ui-identite { margin-bottom: 0; }
.ui-compagnie-adresse { white-space: pre-line; overflow-wrap: anywhere; }
.ui-compagnie-services, .ui-compagnie-documents { margin: 0; padding: 12px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ui-compagnie-service { padding: 12px 14px; border: 1px solid var(--ui-bordure-legere); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.ui-compagnie-service-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ui-compagnie-service-corps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ui-compagnie-document { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 8px; border-radius: var(--ui-rayon); }
.ui-compagnie-document:hover { background: var(--ui-fond); }
.ui-compagnie-chemin { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.8125rem; color: var(--ui-texte-2); }
.ui-compagnie-chemin li + li::before { content: "/"; margin-right: 4px; color: var(--ui-texte-2); }
.ui-compagnie-chemin .ui-compagnie-lien { font-weight: 500; }
.btn.ui-item-sensible { color: var(--ui-danger); }
#compagnies-fiche:focus { outline: none; }

/* Contacts avec les compagnies : contact choisi dans la liste */
.ui-tableau tr[data-contact] { cursor: pointer; }
#contacts-compagnie-detail:focus { outline: none; }

/* Listes paginées (contacts, contrats, projets) : liste et élément choisi côte à côte sur grand écran, l'un sous l'autre sinon.
   Le volet de détail peut regrouper plusieurs cartes (.ui-liste-detail-volet) ; il défile seul et reste visible. */
.ui-liste-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.ui-liste-detail-volet { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ui-liste-detail .ui-bloc-outils { flex-wrap: wrap; }
@media (min-width: 1200px) {
  .ui-liste-detail { grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr); }
  .ui-liste-detail > :last-child { position: sticky; top: calc(var(--ui-entete-hauteur) + 16px); max-height: calc(100vh - var(--ui-entete-hauteur) - 32px); overflow-y: auto; }
  /* Marge intérieure compensée pour que le défilement ne coupe pas l'ombre des cartes */
  .ui-liste-detail > .ui-liste-detail-volet:last-child { padding: 4px 4px 16px; margin: -4px; }
}
#contacts-client-detail:focus { outline: none; }

/* Clients : client choisi dans la liste, volets en onglets, cartes de la famille et des structures sociales */
.ui-tableau tr[data-client] { cursor: pointer; }
#clients-fiche:focus { outline: none; }
.ui-onglet-compte:not(:empty) { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--ui-neutre-fond); color: var(--ui-texte-3); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-client-volets { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 32px; }
.ui-client-volets .ui-identite { margin-bottom: 0; }
.ui-client-section-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ui-client-section-tete .ui-section-titre { margin: 0; }
.ui-client-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 32px; }
.ui-client-repertoire { margin: 14px 0 0; font-family: var(--bs-font-monospace); font-size: 0.8125rem; overflow-wrap: anywhere; }
.ui-client-cartes { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ui-client-cartes-larges { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 0; }
.ui-client-carte { padding: 12px 14px; border: 1px solid var(--ui-bordure-legere); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.ui-client-carte-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ui-client-carte-ligne { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.ui-client-carte .ui-identite { gap: 6px; }

/* Anniversaires : texte de l'e-mail du type dans un cadre isolé, filtre dans l'en-tête de la liste */
.ui-anniversaire-apercu { width: 100%; height: 320px; border: 1px solid var(--ui-bordure-legere); border-radius: var(--ui-rayon); background: #FFFFFF; }
#anniversaires .ui-bloc-outils { flex-wrap: wrap; }
#anniversaires .ui-recherche { min-width: 240px; }