/* Charte DAIRIA — cabinet.
   Source : scoly-oss/dairia-design-system -> tokens/cabinet.css.
   Navy #1D627A dominant, orange #FF914C en accent RARE (jamais en aplat de
   fond), Inter, « premium retenu ». */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root {
  --navy: #1d627a;
  --navy-2: #16455a;
  --navy-dark: #0b222d;
  --orange: #ff914c;
  /* L'orange de marque tombe a 2,2:1 sur blanc — illisible pour du texte.
     Cette variante assombrie (4,3:1) sert UNIQUEMENT au texte sur fond clair ;
     l'orange de marque reste tel quel sur les fonds sombres, ou il porte. */
  --orange-texte: #b26635;
  --ink: #1f2d3a;
  --muted: #5b6b7a;
  --line: #e3eaee;
  --soft: #f8fbfc;
  --panel: #ffffff;
  --red: #e2574c;
  --green: #1d9e75;

  /* Fond de l'application : le degrade sombre de la charte. */
  --bg: radial-gradient(1200px 700px at 72% 10%, rgba(29, 98, 122, 0.55), transparent 60%),
    linear-gradient(135deg, #091c26 0%, #0b222d 55%, #16455a 100%);
  --sidebar: #0b222d;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --sh-md: 0 4px 20px rgba(29, 98, 122, 0.1);
  --sh-lg: 0 18px 44px rgba(29, 98, 122, 0.14);

  /* Alias conserves pour ne pas reecrire chaque regle. */
  --text: var(--ink);
  --accent: var(--navy);
  --accent-2: var(--navy-2);
  --border: var(--line);
}

* {
  box-sizing: border-box;
}

/* L'app bascule entre les ecrans avec l'attribut hidden. La regle par defaut
   du navigateur ([hidden] { display: none }) a une specificite plus faible
   qu'une classe : sans ce !important, ".auth { display: flex }" la remporte et
   l'ecran de connexion reste affiche par-dessus la messagerie. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  background: var(--bg);
  height: 100vh;
}

/* ---- Auth ---- */
.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.auth-card {
  background: var(--panel);
  padding: 40px;
  border-radius: var(--r-xl);
  width: 360px;
  box-shadow: var(--sh-lg);
}
/* Wordmark : « Dairia » navy, « Connect » orange (couleurs de MARQUE, pas
   les tokens d'interface). */
.auth-card h1 {
  margin: 0;
  color: var(--navy);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.auth-card h1 .mark-accent {
  color: var(--orange-texte);
}
.subtitle {
  margin: 4px 0 24px;
  color: var(--muted);
  font-size: 14px;
}
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.tab {
  flex: 1;
  padding: 8px;
  border: none;
  background: #f0f0f3;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.tab.active {
  background: var(--accent);
  color: #fff;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-form input {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.auth-form button {
  padding: 11px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.auth-form button:hover {
  background: var(--accent-2);
}
.error {
  background: #fdf1f0;
  color: #a3392f;
  border-left: 3px solid var(--red);
  padding: 10px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 12px;
}
.google-btn {
  width: 100%;
  padding: 12px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.18s ease;
}
.google-btn:hover {
  background: var(--accent-2);
}
.auth-hint {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* ---- App ---- */
.app {
  display: flex;
  height: 100vh;
}
.sidebar {
  width: 240px;
  background: var(--sidebar);
  color: #cfe0e7;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.workspace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(234, 242, 246, 0.1);
}
.ws-name {
  font-weight: 700;
  font-size: 17px;
  color: #fff;
}
.workspace button {
  background: transparent;
  border: 1px solid rgba(234, 242, 246, 0.24);
  color: #cfe0e7;
  border-radius: var(--r-sm);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
}
.channels-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #8fa8b4;
}
.channels-head button {
  background: transparent;
  border: none;
  color: #8fa8b4;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.channel-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0 8px;
}
/* Une section vide ne doit pas creuser un trou : l'annuaire d'un cabinet d'une
   personne, ou une liste de conversations encore vierge, se replient. */
.channel-list:empty {
  margin: 0;
}
.channel-list li {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 15px;
  color: #cfe0e7;
  transition: background 0.15s ease;
}
.channel-list li:hover {
  background: rgba(234, 242, 246, 0.08);
}
/* Canal courant : l'orange de la charte en LISERE, pas en aplat — il reste un
   accent rare. */
.channel-list li.active {
  background: rgba(255, 145, 76, 0.14);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--orange);
}
.me {
  padding: 12px 16px;
  border-top: 1px solid rgba(234, 242, 246, 0.1);
  font-size: 13px;
  color: #8fa8b4;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  min-width: 0;
  /* Ancre le panneau de composition d'un canal prive, qui se pose sous
     l'en-tete. Sans cela il se placerait par rapport a la fenetre et
     glisserait des que le fil defile. */
  position: relative;
}
/* Repere de la pastille « nouveaux messages » : elle flotte au-dessus du fil,
   jamais sous la zone de saisie, quelle que soit la hauteur de celle-ci. */
.zone-fil {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
}
.channel-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.channel-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.channel-topic {
  color: var(--muted);
  font-size: 13px;
}
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  min-width: 0;
}
/* Une ligne de texte de mille cinq cents pixels ne se lit pas : l'oeil perd le
   debut de la ligne suivante. On borne la largeur de LECTURE, ce qui rapproche
   du meme coup la barre d'actions du texte sur lequel elle agit. */
#fil,
#fil-haut,
.nouveaux {
  max-width: 1100px;
}
.msg {
  display: flex;
  gap: 12px;
  padding: 8px 0;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.msg-body {
  min-width: 0;
}
.msg-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.msg-author {
  font-weight: 700;
  font-size: 15px;
}
.msg-time {
  font-size: 11px;
  color: var(--muted);
}
.msg-text {
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* Annuaire du cabinet : on clique un nom pour ouvrir une conversation. */
.people-list li {
  opacity: 0.75;
}
.people-list li:hover {
  opacity: 1;
}
.dm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

/* Message de refus du serveur (message vide, trop long, debit depasse).
   S'affiche au-dessus du champ de saisie et disparait tout seul. */
.app-error {
  margin: 0 20px 8px;
  padding: 9px 13px;
  border: 1px solid #f3cdc9;
  border-left: 3px solid var(--red);
  border-radius: var(--r-sm);
  background: #fdf3f2;
  color: #a3392f;
  font-size: 13px;
}
.composer {
  display: flex;
  gap: 10px;
  padding: 14px 20px 6px;
  border-top: 1px solid var(--border);
  /* La zone de saisie grandit vers le haut : le bouton reste sur la derniere
     ligne, aligne avec le texte qu'on vient d'ecrire. */
  align-items: flex-end;
}
.composer textarea {
  flex: 1;
  padding: 12px 14px;
  resize: none;
  overflow-y: auto;
  /* Le script pose la hauteur exacte du texte ; cette borne a le dernier mot.
     Sur un telephone, 200 px prendraient le quart de l'ecran : au-dela, la
     zone defile sur elle-meme plutot que de manger le fil. */
  max-height: min(200px, 30vh);
  line-height: 1.45;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.composer textarea:focus {
  outline: none;
  background: var(--panel);
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(29, 98, 122, 0.12);
}
.composer button {
  padding: 12px 22px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  font-size: 15px;
  transition: background 0.18s ease;
}
.composer button:hover {
  background: var(--accent-2);
}

/* Bouton menu (masque sur desktop) */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--ink);
  padding: 0 4px 0 0;
  line-height: 1;
}
.sidebar-backdrop {
  display: none;
}

/* ---- Fil : bornes d'historique, separateurs de jour, groupement ---- */
.fil-haut {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding: 6px 0 14px;
}
/* Separateur de jour : un filet continu, la date posee dessus. */
.jour {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.jour::before,
.jour::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* Message groupe : meme auteur, quelques minutes plus tard. On ne repete ni
   l'avatar ni le nom, mais la gouttiere reste pour garder l'alignement. */
.msg.groupe {
  padding-top: 0;
}
.msg.groupe .avatar {
  background: none;
  height: auto;
}

/* ---- Mise en forme du corps d'un message ---- */
.msg-text p {
  margin: 0;
}
.msg-text p + p,
.msg-text ul,
.msg-text pre,
.msg-text blockquote {
  margin-top: 6px;
}
.msg-text a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.msg-text a:hover {
  color: var(--navy-2);
}
.msg-text strong {
  font-weight: 700;
}
.msg-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}
.msg-text pre {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  overflow-x: auto;
  /* Un extrait de code ne se replie pas : il defile dans son propre cadre,
     sinon c'est la page entiere qui part en largeur. */
  white-space: pre;
}
.msg-text pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
}
.msg-text blockquote {
  margin-left: 0;
  padding-left: 12px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}
.msg-text ul {
  margin-bottom: 0;
  padding-left: 22px;
}

/* ---- Bouton « nouveaux messages » ---- */
.retour-bas {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  z-index: 5;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--sh-md);
}
.retour-bas:hover {
  background: var(--navy-2);
}

/* Rappel discret de la syntaxe, sous la zone de saisie. */
.composer-aide {
  margin: 0;
  padding: 0 20px 12px;
  font-size: 11px;
  color: var(--muted);
}

/* ---- Mobile : sidebar en tiroir + zones de securite iOS ---- */
@media (max-width: 640px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    padding-top: env(safe-area-inset-top);
  }
  body.nav-open .sidebar {
    transform: translateX(0);
  }
  body.nav-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.4);
  }
  .channel-header {
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  .composer-aide {
    /* Sur telephone, l'aide-memoire vole une ligne au fil : on la retire et on
       laisse la zone de securite iOS a sa place. */
    display: none;
  }
  .composer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .channel-topic {
    display: none;
  }
}

/* ---- Non-lus ---- */
/* La barre laterale est sombre : la pastille doit s'y detacher sans crier.
   Le blanc porte le decompte ordinaire ; l'orange de la charte est reserve a
   « on vous nomme », qui est l'evenement rare. */
.channel-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.channel-list li.non-lu {
  color: #fff;
  font-weight: 600;
}
.pastille {
  margin-left: auto;
  flex: none;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--navy-dark);
  background: #cfe0e7;
}
.pastille.mention {
  color: #2b1405;
  background: var(--orange);
}

/* Le trait « nouveaux messages » : une ligne, pas un bandeau. Il dit ou on en
   etait en arrivant, il n'a pas a occuper le fil. */
.nouveaux {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  color: var(--orange-texte);
  font-size: 12px;
  font-weight: 600;
}
.nouveaux::before,
.nouveaux::after {
  content: '';
  height: 1px;
  background: rgba(255, 145, 76, 0.45);
  flex: 1;
}
.nouveaux::before {
  flex: 0 0 12px;
}

/* Une mention dans le fil. Fond tres pale : elle doit se reperer d'un coup
   d'oeil sans transformer le message en surligneur. */
.mention {
  padding: 0 3px;
  border-radius: 4px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(29, 98, 122, 0.1);
}

/* ---- Suggestions de mention ---- */
/* L'ancrage : la liste se pose sur le bord haut du composer, quelle que soit
   la hauteur qu'a prise la zone de saisie. */
.zone-composer {
  position: relative;
}
.suggestions {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 100%;
  z-index: 5;
  margin: 0 0 6px;
  padding: 6px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.suggestions li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px;
}
.suggestions li.actif {
  background: rgba(29, 98, 122, 0.1);
}
.suggestion-jeton {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

/* ---- Canaux prives ---- */
/* Le bouton de composition vit dans l'en-tete, a cote du nom du canal : savoir
   qui a acces est une verification qu'on fait AVANT d'ecrire, pas un reglage
   qu'on va chercher. */
.membres-bouton {
  align-self: center;
  margin-left: auto;
  flex: none;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.membres-bouton:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.panneau-membres {
  position: absolute;
  right: 16px;
  top: 56px;
  z-index: 6;
  width: min(320px, calc(100vw - 32px));
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.panneau-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.panneau-tete button {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.membres-liste {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}
.membres-liste li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 14px;
}
.membres-liste li:hover {
  background: var(--soft);
}
.membre-action {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.membre-action:hover {
  border-color: var(--navy);
  color: var(--navy);
}

/* Canal archive : la marque doit se lire avant qu'on ait commence a ecrire. */
.archive-marque {
  align-self: center;
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 145, 76, 0.16);
  color: var(--orange-texte);
  font-size: 12px;
  font-weight: 600;
}
.composer textarea:disabled,
.composer button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Le panneau « parcourir » s'ouvre du cote de son bouton, a gauche. */
#panneau-parcourir {
  right: auto;
  left: 16px;
}
/* Deux boutons dans l'en-tete de section : ils restent groupes a droite. */
.channels-head button + button {
  margin-left: 4px;
}

/* ---- Barre de mise en forme ---- */
/* Elle vit au-dessus de la saisie, discrete : c'est un outil qu'on cherche du
   regard quand on en a besoin, pas un bandeau qui reclame l'attention. */
.barre-format {
  display: flex;
  gap: 2px;
  padding: 6px 20px 0;
}
.outil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.outil:hover {
  background: var(--soft);
  color: var(--navy);
}
.outil:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

/* ---- Emojis ---- */
.emojis {
  position: absolute;
  left: 20px;
  bottom: 100%;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  margin-bottom: 6px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.emoji {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.emoji:hover {
  background: var(--soft);
}

/* Les boutons de la barre laterale portent maintenant un trace, pas un
   caractere : ils doivent centrer leur icone. */
/* Ces boutons portent maintenant un trace, pas un caractere : ils doivent
   centrer leur icone. `.menu-toggle` en est EXCLU a dessein — il est masque
   par `display: none` sur poste fixe et ne reapparait que sous 640 px. Lui
   imposer un `display` ici l'aurait rallume partout, sans qu'aucun test ne le
   voie : une regle de centrage qui change la visibilite. */
.channels-head button,
.panneau-tete button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.retour-bas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Souligne et barre dans le fil : le rendu les produit desormais. */
.msg-text u {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.msg-text s {
  opacity: 0.75;
}

/* ---- Boites de dialogue ---- */
/* Elles remplacent prompt() et confirm(), qui gelaient la page et sortaient du
   cadre de l'application. Celles-ci suivent la charte et la langue. */
.dialogue-fond {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 34, 45, 0.45);
}
.dialogue {
  width: min(420px, 100%);
  padding: 22px;
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.dialogue-titre {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
}
.dialogue-texte {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.dialogue-champ {
  display: block;
  margin-bottom: 12px;
}
.dialogue-champ span {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  color: var(--muted);
}
.dialogue-champ input,
.dialogue-champ textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--soft);
}
.dialogue-champ input:focus,
.dialogue-champ textarea:focus {
  outline: none;
  background: var(--panel);
  border-color: var(--navy);
}
.dialogue-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.dialogue-option {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.dialogue-option:hover {
  border-color: var(--navy);
  background: var(--soft);
}
.dialogue-option.danger,
.dialogue-valider.danger {
  color: var(--red);
}
.dialogue-option.danger:hover {
  border-color: var(--red);
}
.dialogue-pied {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.dialogue-annuler,
.dialogue-valider {
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.dialogue-annuler {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
}
.dialogue-valider {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}
.dialogue-valider.danger {
  border-color: var(--red);
  background: var(--panel);
}
.dialogue-valider:hover {
  background: var(--accent-2);
}
.dialogue-valider.danger:hover {
  background: var(--red);
  color: #fff;
}

/* ---- Aucun canal ouvert ---- */
.ecran-vide {
  padding: 60px 20px;
  text-align: center;
}
.ecran-vide-titre {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ecran-vide-titre:empty {
  display: none;
}
.ecran-vide-aide {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* ---- Pieces jointes ---- */
/* Dans le fil : un lien sobre, pas une carte. Une piece accompagne un message,
   elle ne le remplace pas. */
.piece {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--soft);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  max-width: 100%;
}
.piece:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.piece-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.piece-poids {
  flex: none;
  color: var(--muted);
  font-size: 12px;
}

/* En attente d'envoi : au-dessus de la saisie, pour qu'on voie ce qui partira. */
.pieces-attente {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 8px 20px 0;
  list-style: none;
}
.pieces-attente li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--soft);
  font-size: 13px;
}
.piece-retirer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.piece-retirer:hover {
  background: var(--panel);
  color: var(--red);
}

/* ---- Apercu des pieces ---- */
/* Une image se montre, le reste se nomme : un document qu'on doit ouvrir pour
   savoir ce qu'il contient fait perdre le fil de la conversation. */
.piece-image {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--soft);
  cursor: zoom-in;
  overflow: hidden;
  max-width: 380px;
}
.piece-image img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}
.piece-image:hover {
  border-color: var(--navy);
}
.piece-groupe {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.piece-apercu {
  margin-top: 5px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.piece-apercu:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.apercu-fond {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: rgba(11, 34, 45, 0.72);
}
.apercu-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 12px;
  color: #fff;
  font-size: 14px;
}
.apercu-fermer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.apercu-fermer:hover {
  background: rgba(255, 255, 255, 0.22);
}
.apercu-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  color: #cfe0e7;
}
.apercu-zone img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.apercu-zone iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--r-sm);
  background: var(--panel);
}

/* Glisser-deposer : le cadre dit ou le fichier va atterrir. */
.main.depot-actif {
  outline: 2px dashed var(--orange);
  outline-offset: -6px;
}

/* ---- Panne expliquee ---- */
/* Elle remplace un message d'une ligne qui recopiait le libelle interne d'une
   bibliotheque. Ce qu'on lit ici doit dire : ce qui ne va pas, qui peut le
   regler, et par ou sortir. */
.panne-titre {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  color: var(--red);
}
.panne-texte {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
}
.panne-reessayer {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.panne-reessayer:hover {
  background: var(--accent-2);
}

/* ---- Reactions ---- */
/* Sous le message, discretes : elles accompagnent, elles ne remplacent pas. */
.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.reactions:empty {
  display: none;
}
.reaction {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
}
.reaction:hover {
  border-color: var(--navy);
}
/* La sienne se distingue : sans cela on ne sait pas si un second clic ajoute
   ou retire. */
.reaction.active {
  border-color: var(--navy);
  background: rgba(29, 98, 122, 0.1);
  color: var(--navy);
  font-weight: 600;
}
.palette-reaction {
  position: fixed;
  bottom: auto;
  left: auto;
  z-index: 40;
}

/* ---- Actions sur un message ---- */
/* Au survol seulement : elles n'ont pas a occuper la ligne en permanence.
   Mais « au survol » ne suffisait pas a les rendre comprehensibles. */
.msg {
  position: relative;
}

/* La ligne survolee se distingue.
   C'etait ce qui manquait : sur un ecran large, la barre d'actions se posait a
   plus de six cents pixels du texte, et rien ne disait sur QUEL message elle
   agissait. On voyait des boutons apparaitre dans le vide. Le fond colore relie
   les deux d'un coup d'oeil — c'est lui, et non la proximite, qui fait
   comprendre le geste. */
.msg:hover {
  background: var(--soft);
}

.msg-actions {
  position: absolute;
  top: -10px;
  right: 12px;
  display: none;
  gap: 2px;
  padding: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
}
.msg:hover .msg-actions,
.msg-actions:focus-within {
  display: flex;
}
.msg-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.msg-action:hover {
  background: var(--soft);
  color: var(--navy);
}

/* ---- Message modifie ou supprime ---- */
.msg-modifie {
  margin-left: 5px;
  color: var(--muted);
  font-size: 12px;
}
/* La ligne reste, le contenu part : le fil continue de dire qu'il s'est passe
   quelque chose. */
.msg-supprime {
  color: var(--muted);
  font-style: italic;
  font-size: 14px;
}

/* ---- Fils de discussion ---- */
/* Le fil vit A COTE du canal, jamais a sa place : repondre a un message ne
   doit pas faire perdre de vue ce qui se dit autour. */
.zone-conversation {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
}
.panneau-fil {
  width: 380px;
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--border);
  background: var(--panel);
}
.fil-racine {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  /* Surtout pas « var(--bg, transparent) » : le repli d'une variable ne sert
     que si elle n'est pas DEFINIE, et --bg l'est sur :root. On y aurait donc
     toujours le degrade sombre de l'application, au milieu d'un panneau
     blanc. */
  background: var(--soft);
}
.fil-reponses {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  min-width: 0;
}
/* Le compteur sous un message qui a des reponses. C'est le seul point
   d'entree du fil : sans lui, une conversation ouverte hier serait perdue. */
.fil-compteur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.fil-compteur:hover {
  border-color: var(--border);
  background: var(--hover, rgba(0, 0, 0, 0.04));
}
/* Une mention dans une reponse ne compte pas dans la pastille du canal : le
   message racine, lui, est dans le fil et porte le signal. Sans ce point, une
   mention posee dans un fil se perdrait. */
.fil-compteur .fil-mention {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.fil-participants {
  color: var(--muted);
  font-weight: 400;
}
/* Ou part ce qu'on ecrit. Un composer qui ne dit pas dans quel fil il ecrit
   envoie le message la ou personne ne le lira. */
.mode-reponse {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  padding: 7px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--hover, rgba(0, 0, 0, 0.03));
  font-size: 13px;
  color: var(--ink);
}
.mode-reponse-texte {
  flex: 1;
}
.mode-reponse-aussi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  cursor: pointer;
}
.mode-reponse button {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
/* Une reponse qui est AUSSI dans le canal s'y montre pour ce qu'elle est :
   sinon elle a l'air d'un message hors sujet. */
.msg-depuis-fil {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
}

/* Sous 900 px, le panneau prend toute la place : deux colonnes de 380 px ne
   tiennent pas, et un fil ecrase a 120 px ne se lit pas.
   Il se cale sur .zone-conversation, qui est positionnee pour cela : sur .main
   il recouvrirait AUSSI la zone de saisie — le seul endroit d'ou repondre. */
@media (max-width: 900px) {
  .panneau-fil {
    position: absolute;
    inset: 0;
    width: auto;
    flex: none;
    z-index: 5;
  }
}

/* Le fil dont la racine a ete supprimee. Le bandeau ne disparait pas — il
   change de sens : le prochain message partira dans le canal, et le taire
   serait le pire des deux comportements. */
.mode-reponse.mode-reponse-ferme {
  border-color: var(--red);
  color: var(--red);
}

/* ---- Recherche ---- */
/* Le champ vit dans l'en-tete du canal : on cherche un message, pas un canal,
   et c'est le fil qu'on regarde a ce moment-la. */
.recherche-form {
  margin-left: auto;
}
.recherche-form input {
  width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.recherche-form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.recherche-filtres,
.recherche-periode {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0;
}
.recherche-filtres select {
  flex: 1;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.recherche-periode {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.recherche-periode label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.recherche-periode input {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 3px 5px;
}
.recherche-resultats {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}
.recherche-vide {
  margin: 0;
  padding: 16px;
  color: var(--muted);
  font-size: 14px;
}
.resultat {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.resultat:hover {
  background: var(--soft);
}
.resultat-tete {
  display: flex;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.resultat-date {
  margin-left: auto;
  font-weight: 400;
}
.resultat-extrait {
  font-size: 14px;
  line-height: 1.5;
  /* Un extrait de recherche ne doit pas etre un pave : deux fragments
     suffisent a decider si c'est le bon message. */
  overflow-wrap: anywhere;
}
/* Ce que le MOTEUR a apparie — pas ce que le navigateur croit reconnaitre.
   « avocats » surligne « avocat » : seul Postgres le sait. */
.resultat-extrait mark {
  padding: 0 1px;
  border-radius: 2px;
  background: var(--accent-clair, rgba(217, 138, 74, 0.25));
  color: inherit;
}
.resultat-fil {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
/* Le message qu'on vient de rejoindre depuis un resultat. Le surlignage
   s'efface tout seul : marque en permanence, il deviendrait du bruit. */
.msg-vise {
  animation: vise 2.5s ease-out;
}
@keyframes vise {
  0%,
  55% {
    background: var(--soft);
  }
  100% {
    background: transparent;
  }
}

/* Sous 900 px, le champ retrecit. Le PANNEAU, lui, n'a rien a redeclarer : il
   porte la classe .panneau-fil, dont la regle media au meme point de rupture
   le pose deja en pleine page. Recopier ces valeurs les ferait diverger le jour
   ou le panneau de discussion bougerait. */
@media (max-width: 900px) {
  .recherche-form input {
    width: 130px;
  }
}

/* ---- Epingles ---- */
/* Une ligne d'epingle est un bouton pour ouvrir, PLUS un bouton pour retirer :
   les deux ne peuvent pas etre imbriques, d'ou la ligne en deux parties. */
.epingle-ligne {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  cursor: default;
}
.epingle-ligne:hover {
  background: var(--soft);
}
.epingle-corps {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* L'epingle posee se distingue, comme une reaction active : sans cela on ne
   sait pas si un second clic pose ou retire. */
.msg-action.actif {
  color: var(--accent-2);
}
/* L'heure EST le lien permanent. Elle garde l'apparence d'un texte : un bouton
   visible a cote de chaque message ferait du bruit pour une action rare. */
button.msg-time {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  /* `font` est un raccourci : il REINITIALISE la taille, et le selecteur
     type+classe l'emporte sur `.msg-time`. Sans cette ligne, l'heure passait de
     11 px a la taille par defaut du navigateur. On la reaffirme apres le
     raccourci, jamais avant. */
  font-size: 11px;
  cursor: pointer;
}
button.msg-time:hover {
  text-decoration: underline;
}

/* Le telechargement propose A COTE d'un apercu de PDF.
   Un <iframe> ne leve pas d'erreur quand son document est refuse : il n'y a
   donc rien a detecter, et une issue visible en permanence vaut mieux qu'une
   detection fragile. */
.apercu-secours {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}