/* Habillages de couleurs (site et chat). theme.js pose data-skin sur <html> ainsi que le data-theme
   (clair ou sombre) qui convient à l'habillage, pour que la palette des pseudos suive. « default » :
   aucun attribut, les feuilles site.css et chat.css s'appliquent telles quelles.
   La spécificité de « html:root[data-skin] » l'emporte sur les règles de thème de ces feuilles. */

/* Océan : sombre, bleu-vert */
html:root[data-skin="ocean"] {
  --bg: #0e2a33; --surface: #143b47; --surface-2: #10323d;
  --text: #e3f4f4; --muted: #8fb9bf; --border: #1f5360;
  --accent: #2ec4b6; --accent-text: #06242a; --accent-hover: #5fd9cd; --accent-soft: #14505a;
  --mention: #1d4a3f; --mention-border: #2ec4b6;
  --system: #ff9d8a; --notice: #7fe0b0; --danger: #ffb4ab; --danger-bg: #3a1b1a;
  --ok: #7fe0b0; --ok-bg: #123d33; --shadow: none; --radius: 10px;
}

/* Crépuscule : sombre, prune et ambre */
html:root[data-skin="dusk"] {
  --bg: #2a1838; --surface: #3a2350; --surface-2: #321e47;
  --text: #f5e9ff; --muted: #b9a0d0; --border: #54386f;
  --accent: #ffa94d; --accent-text: #2a1838; --accent-hover: #ffc078; --accent-soft: #5a3a6e;
  --mention: #4d3a2a; --mention-border: #ffa94d;
  --system: #ff8f9d; --notice: #8fe0b0; --danger: #ffb4ab; --danger-bg: #4a1f2a;
  --ok: #8fe0b0; --ok-bg: #1f3d33; --shadow: none; --radius: 14px;
}

/* Citrouille (Halloween) : sombre, violet nuit et orange vif */
html:root[data-skin="citrouille"] {
  --bg: #150f1f; --surface: #201830; --surface-2: #1a1327;
  --text: #f3e9ff; --muted: #a493bd; --border: #3b2c57;
  --accent: #ff7a1a; --accent-text: #1a0d00; --accent-hover: #ff9a4d; --accent-soft: #3a2210;
  --mention: #3b2a12; --mention-border: #ff7a1a;
  --system: #ff9d8a; --notice: #ffb86b; --danger: #ffb4ab; --danger-bg: #3d1620;
  --ok: #8fe0b0; --ok-bg: #173a2c; --shadow: none; --radius: 10px;
}

/* Sorcière (Halloween) : sombre, violet profond et vert toxique, coins très arrondis */
html:root[data-skin="sorciere"] {
  --bg: #1b0c30; --surface: #2a1347; --surface-2: #220f3c;
  --text: #f1e4ff; --muted: #b093d6; --border: #4d2a7d;
  --accent: #a6f23a; --accent-text: #12220a; --accent-hover: #c0ff6b; --accent-soft: #35205a;
  --mention: #34234f; --mention-border: #a6f23a;
  --system: #ff9dcb; --notice: #a6f23a; --danger: #ffb4c8; --danger-bg: #45152f;
  --ok: #a6f23a; --ok-bg: #26391a; --shadow: none; --radius: 18px;
}

/* Sépia : clair, papier et encre brune */
html:root[data-skin="sepia"] {
  --bg: #f1e6d0; --surface: #faf3e3; --surface-2: #f5ecd6;
  --text: #3b2a1a; --muted: #7a6249; --border: #d8c6a4;
  --accent: #a8442a; --accent-text: #fff7ea; --accent-hover: #86351f; --accent-soft: #efd9bd;
  --mention: #f6e2a8; --mention-border: #c99a00;
  --system: #a32d1f; --notice: #3b6d11; --danger: #a32d1f; --danger-bg: #f7dcd3;
  --ok: #3b6d11; --ok-bg: #e4ecce; --shadow: 0 1px 3px rgb(60 40 10 / 0.12); --radius: 4px;
}
html:root[data-skin="sepia"] body { font-family: Georgia, "Times New Roman", serif; }

/* Contraste élevé : noir et blanc, accent jaune, bordures épaisses (accessibilité) */
html:root[data-skin="contrast"] {
  --bg: #000; --surface: #000; --surface-2: #000;
  --text: #fff; --muted: #e6e6e6; --border: #fff;
  --accent: #ffe600; --accent-text: #000; --accent-hover: #fff27a; --accent-soft: #332e00;
  --mention: #332e00; --mention-border: #ffe600;
  --system: #ff8a80; --notice: #7dffa0; --danger: #ff8a80; --danger-bg: #330000;
  --ok: #7dffa0; --ok-bg: #00330f; --shadow: none; --radius: 4px;
}
html:root[data-skin="contrast"] a { text-decoration: underline; }
html:root[data-skin="contrast"] :focus-visible { outline: 3px solid #ffe600; outline-offset: 2px; }

/* Terminal : vert phosphore, monospace, sans coins arrondis */
html:root[data-skin="terminal"] {
  --bg: #050805; --surface: #0a120a; --surface-2: #070d07;
  --text: #33ff66; --muted: #1fa142; --border: #1b6b30;
  --accent: #33ff66; --accent-text: #050805; --accent-hover: #7dff9c; --accent-soft: #0f2b16;
  --mention: #14331c; --mention-border: #33ff66;
  --system: #ff6b6b; --notice: #33ff66; --danger: #ff6b6b; --danger-bg: #2a0a0a;
  --ok: #33ff66; --ok-bg: #0f2b16; --shadow: none; --radius: 0;
}
html:root[data-skin="terminal"] body { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* Daltonien : clair ; bleu et orange (palette d'Okabe et Ito) plutôt que rouge et vert, qui se
   confondent. Les états (réussite, erreur, mention) ne reposent jamais sur la seule couleur. */
html:root[data-skin="colorblind"] {
  --bg: #f7f8fb; --surface: #ffffff; --surface-2: #eef1f7;
  --text: #14213d; --muted: #4f5d78; --border: #b9c3d6;
  --accent: #0072b2; --accent-text: #ffffff; --accent-hover: #005a8c; --accent-soft: #d6e9f7;
  --mention: #fdf0cc; --mention-border: #e69f00;
  --system: #b34700; --notice: #0072b2; --danger: #b34700; --danger-bg: #fbe5d3;
  --ok: #0072b2; --ok-bg: #d6e9f7; --shadow: 0 1px 3px rgb(20 33 61 / 0.12); --radius: 8px;
}

/* Pastel : clair, rose, lavande et menthe, coins très arrondis */
html:root[data-skin="pastel"] {
  --bg: #fdf0f7; --surface: #ffffff; --surface-2: #fbe6f1;
  --text: #4a3358; --muted: #8a6f9a; --border: #f1cfe4;
  --accent: #9b51d0; --accent-text: #ffffff; --accent-hover: #7d3cb3; --accent-soft: #f1e0fb;
  --mention: #fff3c4; --mention-border: #f0b429;
  --system: #c0397a; --notice: #2e8b6a; --danger: #c0397a; --danger-bg: #fde3ee;
  --ok: #2e8b6a; --ok-bg: #dcf5ea; --shadow: 0 2px 8px rgb(155 81 208 / 0.12); --radius: 16px;
}

/* Cara-nostalgie : l'allure d'un chat d'autrefois. Gris d'application, zones de texte blanches
   en creux, onglet actif en bleu gras, touches de jaune, police Arial, angles droits. */
html:root[data-skin="cara-nostalgie"] {
  --bg: #c0c0c0; --surface: #c8c8c8; --surface-2: #d4d4d4;
  --text: #000000; --muted: #555555; --border: #808080;
  --accent: #0000ee; --accent-text: #ffffff; --accent-hover: #000099; --accent-soft: #ffe066;
  --mention: #ffe066; --mention-border: #b38f00;
  --system: #d40000; --notice: #006400; --danger: #d40000; --danger-bg: #ffd6d6;
  --ok: #006400; --ok-bg: #d4f0d4; --shadow: none; --radius: 0;
}
html:root[data-skin="cara-nostalgie"] body { font-family: Arial, Helvetica, sans-serif; }
html:root[data-skin="cara-nostalgie"] input:not([type="checkbox"]):not([type="radio"]),
html:root[data-skin="cara-nostalgie"] textarea,
html:root[data-skin="cara-nostalgie"] select {
  background: #fff; color: #000; border: 2px inset #fff; border-color: #808080 #fff #fff #808080;
}
html:root[data-skin="cara-nostalgie"] .tab { border-color: #fff #808080 transparent #fff; }
/* Cara-nostalgie : fenêtres de dialogue et liste des membres sur fond blanc, boutons principaux jaunes
   (les secondaires et « Envoyer » restent gris), tous en relief. */
html:root[data-skin="cara-nostalgie"] .messages,
html:root[data-skin="cara-nostalgie"] .members,
html:root[data-skin="cara-nostalgie"] .member-list { background: #fff; }
html:root[data-skin="cara-nostalgie"] .members { border-right: 2px solid #808080; }
html:root[data-skin="cara-nostalgie"] .members-head,
html:root[data-skin="cara-nostalgie"] .members-foot { background: var(--surface); }
html:root[data-skin="cara-nostalgie"] .button {
  background: #ffcc00; color: #000; border: 2px outset #fff; border-color: #fff #808080 #808080 #fff;
}
html:root[data-skin="cara-nostalgie"] .button:hover { background: #ffdb4d; }
html:root[data-skin="cara-nostalgie"] .button.secondary,
html:root[data-skin="cara-nostalgie"] .button.send {
  background: #d4d4d4; color: #000; border: 2px outset #fff; border-color: #fff #808080 #808080 #fff;
}
html:root[data-skin="cara-nostalgie"] .button.secondary:hover,
html:root[data-skin="cara-nostalgie"] .button.send:hover { background: #e0e0e0; }
html:root[data-skin="cara-nostalgie"] .button:active { border-color: #808080 #fff #fff #808080; }
html:root[data-skin="cara-nostalgie"] .button.danger { background: #d40000; color: #fff; }

/* Ancien : l'aspect d'avant la charte graphique (bleu, police système, angles doux). Suit le choix
   clair/sombre ou l'appareil, comme « classique ». */
html:root[data-skin="ancien"] {
  --bg: #f4f6fb; --surface: #ffffff; --surface-2: #f6f8fc;
  --text: #1b2230; --muted: #5b6577; --border: #d7dce6;
  --accent: #2f6fde; --accent-text: #ffffff; --accent-hover: #2358b8; --accent-soft: #e3ecfd;
  --brand-ink: #1b2230; --radius: 10px;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 16px rgb(0 0 0 / 0.04);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html:root[data-skin="ancien"][data-theme="dark"] {
  --bg: #12151c; --surface: #1b2029; --surface-2: #161a22;
  --text: #e6e9ef; --muted: #9aa3b5; --border: #313848;
  --accent: #6b9bff; --accent-text: #0d1320; --accent-hover: #8fb3ff; --accent-soft: #22304d;
  --brand-ink: #e6e9ef; --shadow: none;
}
@media (prefers-color-scheme: dark) {
  html:root[data-skin="ancien"]:not([data-theme="light"]) {
    --bg: #12151c; --surface: #1b2029; --surface-2: #161a22;
    --text: #e6e9ef; --muted: #9aa3b5; --border: #313848;
    --accent: #6b9bff; --accent-text: #0d1320; --accent-hover: #8fb3ff; --accent-soft: #22304d;
    --brand-ink: #e6e9ef; --shadow: none;
  }
}
html:root[data-skin="ancien"] .button { border-radius: 8px; font-weight: 600; }
html:root[data-skin="ancien"] .hero h1 { font-weight: 700; }

/* Décors des messages (habillages Halloween). Choix « Décor des messages » : data-decor sur <html>,
   « animated » (par défaut), « static » ou « none » (voir theme.js). Le décor est collé à la fenêtre des
   messages, il ne défile pas avec eux ; l'animation s'arrête pour qui a demandé moins de mouvement. */
html:root[data-skin="citrouille"]:not([data-decor="none"]) .messages {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%2790%27%20viewBox%3D%270%200%20160%2090%27%3E%3Cg%20fill%3D%27%23ff7a1a%27%20fill-opacity%3D%27.17%27%3E%3Cg%20transform%3D%27translate(40%2024)%20scale(0.5)%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M-22%200a22%2018%200%201%200%2044%200a22%2018%200%201%200-44%200zM-12-4l6-7%205%207zM3-4l6-7%205%207zM-11%206q11%209%2022%200l-3-3-4%203-4-3-4%203-4-3z%27%2F%3E%3Crect%20x%3D%27-2%27%20y%3D%27-24%27%20width%3D%274%27%20height%3D%278%27%2F%3E%3C%2Fg%3E%3Cpath%20transform%3D%27translate(98%2014)%20scale(0.6)%27%20d%3D%27M0%200q6-9%2012-2q4-4%206%201q2-5%206-1q6-7%2012%202q-5%201-8%206q-4-3-10-2q-6-1-10%202q-3-5-8-6z%27%2F%3E%3Cpath%20transform%3D%27translate(18%2058)%20scale(0.6)%27%20d%3D%27M0%200q6-9%2012-2q4-4%206%201q2-5%206-1q6-7%2012%202q-5%201-8%206q-4-3-10-2q-6-1-10%202q-3-5-8-6z%27%2F%3E%3Cg%20transform%3D%27translate(120%2068)%20scale(0.5)%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M-22%200a22%2018%200%201%200%2044%200a22%2018%200%201%200-44%200zM-12-4l6-7%205%207zM3-4l6-7%205%207zM-11%206q11%209%2022%200l-3-3-4%203-4-3-4%203-4-3z%27%2F%3E%3Crect%20x%3D%27-2%27%20y%3D%27-24%27%20width%3D%274%27%20height%3D%278%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 160px 90px;
}
html:root[data-skin="citrouille"][data-decor="animated"] .messages { animation: decor-drift 120s linear infinite; }
@keyframes decor-drift { to { background-position: 160px 90px; } }

html:root[data-skin="sorciere"]:not([data-decor="none"]) .messages {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27210%27%20viewBox%3D%270%200%20300%20210%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23a6f23a%27%20stroke-opacity%3D%27.3%27%20stroke-width%3D%271.2%27%3E%3Ccircle%20cx%3D%2776%27%20cy%3D%27152%27%20r%3D%276%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%27138%27%20r%3D%279%27%2F%3E%3Ccircle%20cx%3D%2784%27%20cy%3D%27116%27%20r%3D%274%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27210%27%20viewBox%3D%270%200%20300%20210%27%3E%3Cg%20fill%3D%27%23a6f23a%27%20fill-opacity%3D%27.14%27%3E%3Cpath%20d%3D%27M40%20210Q36%20168%2062%20168H112Q138%20168%20134%20210z%27%2F%3E%3Cellipse%20cx%3D%2787%27%20cy%3D%27168%27%20rx%3D%2734%27%20ry%3D%276%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27210%27%20viewBox%3D%270%200%20300%20210%27%3E%3Cg%20fill%3D%27%23a6f23a%27%20fill-opacity%3D%27.14%27%3E%3Cpath%20d%3D%27M222%20198L248%20138L262%20198z%27%2F%3E%3Cellipse%20cx%3D%27242%27%20cy%3D%27198%27%20rx%3D%2734%27%20ry%3D%278%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cpath%20fill%3D%27%23a6f23a%27%20fill-opacity%3D%27.2%27%20d%3D%27M62%2014A46%2046%200%201%200%20104%2088A36%2036%200%201%201%2062%2014z%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cg%20fill%3D%27%23a6f23a%27%20fill-opacity%3D%27.22%27%3E%3Cpath%20d%3D%27M30%2034L32%2038L36%2040L32%2042L30%2046L28%2042L24%2040L28%2038z%27%2F%3E%3Cpath%20d%3D%27M170%2085L171.66666666666666%2088.33333333333333L175%2090L171.66666666666666%2091.66666666666667L170%2095L168.33333333333334%2091.66666666666667L165%2090L168.33333333333334%2088.33333333333333z%27%2F%3E%3Cpath%20d%3D%27M100%20166L101.33333333333333%20168.66666666666666L104%20170L101.33333333333333%20171.33333333333334L100%20174L98.66666666666667%20171.33333333333334L96%20170L98.66666666666667%20168.66666666666666z%27%2F%3E%3Cpath%20d%3D%27M210%20209L212%20213L216%20215L212%20217L210%20221L208%20217L204%20215L208%20213z%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23f1e4ff%27%20fill-opacity%3D%27.2%27%3E%3Cpath%20d%3D%27M120%2026L121.33333333333333%2028.666666666666668L124%2030L121.33333333333333%2031.333333333333332L120%2034L118.66666666666667%2031.333333333333332L116%2030L118.66666666666667%2028.666666666666668z%27%2F%3E%3Cpath%20d%3D%27M60%20117L61%20119L63%20120L61%20121L60%20123L59%20121L57%20120L59%20119z%27%2F%3E%3Cpath%20d%3D%27M215%20147L216%20149L218%20150L216%20151L215%20153L214%20151L212%20150L214%20149z%27%2F%3E%3Cpath%20d%3D%27M20%20206L21.333333333333332%20208.66666666666666L24%20210L21.333333333333332%20211.33333333333334L20%20214L18.666666666666668%20211.33333333333334L16%20210L18.666666666666668%20208.66666666666666z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 300px 210px, 300px 210px, 300px 210px, 120px 120px, 240px 240px;
  background-position: 0% 100%, 0% 100%, 100% 100%, 100% 0%, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
html:root[data-skin="sorciere"][data-decor="animated"] .messages {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27320%27%20viewBox%3D%270%200%20300%20320%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23a6f23a%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%271.2%27%3E%3Ccircle%20cx%3D%2776%27%20cy%3D%27300%27%20r%3D%276%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%27250%27%20r%3D%279%27%2F%3E%3Ccircle%20cx%3D%2784%27%20cy%3D%27196%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%27150%27%20r%3D%277%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2796%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%2740%27%20r%3D%278%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27210%27%20viewBox%3D%270%200%20300%20210%27%3E%3Cg%20fill%3D%27%23a6f23a%27%20fill-opacity%3D%27.14%27%3E%3Cpath%20d%3D%27M40%20210Q36%20168%2062%20168H112Q138%20168%20134%20210z%27%2F%3E%3Cellipse%20cx%3D%2787%27%20cy%3D%27168%27%20rx%3D%2734%27%20ry%3D%276%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27210%27%20viewBox%3D%270%200%20300%20210%27%3E%3Cg%20fill%3D%27%23a6f23a%27%20fill-opacity%3D%27.14%27%3E%3Cpath%20d%3D%27M222%20198L248%20138L262%20198z%27%2F%3E%3Cellipse%20cx%3D%27242%27%20cy%3D%27198%27%20rx%3D%2734%27%20ry%3D%278%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cpath%20fill%3D%27%23a6f23a%27%20fill-opacity%3D%27.2%27%20d%3D%27M62%2014A46%2046%200%201%200%20104%2088A36%2036%200%201%201%2062%2014z%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cg%20fill%3D%27%23a6f23a%27%20fill-opacity%3D%27.22%27%3E%3Cpath%20d%3D%27M30%2034L32%2038L36%2040L32%2042L30%2046L28%2042L24%2040L28%2038z%27%2F%3E%3Cpath%20d%3D%27M170%2085L171.66666666666666%2088.33333333333333L175%2090L171.66666666666666%2091.66666666666667L170%2095L168.33333333333334%2091.66666666666667L165%2090L168.33333333333334%2088.33333333333333z%27%2F%3E%3Cpath%20d%3D%27M100%20166L101.33333333333333%20168.66666666666666L104%20170L101.33333333333333%20171.33333333333334L100%20174L98.66666666666667%20171.33333333333334L96%20170L98.66666666666667%20168.66666666666666z%27%2F%3E%3Cpath%20d%3D%27M210%20209L212%20213L216%20215L212%20217L210%20221L208%20217L204%20215L208%20213z%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23f1e4ff%27%20fill-opacity%3D%27.2%27%3E%3Cpath%20d%3D%27M120%2026L121.33333333333333%2028.666666666666668L124%2030L121.33333333333333%2031.333333333333332L120%2034L118.66666666666667%2031.333333333333332L116%2030L118.66666666666667%2028.666666666666668z%27%2F%3E%3Cpath%20d%3D%27M60%20117L61%20119L63%20120L61%20121L60%20123L59%20121L57%20120L59%20119z%27%2F%3E%3Cpath%20d%3D%27M215%20147L216%20149L218%20150L216%20151L215%20153L214%20151L212%20150L214%20149z%27%2F%3E%3Cpath%20d%3D%27M20%20206L21.333333333333332%20208.66666666666666L24%20210L21.333333333333332%20211.33333333333334L20%20214L18.666666666666668%20211.33333333333334L16%20210L18.666666666666668%20208.66666666666666z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 300px 320px, 300px 210px, 300px 210px, 120px 120px, 240px 240px;
  background-repeat: repeat-y, no-repeat, no-repeat, no-repeat, repeat;
  animation: decor-bubbles 14s linear infinite;
}
@keyframes decor-bubbles {
  from { background-position: 0% 0, 0% 100%, 100% 100%, 100% 0%, 0 0; }
  to { background-position: 0% -320px, 0% 100%, 100% 100%, 100% 0%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html:root[data-decor] .messages { animation: none; }
}

/* Les lignes à fond plein (messages de robot ou relayés par le pont, mentions) cachaient le décor :
   on les rend translucides avec ces deux habillages. */
html:root[data-skin="citrouille"]:not([data-decor="none"]) .msg.bot,
html:root[data-skin="sorciere"]:not([data-decor="none"]) .msg.bot { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
html:root[data-skin="citrouille"]:not([data-decor="none"]) .msg.mention,
html:root[data-skin="sorciere"]:not([data-decor="none"]) .msg.mention { background: color-mix(in srgb, var(--mention) 60%, transparent); }