/* Ares — style du chat
   Identité tirée du personnage : nuit cybernétique, armure noir et or, énergie bleu électrique,
   regard rouge. Les réponses d'Ares se lisent comme une page de roman, actions RP en italique doré. */

:root {
  --police-titre: "Orbitron", "Exo 2", system-ui, sans-serif;
  --police-ui: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-ares: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --police-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --largeur-barre: 300px;
  --largeur-texte: 46rem;
  --rayon: 20px;
  --rayon-petit: 13px;
  --rayon-pilule: 999px;
  --transition: 180ms cubic-bezier(.22,.61,.36,1);
}

[data-theme="nuit"] {
  --fond: #060812;
  --fond-barre: #080c1a;
  --surface: #0f1530;
  --surface-2: #131b3a;
  --ligne: #1d2850;
  --texte: #e9edf9;
  --texte-2: #96a3c8;
  --texte-3: #5f6c93;
  --bronze: #d6ab4c;          /* or de l'armure */
  --action: #e7c77e;          /* actions RP */
  --braise: #2f7bff;          /* énergie bleue : actions principales */
  --braise-vive: #58a0ff;
  --rouge: #e5484d;           /* regard : danger */
  --vert: #3fd0c9;
  --code-fond: #04060e;
  --ombre: 0 18px 50px rgba(0, 2, 12, 0.6);
  --lueur: rgba(47, 123, 255, 0.20);
  --lueur-violette: rgba(124, 76, 255, 0.14);
  --verre: rgba(15, 21, 48, 0.72);
  color-scheme: dark;
}

[data-theme="jour"] {
  --fond: #eef2fa;
  --fond-barre: #e4e9f5;
  --surface: #ffffff;
  --surface-2: #f3f6fd;
  --ligne: #d3dbee;
  --texte: #0d1430;
  --texte-2: #4f5b80;
  --texte-3: #8590b0;
  --bronze: #9c7420;
  --action: #8c6416;
  --braise: #1f5fd1;
  --braise-vive: #2f7bff;
  --rouge: #c9313b;
  --vert: #138f88;
  --code-fond: #0b1128;
  --ombre: 0 18px 50px rgba(20, 35, 80, 0.14);
  --lueur: rgba(47, 123, 255, 0.10);
  --lueur-violette: rgba(124, 76, 255, 0.06);
  --verre: rgba(255, 255, 255, 0.78);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 0.9375rem/1.55 var(--police-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- structure */
.app {
  display: grid;
  grid-template-columns: var(--largeur-barre) 1fr;
  height: 100vh;
  height: var(--hauteur-visible, 100dvh);
  overflow: hidden;
  transition: grid-template-columns 200ms ease;
}

/* ---------- barre latérale */
.barre {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px 12px;
  background: var(--fond-barre);
  border-right: 1px solid var(--ligne);
  min-height: 0;
}
.barre-haut { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.marque {
  display: flex; align-items: center; gap: 10px;
  color: var(--texte); text-decoration: none;
  font: 500 1.35rem/1 var(--police-ares);
  letter-spacing: 0.01em;
}
.marque-sigle { width: 28px; height: 28px; color: var(--bronze); }

.btn-nouveau {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px;
  font-weight: 500; font-size: 14.5px; text-align: left; white-space: nowrap;
  transition: border-color var(--transition), background var(--transition);
}
.btn-nouveau:hover { border-color: var(--bronze); }
.btn-nouveau span { flex: 1; }
kbd {
  font: 500 11px/1 var(--police-ui);
  color: var(--texte-3);
  border: 1px solid var(--ligne); border-radius: 5px; padding: 4px 6px;
}

.recherche {
  width: 100%; padding: 9px 12px;
  background: transparent; border: 1px solid var(--ligne); border-radius: 10px;
  outline: none;
}
.recherche::placeholder { color: var(--texte-3); }
.recherche:focus { border-color: var(--bronze); }

.liste { flex: 1; overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.liste-groupe { margin: 14px 8px 6px; font-size: 12px; color: var(--texte-3); }
.liste-vide { margin: 18px 8px; color: var(--texte-3); font-size: 13px; }
.conv {
  position: relative;
  display: flex; align-items: center;
  border-radius: 8px;
}
.conv-lien {
  flex: 1; min-width: 0;
  padding: 8px 62px 8px 10px;
  background: none; border: 0; border-radius: 8px;
  color: var(--texte-2); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--transition), color var(--transition);
}
.conv-lien:hover { background: var(--surface); color: var(--texte); }
.conv.active .conv-lien { background: var(--surface-2); color: var(--texte); }
.conv.active::before {
  content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--braise);
}
.conv-suppr, .conv-renommer {
  position: absolute; right: 4px;
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  background: none; border: 0; border-radius: 6px; color: var(--texte-3);
  opacity: 0; transition: opacity var(--transition), color var(--transition);
}
.conv-renommer { right: 31px; }
.conv-suppr svg, .conv-renommer svg { width: 16px; height: 16px; }
.conv:hover .conv-suppr, .conv-suppr:focus-visible, .conv.active .conv-suppr,
.conv:hover .conv-renommer, .conv-renommer:focus-visible, .conv.active .conv-renommer { opacity: 1; }
.conv-suppr:hover { color: var(--rouge); }
.conv-renommer:hover { color: var(--texte); }
.conv:has(.edition-titre) .conv-suppr, .conv:has(.edition-titre) .conv-renommer { display: none; }

.barre-bas { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--ligne); }
.lien-barre {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: none; border: 0; border-radius: 8px;
  color: var(--texte-2); text-align: left;
}
.lien-barre:hover { background: var(--surface); color: var(--texte); }
.lien-barre svg { width: 18px; height: 18px; }

/* ---------- zone principale */
.principal {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background:
    radial-gradient(120% 60% at 50% 115%, var(--lueur), transparent 60%),
    var(--fond);
}
.entete {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ligne);
  min-height: 64px;
}
.entete-titre { flex: 1; min-width: 0; }
.entete h1 { margin: 0; font: 500 1rem/1.3 var(--police-ui); min-width: 0; }
.titre-bouton {
  display: block; max-width: 100%;
  padding: 2px 6px; margin-left: -6px;
  background: none; border: 1px solid transparent; border-radius: 7px;
  font: inherit; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.titre-bouton:not(:disabled):hover { border-color: var(--ligne); background: var(--surface); }
.titre-bouton:disabled { cursor: default; color: inherit; }
.edition-titre {
  width: 100%; max-width: 32rem;
  padding: 3px 8px; margin-left: -6px;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--bronze); border-radius: 7px; outline: none;
  font: 500 1rem/1.3 var(--police-ui);
}
.conv .edition-titre { margin: 2px 0; font-size: 0.9rem; font-weight: 400; max-width: none; }
.statut { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: 12.5px; color: var(--texte-3); }
.point { width: 7px; height: 7px; border-radius: 50%; background: var(--texte-3); }
.statut.en-ligne .point { background: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 22%, transparent); }
.statut.hors-ligne .point { background: var(--rouge); }
.entete-actions { display: flex; gap: 4px; }
#btn-quitter-immersion { display: none; }

.icone {
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 9px;
  color: var(--texte-2);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.icone:hover { background: var(--surface); color: var(--texte); }
.icone.danger:hover { color: var(--rouge); }
.icone:disabled { opacity: .35; pointer-events: none; }
.seulement-mobile { display: none; }
.seulement-mobile-svg { display: none; }

/* ---------- fil de messages */
.fil { flex: 1; overflow-y: auto; min-height: 0; scroll-behavior: smooth; scrollbar-width: thin; }
.colonne { max-width: var(--largeur-texte); margin: 0 auto; padding: 28px 24px 24px; }

.accueil { padding: 9vh 0 24px; }
.accueil-sigle { width: 56px; height: 56px; color: var(--bronze); }
.accueil h2 {
  margin: 18px 0 6px;
  font: 400 clamp(2.6rem, 6vw, 3.6rem)/1 var(--police-ares);
  letter-spacing: -0.01em;
}
.accueil-texte {
  max-width: 34rem; margin: 0 0 32px;
  font: 400 1.12rem/1.6 var(--police-ares);
  color: var(--texte-2);
}
.suggestions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ligne); }
.suggestions button {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 18px 16px 0;
  background: none; border: 0; border-bottom: 1px solid var(--ligne);
  text-align: left; color: var(--texte-2);
  transition: color var(--transition);
}
.suggestions button:nth-child(odd) { padding-right: 24px; border-right: 1px solid var(--ligne); }
.suggestions button:nth-child(even) { padding-left: 24px; }
.suggestions strong { font: 500 1.05rem/1.3 var(--police-ares); color: var(--texte); }
.suggestions button:hover strong { color: var(--bronze); }

.messages { display: flex; flex-direction: column; gap: 26px; }

.msg { display: flex; gap: 14px; animation: apparition 220ms ease-out; }
@keyframes apparition { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* message de l'utilisateur */
.msg-moi { justify-content: flex-end; }
.msg-moi .contenu {
  max-width: min(85%, 38rem);
  padding: 10px 15px;
  background: var(--surface-2); border: 1px solid var(--ligne);
  border-radius: var(--rayon) var(--rayon) 4px var(--rayon);
  overflow-wrap: anywhere;
}
.msg-moi .contenu p { margin: 0 0 .5em; }
.msg-moi .contenu p:last-child { margin-bottom: 0; }
.msg-moi .contenu em { color: var(--action); opacity: 1; }
.msg-moi .contenu pre { margin: .4em 0; padding: 10px 12px; background: var(--code-fond); color: #efe4dc; border-radius: 8px; overflow-x: auto; font: .82rem/1.55 var(--police-code); }
.msg-moi .contenu code { font-family: var(--police-code); font-size: .88em; }

/* message d'Ares */
.msg-ia .avatar {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none; margin-top: 2px;
  border: 1px solid var(--ligne); border-radius: 50%;
  color: var(--bronze); background: var(--fond-barre);
}
.msg-ia .avatar svg { width: 18px; height: 18px; }
.msg-ia.en-cours .avatar { animation: braise 1.6s ease-in-out infinite; }
@keyframes braise {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 52, 63, 0); border-color: var(--ligne); }
  50% { box-shadow: 0 0 18px 2px rgba(194, 52, 63, .35); border-color: var(--braise); }
}
.msg-ia .corps { flex: 1; min-width: 0; }
.auteur { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.auteur time { font-weight: 400; color: var(--texte-3); font-size: 12px; }

.msg-ia .contenu {
  font: 400 1.075rem/1.68 var(--police-ares);
  overflow-wrap: anywhere;
}
.msg-ia .contenu p { margin: 0 0 .8em; }
.msg-ia .contenu p:last-child { margin-bottom: 0; }
.msg-ia .contenu em { font-style: italic; color: var(--action); opacity: 1; }
.msg-ia .contenu strong { font-weight: 600; color: var(--texte); }
.msg-ia .contenu a { color: var(--bronze); text-underline-offset: 3px; }
.msg-ia .contenu h3, .msg-ia .contenu h4, .msg-ia .contenu h5 {
  font-family: var(--police-ui); font-weight: 600; line-height: 1.3; margin: 1.1em 0 .45em;
}
.msg-ia .contenu h3 { font-size: 1.15rem; }
.msg-ia .contenu h4 { font-size: 1.05rem; }
.msg-ia .contenu h5 { font-size: 1rem; }
.msg-ia .contenu ul, .msg-ia .contenu ol { margin: 0 0 .8em; padding-left: 1.4em; }
.msg-ia .contenu li { margin: .2em 0; }
.msg-ia .contenu li::marker { color: var(--bronze); }
.msg-ia .contenu blockquote {
  margin: 0 0 .8em; padding: .1em 0 .1em 1em;
  border-left: 2px solid var(--bronze); color: var(--texte-2); opacity: 1;
}
.msg-ia .contenu hr { border: 0; border-top: 1px solid var(--ligne); margin: 1.2em 0; }
.msg-ia .contenu code {
  font-family: var(--police-code); font-size: .84em;
  background: var(--surface); border: 1px solid var(--ligne);
  padding: .08em .38em; border-radius: 5px;
}
.msg-ia .contenu pre {
  position: relative;
  margin: 0 0 .9em; padding: 14px 16px;
  background: var(--code-fond); color: #efe4dc;
  border: 1px solid var(--ligne); border-radius: 10px;
  overflow-x: auto;
  font: 400 .82rem/1.6 var(--police-code);
}
.msg-ia .contenu pre code {
  background: none; border: 0; padding: 0;
  font-size: inherit; line-height: inherit; white-space: pre; color: inherit;
}
.msg-ia .contenu .tableau { overflow-x: auto; margin: 0 0 .9em; }
.msg-ia .contenu table { border-collapse: collapse; font-family: var(--police-ui); font-size: .92rem; }
.msg-ia .contenu th, .msg-ia .contenu td { border: 1px solid var(--ligne); padding: .45em .7em; text-align: left; vertical-align: top; }
.msg-ia .contenu th { background: var(--surface); font-weight: 600; }

.copier-code {
  position: absolute; top: 8px; right: 8px;
  padding: 4px 9px;
  font: 500 12px/1.4 var(--police-ui);
  background: rgba(255, 255, 255, .06); color: #cdbdb4;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px;
  opacity: 0; transition: opacity var(--transition);
}
.msg-ia .contenu pre:hover .copier-code, .copier-code:focus-visible { opacity: 1; }
.langue-code {
  position: absolute; top: 9px; right: 78px;
  font: 500 11px/1.4 var(--police-ui); color: #8f7d76;
  opacity: 0; transition: opacity var(--transition);
}
.msg-ia .contenu pre:hover .langue-code { opacity: 1; }

.actions-msg { display: flex; gap: 2px; margin-top: 8px; opacity: 0; transition: opacity var(--transition); }
.msg-ia:hover .actions-msg, .actions-msg:focus-within, .msg-ia:last-child .actions-msg { opacity: 1; }
.actions-msg button {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: none; border: 0; border-radius: 6px;
  font-size: 12.5px; color: var(--texte-3);
}
.actions-msg button:hover { background: var(--surface); color: var(--texte); }
.actions-msg svg { width: 15px; height: 15px; }

.ecrit { display: inline-flex; gap: 5px; padding: 10px 0 4px; }
.ecrit span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--bronze);
  animation: points 1.2s infinite ease-in-out;
}
.ecrit span:nth-child(2) { animation-delay: .15s; }
.ecrit span:nth-child(3) { animation-delay: .3s; }
@keyframes points { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.note-msg { margin-top: 10px; font: 400 13px/1.4 var(--police-ui); color: var(--texte-3); font-style: italic; }
.erreur-msg {
  margin-top: 10px; padding: 10px 14px;
  font: 400 14px/1.5 var(--police-ui);
  color: var(--texte);
  background: color-mix(in srgb, var(--braise) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--braise) 45%, transparent);
  border-radius: 10px;
}

.btn-bas {
  position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%);
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--ligne); border-radius: 50%;
  box-shadow: var(--ombre);
}
.btn-bas svg { width: 18px; height: 18px; }

/* ---------- zone de saisie */
.composeur { position: relative; padding: 8px 24px 14px; }
.composeur-cadre {
  position: relative;
  display: flex; align-items: flex-end; gap: 8px;
  max-width: var(--largeur-texte); margin: 0 auto;
  padding: 8px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 18px;
  box-shadow: var(--ombre);
  transition: border-color var(--transition);
}
.composeur-cadre:focus-within { border-color: color-mix(in srgb, var(--bronze) 70%, var(--ligne)); }
#saisie {
  flex: 1; min-width: 0; min-height: 24px; max-height: 40vh;
  padding: 7px 2px; margin: 0;
  background: none; border: 0; outline: none; resize: none;
  font-size: 15.5px; line-height: 1.5;
}
#saisie::placeholder { color: var(--texte-3); }
.btn-envoyer, .btn-stop {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0; flex: none;
  border: 0; border-radius: 12px;
  background: var(--braise); color: #fff;
  transition: background var(--transition), opacity var(--transition);
}
.btn-envoyer:hover, .btn-stop:hover { background: var(--braise-vive); }
.btn-envoyer:disabled { opacity: .35; cursor: default; background: var(--braise); }
.btn-stop { background: var(--texte); color: var(--fond); }
.btn-stop:hover { background: var(--texte-2); }
.mention {
  display: flex; justify-content: center; gap: 12px;
  max-width: var(--largeur-texte); margin: 8px auto 0;
  font-size: 12px; color: var(--texte-3); text-align: center;
}
.compteur.limite { color: var(--rouge); }

/* ---------- dialogue et toast */
.dialogue {
  width: min(420px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--ligne); border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.dialogue::backdrop { background: rgba(10, 4, 6, .55); backdrop-filter: blur(2px); }
.dialogue h3 { margin: 0 0 6px; font: 500 1.15rem/1.3 var(--police-ares); }
.dialogue p { margin: 0 0 18px; color: var(--texte-2); font-size: 14px; }
.dialogue-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-secondaire, .btn-danger { padding: 8px 14px; border-radius: 9px; font-weight: 500; }
.btn-secondaire { background: none; border: 1px solid var(--ligne); }
.btn-secondaire:hover { border-color: var(--texte-3); }
.btn-danger { background: var(--rouge); border: 0; color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 10px 16px;
  background: var(--texte); color: var(--fond);
  border-radius: 10px; font-size: 14px; font-weight: 500;
  box-shadow: var(--ombre); z-index: 50;
}

/* ---------- mode immersion */
.app.immersion { grid-template-columns: 0 1fr; }
.app.immersion .barre { visibility: hidden; }
.app.immersion .entete { border-bottom-color: transparent; }
.app.immersion #btn-exporter, .app.immersion #btn-supprimer { display: none; }
.app.immersion #btn-quitter-immersion { display: grid; }
.app.immersion .principal {
  background:
    radial-gradient(90% 55% at 50% 110%, color-mix(in srgb, var(--lueur) 220%, transparent), transparent 65%),
    radial-gradient(70% 40% at 50% -10%, color-mix(in srgb, var(--bronze) 8%, transparent), transparent 70%),
    var(--fond);
}
.app.immersion .colonne { --largeur-texte: 42rem; padding-top: 44px; }
.app.immersion .msg-ia .contenu { font-size: 1.18rem; line-height: 1.75; }
.app.immersion .msg-ia .avatar, .app.immersion .auteur, .app.immersion .actions-msg { display: none; }
.app.immersion .msg-moi .contenu { background: transparent; border-color: var(--ligne); }
.app.immersion .mention span:first-child { display: none; }

/* ---------- mobile */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .barre {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: min(86vw, 320px);
    transform: translateX(-102%);
    transition: transform 220ms ease;
    box-shadow: var(--ombre);
  }
  .app.barre-ouverte .barre { transform: none; }
  .voile { position: fixed; inset: 0; z-index: 30; background: rgba(10, 4, 6, .5); }
  .seulement-mobile { display: grid; }
  .app.immersion { grid-template-columns: 1fr; }
  .colonne { padding: 20px 16px; }
  .entete { padding: 10px 12px; }
  .composeur { padding: 6px 12px max(12px, env(safe-area-inset-bottom)); }
  .suggestions { grid-template-columns: 1fr; }
  .suggestions button:nth-child(odd) { border-right: 0; padding-right: 0; }
  .suggestions button:nth-child(even) { padding-left: 0; }
  .msg-ia .avatar { display: none; }
  .mention { font-size: 11.5px; }
  .btn-bas { bottom: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- bouton et panneau GIF */
.btn-gif {
  flex: none; align-self: flex-end;
  height: 32px; margin: 3px 0; padding: 0 9px;
  font: 700 11.5px/1 var(--police-ui); letter-spacing: .04em;
  color: var(--texte-2); background: transparent;
  border: 1.5px solid var(--ligne); border-radius: 9px;
  transition: color var(--transition), border-color var(--transition);
}
.btn-gif:hover, .btn-gif.actif { color: var(--bronze); border-color: var(--bronze); }

.panneau-gif {
  position: absolute; z-index: 20;
  bottom: calc(100% - 2px);
  left: max(24px, calc((100% - var(--largeur-texte)) / 2));
  width: min(460px, calc(100% - 48px));
  height: min(440px, 58vh);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px;
  box-shadow: var(--ombre);
  overflow: hidden;
  animation: apparition 160ms ease-out;
}
.gif-entete { display: flex; gap: 6px; align-items: center; padding: 8px 8px 6px 10px; border-bottom: 1px solid var(--ligne); }
#gif-recherche {
  flex: 1; min-width: 0; padding: 8px 11px;
  background: var(--fond); border: 1px solid var(--ligne); border-radius: 9px; outline: none;
}
#gif-recherche:focus { border-color: var(--bronze); }
.gif-grille {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: 104px; gap: 6px;
  padding: 8px; align-content: start;
  scrollbar-width: thin;
}
.gif-vignette {
  padding: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: var(--surface-2);
  outline-offset: -2px;
}
.gif-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-vignette:hover { outline: 2px solid var(--bronze); }
.gif-etat { margin: 0; padding: 14px; text-align: center; font-size: 13.5px; color: var(--texte-2); }
.gif-attribution { margin: 0; padding: 6px 12px 8px; text-align: right; font-size: 11.5px; color: var(--texte-3); border-top: 1px solid var(--ligne); }
.gif-attribution strong { color: var(--texte-2); letter-spacing: .03em; }

/* GIF dans les messages */
.gif-msg { margin: .2em 0 .5em; }
.gif-msg:last-child { margin-bottom: 0; }
.gif-msg img {
  display: block;
  max-width: min(100%, 320px); max-height: 320px; width: auto; height: auto;
  border-radius: 12px; background: var(--surface);
}
.gif-msg figcaption { margin-top: 4px; font: 400 11px/1.3 var(--police-ui); color: var(--texte-3); }
.msg-moi .contenu:has(.gif-msg) { padding: 6px; }
.msg-moi .contenu:has(.gif-msg) > div { padding: 4px 9px 6px; }
.msg-moi .gif-msg figcaption { padding: 0 4px; }

/* ---------- barre repliable (bureau) */
.app.barre-masquee { grid-template-columns: 0 1fr; }
.app.barre-masquee .barre { visibility: hidden; overflow: hidden; padding: 0; border: 0; }

/* =====================================================================
   ADAPTATION À TOUS LES ÉCRANS
   ===================================================================== */

/* Très grands écrans */
@media (min-width: 1500px) {
  :root { --largeur-barre: 320px; --largeur-texte: 50rem; }
}
@media (min-width: 2000px) { html { font-size: 112.5%; } }
@media (min-width: 2600px) { html { font-size: 125%; } }

/* Tablettes et petits portables */
@media (min-width: 861px) and (max-width: 1100px) {
  :root { --largeur-barre: 256px; }
  .btn-nouveau kbd { display: none; }
  .colonne { padding: 24px 20px; }
  .composeur { padding-left: 20px; padding-right: 20px; }
  .suggestions button:nth-child(odd) { padding-right: 16px; }
  .suggestions button:nth-child(even) { padding-left: 16px; }
}

/* Mobiles (tiroir) */
@media (max-width: 860px) {
  .seulement-mobile-svg { display: block; }
  .seulement-bureau-svg { display: none; }
  .entete { padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .barre { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #saisie { font-size: 16px; } /* évite le zoom automatique d'iOS */
  .panneau-gif {
    position: fixed; z-index: 45;
    left: 0; right: 0; bottom: 0; width: auto;
    height: min(72dvh, 560px);
    border-radius: 18px 18px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .gif-grille { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-auto-rows: 96px; }
  .msg-moi .contenu { max-width: 88%; }
  .gif-msg img { max-width: min(100%, 260px); max-height: 260px; }
}

/* Petits téléphones */
@media (max-width: 380px) {
  .colonne { padding: 16px 12px; }
  .composeur { padding-left: 8px; padding-right: 8px; }
  .accueil { padding-top: 5vh; }
  .accueil-texte { font-size: 1.02rem; }
  .suggestions button { padding-top: 12px; padding-bottom: 12px; }
  .btn-gif { padding: 0 7px; }
  .entete-actions { gap: 0; }
  .icone { width: 34px; height: 34px; }
}

/* Téléphones à l'horizontale et écrans peu hauts */
@media (max-height: 520px) and (orientation: landscape) {
  .entete { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
  .statut { display: none; }
  .accueil { padding-top: 12px; }
  .accueil-sigle { width: 36px; height: 36px; }
  .accueil h2 { margin-top: 8px; font-size: 2.2rem; }
  .accueil-texte { margin-bottom: 16px; }
  .mention { display: none; }
  .composeur { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  #saisie { max-height: 30vh; }
  .panneau-gif { height: 82dvh; }
  .btn-bas { bottom: 80px; }
}

/* Écrans tactiles : actions toujours visibles, cibles plus grandes */
@media (hover: none) {
  .actions-msg, .copier-code, .langue-code { opacity: 1; }
  .conv.active .conv-suppr, .conv.active .conv-renommer { opacity: 1; }
}
@media (pointer: coarse) {
  kbd { display: none; }
  .icone { width: 42px; height: 42px; }
  .conv-lien { padding-top: 11px; padding-bottom: 11px; }
  .conv-suppr, .conv-renommer { width: 30px; height: 30px; }
  .conv-renommer { right: 35px; }
  .btn-envoyer, .btn-stop { width: 42px; height: 42px; }
  .btn-gif { height: 36px; }
}

/* Impression : seulement la conversation */
@media print {
  .barre, .entete-actions, .composeur, .btn-bas, .toast, .actions-msg, .copier-code, .btn-barre { display: none !important; }
  .app { display: block; height: auto; }
  .principal, .fil { overflow: visible; background: #fff; color: #000; }
  .msg-ia .contenu em { color: #555; }
}

/* =====================================================================
   THÈME ARES : nuit cybernétique, or et énergie bleue
   ===================================================================== */

/* Fond : circuits discrets + halos bleu et violet */
.principal {
  background:
    radial-gradient(70% 45% at 85% -5%, var(--lueur-violette), transparent 70%),
    radial-gradient(110% 55% at 50% 112%, var(--lueur), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%232f7bff' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 40h50l20 20h40M160 120h-46l-18-18H60M40 0v26l14 14M120 160v-30l-14-14'/%3E%3C/g%3E%3Cg fill='%232f7bff' fill-opacity='.12'%3E%3Ccircle cx='110' cy='60' r='2'/%3E%3Ccircle cx='60' cy='102' r='2'/%3E%3Ccircle cx='54' cy='40' r='1.6'/%3E%3C/g%3E%3C/svg%3E"),
    var(--fond);
}
[data-theme="jour"] .principal { background-blend-mode: normal; }
.barre { background: linear-gradient(180deg, var(--fond-barre), color-mix(in srgb, var(--fond-barre) 85%, #000)); }
[data-theme="jour"] .barre { background: var(--fond-barre); }

/* Mot-symbole ARES (chrome bleuté, comme le logo) */
.mot-ares {
  font-family: var(--police-titre);
  font-weight: 900;
  font-style: normal;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #ffffff 0%, #dcebff 42%, #6fa8ff 52%, #cfe2ff 72%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(70, 140, 255, .55));
  transform: skewX(-8deg);
  display: inline-block;
}
[data-theme="jour"] .mot-ares {
  background: linear-gradient(180deg, #2b4fa0 0%, #1f5fd1 50%, #0d1430 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: none;
}

/* Marque dans la barre */
.marque { gap: 11px; font: inherit; }
.marque-logo { display: block; flex: none; }
.marque-logo img { display: block; width: 40px; height: 40px; filter: drop-shadow(0 0 8px rgba(47, 123, 255, .35)); }
.marque .mot-ares { font-size: 1.25rem; }

/* Bouton nouvelle conversation */
.btn-nouveau { background: var(--verre); border-color: var(--ligne); }
.btn-nouveau:hover { border-color: var(--braise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--braise) 18%, transparent); }
.conv.active::before { background: var(--braise); box-shadow: 0 0 10px var(--braise); }
.conv.active .conv-lien { background: color-mix(in srgb, var(--braise) 12%, var(--surface)); }

/* En-tête en verre */
.entete { background: color-mix(in srgb, var(--fond) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.statut.en-ligne .point { background: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 25%, transparent), 0 0 8px var(--vert); }

/* ---------- accueil : portrait d'Ares */
.accueil { padding: 4vh 0 24px; }
.accueil-heros {
  display: grid; grid-template-columns: 1fr minmax(240px, 380px);
  align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.accueil h2.mot-ares { font-family: var(--police-titre); font-weight: 900; }
.accueil-heros .mot-ares-grand { margin: 0 0 14px; font-size: clamp(3rem, 7vw, 5.2rem); line-height: 1; }
.accueil-texte { margin: 0; max-width: 30rem; }
.accueil-portrait { position: relative; aspect-ratio: 766 / 590; }
.accueil-portrait::before {
  content: ""; position: absolute; inset: 12% 8% 0 8%;
  background: radial-gradient(closest-side, rgba(47, 123, 255, .45), transparent);
  filter: blur(18px); z-index: 0;
}
.accueil-portrait img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 58%, transparent 100%);
  animation: entree-portrait 900ms cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes entree-portrait { from { opacity: 0; transform: translateY(14px) scale(.985); filter: brightness(1.6) saturate(.6); } to { opacity: 1; transform: none; filter: none; } }

.suggestions { border-top-color: color-mix(in srgb, var(--braise) 35%, var(--ligne)); }
.suggestions strong { font-family: var(--police-ui); font-weight: 600; letter-spacing: .01em; }
.suggestions button:hover strong { color: var(--braise-vive); }

/* ---------- messages */
.msg-ia .avatar { border: 0; background: none; width: 36px; height: 36px; }
.avatar-img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 1.5px var(--bronze), 0 0 12px rgba(47, 123, 255, .35);
}
.msg-ia.en-cours .avatar { animation: energie 1.4s ease-in-out infinite; border-radius: 50%; }
@keyframes energie {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 123, 255, 0); }
  50% { box-shadow: 0 0 0 3px rgba(47, 123, 255, .35), 0 0 22px 4px rgba(88, 160, 255, .55); }
}
.auteur { font-family: var(--police-titre); font-weight: 700; font-size: 11.5px; letter-spacing: .12em; color: var(--texte-2); }
.auteur time { font-family: var(--police-ui); letter-spacing: 0; }
.ecrit span { background: var(--braise-vive); box-shadow: 0 0 8px var(--braise); }

.msg-moi .contenu {
  background: color-mix(in srgb, var(--braise) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--braise) 32%, var(--ligne));
}
.msg-ia .contenu em { color: var(--action); }
.msg-ia .contenu li::marker { color: var(--braise-vive); }
.msg-ia .contenu blockquote { border-left-color: var(--braise); }
.msg-ia .contenu a { color: var(--braise-vive); }
.msg-ia .contenu pre { border-color: color-mix(in srgb, var(--braise) 25%, var(--ligne)); box-shadow: inset 0 1px 0 rgba(88, 160, 255, .08); }

/* ---------- zone de saisie */
.composeur-cadre { background: var(--verre); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.composeur-cadre:focus-within { border-color: var(--braise); box-shadow: var(--ombre), 0 0 0 3px color-mix(in srgb, var(--braise) 20%, transparent), 0 0 24px rgba(47, 123, 255, .25); }
.btn-envoyer { background: linear-gradient(180deg, var(--braise-vive), var(--braise)); box-shadow: 0 0 14px rgba(47, 123, 255, .45); }
.btn-envoyer:hover { background: linear-gradient(180deg, #7ab4ff, var(--braise-vive)); }
.btn-envoyer:disabled { background: var(--surface-2); color: var(--texte-3); box-shadow: none; opacity: 1; }
.btn-gif:hover, .btn-gif.actif { color: var(--braise-vive); border-color: var(--braise); }
.panneau-gif { background: var(--surface); }
.gif-vignette:hover { outline-color: var(--braise-vive); }
#gif-recherche:focus, .recherche:focus { border-color: var(--braise); }
:focus-visible { outline-color: var(--braise-vive); }

/* ---------- mode immersion : Ares en fond */
.app.immersion .principal {
  background:
    radial-gradient(80% 50% at 50% 110%, rgba(47, 123, 255, .28), transparent 65%),
    radial-gradient(60% 40% at 80% 0%, var(--lueur-violette), transparent 70%),
    var(--fond);
}
@media (min-width: 1100px) {
  .app.immersion .principal::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    right: 0; bottom: 0; width: min(46vw, 760px); height: 92%;
    background: url("/images/ares-portrait.webp") right bottom / contain no-repeat;
    opacity: .13;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 30%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 30%);
            mask-composite: intersect;
  }
  .app.immersion .entete, .app.immersion .fil, .app.immersion .composeur { position: relative; z-index: 1; }
}

/* ---------- logo sur l'accueil */
.accueil-heros { grid-template-columns: 1fr minmax(200px, 288px); }
.accueil-logo { position: relative; aspect-ratio: 1; width: 100%; max-width: 288px; justify-self: center; }
.accueil-logo::before {
  content: ""; position: absolute; inset: 14%;
  background: radial-gradient(closest-side, rgba(47, 123, 255, .5), rgba(124, 76, 255, .18) 60%, transparent);
  filter: blur(22px); z-index: 0;
}
.accueil-logo picture, .accueil-logo img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.accueil-logo img { object-fit: contain; animation: entree-portrait 900ms cubic-bezier(.2, .7, .2, 1) both; }
[data-theme="jour"] .accueil-logo::before { background: radial-gradient(closest-side, rgba(47, 123, 255, .22), transparent); }

/* ---------- accueil sur petits écrans : portrait en bannière au-dessus */
@media (max-width: 860px) {
  .accueil { padding-top: 8px; }
  .accueil-heros { grid-template-columns: 1fr; gap: 0; }
  .accueil-portrait, .accueil-logo { order: -1; max-width: 200px; width: 54%; margin: 0 auto 6px; }
  .accueil-texte-bloc { text-align: center; }
  .accueil-texte { margin: 0 auto; }
  .accueil-heros .mot-ares-grand { font-size: clamp(2.6rem, 13vw, 3.6rem); margin-bottom: 10px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .accueil-heros { grid-template-columns: 1fr 170px; }
  .accueil-portrait, .accueil-logo { order: 0; width: 100%; max-width: 170px; margin: 0; }
  .accueil-texte-bloc { text-align: left; }
}

/* =====================================================================
   COMPTE ET ESPACE CLIENT
   ===================================================================== */
.compte-bouton {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 10px; margin-bottom: 4px;
  background: var(--verre); border: 1px solid var(--ligne); border-radius: 12px;
  text-align: left; color: var(--texte);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.compte-bouton:hover { border-color: var(--braise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--braise) 15%, transparent); }
.compte-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.compte-texte strong { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compte-texte small { font-size: .76rem; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.compte-avatar {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  font: 700 .8rem/1 var(--police-titre); letter-spacing: .04em; color: #fff;
  background: radial-gradient(circle at 30% 25%, var(--braise-vive), var(--braise) 55%, #10265c);
  box-shadow: 0 0 0 1.5px var(--bronze), 0 0 12px rgba(47, 123, 255, .35);
}
.compte-avatar svg { width: 18px; height: 18px; }
.app:not(.connecte) .compte-avatar { background: var(--surface-2); color: var(--texte-2); box-shadow: 0 0 0 1px var(--ligne); }
.compte-avatar.grand { width: 64px; height: 64px; font-size: 1.3rem; }

/* ---------- formulaires */
.formulaire { display: flex; flex-direction: column; gap: 14px; }
.formulaire h3 { margin: 0; font: 600 1.02rem/1.3 var(--police-ui); }
.formulaire label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 500; color: var(--texte-2); }
.formulaire label small { font-weight: 400; color: var(--texte-3); font-size: .8rem; }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="password"], .formulaire select {
  width: 100%; padding: 10px 12px;
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--ligne); border-radius: 10px; outline: none;
  font-size: 1rem; font-weight: 400;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.formulaire input:focus, .formulaire select:focus { border-color: var(--braise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--braise) 20%, transparent); }
.formulaire .case { flex-direction: row; align-items: center; gap: 9px; font-weight: 400; color: var(--texte-2); }
.formulaire .case input { width: 17px; height: 17px; accent-color: var(--braise); flex: none; }
.form-erreur {
  margin: 0; padding: 9px 12px; font-size: .88rem; color: var(--texte);
  background: color-mix(in srgb, var(--rouge) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rouge) 45%, transparent); border-radius: 9px;
}
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-principal {
  padding: 10px 18px; border: 0; border-radius: 10px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, var(--braise-vive), var(--braise));
  box-shadow: 0 0 14px rgba(47, 123, 255, .35);
}
.btn-principal:hover { filter: brightness(1.08); }
.btn-principal:disabled, .btn-secondaire:disabled, .btn-danger:disabled { opacity: .55; cursor: progress; }
.btn-principal.large { width: 100%; padding: 12px; }
a.btn-secondaire { display: inline-block; text-decoration: none; color: var(--texte); }
.btn-secondaire.petit { padding: 6px 10px; font-size: .85rem; }

/* ---------- fenêtre connexion / inscription */
.dialogue-auth { width: min(440px, calc(100vw - 24px)); padding: 22px; max-height: calc(100dvh - 24px); overflow-y: auto; }
.auth-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.auth-entete h3 { margin: 0; font: 700 1.1rem/1.2 var(--police-titre); letter-spacing: .02em; }
.auth-entete p { margin: 3px 0 0; font-size: .86rem; color: var(--texte-2); }
.auth-entete > div { flex: 1; }
.auth-logo img { display: block; width: 56px; height: 56px; filter: drop-shadow(0 0 10px rgba(47, 123, 255, .4)); }
.onglets-auth, .espace-onglets {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 18px;
  background: var(--fond); border: 1px solid var(--ligne); border-radius: 12px;
}
.onglets-auth button, .espace-onglets button {
  flex: 1; padding: 8px 10px; border: 0; border-radius: 9px; background: none;
  color: var(--texte-2); font-weight: 500; white-space: nowrap;
}
.onglets-auth button[aria-selected="true"], .espace-onglets button[aria-selected="true"] {
  background: color-mix(in srgb, var(--braise) 18%, var(--surface)); color: var(--texte);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--braise) 45%, transparent);
}
.auth-note { margin: 14px 0 0; font-size: .8rem; color: var(--texte-3); text-align: center; }

/* ---------- espace client (remplace la zone de conversation) */
.espace {
  position: absolute; inset: 0; z-index: 25;
  display: flex; flex-direction: column;
  background:
    radial-gradient(70% 45% at 85% -5%, var(--lueur-violette), transparent 70%),
    var(--fond);
}
.app.espace-ouvert .composeur, .app.espace-ouvert .fil, .app.espace-ouvert .entete, .app.espace-ouvert .btn-bas { visibility: hidden; }
.espace-entete {
  display: flex; align-items: center; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 20px 12px;
  border-bottom: 1px solid var(--ligne); min-height: 64px;
}
.espace-entete h2 { margin: 0; font: 700 1.05rem/1.2 var(--police-titre); letter-spacing: .04em; }
.espace-defilement { flex: 1; overflow-y: auto; min-height: 0; }
.espace-corps { max-width: 40rem; margin: 0 auto; padding: 28px 24px max(40px, env(safe-area-inset-bottom)); }
.espace-resume { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.espace-identite { min-width: 0; }
.espace-nom { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 1.25rem/1.25 var(--police-ui); }
.espace-nom span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-createur {
  padding: 3px 9px; border-radius: 999px; font: 700 .68rem/1.2 var(--police-titre); letter-spacing: .08em;
  color: #1a1206; background: linear-gradient(180deg, #f1d38a, var(--bronze));
}
.espace-email { margin: 3px 0 0; color: var(--texte-2); overflow-wrap: anywhere; }
.espace-meta { margin: 4px 0 0; font-size: .84rem; color: var(--texte-3); }
.espace-onglets { overflow-x: auto; scrollbar-width: none; }
.espace-panneau { display: flex; flex-direction: column; gap: 22px; }
.espace-panneau .formulaire, .bloc-donnees {
  padding: 18px; background: var(--verre); border: 1px solid var(--ligne); border-radius: 14px;
}
.bloc-donnees { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bloc-donnees h3 { margin: 0; font: 600 1.02rem/1.3 var(--police-ui); }
.espace-aide { margin: 0; font-size: .88rem; color: var(--texte-2); }
.zone-danger { border-color: color-mix(in srgb, var(--rouge) 45%, var(--ligne)) !important; }
.zone-danger h3 { color: var(--rouge); }

.liste-sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.liste-sessions li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--verre); border: 1px solid var(--ligne); border-radius: 12px;
}
.liste-sessions li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.liste-sessions li span { font-size: .82rem; color: var(--texte-3); }
.liste-sessions li.actuelle { border-color: color-mix(in srgb, var(--vert) 50%, var(--ligne)); }

@media (max-width: 860px) {
  .espace { position: fixed; z-index: 35; }
  .espace-corps { padding: 20px 14px max(32px, env(safe-area-inset-bottom)); }
  .espace-onglets button { flex: none; }
  .formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="password"], .formulaire select { font-size: 16px; }
}
@media (max-width: 380px) {
  .espace-resume { gap: 12px; }
  .compte-avatar.grand { width: 52px; height: 52px; font-size: 1.1rem; }
}
.formulaire input, .formulaire select, .formulaire button, .compte-bouton { font-family: var(--police-ui); }

/* =====================================================================
   MENU : modes Tchat IA / Tchat RP
   ===================================================================== */
.modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--fond); border: 1px solid var(--ligne); border-radius: 13px;
}
.modes button {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 8px; border: 0; border-radius: 10px; background: none;
  color: var(--texte-2); font-weight: 600; font-size: .9rem;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.modes button svg { width: 18px; height: 18px; }
.modes button:hover { color: var(--texte); }
.modes button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--braise-vive) 85%, transparent), var(--braise));
  box-shadow: 0 0 16px rgba(47, 123, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.app.mode-rp .modes button[data-mode="rp"][aria-selected="true"] {
  background: linear-gradient(180deg, #c99a4a, #9a6a22);
  box-shadow: 0 0 16px rgba(214, 171, 76, .4), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.lien-personnages { margin-top: -4px; display: none; }
.app.mode-rp .lien-personnages { display: flex; }

/* liste : conversations RP avec vignette */
.conv-lien.avec-perso { display: flex; align-items: center; gap: 10px; padding-top: 6px; padding-bottom: 6px; white-space: normal; }
.conv-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.conv-texte strong { font-weight: 600; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-texte small { font-size: .78rem; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-vide .btn-secondaire { margin-top: 10px; }

/* vignettes de personnage */
.vignette-perso {
  display: grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%;
  font: 700 .72rem/1 var(--police-titre); color: #fff;
  background: linear-gradient(140deg, hsl(var(--teinte, 220deg) 70% 55%), hsl(calc(var(--teinte, 220deg) + 40deg) 60% 30%));
  box-shadow: 0 0 0 1.5px var(--bronze);
}
.vignette-perso img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.vignette-perso.mini { width: 30px; height: 30px; }
.vignette-perso.bulle { width: 36px; height: 36px; box-shadow: 0 0 0 1.5px var(--bronze), 0 0 12px rgba(214, 171, 76, .35); }

/* compte avec bannière */
.compte-bouton { position: relative; overflow: hidden; isolation: isolate; }
.compte-fond {
  position: absolute; inset: 0; z-index: -1;
  background: center / cover no-repeat; opacity: .38;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
}
.compte-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.compte-avatar:has(img) { background: none; }

/* en-tête RP */
.entete-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none;
  box-shadow: 0 0 0 1.5px var(--bronze), 0 0 14px rgba(214, 171, 76, .35);
}

/* RP : portrait du personnage en fond (mode immersion) */
@media (min-width: 1100px) {
  .app.immersion.rp-actif .principal::before {
    background-image: var(--portrait, url("/images/ares-portrait.webp"));
    background-size: cover; background-position: center 20%;
    opacity: .12;
  }
}

/* =====================================================================
   IMAGES DANS LE TCHAT
   ===================================================================== */
.btn-image {
  display: grid; place-items: center; flex: none; align-self: flex-end;
  width: 34px; height: 34px; margin: 2px 0; padding: 0;
  background: none; border: 1.5px solid var(--ligne); border-radius: 9px; color: var(--texte-2);
  transition: color var(--transition), border-color var(--transition);
}
.btn-image svg { width: 18px; height: 18px; }
.btn-image:hover { color: var(--braise-vive); border-color: var(--braise); }
.pieces {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-width: var(--largeur-texte); margin: 0 auto 8px; padding: 0 2px;
}
.pieces.envoi::after {
  content: "Envoi…"; align-self: center; font-size: .82rem; color: var(--texte-3);
}
.piece { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; border: 1px solid var(--ligne); background: var(--surface); }
.piece img { width: 100%; height: 100%; object-fit: cover; display: block; }
.piece-retirer {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(4, 6, 14, .75); color: #fff;
}
.piece-retirer svg { width: 13px; height: 13px; }
.galerie-msg { display: flex; flex-wrap: wrap; gap: 6px; margin: .25em 0 .6em; }
.galerie-msg:last-child { margin-bottom: 0; }
.image-msg { display: inline-block; vertical-align: top; border-radius: 12px; overflow: hidden; border: 1px solid var(--ligne); background: var(--surface); line-height: 0; }
.image-msg img { display: block; max-width: min(100%, 300px); max-height: 300px; width: auto; height: auto; object-fit: cover; }
.galerie-msg .image-msg:only-child img { max-width: min(100%, 380px); max-height: 380px; }
.msg-moi .contenu:has(.galerie-msg) { padding: 6px; }
.msg-moi .contenu:has(.galerie-msg) > div { padding: 4px 9px 6px; }
.app.depot .composeur-cadre { border-color: var(--braise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--braise) 30%, transparent), 0 0 30px rgba(47, 123, 255, .35); }
.app.depot .composeur::before {
  content: "Dépose ton image ici"; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px; background: var(--braise); color: #fff; font-size: .85rem; font-weight: 600;
}

/* fenêtre d'ajout d'image */
.dialogue-image { width: min(420px, calc(100vw - 24px)); }
.dialogue-image .btn-principal { display: flex; align-items: center; justify-content: center; gap: 9px; }
.dialogue-image .btn-principal svg { width: 19px; height: 19px; }
.separateur { display: flex; align-items: center; gap: 10px; color: var(--texte-3); font-size: .82rem; }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.formulaire input[type="url"] {
  width: 100%; padding: 10px 12px; background: var(--fond); color: var(--texte);
  border: 1px solid var(--ligne); border-radius: 10px; outline: none; font: 400 1rem var(--police-ui);
}
.formulaire input[type="url"]:focus, .formulaire textarea:focus, .formulaire input[type="number"]:focus { border-color: var(--braise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--braise) 20%, transparent); }
.formulaire textarea, .formulaire input[type="number"] {
  width: 100%; padding: 10px 12px; background: var(--fond); color: var(--texte);
  border: 1px solid var(--ligne); border-radius: 10px; outline: none; resize: vertical;
  font: 400 1rem/1.5 var(--police-ui);
}
.lien-discret { padding: 4px 6px; border: 0; background: none; color: var(--texte-3); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.lien-discret:hover { color: var(--rouge); }
.btn-principal.petit { padding: 7px 13px; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; }
.btn-principal.petit svg { width: 16px; height: 16px; }

/* =====================================================================
   PROFIL : photo et bannière
   ===================================================================== */
.profil-banniere {
  height: 150px; margin: -28px -24px 0; border-bottom: 1px solid var(--ligne);
  background: center / cover no-repeat,
    radial-gradient(80% 120% at 20% 0%, rgba(47, 123, 255, .35), transparent 60%),
    radial-gradient(70% 120% at 90% 10%, rgba(214, 171, 76, .25), transparent 60%),
    var(--surface);
}
.profil-banniere.vide { background-image:
    radial-gradient(80% 120% at 20% 0%, rgba(47, 123, 255, .35), transparent 60%),
    radial-gradient(70% 120% at 90% 10%, rgba(214, 171, 76, .25), transparent 60%); }
.profil-banniere + .espace-resume { margin-top: -34px; position: relative; }
.profil-banniere + .espace-resume .compte-avatar.grand { width: 88px; height: 88px; font-size: 1.6rem; box-shadow: 0 0 0 3px var(--fond), 0 0 0 4.5px var(--bronze), 0 0 20px rgba(47, 123, 255, .4); }
.profil-banniere + .espace-resume .espace-identite { padding-top: 34px; }
.visuels-ligne { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.visuel-bloc { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.visuel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.apercu-banniere {
  width: 100%; aspect-ratio: 3 / 1; border-radius: 12px; border: 1px solid var(--ligne);
  background: center / cover no-repeat, var(--fond);
}
@media (max-width: 560px) { .visuels-ligne { grid-template-columns: 1fr; } }

/* =====================================================================
   STUDIO DE PERSONNAGES
   ===================================================================== */
.studio {
  position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column;
  background:
    radial-gradient(60% 40% at 15% -5%, rgba(214, 171, 76, .12), transparent 70%),
    radial-gradient(70% 45% at 90% -5%, var(--lueur-violette), transparent 70%),
    var(--fond);
}
.app.studio-ouvert .composeur, .app.studio-ouvert .fil, .app.studio-ouvert .entete, .app.studio-ouvert .btn-bas { visibility: hidden; }
.studio .espace-entete h2 { flex: 1; }
.studio-galerie, .editeur { max-width: 72rem; margin: 0 auto; padding: 26px 24px 48px; }
.studio-intro h3 { margin: 0 0 6px; font: 700 1.5rem/1.2 var(--police-titre); letter-spacing: .02em; }
.studio-intro p { margin: 0 0 18px; max-width: 46rem; color: var(--texte-2); }
.filtres { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--fond); border: 1px solid var(--ligne); border-radius: 12px; }
.filtres button { padding: 7px 14px; border: 0; border-radius: 9px; background: none; color: var(--texte-2); font-weight: 500; }
.filtres button[aria-selected="true"] { background: color-mix(in srgb, var(--bronze) 22%, var(--surface)); color: var(--texte); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bronze) 50%, transparent); }

.grille-perso { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.carte-perso {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--verre); border: 1px solid var(--ligne); border-radius: 16px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.grille-perso .carte-perso:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--bronze) 60%, var(--ligne)); box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 24px rgba(214, 171, 76, .15); }
.carte-visuel { position: relative; aspect-ratio: 3 / 4; overflow: hidden; cursor: pointer; background: var(--surface); }
.carte-visuel img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform 400ms ease; }
.grille-perso .carte-perso:hover .carte-visuel img { transform: scale(1.04); }
.carte-visuel::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(4, 6, 14, .85)); pointer-events: none; }
.carte-visuel.sans-image { display: grid; place-items: center; background: linear-gradient(150deg, hsl(var(--teinte) 65% 45%), hsl(calc(var(--teinte) + 50deg) 55% 18%)); }
.carte-visuel.sans-image > span:not(.carte-badge) { font: 900 3rem/1 var(--police-titre); color: rgba(255, 255, 255, .9); text-shadow: 0 0 30px rgba(0, 0, 0, .4); }
.carte-badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 3px 9px; border-radius: 999px; font: 700 .66rem/1.3 var(--police-titre); letter-spacing: .06em;
  color: #1a1206; background: linear-gradient(180deg, #f1d38a, var(--bronze));
}
.carte-corps { padding: 12px 14px 6px; }
.carte-corps h4 { margin: 0; font: 700 1.05rem/1.2 var(--police-ui); }
.carte-meta { margin: 2px 0 6px; font-size: .8rem; color: var(--bronze); }
.carte-accroche { margin: 0 0 8px; font-size: .86rem; color: var(--texte-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carte-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.carte-tags span { padding: 2px 8px; border-radius: 999px; font-size: .72rem; color: var(--texte-2); background: var(--surface-2); border: 1px solid var(--ligne); }
.carte-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px 14px; margin-top: auto; }
.galerie-vide { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border: 1px dashed var(--ligne); border-radius: 16px; color: var(--texte-2); }

/* éditeur */
.etapes { display: flex; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; overflow-x: auto; scrollbar-width: none; }
.etapes li {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: max-content;
  padding: 9px 12px; border-radius: 11px; cursor: pointer;
  background: var(--verre); border: 1px solid var(--ligne); color: var(--texte-3); font-weight: 500; font-size: .9rem;
}
.etapes li span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font: 700 .75rem/1 var(--police-titre); background: var(--surface-2); color: var(--texte-2);
}
.etapes li.active { color: var(--texte); border-color: color-mix(in srgb, var(--bronze) 60%, var(--ligne)); box-shadow: 0 0 18px rgba(214, 171, 76, .15); }
.etapes li.active span, .etapes li.faite span { background: linear-gradient(180deg, #f1d38a, var(--bronze)); color: #1a1206; }
.editeur-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.editeur-form { padding: 20px; background: var(--verre); border: 1px solid var(--ligne); border-radius: 16px; }
.editeur-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.champs-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.etiquette-titre { display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 600; color: var(--texte-2); letter-spacing: .02em; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puces button {
  padding: 6px 11px; border-radius: 999px; font-size: .84rem;
  background: var(--fond); color: var(--texte-2); border: 1px solid var(--ligne);
  transition: all var(--transition);
}
.puces button:hover { border-color: var(--bronze); color: var(--texte); }
.puces button[aria-pressed="true"] { color: #1a1206; border-color: transparent; background: linear-gradient(180deg, #f1d38a, var(--bronze)); }
.perso-photo-ligne { display: flex; align-items: center; gap: 16px; }
.perso-photo {
  display: grid; place-items: center; flex: none; width: 96px; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--bronze) 60%, var(--ligne)); background: var(--fond); color: var(--texte-3);
}
.perso-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perso-photo svg { width: 28px; height: 28px; }
.editeur-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; }
.espace-flex { flex: 1; }
.apercu-carte { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.apercu-carte .carte-perso { pointer-events: none; }
.apercu-message {
  padding: 12px 14px; border-radius: 14px; background: var(--verre); border: 1px solid var(--ligne);
  font: 400 .98rem/1.6 var(--police-ares);
}
.apercu-message em { color: var(--action); font-style: italic; }
.apercu-message p { margin: 0 0 .6em; }
.apercu-message p:last-child { margin: 0; }

@media (max-width: 960px) {
  .editeur-grille { grid-template-columns: 1fr; }
  .apercu-carte { position: static; max-width: 280px; }
}
@media (max-width: 860px) {
  .studio { position: fixed; z-index: 35; }
  .studio-galerie, .editeur { padding: 18px 14px 40px; }
  .grille-perso { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .carte-actions { padding: 8px 10px 12px; }
  .studio .espace-entete .btn-principal span { display: none; }
  .champs-deux { grid-template-columns: 1fr; }
  .etapes li { flex: none; }
  .profil-banniere { margin: -20px -14px 0; height: 120px; }
}
@media (max-width: 380px) {
  .grille-perso { grid-template-columns: 1fr 1fr; gap: 10px; }
  .carte-corps { padding: 10px 10px 4px; }
}

/* =====================================================================
   ACTIONS SUR LES MESSAGES : versions, régénérer, notes, modifier
   ===================================================================== */
.actions-msg { flex-wrap: wrap; align-items: center; }
.actions-msg button.actif { color: var(--braise-vive); }
.actions-msg button.bas svg { transform: rotate(180deg); }
.actions-msg button:disabled { opacity: .3; cursor: default; }
.versions { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; padding: 0 4px; border-right: 1px solid var(--ligne); font-size: 12.5px; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.versions button { padding: 4px; }
.versions button.suivante svg { transform: rotate(180deg); }
.msg-moi { flex-direction: column; align-items: flex-end; gap: 4px; }
.actions-moi { display: flex; gap: 2px; opacity: 0; transition: opacity var(--transition); }
.msg-moi:hover .actions-moi, .actions-moi:focus-within { opacity: 1; }
.actions-moi button { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: none; border: 0; border-radius: 6px; font-size: 12.5px; color: var(--texte-3); }
.actions-moi button:hover { background: var(--surface); color: var(--texte); }
.actions-moi svg { width: 15px; height: 15px; }
.edition-msg { width: min(100%, 38rem); display: flex; flex-direction: column; gap: 8px; }
.edition-msg textarea {
  width: 100%; padding: 10px 14px; resize: vertical; outline: none;
  background: var(--surface); color: var(--texte); border: 1px solid var(--braise); border-radius: var(--rayon);
  font: 400 1rem/1.5 var(--police-ui); box-shadow: 0 0 0 3px color-mix(in srgb, var(--braise) 18%, transparent);
}
.edition-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (hover: none) { .actions-moi { opacity: 1; } }

/* =====================================================================
   LOT 2 : projets, joindre, documents, mémoire, voix, partage
   ===================================================================== */
.icone.mini { width: 26px; height: 26px; border-radius: 7px; }
.icone.mini svg { width: 15px; height: 15px; }

/* projets dans le menu */
.projets-bloc { display: flex; flex-direction: column; gap: 4px; }
.projets-titre { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 8px; font-size: 12px; color: var(--texte-3); }
.projets-liste { display: flex; flex-direction: column; gap: 1px; max-height: 30vh; overflow-y: auto; scrollbar-width: thin; }
.projet { position: relative; display: flex; align-items: center; border-radius: 8px; }
.projet-lien {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  padding: 7px 34px 7px 9px; border: 0; border-radius: 8px; background: none; color: var(--texte-2); text-align: left;
}
.projet-lien svg { width: 17px; height: 17px; color: var(--bronze); }
.projet-lien span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projet-lien small { color: var(--texte-3); font-size: 11.5px; }
.projet-lien:hover { background: var(--surface); color: var(--texte); }
.projet.actif .projet-lien { background: color-mix(in srgb, var(--bronze) 16%, var(--surface)); color: var(--texte); }
.projet-editer { position: absolute; right: 4px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--texte-3); opacity: 0; }
.projet-editer svg { width: 15px; height: 15px; }
.projet:hover .projet-editer, .projet.actif .projet-editer, .projet-editer:focus-visible { opacity: 1; }
.projets-vide { margin: 2px 8px 4px; font-size: 12px; color: var(--texte-3); }
.conv-projet { display: block; margin-top: 1px; font-size: 11px; color: var(--bronze); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: none) { .projet-editer { opacity: 1; } }

/* menu « joindre » */
.joindre { position: relative; flex: none; align-self: flex-end; }
.menu-joindre {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; min-width: 250px;
  padding: 6px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; box-shadow: var(--ombre);
  animation: apparition 140ms ease-out;
}
.menu-joindre button {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 10px; background: none; text-align: left; color: var(--texte);
}
.menu-joindre button:hover { background: var(--surface-2); }
.menu-joindre svg { width: 20px; height: 20px; color: var(--braise-vive); }
.menu-joindre span { display: flex; flex-direction: column; line-height: 1.25; }
.menu-joindre strong { font-weight: 600; font-size: .92rem; }
.menu-joindre small { font-size: .78rem; color: var(--texte-3); }

/* pièces jointes : documents */
.piece.piece-doc {
  width: auto; max-width: 240px; height: 44px; padding: 0 34px 0 10px;
  display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--texte);
}
.piece.piece-doc svg { width: 20px; height: 20px; flex: none; color: var(--bronze); }
.piece.piece-doc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piece.piece-doc .piece-retirer { top: 11px; }
.pieces.envoi::after { content: "Préparation…"; }

/* documents dans les messages */
.doc-msg { margin: .3em 0 .6em; border: 1px solid var(--ligne); border-radius: 12px; background: var(--surface); overflow: hidden; font-family: var(--police-ui); }
.doc-msg summary { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; list-style: none; font-size: .9rem; }
.doc-msg summary::-webkit-details-marker { display: none; }
.doc-msg summary svg { width: 20px; height: 20px; color: var(--bronze); flex: none; }
.doc-msg summary strong { font-weight: 600; overflow-wrap: anywhere; }
.doc-msg summary small { margin-left: auto; color: var(--texte-3); font-size: .78rem; white-space: nowrap; }
.doc-msg pre { margin: 0; max-height: 260px; overflow: auto; padding: 10px 12px; border-top: 1px solid var(--ligne); background: var(--code-fond); color: #d9def0; font: .78rem/1.55 var(--police-code); white-space: pre-wrap; }
.msg-moi .contenu:has(.doc-msg) { min-width: min(100%, 320px); }

/* mémoire */
.note-memoire {
  display: inline-flex; align-items: center; gap: 6px; margin: .6em 0 0 !important; padding: 4px 10px;
  border-radius: 999px; font: 500 .78rem/1.4 var(--police-ui); color: var(--bronze);
  background: color-mix(in srgb, var(--bronze) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bronze) 35%, transparent);
}
.note-memoire::before { content: "✦"; }
.ajout-memoire { display: flex; gap: 8px; }
.ajout-memoire input { flex: 1; min-width: 0; padding: 9px 12px; background: var(--fond); color: var(--texte); border: 1px solid var(--ligne); border-radius: 10px; outline: none; font: 400 1rem var(--police-ui); }
.ajout-memoire input:focus { border-color: var(--braise); }
.liste-memoire { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-memoire li { display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 12px; background: var(--fond); border: 1px solid var(--ligne); border-radius: 10px; }
.liste-memoire li span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .92rem; }
.liste-memoire li small { color: var(--texte-3); font-size: .75rem; white-space: nowrap; }
.liste-memoire li.memoire-vide { color: var(--texte-3); font-size: .9rem; justify-content: center; }

/* micro */
.btn-micro {
  display: grid; place-items: center; flex: none; align-self: flex-end;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--texte-2);
}
.btn-micro svg { width: 20px; height: 20px; }
.btn-micro:hover { color: var(--texte); background: var(--surface-2); }
.btn-micro.actif { color: #fff; background: var(--rouge); animation: micro 1.2s ease-in-out infinite; }
@keyframes micro { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rouge) 25%, transparent); } }

/* partage */
.lien-partage { display: flex; gap: 8px; }
.lien-partage input { flex: 1; min-width: 0; padding: 9px 12px; background: var(--fond); color: var(--texte); border: 1px solid var(--ligne); border-radius: 10px; font: 400 .9rem var(--police-code); }
.dialogue-actions { align-items: center; }

/* page publique de partage */
.page-partage { height: auto; min-height: 100%; overflow: auto; background:
  radial-gradient(70% 45% at 85% -5%, var(--lueur-violette), transparent 70%), var(--fond); }
.partage-entete {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 20px 12px; border-bottom: 1px solid var(--ligne);
  background: color-mix(in srgb, var(--fond) 80%, transparent); backdrop-filter: blur(10px);
}
.partage-entete .btn-principal { text-decoration: none; }
.partage-corps { max-width: var(--largeur-texte); margin: 0 auto; padding: 28px 20px 60px; }
.partage-etiquette { margin: 0 0 6px; font-size: .8rem; color: var(--bronze); letter-spacing: .02em; }
.partage-corps h1 { margin: 0 0 4px; font: 700 1.5rem/1.25 var(--police-ui); }
.partage-meta { margin: 0 0 26px; color: var(--texte-3); font-size: .88rem; }
.partage-fin { margin-top: 36px; text-align: center; color: var(--texte-3); font-size: .82rem; }

/* =====================================================================
   LOT 3 : ARES SOCIAL (Tchat RP façon Instagram)
   ===================================================================== */
.social-onglets {
  position: sticky; top: 0; z-index: 4; display: flex; gap: 4px; margin: -6px 0 18px; padding: 6px 0;
  background: color-mix(in srgb, var(--fond) 88%, transparent); backdrop-filter: blur(8px);
  overflow-x: auto; scrollbar-width: none;
}
.social-onglets button {
  position: relative; padding: 8px 16px; border: 0; border-radius: 999px; background: none;
  color: var(--texte-2); font-weight: 600; white-space: nowrap;
}
.social-onglets button[aria-selected="true"] { color: #1a1206; background: linear-gradient(180deg, #f1d38a, var(--bronze)); }
.pastille { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--rouge); color: #fff; font-size: 11px; }
.vue-social { max-width: 40rem; margin: 0 auto; }
.vue-social[data-vue-panneau="explorer"], .vue-social[data-vue-panneau="personnages"], .vue-social[data-vue-panneau="moderation"] { max-width: none; }
.squelette { height: 200px; border-radius: 16px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: squelette 1.2s linear infinite; }
@keyframes squelette { to { background-position: -200% 0; } }

/* avatars ronds avec anneau de story */
.avatar-social { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; }
.avatar-social .vignette-perso.plein { width: 100%; height: 100%; font-size: .9rem; box-shadow: none; }
.avatar-social.petit { width: 34px; height: 34px; }
.avatar-social.moyen { width: 62px; height: 62px; }
.avatar-social.grand { width: 110px; height: 110px; }
.avatar-social.grand .vignette-perso.plein { font-size: 2rem; }
.avatar-social.story { padding: 3px; background: conic-gradient(from 210deg, #f1d38a, var(--bronze), #e5484d, var(--braise-vive), #f1d38a); }
.avatar-social.story .vignette-perso { box-shadow: 0 0 0 2.5px var(--fond); }
.avatar-social.ajout { background: var(--surface-2); border: 1.5px dashed color-mix(in srgb, var(--bronze) 60%, var(--ligne)); color: var(--bronze); }
.avatar-social.ajout svg { width: 24px; height: 24px; }
.avatar-social.cliquable { cursor: pointer; }

/* barre de stories */
.barre-stories { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--ligne); scrollbar-width: none; }
.story-bulle { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 72px; padding: 0; border: 0; background: none; color: var(--texte-2); }
.story-bulle small { max-width: 100%; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions-fil { display: flex; gap: 8px; margin: 14px 0; }

/* publications */
.fil-publications { display: flex; flex-direction: column; gap: 22px; }
.publication { background: var(--verre); border: 1px solid var(--ligne); border-radius: 18px; overflow: hidden; }
.publication > header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.publication > header time { margin-left: auto; color: var(--texte-3); font-size: .78rem; }
.lien-profil { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 0; border: 0; background: none; color: var(--texte); text-align: left; line-height: 1.2; }
.lien-profil strong { font-weight: 700; font-size: .92rem; }
.lien-profil small { color: var(--texte-3); font-size: .76rem; }
.lien-profil:hover strong { color: var(--bronze); }
.statut-pub { padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; white-space: nowrap; }
.statut-pub.prive { background: var(--surface-2); color: var(--texte-2); }
.statut-pub.en_attente { background: color-mix(in srgb, var(--bronze) 22%, transparent); color: var(--action); }
.statut-pub.refuse { background: color-mix(in srgb, var(--rouge) 20%, transparent); color: var(--rouge); }
.publication-image { position: relative; aspect-ratio: 4 / 5; background: var(--surface); user-select: none; }
.publication-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coeur-volant { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; color: #fff; }
.coeur-volant svg { width: 96px; height: 96px; fill: currentColor; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .5)); }
.coeur-volant.anime { animation: coeur 800ms ease-out; }
@keyframes coeur { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.publication-actions { display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px; }
.publication-actions .jaime { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--texte); }
.publication-actions .jaime svg { width: 26px; height: 26px; }
.publication-actions .jaime.actif { color: var(--rouge); }
.publication-actions .jaime.actif svg { fill: currentColor; }
.publication-actions .btn-secondaire { margin-left: auto; }
.nb-jaimes { font-weight: 700; font-size: .88rem; }
.publication-legende { margin: 0; padding: 4px 14px 14px; font-size: .93rem; line-height: 1.5; overflow-wrap: anywhere; }
.publication-legende strong { margin-right: 4px; }
.menu-contenu { color: var(--texte-3); }

/* profil */
.profil-tete { display: flex; gap: 26px; align-items: flex-start; margin: 4px 0 24px; }
.profil-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.profil-nom { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.profil-nom h3 { margin: 0; font: 700 1.45rem/1.15 var(--police-ui); }
.profil-nom .carte-badge { position: static; }
.profil-handle { margin: 0; color: var(--texte-3); }
.profil-stats { display: flex; gap: 18px; color: var(--texte-2); font-size: .92rem; }
.profil-stats strong { color: var(--texte); font-size: 1.05rem; }
.profil-bio { margin: 2px 0; color: var(--texte); }
.profil-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.grille-publications { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-top: 1px solid var(--ligne); padding-top: 4px; }
.vignette-pub { position: relative; aspect-ratio: 4 / 5; padding: 0; border: 0; overflow: hidden; background: var(--surface); }
.vignette-pub img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms ease; }
.vignette-pub:hover img { transform: scale(1.04); }
.vignette-pub .statut-pub { position: absolute; left: 6px; top: 6px; }
.vignette-jaimes { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(4, 6, 14, .7); color: #fff; font-size: .74rem; font-weight: 600; }
.dialogue-publication { width: min(520px, calc(100vw - 16px)); padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; }
.publication-vue { position: relative; }
.fermer-publication { position: absolute; top: -46px; right: 0; color: #fff; background: rgba(4, 6, 14, .6); }

/* explorer */
.explorer-recherche { margin-bottom: 12px; }
.filtres-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.puce-tag { padding: 5px 11px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--fond); color: var(--texte-2); font-size: .84rem; }
.puce-tag.actif, .puce-tag:hover { color: #1a1206; border-color: transparent; background: linear-gradient(180deg, #f1d38a, var(--bronze)); }
.carte-stats { margin: 6px 0 0; font-size: .76rem; color: var(--texte-3); }

/* publier */
.publier-image { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.publier-image img { width: 100%; max-height: 340px; object-fit: contain; border-radius: 12px; background: var(--fond); }
.choisir-image { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: 16 / 9; border: 1.5px dashed color-mix(in srgb, var(--bronze) 60%, var(--ligne)); border-radius: 14px; background: var(--fond); color: var(--texte-2); font-weight: 500; }
.choisir-image svg { width: 30px; height: 30px; color: var(--bronze); }
.btn-danger.petit { padding: 7px 13px; font-size: .88rem; }

/* visionneuse de stories */
.visionneuse-story { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(2, 3, 8, .96); }
.story-image { max-width: min(100vw, 56.25vh); max-height: 100dvh; width: 100%; height: 100%; object-fit: contain; }
.story-barres { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 4px; width: min(92vw, 520px); z-index: 2; }
.story-barres span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; position: relative; }
.story-barres span.faite { background: #fff; }
.story-barres span.active::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: progression-story 5s linear forwards; }
@keyframes progression-story { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.story-entete { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 14px); left: 50%; transform: translateX(-50%); width: min(92vw, 520px); display: flex; align-items: center; gap: 10px; color: #fff; z-index: 2; }
.story-entete small { color: rgba(255, 255, 255, .7); }
.story-entete .menu-contenu { margin-left: auto; color: #fff; margin-right: 40px; }
.story-zone { position: absolute; top: 0; bottom: 0; width: 40%; border: 0; background: none; z-index: 1; }
.story-zone.gauche { left: 0; }
.story-zone.droite { right: 0; }
.story-fermer { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 8px); right: 14px; z-index: 3; color: #fff; }
.sans-defilement { overflow: hidden; }

/* modération */
.moderation-titre { margin: 22px 0 10px; font: 700 1.05rem/1.3 var(--police-ui); }
.carte-moderation { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 12px; margin-bottom: 10px; background: var(--verre); border: 1px solid var(--ligne); border-radius: 14px; }
.carte-moderation > img { width: 140px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.carte-moderation p { margin: 4px 0; font-size: .86rem; color: var(--texte-2); overflow-wrap: anywhere; }
.carte-moderation .carte-actions { padding: 8px 0 0; }

@media (max-width: 640px) {
  .profil-tete { gap: 16px; }
  .avatar-social.grand { width: 84px; height: 84px; }
  .profil-nom h3 { font-size: 1.2rem; }
  .carte-moderation { grid-template-columns: 1fr; }
  .carte-moderation > img { width: 100%; max-height: 300px; }
  .publication { border-radius: 14px; }
}

/* =====================================================================
   FINITIONS : coloration du code, épinglées, recherche, préférences
   ===================================================================== */
/* coloration syntaxique (fond de code toujours sombre) */
.tk-kw { color: #c792ea; }
.tk-str { color: #c3e88d; }
.tk-num { color: #f78c6c; }
.tk-com { color: #6b7894; font-style: italic; }
.tk-fn { color: #82aaff; }

/* conversations épinglées */
.conv-epingler {
  position: absolute; right: 58px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--texte-3); opacity: 0;
  transition: opacity var(--transition), color var(--transition);
}
.conv-epingler svg { width: 15px; height: 15px; }
.conv:hover .conv-epingler, .conv-epingler:focus-visible, .conv-epingler.actif { opacity: 1; }
.conv-epingler.actif { color: var(--bronze); }
.conv-epingler.actif svg { fill: currentColor; }
.conv-lien { padding-right: 88px; }
.conv:has(.edition-titre) .conv-epingler { display: none; }
@media (hover: none) { .conv.active .conv-epingler { opacity: 1; } }
@media (pointer: coarse) { .conv-epingler { right: 66px; width: 30px; height: 30px; } }

/* recherche dans les messages */
.resultats-recherche { margin-top: 6px; padding-top: 4px; border-top: 1px dashed var(--ligne); }
.resultat-recherche { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--texte-2); text-align: left; }
.resultat-recherche:hover { background: var(--surface); color: var(--texte); }
.resultat-recherche strong { font-size: .86rem; font-weight: 600; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultat-recherche small { font-size: .78rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.resultat-recherche mark { background: color-mix(in srgb, var(--bronze) 40%, transparent); color: var(--texte); border-radius: 3px; padding: 0 2px; }

/* préférences */
.kbd-discret { margin-left: auto; opacity: .7; }
.dialogue-preferences { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.choix legend { width: 100%; margin-bottom: 6px; font-size: .88rem; font-weight: 600; color: var(--texte-2); }
.choix label { flex: 1; min-width: 90px; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix span {
  display: block; padding: 9px 10px; border: 1px solid var(--ligne); border-radius: 10px; background: var(--fond);
  text-align: center; color: var(--texte-2); cursor: pointer; transition: all var(--transition);
}
.choix input:checked + span { color: var(--texte); border-color: var(--braise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--braise) 20%, transparent); }
.choix input:focus-visible + span { outline: 2px solid var(--braise-vive); outline-offset: 2px; }
.apercu-roman { font-family: var(--police-ares); font-size: 1.05rem; }
.apercu-moderne { font-family: var(--police-ui); }
.pref-sous-titre { margin: 6px 0 0; font: 600 .95rem/1.3 var(--police-ui); }
.raccourcis { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: .88rem; }
.raccourcis dt { white-space: nowrap; }
.raccourcis dd { margin: 0; color: var(--texte-2); }
.raccourcis kbd { display: inline-block; min-width: 22px; text-align: center; }

/* taille du texte et police */
[data-taille="petit"] { font-size: 93.75%; }
[data-taille="grand"] { font-size: 112.5%; }
@media (min-width: 2000px) { [data-taille="petit"] { font-size: 105%; } [data-taille="grand"] { font-size: 125%; } }
[data-police="moderne"] .msg-ia .contenu { font-family: var(--police-ui); font-size: 1rem; line-height: 1.65; }
.reduire-animations *, .reduire-animations *::before, .reduire-animations *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* =====================================================================
   VIE AUTONOME : commentaires, texte des stories, style et photothèque
   ===================================================================== */
.publication-actions .commenter svg { width: 25px; height: 25px; }
.voir-commentaires { display: block; margin: -6px 14px 12px; padding: 0; border: 0; background: none; color: var(--texte-3); font-size: .86rem; }
.voir-commentaires:hover { color: var(--texte); }
.commentaires { border-top: 1px solid var(--ligne); }
.liste-commentaires { max-height: min(42vh, 360px); overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.commentaires-vide { margin: 4px 0; color: var(--texte-3); font-size: .86rem; }
.commentaire { display: flex; align-items: flex-start; gap: 10px; }
.commentaire.reponse { margin-left: 34px; }
.commentaire > div { flex: 1; min-width: 0; }
.commentaire p { margin: 0; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.commentaire p strong { margin-right: 3px; }
.commentaire.du-perso p strong { color: var(--bronze); }
.commentaire small { color: var(--texte-3); font-size: .74rem; }
.commentaire .icone.mini { opacity: .55; }
.commentaire:hover .icone.mini { opacity: 1; }
.compte-avatar.mini { width: 30px; height: 30px; font-size: .68rem; }
.ajout-commentaire { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--ligne); }
.ajout-commentaire input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--fond); color: var(--texte); outline: none; font: 400 .95rem var(--police-ui); }
.ajout-commentaire input:focus { border-color: var(--braise); }
.dialogue-publication .publication { max-height: calc(100dvh - 80px); overflow-y: auto; }

/* texte sur les stories */
.story-texte {
  position: absolute; left: 50%; bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)); transform: translateX(-50%);
  width: min(88vw, 480px); margin: 0; padding: 12px 16px; z-index: 2; text-align: center;
  font: 600 1.05rem/1.4 var(--police-ui); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  background: linear-gradient(transparent, rgba(0, 0, 0, .45) 30%); border-radius: 14px;
}

/* panneau « vie autonome » */
.vie-autonome { margin: 0 0 22px; padding: 16px; background: var(--verre); border: 1px solid color-mix(in srgb, var(--bronze) 35%, var(--ligne)); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
.vie-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vie-autonome h4 { display: flex; align-items: center; gap: 6px; margin: 0; font: 700 1rem/1.3 var(--police-ui); }
.vie-autonome h4 svg { width: 18px; height: 18px; color: var(--bronze); }
.interrupteur { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--texte-2); cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; pointer-events: none; }
.interrupteur span { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--ligne); transition: background var(--transition); }
.interrupteur span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--texte-2); transition: transform var(--transition), background var(--transition); }
.interrupteur input:checked + span { background: color-mix(in srgb, var(--vert) 45%, var(--surface)); }
.interrupteur input:checked + span::after { transform: translateX(18px); background: #fff; }
.interrupteur input:focus-visible + span { outline: 2px solid var(--braise-vive); outline-offset: 2px; }
.style-social { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .88rem; }
.style-social dt { color: var(--texte-3); }
.style-social dd { margin: 0; color: var(--texte); overflow-wrap: anywhere; }
.phototheque { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.photo-item, .photo-ajout { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-item .statut-pub { position: absolute; left: 4px; bottom: 4px; font-size: .62rem; }
.statut-pub.public-ok { background: color-mix(in srgb, var(--vert) 25%, rgba(4, 6, 14, .6)); color: #fff; }
.photo-item .vignette-jaimes { right: 4px; bottom: 4px; font-size: .66rem; }
.photo-retirer { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(4, 6, 14, .75); color: #fff; }
.photo-retirer svg { width: 13px; height: 13px; }
.photo-ajout { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed color-mix(in srgb, var(--bronze) 60%, var(--ligne)); background: var(--fond); color: var(--texte-2); font-size: .82rem; }
.photo-ajout svg { width: 22px; height: 22px; color: var(--bronze); }

/* =====================================================================
   CARTES TEXTE (publications et stories sans photo), badge auto, style
   ===================================================================== */
.carte-texte {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%;
  padding: 12%; text-align: center; color: #fff; overflow: hidden; isolation: isolate;
}
.carte-texte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 30% 20%, rgba(255,255,255,.18), transparent 60%); }
.carte-texte p { margin: 0; font: 600 clamp(1.15rem, 4.2vw, 1.7rem)/1.35 var(--police-ares); text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.carte-texte.long p { font-size: clamp(1rem, 3.4vw, 1.3rem); }
.carte-texte.mini { padding: 10%; }
.carte-texte.mini p { font-size: .72rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.carte-texte.story-fond { position: absolute; inset: 0; width: min(100vw, 56.25vh); height: 100dvh; margin: 0 auto; }
.carte-texte.story-fond p { font-size: clamp(1.4rem, 5vw, 2rem); }
.fond-nuit { background: linear-gradient(160deg, #0b1230, #2f2a7a 55%, #2f7bff); }
.fond-aube { background: linear-gradient(160deg, #ff9a8b, #ff6a88 45%, #8e54e9); }
.fond-braise { background: linear-gradient(160deg, #3a0a0a, #b3261e 55%, #ff8a3d); }
.fond-ocean { background: linear-gradient(160deg, #04263a, #0b6e99 55%, #2ec4b6); }
.fond-rose { background: linear-gradient(160deg, #ff7eb3, #ff758c 50%, #ffb199); }
.fond-or { background: linear-gradient(160deg, #3b2a08, #a57c22 55%, #f1d38a); }
.fond-foret { background: linear-gradient(160deg, #0b2416, #1f6f4a 55%, #9bd18b); }
.fond-neon { background: linear-gradient(160deg, #120022, #7b2ff7 50%, #f107a3); }
.badge-auto { color: var(--bronze); font-size: .85rem; margin-left: auto; margin-right: -4px; cursor: help; }
.publication > header .badge-auto + time { margin-left: 6px; }
.editeur-style { margin: 10px 0; padding: 14px; background: var(--fond); border: 1px solid var(--ligne); border-radius: 14px; }
.editeur-style input, .editeur-style select { width: 100%; padding: 9px 11px; background: var(--surface); color: var(--texte); border: 1px solid var(--ligne); border-radius: 10px; font: 400 .95rem var(--police-ui); }
.editeur-style .heures { display: flex; gap: 6px; }
.carte-texte p { width: 100%; max-width: 30ch; }
.carte-texte.story-fond { padding: 18% 10%; }
.carte-texte.story-fond p { max-width: 22ch; }

/* =====================================================================
   TCHAT IA : accueil façon ChatGPT (salutation + saisie au centre)
   ===================================================================== */
.accueil { padding: 0 0 22px; }
.accueil-centre { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.accueil-logo-petit img { display: block; width: 72px; height: 72px; border-radius: 50%; filter: drop-shadow(0 0 18px rgba(47, 123, 255, .45)); }
.accueil-titre { margin: 0; font: 600 clamp(1.45rem, 2.8vw, 2.05rem)/1.25 var(--police-ui); letter-spacing: -.01em; color: var(--texte); }
.app.accueil-actif .fil { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; }
.app.accueil-actif .fil > .colonne { width: 100%; }
.app.accueil-actif .mention { display: none; }
.suggestions {
  display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; overflow-y: auto;
  width: 100%; max-width: calc(var(--largeur-texte) + 44px); margin: 14px auto 0; padding: 0 22px 20px;
  border: 0; grid-template-columns: none;
}
.suggestions button {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px;
  border: 0 !important; border-radius: 12px; background: none; text-align: left; color: var(--texte-2);
}
.suggestions button:nth-child(odd), .suggestions button:nth-child(even) { padding: 12px 14px; border: 0; }
.suggestions button:hover { background: var(--surface); color: var(--texte); }
.suggestions button svg { width: 20px; height: 20px; flex: none; color: var(--texte-2); }
.suggestions strong { font: 500 1rem/1.3 var(--police-ui); color: var(--texte); }
.suggestions span { font-size: .9rem; color: var(--texte-3); }
.suggestions button:hover strong { color: var(--texte); }
@media (max-width: 860px) {
  .accueil-titre { font-size: 1.35rem; }
  .suggestions span { display: none; }
}

/* =====================================================================
   TCHAT RP : ambiance Instagram, en mieux
   ===================================================================== */
.app.mode-rp {
  --fond: #000; --fond-barre: #000; --surface: #121212; --surface-2: #1c1c1c; --ligne: #262626; --verre: #0a0a0a;
  --insta: linear-gradient(45deg, #feda75, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5);
  --insta-bleu: #0095f6;
}
.app.mode-rp .principal, .app.mode-rp .studio {
  background:
    radial-gradient(55% 32% at 12% -4%, rgba(214, 41, 118, .13), transparent 70%),
    radial-gradient(50% 32% at 92% -4%, rgba(79, 91, 213, .15), transparent 70%),
    radial-gradient(60% 38% at 50% 112%, rgba(250, 126, 30, .07), transparent 70%),
    #000;
}
.app.mode-rp .barre { background: #000; border-right: 1px solid #262626; }
.app.mode-rp .entete, .app.mode-rp .studio .espace-entete { background: rgba(0, 0, 0, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: #262626; }
.app.mode-rp .modes { background: #0a0a0a; border-color: #262626; }
.app.mode-rp .modes button[data-mode="rp"][aria-selected="true"] { background: var(--insta); color: #fff; box-shadow: 0 0 20px rgba(214, 41, 118, .35); }
.app.mode-rp .btn-principal { background: var(--insta-bleu); border-color: transparent; box-shadow: none; color: #fff; }
.app.mode-rp .btn-principal:hover { background: #1877f2; }
.app.mode-rp .btn-nouveau { background: #0a0a0a; border-color: #262626; }

/* onglets façon Instagram : soulignés */
.app.mode-rp .social-onglets { background: rgba(0, 0, 0, .85); border-bottom: 1px solid #262626; margin-bottom: 14px; border-radius: 0; }
.app.mode-rp .social-onglets button { border-radius: 0; color: #a8a8a8; }
.app.mode-rp .social-onglets button[aria-selected="true"] { background: none; color: #fff; box-shadow: inset 0 -2px 0 #fff; }

/* stories : anneau dégradé Instagram */
.app.mode-rp .avatar-social.story { background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.app.mode-rp .avatar-social.ajout { border-color: #363636; color: #fff; }
.app.mode-rp .barre-stories { border-bottom-color: #262626; }

/* publications : fil épuré, image mise en valeur */
.app.mode-rp .publication { background: transparent; border: 0; border-bottom: 1px solid #262626; border-radius: 0; padding-bottom: 6px; }
.app.mode-rp .publication-image { border-radius: 10px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .65), 0 0 0 1px #1f1f1f; }
.app.mode-rp .publication > header { padding: 10px 2px; }
.app.mode-rp .publication-actions, .app.mode-rp .publication-legende { padding-left: 2px; padding-right: 2px; }
.app.mode-rp .carte-perso, .app.mode-rp .carte-moderation, .app.mode-rp .editeur-form, .app.mode-rp .apercu-message { background: #0a0a0a; border-color: #262626; }
.app.mode-rp .puce-tag.actif, .app.mode-rp .puce-tag:hover { background: #fff; color: #000; }
.app.mode-rp .profil-tete .carte-badge { background: var(--insta); color: #fff; }

/* conversation RP : bulles façon messages privés Instagram */
.app.rp-actif .msg-moi .contenu {
  background: linear-gradient(135deg, #3797f0 0%, #7a5af8 55%, #a033ff 100%);
  color: #fff; border: 0; border-radius: 22px 22px 6px 22px; box-shadow: 0 6px 22px rgba(122, 90, 248, .25);
}
.app.rp-actif .msg-ia .contenu {
  background: #262626; color: #f5f5f5; padding: 12px 16px; border-radius: 22px 22px 22px 6px; display: inline-block; max-width: 100%;
}
.app.rp-actif .msg-ia .contenu em { color: #e9c46a; }
.app.rp-actif .msg-ia .contenu .parole { color: #fff; }
.app.rp-actif .composeur-cadre { background: #0a0a0a; border-color: #363636; border-radius: 26px; }
/* accueil IA : priorité sur les anciens styles */
.accueil .accueil-titre { font: 600 clamp(1.45rem, 2.8vw, 2.05rem)/1.25 var(--police-ui); letter-spacing: -.01em; margin: 0; }
.principal > .suggestions button { flex-direction: row !important; justify-content: flex-start; align-items: center; text-align: left; }
.principal > .suggestions button strong { flex: none; }
.principal > .suggestions button span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.principal > .suggestions button strong::after { content: " "; }

/* =====================================================================
   LOT A : en-tête épuré (sans titre ni « En ligne » sur l'accueil)
   ===================================================================== */
.app.entete-vide .entete-titre, .app.entete-vide .entete .statut { visibility: hidden; }
.entete .statut { display: none; }
.entete-titre h1 { min-height: 0; }
.titre-bouton:empty { display: none; }

/* fiche de personnage : photo de référence + contexte */
.perso-reference { display: flex; align-items: flex-start; gap: 14px; margin-top: 4px; }
.perso-reference .perso-photo { width: 76px; }
.perso-reference-aide { flex: 1; font-size: .84rem; color: var(--texte-3); line-height: 1.45; }

/* =====================================================================
   LOT B1 : barre du haut supprimée, menu ⋯ par conversation
   ===================================================================== */
/* boutons flottants en haut à gauche (ouvrir le menu latéral, quitter l'immersion) */
.barre-flottante {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; z-index: 12;
  display: flex; gap: 6px;
}
.barre-flottante .icone {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: var(--ligne); box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.btn-quitter-immersion { display: none; }
.app.immersion .btn-quitter-immersion { display: grid; }
/* sur grand écran, la barre latérale est visible : le bouton d'ouverture ne sert pas */
@media (min-width: 861px) { .app:not(.immersion) .barre-flottante .btn-barre { display: none; } }
/* le fil démarre sous la zone des boutons flottants */
.colonne { padding-top: 60px; }
.app.accueil-actif .colonne { padding-top: 24px; }
.fil { scroll-padding-top: 60px; }

/* bouton ⋯ sur chaque conversation */
.conv { position: relative; }
.conv-menu {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 9px; background: none; color: var(--texte-2); opacity: .6;
  transition: opacity var(--transition), color var(--transition), background var(--transition);
}
.conv-menu svg { width: 18px; height: 18px; }
.conv:hover .conv-menu, .conv.active .conv-menu, .conv-menu:focus-visible { opacity: 1; }
.conv-menu:hover { background: var(--surface-2); color: var(--texte); }
.conv-lien { padding-right: 40px; }
@media (hover: none), (pointer: coarse) { .conv-menu { opacity: .9; } }

/* menu contextuel flottant (façon ChatGPT) */
.menu-conv {
  position: fixed; z-index: 80; min-width: 192px; padding: 6px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 13px;
  box-shadow: 0 14px 44px rgba(0,0,0,.5); animation: apparition 120ms ease-out;
}
.entree-menu {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 9px; background: none; color: var(--texte); text-align: left; font-size: .92rem;
}
.entree-menu svg { width: 17px; height: 17px; color: var(--texte-2); flex: none; }
.entree-menu:hover { background: var(--surface-2); }
.entree-menu.danger { color: var(--rouge); }
.entree-menu.danger svg { color: var(--rouge); }

/* le point de l'ancien statut n'existe plus */
.entete, .entete-actions, .entete-titre { display: none !important; }

/* LOT B1 : le studio (Ares Social) laisse la place aux boutons flottants */
.studio .espace-entete { padding-left: 96px; }
.studio .espace-defilement { scroll-padding-top: 8px; }
@media (max-width: 860px) { .studio .espace-entete { padding-left: 104px; } }

/* =====================================================================
   LOT B2 : thèmes d'ambiance du Tchat IA
   Chaque ambiance ne redéfinit que l'accent, le fond et quelques teintes.
   Les noms sont génériques (pas de marque) ; data-ambiance sur <html>.
   ===================================================================== */
/* Menthe (ambiance claire et vive facon messagerie jaune) */
[data-ambiance="menthe"][data-theme="nuit"] {
  --braise: #1ed760; --braise-vive: #42e67e; --action: #ffe14d;
  --fond: #0a1410; --fond-barre: #0c1a14; --surface: #12241b; --surface-2: #17301f; --ligne: #1f3a2a;
  --lueur: rgba(30, 215, 96, .18);
}
[data-ambiance="menthe"][data-theme="jour"] {
  --braise: #0aa64a; --braise-vive: #1ed760; --action: #c99a00;
  --fond: #f2fbf4; --fond-barre: #e7f6ea; --surface: #ffffff; --surface-2: #eef9f0; --ligne: #cfe9d6;
  --lueur: rgba(30, 215, 96, .10);
}
/* Indigo (ambiance type salon communautaire) */
[data-ambiance="indigo"][data-theme="nuit"] {
  --braise: #5865f2; --braise-vive: #8b93ff; --action: #c9cdfb;
  --fond: #1e2030; --fond-barre: #171822; --surface: #272a3d; --surface-2: #2f3347; --ligne: #3a3f57;
  --texte: #eef0ff; --texte-2: #a9adcf; --lueur: rgba(88, 101, 242, .22);
}
[data-ambiance="indigo"][data-theme="jour"] {
  --braise: #4650d8; --braise-vive: #5865f2; --action: #4a52c0;
  --fond: #f3f4fb; --fond-barre: #e9ebf7; --surface: #ffffff; --surface-2: #eff0fa; --ligne: #d9dcf2;
}
/* Océan (ambiance messagerie bleue douce) */
[data-ambiance="ocean"][data-theme="nuit"] {
  --braise: #0b93f6; --braise-vive: #49b4ff; --action: #7fd0ff;
  --fond: #0a1420; --fond-barre: #0b1826; --surface: #122233; --surface-2: #17293d; --ligne: #1f374f;
  --lueur: rgba(11, 147, 246, .20);
}
[data-ambiance="ocean"][data-theme="jour"] {
  --braise: #0a84e0; --braise-vive: #0b93f6; --action: #0a6bbf;
  --fond: #eef6fd; --fond-barre: #e0eefb; --surface: #ffffff; --surface-2: #ecf5fe; --ligne: #cfe4f7;
}
/* Nocturne (ambiance noir pur, accent violet) */
[data-ambiance="nocturne"] {
  --braise: #a855f7; --braise-vive: #c17bff; --action: #e3c6ff;
  --fond: #000; --fond-barre: #0a0a0a; --surface: #141414; --surface-2: #1e1e1e; --ligne: #2a2a2a;
  --texte: #f4f4f5; --texte-2: #a1a1aa; --texte-3: #71717a; --verre: rgba(20, 20, 20, .8);
  --lueur: rgba(168, 85, 247, .18); --code-fond: #000;
  color-scheme: dark;
}
/* Rubis (chaud, accent corail) */
[data-ambiance="rubis"][data-theme="nuit"] {
  --braise: #ff5a5f; --braise-vive: #ff8488; --action: #ffb199;
  --fond: #140a0d; --fond-barre: #1a0c10; --surface: #241318; --surface-2: #30181f; --ligne: #3d222a;
  --lueur: rgba(255, 90, 95, .18);
}
[data-ambiance="rubis"][data-theme="jour"] {
  --braise: #e23b53; --braise-vive: #ff5a5f; --action: #c0392b;
  --fond: #fdf0f1; --fond-barre: #fbe4e6; --surface: #ffffff; --surface-2: #fdeef0; --ligne: #f6d3d7;
}

/* Sakura (rose poudré) */
[data-ambiance="sakura"][data-theme="nuit"] {
  --braise: #ff6fa5; --braise-vive: #ff9cc3; --action: #ffc9dd;
  --fond: #150a10; --fond-barre: #1b0c14; --surface: #24121b; --surface-2: #301824; --ligne: #3d2230;
  --lueur: rgba(255, 111, 165, .18);
}
[data-ambiance="sakura"][data-theme="jour"] {
  --braise: #e84d87; --braise-vive: #ff6fa5; --action: #c0396b;
  --fond: #fdf0f5; --fond-barre: #fbe3ed; --surface: #ffffff; --surface-2: #fdeef4; --ligne: #f6d3e1;
}
/* Émeraude (vert profond) */
[data-ambiance="emeraude"][data-theme="nuit"] {
  --braise: #10b981; --braise-vive: #34d399; --action: #6ee7b7;
  --fond: #06140f; --fond-barre: #081a13; --surface: #0d241b; --surface-2: #113024; --ligne: #163d2e;
  --lueur: rgba(16, 185, 129, .18);
}
[data-ambiance="emeraude"][data-theme="jour"] {
  --braise: #059669; --braise-vive: #10b981; --action: #047857;
  --fond: #eefbf5; --fond-barre: #e0f6ec; --surface: #ffffff; --surface-2: #ecf9f2; --ligne: #cfeede;
}
/* Ambre (orange chaud) */
[data-ambiance="ambre"][data-theme="nuit"] {
  --braise: #f59e0b; --braise-vive: #fbbf24; --action: #fcd34d;
  --fond: #140f06; --fond-barre: #1a1308; --surface: #241a0d; --surface-2: #302211; --ligne: #3d2d16;
  --lueur: rgba(245, 158, 11, .18);
}
[data-ambiance="ambre"][data-theme="jour"] {
  --braise: #d97706; --braise-vive: #f59e0b; --action: #b45309;
  --fond: #fdf6ec; --fond-barre: #fbeed6; --surface: #ffffff; --surface-2: #fdf3e4; --ligne: #f6e2c2;
}
/* Ardoise (gris neutre, accent clair) */
[data-ambiance="ardoise"][data-theme="nuit"] {
  --braise: #94a3b8; --braise-vive: #cbd5e1; --action: #e2e8f0;
  --fond: #0b0f16; --fond-barre: #0d1119; --surface: #151a24; --surface-2: #1c222e; --ligne: #262d3b;
  --lueur: rgba(148, 163, 184, .14);
}
[data-ambiance="ardoise"][data-theme="jour"] {
  --braise: #475569; --braise-vive: #64748b; --action: #334155;
  --fond: #f4f6f9; --fond-barre: #e9edf2; --surface: #ffffff; --surface-2: #eef1f6; --ligne: #dce1ea;
}

/* Fond personnalisé (image ou GIF) : appliqué sur le fil, derrière les messages */
.app.fond-perso .principal::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--fond-image) center / cover no-repeat fixed;
  opacity: var(--fond-opacite, .5);
}
.app.fond-perso .principal > * { position: relative; z-index: 1; }
/* lisibilité : voile sombre/clair au-dessus de l'image selon le thème */
.app.fond-perso[data-theme="nuit"] .principal::before,
.app.fond-perso .principal .voile-fond { }
.app.fond-perso .colonne { background: linear-gradient(var(--voile-fil), var(--voile-fil)); backdrop-filter: blur(1px); }
[data-theme="nuit"] { --voile-fil: rgba(6, 8, 18, .32); }
[data-theme="jour"] { --voile-fil: rgba(238, 242, 250, .45); }
.app.fond-perso .msg-ia .contenu, .app.fond-perso .msg-moi .contenu { backdrop-filter: blur(3px); }

/* aperçus d'ambiance dans les préférences */
.ambiances { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ambiance-choix { position: relative; padding: 0; border: 2px solid var(--ligne); border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--surface); }
.ambiance-choix[aria-pressed="true"] { border-color: var(--braise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--braise) 25%, transparent); }
.ambiance-apercu { height: 42px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.ambiance-apercu .pastille { width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.ambiance-nom { display: block; padding: 6px 4px; font-size: .78rem; color: var(--texte-2); text-align: center; border-top: 1px solid var(--ligne); }
.ambiance-choix[aria-pressed="true"] .ambiance-nom { color: var(--texte); }
.fond-perso-bloc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.fond-apercu { width: 56px; height: 40px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--fond-image, var(--surface-2)) center / cover no-repeat; flex: none; }
.pref-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pref-ligne label { margin: 0; }
input[type="range"].curseur { width: 120px; accent-color: var(--braise); }
input[type="color"].couleur { width: 40px; height: 32px; padding: 0; border: 1px solid var(--ligne); border-radius: 8px; background: none; cursor: pointer; }

/* B3 : la grille d'ambiances prend toute la largeur du fieldset */
#bloc-ambiances { display: block; }
#bloc-ambiances .ambiances { width: 100%; }
.formulaire-bloc { display: flex; flex-direction: column; gap: 10px; }

/* =====================================================================
   REFONTE VISUELLE : formes arrondies iOS, onglets en haut, animation
   ===================================================================== */
/* Arrondis plus doux sur les éléments principaux */
.btn-nouveau, .recherche, .lien-barre, .compte-bouton, .btn-principal, .btn-secondaire,
.composeur-cadre, .dialogue, .menu-conv, .menu-joindre, .carte-perso, .publication,
.conv-lien, .projet-lien, .icone, .doc-msg, .piece, .suggestions button, .entree-menu,
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"],
input[type="number"], textarea, select, .ambiance-choix, .modes {
  border-radius: 16px;
}
.btn-nouveau, .composeur-cadre, .dialogue, .carte-perso, .publication { border-radius: 20px; }
.btn-principal, .btn-secondaire, .modes button, .puce-tag, .filtres button, .social-onglets button { border-radius: var(--rayon-pilule); }
.icone, .conv-menu, .entree-menu, .piece, .projet-lien { border-radius: 13px; }
.msg-moi .contenu { border-radius: 22px 22px 7px 22px; }
.msg-ia .contenu { border-radius: 4px; }
.compte-avatar, .avatar-social, .vignette-perso { border-radius: 50%; }

/* Onglets Tchat IA / Tchat RP en haut au centre (façon Grok) */
.entete-haut {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 11;
  display: flex; justify-content: center; pointer-events: none;
}
.entete-haut .modes {
  pointer-events: auto; display: inline-flex; gap: 4px; padding: 5px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--ligne); border-radius: var(--rayon-pilule);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.entete-haut .modes button {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px;
  border: 0; border-radius: var(--rayon-pilule); background: none; color: var(--texte-2);
  font-weight: 600; font-size: .92rem; white-space: nowrap; transition: all var(--transition);
}
.entete-haut .modes button svg { width: 17px; height: 17px; }
.entete-haut .modes button[aria-selected="true"] {
  color: #fff; background: var(--braise); box-shadow: 0 2px 10px color-mix(in srgb, var(--braise) 45%, transparent);
}
.app.mode-rp .entete-haut .modes button[data-mode="rp"][aria-selected="true"] { background: var(--insta, linear-gradient(90deg,#d62976,#fa7e1e)); }
/* le fil démarre sous les boutons flottants ET sous les onglets centraux */
.colonne { padding-top: 72px; }
.app.accueil-actif .colonne { padding-top: 72px; }
/* en RP, le studio laisse la place aux onglets centraux */
.studio .espace-entete { padding-top: calc(max(12px, env(safe-area-inset-top)) + 54px); }
@media (max-width: 860px) {
  .entete-haut .modes button { padding: 9px 16px; font-size: .88rem; }
  .entete-haut .modes button span { display: inline; }
}

/* La barre latérale n'a plus les onglets : on remonte le bouton nouveau */
.barre .modes { display: none; }

/* Zone du haut : plus aucune trace de l'ancien en-tête, fond transparent */
.entete, .entete-actions, .entete-titre, #titre-conv { display: none !important; }
.barre-flottante .icone {
  width: 40px; height: 40px; border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* Animation d'ouverture façon iOS (au chargement) */
@keyframes app-entree { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes monte-doux { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.app { animation: app-entree .5s cubic-bezier(.22,.61,.36,1) both; }
.reduire-animations .app { animation: none; }
.accueil-centre { animation: monte-doux .55s .08s cubic-bezier(.22,.61,.36,1) both; }
.suggestions button { animation: monte-doux .5s cubic-bezier(.22,.61,.36,1) both; }
.suggestions button:nth-child(1) { animation-delay: .12s; }
.suggestions button:nth-child(2) { animation-delay: .17s; }
.suggestions button:nth-child(3) { animation-delay: .22s; }
.suggestions button:nth-child(4) { animation-delay: .27s; }
.reduire-animations .accueil-centre, .reduire-animations .suggestions button { animation: none; }

/* Pression façon iOS : léger enfoncement au tap */
.btn-principal:active, .btn-secondaire:active, .modes button:active, .suggestions button:active,
.lien-barre:active, .btn-nouveau:active, .compte-bouton:active, .conv-lien:active, .icone:active {
  transform: scale(.97); transition: transform 80ms ease;
}

/* Ambiances en grille alignée (plus de liste verticale) */
#ambiances { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ambiance-choix { border-radius: 16px; }
.ambiance-apercu { height: 54px; border-radius: 14px 14px 0 0; }
@media (max-width: 420px) { #ambiances { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   Menu profil (clic sur la carte compte)
   ===================================================================== */
.menu-profil {
  position: fixed; z-index: 85; min-width: 230px; padding: 6px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,.55); animation: apparition 140ms ease-out;
}
.menu-profil-tete { display: flex; align-items: center; gap: 11px; padding: 10px 10px 12px; border-bottom: 1px solid var(--ligne); margin-bottom: 6px; }
.menu-profil-tete .compte-avatar { width: 40px; height: 40px; flex: none; }
.menu-profil-nom { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.menu-profil-nom strong { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-profil-nom small { color: var(--bronze); font-size: .78rem; }

/* La barre du bas garde seulement la carte compte : les réglages passent dans le menu profil */
.barre-bas #btn-theme, .barre-bas #btn-preferences, .barre-bas #btn-immersion { display: none; }
.compte-bouton { border-radius: 16px; }

/* =====================================================================
   LOT RP-1 : vues de stories, date de naissance
   ===================================================================== */
.story-vues {
  position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px); color: #fff; font-size: .9rem; font-weight: 600;
}
.story-vues svg { width: 18px; height: 18px; }
.age-calcule { color: var(--bronze); font-weight: 600; }
input[type="date"] { color-scheme: dark; }
[data-theme="jour"] input[type="date"] { color-scheme: light; }

/* =====================================================================
   RP-2a : détail de publication et commentaires façon Instagram
   ===================================================================== */
.dialogue-publication:has(.detail-insta) { width: min(430px, 100vw); max-width: 430px; padding: 0; border: 0; background: none; }
.detail-insta {
  display: flex; flex-direction: column; max-height: 92dvh; overflow: hidden;
  background: var(--fond); border: 1px solid var(--ligne); border-radius: 16px;
}
.app.mode-rp .detail-insta { background: #000; border-color: #262626; }
.insta-entete { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--ligne); }
.app.mode-rp .insta-entete { border-color: #262626; }
.insta-entete strong { font-weight: 600; font-size: .95rem; }
.insta-fermer { margin-left: auto; }
.insta-image { background: #000; max-height: 56dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.insta-image img { width: 100%; height: auto; max-height: 56dvh; object-fit: contain; display: block; }
.insta-image .carte-texte { aspect-ratio: 4/5; width: 100%; }
.insta-actions { display: flex; align-items: center; gap: 2px; padding: 6px 8px 0; }
.insta-actions button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; background: none; color: var(--texte); border-radius: 50%; }
.insta-actions button svg { width: 25px; height: 25px; }
.insta-coeur.actif { color: var(--rouge); }
.insta-coeur.actif svg { fill: currentColor; }
.insta-envoi { margin-left: auto; }
.insta-jaimes { margin: 0; padding: 0 14px 2px; font-weight: 600; font-size: .9rem; }
.insta-legende { margin: 2px 0 0; padding: 2px 14px 10px; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.insta-legende strong { margin-right: 5px; font-weight: 600; }
.insta-commentaires { flex: 1; overflow-y: auto; padding: 4px 12px 8px; min-height: 80px; display: flex; flex-direction: column; gap: 14px; }
.insta-com { display: flex; align-items: flex-start; gap: 11px; }
.insta-com-corps { padding-right: 4px; }
.insta-com.reponse { margin-left: 42px; }
.insta-com .avatar-social.petit, .insta-com .compte-avatar.mini { width: 32px; height: 32px; flex: none; }
.insta-com-corps { flex: 1; min-width: 0; }
.insta-com-corps p { margin: 0; font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.insta-com-corps strong { margin-right: 5px; font-weight: 600; }
.insta-com-meta { display: flex; align-items: center; gap: 14px; margin-top: 3px; }
.insta-com-meta span { color: var(--texte-3); font-size: .78rem; }
.insta-com-repondre { padding: 0; border: 0; background: none; color: var(--texte-3); font-size: .78rem; font-weight: 600; }
.insta-com-repondre:hover { color: var(--texte-2); }
.insta-com-coeur { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 0 0; margin-top: 2px; border: 0; background: none; color: var(--texte-2); flex: none; width: 20px; }
.insta-com-coeur svg { width: 13px; height: 13px; }
.insta-com-coeur span { font-size: .72rem; color: var(--texte-3); }
.insta-com-coeur.actif { color: var(--rouge); }
.insta-com-coeur.actif svg { fill: currentColor; }
.insta-vide { color: var(--texte-3); font-size: .9rem; text-align: center; padding: 20px 0; }
.insta-saisie { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--ligne); }
.app.mode-rp .insta-saisie { border-color: #262626; }
.insta-saisie .compte-avatar.mini { width: 30px; height: 30px; flex: none; }
.insta-saisie input { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: none; color: var(--texte); outline: none; font-size: .92rem; }
.insta-publier { padding: 0; border: 0; background: none; color: var(--braise-vive); font-weight: 600; font-size: .92rem; }
.insta-publier:disabled { opacity: .4; }
.app.mode-rp .insta-publier { color: #0095f6; }

/* RP-2a bis : carte du fil au format Instagram (compteur de j'aime sous les icônes) */
.publication-actions { display: flex; align-items: center; gap: 2px; padding: 6px 2px 0; }
.publication-actions .jaime { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--texte); }
.publication-actions .jaime svg { width: 25px; height: 25px; }
.publication-actions .jaime.actif { color: var(--rouge); }
.publication-actions .jaime.actif svg { fill: currentColor; }
.publication-actions .insta-msg { margin-left: auto; }
.publication .nb-jaimes { display: block; margin: 0; padding: 2px 4px 2px; font-weight: 600; font-size: .9rem; }
.publication-legende { padding-top: 3px; }

/* =====================================================================
   RP-2a : carte du fil trait pour trait comme Instagram
   ===================================================================== */
.pub-actions { display: flex; align-items: center; padding: 8px 2px 4px; }
.pub-actions-gauche { display: flex; align-items: center; gap: 16px; }
.pub-action { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--texte); font-weight: 600; font-size: .95rem; }
.pub-action svg { width: 26px; height: 26px; }
.pub-action span:empty { display: none; }
.pub-action.coeur.actif { color: var(--rouge); }
.pub-action.coeur.actif svg { fill: currentColor; }
.pub-action:active svg { transform: scale(.85); transition: transform 80ms; }
.pub-legende { margin: 2px 0 0; padding: 0 2px; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.pub-legende strong { margin-right: 5px; font-weight: 600; }
.pub-date { margin: 5px 0 0; padding: 0 2px; font-size: .74rem; color: var(--texte-3); text-transform: none; }
.publication .voir-commentaires { margin: 4px 0 0; padding: 0 2px; color: var(--texte-3); font-size: .88rem; background: none; border: 0; }
/* la carte du fil sans fond lourd, séparée par une fine ligne comme Instagram */
.app.mode-rp .publication { border-bottom: 1px solid #262626; }

/* =====================================================================
   RP-2c : groupes de discussion
   ===================================================================== */
.liste-groupes { display: flex; flex-direction: column; gap: 2px; }
.groupe-ligne { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-radius: 12px; background: none; text-align: left; color: var(--texte); }
.groupe-ligne:hover { background: var(--surface); }
.pile-avatars { display: flex; flex: none; width: 52px; height: 46px; position: relative; }
.pile-avatars .vignette-perso { position: absolute; width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--fond); }
.pile-avatars .vignette-perso:nth-child(1) { left: 0; top: 0; z-index: 3; }
.pile-avatars .vignette-perso:nth-child(2) { left: 16px; top: 8px; z-index: 2; }
.pile-avatars .vignette-perso:nth-child(3) { left: 22px; top: 0; z-index: 1; }
.groupe-ligne-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.groupe-ligne-texte strong { font-weight: 600; }
.groupe-ligne-texte small { color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.choix-personnages { display: flex; flex-direction: column; gap: 4px; max-height: 44vh; overflow-y: auto; }
.choix-perso { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.choix-perso:hover { background: var(--surface); }
.choix-perso input { width: 20px; height: 20px; accent-color: var(--braise); flex: none; }
.choix-perso .vignette-perso.mini { width: 36px; height: 36px; }

.dialogue-groupe { width: min(460px, 100vw); height: min(86dvh, 720px); max-height: 86dvh; padding: 0; overflow: hidden; }
.conv-groupe { display: flex; flex-direction: column; height: 100%; }
.conv-groupe-entete { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--ligne); }
.conv-groupe-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.conv-groupe-titre strong { font-weight: 700; }
.conv-groupe-titre small { color: var(--texte-3); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-groupe-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.g-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 85%; }
.g-msg.moi { align-self: flex-end; }
.g-msg.autre { align-self: flex-start; }
.g-msg .vignette-perso.mini { width: 28px; height: 28px; flex: none; }
.g-bulle { padding: 8px 13px; border-radius: 18px; background: var(--surface-2); }
.g-msg.moi .g-bulle { background: linear-gradient(135deg, #3797f0, #7a5af8); color: #fff; border-bottom-right-radius: 5px; }
.g-msg.autre .g-bulle { border-bottom-left-radius: 5px; }
.g-auteur { display: block; font-size: .74rem; font-weight: 700; color: var(--bronze); margin-bottom: 2px; }
.g-texte { font-size: .94rem; line-height: 1.4; overflow-wrap: anywhere; }
.g-texte p { margin: 0; }
.g-texte em { color: var(--action); }
.g-ecrit { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: var(--surface-2); border-radius: 18px; }
.g-ecrit span { width: 7px; height: 7px; border-radius: 50%; background: var(--texte-3); animation: g-rebond 1.2s infinite; }
.g-ecrit span:nth-child(2) { animation-delay: .2s; }
.g-ecrit span:nth-child(3) { animation-delay: .4s; }
@keyframes g-rebond { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.conv-groupe-saisie { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ligne); }
.conv-groupe-saisie input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--ligne); border-radius: 999px; background: var(--fond); color: var(--texte); outline: none; }
.conv-groupe-saisie input:focus { border-color: var(--braise); }
.conv-groupe-saisie .btn-envoyer { width: 40px; height: 40px; flex: none; }
.app.mode-rp .dialogue-groupe { background: #000; }
.app.mode-rp .g-msg.autre .g-bulle { background: #262626; color: #f5f5f5; }

/* =====================================================================
   RP-2d : notifications
   ===================================================================== */
.onglet-cloche { position: relative; margin-left: auto; display: inline-grid; place-items: center; width: 40px; padding: 0 !important; }
.onglet-cloche svg { width: 22px; height: 22px; }
.onglet-cloche .pastille { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.liste-notifs { display: flex; flex-direction: column; gap: 1px; }
.notif-ligne { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 8px; border: 0; border-radius: 12px; background: none; text-align: left; color: var(--texte); }
.notif-ligne:hover { background: var(--surface); }
.notif-ligne.non-lu { background: color-mix(in srgb, var(--braise) 10%, transparent); }
.app.mode-rp .notif-ligne.non-lu { background: rgba(255,255,255,.05); }
.notif-ligne .vignette-perso.mini { width: 44px; height: 44px; flex: none; }
.notif-texte { flex: 1; min-width: 0; }
.notif-texte p { margin: 0; font-size: .92rem; line-height: 1.4; overflow-wrap: anywhere; }
.notif-texte strong { font-weight: 600; }
.notif-texte small { color: var(--texte-3); font-size: .78rem; }
.app.fond-perso .principal::after { content: none !important; display: none !important; }
html, body, .app, .principal { background-color: var(--fond) !important; }
.entete, #titre-conv, #btn-partager, #btn-exporter, #btn-supprimer, #btn-deplacer { display: none !important; pointer-events: none !important; }
.entete-haut { display: flex !important; visibility: visible !important; z-index: 50 !important; background: transparent !important; }
.colonne, .app.accueil-actif .colonne { padding-top: 78px !important; }
.espace, .studio { position: absolute !important; inset: 0 !important; height: 100% !important; overflow: hidden !important; }
.espace .espace-defilement, .studio .espace-defilement { overflow-y: auto !important; min-height: 0 !important; }
.studio { padding-top: 52px !important; }
.studio > .espace-entete { display: none !important; }
.studio .social-onglets { position: sticky !important; top: 0 !important; z-index: 30 !important; background: #000 !important; }
.barre-flottante, .barre-flottante .btn-barre { z-index: 60 !important; }
.app.mode-rp .barre-flottante, .app.mode-rp .barre-flottante .btn-barre { display: flex !important; }
#btn-immersion, #btn-quitter-immersion { display: none !important; }
#studio-creer { display: inline-flex !important; width: auto !important; margin: 0 8px !important; padding: 8px 14px !important; }
#studio-creer span { display: inline !important; }
#champ-age { display: none !important; }
label:has(#roue-date) { display: block !important; }
.champs-deux { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.roue-date { display: grid !important; grid-template-columns: 72px 1fr 110px !important; gap: 8px !important; }
.roue-date select { height: 44px !important; border-radius: 12px !important; background: var(--surface) !important; color: var(--texte) !important; }
@media (max-width: 860px) {
  .app.barre-ouverte .entete-haut, .app.barre-ouverte .barre-flottante { display: none !important; }
  .barre { width: min(84vw, 320px) !important; border-radius: 0 20px 20px 0 !important; }
  .app.barre-ouverte #voile { display: block !important; z-index: 55 !important; }
  .app.barre-ouverte .barre { z-index: 56 !important; }
  .app.mode-rp.barre-ouverte .studio { pointer-events: none !important; }
}
@media (min-width: 861px) {
  .barre-flottante .btn-barre { display: grid !important; }
  .app.barre-ouverte { grid-template-columns: 0 minmax(0, 1fr) !important; }
  .app.barre-ouverte .barre { display: flex !important; width: 0 !important; min-width: 0 !important; overflow: hidden !important; visibility: hidden !important; padding: 0 !important; }
}
.onglet-cloche { position: relative !important; overflow: visible !important; }
#pastille-notifs {
  display: inline-flex !important;
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #ff3b30 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 0 2px #000 !important;
}
#pastille-notifs[hidden] { display: none !important; }
#choix-personnages {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
#choix-personnages .choix-perso {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px !important;
}
#choix-personnages .choix-perso span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.g-msg:not(.moi) .g-texte { color: #e7e7ea !important; }
.g-msg:not(.moi) .g-texte em { color: #c4b5fd !important; font-style: italic !important; }
.g-msg.moi .g-bulle, .g-msg.moi .g-texte, .g-msg.moi .g-texte em, .g-msg.moi .g-texte p { color: #fff !important; opacity: 1 !important; }
.story-vue, .story-lecteur, .lecteur-story, .story-plein {
  background: #000;
}
.story-vue img, .story-lecteur img, .lecteur-story img, .story-plein img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.publication img, .pub img, .fil img, .grille img, .profil-photos img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
}
.contenu { display: flex !important; flex-direction: column !important; align-items: center !important; }
.contenu > img { display: block; max-width: 420px; }
.actions-live { display: flex !important; flex-basis: 100% !important; width: 100% !important; justify-content: center !important; margin-top: 8px !important; }
.contenu { display: flex !important; flex-direction: column !important; align-items: center !important; }
.contenu > img { display: block; max-width: min(420px, 100%); }
.actions-live { display: flex !important; width: 100% !important; justify-content: center !important; gap: 14px; margin-top: 8px; color: #a1a1aa; font-size: 13px; }
.actions-live { display: none !important; }
.actions-live { display: none !important; }
.contenu { display: flex !important; flex-direction: column !important; align-items: center !important; }
.contenu > img { display: block; max-width: min(420px, 100%); }
.actions-image-live { display: flex !important; width: 100% !important; justify-content: center !important; gap: 16px; margin-top: 8px; color: #a1a1aa; font-size: 13px; }
.actions-image-live button { background: none; border: 0; color: inherit; cursor: pointer; }
.contenu { display: flex; flex-direction: column; align-items: flex-start; }
.actions-image-live { display: flex; gap: 14px; margin-top: 8px; color: #a1a1aa; font-size: 13px; }
.actions-image-live button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }