/* =====================================================================
   HOMATIK — assets/css/app.css
   ---------------------------------------------------------------------
   LE STYLE DES ESPACES CONNECTÉS (administration + espace client).

   Feuille SÉPARÉE de style.css, et c'est volontaire :
     • le site public est une vitrine : grand, animé, spectaculaire ;
     • un tableau de bord est un OUTIL : dense, lisible, rapide.

   On garde l'identité (fond nuit, cyan, violet, mêmes polices) mais on
   réduit les effets : pas d'animation au scroll, pas de halo qui suit
   la souris. Quand on travaille, on veut voir l'information, pas des
   effets visuels.

   SOMMAIRE
     1. Variables et remise à zéro
     2. Structure générale
     3. En-tête et navigation
     4. Titres et blocs
     5. Cartes de statistiques
     6. Tableaux
     7. Listes (tickets, documents)
     8. Formulaires
     9. Boutons
    10. Étiquettes, bandeaux, pastilles
    11. Discussion (tickets)
    12. Graphique et barres
    13. Page de connexion
    14. Adaptation mobile
   ===================================================================== */


/* =====================================================================
   1. VARIABLES ET REMISE À ZÉRO
   ===================================================================== */
:root {
  --nuit:          #070A12;
  --nuit-2:        #0B0F1A;
  --ardoise:       #111726;
  --ardoise-clair: #18203247;

  --cyan:   #38E1FF;
  --violet: #7C5CFF;
  --ambre:  #FFB347;
  --vert:   #3DD68C;
  --rouge:  #FF5C7A;

  --texte:        #E9EEF7;
  --texte-doux:   #A9B4C7;
  --texte-faible: #6E7B92;

  --bordure:      #1E2739;
  --bordure-vive: #2C3A55;

  --police-titre: 'Archivo', system-ui, sans-serif;
  --police-texte: 'IBM Plex Sans', system-ui, sans-serif;
  --police-mono:  'IBM Plex Mono', monospace;

  --rayon:   12px;
  --rayon-s: 8px;

  --transition: 0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; }

body.app {
  margin: 0;
  min-height: 100vh;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.app a { color: var(--cyan); text-decoration: none; }
.app a:hover { text-decoration: underline; }

/* Texte réservé aux lecteurs d'écran : invisible mais lu à voix haute. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* =====================================================================
   2. STRUCTURE GÉNÉRALE
   ===================================================================== */
.app-contenu { min-height: calc(100vh - 190px); padding: 28px 0 60px; }

.conteneur-app {
  width: min(1440px, 100% - 40px);
  margin-inline: auto;
}
.conteneur-app--etroit { width: min(880px, 100% - 40px); }

/* Deux colonnes : le contenu principal, puis une colonne latérale. */
.app-colonnes {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
  align-items: start;
}
.app-colonnes--large { grid-template-columns: 1fr 400px; }

.app-colonne-secondaire {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.app-pied {
  border-top: 1px solid var(--bordure);
  padding: 22px 0;
  text-align: center;
  color: var(--texte-faible);
  font-size: 0.86rem;
}
.app-pied p { margin: 0; }


/* =====================================================================
   3. EN-TÊTE ET NAVIGATION
   ===================================================================== */
.app-entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 10, 18, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordure);
}

.app-entete__interieur {
  width: min(1440px, 100% - 40px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  height: 62px;
}

.app-logo { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.app-logo__marque { width: 30px; height: 30px; }
.app-logo__texte { display: flex; flex-direction: column; line-height: 1.1; }
.app-logo__texte strong {
  font-family: var(--police-titre);
  font-size: 1rem;
  color: var(--texte);
  letter-spacing: -0.01em;
}
.app-logo__texte em {
  font-style: normal;
  font-family: var(--police-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

.app-nav { display: flex; gap: 4px; margin-right: auto; }

.app-nav__lien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--texte-doux) !important;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background var(--transition), color var(--transition);
}
.app-nav__lien:hover { background: var(--ardoise); color: var(--texte) !important; }
.app-nav__lien.est-actif {
  background: var(--ardoise);
  color: var(--texte) !important;
  box-shadow: inset 0 0 0 1px var(--bordure-vive);
}

/* Pastille de notification (nombre de messages non lus). */
.pastille {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--rouge);
  color: #0A0D14;
  font-family: var(--police-mono);
  font-size: 0.68rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-entete__droite {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.app-utilisateur { color: var(--texte-doux); font-size: 0.86rem; }
.app-deconnexion { color: var(--texte-faible) !important; font-size: 0.86rem; }
.app-deconnexion:hover { color: var(--rouge) !important; }

.app-burger { display: none; }


/* =====================================================================
   4. TITRES ET BLOCS
   ===================================================================== */
.app-titre-ligne {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.app-titre {
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.app-sous-titre { margin: 5px 0 0; color: var(--texte-doux); font-size: 0.92rem; }

.fil-app { margin: 0 0 14px; font-size: 0.86rem; }
.fil-app a { color: var(--texte-faible) !important; }
.fil-app a:hover { color: var(--cyan) !important; }

.app-bloc {
  background: var(--ardoise);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 20px 22px;
  margin-bottom: 22px;
}
.app-colonne-secondaire .app-bloc { margin-bottom: 0; }

.app-bloc__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.app-bloc__entete h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--police-titre);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0;
}
.app-bloc__entete a { font-size: 0.86rem; }

.app-bloc--danger { border-color: rgba(255, 92, 122, 0.3); }
.app-bloc--danger .app-bloc__entete h2 { color: var(--rouge); }

.app-bloc--info { border-color: rgba(56, 225, 255, 0.22); }

.app-bloc--contrat {
  border-color: rgba(61, 214, 140, 0.28);
  background: linear-gradient(150deg, rgba(61, 214, 140, 0.05), var(--ardoise) 55%);
}

.icone--titre { width: 18px; height: 18px; color: var(--cyan); }
.icone--mini  { width: 15px; height: 15px; flex-shrink: 0; color: var(--texte-faible); }

.vide {
  color: var(--texte-faible);
  font-size: 0.92rem;
  margin: 0;
  padding: 14px 0;
  line-height: 1.7;
}

.secondaire { color: var(--texte-faible); font-size: 0.84rem; display: block; }

.separateur { border: 0; border-top: 1px solid var(--bordure); margin: 20px 0; }

.prose-app p { color: var(--texte-doux); margin: 0 0 12px; font-size: 0.92rem; }
.prose-app p:last-child { margin-bottom: 0; }
.prose-app strong { color: var(--texte); }

.encart-app {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  margin: 16px 0;
  background: var(--nuit-2);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--cyan);
  border-radius: var(--rayon-s);
}
.encart-app svg { width: 18px; height: 18px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.encart-app p { margin: 0; font-size: 0.88rem; color: var(--texte-doux); }

.notes-internes {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(255, 179, 71, 0.07);
  border: 1px solid rgba(255, 179, 71, 0.22);
  border-radius: var(--rayon-s);
}
.notes-internes strong {
  display: block;
  font-family: var(--police-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ambre);
  margin-bottom: 6px;
}
.notes-internes p { margin: 0; font-size: 0.88rem; color: var(--texte-doux); }


/* =====================================================================
   5. CARTES DE STATISTIQUES
   ===================================================================== */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.grille-cartes--5 { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }

.carte-stat {
  background: var(--ardoise);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 17px 19px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.carte-stat--alerte { border-color: rgba(255, 179, 71, 0.35); }

.carte-stat__label {
  font-family: var(--police-mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.carte-stat__valeur {
  font-family: var(--police-titre);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.carte-stat__note { font-size: 0.79rem; color: var(--texte-faible); }

.evo-hausse { color: var(--vert); font-weight: 600; }
.evo-baisse { color: var(--rouge); font-weight: 600; }


/* =====================================================================
   6. TABLEAUX
   ===================================================================== */
.tableau-defilant { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }

.tableau-app { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.tableau-app th {
  text-align: left;
  padding: 9px 12px;
  font-family: var(--police-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-faible);
  font-weight: 500;
  border-bottom: 1px solid var(--bordure);
  white-space: nowrap;
}

.tableau-app td {
  padding: 12px;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}
.tableau-app tr:last-child td { border-bottom: 0; }
.tableau-app tbody tr:hover { background: rgba(255, 255, 255, 0.017); }

.ligne-inactive { opacity: 0.5; }
.ligne-non-lue { background: rgba(56, 225, 255, 0.035); }

.lien-fort { color: var(--texte) !important; font-weight: 600; }
.lien-fort:hover { color: var(--cyan) !important; }

.cellule-action { text-align: right; white-space: nowrap; }

.barre-recherche { display: flex; gap: 9px; margin-bottom: 18px; flex-wrap: wrap; }
.barre-recherche input[type=search] {
  flex: 1;
  min-width: 200px;
  padding: 9px 14px;
  background: var(--nuit-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  color: var(--texte);
  font-family: inherit;
  font-size: 0.9rem;
}
.barre-recherche input[type=search]:focus {
  outline: none;
  border-color: var(--cyan);
}


/* =====================================================================
   7. LISTES
   ===================================================================== */
.liste-tickets { list-style: none; margin: 0; padding: 0; }

.liste-tickets li { border-bottom: 1px solid var(--bordure); }
.liste-tickets li:last-child { border-bottom: 0; }
.liste-tickets li.est-clos { opacity: 0.6; }

.liste-tickets a {
  display: block;
  padding: 13px 10px;
  margin: 0 -10px;
  border-radius: var(--rayon-s);
  text-decoration: none !important;
  transition: background var(--transition);
}
.liste-tickets a:hover { background: rgba(255, 255, 255, 0.025); }

.liste-tickets__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.liste-tickets__sujet {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texte);
  font-weight: 600;
  font-size: 0.93rem;
}
.liste-tickets__bas {
  margin-top: 3px;
  color: var(--texte-faible);
  font-size: 0.82rem;
}
.liste-tickets__bas strong { color: var(--cyan); }

.point-nouveau {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  flex-shrink: 0;
  display: inline-block;
}

.liste-simple-app { list-style: none; margin: 0; padding: 0; }
.liste-simple-app li { border-bottom: 1px solid var(--bordure); }
.liste-simple-app li:last-child { border-bottom: 0; }
.liste-simple-app a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none !important;
  font-size: 0.89rem;
}
.liste-simple-app a strong { color: var(--texte); font-weight: 500; }
.liste-simple-app a span { color: var(--texte-faible); font-size: 0.82rem; }
.liste-simple-app a:hover strong { color: var(--cyan); }

/* --- Documents --- */
.liste-documents { list-style: none; margin: 0; padding: 0; }

.liste-documents li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--bordure);
}
.liste-documents li:last-child { border-bottom: 0; }

.liste-documents__icone {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--nuit-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
}
.liste-documents__icone svg { width: 18px; height: 18px; color: var(--cyan); }

.liste-documents__infos { flex: 1; min-width: 0; }
.liste-documents__infos .lien-fort { display: block; word-break: break-word; }

.liste-documents--large li { padding: 16px 0; }

.fiche-rapide { list-style: none; margin: 0; padding: 0; }
.fiche-rapide li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  font-size: 0.89rem;
  color: var(--texte-doux);
}
.fiche-rapide li svg { margin-top: 3px; }


/* =====================================================================
   8. FORMULAIRES
   ===================================================================== */
.formulaire { display: block; }

.champ { margin-bottom: 15px; }

.champ label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--texte-doux);
}
.obligatoire { color: var(--cyan); }
.facultatif  { color: var(--texte-faible); font-weight: 400; }

.champ input[type=text],
.champ input[type=email],
.champ input[type=tel],
.champ input[type=date],
.champ input[type=password],
.champ input[type=search],
.champ select,
.champ textarea {
  width: 100%;
  padding: 10px 13px;
  background: var(--nuit-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  color: var(--texte);
  font-family: inherit;
  font-size: 0.93rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { resize: vertical; line-height: 1.6; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(56, 225, 255, 0.11);
}

.champ input::placeholder,
.champ textarea::placeholder { color: var(--texte-faible); }

/* Le sélecteur de date en thème sombre. */
.champ input[type=date] { color-scheme: dark; }

.aide { margin: 6px 0 0; font-size: 0.8rem; color: var(--texte-faible); line-height: 1.55; }

.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.champs-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

.champ--inline { margin-bottom: 0; min-width: 160px; }

.case {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--texte-doux);
}
.case input[type=checkbox] {
  width: 17px; height: 17px;
  accent-color: var(--cyan);
  cursor: pointer;
  flex-shrink: 0;
}

.ligne-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ligne-actions .case { margin: 0; }
.ligne-actions button { margin-left: auto; }

/* --- Zone de dépôt de fichier --- */
.depot { margin-bottom: 16px; }
.depot input[type=file] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.depot__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 26px 20px;
  background: var(--nuit-2);
  border: 1.5px dashed var(--bordure-vive);
  border-radius: var(--rayon);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.depot__zone:hover { border-color: var(--cyan); background: rgba(56, 225, 255, 0.03); }
.depot input[type=file]:focus + .depot__zone { border-color: var(--cyan); }
.depot__zone svg { width: 26px; height: 26px; color: var(--cyan); }
.depot__texte { font-weight: 600; font-size: 0.93rem; color: var(--texte); }
.depot__nom {
  font-family: var(--police-mono);
  font-size: 0.82rem;
  color: var(--cyan);
  word-break: break-all;
}
.depot__aide { font-size: 0.78rem; color: var(--texte-faible); }


/* =====================================================================
   9. BOUTONS
   ===================================================================== */
.bouton-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--bordure-vive);
  border-radius: var(--rayon-s);
  background: var(--ardoise);
  color: var(--texte) !important;
  font-family: inherit;
  font-size: 0.89rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none !important;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.bouton-app:hover { border-color: var(--cyan); transform: translateY(-1px); }
.bouton-app:active { transform: translateY(0); }

.bouton-app--principal {
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  border-color: transparent;
  color: #05070E !important;
  font-weight: 600;
}
.bouton-app--principal:hover { box-shadow: 0 6px 22px -8px var(--cyan); }

.bouton-app--danger {
  background: transparent;
  border-color: rgba(255, 92, 122, 0.4);
  color: var(--rouge) !important;
}
.bouton-app--danger:hover { background: rgba(255, 92, 122, 0.1); border-color: var(--rouge); }

.bouton-app--discret { background: transparent; color: var(--texte-doux) !important; }

.bouton-app--petit { padding: 6px 12px; font-size: 0.82rem; }
.bouton-app--large { width: 100%; }

.bouton-icone {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  color: var(--texte-faible) !important;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.bouton-icone svg { width: 16px; height: 16px; }
.bouton-icone:hover { color: var(--rouge) !important; border-color: rgba(255, 92, 122, 0.45); }

.liste-documents__action { flex-shrink: 0; }

/* Onglets de filtrage */
.onglets {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--bordure);
  padding-bottom: 12px;
}
.onglets--compact { margin: 0; border: 0; padding: 0; }

.onglets__lien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--texte-doux) !important;
  font-size: 0.87rem;
  text-decoration: none !important;
  transition: background var(--transition), color var(--transition);
}
.onglets__lien:hover { background: var(--ardoise); color: var(--texte) !important; }
.onglets__lien.est-actif {
  background: var(--ardoise);
  color: var(--texte) !important;
  box-shadow: inset 0 0 0 1px var(--bordure-vive);
}
.onglets__compte {
  font-family: var(--police-mono);
  font-size: 0.72rem;
  color: var(--texte-faible);
}
.onglets__lien.est-actif .onglets__compte { color: var(--cyan); }


/* =====================================================================
   10. ÉTIQUETTES ET BANDEAUX
   ===================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--police-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge--nouveau  { background: rgba(56, 225, 255, 0.14); color: var(--cyan); }
.badge--en_cours { background: rgba(255, 179, 71, 0.14); color: var(--ambre); }
.badge--cloture  { background: rgba(110, 123, 146, 0.16); color: var(--texte-faible); }

.badge--prio-basse   { background: rgba(110, 123, 146, 0.14); color: var(--texte-faible); }
.badge--prio-normale { background: rgba(110, 123, 146, 0.14); color: var(--texte-doux); }
.badge--prio-haute   { background: rgba(255, 179, 71, 0.14); color: var(--ambre); }
.badge--prio-urgente { background: rgba(255, 92, 122, 0.16); color: var(--rouge); }

.bandeau {
  padding: 13px 17px;
  border-radius: var(--rayon-s);
  margin-bottom: 20px;
  font-size: 0.9rem;
  border: 1px solid;
}
.bandeau--succes { background: rgba(61, 214, 140, 0.09);  border-color: rgba(61, 214, 140, 0.3);  color: var(--vert); }
.bandeau--erreur { background: rgba(255, 92, 122, 0.09);  border-color: rgba(255, 92, 122, 0.32); color: var(--rouge); }
.bandeau--info   { background: rgba(56, 225, 255, 0.07);  border-color: rgba(56, 225, 255, 0.28); color: var(--texte-doux); }

.bandeau--mdp { display: flex; flex-direction: column; gap: 10px; color: var(--texte); }
.bandeau--mdp strong { font-size: 0.86rem; color: var(--texte-doux); font-weight: 500; }
.bandeau--mdp p { margin: 0; font-size: 0.85rem; color: var(--texte-doux); }

.mdp-clair {
  display: inline-block;
  padding: 11px 20px;
  background: var(--nuit);
  border: 1px solid var(--cyan);
  border-radius: var(--rayon-s);
  font-family: var(--police-mono);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
  user-select: all;
  align-self: flex-start;
}

/* --- Contrat --- */
.contrat__entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.contrat__nom {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 700;
}

.contrat__dates { display: flex; gap: 34px; margin: 0 0 14px; flex-wrap: wrap; }
.contrat__dates div { margin: 0; }
.contrat__dates dt {
  font-family: var(--police-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-bottom: 3px;
}
.contrat__dates dd { margin: 0; font-size: 0.95rem; font-weight: 500; }

.contrat__details {
  padding: 13px 15px;
  background: var(--nuit-2);
  border-radius: var(--rayon-s);
  font-size: 0.9rem;
  color: var(--texte-doux);
  line-height: 1.7;
}


/* =====================================================================
   11. DISCUSSION (fil des tickets)
   ===================================================================== */
.discussion { display: flex; flex-direction: column; gap: 14px; }

.message {
  padding: 15px 17px;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  background: var(--nuit-2);
}

/* Les messages de l'équipe sont visuellement distincts de ceux du client :
   on voit d'un coup d'œil qui parle. */
.message--admin {
  border-color: rgba(56, 225, 255, 0.24);
  background: linear-gradient(150deg, rgba(56, 225, 255, 0.055), var(--nuit-2) 60%);
  margin-left: 26px;
}
.message--client { margin-right: 26px; }

.message__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.message__auteur { font-weight: 600; font-size: 0.9rem; }
.message__role {
  margin-left: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(56, 225, 255, 0.14);
  color: var(--cyan);
  font-family: var(--police-mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.message__date { font-family: var(--police-mono); font-size: 0.73rem; color: var(--texte-faible); }
.message__corps { font-size: 0.92rem; color: var(--texte-doux); line-height: 1.7; }


/* =====================================================================
   12. GRAPHIQUE ET BARRES
   ===================================================================== */
.graphique { margin-top: 6px; }
.graphique svg { width: 100%; height: auto; display: block; }
.graphique__axe {
  font-family: var(--police-mono);
  font-size: 11px;
  fill: var(--texte-faible);
}
.graphique__legende {
  display: flex;
  gap: 22px;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--texte-faible);
  flex-wrap: wrap;
}
.pastille-couleur {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  margin-right: 5px;
}
.pastille-couleur--cyan   { background: var(--cyan); }
.pastille-couleur--violet { background: var(--violet); }

.barres { list-style: none; margin: 0; padding: 0; }
.barres li { margin-bottom: 13px; }
.barres li:last-child { margin-bottom: 0; }

.barres__ligne {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 5px;
  font-size: 0.86rem;
}
.barres__label {
  color: var(--texte-doux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barres__valeur { font-family: var(--police-mono); color: var(--texte); flex-shrink: 0; }

.barres__piste {
  height: 5px;
  background: var(--nuit-2);
  border-radius: 999px;
  overflow: hidden;
}
.barres__remplissage {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), rgba(56, 225, 255, 0.45));
  border-radius: 999px;
}
.barres__remplissage--violet {
  background: linear-gradient(90deg, var(--violet), rgba(124, 92, 255, 0.45));
}


/* =====================================================================
   13. PAGE DE CONNEXION
   ===================================================================== */
.page-connexion {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 30px 20px;
  background:
    radial-gradient(circle at 25% 15%, rgba(56, 225, 255, 0.09), transparent 45%),
    radial-gradient(circle at 78% 82%, rgba(124, 92, 255, 0.09), transparent 45%),
    var(--nuit);
}

.connexion { width: 100%; max-width: 420px; }

.connexion__carte {
  background: var(--ardoise);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 34px 32px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
}

.connexion__marque {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bordure);
}
.connexion__logo { width: 36px; height: 36px; }
.connexion__marque strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.1rem;
}
.connexion__marque em {
  font-style: normal;
  font-family: var(--police-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

.connexion__titre {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.connexion__intro {
  margin: 0 0 22px;
  font-size: 0.89rem;
  color: var(--texte-doux);
  line-height: 1.65;
}

.connexion__note {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
  font-size: 0.82rem;
  color: var(--texte-faible);
  line-height: 1.7;
}
.connexion__retour { margin: 14px 0 0; font-size: 0.82rem; }
.connexion__retour a { color: var(--texte-faible) !important; }


/* =====================================================================
   14. ADAPTATION MOBILE
   ===================================================================== */
@media (max-width: 1100px) {
  .app-colonnes,
  .app-colonnes--large { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {

  .conteneur-app,
  .conteneur-app--etroit,
  .app-entete__interieur { width: calc(100% - 28px); }

  /* Le menu se replie derrière le bouton à trois barres. */
  .app-nav {
    display: none;
    position: absolute;
    top: 62px; left: 0; right: 0;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px 16px;
    background: var(--nuit-2);
    border-bottom: 1px solid var(--bordure);
  }
  .app-nav.est-ouvert { display: flex; }
  .app-nav__lien { border-radius: var(--rayon-s); padding: 11px 14px; }

  .app-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px; height: 38px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-s);
    cursor: pointer;
  }
  .app-burger span {
    display: block;
    height: 1.5px;
    background: var(--texte);
    transition: transform var(--transition), opacity var(--transition);
  }
  .app-burger.est-actif span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .app-burger.est-actif span:nth-child(2) { opacity: 0; }
  .app-burger.est-actif span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .app-utilisateur { display: none; }
  .app-logo__texte em { display: none; }

  .champs-2, .champs-3 { grid-template-columns: 1fr; }

  .app-bloc { padding: 17px 15px; }
  .tableau-defilant { margin: 0 -15px; padding: 0 15px; }

  .message--admin  { margin-left: 0; }
  .message--client { margin-right: 0; }

  .app-titre-ligne { flex-direction: column; align-items: stretch; }
  .app-titre-ligne .bouton-app { width: 100%; }

  .ligne-actions button { margin-left: 0; width: 100%; }
  .contrat__dates { gap: 22px; }
}

/* Les personnes qui ont demandé moins d'animations sont respectées. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Impression : on retire le superflu. */
@media print {
  .app-entete, .app-pied, .bouton-app, .bouton-icone, .onglets { display: none !important; }
  body.app { background: #fff; color: #000; }
  .app-bloc { border-color: #ccc; background: #fff; }
}

/* Le nom d'utilisateur en haut à droite est un lien vers « Mon compte ». */
.app-utilisateur {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--texte-doux) !important;
  font-size: 0.86rem;
  text-decoration: none !important;
  transition: background var(--transition), color var(--transition);
}
.app-utilisateur:hover,
.app-utilisateur.est-actif {
  background: var(--ardoise);
  color: var(--texte) !important;
}
.app-utilisateur svg { color: currentColor; }