/* =========================================================================
   Ghost Chat - habillage "Claire": le langage visuel d'Immo-Core, transpose.
   Refonte du 03/09/2026, apres l'habillage bleu du matin meme.

   D'ou ca vient. Les jetons ci-dessous sont repris tels quels de
   `public/styles/claire-base.css` d'Immo-core-system: memes teintes, memes
   roles, memes proportions. Ce n'est pas une inspiration, c'est le meme
   systeme applique a un autre produit - c'est ce qui fait que les deux
   applications se ressemblent sans se copier.

   Ce que le langage impose, et qu'on ne negocie pas regle par regle:
     - fond clair, panneaux blancs, filets fins au lieu de boites;
     - aucun angle arrondi: le rayon est a zero partout;
     - les intitules sont des micro-capitales espacees (9 a 12 px, 0.18em);
     - un seul accent, le marine, pour l'action principale et l'element actif;
     - le rouge est reserve au destructif, il ne sert a rien d'autre.

   Surcouche posee APRES styles.css: on ne redefinit que l'apparence. Aucune
   regle de structure, aucun changement de comportement. Retirer le <link>
   dans index.html rend l'habillage d'origine.
   ========================================================================= */

/* ---------- 0. Polices ---------- */
/* Archivo pour les titres, Manrope pour le texte: le couple d'Immo-Core.
   Hebergees en local comme l'etait Outfit - Ghost Chat n'appelle aucun
   serveur Google, et ce n'est pas cette feuille qui va commencer.
   Les deux sont variables: un fichier par plage couvre tout l'axe de graisse.
   107 Ko a deux, contre 47 Ko pour Outfit seule; les woff2 d'Outfit restent
   dans fonts/ mais plus rien ne les demande. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Palette ---------- */
/* Les variables gardent leurs noms d'origine (--green-*, --bg, --panel...)
   pour que toutes les regles existantes de styles.css suivent sans etre
   reecrites. Elles ne portent plus ni vert ni bleu de nuit depuis le
   03/09/2026: c'est la palette claire d'Immo-Core. */
:root {
  /* Les fonds. Le degrade bleute sur les 700 premiers pixels vient de
     `html:has(body.theme-clair)` chez Immo-Core: c'est lui qui empeche le
     blanc d'etre plat. */
  --bg: #f7f7f6;
  --bg-haut: oklch(0.965 0.025 195);
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --panel-elevated: #fafaf9;

  /* L'accent unique. Immo-Core le veut marine; ici c'est un vert canard -
     meme clarte, meme role, teinte tournee de 248 a 195. La chroma monte
     de 0,05 a 0,075: a chroma egale un turquoise vire au gris la ou un
     bleu tient encore sa couleur. */
  --green-primary: oklch(0.45 0.075 195);
  --green-secondary: oklch(0.35 0.065 195);
  --green-soft: oklch(0.94 0.04 195);
  --green-glow: rgba(20, 23, 27, 0.10);

  /* Notes personnelles: le vert encre d'Immo-Core, seule autre teinte admise
     par le systeme. Elle distingue sans crier. */
  --orange-accent: oklch(0.45 0.10 142);
  --orange-vivid: oklch(0.45 0.10 142);
  --orange-soft: oklch(0.95 0.035 142);

  /* Encre et gris: quatre niveaux, pas un de plus. */
  --text: #14171b;
  --text-secondary: #6e7279;
  --text-muted: #8f9299;

  /* Trois epaisseurs de trait, comme chez Immo-Core: le trait de carte, le
     trait fin des separations internes, le bord de champ plus marque. */
  --border: #eae9e6;
  --border-strong: #dcdbd7;
  --divider: #f0efec;

  --danger: #b4494a;
  --danger-soft: #fbf1f1;
  --read-blue: oklch(0.45 0.075 195);

  --self-bubble-start: oklch(0.45 0.075 195);
  --self-bubble-end: oklch(0.45 0.075 195);
  --peer-bubble: #ffffff;

  --notes-start: oklch(0.45 0.10 142);
  --notes-end: oklch(0.38 0.09 142);

  /* Sur du clair, ce n'est plus l'ombre qui detache un panneau mais le trait.
     L'ombre ne fait plus que poser: courte, tres pale. */
  --shadow-card: 0 1px 2px rgba(20, 23, 27, 0.04), 0 12px 32px rgba(20, 23, 27, 0.06);
  --shadow-bubble: 0 1px 2px rgba(20, 23, 27, 0.03);
  --shadow-glow: 0 0 0 1px var(--border-strong);

  /* Le rayon est a zero. C'est la marque la plus reconnaissable du langage:
     tout est a angle vif, du champ de saisie a la bulle de message. */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;
}

/* styles.css pose encore des rayons EN DUR que les variables ci-dessus ne
   touchent pas: 16 px sur la pastille de marque, 22 px sur la barre d'outils,
   14 px sur les avatars, 8 px sur les vignettes d'image. Ils sont ramenes ici
   composant par composant. Les vrais cercles - pastilles de presence - gardent
   leur 50 % et ne sont pas dans cette liste. */
.auth-card,
.sidebar,
.chat-panel,
.composer,
.composer textarea,
.auth-form input,
.primary-btn,
.secondary-btn,
.send-btn,
.icon-text-btn,
.tool-btn,
.group-create-btn,
.screen-control-btn,
.danger-btn,
.message,
.message.mine,
.message.theirs,
.message img,
.conversation-row,
.user-row,
.personal-notes-row,
.conversation-icon,
.personal-notes-icon,
.brand-mark,
.call-banner,
.image-filter-card,
.image-filter-option,
.image-filter-option img,
.screen-panel,
.notice {
  border-radius: 0;
}

/* ---------- 2. Typographie ---------- */
body,
button,
input,
textarea {
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

body {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text);
}

/* Les titres passent en Archivo, capitales, tres serres. C'est le "MES BIENS"
   d'Immo-Core: un seul niveau de titre par ecran, et il est gros. */
.brand h1 {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--text);
}

/* Dans la colonne de gauche le meme titre sert d'enseigne: meme dessin, plus
   petit, pour ne pas concurrencer le nom de la conversation. */
.brand.compact h1 {
  font-size: 19px;
  letter-spacing: -0.02em;
}

.brand p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Le nom de la conversation ouverte: c'est le heros de l'ecran. Volontairement
   plus mesure que dans la maquette - a 58 px, le titre et ses sous-titres
   mangeaient un tiers de la hauteur avant le premier message. */
.chat-header h2 {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
}

.chat-header p,
.notice {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0;
}

/* Les micro-libelles: 9 a 11 px, gras, tres espaces. Ils portent tout le
   caractere du systeme - ce sont eux qu'on reconnait d'un ecran a l'autre. */
.users-panel h2 {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.auth-form label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.message-text {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
}

.message-meta {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--text-muted);
}

/* Sur une bulle marine, le gris des metadonnees deviendrait illisible. */
.message.mine .message-meta {
  color: rgba(255, 255, 255, 0.72);
}

.user-row strong,
.conversation-row strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}

.user-row small {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---------- 3. Boutons ---------- */
/* Capitales espacees, angle vif, aucun degrade: le bouton "VOIR" d'Immo-Core.
   Le marine sur blanc donne 8,9 de contraste - largement au-dela du seuil. */
.primary-btn,
.send-btn {
  background: var(--green-primary);
  border: 1px solid var(--green-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.primary-btn:hover,
.send-btn:hover {
  background: var(--green-secondary);
  border-color: var(--green-secondary);
  filter: none;
  transform: none;
  box-shadow: none;
}

.primary-btn:active,
.send-btn:active {
  transform: none;
  filter: none;
}

.secondary-btn,
.icon-text-btn,
.tool-btn,
.screen-control-btn,
.group-create-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.secondary-btn:hover,
.icon-text-btn:hover,
.tool-btn:hover,
.screen-control-btn:hover,
.group-create-btn:hover {
  background: #fafaf9;
  border-color: var(--text);
  color: var(--text);
}

.secondary-btn.active,
.tool-btn.active {
  background: var(--green-soft);
  border-color: var(--green-primary);
  color: var(--green-primary);
}

/* Le rouge ne sert qu'a ca. Chez Immo-Core c'est "ARCHIVER", ici c'est
   supprimer et raccrocher - jamais une decoration. */
.danger-btn,
.screen-control-btn.danger-btn {
  color: var(--danger);
  border-color: var(--border-strong);
  background: transparent;
}

.danger-btn:hover,
.screen-control-btn.danger-btn:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

/* ---------- 4. Champs de saisie ---------- */
.auth-form input,
.composer textarea {
  background: #ffffff;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.15s ease;
}

/* Le champ actif prend le trait marine, sans halo. Sur du clair, l'anneau
   diffus d'avant faisait une tache; le trait suffit a dire ou l'on est. */
.auth-form input:focus,
.composer textarea:focus {
  border-color: var(--green-primary);
  background: #ffffff;
  box-shadow: none;
  outline: none;
}

.auth-form input::placeholder,
.composer textarea::placeholder {
  color: var(--text-muted);
}

/* ---------- 5. Panneaux et separations ---------- */
.sidebar,
.chat-panel,
.auth-card {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

/* Le panneau de conversation laisse passer le degrade du fond: c'est lui qui
   porte le filigrane, comme la villa d'Immo-Core porte l'en-tete. */
.chat-panel {
  background: linear-gradient(180deg, var(--bg-haut) 0, var(--bg) 520px);
  box-shadow: none;
}

.sidebar-header,
.chat-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
}

.sidebar-header {
  border-bottom-color: var(--divider);
}

.composer {
  background: #ffffff;
  border-top: 1px solid var(--border);
}

/* ---------- 6. Liste des conversations ---------- */
.user-row,
.conversation-row,
.personal-notes-row {
  border-radius: 0;
  border: 1px solid transparent;
  transition: background 0.13s ease, border-color 0.13s ease;
}

.user-row:hover,
.conversation-row:hover,
.personal-notes-row:hover {
  background: #fafaf9;
  border-color: var(--border);
}

/* La conversation ouverte: aplat bleu tres pale et trait marine sur le bord.
   C'est le traitement exact de l'onglet actif de la barre laterale
   d'Immo-Core. */
.conversation-row.active,
.user-row.active {
  background: var(--green-soft);
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--green-primary);
}

.dot.online {
  background: var(--green-primary);
  box-shadow: none;
}

/* ---------- 7. Bulles de message ---------- */
/* Des cartes a filet fin, pas des bulles. L'angle vif est ce qui rattache la
   conversation au reste du systeme. */
.message {
  box-shadow: var(--shadow-bubble);
}

.message.mine {
  background: var(--green-primary);
  border: 1px solid var(--green-primary);
  border-radius: 0;
  color: #ffffff;
}

.message.theirs {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
}

.message-text a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.message.theirs .message-text a {
  color: var(--green-primary);
}

.message.mine .message-text a {
  color: #ffffff;
}

/* ---------- 8. Barre de defilement ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
  background-clip: content-box;
}

/* ---------- 9. Fenetre des filtres d'image ---------- */
.image-filter-card {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.image-filter-option {
  border: 1px solid var(--border);
  background: #ffffff;
  transition: border-color 0.13s ease, background 0.13s ease;
}

.image-filter-option:hover {
  border-color: var(--border-strong);
  background: #fafaf9;
}

.image-filter-option.active {
  border-color: var(--green-primary);
  background: var(--green-soft);
}

/* ---------- 10. Banniere d'appel ---------- */
.call-banner {
  background: var(--green-soft);
  border: 1px solid var(--green-primary);
  border-radius: 0;
}

.call-banner strong {
  color: var(--green-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- 11. Fond d'ecran ---------- */
/* Le degrade bleute du haut, repris de `html:has(body.theme-clair)`. Il est
   ce qui empeche le blanc d'etre un aplat mort - il n'y a plus de lueur
   radiale, elles n'ont aucun sens sur du clair. */
body {
  background: linear-gradient(180deg, var(--bg-haut) 0, var(--bg) 700px);
  background-attachment: fixed;
}

.auth-view::before,
.chat-panel::before,
.sidebar::before {
  background-image: url("ghostchat-wordmark.png");
  /* Traitement de la villa d'Immo-Core: desature, tres pale, efface vers le
     bas par un masque. Le filigrane habille, il ne concurrence jamais le
     texte pose dessus. */
  filter: grayscale(1) contrast(0.95);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
}

/* Centre, et non pose en haut: la carte de connexion couvre le milieu du
   lettrage de toute facon. Centre, ce qui depasse est symetrique a gauche et a
   droite et se lit comme un choix; decale, ca se lit comme un accident. */
.auth-view::before {
  background-position: center;
  background-size: min(86vmin, 660px);
  opacity: 0.16;
}

.chat-panel::before {
  background-position: center 12%;
  background-size: min(70vmin, 620px);
  opacity: 0.14;
}

/* Dans la colonne, le filigrane n'apporte rien et brouille les lignes. */
.sidebar::before {
  opacity: 0;
}

/* ---------- 12. Restes de styles.css ---------- */
/* La fin de styles.css redefinit ces fonds en clair (#f7faf9 pour les lignes,
   #fffdf5 pour les notes, blanc a 70% pour le panneau de partage). C'etait un
   probleme quand le theme etait sombre; sur du clair ces valeurs ne jurent
   plus, mais elles ne sont pas les notres: on les ramene a la palette. */
.user-row,
.conversation-row,
.personal-notes-row {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}

.personal-notes-row {
  border-color: var(--border);
}

.personal-notes-icon {
  background: var(--orange-vivid);
}

.screen-panel {
  background: transparent;
}

/* Lignes courtes: 12px de marge interne et 56px de hauteur minimale faisaient
   des paves dans une colonne de 320px. */
.user-row,
.conversation-row {
  padding: 9px 12px;
  gap: 11px;
}

.conversation-row {
  min-height: 44px;
}

/* ---------- 13. Avatars, cadres et icones ---------- */
/* Chaque conversation est encadree d'un filet: la colonne se lit comme une
   liste de lignes, pas comme un bloc de texte continu. */
.conversation-row {
  background: #ffffff;
  border-color: var(--divider);
}

.conversation-row:hover {
  background: #fafaf9;
  border-color: var(--border);
}

.personal-notes-row {
  border-color: var(--border);
}

/* Pastille de la personne: carree comme tout le reste. */
.conversation-icon {
  width: 34px;
  height: 34px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  position: relative;
  flex: none;
}

.conversation-icon .icon {
  width: 17px;
  height: 17px;
}

/* Six teintes, toutes tirees vers le marine du systeme: la couleur identifie
   une personne, elle ne decore pas. Chroma volontairement basse - six aplats
   satures dans une colonne de 320 px, c'est ce qui fait "jouet". Toutes
   portent du blanc a 4,6 de contraste au moins. */
.avatar-0 { background: oklch(0.45 0.075 195); }
.avatar-1 { background: oklch(0.46 0.08 175); }
.avatar-2 { background: oklch(0.45 0.08 215); }
.avatar-3 { background: oklch(0.44 0.09 155); }
.avatar-4 { background: oklch(0.46 0.07 240); }
.avatar-5 { background: oklch(0.44 0.08 130); }

.icone-groupe {
  background: var(--green-secondary);
}

/* La pastille de marque portait un degrade vert et une ombre portee verte,
   restes de l'habillage d'origine. Un carre marine plein, sans ombre: c'est
   le meme objet que la pastille d'une conversation, au meme rang. */
.brand-mark {
  background: var(--green-primary);
  color: #ffffff;
  box-shadow: none;
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
}

/* La presence se lit sur l'avatar, la ou l'oeil est deja pose. */
.conversation-icon .presence {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bcbfc4;
  box-shadow: 0 0 0 2.5px var(--panel);
}

.conversation-icon .presence.online {
  background: oklch(0.62 0.16 145);
  box-shadow: 0 0 0 2.5px var(--panel);
}

/* Icones des boutons: du trait, jamais d'aplat, pour rester lisibles a 16 px
   et suivre la couleur du texte du bouton sans etre redessinees. */
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-text-btn,
.group-create-btn,
.secondary-btn,
.primary-btn,
.send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* La regle inline-flex ci-dessus est une regle d'auteur: elle l'emporte sur le
   `[hidden] { display: none }` de la feuille du navigateur. Sans ce rappel, les
   boutons caches par l'attribut hidden restent affiches - "Membres",
   "Raccrocher", "Repondre", "Refuser", et "Nouveau groupe" pour les non-admins. */
.icon-text-btn[hidden],
.group-create-btn[hidden],
.secondary-btn[hidden],
.primary-btn[hidden],
.send-btn[hidden] {
  display: none;
}

/* ---------- 14. Ecran de demarrage ---------- */
/* Un decor 3D a vecu ici le 03/09/2026: un tour du logo a l'ouverture, un
   balancement en boucle derriere les messages, servis par model-viewer. Il est
   parti le meme jour. Le maillage est chrome et bleu nuit, dessine pour
   ressortir sur du noir; sur l'habillage clair il ne tenait pas, et il restait
   le seul endroit de l'application ou survivait du bleu brillant.

   Ce qui a disparu avec lui: le moteur model-viewer (934 Ko de JavaScript) et
   les deux GLB (1,4 Mo), charges a chaque ouverture pour un decor devenu
   invisible. Les fichiers sont toujours dans frontend/ et l'histoire dans git.

   Reste le lettrage plat - le meme PNG que le filigrane de la section 11. */

.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--bg-haut) 0, var(--bg) 700px);
  opacity: 1;
  transition: opacity 520ms ease;
}

.boot-splash.is-partant {
  opacity: 0;
  pointer-events: none;
}

/* Une image, plus un canvas: la largeur suffit, la hauteur suit.

   Gris COMPLET, et non partiel. Le lettrage d'origine est bleu et chrome; a
   60 % de desaturation il en restait assez pour que l'ecran d'accueil soit le
   seul endroit bleu d'une application devenue verte. En gris il ne concurrence
   aucune couleur du systeme - c'est le traitement qu'Immo-Core applique a sa
   photo de villa, et pour la meme raison. */
.boot-splash-model {
  width: min(560px, 74vw);
  height: auto;
  filter: grayscale(1) contrast(0.92);
  opacity: 0.82;
}

/* Le contenu du panneau passe devant le filigrane, qui est un ::before. */
.chat-panel > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .boot-splash {
    transition: none;
  }
}

/* Sur telephone, 30 px de titre en Archivo ne laissent la place a rien
   d'autre sur la ligne. Le heros reste un heros, en plus mesure. */
@media (max-width: 760px) {
  .chat-header h2 {
    font-size: 20px;
  }

  .brand h1 {
    font-size: 22px;
  }
}

/* ---------- 15. Restes verts du tout premier habillage ---------- */
/* styles.css porte encore quatorze valeurs en dur en rgb(37, 211, 102) - le
   vert d'origine. La refonte bleue du matin les avait laissees passer parce
   qu'elles vivent sur des composants qu'elle ne redefinissait pas. Les douze
   premieres sont couvertes par les regles ci-dessus; ces deux-la ne l'etaient
   pas, et se voyaient. */

/* Le halo vert autour de chaque pastille de conversation. */
.conversation-icon {
  box-shadow: none;
}

/* Le cadre du partage d'ecran. Le fond reste sombre - c'est une surface video,
   une image y est plus juste sur du noir - mais le liseré vert et sa lueur
   passent au trait du systeme. Panneau masque par app.js hors partage. */
.screen-stage {
  background: #14171b;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  box-shadow: none;
}

.screen-empty {
  color: var(--text-muted);
}

.screen-frame-title strong {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.screen-frame-title span {
  color: var(--text-muted);
  font-size: 12px;
}