/* ==========================================================================
   WHATSAPP DANS CONVERSATIONS — 21/10/2026
   L'onglet « WhatsApp » de Conversations, dessine comme WhatsApp : la
   discussion en bulles, la saisie en bas, le QR a scanner quand le poste le
   demande. Le code est dans whatsapp.js ; retirer ces deux fichiers de
   index.html rend l'onglet tel qu'il etait.

   Tout est prefixe « wa- » : .bulle, .fil, .saisie, .vide sont deja pris
   dans app.css et s'y appliqueraient en silence.
   ========================================================================== */

.wa-cadre {
  --wa-fond: #0b141a;
  --wa-motif: rgba(255, 255, 255, .025);
  --wa-entete: #202c33;
  --wa-recu: #202c33;
  --wa-envoye: #005c4b;
  --wa-txt: #e9edef;
  --wa-txt-2: #8696a0;
  --wa-vert: #00a884;
  --wa-saisie: #2a3942;
  --wa-jour: #182229;
  --wa-echec: #f15c6d;
  --wa-coche: #53bdeb;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 520px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--wa-fond);
  color: var(--wa-txt);
  border: 1px solid var(--bord, rgba(255, 255, 255, .08));
}

:root[data-theme="clair"] .wa-cadre {
  --wa-fond: #efeae2;
  --wa-motif: rgba(0, 0, 0, .03);
  --wa-entete: #f0f2f5;
  --wa-recu: #ffffff;
  --wa-envoye: #d9fdd3;
  --wa-txt: #111b21;
  --wa-txt-2: #667781;
  --wa-saisie: #ffffff;
  --wa-jour: #ffffff;
  --wa-echec: #d42e44;
  --wa-coche: #53bdeb;
}

/* --- L'en-tete ------------------------------------------------------------ */

.wa-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--wa-entete);
  flex: none;
}
.wa-ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
  background: var(--wa-vert);
  color: #fff;
  flex: none;
}
.wa-qui { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wa-qui b {
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-qui span { font-size: 13px; color: var(--wa-txt-2); }
.wa-entete-actions { display: flex; gap: 6px; flex: none; }
.wa-rond {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--wa-txt-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.wa-rond:hover { background: rgba(127, 127, 127, .15); color: var(--wa-txt); }
.wa-rond svg { width: 22px; height: 22px; }

/* --- Le bandeau : l'etat du WhatsApp Web du poste ------------------------- */

.wa-bandeau:empty { display: none; }
.wa-bandeau {
  flex: none;
  padding: 10px 16px;
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--wa-jour);
  color: var(--wa-txt);
  border-bottom: 1px solid rgba(127, 127, 127, .18);
}
.wa-bandeau.wa-alerte { border-left: 4px solid #f5a623; }
.wa-bandeau.wa-panne { border-left: 4px solid var(--wa-echec); }
.wa-qr {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 8px 0;
  flex-wrap: wrap;
}
.wa-qr img {
  width: 228px;
  height: 228px;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  image-rendering: pixelated;
  flex: none;
}
.wa-qr ol { margin: 6px 0 0 18px; padding: 0; }
.wa-qr li { margin: 3px 0; }
.wa-qr-titre { font-size: 17px; font-weight: 500; }

/* --- Le fil ----------------------------------------------------------------- */

.wa-fil {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 6% 10px;
  background-color: var(--wa-fond);
  background-image:
    radial-gradient(var(--wa-motif) 1.2px, transparent 1.2px),
    radial-gradient(var(--wa-motif) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wa-jour {
  align-self: center;
  margin: 10px 0 8px;
  padding: 5px 12px;
  font-size: 12.5px;
  border-radius: 8px;
  background: var(--wa-jour);
  color: var(--wa-txt-2);
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.wa-msg {
  max-width: min(65%, 560px);
  padding: 6px 8px 8px 9px;
  border-radius: 8px;
  font-size: 14.2px;
  line-height: 1.38;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  position: relative;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 2px;
}
.wa-msg.wa-recu { align-self: flex-start; background: var(--wa-recu); }
.wa-msg.wa-moi { align-self: flex-end; background: var(--wa-envoye); }
/* La queue de la bulle, sur la premiere d'une serie seulement — comme
   WhatsApp. */
.wa-msg.wa-tete { margin-top: 8px; }
.wa-msg.wa-tete.wa-recu { border-top-left-radius: 0; }
.wa-msg.wa-tete.wa-moi { border-top-right-radius: 0; }
.wa-msg.wa-tete.wa-recu::before,
.wa-msg.wa-tete.wa-moi::before {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 13px;
}
.wa-msg.wa-tete.wa-recu::before {
  left: -8px;
  background: linear-gradient(to bottom left, var(--wa-recu) 50%, transparent 50%);
}
.wa-msg.wa-tete.wa-moi::before {
  right: -8px;
  background: linear-gradient(to bottom right, var(--wa-envoye) 50%, transparent 50%);
}
.wa-meta {
  float: right;
  margin: 6px 0 -4px 12px;
  font-size: 11px;
  color: var(--wa-txt-2);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  position: relative;
  top: 4px;
}
.wa-meta svg { width: 16px; height: 11px; }
.wa-coches { color: var(--wa-txt-2); }
.wa-msg.wa-echec { outline: 1px solid var(--wa-echec); }
.wa-echec-texte {
  display: block;
  clear: both;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--wa-echec);
  white-space: normal;
}
.wa-echec-gestes { display: flex; gap: 8px; margin-top: 6px; }
.wa-lien {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wa-vert);
  cursor: pointer;
}
.wa-rien {
  margin: auto;
  text-align: center;
  color: var(--wa-txt-2);
  max-width: 360px;
  font-size: 14px;
  line-height: 1.5;
}
.wa-rien b { display: block; font-size: 17px; color: var(--wa-txt); margin-bottom: 6px; }

/* --- La saisie -------------------------------------------------------------- */

.wa-saisie {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px;
  background: var(--wa-entete);
}
.wa-saisie textarea {
  /* border-box : ajuster() pose la hauteur que rend scrollHeight, remplissage
     compris ; en content-box il s'ajoutait une seconde fois. */
  box-sizing: border-box;
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  max-height: 140px;
  min-height: 42px;
  background: var(--wa-saisie);
  color: var(--wa-txt);
}
.wa-saisie textarea::placeholder { color: var(--wa-txt-2); }
.wa-envoyer {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--wa-vert);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.wa-envoyer:disabled { opacity: .45; cursor: default; }
.wa-envoyer svg { width: 22px; height: 22px; }

/* --- Nouvelle discussion ---------------------------------------------------- */

.wa-nouveau {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.wa-nouveau input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
  background: var(--wa-saisie);
  color: var(--wa-txt);
}

/* La liste de gauche quand il n'y a encore aucune discussion. */
.wa-liste-vide {
  padding: 28px 20px;
  text-align: center;
  color: var(--txt-2, #8696a0);
  line-height: 1.5;
}
.wa-liste-vide button { margin-top: 14px; }

/* --- Etroit : la discussion prend la hauteur de l'ecran -------------------- */

@media (max-width: 980px) {
  .wa-cadre { height: 72vh; min-height: 420px; }
}
@media (max-width: 700px) {
  .wa-cadre { border-radius: 0; height: 78vh; }
  .wa-fil { padding: 10px 10px 6px; }
  .wa-msg { max-width: 85%; }
  .wa-qr img { width: 200px; height: 200px; }
}

/* --- La liste des discussions, a gauche (21/10/2026) -----------------------
   Dessinee comme la colonne de WhatsApp Web : l'en-tete « Discussions », une
   ligne par discussion separee d'un filet, la pastille grise, le nom, l'heure
   (verte quand c'est aujourd'hui), le dernier message. Pas de depliage. */

.gr-liste:has(.wa-liste) {
  background: var(--wa-l-fond);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bord, rgba(255, 255, 255, .08));
  padding: 0;
  --wa-l-fond: #111b21;
  --wa-l-tete: #202c33;
  --wa-l-survol: #202c33;
  --wa-l-choisi: #2a3942;
  --wa-l-filet: #222d34;
  --wa-l-txt: #e9edef;
  --wa-l-txt-2: #8696a0;
  --wa-l-ava: #6a7175;
  --wa-vert: #00a884;
}
:root[data-theme="clair"] .gr-liste:has(.wa-liste) {
  --wa-l-fond: #ffffff;
  --wa-l-tete: #f0f2f5;
  --wa-l-survol: #f5f6f6;
  --wa-l-choisi: #f0f2f5;
  --wa-l-filet: #e9edef;
  --wa-l-txt: #111b21;
  --wa-l-txt-2: #667781;
  --wa-l-ava: #dfe5e7;
}
.gr-liste:has(.wa-liste) > .gr-defile { padding: 0; }
.wa-liste {
  display: flex;
  flex-direction: column;
  color: var(--wa-l-txt);
}
.wa-liste-tete {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 16px 16px 12px;
  background: var(--wa-l-fond);
  font-size: 20px;
  font-weight: 700;
}
.wa-ligne {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 0 0 13px;
  height: 72px;
  cursor: pointer;
  min-width: 0;
  background: var(--wa-l-fond);
}
.wa-ligne:hover { background: var(--wa-l-survol); }
.wa-ligne.wa-choisi,
.wa-ligne.selectionne { background: var(--wa-l-choisi); }
.wa-ligne .wa-ava {
  flex: none;
  width: 49px;
  height: 49px;
  font-size: 16px;
  background: var(--wa-l-ava);
  color: #fff;
}
.wa-ligne-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
  align-self: stretch;
  padding-right: 15px;
  border-bottom: 1px solid var(--wa-l-filet);
}
.wa-ligne:last-child .wa-ligne-txt { border-bottom: 0; }
.wa-ligne-haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.wa-ligne-haut b {
  font-weight: 400;
  font-size: 17px;
  min-width: 0;
}
.wa-ligne-quand {
  flex: none;
  font-size: 12px;
  color: var(--wa-l-txt-2);
}
.wa-ligne-quand.wa-aujourdhui { color: var(--wa-vert); }
.wa-ligne-apercu {
  font-size: 14px;
  color: var(--wa-l-txt-2);
}

/* ==========================================================================
   COMME WHATSAPP DESKTOP — 21-22/10/2026
   Enzo : « que ça ressemble à mon vrai WhatsApp », puis « sombre si mon
   Larry est en sombre, clair s'il est en clair ». Les teintes sont celles de
   WhatsApp dans ses deux themes ; le choix suit data-theme, comme le reste
   de Larry. La colonne et le fil se touchent, sous une barre grise de
   fenetre, comme une seule fenetre WhatsApp.
   La barre de recherche du haut n'y est pas : la recherche est dans la
   colonne. Le champ du code d'une conversation privee, lui, reste.
   ========================================================================== */

.gr-echanges.ech-wa .ech-barre > .rangee { display: none; }
/* Le champ du code reste REPLIÉ tant qu'on n'a pas cliqué une conversation
   fermée (demanderCodePrive pose « .ouvert ») : replié, la carte n'affichait
   qu'une bande grise vide en haut de l'écran (Enzo, 22/10/2026). Elle ne
   paraît donc que le temps où le champ est déplié. */
.gr-echanges.ech-wa .ech-barre:not(:has(#verrou-prive.ouvert)) { display: none; }

/* Les teintes de la colonne et de la barre, sombre par defaut. */
.gr-echanges.ech-wa .gr-ile {
  --wa-l-fond: #111b21;
  --wa-l-tete: #111b21;
  --wa-l-survol: #202c33;
  --wa-l-choisi: #2a3942;
  --wa-l-filet: #222d34;
  --wa-l-txt: #e9edef;
  --wa-l-txt-2: #8696a0;
  --wa-l-cherche: #202c33;
  --wa-l-cherche-txt: #d1d7db;
  --wa-l-barre: #202c33;
  --wa-l-barre-txt: #aebac1;
  --wa-l-bord: #2f3b43;
}
:root[data-theme="clair"] .gr-echanges.ech-wa .gr-ile {
  --wa-l-fond: #ffffff;
  --wa-l-tete: #ffffff;
  --wa-l-survol: #f5f6f6;
  --wa-l-choisi: #f0f2f5;
  --wa-l-filet: #e9edef;
  --wa-l-txt: #111b21;
  --wa-l-txt-2: #667781;
  --wa-l-cherche: #f0f2f5;
  --wa-l-cherche-txt: #111b21;
  --wa-l-barre: #e9edef;
  --wa-l-barre-txt: #3b4a54;
  --wa-l-bord: #d1d7db;
}
.gr-echanges.ech-wa .gr-liste:has(.wa-liste) {
  --wa-l-fond: inherit;
}
.gr-liste:has(.wa-liste) { background: var(--wa-l-fond); }

/* La barre grise, tout en haut de la fenetre WhatsApp. */
.wa-barre-haut {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  background: var(--wa-l-barre);
  color: var(--wa-l-barre-txt);
  font-size: 13px;
  border-radius: 14px 14px 0 0;
  border: 1px solid var(--wa-l-bord);
  border-bottom: 0;
  flex: none;
}
.wa-barre-haut svg { width: 18px; height: 18px; }

/* Une seule fenetre : pas d'ecart entre la colonne et le fil, et les coins
   du haut appartiennent a la barre. */
.gr-page .gr-corps:has(.wa-liste) { gap: 0; }
.gr-page .gr-corps:has(.wa-liste) > .gr-liste {
  border-radius: 0 0 0 14px;
  border: 1px solid var(--wa-l-bord);
  border-top: 0;
}
.gr-page .gr-corps:has(.wa-liste) > .wa-cadre {
  border-radius: 0 0 14px 0;
  border: 1px solid var(--wa-l-bord);
  border-top: 0;
  border-left: 1px solid var(--wa-l-filet);
}

.wa-liste-tete {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px 20px;
  font-size: 22px;
  font-weight: 500;
}
.wa-liste-nouveau {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #1daa61;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.wa-liste-nouveau svg { width: 20px; height: 20px; }
.wa-liste-nouveau:hover { background: #179652; }
.wa-liste-cherche {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 12px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 40px;
  border-radius: 20px;
  background: var(--wa-l-cherche);
  color: var(--wa-l-txt-2);
}
.wa-liste-cherche svg { width: 20px; height: 20px; flex: none; }
.wa-liste-cherche input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--wa-l-cherche-txt);
  font: inherit;
  font-size: 15px;
  padding: 0;
}
.wa-liste-cherche input::placeholder { color: var(--wa-l-txt-2); }
.wa-ligne[hidden] { display: none; }
.wa-ligne .wa-ava { font-weight: 500; font-size: 18px; }
.wa-ligne-haut b { font-size: 16px; }
.wa-liste-vide { padding: 24px 20px; color: var(--wa-l-txt-2); font-size: 14px; }

/* La photo de profil, ronde, a la place des initiales. */
.wa-ava.wa-ava-photo { background: transparent; overflow: hidden; padding: 0; }
.wa-ava.wa-ava-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dans un groupe : qui parle, en tete de sa serie de bulles. */
.wa-auteur {
  display: block;
  font-size: 12.8px;
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Le nom porte sa propre couleur : la grammaire de l'ile peint ses <b> en
   blanc, et en theme clair ils disparaissaient sur la colonne blanche. */
.wa-ligne-haut b,
.wa-liste-tete { color: var(--wa-l-txt); }
/* … et en theme clair, app.css (« .page:has(> .gr-page.gr-echanges) .gr-corps
   > .gr-liste.volet-liste :is(h2, b, strong) ») les remet en blanc pour l'ile
   sombre. La colonne WhatsApp a son propre fond : on reprend la main, avec un
   selecteur de meme forme et plus precis. */
:root[data-theme="clair"] .page:has(> .gr-page.gr-echanges) .gr-corps > .gr-liste.volet-liste .wa-ligne-haut b {
  color: var(--wa-l-txt);
}


/* --- Les pieces jointes (22/10/2026) ---------------------------------------
   Une photo tient la largeur de la bulle, comme dans WhatsApp ; une note
   vocale et un document sont une carte. Voir web/whatsapp.js, pieceHtml(). */

.wa-piece { display: block; }
.wa-photo, .wa-autocollant {
  margin: -3px -5px 4px -6px;
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
  background: rgba(127, 127, 127, .15);
  min-height: 120px;
  min-width: 200px;
}
.wa-autocollant { background: none; min-height: 0; min-width: 0; max-width: 160px; }
.wa-photo img, .wa-autocollant img {
  display: block;
  width: 100%;
  max-width: 330px;
  max-height: 360px;
  object-fit: cover;
}
.wa-autocollant img { object-fit: contain; }
.wa-image-attente {
  display: block;
  height: 160px;
  background: linear-gradient(90deg, transparent, rgba(127, 127, 127, .12), transparent);
  background-size: 200% 100%;
  animation: wa-attente 1.4s linear infinite;
}
@keyframes wa-attente { to { background-position: -200% 0; } }
.wa-image-prete { min-height: 0; }
.wa-video-marque {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -46px 0 14px 8px;
  position: relative;
  color: #fff;
  font-size: 12px;
  pointer-events: none;
}
.wa-video-marque svg { width: 30px; height: 30px; }
.wa-vocal, .wa-doc, .wa-photo-absente {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  padding: 8px 10px;
  margin: 0 0 4px;
  border-radius: 6px;
  background: rgba(127, 127, 127, .12);
  white-space: normal;
}
.wa-vocal svg, .wa-doc svg { width: 26px; height: 26px; flex: none; color: var(--wa-vert); }
.wa-vocal > span, .wa-doc > span { display: flex; flex-direction: column; min-width: 0; }
.wa-vocal small, .wa-doc small, .wa-photo-absente small {
  font-size: 12px;
  color: var(--wa-txt-2);
}
.wa-photo-absente { flex-direction: column; align-items: flex-start; gap: 2px; }

.wa-visionneuse {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.wa-visionneuse img { max-width: 94vw; max-height: 92vh; border-radius: 4px; }
.wa-visionneuse .wa-rond { position: absolute; top: 16px; right: 16px; color: #fff; }


/* --- Les infos de la discussion (22/10/2026) -------------------------------
   Le volet de droite de WhatsApp : il couvre le fil, l'en-tete reste. */

.wa-cadre { position: relative; }
.wa-entete-qui {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  border-radius: 8px;
}
.wa-entete-qui:focus-visible { outline: 2px solid var(--wa-vert); outline-offset: 2px; }
.wa-infos {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100%);
  z-index: 5;
  overflow-y: auto;
  background: var(--wa-fond);
  border-left: 1px solid rgba(127, 127, 127, .2);
  box-shadow: -6px 0 18px rgba(0, 0, 0, .18);
}
.wa-infos-entete {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--wa-entete);
  font-size: 16px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.wa-infos-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 16px 20px;
  background: var(--wa-recu);
  margin-bottom: 8px;
  text-align: center;
}
.wa-infos-portrait .wa-ava { width: 120px; height: 120px; font-size: 40px; }
.wa-infos-portrait .wa-ava img { width: 100%; height: 100%; }
.wa-infos-portrait b { font-size: 20px; font-weight: 500; }
.wa-infos-portrait > span:last-child { color: var(--wa-txt-2); font-size: 14px; }
.wa-infos-bloc {
  background: var(--wa-recu);
  padding: 14px 18px;
  margin-bottom: 8px;
  font-size: 14px;
}
.wa-infos-bloc h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--wa-txt-2);
  display: flex;
  justify-content: space-between;
}
.wa-infos-desc { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.wa-infos-vide { color: var(--wa-txt-2); line-height: 1.45; }
.wa-infos-medias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.wa-infos-medias .wa-photo { margin: 0; min-width: 0; min-height: 0; aspect-ratio: 1; }
.wa-infos-medias .wa-photo img { width: 100%; height: 100%; max-height: none; }
.wa-infos-medias .wa-image-attente { height: 100%; }
.wa-infos-doc { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-width: 0; }
.wa-infos-doc svg { width: 20px; height: 20px; flex: none; color: var(--wa-vert); }
.wa-membre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  margin: 0 -6px;
  border-radius: 8px;
}
.wa-membre-ouvre { cursor: pointer; }
.wa-membre-ouvre:hover, .wa-membre-ouvre:focus-visible { background: rgba(127, 127, 127, .12); outline: none; }
.wa-membre-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wa-membre-txt b { font-weight: 400; font-size: 15px; }
.wa-membre-txt span { font-size: 13px; color: var(--wa-txt-2); }
.wa-admin {
  flex: none;
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--wa-vert);
  background: rgba(0, 168, 132, .14);
}
.wa-infos-maj { margin: 10px 0 0; font-size: 12px; color: var(--wa-txt-2); }