/* =====================================================================
   COMPOSANTS.CSS — Optinova CRM
   Boutons, champs, cartes, badges, popups, listes — tous les morceaux
   réutilisés PARTOUT dans l'application.
   Dépend de variables.css et base.css — doit être chargé après eux.
   ===================================================================== */

/* =====================================================================
   RELIEF — légère ombre portée sur les surfaces principales, pour un
   effet de profondeur subtil (pas de bordure plus prononcée). Regroupé
   ici pour n'avoir qu'un seul endroit à ajuster si Will change l'intensité.
   ===================================================================== */
.card,
.stat,
.list-card > .client-row,
.list-card > .tache-row,
.adm-co-row,
.total-box,
.param-liste-groupee,
.toast-succes {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 4px 14px -6px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
}
body.mode-lisible .card,
body.mode-lisible .stat,
body.mode-lisible .list-card > .client-row,
body.mode-lisible .list-card > .tache-row,
body.mode-lisible .adm-co-row,
body.mode-lisible .total-box,
body.mode-lisible .param-liste-groupee,
body.mode-lisible .toast-succes {
  box-shadow: 0 1px 2px rgba(20, 25, 35, .06), 0 1px 1px rgba(20, 25, 35, .04);
}

/* =====================================================================
   TOAST DE SUCCÈS (petit message temporaire en bas de l'écran)
   ===================================================================== */
.toast-succes {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--success);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-7) var(--space-5) var(--space-6);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .6);
  /* Même palier que .erreur-modal-overlay / #confirmationOverlay (6000), pas
     la base des .popup-overlay (5500) : sans ça, un toast déclenché pendant
     qu'un popup est ouvert (ex. le toast annulable après confirmation d'une
     suppression depuis la fiche horaire d'un employé) se retrouvait caché
     derrière le fond sombre du popup, invisible. */
  z-index: 6000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: 90vw;
}
.toast-succes.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-succes-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--success-tint);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toast-succes-icon svg {
  width: 15px;
  height: 15px;
}
.toast-succes-texte {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.mode-lisible .toast-succes-icon {
  background: rgba(20, 108, 46, .12);
}

/* ---------- Toast annulable (suppression différée) ----------
   Même gabarit que le toast de succès, avec un bouton « Annuler » et une
   barre de compte à rebours qui se vide sur la durée du délai. */
.toast-succes.toast-annulable{
  border-color: var(--danger);
  padding-bottom: calc(var(--space-5) + 3px);
  overflow: hidden;                         /* garde la barre dans le radius du coin */
  min-width: min(420px, 90vw);              /* plus large qu'un toast de succès : 2 boutons + texte */
}
/* .toast-succes a pointer-events:none (il n'a normalement pas de bouton et
   ne doit jamais bloquer un clic sur ce qu'il y a en dessous) — mais cette
   variante EST cliquable (le bouton Annuler), donc il faut le réactiver
   explicitement, seulement pendant qu'il est affiché. */
.toast-succes.toast-annulable.show{ pointer-events: auto; }
.toast-succes-icon.danger{
  background: var(--danger-tint);
  color: var(--danger);
}
.toast-annulable-btn{
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 700;
  font-size: var(--font-sm);
  cursor: pointer;
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.toast-annulable-btn:hover{ background: var(--surface-2); }
.toast-annulable-btn.confirmer{ color: var(--danger); }
.toast-annulable-barre{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--danger);
}

/* =====================================================================
   POPUP D'ERREUR (remplace les alert() natifs)
   ===================================================================== */
.erreur-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  z-index: 6000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
}
.erreur-modal-overlay.open {
  display: flex;
  animation: popupFadeIn .15s ease;
}
.erreur-modal-overlay.open .erreur-modal-box {
  animation: popupBoxIn .18s cubic-bezier(.34, 1.56, .64, 1);
}
.erreur-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .6);
  text-align: left;
}
.erreur-modal-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-circle);
  background: var(--danger-tint);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
}
.erreur-modal-titre {
  font-size: var(--font-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
  font-family: 'Space Grotesk';
  color: var(--text);
}
.erreur-modal-message {
  font-size: var(--font-base);
  color: var(--text-muted);
  line-height: 1.55;
  white-space: pre-line;
}

@keyframes popupFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes popupBoxIn {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

/* =====================================================================
   BOUTONS
   ===================================================================== */
.btn{
  -webkit-appearance: none;
  appearance: none;
  padding: var(--space-3) var(--space-7);   /* 8px 16px */
  border-radius: var(--radius-md);          /* 10px */
  font-size: var(--font-base);              /* 13px */
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;                      /* standard : un libellé de bouton ne se casse jamais sur 2 lignes */
}
.btn:disabled{
  opacity: .4;
  cursor: not-allowed;
}
/* Survol standard d'un bouton secondaire (contour turquoise), comme .filtre-chip
   / .pagination-btn. Les variantes .btn-primary / .danger / .danger-outline ont
   leur propre :hover plus spécifique défini plus bas. */
.btn:not(:disabled):hover{
  border-color: var(--accent);
  color: var(--accent);
}

/* Bouton principal — action principale de l'écran (turquoise plein) */
.btn-primary{
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn.btn-primary:not(:disabled):hover{
  background: var(--accent-hover);
  color: var(--text);
  border-color: var(--accent-hover);
}

/* Bouton destructif — contour rouge, réduit la sécurité/supprime */
.btn.danger{
  background: var(--danger);
  color: var(--text);
  border-color: var(--danger);
}
.btn.danger:not(:disabled):hover{
  background: color-mix(in srgb, var(--danger) 86%, #000);
  border-color: color-mix(in srgb, var(--danger) 86%, #000);
  color: var(--text);   /* garde le texte clair — sinon il hérite du turquoise de .btn:hover */
}

/* Bouton de connexion */
.btn-login{
  width: 100%;
  padding: var(--space-5) var(--space-6);   /* 12px 14px */
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-md);          /* 10px */
  font-size: var(--font-md);                /* 14px */
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--space-2);
  transition: background .15s ease, color .15s ease;
}
.btn-login:hover{
  background: var(--accent-hover);
  color: var(--text);
}
/* En chargement (voir demarrerChargement dans dom-utils.js) : fond assombri
   (même teinte que le survol), pas juste grisé. */
.btn-login:disabled{
  background: var(--accent-hover);
  color: var(--text);
  cursor: default;
}

/* Bouton "+ Ajouter" à côté des titres de page — taille standard .btn
   (13px / ~34px), identique au bouton « Mettre à jour » des fiches.
   La classe reste comme point d'accroche (.etat-approuve, "Tout approuver"). */
.btn-titre-ajouter{ flex-shrink: 0; }

/* =====================================================================
   CHAMPS DE FORMULAIRE
   ===================================================================== */
.field input,
.field textarea,
.field select{
  width: 100%;
  padding: var(--space-4) var(--space-5);   /* 10px 12px */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);          /* 10px */
  font-size: var(--font-base);              /* 13px */
  color: var(--text);
  background: var(--surface-2);
}
.field select{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: var(--icon-chevron-select);
  background-repeat: no-repeat;
  background-position: right var(--space-5) center;
  background-size: 14px;
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled{
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-2) !important;
  opacity: 1 !important;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}
::placeholder{
  color: var(--text-muted);
  opacity: 1;
}
.field select:has(option[value=""]:checked){
  color: var(--text-muted);
}

.search-bar{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
  position: relative;                       /* ancre les suggestions absolues internes */
}
.search-input-wrap{
  position: relative;
  flex: 1;
  min-width: 0;
}
.search-count{
  font-size: var(--font-sm);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.search-input-wrap .search-clear{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
.search-input-wrap input:not(:placeholder-shown) ~ .search-clear{
  display: flex;
}
.search-bar input{
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-4) 32px var(--space-4) var(--space-5); /* le 32px = espace fixe pour le ✕, cas unique */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  color: var(--text);
  background: var(--surface-2);
}
.search-clear{
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  border: none;
  padding: 0;
  background: var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.search-clear:hover{
  background: var(--accent);
  color: var(--bg);
}
/* Le ✕ : petit et net dans la pastille (sans ça le SVG sans width/height
   rend trop gros et déborde). Taille reprise de l'ancienne app. */
.search-clear svg{ width: 12px; height: 12px; }

/* =====================================================================
   CARTES
   ===================================================================== */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);             /* 14px */
  padding: var(--space-7);                  /* 16px */
  margin-bottom: var(--space-4);
}
.card-title{
  font-size: var(--font-md);                /* 14px */
  font-weight: 600;
  margin-bottom: var(--space-5);
  font-family: 'Space Grotesk';
}
.card-nom{
  font-weight: 600;
  font-size: var(--font-lg);                /* 16px — décision : mise en valeur comme un titre/valeur */
}

.stat{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);          /* 10px */
  padding: var(--space-5);                  /* 12px */
  position: relative;
  overflow: hidden;
}
.total-box{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-5);
}
.finance-box{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);                  /* 14px */
  margin-bottom: var(--space-5);
}
.section-item,
.fa-section-row{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-3);
}

/* =====================================================================
   LISTES (Clients, Fournisseurs, Tâches, panneau admin...)
   ===================================================================== */
/* Conteneur de liste : les lignes sont des cartes séparées par un
   espace (vaut pour toute l'app — Clients, Fournisseurs, Tâches...). */
.list-card{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);                      /* 8px */
}
.list-card > .client-row,
.list-card > .tache-row,
.adm-co-row{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);   /* 12px 14px — arrondi depuis 12px 13px */
}
/* Disposition de base d'une ligne : nom/adresse à gauche (.info),
   badges + menu à droite (.actions). Sans ce flex, .actions retombe
   SOUS .info (ligne trop haute) et, comme .actions porte
   onclick="event.stopPropagation()", il recouvre le bas de la ligne et
   avale le clic d'ouverture de la fiche. */
.client-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);                      /* 10px */
  cursor: pointer;
  transition: background .15s ease;
}
.client-row:hover,
.tache-row:hover,
.adm-co-row:hover{
  background: var(--surface-2);
}
.client-row .info,
.tache-row .info{
  min-width: 0;
  flex: 1;
}
.client-row .nom,
.tache-row .nom{
  font-size: var(--font-base);
  font-weight: 500;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-row .meta,
.tache-row .meta{
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nom + badge de type sur la même ligne (l'ellipsis passe sur .nom-texte) */
.client-row .nom.nom-avec-badge{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  white-space: normal;
}
.client-row .nom-texte{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Description en gris à la suite du nom (ex: article de matériel) */
.client-row .nom-desc{ font-weight: 400; color: var(--text-muted); }
/* Badges "À facturer" / "État de compte" empilés à droite de la ligne */
.client-row-badges{
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-end;
}
.client-row .actions{
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  align-items: center;
  position: relative;
}
.tache-row .actions{
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  align-items: center;
  position: relative;
  margin-left: auto;
}

/* État vide — liste sans résultat, ou erreur de chargement */
.empty-state.erreur{ color: var(--danger); }
.empty-state{
  text-align: center;
  padding: var(--space-7);
  color: var(--text-muted);
  font-size: var(--font-base);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.empty-state--erreur{ color: var(--danger); }

/* =====================================================================
   ENVOI PAR COURRIEL (popup partagé) — puces de destinataires
   ===================================================================== */
.ec-chips{ display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.ec-chip{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--text);
  font-size: var(--font-sm);
}
.ec-chip button{
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-md);
  line-height: 1;
  padding: 0;
}
.ec-chip button:hover{ color: var(--danger); }
.ec-message{ min-height: 120px; }

/* Carte de paiement enregistrée (Paramètres → Abonnement) */
.abo-carte{
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--font-base);
}
.abo-carte-marque{ font-weight: 600; }
.abo-carte-exp{ font-size: var(--font-sm); color: var(--text-muted); }
/* Champs de carte Stripe Elements (montés dans ces conteneurs) */
/* Logos de cartes acceptées, sur leur propre ligne au-dessus du champ
   « Numéro de carte » — convention standard des formulaires de paiement. */
.cartes-acceptees{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.carte-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-xs);
  font-size: var(--font-sm);
  font-weight: 700;
  color: #fff;
  letter-spacing: .3px;
}
.carte-visa{ background: #1A1F71; font-style: italic; }
.carte-amex{ background: #006FCF; }
.carte-discover{ background: #FF6000; }
.carte-mastercard{ padding: 0 var(--space-2); background: var(--surface-2); }
.carte-mastercard svg{ display: block; }

.abo-stripe-champ{
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.abo-stripe-champ.StripeElement--focus{ border-color: var(--accent); }
.abo-stripe-champ.StripeElement--invalid{ border-color: var(--danger); }

/* Choix de plan (Base / Premium) — souscription et changement de plan.
   Cartes cliquables, sobres (pas d'icône) ; .active = sélectionnée / plan
   actuel (classe déjà branchée par aboChoisirPlan / aboChoisirPlanForm). */
.plan-cartes{ display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-2); }
@media (min-width: 600px){ .plan-cartes{ grid-template-columns: 1fr 1fr; } }
.plan-carte{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.plan-carte:hover{ border-color: var(--accent-dim); }
.plan-carte.active{ border-color: var(--accent); background: var(--accent-tint); }
.plan-carte-nom{ font-family: 'Space Grotesk'; font-weight: 700; font-size: var(--font-md); margin-bottom: var(--space-1); }
.plan-carte.active .plan-carte-nom{ color: var(--accent); }
.plan-carte-prix{ font-size: var(--font-base); font-weight: 600; color: var(--text-muted); margin-bottom: var(--space-2); }
.plan-carte.active .plan-carte-prix{ color: var(--accent); }
.plan-carte-prix span{ font-size: var(--font-sm); font-weight: 500; color: var(--text-muted); }
.plan-carte-desc{ font-size: var(--font-sm); color: var(--text-muted); }

/* Lien "Voir les modules" sous une carte de plan — ouvre la popup listant
   ce qui est inclus (voir .plan-carte-inclus plus bas). */
.lien-en-savoir-plus{
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--space-3);
  font-size: var(--font-xs);
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.lien-en-savoir-plus:hover{ color: var(--accent-dim); }

/* Liste des modules inclus dans un plan, à l'intérieur de la popup de détails. */
.plan-carte-inclus{
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  font-size: var(--font-base);
  color: var(--text);
}
.plan-carte-inclus li{
  padding: var(--space-2) 0 var(--space-2) 22px;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.plan-carte-inclus li:last-child{ border-bottom: none; }
.plan-carte-inclus li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}
/* Module absent de ce plan — même liste, juste un X rouge à la place du
   crochet vert (voir aboVoirDetailsPlan dans modules/parametres.html). */
.plan-carte-inclus li.non-inclus{ color: var(--text-muted); }
.plan-carte-inclus li.non-inclus::before{ content: "✕"; color: var(--danger); }

/* =====================================================================
   VÉRIFICATION EN 2 ÉTAPES (Paramètres → Sécurité)
   ===================================================================== */
.mfa-qr{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: #fff;
  border-radius: var(--radius-md);
}
.mfa-qr img{ max-width: 100%; height: auto; }
.champ-mono{
  font-family: "JetBrains Mono", ui-monospace, "Menlo", "Consolas", monospace;
  font-size: var(--font-sm);
}

/* Bulles de filtre au-dessus d'une liste (ex: Toutes / À facturer / ...) */
.filtre-chips{
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  margin-bottom: var(--space-5);
  scrollbar-width: none;
}
.filtre-chips::-webkit-scrollbar{ display: none; }

/* Pagination — boutons précédent/suivant sous une liste */
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  margin-top: var(--space-4);
}
.pagination-btn{
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  position: relative;
}
.pagination-btn:hover{
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent);
}
.pagination-btn svg{ width: 16px; height: 16px; }
.pagination-btn:disabled{ opacity: .3; cursor: default; }
.pagination-label{
  font-size: var(--font-xs);
  color: var(--text-muted);
  min-width: 90px;
  text-align: center;
}

/* Menu à trois points (actions rapides) */
.row-menu-btn{
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);          /* 7px */
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 19px;                          /* icône "⋮" — pas du texte, hors échelle volontairement */
  position: relative;
  transition: background .15s ease, color .15s ease;
}
.row-menu-btn::before{                      /* agrandit la zone tactile sans déplacer l'icône */
  content: "";
  position: absolute;
  inset: -4px;
}
.row-menu-btn:hover{
  background: var(--surface-2);
  color: var(--text);
}
.row-menu{
  display: none;
  position: fixed;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.5);
  min-width: 170px;
  z-index: 5600;
  overflow: hidden;
}
.row-menu.ouvert{ display: block; }         /* classe posée par toggleRowMenu() dans dom-utils.js */
.row-menu-item{
  padding: var(--space-4) var(--space-6);   /* 10px 14px */
  font-size: var(--font-base);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.row-menu-item:hover{ background: var(--border); }
.row-menu-item.danger{ color: var(--danger); }

/* =====================================================================
   BADGES / ÉTIQUETTES / PILULES

   Placement standard sur une .client-row / .fiche-sous-ligne (à respecter
   pour toute nouvelle liste) :
   - Badge D'IDENTITÉ — décrit ce que la ligne EST (rôle, type de client,
     « Toi ») : collé au nom, à GAUCHE, dans .info/.nom (ou
     .fiche-sous-ligne-corps).
   - Tout le reste (statut/alerte comme « À facturer », « État de compte »,
     « Stock bas », statut d'un document — ET les badges « Principal »/
     « Facturation »/« Par défaut » d'un contact ou d'une adresse) : à
     DROITE, dans .actions (ou .fiche-sous-ligne-actions), avant le bouton
     menu/poubelle.
   ===================================================================== */
.tag{
  display: inline-block;
  padding: 1px var(--space-3);              /* le 1px reste un cas unique */
  border-radius: var(--radius-pill);
  font-size: var(--font-xs);                /* 10px */
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}
.numero-badge{
  background: var(--info-tint);
  color: var(--info);
  padding: var(--space-1) var(--space-4);   /* 4px 10px — arrondi depuis 3px */
  border-radius: var(--radius-pill);
  font-size: var(--font-sm);                /* 11px */
  font-weight: 700;
}
.plan-badge{
  font-size: var(--font-xs);                /* 10px */
  font-weight: 700;
  padding: var(--space-1) 9px;              /* 4px 9px — arrondi depuis 3px */
  border-radius: var(--radius-pill);
  background: var(--purple-tint);
  color: var(--purple);
}
.notif-badge{
  display: none;                            /* état par défaut — JS bascule à "flex" (notifications.js) */
  position: absolute;
  top: -3px;
  right: -4px;
  background: var(--danger);
  color: var(--bg);
  font-size: var(--font-xs);                /* 10px — arrondi depuis 9px */
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  align-items: center;
  justify-content: center;
  padding: 0 3px;                           /* cas unique, laissé tel quel */
}

.chip-action-sm{
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--space-3);                /* 0 8px */
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--font-sm);                /* 11px */
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip-action-sm:hover{
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent);
}

.filtre-chip{
  padding: var(--space-2) var(--space-5);   /* 6px 12px */
  border-radius: var(--radius-pill);
  font-size: var(--font-sm);                /* 11px */
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.filtre-chip:hover{
  border-color: var(--accent);
  color: var(--text);
}
.filtre-chip.active{
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.filtre-chip.active:hover{
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text);
}

/* Sélecteur compact en ligne (ex. rôle dans une liste d'utilisateurs) —
   mêmes tokens que .field select, mais taille alignée sur .icon-btn-sm
   pour s'intégrer dans une rangée d'actions plutôt qu'un formulaire. */
.select-sm{
  -webkit-appearance: none;
  appearance: none;
  height: 30px;
  padding: 0 26px 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  color: var(--text);
  background-color: var(--surface-2);
  background-image: var(--icon-chevron-select);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 14px;
  cursor: pointer;
}
.select-sm:hover{ border-color: var(--accent); }

/* Icônes-boutons compacts */
.icon-btn-sm{
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);          /* 7px */
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  position: relative;
}
.icon-btn-sm::before{                       /* agrandit la zone tactile */
  content: "";
  position: absolute;
  inset: -5px;
}
.icon-btn-sm svg{ width: 14px; height: 14px; }
.icon-btn-sm:hover{
  background: var(--surface);
  color: var(--accent);
  border-color: var(--accent);
}
.icon-btn-sm.danger{ color: var(--danger); }
.icon-btn-sm.danger:hover{ color: var(--danger); border-color: var(--danger); }
/* Bouton « recherche avancée » quand au moins un filtre est actif */
.icon-btn-sm.filtres-actifs{ color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }

/* Barre de progression */
.progress-track{
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
  margin: var(--space-3) 0;
}
.progress-fill{
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width .3s ease;
}
/* Approche d'une limite (ex. espace de stockage) — mêmes seuils que les
   badges de statut ailleurs dans l'app. */
.progress-fill.warn{ background: var(--safety); }
.progress-fill.danger{ background: var(--danger); }

/* =====================================================================
   POPUPS / MODALS
   ===================================================================== */
.popup-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 5500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-7) var(--space-7);
  overflow-y: auto;
}
/* Confirmation / prompt : ce sont des dialogues d'INTERRUPTION, souvent
   déclenchés PAR-DESSUS un autre popup déjà ouvert (ex. « Tout recevoir »
   dans le popup de réception) — ils doivent donc toujours passer au-dessus
   de n'importe quel .popup-overlay classique, peu importe l'ordre dans
   lequel les popups partagés ont été injectés dans le DOM au démarrage.
   Même palier que .erreur-modal-overlay (z-index: 6000). */
#confirmationOverlay, #promptOverlay{ z-index: 6000; }
.popup-overlay.open{
  display: flex;
  animation: popupFadeIn .15s ease;
}
.popup-overlay.open .popup-box{
  animation: popupBoxIn .18s cubic-bezier(.34,1.56,.64,1);
}
.popup-box{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);             /* 14px — fusionné depuis 16px */
  padding: 22px;                            /* cas unique, hors échelle */
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,.6);
  text-align: left;
  margin: auto 0;
  position: relative;
}
.popup-box-title{
  font-size: var(--font-lg);                /* 16px — fusionné depuis 17px */
  font-weight: 700;
  margin-bottom: var(--space-7);
  font-family: 'Space Grotesk';
  color: var(--text);
}
/* Paragraphe d'intro sous un titre de popup (prompt, explication…) */
.popup-texte{
  font-size: var(--font-base);
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-6);
  white-space: pre-line;
}
.popup-close-x{
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);          /* 10px — fusionné depuis 8px */
  background: none;
  border: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

/* =====================================================================
   PARAMÈTRES (cartes groupées qui se déplient)
   ===================================================================== */
.param-liste-groupee{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.param-liste-groupee > .card{
  background: transparent;
  border: none;
  border-radius: 0;                         /* volontaire — ligne à l'intérieur du groupe */
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  padding: var(--space-6) var(--space-7);   /* 14px 16px */
  transition: background .15s ease;
}
.param-icon{
  display: flex;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);          /* 10px — décision : aligné sur les avatars/icônes de taille similaire */
  background: var(--surface-2);
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
/* Liens légaux tout en bas de Paramètres (même gabarit que .login-foot —
   voir styles/layout.css — mais centré et avec un séparateur entre les deux). */
.parametres-footer-liens{
  text-align: center;
  padding: var(--space-6) 0;
  font-size: var(--font-sm);
  color: var(--text-muted);
}
.parametres-footer-liens a{ color: inherit; text-decoration: underline; }
.parametres-footer-liens a:hover{ color: var(--text); }
.parametres-footer-liens-sep{ margin: 0 var(--space-3); }
#par-version{ margin-top: var(--space-2); font-size: var(--font-xs); }
.param-icon svg{ width: 18px; height: 18px; }   /* sinon l'icône s'affiche à sa taille par défaut (énorme) */
.param-title-text,
.param-title-solo,
.param-back-btn{
  font-size: var(--font-md);                /* 14px */
  font-weight: 600;
  color: var(--text);
  font-family: 'Space Grotesk';
}
.param-title-solo{
  flex: 1;
  min-width: 0;
}
.param-back-btn{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;   /* sinon "Retour aux clients" se casse sur 3 lignes */
}
/* Sans taille explicite, la flèche SVG s'affiche énorme (viewBox seul). */
.param-back-btn svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
}
/* .param-section-label retiré 2026-09-17 — faisait doublon avec
   .section-label (même rôle, couleur/graisse/marge différentes) ; les 4
   usages dans modules/parametres.html utilisent maintenant .section-label. */

/* =====================================================================
   PALETTE DE COULEURS RAPIDES (remplace la barre native <input
   type="color">) — voir shared/palette-couleur.js. Réutilisée partout où
   l'app propose une couleur de marque ou une couleur d'employé.
   ===================================================================== */
.palette-couleur{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.palette-couleur-swatch{
  width: 26px;
  height: 26px;
  border-radius: var(--radius-circle);
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.palette-couleur-swatch.active{ border-color: var(--text); }
.palette-couleur-swatch.personnalise{
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: var(--font-md);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.palette-couleur-swatch.personnalise.active{ border-style: solid; border-color: var(--text); }
.palette-couleur-input-cache{
  /* !important nécessaire : .field input (largeur 100% + padding + bordure,
     plus spécifique que cette classe seule) écrasait sinon ce masquage —
     l'input natif redevenait un rectangle invisible étiré sur toute la
     largeur du champ, cliquable bien au-delà des pastilles visibles. */
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
}
/* Aperçu (dans le popup .popup-box « Couleur personnalisée », voir
   shared/palette-couleur.js) — le sélecteur natif du navigateur n'a pas
   de bouton pour se refermer, ce popup en donne un. */
.palette-couleur-popup-apercu{
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  margin: 0 auto var(--space-6);
}

/* =====================================================================
   PHOTOS DE LA JOB (bon de travail / facture) — voir shared/photos-job.js.
   ===================================================================== */
.photos-job-grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.photos-job-item{
  position: relative;
  width: 72px;
  height: 72px;
}
.photos-job-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  cursor: pointer;
}
.photos-job-supprimer{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  background: var(--danger);
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.photos-job-btn{
  width: 100%;
  display: block;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}
.photos-job-msg{
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.photos-job-msg.erreur{ color: var(--danger); }
.popup-box-photo{ max-width: 90vw; width: auto; background: none; border: none; box-shadow: none; padding: var(--space-7); }
.popup-box-photo img{
  max-width: 90vw;
  max-height: 80vh;
  display: block;
  border-radius: var(--radius-md);
}

/* =====================================================================
   FICHE DÉTAILLÉE (fiche client — et plus tard fiche fournisseur /
   fiche employé). Tout ce bloc porte des composants qui, dans l'ancien
   index.html, étaient écrits en style inline : ici ce sont de vraies
   classes qui s'appuient sur les 41 variables.
   ===================================================================== */

/* ---------- Champs de formulaire : conteneur + label + zone de texte ----------
   Les règles .field input/textarea/select existaient déjà plus haut ;
   il manquait le conteneur, le label, le focus et la taille du textarea
   (aucun écran de l'app n'avait encore de vrai formulaire — l'écran de
   connexion utilise .login-field, à part). */
.field{
  margin-bottom: var(--space-4);            /* 10px */
  text-align: left;
}
.field label{
  display: block;
  font-size: var(--font-sm);                /* 11px */
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-1);            /* 4px */
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline: none;
  border-color: var(--accent);
}
.field textarea{
  height: 60px;
  resize: none;
  font-family: inherit;
}
.field input[type="date"],
.field input[type="time"]{
  -webkit-appearance: none;
  appearance: none;
  /* Le contrôle natif date/time (icône calendrier/horloge) est intrinsèquement
     plus haut qu'un champ texte au même padding — sans ce correctif le champ
     dépasse visiblement les champs texte voisins. Padding vertical réduit
     pour compenser (mesuré : ramène les deux à la même hauteur) ; le
     min-height garde un plancher pour les sélecteurs natifs iOS, plus petits
     par défaut, sans forcer la hauteur plus grande sur desktop. */
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 34px;
  line-height: 1.3;
}

/* Astérisque « champ obligatoire » */
.req{ color: var(--danger); }

/* Contour rouge sur un champ invalide à la validation — voir
   marquerChampsInvalides()/nettoyerChampsInvalides() dans dom-utils.js.
   Standard de l'app : chaque écran doit signaler un champ obligatoire
   manquant en le bordant en rouge, pas juste par un message texte à
   côté du bouton. */
.champ-invalide{ border-color: var(--danger) !important; }

/* Ligne de champ avec une case à cocher à gauche (popups contact / adresse) */
.field-checkbox{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}
.field-checkbox input[type="checkbox"]{ width: auto; }
.field-checkbox label{ margin: 0; }

/* =====================================================================
   IMPORT EXCEL / CSV (Paramètres → Données) — zone de dépôt, étape de
   correspondance des colonnes, aperçu
   ===================================================================== */
.import-dropzone{
  display: block;
  text-align: center;
  padding: var(--space-7);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  cursor: pointer;
}
.import-dropzone:hover{ border-color: var(--accent); }
.import-dropzone input{ display: none; }
.import-dropzone-titre{ display: block; font-weight: 600; margin-bottom: var(--space-1); }
.import-dropzone-sous{ display: block; font-size: var(--font-sm); color: var(--text-muted); }
.import-map-row{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.import-map-row:last-child{ border-bottom: none; }
.import-map-label{ flex: 0 0 42%; font-size: var(--font-sm); }
.import-map-row select{ flex: 1 1 auto; min-width: 0; }
.import-apercu-wrap{
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}
.import-apercu-table{ border-collapse: collapse; width: 100%; font-size: var(--font-xs); }
.import-apercu-table th,
.import-apercu-table td{
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  white-space: nowrap;
}
.import-apercu-table th{ background: var(--surface-2); }

/* ---------- Deux champs côte à côte ---------- */
.row2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);                      /* 8px */
  margin-bottom: var(--space-4);            /* 10px — même marge qu'un .field normal, posée ici plutôt que sur les .field internes : dans une grille, la marge d'un enfant ne fusionne pas avec l'élément suivant, elle s'additionnerait à sa marge du haut (espace invisible en trop avant un .btn-row par ex). */
}
.row2 > .field{ margin-bottom: 0; }
@media (max-width: 600px){
  /* Même seuil que .btn-row plus bas : sous 600px, une paire de champs
     (Ville/Code postal, TPS/TVQ, Expiration/CVC...) devient trop étroite
     pour rester lisible côte à côte — on l'empile comme le reste du
     formulaire mobile. */
  .row2{ grid-template-columns: 1fr; }
}

/* ---------- Rangée de boutons (bas de fiche / de popup) ---------- */
.btn-row{
  display: flex;
  gap: var(--space-3);                      /* 8px */
  margin-top: var(--space-6);               /* 14px — écart standard entre le contenu au-dessus et la rangée de boutons. NE PAS ajouter .espace-haut sur un .btn-row. */
  flex-wrap: wrap;
}
/* Un .btn-row qui termine une carte SANS .fiche-msg à la suite (ex : « +
   Ajouter une adresse », qui ouvre un popup plutôt que d'afficher un
   retour en ligne) doit garder le même coussin en bas que les cartes qui
   se terminent par un .fiche-msg (8px de marge + 16px de hauteur mini =
   24px) — sinon le bas de cette carte paraît plus serré que les autres. */
.card > .btn-row:last-child{ margin-bottom: var(--space-8); }
/* Rangée forcée sur une seule ligne (ex: État de compte / À facturer /
   Supprimer en haut de la fiche). Boutons compacts + texte tronqué pour
   tenir sur un téléphone étroit. */
.btn-row.serree{ flex-wrap: nowrap; }
.btn-row.serree .btn{
  flex: 1;
  min-width: 0;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  font-size: var(--font-sm);               /* 11px */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bouton destructif en contour seul (haut de la fiche) */
.btn.danger-outline{
  color: var(--danger);
  border-color: var(--danger);
}
/* Survol : le contour rouge se remplit (affordance « action destructive »). */
.btn.danger-outline:not(:disabled):hover{
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text);
}

/* ---------- En-tête « retour » au-dessus d'une fiche ---------- */
.param-detail-header{
  display: flex;
  margin-bottom: var(--space-4);
}

/* ---------- En-tête d'identité de la fiche (avatar + nom + type) ---------- */
.fiche-entete{
  display: flex;
  align-items: center;
  gap: var(--space-5);                      /* 12px */
  margin-bottom: var(--space-6);
}
.fiche-entete-avatar{
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  background: var(--surface-2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk';
  font-weight: 700;
  font-size: var(--font-md);
  flex-shrink: 0;
}
.fiche-entete-bloc{
  min-width: 0;
  flex: 1;
}
.fiche-entete-nom{
  font-size: var(--font-lg);                /* 16px */
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fiche-entete-sub{
  font-size: var(--font-base);             /* 13px */
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fiche-note-creation{
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin: calc(-1 * var(--space-2)) 0 var(--space-6);
}

/* ---------- Libellé de sous-section (« Aperçu », « Factures »...) ---------- */
.section-label{
  font-size: var(--font-sm);                /* 11px */
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 18px 0 var(--space-4);            /* 18px : espacement de section, cas unique */
}
.section-label.avec-fleches{
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: none;
}
.section-label .nav-annee{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  text-transform: none;
}
.section-label .nav-annee-valeur{
  min-width: 34px;
  text-align: center;
  color: var(--text);
}

/* ---------- Cartes repliables (voir shared/fiches-commun.js) ---------- */
.card.repliable > .card-title{
  display: flex;
  align-items: center;
  gap: var(--space-5);
  cursor: pointer;
  user-select: none;
}
.param-liste-groupee > .card.repliable > .card-title{
  justify-content: flex-start;
}
.card-collapse-chevron{
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text-muted);
  transition: transform .2s ease;
}
/* Bouton « ! » optionnel dans l'en-tête d'une carte repliable, juste avant
   la flèche (déjà en margin-left:auto donc reste collée à droite peu
   importe où ce bouton est placé dans le HTML). event.stopPropagation()
   côté onclick, sinon le clic ouvrirait/fermerait aussi la carte. */
.card-title-aide{
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  color: var(--text-muted);
  display: flex;
  flex-shrink: 0;
  padding: var(--space-1);
  cursor: pointer;
}
.card-title-aide:hover{ color: var(--text); }
.card.repliable.collapsed{ padding-bottom: var(--space-7); }
.card.repliable.collapsed > .card-title{ margin-bottom: 0; }
.card.repliable.collapsed > *:not(.card-title){ display: none; }
.card.repliable.collapsed .card-collapse-chevron{ transform: rotate(-90deg); }

/* Icône ronde en tête de carte repliable */
.param-title-block{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
/* Usage « en-tête de page » (un <div>, ex: fiche projet) — pas le <span>
   des titres de carte : besoin d'un espace avant la 1re carte, comme le
   fait .fiche-entete sur les autres fiches. */
div.param-title-block{ margin-bottom: var(--space-6); }
.param-title-sub{
  font-size: var(--font-sm);
  font-weight: 400;
  color: var(--text-muted);
}

/* ---------- Lignes total / listes internes de fiche et de popup ---------- */
.total-line{
  display: flex;
  justify-content: space-between;
  font-size: var(--font-base);              /* 13px */
  padding: var(--space-1) 0;
  color: var(--text-muted);
}
.total-line.final{
  font-size: var(--font-lg);                /* 16px */
  font-weight: 700;
  color: var(--accent);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  margin-top: var(--space-1);
}
/* Ligne d'un sous-élément de fiche (contact, adresse d'expédition) */
.fiche-sous-ligne{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
}
.fiche-sous-ligne + .fiche-sous-ligne{ border-top: 1px solid var(--border); }
.fiche-sous-ligne-corps{ line-height: 1.6; min-width: 0; }
.fiche-sous-ligne-meta{
  display: block;
  color: var(--text-muted);
  font-size: var(--font-sm);
  margin-top: 2px;  /* aligné sur .client-row .meta — même rôle (ligne sous un nom) */
}
.fiche-sous-ligne-actions{
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  position: relative;
}
.tag.tag-sm{ font-size: var(--font-xs); }

/* Variantes de couleur d'étiquette — évitent le background/color inline
   sur chaque <span class="tag"> (badges « Principal », « Par défaut »...). */
.tag-accent{ background: var(--accent-tint); color: var(--accent); }
.tag-safety{ background: var(--safety-tint); color: var(--safety); }
.tag-info{ background: var(--info-tint); color: var(--info); }
.tag-success{ background: var(--success-tint); color: var(--success); }
.tag-danger{ background: var(--danger-tint); color: var(--danger); }
.tag-muted{ background: var(--surface-2); color: var(--text-muted); }

/* ---------- Grille d'aperçu (voir dessinerGrilleStats) ---------- */
.stats-grille{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.stat-case{
  position: relative;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-2);
}
/* Icône "i" — explique ce que la carte compte exactement (quels statuts
   sont inclus/exclus). Au clic, comme toggleRowMenu (voir dom-utils.js). */
.stat-case-info{
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circle);
  border: none;
  background: rgba(255, 255, 255, .1);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  line-height: 16px;
  text-align: center;
  padding: 0;
  cursor: pointer;
}
.stat-case-info:hover{ background: rgba(255, 255, 255, .18); color: var(--text); }
.stat-case-info-bulle{
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 20;
  width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-sm);
  font-weight: 400;
  color: var(--text);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .5);
}
.stat-case-info-bulle.ouvert{ display: block; }
.stat-case--gray{ background: var(--surface-2); }   /* neutre — comme .stat-case de base */
.stat-case--info{ background: var(--info-tint); }
.stat-case--success{ background: var(--success-tint); }
.stat-case--danger{ background: var(--danger-tint); }
.stat-case-entete{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.stat-case-entete svg{
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.stat-case-entete span{
  font-size: var(--font-sm);
  color: var(--text-muted);
  line-height: 1.3;
}
.stat-case-montant{
  font-size: var(--font-lg);               /* 16px */
  font-weight: 600;
  color: var(--text);
}
.stat-case-n{
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 1px;
}
.stat-case--info .stat-case-entete svg,
.stat-case--info .stat-case-montant{ color: var(--info); }
.stat-case--success .stat-case-entete svg,
.stat-case--success .stat-case-montant{ color: var(--success); }
.stat-case--danger .stat-case-entete svg,
.stat-case--danger .stat-case-montant{ color: var(--danger); }

/* Bandeau « Total dû » sous la grille */
.stat-total-du{
  background: var(--danger-tint);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stat-total-du-label{
  font-size: var(--font-base);
  color: var(--text-muted);
}
.stat-total-du-valeur{
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--danger);
}

/* Aère entre le bloc aperçu (qui finit sur « Total dû » / « Net à payer »)
   et la première carte repliable (Identité) juste en dessous. Vaut pour
   la fiche client ET la fiche fournisseur. */
#fc-post-creation,
#ff2-post-creation{ margin-bottom: var(--space-7); }   /* 16px */

/* ---------- Popup large (listes : état de compte, à facturer…) ---------- */
.popup-box.popup-box-wide{ max-width: 640px; }

/* Ligne d'une liste dans un popup (facture, crédit, bon de travail…) :
   libellé + méta à gauche, montant (+ éventuel bouton) à droite. */
.popup-liste-ligne{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.popup-liste-ligne + .popup-liste-ligne{ border-top: 1px solid var(--border); }
.popup-liste-ligne--cliquable{ cursor: pointer; margin: 0 calc(var(--space-4) * -1); padding-left: var(--space-4); padding-right: var(--space-4); border-radius: var(--radius-sm); transition: background .15s ease; }
.popup-liste-ligne--cliquable:hover{ background: var(--surface-2); }
.popup-liste-ligne .info{ min-width: 0; flex: 1; }
.popup-liste-ligne .nom{
  font-size: var(--font-base);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-liste-ligne .meta{
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 2px;
}
.popup-liste-actions{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}
.popup-liste-montant{ font-weight: 600; font-size: var(--font-base); white-space: nowrap; }
.popup-liste-montant.credit{ color: var(--accent); }
.popup-liste-retard{ color: var(--danger); }
.btn.btn-mini{
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-sm);
}

/* Ligne de total au bas d'une liste de popup (« Net à payer », « Total estimé »…) */
.popup-liste-total{
  display: flex;
  justify-content: space-between;
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--accent);
}

/* Toggle Entreprise / Particulier verrouillé une fois le client créé
   (on ne mélange pas nom/prénom et raison sociale après coup). */
.filtre-chips.verrouille .filtre-chip{
  opacity: .5;
  pointer-events: none;
  cursor: default;
}

/* Message d'erreur sous un formulaire de fiche ou de popup. Toujours en
   rouge (les succès passent par le toast), .ok le repasse en vert. */
.fiche-msg{
  font-size: var(--font-sm);
  color: var(--danger);
  min-height: 16px;
  margin-top: var(--space-3);
}
.fiche-msg.ok{ color: var(--success); }

/* =====================================================================
   CHAMP DE RECHERCHE À SUGGESTIONS (voir shared/search-select.js)
   Utilisé par Inventaire, et plus tard Nouveau document (choix de
   client / fournisseur / employé / article).
   ===================================================================== */
.cmd-article-search{ position: relative; }
.cmd-article-search input[type="text"]{ padding-right: 32px; }
.cmd-article-search .search-clear{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
.cmd-article-search input[type="text"]:not(:placeholder-shown) ~ .search-clear{ display: flex; }
.cmd-article-suggestions{
  display: none;                            /* affichée par JS (rendreSuggestions*) */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 180px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
}
.cmd-sugg-item{
  padding: 9px var(--space-5);
  font-size: var(--font-base);
  cursor: pointer;
}
/* accent-tint plutôt qu'un ton de surface uni : .cmd-sugg-item est réutilisé
   dans deux fonds différents (menu de suggestions flottant en --surface-2,
   liste de templates dans un popup en --surface) — un survol en --surface
   devenait invisible dans le popup puisqu'il matchait exactement son propre
   fond. Une teinte translucide reste visible sur les deux. */
.cmd-sugg-item:hover{ background: var(--accent-tint); }
.cmd-sugg-item.vide{ color: var(--text-muted); }   /* suggestion « désélectionner » en tête de liste */
.cmd-sugg-empty{
  padding: 9px var(--space-5);
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* =====================================================================
   PETITS BLOCS DE FORMULAIRE réutilisés (Services, Liste de matériel,
   Inventaire).
   ===================================================================== */
/* Valeur en lecture seule mise en avant (prix de vente calculé) */
.valeur-affichee{
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  color: var(--accent);
}
/* Encadré gris d'info en lecture seule (description/unité/coût d'un article,
   historique de coûts) */
.info-encadre{
  font-size: var(--font-sm);
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}
.info-encadre > div{ padding: 3px 0; }
/* Compteur de caractères sous un textarea (« 0/60 ») */
.compteur-caracteres{
  font-size: var(--font-sm);
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
}
/* Un champ avec compteur a déjà cette petite ligne de texte comme séparation
   visuelle avant le champ suivant — lui garder les 10px standards en plus
   fait paraître son espacement plus gros que les champs sans compteur (même
   valeur en dur, mais un "poids" visuel différent). Réduit à 6px ici pour
   que le rythme reste le même à l'œil. Repéré par Will le 17 sept. 2026. */
.field:has(.compteur-caracteres){ margin-bottom: var(--space-2); }
/* Petite note explicative sous un champ / dans un popup */
.champ-note{
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin: var(--space-1) 0 var(--space-4);  /* aligné sur .field-hint — les deux occupent le même emplacement selon le contexte (voir admin-demandes-aide.html, centre-aide.html) */
}
.champ-note a{ color: var(--accent); }

/* =====================================================================
   AJUSTEMENT DE STOCK (± quantité) dans la liste Inventaire
   ===================================================================== */
.stock-adjust{
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
.stock-adjust input{
  width: 46px;
  padding: 5px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  text-align: center;
  color: var(--text);
  background: var(--surface-2);
}
.stock-adjust-btn{
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--font-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.stock-adjust-btn:active{ background: var(--surface); }

/* Bande de gauche rouge sur une ligne de liste en stock bas */
.client-row.stock-bas{
  border-left: 3px solid var(--danger);
  padding-left: 11px;
}

/* =====================================================================
   LIGNE DE TÂCHE / DE SUIVI (Tâches) — case à cocher + corps + actions
   ===================================================================== */
.list-card > .tache-row{
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transition: background .15s ease;
}
.tache-check{
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  position: relative;
}
.tache-check::before{ content: ""; position: absolute; inset: -9px; }
.tache-check.done{ background: var(--accent); border-color: var(--accent); }
.tache-check svg{ width: 14px; height: 14px; color: var(--bg); display: none; }
.tache-check.done svg{ display: block; }
.tache-body{ flex: 1; min-width: 0; cursor: pointer; }
.tache-titre{ font-size: var(--font-base); font-weight: 500; }
.tache-titre.done{ text-decoration: line-through; color: var(--text-muted); }
.tache-meta{
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 2px;  /* aligné sur .client-row .meta — même rôle */
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.tache-meta.retard{ color: var(--danger); font-weight: 600; }
.prio-dot{ width: 7px; height: 7px; border-radius: var(--radius-circle); display: inline-block; flex-shrink: 0; }
.prio-haute{ background: var(--danger); }
.prio-normale{ background: var(--safety); }
.prio-basse{ background: var(--info); }
.prio-soumission{ background: var(--safety); }
.prio-facture{ background: var(--danger); }
.prio-commande{ background: var(--purple); }

/* =====================================================================
   NOUVEAU DOCUMENT — chips de type, verrou « sans client », lignes
   ===================================================================== */
.type-chips .filtre-chip{ display: inline-flex; align-items: center; gap: var(--space-2); }
.type-chips .filtre-chip svg{ width: 14px; height: 14px; flex-shrink: 0; }

/* Verrou tant qu'aucun client/fournisseur n'est choisi (voir shared/row-lock.js) */
[data-verrouille-sans-client="1"]{
  pointer-events: none;
  cursor: not-allowed;
  opacity: .55;
}
/* Lecture seule d'un document (Historique → Nouveau document verrouillé) :
   `data-lecture-seule="1"` est posé sur le wrapper du formulaire →
   `pointer-events: none` neutralise tout le sous-arbre (champs ET les
   `<div onclick>` des lignes de produit). Apparence normale, on consulte.
   Le « × » des barres de recherche est caché (rien à effacer). */
[data-lecture-seule="1"]{ pointer-events: none; }
/* !important : bat la règle d'état `input:not(:placeholder-shown) ~ .search-clear`
   qui rallume le « × » quand le champ est rempli (ce qui est le cas en
   consultation, le nom du client y est). */
[data-lecture-seule="1"] .search-clear{ display: none !important; }
/* Le petit « × » rouge de retrait des lignes d'items — inutile en
   consultation. `visibility` plutôt que `display` : la colonne 28px du
   grid reste réservée, les en-têtes de lignes restent alignés. */
[data-lecture-seule="1"] .rm{ visibility: hidden; }
/* Rangée de saisie « recherche d'article + Qté + Prix + ▼ » (ajout de
   lignes) — inutile en consultation. */
[data-lecture-seule="1"] .entree-ligne{ display: none; }
/* Boutons d'action des lignes (Sous-titre / Commentaire / Frais + charger
   / enregistrer un template) — inutiles en consultation. Le libellé de
   section « Matériel et services » reste. Sélecteur en 3 classes pour
   battre `.section-label .actions-lignes{ display:flex }` (même spécificité,
   défini plus loin dans le fichier). */
[data-lecture-seule="1"] .section-label .actions-lignes{ display: none; }
/* Photos de la job : on veut pouvoir cliquer une photo pour l'agrandir même
   en consultation (le pointer-events:none de la règle du dessus l'en
   empêchait) — mais pas la supprimer, donc le « × » reste caché comme les
   autres actions de modification ci-dessus. */
[data-lecture-seule="1"] .photos-job-item img{ pointer-events: auto; }
[data-lecture-seule="1"] .photos-job-supprimer{ display: none; }
.verrouille-sans-client-msg{
  display: none;
  background: var(--safety-tint);
  border: 1px solid var(--safety);
  color: var(--safety);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-base);
  font-weight: 600;
  margin-bottom: var(--space-6);
  text-align: center;
}

/* Aperçu du numéro de document (« BT-2026-12 ») dans le titre de carte */
.doc-numero-apercu{ font-size: var(--font-base); color: var(--text-muted); font-weight: 400; }

/* Barre de consultation : document ouvert en lecture seule depuis l'Historique —
   en-tête (retour + titre + statut) au-dessus, action principale + menu •••
   en dessous (avant : 5-6 boutons empilés avant même de savoir quel document
   on regardait — voir demande de Will du 30 sept. 2026). */
.nd-lecture-bar{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.nd-lecture-entete{ display: flex; align-items: center; gap: var(--space-4); }
.nd-lecture-retour{
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: transparent; border: none; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nd-lecture-retour:hover{ background: var(--border); color: var(--accent); }
.nd-lecture-entete-textes{ display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nd-lecture-ligne-titre{ display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.nd-lecture-badge{
  align-self: flex-start;
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: var(--radius-pill);
  padding: 3px var(--space-4);
}
.nd-lecture-titre{ font-size: var(--font-base); font-weight: 600; }
.nd-lecture-actions{ display: flex; align-items: center; gap: var(--space-3); }
.nd-lecture-actions .btn-primary{ flex: 1; }
.nd-lecture-plus{ flex-shrink: 0; }
/* "Lecture seule" est redondant sur mobile (l'écran est déjà verrouillé
   visuellement) et prend une ligne complète en plus — gardé seulement
   sur ordinateur. Voir demande de Will du 30 sept. 2026. */
@media (max-width: 720px){
  .nd-lecture-badge{ display: none; }
}
/* Sur ordinateur, assez de place pour remontrer TOUTES les actions en
   rangée directement (comportement d'avant la refonte mobile) plutôt que
   de les cacher derrière •••, qui ne sert que sur petit écran — voir
   demande de Will du 30 sept. 2026. */
@media (min-width: 721px){
  .nd-lecture-plus{ display: none; }
  .nd-lecture-bar{ flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .nd-lecture-actions{ flex-wrap: wrap; justify-content: flex-end; }
  .nd-lecture-actions .row-menu{
    display: flex !important;
    position: static !important;
    /* En rangée, ce menu est un élément flex : son z-index reste actif
       même sans positionnement et doit laisser l'en-tête fixe au-dessus. */
    z-index: auto;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex-wrap: wrap;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    gap: var(--space-3);
  }
  .nd-lecture-actions .row-menu-item{
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    padding: var(--space-3) var(--space-7);
    font-size: var(--font-base);
    font-weight: 600;
    white-space: nowrap;
  }
  .nd-lecture-actions .row-menu-item:hover{ background: var(--border); }
  .nd-lecture-actions .btn-primary{ flex: 0 0 auto; }
}

/* Ligne de matériel d'un bon de travail : nom (recherche) + qté + retirer */
.item-row-bt{
  display: grid;
  grid-template-columns: 1fr 60px 28px 24px;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.item-row-bt input{
  width: 100%;
  padding: var(--space-4) var(--space-5);   /* aligné sur .field input / .entree-ligne input — même grosseur partout dans Nouveau document */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  color: var(--text);
  background: var(--surface-2);
}
.item-row-bt .rm{
  color: var(--danger);
  background: none;
  border: none;
  font-size: var(--font-lg);
  cursor: pointer;
  text-align: center;
}
.item-row-bt.cliquable{ cursor: pointer; }
.item-row-bt .cellule-num{ text-align: center; color: var(--text-muted); }
/* Variante sans colonne Prix — même barre d'ajout / entête que soumission-
   facture-commande, mais 3 colonnes au lieu de 4 (bon de travail : pas de
   prix sur le matériel). L'entête reprend en plus la colonne ☰ (24px) des
   lignes de données ci-dessous (item-row-bt) — .entree-ligne.sans-prix ne
   la garde pas, sa propre ligne n'a pas de poignée à glisser. */
.entree-ligne.sans-prix{ grid-template-columns: 1fr 60px 28px; }
.item-row-entete.sans-prix{ grid-template-columns: 1fr 60px 28px 24px; }

/* ---------- Lignes d'article/service (soumission, facture, commande) ---------- */
.entree-ligne{
  display: grid;
  grid-template-columns: 2fr 60px 95px 28px;
  gap: var(--space-2);
  align-items: stretch;
  margin-bottom: var(--space-4);
  position: relative;
}
.item-row{
  display: grid;
  grid-template-columns: 2fr 60px 95px 28px 24px;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.item-row-titre{
  display: grid;
  grid-template-columns: 1fr 28px 24px;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-4) 0 var(--space-2);
  border-top: 1px dashed var(--border);
  border-bottom: 1px solid var(--border);
}
.item-row-commentaire{
  display: grid;
  grid-template-columns: 1fr 28px 24px;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3) 0 var(--space-2);
  border-bottom: 1px solid var(--border);
}
.entree-ligne input,
.item-row input,
.item-row-titre input,
.item-row-commentaire input{
  width: 100%;
  padding: var(--space-4) var(--space-5);   /* aligné sur .field input — la ligne d'ajout doit paraître aussi grosse que le champ Client */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  color: var(--text);
  background: var(--surface-2);
}
.item-row .rm,
.item-row-titre .rm,
.item-row-commentaire .rm{
  color: var(--danger);
  background: none;
  border: none;
  font-size: var(--font-lg);
  cursor: pointer;
  text-align: center;
}
.item-row-entete{
  padding: var(--space-3) 0 var(--space-1);
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
  display: grid;
  /* Reprend la colonne ☰ (24px) des lignes de données (item-row)
     ci-dessus, sinon QTÉ/PRIX ne s'alignent plus avec les vraies valeurs
     en dessous. .entree-ligne n'a pas cette colonne, voir @media plus bas. */
  grid-template-columns: 2fr 60px 95px 28px 24px;
  gap: var(--space-2);
}
.item-row-entete span:nth-child(2),
.item-row-entete span:nth-child(3){ text-align: center; }
@media (min-width: 768px){
  .item-row{ grid-template-columns: 2fr 60px 120px 28px 24px; }
  .entree-ligne{ grid-template-columns: 2fr 60px 120px 28px; }
  .item-row-entete{ grid-template-columns: 2fr 60px 120px 28px 24px; }
}

/* Poignée ☰ de réordonnancement par glisser-déposer — dernière colonne de
   chaque ligne (item-row / item-row-titre / item-row-commentaire /
   item-row-bt). .entree-ligne / .item-row-entete n'ont pas cette colonne
   du tout (pas de ligne à glisser sur la barre d'ajout ni l'entête) — le
   bouton ▼ garde ainsi sa largeur d'origine, collé à droite sans espace. */
.item-drag{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 34px;
  font-size: var(--font-base);
  color: var(--text-muted);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.item-drag:active{ cursor: grabbing; color: var(--accent); }
.item-row.is-dragging,
.item-row-titre.is-dragging,
.item-row-commentaire.is-dragging,
.item-row-bt.is-dragging{
  opacity: .45;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

/* ---------- Interrupteur (toggle) ---------- */
.toggle-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--font-base);
}
/* Suivi d'un champ (pas d'un autre toggle-row) : plus d'air en dessous,
   sans quoi le champ colle directement sous l'interrupteur. */
#par-carte-conditions .toggle-row{ margin-bottom: var(--space-4); }
.toggle-switch{ position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.toggle-slider{
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: var(--radius-pill);
  transition: .2s;
}
.toggle-slider::before{
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: var(--radius-circle);
  transition: .2s;
}
.toggle-switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch input:checked + .toggle-slider{ background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before{ transform: translateX(18px); }

/* Marqueur « · personnalisé » dans la matrice d'accès aux écrans (fiche employé) */
.acces-perso{ color: var(--purple); font-size: var(--font-xs); }

/* Choix « Livraison / Ramassage » (mode de réception d'une commande) */
.mode-reception-choix{
  padding: 7px var(--space-4);
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--font-sm);
}
.mode-reception-choix svg{ width: 14px; height: 14px; flex-shrink: 0; }
.mode-reception-choix.active{
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Petits boutons-actions au-dessus des lignes (sous-titre / commentaire / frais) */
.chip-action-texte{ display: none; }
@media (min-width: 768px){ .chip-action-texte{ display: inline; } }
.lignes-separateur{
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
  display: inline-block;
}

/* Récap « document créé ✓ » affiché après un enregistrement */
/* En-tête de section avec des boutons-actions à droite (Matériel et services…) */
.section-label.avec-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  text-transform: none;
}
.section-label .actions-lignes{
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.section-label .actions-lignes .icon-btn-sm{ width: 26px; height: 26px; }

/* Groupe de 2 choix côte à côte (mode de réception d'une commande) */
.mode-reception-groupe{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

/* Bouton « ▼ » qui descend l'entrée courante dans la liste de lignes */
.btn-descendre-ligne{
  padding: 0;
  font-size: var(--font-lg);
  font-weight: 700;
}

/* Liste déroulante des templates dans un popup « Charger un template » */
.template-suggestions-liste{
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;   /* .popup-liste-ligne--cliquable déborde exprès de qq px (marge négative) pour son survol arrondi bord à bord — sans ça, ce léger débordement horizontal fait apparaître une barre de défilement inutile ici */
  margin-top: var(--space-3);
}

/* STANDARD BOUTONS (façon SaaS moderne) : un bouton est dimensionné à son
   libellé, aligné à gauche dans sa rangée. Il ne s'étire PAS pour remplir
   la largeur — sauf :
   - sur mobile (< 600px) : toute la rangée passe en colonne, boutons
     pleine largeur (zone de tap au pouce), sauf .btn-row.serree ;
   - opt-in explicite : .btn-row.empilee (empilé pleine largeur),
     .btn.btn-bloc (bloc seul pleine largeur).
   Un seul libellé ne se casse jamais sur 2 lignes (white-space: nowrap
   sur .btn) : la rangée passe à la ligne si ça ne rentre pas. */
.popup-box .btn-row .btn{ flex: 0 0 auto; }
/* Exception assumée : dialogues confirmer / invite. La paire « Annuler » +
   bouton d'action prend toute la largeur en 2 moitiés égales — convention d'un
   modal de décision (macOS/Windows/web), et ça équilibre le bouton plein vs
   « Annuler ». Limité à ces 2 pop-ups ; le reste de l'app garde les boutons
   dimensionnés à leur libellé. */
#confirmationOverlay .btn-row .btn,
#promptOverlay .btn-row .btn{ flex: 1 1 0; }

@media (max-width: 600px){
  .btn-row:not(.serree){ flex-direction: column; }
  .btn-row:not(.serree) .btn{ flex: 1 1 auto; width: 100%; }
}
.espace-haut{ margin-top: var(--space-6); }
.espace-bas{ margin-bottom: var(--space-6); }

/* Marge portée par une liste générée en JS (lignes de document, fil de
   discussion, entrées de feuille de temps...) — remplace le pattern "coller
   .espace-haut sur ce qui suit", qui donnait un total incohérent selon
   l'écran (la liste n'avait jamais sa propre marge). Standardisé 2026-09-17. */
.liste-generee{ margin-bottom: var(--space-6); }

/* Emplacement d'un widget Turnstile (Cloudflare) au-dessus d'un bouton */
/* En mode « interaction-only » le widget est invisible la plupart du temps →
   marge réduite pour ne pas laisser un trou. Il garde un peu d'air quand un
   vrai challenge apparaît (trafic suspect). */
.turnstile-slot{ margin-bottom: var(--space-2); }

/* Séparation renforcée entre deux sections empilées (28px = 2 jetons) */
.section-label.detache{ margin-top: calc(var(--space-7) + var(--space-5)); }

/* Bouton unique pleine largeur d'une modale d'erreur */
.erreur-modal-box .btn{ width: 100%; margin-top: var(--space-7); }

/* Bouton pleine largeur posé seul sous un bloc (ex: « Voir tous les suivis ») */
.btn.btn-bloc{ display: block; width: 100%; margin-top: var(--space-3); }

/* Rangée de boutons empilés verticalement, chacun pleine largeur */
.btn-row.empilee{ flex-direction: column; }
.btn-row.empilee .btn{ width: 100%; }

/* Ligne d'article cliquable (ouvre l'édition de la ligne) + cellules chiffrées */
.item-row.cliquable{ cursor: pointer; }
.item-row .cellule-num{ text-align: center; color: var(--text-muted); }

/* Ligne de suggestion « nom du template + bouton supprimer » */
.cmd-sugg-item.avec-suppr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* =====================================================================
   HISTORIQUE — fiche document en lecture seule (popup)
   ===================================================================== */
.fiche-doc-soustitre{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.fiche-doc-sep{ opacity: .45; }
.fiche-doc-ligne-titre{
  padding: var(--space-4) 0 var(--space-1);
  margin-top: var(--space-2);
  border-top: 1px dashed var(--border);
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text-muted);
}
.fiche-doc-ligne-commentaire{
  padding: var(--space-1) 0;
  font-size: var(--font-sm);
  font-style: italic;
  color: var(--text-muted);
}
.fiche-doc-ligne-montant{
  font-weight: 600;
  font-size: var(--font-base);
  white-space: nowrap;
}

/* Ligne de la popup « Réception d'une commande » */
.reception-ligne{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.reception-ligne .info{ flex: 1; min-width: 0; }
.reception-ligne input[type="number"]{
  width: 64px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--font-sm);
}

/* =====================================================================
   PROJETS — cartes de liste + éditeur de sections
   ===================================================================== */
.tag-purple{ background: var(--purple-tint); color: var(--purple); }

/* Petite note explicative sous un label / dans un popup */
.field-hint{
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin: var(--space-1) 0 var(--space-4);
}
.field-hint strong{ color: var(--text); }

/* Boîte « finance » : lignes libellé / valeur (totaux de sections) */
.finance-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.finance-row .label{ font-size: var(--font-sm); color: var(--text-muted); }
.finance-row .val{ font-weight: 700; }
.finance-row.total{ border-top: 1px solid var(--border); margin-top: var(--space-2); padding-top: var(--space-3); }
/* Quand la ligne « total » est la 1re du bloc, le trait du haut ne sépare rien → on l'enlève. */
.finance-box > .finance-row.total:first-child{ border-top: none; margin-top: 0; padding-top: 0; }
.finance-row.total .label{ color: var(--text); font-weight: 600; }

/* Carte d'un projet dans la liste */
.prj-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  cursor: pointer;
  transition: background .15s ease;
}
.prj-card:hover{ background: var(--surface-2); }
.prj-card-tete{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.prj-card-client{ font-size: var(--font-sm); color: var(--text-muted); margin-top: 2px; }
.prj-card-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.prj-card-stats.une{ grid-template-columns: 1fr; }
.prj-stat-lbl{ font-size: var(--font-xs); color: var(--text-muted); }
.prj-stat-val{ font-size: var(--font-sm); font-weight: 700; margin-top: 2px; }

/* Ligne de section dans le popup Nouveau projet */
.prj-section-ligne{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.prj-section-ligne > input{
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--font-base);
  margin-bottom: var(--space-2);
}
.prj-section-chiffres{
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}
.prj-section-chiffres .field{ flex: 1; margin-bottom: 0; }
.prj-section-chiffres .icon-btn-sm{ flex-shrink: 0; margin-bottom: 2px; }
.prj-section-marge{ font-size: var(--font-sm); color: var(--text-muted); margin-top: var(--space-2); }

/* ---------- Fiche projet ---------- */
.card-title.icone{ display: flex; align-items: center; gap: var(--space-5); }
.finance-row .val-texte{ font-weight: 500; }

.prj-sec{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.prj-sec-tete{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.prj-sec-nom{ font-weight: 600; }
.prj-sec-montant{ font-weight: 700; white-space: nowrap; }
.prj-sec-meta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 2px;  /* aligné sur .client-row .meta — même rôle */
}

.prj-doc-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s ease;
}
.prj-doc-row:last-child{ border-bottom: none; }
.prj-doc-row:hover{ background: var(--surface-2); }
.prj-doc-num{ font-weight: 600; }
.prj-doc-meta{ font-size: var(--font-sm); color: var(--text-muted); text-align: right; }

/* Popup « Facturer l'avancement » */
.fa-section-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.fa-section-header > span:first-child{ font-weight: 600; }
.fa-section-deja{ font-size: var(--font-sm); color: var(--text-muted); }
.fa-montant-ligne{
  padding: var(--space-3);
  font-weight: 700;
  color: var(--accent);
}

/* Bloc « Équipe assignée » : entrées d'heures loguées */
.prj-heures-total{ font-weight: 400; font-size: var(--font-sm); color: var(--text-muted); }
.prj-heure-row{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.prj-heure-row:last-child{ border-bottom: none; }
.prj-heure-row.cliquable{ cursor: pointer; }
.prj-heure-info{ flex: 1; min-width: 0; }
.prj-heure-titre{ font-weight: 600; font-size: var(--font-sm); }
.prj-heure-detail{ font-size: var(--font-sm); color: var(--text-muted); margin-top: 2px; }

/* Ligne « employé » dans le popup d'heures */
.prj-jh-ligne{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.prj-jh-ligne .cmd-article-search{ flex: 1; }
/* Cette recherche est hors d'un `.field` (contrairement aux autres
   `.cmd-article-search` de l'app) → l'input n'héritait d'aucun style de base et
   rendait en gris/défaut du navigateur. On lui remet le style `.field input`. */
.prj-jh-ligne .cmd-article-search input[type="text"]{
  width: 100%;
  padding: var(--space-4) var(--space-5);
  padding-right: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  color: var(--text);
  background: var(--surface-2);
}
.prj-jh-ligne .cmd-article-search input[type="text"]:focus{ outline: none; border-color: var(--accent); }
.prj-jh-h{ font-size: var(--font-sm); color: var(--text-muted); white-space: nowrap; }

/* =====================================================================
   CARTE KPI (générique) — utilisée par Chiffre d'affaire ET Admin.
   .kpis (grille) + .kpi (+ .kpi--accent/-info/-safety/-purple/-danger)
   + .kpi-lbl / .kpi-val / .kpi-sub. .kpi-delta* reste propre au Chiffre
   d'affaire. Ajoute .deux sur .kpis pour rester à 2 colonnes en desktop.
   ===================================================================== */
.kpis{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (min-width: 768px){
  .kpis{ grid-template-columns: repeat(3, 1fr); }
  .kpis.deux{ grid-template-columns: 1fr 1fr; }
}
.kpi{
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--kpi-bar, var(--accent));
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.kpi--accent{ --kpi-bar: var(--accent); }
.kpi--info{ --kpi-bar: var(--info); }
.kpi--safety{ --kpi-bar: var(--safety); }
.kpi--purple{ --kpi-bar: var(--purple); }
.kpi--danger{ --kpi-bar: var(--danger); }
.kpi-lbl{ font-size: var(--font-sm); color: var(--text-muted); }
.kpi-val{
  font-size: var(--font-xl);
  font-weight: 700;
  margin-top: var(--space-1);
  color: var(--kpi-bar, var(--accent));
}
.kpi-delta{
  font-size: var(--font-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: var(--space-2);
}
.kpi-delta .pos{ color: var(--accent); }
.kpi-delta .neg{ color: var(--danger); }
.kpi-delta-ref{ color: var(--text-muted); font-weight: 500; }
.kpi-sub{ font-size: var(--font-sm); color: var(--text-muted); margin-top: var(--space-2); }

.ca-legende{ display: flex; gap: var(--space-7); margin-bottom: var(--space-3); }
.ca-legende-item{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-sm);
  color: var(--text-muted);
}
.ca-legende-pastille{ width: 9px; height: 9px; border-radius: var(--radius-xs); flex-shrink: 0; }
.ca-legende-pastille--actuelle{ background: var(--accent); }
.ca-legende-pastille--precedente{ background: var(--border); }
.ca-chart-hint{ font-size: var(--font-sm); color: var(--text-muted); margin-bottom: var(--space-3); }
.ca-chart-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ca-chart-scroll svg{ display: block; }
#caf-chart-svg rect{ cursor: pointer; }

.ca-mois-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (min-width: 768px){ .ca-mois-grid{ grid-template-columns: repeat(3, 1fr); } }
.ca-month{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  cursor: pointer;
}
.ca-month.futur{ cursor: default; opacity: .55; }
.ca-month-nom{
  font-weight: 700;
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.ca-month-val{ font-size: var(--font-lg); font-weight: 700; line-height: 1.15; word-break: break-word; }
.ca-month-badge{ margin-top: var(--space-2); }
.ca-month-detail{
  display: none;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.ca-mois-grid.all-open .ca-month-detail{ display: block; }
.ca-month-compare{ font-size: var(--font-sm); color: var(--text-muted); }
.ca-month-metrics{ display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.ca-metric-lbl{ font-size: var(--font-sm); color: var(--text-muted); }
.ca-metric-val{ font-size: var(--font-md); font-weight: 700; }
.ca-metric-val.accent{ color: var(--accent); }

/* =====================================================================
   FEUILLE DE TEMPS — navigation semaine + grille lun-ven
   ===================================================================== */
.ft-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.ft-nav-btn{
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.ft-nav-btn svg{ width: 16px; height: 16px; }
.ft-nav-btn:hover{ border-color: var(--accent); color: var(--accent); }
.ft-nav-label{
  position: relative;
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: var(--font-sm);
  cursor: pointer;
}
.ft-nav-label input[type="date"]{
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.ft-employe-badge{
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: var(--space-4);
}

.ft-grille{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.ft-jour{
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  min-height: 82px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-2);
}
.ft-jour:hover{ border-color: var(--accent); }
.ft-jour-check{ position: absolute; top: 5px; right: 5px; width: 13px; height: 13px; color: var(--safety); }
.ft-jour-abbr{ font-size: var(--font-sm); font-weight: 700; color: var(--text-muted); }
.ft-jour-num{ font-size: var(--font-sm); color: var(--text-muted); }
.ft-jour-h{ font-size: var(--font-xl); font-weight: 700; line-height: 1; color: var(--text-muted); margin-top: var(--space-2); }
.ft-jour.a-heures .ft-jour-h{ color: var(--accent); }

.ft-total-card{ text-align: center; }
.ft-total-lbl{ font-size: var(--font-sm); color: var(--text-muted); }
.ft-total-val{ font-size: var(--font-2xl); font-weight: 700; color: var(--accent); }
.ft-total-statut{ font-size: var(--font-sm); font-weight: 600; margin-top: var(--space-2); color: var(--text-muted); }
.ft-total-statut.ok{ color: var(--safety); }

.ft-entree{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
/* Trait SÉPARATEUR entre deux entrées, jamais après la dernière — posé en
   border-top sur l'entrée suivante plutôt qu'en border-bottom sur la
   dernière avec :last-of-type : ce sélecteur ne regarde que le TYPE de
   balise (ici <div>), pas la classe — dans le popup « semaine d'un employé »
   (rendreEmployeSemaine), le formulaire d'ajout qui suit est LUI AUSSI un
   <div> frère, donc :last-of-type ne matchait jamais la vraie dernière
   entrée : son trait restait affiché juste au-dessus de celui du
   formulaire (border-top plus bas), d'où le double trait. */
.ft-entree + .ft-entree{ border-top: 1px solid var(--border); }
.ft-entree-info{ flex: 1; min-width: 0; }
.ft-entree-h{ font-weight: 600; }
.ft-entree-notes{ font-size: var(--font-sm); color: var(--text-muted); margin-top: 2px; }
.ft-verrou{ color: var(--safety); }

/* Popup « semaine d'un employé » (vue owner) : navigation semaine + un bloc
   par jour, dépliable pour éditer les heures. Ancré en haut (pas de
   margin:auto) pour que le contenu qui change de hauteur d'une semaine à
   l'autre ne fasse pas remonter la boîte — sinon les flèches sautent. */
#ftEmployeOverlay .popup-box{ margin-top: 0; margin-bottom: 0; }
.ft-emp-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
}
#ft-emp-semaine{ font-size: var(--font-sm); color: var(--text-muted); text-align: center; }
.ft-emp-jour{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
}
.ft-emp-jour--cliquable{ cursor: pointer; transition: background .15s ease; }
.ft-emp-jour--cliquable:hover{ background: var(--surface-2); }
.ft-emp-jour-tete{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.ft-emp-jour-h{ display: inline-flex; align-items: center; gap: var(--space-2); }
.ft-emp-jour-chevron{ display: inline-block; color: var(--text-muted); transition: transform .15s ease; }
.ft-emp-jour-h.ouvert .ft-emp-jour-chevron{ transform: rotate(180deg); }
.ft-emp-vide{ font-size: var(--font-sm); color: var(--text-muted); }
.ft-emp-form{ margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.ft-emp-total{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Bouton « Tout approuver » (feuille de temps) : style .btn-primary comme les
   « + Ajouter ». Quand la semaine est entièrement approuvée il devient
   « Retirer l'approbation » en rouge contour (identique aux boutons « Retirer »
   des lignes : .danger-outline). Clic → pop-up de confirmation qui retire tout.
   Surcharge .btn-primary (spécificité 0,3,0 > 0,2,0, hover compris). */
.btn.btn-titre-ajouter.etat-retrait{
  background: var(--surface-2);
  border-color: var(--danger);
  color: var(--danger);
}
.btn.btn-titre-ajouter.etat-retrait:not(:disabled):hover{
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text);
}

/* =====================================================================
   PARAMÈTRES — logo + couleur
   ===================================================================== */
.par-logo-rangee{
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin: var(--space-3) 0;                 /* respire plus qu'un champ texte classique : ici le label et l'indice encadrent un bouton, pas un input */
}
.par-logo-apercu{
  width: 64px;
  height: 64px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;                          /* le logo est destiné à du papier blanc */
  display: flex;
  align-items: center;
  justify-content: center;
}
.par-logo-apercu img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.par-logo-actions{ display: flex; gap: var(--space-3); flex-wrap: wrap; }
.par-couleur-rangee{ display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* =====================================================================
   FICHE EMPLOYÉ — NAS masqué + couleur
   ===================================================================== */
.ep-nas-wrap{ position: relative; }
.ep-nas-wrap input{ width: 100%; padding-right: 42px; }
.ep-nas-eye{
  position: absolute;
  right: var(--space-2);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 var(--space-3);
}
.ep-couleur-input{ height: 40px; padding: var(--space-1); }

/* Initiales lisibles sur la pastille de couleur de l'employé : la couleur
   d'agenda est posée en fond par le JS, donc le texte doit être foncé.
   Repère fixe (mêmes deux thèmes), comme --ag-sur-couleur de l'agenda.
   Sélecteur combiné (pas juste .sur-couleur) pour battre en spécificité
   le `color` de base de chaque avatar (.fiche-entete-avatar, .adm-co-avatar)
   peu importe l'ordre des règles dans ce fichier. */
#tab-employes-fiche, #tab-employes{ --ep-sur-couleur: #0a0d13; }
.fiche-entete-avatar.sur-couleur,
.adm-co-avatar.sur-couleur{ color: var(--ep-sur-couleur); }

/* =====================================================================
   AGENDA / HORAIRE ÉQUIPE
   Vue Semaine = grille employés (lignes) × 5 jours (colonnes), façon
   Agendrix. Vue Jour = timeline horaire. Vue Mois = calendrier.
   Dimensions propres à l'agenda regroupées en variables scopées ci-dessous
   (aucun jeton global ne couvre ces largeurs/hauteurs de layout).
   --ag-sur-couleur : texte foncé posé sur une pastille de couleur
   d'employé (utilisé par la vue Mois). Volontairement fixe (2 thèmes).
   ===================================================================== */
#tab-agenda{
  --ag-sur-couleur: #0a0d13;
  --ag-col-nom: 150px;         /* largeur colonne « employé » (Semaine + timeline) */
  --ag-col-nom-etroit: 116px;  /* idem sous 720px */
  --ag-case-min: 84px;         /* hauteur mini d'une case Semaine */
  --ag-piste-min: 48px;        /* hauteur mini d'une piste (vue Jour) */
  --ag-tlh-bloc-h: 34px;       /* hauteur d'une barre de quart (vue Jour) — doit matcher AG_TL_LANE dans agenda.html */
  --ag-tlh-min: 640px;         /* largeur mini de la timeline avant défilement horizontal */
  --ag-mois-jour-min: 94px;    /* hauteur mini d'une case du calendrier (vue Mois) */
  --ag-pastille-jour: 22px;    /* pastille ronde du jour courant (vue Mois) */
  --ag-dot: 10px;              /* pastille de couleur d'employé */
  --ag-teinte: 14%;            /* force du fond teinté d'une barre / bloc de quart */
  --ag-teinte-bt: 55%;         /* force du liseré pointillé d'un bon de travail */
}

/* Résumé de la semaine (au-dessus de la grille) */
.ag2-resume{ font-size: var(--font-base); color: var(--text-muted); margin-bottom: var(--space-4); }
.ag2-resume b{ color: var(--text); font-weight: 700; }

/* Vue Semaine — grille */
.ag2-grille{
  display: grid;
  grid-template-columns: var(--ag-col-nom) repeat(5, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.ag2-grille > div{
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3);
}
.ag2-grille > div:nth-child(6n){ border-right: none; }
.ag2-grille > div:nth-last-child(-n+6){ border-bottom: none; }
.ag2-coin,
.ag2-jour-tete{ background: var(--surface-2); }
.ag2-jour-nom{ font-size: var(--font-base); font-weight: 700; }
/* Nom de jour : complet sur desktop, abrégé 3 lettres sur mobile (Semaine + Mois). */
.ag2-jour-court{ display: none; }
@media (max-width: 720px){
  .ag2-jour-long{ display: none; }
  .ag2-jour-court{ display: inline; }
}
.ag2-jour-tot{ font-size: var(--font-sm); color: var(--text-muted); margin-top: 2px; }
.ag2-jour-tete.aujd .ag2-jour-nom{ color: var(--accent); }
.ag2-emp{
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}
.ag2-emp-nom{ display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-base); font-weight: 600; }
.ag2-dot{ width: var(--ag-dot); height: var(--ag-dot); border-radius: var(--radius-circle); flex-shrink: 0; }
.ag2-emp-h{ font-size: var(--font-sm); color: var(--text-muted); }
.ag2-case{ display: flex; flex-direction: column; gap: var(--space-2); min-height: var(--ag-case-min); }

/* Vue Jour — timeline HORIZONTALE (heures 05→20 en colonnes, employés en
   lignes ; quarts = barres positionnées gauche/largeur selon l'heure,
   empilées si chevauchement). */
.ag2-tlh{ border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; background: var(--surface); }
.ag2-tlh-entete{ display: flex; background: var(--surface-2); border-bottom: 1px solid var(--border); min-width: var(--ag-tlh-min); }
.ag2-tlh-nom-col{ flex: 0 0 var(--ag-col-nom); }
.ag2-tlh-heures{ flex: 1; display: grid; grid-template-columns: repeat(15, 1fr); }
.ag2-tlh-heure{
  font-size: var(--font-xs);
  color: var(--text-muted);
  border-left: 1px solid var(--border);
  padding: var(--space-2) 0 var(--space-2) 3px;
}
.ag2-tlh-ligne{ display: flex; border-bottom: 1px solid var(--border); min-width: var(--ag-tlh-min); }
.ag2-tlh-ligne:last-child{ border-bottom: none; }
.ag2-tlh-nom{
  flex: 0 0 var(--ag-col-nom);
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ag2-tlh-nom .ag2-emp-nom{ font-size: var(--font-base); font-weight: 600; }
.ag2-tlh-nom-h{ font-size: var(--font-sm); color: var(--text-muted); }
.ag2-tlh-warn{ font-size: var(--font-xs); color: var(--safety); font-weight: 600; }
.ag2-tlh-add{
  -webkit-appearance: none;
  appearance: none;
  align-self: flex-start;
  margin-top: 2px;
  border: 1px dashed var(--border);
  background: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  font-size: var(--font-md);
  line-height: 1.5;
  cursor: pointer;
}
.ag2-tlh-add:hover{ color: var(--accent); border-color: var(--accent); }
.ag2-tlh-piste{
  flex: 1;
  position: relative;
  min-height: var(--ag-piste-min);
  background: repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px calc(100% / 15));
}
.ag2-tlh-bloc{
  position: absolute;
  height: var(--ag-tlh-bloc-h);
  border-left: 3px solid var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) var(--ag-teinte), var(--surface));
  border-radius: var(--radius-xs);
  padding: 2px var(--space-2);
  overflow: hidden;
  cursor: pointer;
  line-height: 1.25;
}
.ag2-tlh-bloc .ag2-quart-h{ display: block; }
.ag2-tlh-bloc.bt{
  outline: 1px dashed color-mix(in srgb, var(--c, var(--accent)) var(--ag-teinte-bt), transparent);
  outline-offset: -3px;
  cursor: default;
}
.ag2-tlh-now{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px solid var(--danger);
  z-index: 3;
}
.ag2-tlh-now::before{
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--danger);
}
@media (max-width: 720px){
  .ag2-tlh-nom-col,
  .ag2-tlh-nom{ flex-basis: var(--ag-col-nom-etroit); }
}

/* Bloc quart (les deux vues) */
.ag2-quart{
  border-left: 3px solid var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) var(--ag-teinte), var(--surface));
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-3);
  line-height: 1.35;
  cursor: pointer;
}
.ag2-quart.bt{
  outline: 1px dashed color-mix(in srgb, var(--c, var(--accent)) var(--ag-teinte-bt), transparent);
  outline-offset: -3px;
  cursor: default;
}
.ag2-quart-h{ font-size: var(--font-sm); font-weight: 700; display: block; }
.ag2-quart-sous{ font-size: var(--font-xs); color: var(--text-muted); word-break: break-word; }

.ag2-ajouter{
  -webkit-appearance: none;
  appearance: none;
  margin-top: auto;
  align-self: flex-start;
  border: 1px dashed var(--border);
  background: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-3);
  font-size: var(--font-md);
  line-height: 1.4;
  cursor: pointer;
}
.ag2-ajouter:hover{ color: var(--accent); border-color: var(--accent); }

@media (max-width: 720px){
  .ag2-grille{ overflow-x: auto; grid-template-columns: var(--ag-col-nom-etroit) repeat(5, minmax(var(--ag-col-nom-etroit), 1fr)); }
}

.ag-emp-chips{ display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.ag-emp-chip{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  font-size: var(--font-sm);
}
.ag-emp-chip button{
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-md);
  line-height: 1;
}

/* Vue Mois — calendrier (aperçu des quarts par jour) */
.ag2-mois-entetes{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--text-muted);
  padding-bottom: var(--space-2);
}
.ag2-mois-entetes span{ padding-left: var(--space-2); }
.ag2-mois{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.ag2-mois-jour{
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  min-height: var(--ag-mois-jour-min);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ag2-mois-jour:nth-child(7n){ border-right: none; }
.ag2-mois-jour:nth-last-child(-n+7){ border-bottom: none; }
.ag2-mois-jour.fds{ background: var(--surface-2); }
.ag2-mois-jour.hors{ color: var(--text-muted); }
.ag2-mois-jour.hors .ag2-mois-num{ opacity: .5; }
.ag2-mois-jour:hover{ background: var(--accent-tint); }
.ag2-mois-num{ font-size: var(--font-sm); font-weight: 700; }
.ag2-mois-num.aujd{
  background: var(--accent);
  color: var(--ag-sur-couleur);
  border-radius: var(--radius-circle);
  width: var(--ag-pastille-jour);
  height: var(--ag-pastille-jour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ag2-mois-items{ display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
/* Mini-bande d'événement — même principe que .ag2-quart (vue Semaine) mais
   plus fine : liseré de couleur de l'employé + fond très légèrement teinté. */
.ag2-mois-item{
  border-left: 2px solid var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) var(--ag-teinte), var(--surface));
  border-radius: var(--radius-xs);
  padding: 1px var(--space-2);
  font-size: var(--font-xs);
  line-height: 1.4;
  overflow: hidden;
}
.ag2-mois-item-txt{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag2-mois-plus{ font-size: var(--font-xs); color: var(--text-muted); padding-left: var(--space-2); }

/* =====================================================================
   ACCÈS RAPIDES (Dashboard) — grille de 3 raccourcis
   ===================================================================== */
.quick-actions{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}
.qa{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-2);
  text-align: center;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.qa:hover{ border-color: var(--accent); color: var(--accent); }
.qa svg{
  width: 20px;
  height: 20px;
  margin: 0 auto var(--space-2);
  display: block;
  color: var(--accent);
}

/* Bannière d'annonce globale sur l'accueil */
.db-annonce{
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  line-height: 1.5;
  background: var(--info-tint);
  border: 1px solid var(--info);
  color: var(--text);
  white-space: pre-wrap;
}
/* Couleur selon le type choisi dans Paramètres admin > Bandeau
   d'avertissement (annonce_globale.type) — "info" reste la couleur par
   défaut ci-dessus, ces deux classes ne s'appliquent que pour les 2 autres. */
.db-annonce.avertissement{ background: var(--safety-tint); border-color: var(--safety); }
.db-annonce.urgent{ background: var(--danger-tint); border-color: var(--danger); }
.db-greeting-titre{
  font-size: var(--font-lg);
  font-weight: 700;
  font-family: 'Space Grotesk';
}
.db-greeting-date{
  font-size: var(--font-base);
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: capitalize;
}

/* Incitation à passer Premium sur l'accueil (plan "base" seulement) — seul
   le lien "Change de plan..." est cliquable, pas tout le bandeau. */
.db-upgrade-banner{
  background: var(--purple-tint);
  border: 1px solid var(--purple);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.db-upgrade-titre{ font-size: var(--font-md); font-weight: 600; color: var(--purple); margin-bottom: var(--space-1); }
.db-upgrade-texte{ font-size: var(--font-base); color: var(--text-muted); margin: 0; }
.db-upgrade-lien{ color: var(--purple); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Alerte paiement échoué — propriétaire/super-admin seulement, voir
   dbAfficherBandeauPaiementEchec dans modules/dashboard.html. Même
   structure que .db-upgrade-banner ci-dessus mais en rouge (--danger),
   plus urgent qu'une simple incitation. */
.db-payment-banner{
  background: var(--danger-tint);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.db-payment-titre{ font-size: var(--font-md); font-weight: 600; color: var(--danger); margin-bottom: var(--space-1); }
.db-payment-texte{ font-size: var(--font-base); color: var(--text-muted); margin: 0; }
.db-payment-lien{ color: var(--danger); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Écran de souscription obligatoire (compte au plan "pending") — remplace
   tout le Dashboard tant que la personne n'a pas choisi un plan et payé. */
#db-attente-screen{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* pleine hauteur sous le header (76px), moins le padding-bottom de 36px
     hérité de .section (#tab-dashboard) ET les 24px de padding du <body>
     (12px haut + 12px bas, styles/base.css) — sans les soustraire ici, la
     page dépasse toujours le viewport, peu importe la taille du contenu. */
  min-height: calc(100vh - 76px - 36px - 24px);
  text-align: center;
  padding: 40px 10px var(--space-5);
  width: 100%;
  box-sizing: border-box;
}
.db-attente-icone{
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--safety-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
}
.db-attente-icone svg{ width: 26px; height: 26px; }
.db-attente-titre{
  font-size: var(--font-lg);
  font-weight: 700;
  font-family: 'Space Grotesk';
  color: var(--text);
}
.db-attente-texte{
  font-size: var(--font-sm);
  color: var(--text-muted);
  max-width: 340px;
  margin: var(--space-2) auto 0;
  line-height: 1.4;
}
.db-attente-carte{
  max-width: 380px;
  margin: var(--space-5) auto 0;
  text-align: left;
}
/* Bouton retour de l'étape paiement — ancré tout en haut à gauche de
   #db-attente-screen (déjà en position relative, voir plus haut), pas de
   #db-payment-step : #db-payment-step reste SANS position pour que le
   bouton remonte au-dessus des 40px de padding-top de #db-attente-screen
   et colle vraiment au haut de l'écran, pas juste au haut de son étape. */
.db-payment-back-wrap{
  position: absolute;
  top: 0;
  left: 0;
}

/* Comparatif de plans façon page de prix (étape 1 de l'écran de
   souscription obligatoire, modules/dashboard.html) — reproduit à
   l'identique la section Tarifs de optinovasolutions.com (texte, mise en
   page, couleurs), à la demande de Will, pour que le premier contact
   payant d'un client ressemble exactement à ce qu'il a déjà vu sur le
   site avant de s'inscrire. D'où les teintes --pr-* ci-dessous : ce sont
   les couleurs exactes du site, légèrement différentes des tokens
   --surface/--border/--text-muted du reste de l'app — propres à cet
   écran seulement, le reste de l'app n'est pas touché. */
.pricing-cartes{
  --pr-surface: #12161F;
  --pr-border: #212836;
  --pr-text-muted: #8A8F98;
  --pr-navy: #1D2C3F;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 760px;
  margin: var(--space-5) auto 0;
  text-align: left;
}
@media (min-width: 700px){
  .pricing-cartes{ grid-template-columns: 1fr 1fr; }
}
.pricing-carte{
  position: relative;
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.pricing-carte-populaire{
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(112,206,205,.08), var(--pr-surface) 55%);
}
.pricing-carte-badge{
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--accent);
  color: var(--pr-navy);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.pricing-carte-nom{ font-family: 'Space Grotesk'; font-weight: 600; font-size: 19px; margin-bottom: 4px; }
.pricing-carte-tagline{ font-size: 13px; color: var(--pr-text-muted); margin-bottom: 14px; }
.pricing-carte-prix{ display: flex; align-items: baseline; gap: 6px; margin-bottom: 16px; font-family: 'Space Grotesk'; font-size: 30px; font-weight: 700; color: var(--text); }
.pricing-carte-prix span{ font-size: 13px; font-weight: 500; color: var(--pr-text-muted); }
.pricing-carte-liste{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  flex: 1;
}
.pricing-carte-liste li{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13.5px;
  margin-bottom: 8px;
  color: var(--text);
}
.pricing-carte-liste li svg{ width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.pricing-carte-liste li.dim{ color: var(--pr-text-muted); }
.pricing-carte-liste li.dim svg{ color: var(--pr-text-muted); }
.pricing-carte .btn{ width: 100%; margin-top: auto; }

/* =====================================================================
   ADMIN — tableau de bord super-admin + liste des compagnies
   Les cartes KPI réutilisent .kpi / .kpi--* / .kpi-lbl / .kpi-val /
   .kpi-sub (bloc générique plus haut, partagé avec Chiffre d'affaire).
   ===================================================================== */
.adm-head-actions{ display: flex; gap: var(--space-3); }

/* Ligne compagnie */
.adm-liste{ margin-top: var(--space-4); }
.adm-co-row{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  transition: background .15s ease;
}
.adm-co-row:hover{ background: var(--surface-2); }
.adm-co-avatar{
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk';
  font-weight: 700;
  font-size: var(--font-base);
  color: var(--accent);
  flex-shrink: 0;
}
.adm-co-info{ flex: 1; min-width: 0; }
.adm-co-nom{ font-size: var(--font-md); font-weight: 600; }
.adm-co-meta{
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.adm-co-dot{ width: 5px; height: 5px; border-radius: var(--radius-circle); flex-shrink: 0; }
.adm-co-exp{ font-weight: 600; }
.adm-co-exp.danger{ color: var(--danger); }
.adm-co-exp.warn{ color: var(--safety); }
.adm-co-right{ text-align: right; flex-shrink: 0; }
.adm-co-mrr{ font-size: var(--font-sm); color: var(--text-muted); margin-top: 4px; }

/* Champ couleur (création / gestion de compagnie) */
.adm-couleur-input{ height: 40px; padding: var(--space-1); }

/* Ligne d'interrupteur avec titre + sous-texte explicatif */
.toggle-row-titre{ font-weight: 600; font-size: var(--font-md); }
.toggle-row-sous{ font-size: var(--font-sm); color: var(--text-muted); margin-top: 1px; max-width: 42ch; }

/* =====================================================================
   DEMANDES D'AIDE (super-admin) — liste + fil de conversation
   ===================================================================== */
.aide-carte{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
/* Bord gauche coloré selon l'état (demandes d'aide) ou la gravité (Sentry) */
.aide-carte.nouvelle{ border-left: 3px solid var(--accent); }
.aide-carte.en-traitement{ border-left: 3px solid var(--safety); }
.aide-carte.traitee{ border-left: 3px solid var(--success); }
.aide-carte.info{ border-left: 3px solid var(--info); }
.aide-carte.grave{ border-left: 3px solid var(--danger); }
.aide-carte.cliquable{ cursor: pointer; transition: background .15s ease; }
.aide-carte.cliquable:hover{ background: var(--surface-2); }
/* Aperçu du message tronqué à 2 lignes (liste côté client) */
.caide-apercu{
  color: var(--text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.aide-carte-badge{
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  font-size: var(--font-sm);
}
.aide-carte-tete{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.aide-carte-num{ font-size: var(--font-sm); color: var(--accent); font-weight: 600; letter-spacing: .3px; }
.aide-carte-titre{ font-weight: 600; font-size: var(--font-md); }
.aide-carte-meta{ font-size: var(--font-sm); color: var(--text-muted); margin-top: 2px; word-break: break-word; }
.aide-carte-tags{ display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex-shrink: 0; }
.aide-carte-message{
  font-size: var(--font-base);
  margin-top: var(--space-4);
  white-space: pre-wrap;
  color: var(--text);
}

.aide-fil{
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--surface);
}
.aide-msg{
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.aide-msg.eux{ background: var(--surface-2); margin-right: 24px; }
.aide-msg.moi{ background: var(--accent-tint); margin-left: 24px; }
.aide-msg-tete{ font-size: var(--font-sm); color: var(--text-muted); margin-bottom: 4px; }
.aide-msg-corps{ font-size: var(--font-base); white-space: pre-wrap; }

/* =====================================================================
   ERREURS TECHNIQUES (Sentry, super-admin)
   Les cartes réutilisent .aide-carte / .aide-carte-tete / -titre / -meta
   (bloc DEMANDES D'AIDE plus haut) + modificateur .info ou .grave.
   ===================================================================== */
.sy-soustitre{ margin-top: calc(var(--space-4) * -1); margin-bottom: var(--space-6); }
/* Lien stylé comme un bouton (ex: « Voir dans Sentry ») */
.btn.btn-lien{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: 1;
}