/* ============================================================
   Fibrix — Suivi des interventions fibre
   Design system : clair professionnel · accent cyan #0891B2
   Typographie : Inter · icônes SVG · micro-animations 150-300ms
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* L'attribut hidden doit TOUJOURS gagner, même contre display:flex */
[hidden] { display: none !important; }

:root {
  /* Marque */
  --primaire: #0E7490;         /* cyan-700 : boutons (contraste AAA texte blanc) */
  --primaire-vif: #0891B2;     /* cyan-600 : accents, liens, survols */
  --primaire-clair: #ECFEFF;   /* cyan-50 : fonds teintés */
  --primaire-bord: #A5F3FC;    /* cyan-200 */
  --accent: #22D3EE;           /* cyan-400 : lueurs, indicateur live */

  /* Neutres */
  --fond: #F8FAFC;
  --surface: #FFFFFF;
  --texte: #0F172A;
  --texte-2: #475569;
  --texte-3: #64748B;
  --bord: #E2E8F0;
  --bord-fort: #CBD5E1;

  /* Sémantique */
  --succes: #16A34A;
  --succes-fond: #DCFCE7;
  --succes-texte: #15803D;
  --danger: #DC2626;
  --danger-fond: #FEE2E2;
  --danger-texte: #B91C1C;
  --alerte-fond: #FEF9C3;
  --alerte-survol: #FEF08A;

  /* Effets */
  --ombre-1: 0 1px 2px rgba(15, 23, 42, .05);
  --ombre-2: 0 4px 12px rgba(15, 23, 42, .08);
  --ombre-3: 0 16px 40px rgba(15, 23, 42, .16);
  --rayon: 10px;
  --rayon-grand: 14px;
  --transition: .18s cubic-bezier(.4, 0, .2, 1);
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fond);
  color: var(--texte);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
}

svg.icone { width: 18px; height: 18px; flex: none; }
svg.icone-petite { width: 15px; height: 15px; flex: none; }

:focus-visible {
  outline: 2px solid var(--primaire-vif);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- En-tête ---------- */
.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--bord);
  color: var(--texte);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--ombre-1);
}
.entete-titre { display: flex; align-items: center; gap: 12px; }
.logo-marque {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #06B6D4 0%, #0E7490 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 10px rgba(8, 145, 178, .35);
  flex: none;
}
.logo-marque svg { width: 24px; height: 24px; }
.entete h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.entete p { font-size: 12.5px; color: var(--texte-3); }

.badge-role {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px;
  font-weight: 600;
  background: var(--primaire-clair);
  color: var(--primaire);
  border: 1px solid var(--primaire-bord);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0;
}
.entete-droite { display: flex; align-items: center; gap: 10px; }

.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--succes-texte);
  background: var(--succes-fond);
  padding: 6px 12px;
  border-radius: 999px;
}
.live .point {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--succes);
  animation: pulsation 1.8s infinite;
}
.live.deconnecte { color: var(--danger-texte); background: var(--danger-fond); }
.live.deconnecte .point { background: var(--danger); animation: none; }
@keyframes pulsation {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
  60% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

main { max-width: 1400px; margin: 0 auto; padding: 22px 24px 70px; }

.logo-marque img, .logo-connexion img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.logo-connexion img { padding: 8px; }

/* ---------- Onglets (rubriques) ---------- */
.onglets {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 5px;
  width: fit-content;
  box-shadow: var(--ombre-1);
}
.onglet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  min-height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texte-3);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.onglet:hover { color: var(--texte); background: var(--fond); }
.onglet.actif { background: var(--primaire); color: #fff; }

/* ---------- Navigation en dossiers (technicien > mois > interventions) ---------- */
.fil-ariane {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13.5px;
}
.fil-ariane button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--bord);
  color: var(--primaire);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 13px;
  min-height: 38px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.fil-ariane button:hover { background: var(--primaire-clair); border-color: var(--primaire-bord); }
.fil-ariane .separateur { color: var(--texte-3); }
.fil-ariane .actuel {
  font-weight: 700;
  color: var(--texte);
  padding: 7px 4px;
}

.grille-dossiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 13px;
  margin-bottom: 18px;
}
.carte-dossier {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-grand);
  padding: 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: var(--ombre-1);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  animation: montee .3s cubic-bezier(.4, 0, .2, 1) backwards;
}
.carte-dossier:hover {
  box-shadow: var(--ombre-2);
  transform: translateY(-2px);
  border-color: var(--primaire-bord);
}
.carte-dossier .icone-dossier {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 11px;
  background: var(--primaire-clair);
  color: var(--primaire);
  display: flex; align-items: center; justify-content: center;
}
.carte-dossier .icone-dossier svg { width: 22px; height: 22px; }
.carte-dossier > span:last-child { min-width: 0; }
.carte-dossier .nom {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--texte);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.carte-dossier .detail {
  display: block;
  font-size: 12px;
  color: var(--texte-3);
  margin-top: 3px;
}
.carte-dossier .puce-nok {
  display: inline-block;
  margin-left: 6px;
  background: var(--danger-fond);
  color: var(--danger-texte);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}

/* ---------- Icônes 3D ---------- */
.icone-3d { width: 26px; height: 26px; vertical-align: middle; flex: none; }
.icone-3d-grande { width: 34px; height: 34px; flex: none; }
.ligne-echeance .icone-3d { width: 24px; height: 24px; margin-right: 7px; }
.ligne-echeance { justify-content: flex-start; gap: 4px; }
.ligne-echeance .jours { margin-left: auto; }
.carte-vehicule .photo .sans-photo img { width: 88px; height: 88px; }
.onglet .icone-3d { width: 22px; height: 22px; }

/* ---------- Pastilles opérateur et matériel ---------- */
.pastille.op-Free { background: #FEE2E2; color: #B91C1C; }
.pastille.op-Bouygues { background: #DBEAFE; color: #1D4ED8; }
.pastille.op-Orange { background: #FFEDD5; color: #C2410C; }
.pastille.op-SFR { background: #FCE7F3; color: #BE185D; }
.pastille.mat-ONU { background: #E0E7FF; color: #4338CA; }
.pastille.mat-KIT { background: #CCFBF1; color: #0F766E; }

/* ---------- Parc de véhicules ---------- */
.grille-vehicules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.carte-vehicule {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-grand);
  overflow: hidden;
  box-shadow: var(--ombre-1);
  transition: box-shadow var(--transition), transform var(--transition);
  animation: montee .3s cubic-bezier(.4, 0, .2, 1) backwards;
}
.carte-vehicule:hover { box-shadow: var(--ombre-2); transform: translateY(-2px); }
.carte-vehicule .photo {
  height: 150px;
  background: var(--fond);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--bord);
  position: relative;
}
.carte-vehicule .photo img { width: 100%; height: 100%; object-fit: cover; }
.carte-vehicule .photo .sans-photo { color: var(--bord-fort); }
.carte-vehicule .photo .sans-photo svg { width: 46px; height: 46px; }
.carte-vehicule .corps { padding: 14px 16px 16px; }
.carte-vehicule .modele {
  font-size: 16px; font-weight: 800; letter-spacing: -.01em;
}
.carte-vehicule .immat {
  display: inline-block;
  margin-top: 5px;
  font-family: "Consolas", monospace;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--fond);
  border: 1px solid var(--bord-fort);
  border-radius: 6px;
  padding: 2px 9px;
}
.carte-vehicule .tech {
  font-size: 12.5px; color: var(--texte-3); margin-top: 7px;
  display: flex; align-items: center; gap: 6px;
}
.carte-vehicule .echeances { margin-top: 11px; display: flex; flex-direction: column; gap: 5px; }
.ligne-echeance {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px;
  padding: 4px 9px;
  border-radius: 7px;
}
.ligne-echeance .jours { font-weight: 700; }
.ech-ok { background: var(--succes-fond); color: var(--succes-texte); }
.ech-bientot { background: var(--alerte-fond); color: #A16207; }
.ech-depasse { background: var(--danger-fond); color: var(--danger-texte); }

.badge-etat {
  position: absolute; top: 10px; right: 10px;
  font-size: 11px; font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--ombre-1);
}
.badge-etat.ok { background: var(--succes); color: #fff; }
.badge-etat.bientot { background: #F59E0B; color: #fff; }
.badge-etat.depasse { background: var(--danger); color: #fff; }
.badge-etat.inconnu { background: var(--bord-fort); color: var(--texte-2); }

.actions-vehicule {
  display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap;
}
.actions-vehicule .btn { flex: 1; min-height: 38px; font-size: 12.5px; padding: 7px 10px; }

.apercu-photo { margin-top: 12px; }
.apercu-photo img {
  max-width: 100%; max-height: 180px;
  border-radius: 10px; border: 1px solid var(--bord);
}

.libelle-champ {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-2);
}
.montant { font-variant-numeric: tabular-nums; font-weight: 700; }
.pastille.paye { background: var(--succes-fond); color: var(--succes-texte); }
.pastille.attente { background: var(--alerte-fond); color: #A16207; }
.pastille.avance { background: #FEF3C7; color: #B45309; }
.pastille.remboursement { background: var(--succes-fond); color: var(--succes-texte); }
.stat.solde-positif { border-left: 4px solid #F59E0B; }
.stat.solde-nul { border-left: 4px solid var(--succes); }

/* ---------- Statistiques ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 14px 16px;
  box-shadow: var(--ombre-1);
  animation: montee .3s cubic-bezier(.4, 0, .2, 1) backwards;
  transition: box-shadow var(--transition), transform var(--transition);
}
.stat:hover { box-shadow: var(--ombre-2); transform: translateY(-1px); }
.stat:nth-child(2) { animation-delay: .04s; }
.stat:nth-child(3) { animation-delay: .08s; }
.stat:nth-child(4) { animation-delay: .12s; }
.stat:nth-child(5) { animation-delay: .16s; }
.stat:nth-child(6) { animation-delay: .20s; }
.stat:nth-child(7) { animation-delay: .24s; }
@keyframes montee {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.stat .valeur {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat .libelle {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texte-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}
.stat .libelle::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primaire-vif);
}
.stat.ok .libelle::before { background: var(--succes); }
.stat.ok .valeur { color: var(--succes-texte); }
.stat.nok .libelle::before { background: var(--danger); }
.stat.nok .valeur { color: var(--danger-texte); }
.stat.sav .libelle::before { background: #F59E0B; }

/* ---------- Barre d'actions ---------- */
.barre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtres input, .filtres select {
  padding: 9px 12px;
  border: 1px solid var(--bord-fort);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: var(--surface);
  color: var(--texte);
  min-height: 40px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.filtres input:hover, .filtres select:hover { border-color: var(--primaire-vif); }
.filtres input:focus, .filtres select:focus {
  outline: none;
  border-color: var(--primaire-vif);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .15);
}

.champ-recherche { position: relative; }
.champ-recherche svg {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--texte-3);
  pointer-events: none;
}
.champ-recherche input { padding-left: 34px; min-width: 240px; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  min-height: 40px;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--ombre-2); }
.btn:active { transform: scale(.97); box-shadow: none; }

.btn-principal { background: var(--primaire); color: #fff; }
.btn-principal:hover { background: var(--primaire-vif); }
.btn-vert { background: var(--succes); color: #fff; }
.btn-vert:hover { background: #15803D; }
.btn-bleu { background: #1D4ED8; color: #fff; }
.btn-bleu:hover { background: #2563EB; }
.btn-orange { background: #C2410C; color: #fff; }
.btn-orange:hover { background: #EA580C; }
.btn-discret {
  background: var(--surface);
  color: var(--texte-2);
  border: 1px solid var(--bord-fort);
}
.btn-discret:hover { background: var(--fond); color: var(--texte); }
.btn-sortie {
  background: var(--surface);
  color: var(--texte-2);
  border: 1px solid var(--bord-fort);
  padding: 8px 12px;
}
.btn-sortie:hover { color: var(--danger-texte); border-color: var(--danger); background: var(--danger-fond); }

.btn-editer, .btn-danger {
  background: transparent;
  padding: 7px;
  min-height: 34px;
  min-width: 34px;
  border-radius: 7px;
  box-shadow: none;
}
.btn-editer { color: var(--primaire-vif); }
.btn-editer:hover { background: var(--primaire-clair); transform: none; box-shadow: none; }
.btn-danger { color: var(--texte-3); }
.btn-danger:hover { background: var(--danger-fond); color: var(--danger-texte); transform: none; box-shadow: none; }

/* ---------- Tableau ---------- */
.carte-tableau {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-grand);
  overflow: hidden;
  box-shadow: var(--ombre-1);
}
.tableau-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  background: var(--fond);
  color: var(--texte-3);
  padding: 11px 14px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  border-bottom: 1px solid var(--bord);
  position: sticky;
  top: 0;
}
tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #F1F5F9;
  white-space: nowrap;
  transition: background var(--transition);
}
tbody td.remarque { white-space: normal; max-width: 300px; color: var(--texte-2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--primaire-clair); }
tbody tr.ligne-nok td { background: var(--alerte-fond); }
tbody tr.ligne-nok:hover td { background: var(--alerte-survol); }

.pastille {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.pastille.PLP { background: #DBEAFE; color: #1D4ED8; }
.pastille.RACC { background: #EDE9FE; color: #6D28D9; }
.pastille.SAV { background: var(--succes-fond); color: var(--succes-texte); }
.pastille.BRASSAGE { background: #FEF3C7; color: #B45309; }
.pastille.OK { background: var(--succes-fond); color: var(--succes-texte); }
.pastille.NOK { background: var(--danger-fond); color: var(--danger-texte); }
.pastille.typo { background: #F1F5F9; color: var(--texte-2); font-weight: 600; }

.etat-vide { text-align: center; padding: 56px 20px; color: var(--texte-3); }
.etat-vide svg { width: 52px; height: 52px; color: var(--bord-fort); margin-bottom: 12px; }
.etat-vide p:first-of-type { font-size: 16px; font-weight: 600; color: var(--texte-2); margin-bottom: 6px; }
.pied-tableau {
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--texte-3);
  border-top: 1px solid var(--bord);
  background: var(--fond);
}

/* ---------- Modale ---------- */
.voile {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 16px;
  animation: fondu .2s ease;
}
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
.modale {
  background: var(--surface);
  border-radius: var(--rayon-grand);
  padding: 26px;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--ombre-3);
  animation: apparitionModale .22s cubic-bezier(.4, 0, .2, 1);
}
@keyframes apparitionModale {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modale h2 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 9px;
}
.modale h2 svg { color: var(--primaire-vif); }

.grille-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.grille-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texte-2);
}
.grille-form input, .grille-form select, .grille-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--bord-fort);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--texte);
  background: var(--surface);
  min-height: 42px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.grille-form input:focus, .grille-form select:focus, .grille-form textarea:focus {
  outline: none;
  border-color: var(--primaire-vif);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .15);
}
.pleine-largeur { grid-column: 1 / -1; }
.boutons-modale { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed;
  bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 200;
}
.toast {
  background: var(--texte);
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--ombre-3);
  animation: apparitionToast .25s cubic-bezier(.4, 0, .2, 1);
  max-width: 380px;
  border-left: 4px solid var(--accent);
}
.toast.succes { border-left-color: var(--succes); }
.toast.erreur { background: var(--danger); border-left-color: #FCA5A5; }
@keyframes apparitionToast {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Page de connexion ---------- */
.page-connexion {
  background:
    radial-gradient(700px 380px at 85% -10%, rgba(34, 211, 238, .18), transparent 60%),
    radial-gradient(600px 340px at 0% 100%, rgba(8, 145, 178, .12), transparent 55%),
    var(--fond);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.conteneur-connexion { text-align: center; width: 100%; max-width: 800px; }
.logo-connexion {
  width: 68px; height: 68px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #06B6D4 0%, #0E7490 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 10px 26px rgba(8, 145, 178, .4);
  animation: montee .4s cubic-bezier(.4, 0, .2, 1) backwards;
}
.logo-connexion svg { width: 38px; height: 38px; }
.conteneur-connexion h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--texte);
  animation: montee .4s .05s cubic-bezier(.4, 0, .2, 1) backwards;
}
.conteneur-connexion .sous-titre {
  color: var(--texte-3);
  margin-bottom: 30px;
  animation: montee .4s .1s cubic-bezier(.4, 0, .2, 1) backwards;
}
.cartes-espaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}
.carte-espace {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: var(--ombre-2);
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  animation: montee .4s cubic-bezier(.4, 0, .2, 1) backwards;
}
.carte-espace:nth-child(1) { animation-delay: .15s; }
.carte-espace:nth-child(2) { animation-delay: .22s; }
.carte-espace:hover {
  box-shadow: var(--ombre-3);
  transform: translateY(-3px);
  border-color: var(--primaire-bord);
}
.carte-espace .icone-espace {
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.carte-espace .icone-espace svg { width: 26px; height: 26px; }
.icone-espace.technicien { background: var(--primaire-clair); color: var(--primaire); }
.icone-espace.employeur { background: #EDE9FE; color: #6D28D9; }
.carte-espace h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.carte-espace p { font-size: 13px; color: var(--texte-3); margin-bottom: 16px; min-height: 38px; }
.carte-espace form { display: flex; flex-direction: column; gap: 10px; }
.carte-espace input {
  padding: 12px;
  border: 1.5px solid var(--bord-fort);
  border-radius: 10px;
  font-size: 17px;
  font-family: inherit;
  text-align: center;
  letter-spacing: 3px;
  font-weight: 600;
  min-height: 48px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.carte-espace input::placeholder { letter-spacing: 0; font-weight: 400; font-size: 14px; }
.carte-espace input:focus {
  outline: none;
  border-color: var(--primaire-vif);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .15);
}
.carte-espace .btn { width: 100%; min-height: 46px; font-size: 14.5px; }
.lien-apk {
  margin-top: 22px;
  font-size: 13px;
  color: var(--texte-3);
}
.lien-apk a {
  color: var(--primaire);
  font-weight: 700;
  text-decoration: none;
}
.lien-apk a:hover { text-decoration: underline; }

.message-erreur {
  margin-top: 18px;
  background: var(--danger-fond);
  color: var(--danger-texte);
  font-weight: 600;
  font-size: 13.5px;
  padding: 11px 18px;
  border-radius: 10px;
  display: inline-block;
  animation: apparitionToast .25s ease;
}

/* ---------- Bandeau technicien (modale) ---------- */
.bandeau-technicien {
  background: var(--primaire-clair);
  border: 1px solid var(--primaire-bord);
  color: var(--primaire);
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bandeau-technicien .verrou {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--texte-3);
  background: var(--surface);
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: auto;
}

/* ---------- Gestion des techniciens ---------- */
.aide { font-size: 13px; color: var(--texte-3); margin-bottom: 16px; }
.ligne-ajout { display: flex; gap: 8px; margin-bottom: 16px; }
.ligne-ajout input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--bord-fort);
  border-radius: 8px;
  font-size: 14.5px;
  font-family: inherit;
  min-height: 42px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ligne-ajout input:focus {
  outline: none;
  border-color: var(--primaire-vif);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .15);
}
.table-techniciens th { font-size: 11px; padding: 9px 12px; }
.table-techniciens td { padding: 9px 12px; }
.code-technicien {
  font-family: "Consolas", "Cascadia Mono", monospace;
  font-size: 15px;
  font-weight: 700;
  background: var(--primaire-clair);
  color: var(--primaire);
  border: 1px dashed var(--primaire-bord);
  padding: 3px 11px;
  border-radius: 7px;
  letter-spacing: 2px;
}

/* ---------- Adaptatif ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .grille-form { grid-template-columns: 1fr; }
  main { padding: 14px 12px 70px; }
  .entete { padding: 10px 14px; }
  .entete h1 { font-size: 17px; }
  .entete p { display: none; }
  .btn { min-height: 44px; }
  .filtres input, .filtres select { min-height: 44px; width: 100%; }
  .champ-recherche { width: 100%; }
  .champ-recherche input { min-width: 0; }
  .filtres { width: 100%; }
  .actions { width: 100%; }
  .actions .btn { flex: 1; }
  .btn-editer, .btn-danger { min-height: 44px; min-width: 44px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}