/**
 * ☠️ W3 — LA BULLE DE SUPPORT DES QUATRE SITES (ordre du fondateur, 20/09/2026).
 *
 * « bulle fixe en bas à droite comme l'icone de mute/volume de la musique qui doit etre present sur tous
 * nos sites internet en bas à gauche fixe ».
 *
 * CETTE FEUILLE EST AUTO-HÉBERGÉE et copiée À L'OCTET sur les quatre sites (`scripts/sync-*-assets.js`).
 * Aucun hôte tiers, aucune police distante : la CSP des sites est `style-src 'self' 'unsafe-inline'`, et
 * cette feuille arrive par `<link>`, jamais en ligne.
 *
 * ☠️ LES TROIS VOISINS DU BAS DE PAGE, ET QUI OCCUPE QUEL COIN :
 *   — le BOUTON DE SON (`#mm-ambient-toggle`, `ambient.js`) : bas à GAUCHE, `z-index:9000` ;
 *   — la BULLE DE SUPPORT (ici) : bas à DROITE, le MÊME `z-index` ;
 *   — le BANDEAU DE CONSENTEMENT (`#mm-consent`, SITES-LANGUE L3) : pleine largeur, tout en bas. Il publie
 *     sa hauteur réelle dans `--mm-consent-h` (`site-header.js`) — les deux boutons s'appuient dessus, donc
 *     la bulle ne le RECOUVRE jamais, quelle que soit la longueur du texte dans les six langues.
 *
 * ☠️ EN RTL, LES DEUX COINS S'ÉCHANGENT : la bulle passe à gauche et le son passe à droite (W3, en toutes
 * lettres). La règle du son vit ICI, et non dans `ambient.js`, pour une raison précise : `ambient.js` est
 * comparé À L'OCTET entre les quatre sites par `sonQuatreSites.test.ts`, et c'est cette feuille-ci qui
 * possède le contrat « qui occupe quel coin ». Une seule ligne, un seul endroit où le lire.
 */

[dir="rtl"] #mm-ambient-toggle { left: auto; right: 18px; }

/* La bulle. Elle est DESSINÉE tout de suite ; elle n'APPELLE rien avant le premier clic. */
#mm-support-bulle {
  position: fixed;
  right: 18px;
  bottom: calc(18px + var(--mm-consent-h, 0px));
  z-index: 9000;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .18);
  background: rgba(13, 13, 14, .82);
  color: #f2f2f4;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .40);
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
[dir="rtl"] #mm-support-bulle { right: auto; left: 18px; }
#mm-support-bulle:hover { transform: scale(1.08); border-color: rgba(132, 50, 255, .65); }
#mm-support-bulle:focus-visible { outline: 3px solid #8432FF; outline-offset: 3px; }

/* ☠️ Comme le bouton de son : elle s'efface tant que le menu mobile ou une fenêtre est ouvert. */
html.mm-menu-ouvert #mm-support-bulle,
html.mm-fenetre-ouverte #mm-support-bulle { opacity: 0; pointer-events: none; }

/* La fenêtre de discussion. 320 px de large mini, et jamais plus haute que l'écran. */
#mm-support-fenetre {
  position: fixed;
  right: 18px;
  bottom: calc(18px + var(--mm-consent-h, 0px));
  z-index: 9001;
  width: min(380px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 36px - var(--mm-consent-h, 0px)));
  display: flex; flex-direction: column;
  /* ☠️ ARRONDIS (fusion du 20/09/2026) : la fenêtre est un BLOC — elle passe par l'échelle des rayons du
     fondateur (`--r-card`, 16 px depuis l'ordre du 20/09 — ARRONDIS-ET-KONGOSSAS), comme toute carte du site.
     Le repli est OBLIGATOIRE hors de site.css, et il vaut EXACTEMENT le jeton (`arrondisEchelle` ③). */
  border-radius: var(--r-card, 16px);
  border: 1px solid rgba(255, 255, 255, .14);
  background: #131316; color: #f2f2f4;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: .95rem; line-height: 1.5;
}
[dir="rtl"] #mm-support-fenetre { right: auto; left: 18px; }
@media (max-width: 420px) {
  #mm-support-fenetre { right: 8px; left: 8px; width: auto; }
}

/* ☠️ CLAIR ET SOMBRE. Les sites suivent le thème du visiteur ; la fenêtre aussi. */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) #mm-support-fenetre { background: #ffffff; color: #17171b; border-color: rgba(0, 0, 0, .12); }
  html:not([data-theme="dark"]) .mm-support-bulle-moi { background: #8432FF; color: #fff; }
  html:not([data-theme="dark"]) .mm-support-bulle-mogo { background: #f1f0f5; color: #17171b; }
  html:not([data-theme="dark"]) .mm-support-champ input,
  html:not([data-theme="dark"]) .mm-support-champ textarea { background: #fff; color: #17171b; border-color: rgba(0, 0, 0, .18); }
  /* ☠️ La barre de défilement suit le thème : une piste claire sur fond blanc, sinon elle DISPARAÎT — et
     une barre qu'on ne voit pas fait croire qu'il n'y a rien à faire défiler. */
  html:not([data-theme="dark"]) #mm-support-fenetre { scrollbar-color: rgba(132, 50, 255, .55) rgba(0, 0, 0, .08); }
  html:not([data-theme="dark"]) #mm-support-fenetre::-webkit-scrollbar-track,
  html:not([data-theme="dark"]) #mm-support-fenetre ::-webkit-scrollbar-track { background: rgba(0, 0, 0, .08); }
  html:not([data-theme="dark"]) #mm-support-fenetre::-webkit-scrollbar-thumb,
  html:not([data-theme="dark"]) #mm-support-fenetre ::-webkit-scrollbar-thumb { background: rgba(132, 50, 255, .55); }
}
html[data-theme="light"] #mm-support-fenetre { background: #ffffff; color: #17171b; border-color: rgba(0, 0, 0, .12); }
html[data-theme="light"] #mm-support-fenetre { scrollbar-color: rgba(132, 50, 255, .55) rgba(0, 0, 0, .08); }
html[data-theme="light"] #mm-support-fenetre::-webkit-scrollbar-track,
html[data-theme="light"] #mm-support-fenetre ::-webkit-scrollbar-track { background: rgba(0, 0, 0, .08); }
html[data-theme="light"] #mm-support-fenetre::-webkit-scrollbar-thumb,
html[data-theme="light"] #mm-support-fenetre ::-webkit-scrollbar-thumb { background: rgba(132, 50, 255, .55); }

/* ☠️ RÈGLE DU FONDATEUR (20/09) : deux textes de longueur variable ne partagent JAMAIS une ligne.
   L'en-tête porte le titre sur SA ligne, bornée à une ligne avec ellipse ; le bouton de fermeture est une
   icône de largeur FIXE, donc il n'est pas un « texte variable ». Aucune des six langues ne pousse l'autre. */
#mm-support-entete {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(128, 128, 140, .22);
}
#mm-support-titre {
  flex: 1 1 auto; min-width: 0;
  margin: 0; font-size: 1rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ☠️ LE VISAGE DU VIEUX MÔGÔ (ordre du fondateur, 22/09/2026) — l'INTERLOCUTEUR du chat de support.
   Il est de largeur FIXE : ce n'est donc pas un « texte variable », et la règle du fondateur du 20/09 tient
   toujours — seul le titre est variable, et il garde sa ligne bornée avec ellipse. En RTL rien à ajouter :
   la boîte flexible de l'en-tête suit déjà la direction de la page, le visage passe à droite de lui-même. */
.mm-support-visage {
  flex: 0 0 auto; width: 32px; height: 32px;
  border-radius: 50%; object-fit: cover;
  background: rgba(128, 128, 140, .18);
}
/* Le visage devant une réplique : même rond, plus petit, aligné sur la PREMIÈRE ligne de la bulle. */
.mm-support-rangee { display: flex; align-items: flex-start; gap: 8px; }
.mm-support-visage-bulle {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px;
  border-radius: 50%; object-fit: cover;
  background: rgba(128, 128, 140, .18);
}
/* ☠️ Une image effacée ne laisse AUCUN trou : `hidden` doit l'emporter sur le `display` posé ci-dessus. */
.mm-support-visage[hidden], .mm-support-visage-bulle[hidden] { display: none !important; }

#mm-support-fermer {
  flex: 0 0 auto; width: 32px; height: 32px;
  /* ☠️ ARRONDIS : un petit bouton d'icône prend `--r-md` (12 px), comme le bouton de thème de site.css. */
  border: 0; border-radius: var(--r-md, 12px); cursor: pointer;
  background: transparent; color: inherit; font-size: 1.25rem; line-height: 1;
}
#mm-support-fermer:focus-visible { outline: 2px solid #8432FF; outline-offset: 2px; }

#mm-support-corps { flex: 1 1 auto; overflow-y: auto; padding: 14px; }

/* ☠️ ORDRE DU FONDATEUR (22/09/2026), verbatim : « sur le widget de support sur nos sites internet, mets une
   scrollbar plus jolie et non celle par défaut, ca casse notre design. » Capture à l'appui : la barre grise
   du système, avec ses flèches, sur le panneau sombre du widget.

   ☠️ DEUX GARDE-FOUS, et ce sont eux qui commandent les valeurs ci-dessous :
     — elle reste SAISISSABLE à la souris. Une barre de 4 px remplacerait un défaut de dessin par un défaut
       d'usage. `scrollbar-width: thin` vaut ~11 px sous Windows ; la piste WebKit est posée à 10 px, et le
       pouce porte une hauteur MINIMALE pour qu'un fil long ne le réduise pas à un trait.
     — elle reste VISIBLE. Le formulaire est plus haut que le panneau (c'est ce que montre la capture) :
       une barre invisible ferait croire qu'il n'y a rien à faire défiler. Le pouce est donc contrasté sur
       les DEUX thèmes, et la piste reste perceptible.

   ☠️ RTL : RIEN à forcer. En `dir="rtl"` le navigateur place lui-même la barre à gauche ; une règle qui la
   déplacerait ferait exactement le contraire de ce qu'on veut dans l'une des six langues.

   ☠️ DEUX SYNTAXES, ET C'EST VOULU : `scrollbar-width`/`scrollbar-color` est la propriété STANDARD ;
   `::-webkit-scrollbar` est le repli pour les WebKit plus anciens — dont les navigateurs d'entrée de gamme
   du parc. Les deux disent la MÊME chose, aucune ne contredit l'autre. */
#mm-support-fenetre {
  scrollbar-width: thin;
  scrollbar-color: rgba(132, 50, 255, .60) rgba(255, 255, 255, .07);
}
#mm-support-fenetre::-webkit-scrollbar,
#mm-support-fenetre ::-webkit-scrollbar { width: 10px; height: 10px; }
#mm-support-fenetre::-webkit-scrollbar-track,
#mm-support-fenetre ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .07);
  border-radius: 100px;
}
#mm-support-fenetre::-webkit-scrollbar-thumb,
#mm-support-fenetre ::-webkit-scrollbar-thumb {
  background: rgba(132, 50, 255, .60);
  border-radius: 100px;
  /* ☠️ Le pouce ne descend jamais sous 36 px : c'est ce qui le garde SAISISSABLE quand le fil s'allonge. */
  min-height: 36px;
}
#mm-support-fenetre::-webkit-scrollbar-thumb:hover,
#mm-support-fenetre ::-webkit-scrollbar-thumb:hover { background: rgba(132, 50, 255, .85); }
/* ☠️ LES FLÈCHES DU SYSTÈME : c'est elles que le fondateur a vues sur la capture. On les retire. */
#mm-support-fenetre::-webkit-scrollbar-button,
#mm-support-fenetre ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
#mm-support-fenetre::-webkit-scrollbar-corner,
#mm-support-fenetre ::-webkit-scrollbar-corner { background: transparent; }

/* Chaque champ : son étiquette sur SA ligne, son champ sur la sienne. Rien ne partage une ligne. */
.mm-support-champ { display: block; margin: 0 0 12px; }
.mm-support-champ > span {
  display: block; margin: 0 0 4px;
  font-size: .82rem; opacity: .8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-support-champ input,
.mm-support-champ textarea {
  display: block; width: 100%; box-sizing: border-box;
  /* ☠️ ARRONDIS : une commande de saisie prend `--r-md` (12 px). */
  padding: 10px 12px; border-radius: var(--r-md, 12px);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06); color: inherit;
  font: inherit;
}
.mm-support-champ textarea { resize: vertical; min-height: 64px; }
.mm-support-champ input:focus-visible,
.mm-support-champ textarea:focus-visible { outline: 2px solid #8432FF; outline-offset: 1px; }

/* La question « avez-vous déjà l'appli ? » : la question sur sa ligne, les deux réponses sur la leur. */
#mm-support-appli { margin: 0 0 12px; }
#mm-support-appli > p { margin: 0 0 6px; font-size: .82rem; opacity: .8; }
#mm-support-appli-choix { display: flex; gap: 8px; }
#mm-support-appli-choix button {
  flex: 1 1 0; min-width: 0;
  /* ☠️ ARRONDIS : un bouton de choix est une commande — `--r-md` (12 px). */
  padding: 8px 10px; border-radius: var(--r-md, 12px); cursor: pointer;
  border: 1px solid rgba(128, 128, 140, .35);
  background: transparent; color: inherit; font: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mm-support-appli-choix button[aria-pressed="true"] { border-color: #8432FF; background: rgba(132, 50, 255, .16); }

/* ☠️ LE CONSENTEMENT (ordre du fondateur, 22/09/2026 : la case « I agree that my details are used to support me and
   to pre-register me. Privacy policy » s'affiche mal — la polir).
   CE QUI N'ALLAIT PAS, MESURE : `display: block` sur l'etiquette laissait la case dans le FLUX en ligne, sans gouttiere
   et sans alignement ; le texte s'enroulait SOUS la case, et rien ne tenait de colonne.
   LA REGLE : DEUX COLONNES — la case, puis le texte. Les lignes suivantes du texte s'alignent sur la premiere au lieu
   de repasser sous la case (le defaut visible sur la capture). Une grille suit la direction de la page : en arabe, la
   case passe a DROITE sans une regle de plus, et toutes les distances sont LOGIQUES.
   ☠️ La regle du fondateur du 20/09 (« deux textes variables ne partagent jamais une ligne ») n'est pas enfreinte :
   une case a cocher n'est pas un texte, et le texte du consentement reste SEUL sur ses lignes. */
#mm-support-consentement {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px;
  margin: 0 0 14px; font-size: .82rem; line-height: 1.45; cursor: pointer;
}
#mm-support-consentement input {
  /* La case garde une taille EXPLICITE : sans elle, chaque navigateur dessine la sienne et la colonne bouge. */
  inline-size: 18px; block-size: 18px; flex: none; margin: 1px 0 0; accent-color: #8432FF; cursor: pointer;
}
#mm-support-consentement input:focus-visible { outline: 3px solid #8432FF; outline-offset: 2px; }
#mm-support-consentement a { color: #8432FF; }

.mm-support-bouton {
  display: block; width: 100%; box-sizing: border-box;
  padding: 12px 14px; border: 0; border-radius: 100px; cursor: pointer;
  background: linear-gradient(135deg, #8432FF, #00D5FF); color: #fff;
  font: inherit; font-weight: 700;
}
.mm-support-bouton[disabled] { opacity: .55; cursor: default; }
.mm-support-bouton:focus-visible { outline: 3px solid #8432FF; outline-offset: 2px; }

/* Le fil. Chaque tour est un bloc : jamais deux paroles sur une même ligne. */
#mm-support-fil { margin: 0 0 12px; }
/* ☠️ `#mm-support-fil p` et non `> p` : depuis le 22/09, une réplique du Môgô vit dans une RANGÉE avec son
   visage. Un sélecteur d'enfant DIRECT laisserait ces bulles-là sans rembourrage ni arrondi. */
#mm-support-fil p {
  /* ☠️ ARRONDIS : une bulle du fil est un BLOC — `--r-card` (16 px). */
  margin: 0 0 8px; padding: 9px 12px; border-radius: var(--r-card, 16px);
  max-width: 88%; overflow-wrap: anywhere;
}
.mm-support-bulle-moi { margin-inline-start: auto !important; background: rgba(132, 50, 255, .30); }
.mm-support-bulle-mogo { margin-inline-end: auto !important; background: rgba(255, 255, 255, .08); }

/* Les messages d'état (« regardez vos e-mails », « nous vous recontacterons », la conservation dite) :
   chacun sur SON bloc, hauteur libre, jamais collé à un autre texte. */
.mm-support-etat { margin: 0 0 10px; font-size: .86rem; opacity: .85; }
.mm-support-erreur { color: #ff7a7a; }

#mm-support-pied { padding: 12px 14px; border-top: 1px solid rgba(128, 128, 140, .22); }
#mm-support-installer { display: block; margin: 10px 0 0; font-size: .82rem; text-align: center; }
#mm-support-installer a { color: #8432FF; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  #mm-support-bulle { transition: none; }
}