/* ═══════════════════════════════════════════════════════════════════════════
   LES DEUX BOÎTES FLOTTANTES — LEUR COULEUR, ET LEUR COHABITATION
   ═══════════════════════════════════════════════════════════════════════════

   Trois demandes du propriétaire, tenues ici :

     1. les deux lanceurs prennent un dégradé, comme « Nouveau prospect » dans
        la prospection, mais PAS LE MÊME l'un que l'autre ;
     2. quand une boîte est déjà ouverte, la seconde cesse de se poser dessus,
        et aucune des deux ne mange la barre des onglets ;
     3. les deux boîtes étaient blanches sur blanc — rien ne séparait l'en-tête
        du corps.

   ── Pourquoi une feuille à part ────────────────────────────────────────────

   Le lanceur du chat et sa boîte sont habillés dans `finitions.css` ; ceux de
   Lisa dans `lisa.css`. La COHABITATION, elle, n'appartient à aucune des deux :
   elle est une règle de couplage, et une règle de couplage écrite en deux
   endroits dérive au premier changement — l'une des deux moitiés se déplace,
   l'autre reste, et les boîtes se recouvrent de nouveau sans que rien ne le
   signale. Elle est donc écrite UNE fois, dans une feuille chargée après les
   deux autres, qui ne contient que cela et les deux dégradés.

   ── Les deux dégradés, et pourquoi ceux-là ─────────────────────────────────

   Aucun n'est inventé : les deux paraissent déjà tels quels dans les feuilles
   de la maison.

   Lisa prend l'ARDOISE DU BANDEAU (`--bandeau-lisa`, `finitions.css`). C'est
   littéralement la sienne : son nom est écrit dessus en haut de chaque écran.

   Le chat prend le TURQUOISE de `.btn-primary`, c'est-à-dire exactement le
   dégradé de « Nouveau prospect » que le propriétaire donnait en exemple.

   Les deux sont sombres, et c'est délibéré plutôt que décoratif : chacun des
   deux lanceurs porte une PASTILLE D'ÉTAT — l'éveil de Lisa en vert, orange ou
   rouge, le non-lu du chat — et une pastille de huit pixels posée sur un fond
   clair ne se voit pas. Un anneau clair l'entoure pour la même raison, ce qui
   évite d'avoir à retoucher les couleurs d'état elles-mêmes : la forme règle
   le contraste, la couleur garde son sens.

   ── L'en-tête : le troisième degré, et non le premier ──────────────────────

   Les deux en-têtes passent au DEGRÉ 3 des bandeaux de la maison, l'ardoise
   claire des titres de bloc, et non au degré 1 qui coiffe les titres d'onglet
   et de fiche. Le degré 1 aurait obligé à reprendre l'encre de tout ce que
   l'en-tête porte — titre, retour, boutons d'appel, fermeture — pour du blanc,
   et une boîte de 380 pixels n'a pas le rang d'une fiche. Le degré 3 garde
   l'encre sombre : il suffit à séparer l'en-tête du corps, qui était la
   plainte.                                                                  */

:root {
  /* Les deux boîtes sont au même coin, à la même taille, depuis toujours :
     380 × 560 à 22 pixels du bord. Ces valeurs sont REPRISES de `finitions.css`
     et de `lisa.css`, elles ne sont pas décidées ici. */
  --boites-bas: 22px;
  --boites-ecart: 10px;

  /* Ces deux-là sont MESURÉES par `js/chatInterne.js`, qui les repose à chaque
     redimensionnement. Les valeurs écrites ici ne sont que le REPLI, pour le
     cas où ce script n'est pas monté — un compte sans le droit de participer
     au chat. Elles sont relevées le 17/10/2026 sur le poste du laboratoire :
     bandeau 46 px, barre des onglets 47 px, intervalle 8 ; lanceur du chat à
     112 px du bas, intervalle 8.

     Pourquoi mesurer : les hauteurs en cause vivent dans `main.css`, qui ne
     nous appartient pas, et dépendent de la police comme du rembourrage. Un
     chiffre recopié cesserait de suivre au premier changement, et la boîte
     mordrait sur les onglets sans que rien ne le signale. */
  --boites-plafond: 101px;
  --boites-seuil: 120px;

  /* La pile, quand les DEUX sont ouvertes : tout l'espace entre le plafond et
     le bas habituel, partagé en deux parts égales. */
  --boites-pile: calc(100vh - var(--boites-plafond) - var(--boites-bas));
  --boites-demi: calc((var(--boites-pile) - var(--boites-ecart)) / 2);
}

/* ── 1. Les deux lanceurs ────────────────────────────────────────────────── */

#lisa-appel {
  background: var(--bandeau-lisa);
  border-color: #16293f;
  color: #fff;
  box-shadow: 0 2px 12px rgba(11, 23, 36, .28);
}
#lisa-appel:hover { background: linear-gradient(100deg, #16293f 0%, #1d3550 58%, #24415f 100%); }

#chat-appel {
  background: linear-gradient(150deg, #12a89b, #0a6b63);
  border-color: #0a6b63;
  color: #fff;
  box-shadow: 0 2px 12px rgba(10, 107, 99, .28);
}
#chat-appel:hover { background: linear-gradient(150deg, #2de0ce, #12a89b); color: #0b1724; }

/* L'anneau clair dont parle l'en-tête : il rend les pastilles d'état lisibles
   sur un fond sombre sans toucher à leurs couleurs, qui portent le sens. */
#lisa-appel .lisa-pastille,
#chat-appel .chat-pastille {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}

/* Ces deux teintes ne se distinguaient PAS l'une de l'autre : le bleu pâle du
   repos et l'éclat du non-lu ont la même luminance à deux millièmes près, soit
   1,00 contre 1 entre eux, et la bascule ne se jouait que sur la nuance, sur un
   disque de huit pixels. L'éclat se détachait mal du lanceur lui-même (1,78) :
   `main.css` le réserve aux fonds sombres, et ce bouton est de sa famille.
   C'est désormais la PRÉSENCE du point qui porte la nouvelle — `chatInterne.js`
   le masque quand il n'y a rien à lire — et sa teinte suit celle que le bouton
   prend déjà : blanche sur le turquoise du repos (2,96 au bout clair, 6,37 au
   bout sombre), encre sombre au survol comme le texte du bouton (10,90 et 6,11),
   car le blanc y retomberait à 1,66, plus bas qu'au repos. L'anneau du bloc
   ci-dessus devient sombre pour le seul chat : le bord du point est alors tracé
   quelle que soit sa teinte, et c'est lui qui le pose sur le dégradé. */
#chat-appel .chat-pastille { box-shadow: 0 0 0 1px rgba(11, 23, 36, .55); }
#chat-appel[data-nonlus="oui"] .chat-pastille { background: #fff; }
#chat-appel:hover[data-nonlus="oui"] .chat-pastille { background: #0b1724; }
#chat-appel .chat-compte {
  background: #fff;
  color: #0b1724;
}
#chat-appel:hover .chat-compte {
  background: #0b1724;
  color: #fff;
}

/* ── 2. Les deux en-têtes ────────────────────────────────────────────────── */

.chat-entete,
.lisa-entete {
  background: linear-gradient(120deg, #aebbc9 0%, #b3bfcc 55%, #a8b5c4 100%);
  border-bottom: 1px solid rgba(18, 168, 155, .55);
  border-radius: 13px 13px 0 0;
}
/* Tout ce que l'en-tête porte prend l'encre sombre : le gris de repos des
   boutons tombait à moins de trois contre un sur cette ardoise claire. */
.chat-entete > *,
.lisa-entete > * { color: var(--color-text); }

/* ── 3. Une seule boîte ouverte : les deux lanceurs restent atteignables ──── */

/* C'était le défaut constaté : la boîte se posait exactement sur le coin où
   vivent les deux boutons, de sorte qu'ouvrir la première interdisait
   d'ouvrir la seconde. Les boutons n'étaient pas cachés — ils étaient
   couverts, ce qui revient au même pour qui veut cliquer.

   Chacune des deux remonte donc au-dessus du lanceur le plus haut, et se
   borne au plafond. Sa hauteur de 560 pixels est conservée : elle ne devient
   pleine que lorsque les deux sont ouvertes, ce qui est le seul cas où le
   propriétaire l'a demandé. */

#chat-boite,
#lisa-boite {
  bottom: var(--boites-seuil);
  max-height: calc(100vh - var(--boites-plafond) - var(--boites-seuil));
}

/* ── 4. Les deux ouvertes : moitié-moitié, et les boutons peuvent disparaître */

/* La règle : le chat monte, Lisa reste en bas. Ce n'est pas arbitraire — le
   lanceur du chat est posé au-dessus de celui de Lisa, de sorte que chaque
   boîte reste du côté du bouton qui l'ouvre.

   La pile prend tout l'espace entre le plafond et le bas habituel, en DEUX
   PARTS ÉGALES. Recouvrir les lanceurs est ici sans conséquence, les deux
   boîtes étant déjà ouvertes : c'est l'arbitrage du propriétaire, et c'est ce
   qui permet aux deux moitiés d'être hautes.

   `:has()` plutôt qu'un état posé en JavaScript : les deux boîtes vivent dans
   deux fichiers qui ne se connaissent pas, et leur faire déclarer un état
   commun sur `body` aurait créé entre elles la dépendance que cette feuille
   existe justement pour éviter. Là où `:has()` manque, la règle entière est
   ignorée et l'on retrouve deux boîtes de 560 pixels posées au-dessus des
   lanceurs — l'une sur l'autre, mais toutes deux atteignables par la
   règle 3 : un défaut d'aspect, pas une panne. */

body:has(#chat-boite[data-ouverte="oui"]):has(#lisa-boite[data-ouverte="oui"]) :is(#chat-boite, #lisa-boite) {
  height: var(--boites-demi);
  max-height: var(--boites-demi);
}
body:has(#chat-boite[data-ouverte="oui"]):has(#lisa-boite[data-ouverte="oui"]) #lisa-boite {
  bottom: var(--boites-bas);
}
body:has(#chat-boite[data-ouverte="oui"]):has(#lisa-boite[data-ouverte="oui"]) #chat-boite {
  bottom: calc(var(--boites-bas) + var(--boites-demi) + var(--boites-ecart));
}

/* Sur un écran étroit, `finitions.css` recolle la boîte du chat à 12 pixels du
   bas. La pile se recalcule sur cette base, faute de quoi la moitié haute
   flotterait à dix pixels de l'autre. */
@media (max-width: 480px) {
  :root { --boites-bas: 12px; }
}