:root {
  --bg: #f6f5f2; --panel: #ffffff; --side: #efede8; --text: #1f1e1c; --muted: #6b6862;
  --border: #e2dfd8; --accent: #c4532d; --accent-text: #ffffff; --user: #e9e5dc; --danger: #b3261e;
  --code: #f1efea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1c1a; --panel: #262523; --side: #22211f; --text: #ecebe8; --muted: #a29f98;
    --border: #3a3835; --accent: #e07a52; --accent-text: #1d1c1a; --user: #34322e; --danger: #f2756a;
    --code: #2f2e2b;
  }
}
* { box-sizing: border-box; }
/* Hauteur du "viewport dynamique" : sur mobile, 100% vaut la hauteur de mise en page (barre
   d'adresse masquée), donc le composer tombait sous la zone visible. 100dvh suit la zone
   réellement affichée. La première déclaration sert de repli aux navigateurs qui ne
   connaissent pas l'unité : ils ignorent la seconde et gardent celle-ci. */
html, body { height: 100%; height: 100dvh; margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid transparent; padding: 8px 14px; color: var(--text); background: none; }
button:disabled { opacity: .5; cursor: default; }
.primary { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.ghost { border-color: var(--border); }
.ghost:hover { background: var(--panel); }
.danger { color: var(--danger); }
.danger-btn { background: var(--danger); color: #fff; font-weight: 600; }
.icon { padding: 6px 10px; }
.wide { width: 100%; }
.error { color: var(--danger); margin: 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--accent-text); font-weight: 800; }

/* Connexion */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: grid; gap: 16px; }
.login-card label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
input, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Application */
/* `body` porte deja la hauteur dynamique : 100% la reprend, avec le meme repli en dvh. */
.app { display: grid; grid-template-columns: 270px 1fr; height: 100%; height: 100dvh; }
.sidebar { background: var(--side); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; padding: 16px; min-height: 0; }
.conv-list { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 2px; }
.conv-item { text-align: left; padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.conv-item:hover { background: var(--panel); }
.conv-item.active { background: var(--panel); border-color: var(--border); font-weight: 600; }
.conv-item .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; animation: pulse 1.2s infinite; }
.sidebar-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13px; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; height: 100dvh; }
.topbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.topbar h1 { flex: 1; font-size: 16px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#toggle-sidebar { display: none; }

/* Voile du panneau lateral (mobile). Par defaut il n'existe pas : `display: none` et, par securite,
   `pointer-events: none` — un voile reste actif rendrait toute l'interface inerte. Il ne devient
   visible que dans la media query mobile, et seulement avec `.visible` (posee par app.js quand le
   panneau s'ouvre). Au-dessus de 760 px il reste display:none quoi qu'il arrive. */
.voile { display: none; pointer-events: none; }

.messages { flex: 1; overflow-y: auto; padding: 24px 16px; }
.messages > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.empty { text-align: center; color: var(--muted); margin-top: 12vh; }
.empty h2 { color: var(--text); }
.msg { margin-bottom: 22px; }
.msg.user .bubble { background: var(--user); border-radius: 14px; padding: 10px 14px; margin-left: auto; width: fit-content; max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.msg.assistant .content { overflow-wrap: anywhere; }
.content p { margin: 0 0 10px; }
.content pre { background: var(--code); padding: 10px; border-radius: 8px; overflow-x: auto; }
.content code { background: var(--code); padding: 1px 4px; border-radius: 4px; font-size: 13px; }
.content pre code { background: none; padding: 0; }
.content a { color: var(--accent); }
.content table { border-collapse: collapse; display: block; overflow-x: auto; }
.content th, .content td { border: 1px solid var(--border); padding: 4px 8px; }
.content img { max-width: 100%; }
.steps { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.steps summary { cursor: pointer; }
.steps ul { margin: 6px 0; padding-left: 18px; }
.live-step { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.spinner { width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
.note { color: var(--muted); font-size: 14px; border-left: 2px solid var(--border); padding-left: 10px; margin: 6px 0; }
.msg-error { color: var(--danger); font-size: 14px; margin-top: 6px; }

.files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); text-decoration: none; font-size: 14px; max-width: 100%; }
.file:hover { border-color: var(--accent); }
.file .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .fsize { color: var(--muted); font-size: 12px; flex: none; }
.preview { display: block; margin-top: 10px; max-width: 100%; border: 1px solid var(--border); border-radius: 10px; }

.composer { border-top: 1px solid var(--border); padding: 12px 16px 16px; }
.composer > * { max-width: 820px; margin: 0 auto; }
.composer.drag { background: var(--user); }
.attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.attachments:empty { display: none; }
.chip { display: inline-flex; gap: 6px; align-items: center; background: var(--user); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 13px; max-width: 100%; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { padding: 0 6px; }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer-row textarea { resize: none; max-height: 220px; }
.attach { cursor: pointer; display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; height: 42px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .3; } }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 82%; max-width: 300px; z-index: 10; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  /* Panneau ouvert : le voile apparait SOUS le panneau (z-index 9 < 10), couvre la discussion et
     recoit le toucher qui referme le panneau. Ferme, il retombe sur `.voile` (display:none). */
  .voile { position: fixed; inset: 0; z-index: 9; background: rgba(0, 0, 0, .42); }
  .voile.visible { display: block; pointer-events: auto; }
  #toggle-sidebar { display: inline-block; }
  #rename-conv { display: none; }
  .messages { padding: 16px; }
  .composer { padding: 10px 16px 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  #send { padding: 8px 10px; }
}

/* ---------- Choix du mode, quota, documents (ajouts 2026-11-03) ---------- */

.login-intro { color: var(--muted); margin: 0 0 4px; font-size: 14px; }

.new-conv { display: grid; gap: 8px; }
.mode-pick { display: grid; gap: 6px; }
.mode { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--border); background: var(--panel); }
.mode > strong { font-size: 14px; font-weight: 600; }
.mode > span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.mode[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.badge { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

.conv-item { display: flex; align-items: center; gap: 7px; }
.conv-mode { flex: none; font-size: 13px; }
.conv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.quota { display: grid; gap: 6px; padding: 10px; margin-top: auto; border-top: 1px solid var(--border); }
.quota-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.quota-head > span:first-child { font-weight: 600; color: var(--text); }
.quota-bar { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
/* La somme du crédit, lisible sans survol. La barre seule dit « combien j'ai consommé »,
   celle-ci dit « combien il me reste » — c'est la question que le client se pose. */
.quota-somme { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 6px; font-variant-numeric: tabular-nums; }
.quota-somme:empty { display: none; }
.quota-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.quota-fill.warn { background: #d08700; }
.quota-fill.full { background: var(--danger); }
.small { font-size: 12px; padding: 5px 9px; }

/* Aperçu : le document fait 1280 px de large, on le met à l'échelle du conteneur.
   L'iframe est en bac à sable sans allow-same-origin (voir app.js et index.js). */
.doc { margin: 10px 0 4px; }
.doc-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.doc-frame { width: 1280px; height: 720px; border: 0; transform-origin: top left; display: block; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.doc-actions > a { text-decoration: none; display: inline-block; border-radius: 8px; border: 1px solid var(--border); padding: 5px 9px; color: var(--text); }
.doc-actions > a:hover { background: var(--panel); }

.meta { margin-top: 8px; font-size: 12px; color: var(--muted); }
.meta > summary { cursor: pointer; }
.meta ul { margin: 6px 0 0; padding-left: 18px; }

.dialog { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); padding: 0; max-width: 560px; width: calc(100% - 32px); }
/* Les listes de modeles portent des noms longs (« Seedance 2.0 Mini — ByteDance ») : on leur
   laisse la largeur du panneau au lieu de leur imposer celle des petits champs. */
.dialog select { width: 100%; min-width: 0; }
.dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dialog form { display: grid; gap: 12px; padding: 20px; }
.dialog h2 { margin: 0; font-size: 18px; }
.dialog p { margin: 0; color: var(--muted); font-size: 14px; }
.dialog label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.dialog input, .dialog textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.dialog textarea { resize: vertical; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 760px) {
  .mode > span { display: none; }
}
.mode.locked { opacity: .62; }
.mode.locked:hover { opacity: 1; border-color: var(--accent); }

/* ---------- Paiement manuel ---------- */
.pay-quota { font-size: 13px; color: var(--muted); margin: 0; }
.tarifs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tarif { text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; background: var(--bg); display: grid; gap: 2px; }
.tarif[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tarif .prix { font-weight: 700; font-size: 16px; }
.tarif .quoi { font-size: 12px; color: var(--muted); line-height: 1.35; }
.numeros { display: grid; gap: 6px; }
.numero { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; font-size: 14px; }
.numero b { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pay-note { font-size: 12.5px; color: var(--muted); margin: 0; }
.pay-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.pay-etat { font-size: 13px; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--code); }
@media (max-width: 560px) { .pay-grid { grid-template-columns: 1fr; } }

/* Bouton « raisonnement approfondi » : un seul message à la fois */
.mode-btn { font-size: 17px; line-height: 1; }
.mode-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }

/* ===================================================================
   Passe de design — 2026-11-03
   Même charte (terracotta, crème, ardoise) : on ne change aucune teinte
   de marque, on travaille le relief, le rythme et les transitions.
   =================================================================== */

:root {
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);
  --ring: color-mix(in srgb, var(--accent) 24%, transparent);
  --ombre-1: 0 1px 2px rgba(23, 20, 16, .05), 0 1px 1px rgba(23, 20, 16, .04);
  --ombre-2: 0 2px 4px rgba(23, 20, 16, .05), 0 8px 24px -8px rgba(23, 20, 16, .14);
  --ombre-3: 0 4px 8px rgba(23, 20, 16, .06), 0 20px 48px -12px rgba(23, 20, 16, .22);
  --r-s: 9px; --r-m: 13px; --r-l: 18px;
  --t: 160ms cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ombre-1: 0 1px 2px rgba(0, 0, 0, .35);
    --ombre-2: 0 2px 6px rgba(0, 0, 0, .4), 0 10px 28px -10px rgba(0, 0, 0, .6);
    --ombre-3: 0 6px 14px rgba(0, 0, 0, .45), 0 22px 56px -14px rgba(0, 0, 0, .7);
  }
}

body { font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Boutons : relief léger et retour au clic */
button, .file, .ghost { transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t), color var(--t); }
button { border-radius: var(--r-s); }
.primary { box-shadow: var(--ombre-1); }
.primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: var(--ombre-2); transform: translateY(-1px); }
.primary:active:not(:disabled) { transform: translateY(0); filter: brightness(.97); }
.ghost:hover { border-color: var(--accent-line); box-shadow: var(--ombre-1); }
.danger-btn:hover { filter: brightness(1.07); box-shadow: var(--ombre-2); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }
.logo { box-shadow: var(--ombre-1); letter-spacing: -.02em; }

/* Champs : halo discret au focus plutôt qu'un trait dur */
input, textarea { border-radius: var(--r-s); transition: border-color var(--t), box-shadow var(--t); }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
::placeholder { color: var(--muted); opacity: .75; }

/* Connexion */
.login { background: radial-gradient(1100px 520px at 50% -10%, var(--accent-soft), transparent 70%); }
.login-card { border-radius: var(--r-l); padding: 32px; box-shadow: var(--ombre-3); }
.login-card .brand { justify-content: center; margin-bottom: 2px; }
.login-intro { text-align: center; }

/* Panneau latéral */
.sidebar { gap: 12px; }
.conv-list { gap: 3px; margin: 0 -4px; padding: 0 4px; }
.conv-item { border-radius: var(--r-s); position: relative; padding-left: 12px; transition: background var(--t), color var(--t); }
.conv-item.active { box-shadow: var(--ombre-1); }
.conv-item.active::before {
  content: ""; position: absolute; left: 3px; top: 50%; translate: 0 -50%;
  width: 3px; height: 17px; border-radius: 2px; background: var(--accent);
}
.conv-item .dot { box-shadow: 0 0 0 3px var(--accent-soft); }
/* Le pied ne contient plus qu'un bouton (le menu du compte) : il empile au lieu d'aligner. */
.sidebar-foot { border-top: 1px solid var(--border); padding-top: 12px; display: block; position: relative; }
#me { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* En-tête */
.topbar { padding: 12px 20px; backdrop-filter: blur(8px); background: color-mix(in srgb, var(--bg) 82%, transparent); position: sticky; top: 0; z-index: 5; }
.topbar h1 { font-weight: 650; letter-spacing: -.01em; }

/* Messages */
.messages { padding: 28px 20px 8px; scroll-behavior: smooth; }
.msg { margin-bottom: 26px; animation: apparait .28s cubic-bezier(.2, .8, .3, 1) both; }
.msg.user .bubble { border-radius: var(--r-l) var(--r-l) 5px var(--r-l); padding: 11px 15px; box-shadow: var(--ombre-1); }
.content p { margin: 0 0 12px; }
.content h1, .content h2, .content h3 { line-height: 1.25; margin: 20px 0 10px; letter-spacing: -.012em; }
.content h1 { font-size: 23px; } .content h2 { font-size: 19px; } .content h3 { font-size: 16.5px; }
.content > :first-child { margin-top: 0; }
.content ul, .content ol { padding-left: 22px; }
.content li { margin: 4px 0; }
.content pre { border: 1px solid var(--border); border-radius: var(--r-m); padding: 13px 15px; line-height: 1.5; }
.content blockquote { margin: 12px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent-line); color: var(--muted); }
.content a { text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
.content a:hover { text-decoration-color: var(--accent); }
.content table { border-radius: var(--r-s); font-size: 14px; }
.content th { background: var(--code); font-weight: 650; }
.content hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.note { border-left-color: var(--accent-line); }
.msg-error { background: color-mix(in srgb, var(--danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent); border-radius: var(--r-s); padding: 9px 12px; }

/* Étapes de travail */
.steps { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-m); padding: 9px 13px; }
.steps summary { font-weight: 600; list-style: none; }
.steps summary::-webkit-details-marker { display: none; }
.steps summary::before { content: "▸ "; color: var(--accent); }
.steps[open] summary::before { content: "▾ "; }
.live-step { background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; width: fit-content; box-shadow: var(--ombre-1); }

/* Fichiers livrés */
.file { border-radius: var(--r-m); box-shadow: var(--ombre-1); }

/* Bouton de telechargement d'un livrable. Le nom de fichier n'apprend rien a l'utilisateur :
   il sait ce qu'il vient de demander. On ne le montre que s'il faut choisir entre plusieurs. */
.telecharger {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px;
  border: 1px solid var(--accent); border-radius: var(--r-m); background: var(--accent-soft);
  color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 600;
  box-shadow: var(--ombre-1); transition: background var(--t), color var(--t);
}
.telecharger:hover { background: var(--accent); color: #fff; }
.fichier-choix {
  height: 40px; max-width: 320px; border: 1px solid var(--border); border-radius: var(--r-m);
  background: var(--panel); color: var(--text); font: inherit; font-size: 14px; padding: 0 10px; cursor: pointer;
}

/* Questions de precision : un bloc par question, reponses a cocher, plus un champ « Autre ». */
.questions { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.q-bloc { border: 1px solid var(--border); border-radius: var(--r-m); background: var(--panel);
  padding: 12px 14px 14px; margin: 0; box-shadow: var(--ombre-1); }
.q-bloc legend { padding: 0 5px; font-weight: 600; font-size: 14px; }
/* Une option par ligne : les libelles sont des phrases, pas des mots — en pastilles cote a cote
   ils se coupent en trois lignes et deviennent illisibles. */
.q-choix-liste { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 9px; }
.q-choix { display: flex; align-items: center; justify-content: flex-start; text-align: left;
  gap: 10px; padding: 10px 13px; font-size: 14px; line-height: 1.35;
  border: 1px solid var(--border); border-radius: var(--r-m); background: var(--bg); cursor: pointer;
  transition: border-color var(--t), background var(--t); }
.q-choix:hover { border-color: var(--accent); }
.q-choix:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
/* La feuille pose width:100% sur tout input : sans ce rappel, le bouton radio prend toute la
   largeur de la pastille et ejecte le libelle a cote. */
.q-choix input[type="radio"], .q-choix input[type="checkbox"] {
  width: auto; flex: none; margin: 0; padding: 0; accent-color: var(--accent);
}
.q-choix > span { flex: 1; min-width: 0; }
.q-autre-texte { flex: 1; width: auto; min-width: 0; border: none; background: none; color: var(--text);
  font: inherit; font-size: 14px; padding: 0; outline: none; }
.q-autre-texte::placeholder { color: var(--muted); opacity: 1; }
.q-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.questions input:disabled, .questions button:disabled { opacity: .55; cursor: default; }

.file:hover { box-shadow: var(--ombre-2); transform: translateY(-1px); background: var(--bg); }
.preview { border-radius: var(--r-m); box-shadow: var(--ombre-2); }

/* Lecteur video et audio d'un livrable : lu sur place, pas seulement telecharge */
.preview-video {
  display: block; margin-top: 10px; width: 100%; max-height: 460px;
  background: #000; border: 1px solid var(--border); border-radius: var(--r-m); box-shadow: var(--ombre-2);
}
.preview-audio { display: block; margin-top: 10px; width: 100%; }

/* Zone de saisie : une carte posée, pas une barre collée.
   Le bas respecte la zone sûre de l'écran (encoche / barre gestuelle) : `env()` vaut 0 sur un
   appareil sans zone sûre, `max()` garde donc la marge habituelle de 20 px. */
.composer { border-top: none; padding: 6px 20px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.composer-row {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-l);
  padding: 7px 8px 7px 10px; box-shadow: var(--ombre-2);
  transition: border-color var(--t), box-shadow var(--t);
}
.composer-row:focus-within { border-color: var(--accent); box-shadow: var(--ombre-2), 0 0 0 3px var(--ring); }
.composer-row textarea { border: none; background: none; padding: 9px 4px; box-shadow: none !important; }
.composer-row textarea:focus { outline: none; }
.attach { border: none; height: 38px; border-radius: var(--r-s); }
.attach:hover { background: var(--accent-soft); }
.mode-btn { border: none; height: 38px; border-radius: var(--r-s); filter: grayscale(.55); opacity: .75; }
.mode-btn:hover { background: var(--accent-soft); filter: none; opacity: 1; }
.mode-btn[aria-pressed="true"] { background: var(--accent-soft); border: 1px solid var(--accent); filter: none; opacity: 1; }
.composer.drag .composer-row { border-color: var(--accent); border-style: dashed; background: var(--accent-soft); }
.chip { box-shadow: var(--ombre-1); }

/* Jauge de crédits */
.quota { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-m); padding: 12px; box-shadow: var(--ombre-1); }
.quota-bar { height: 7px; }
.quota-fill { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #e8a33c)); border-radius: 999px; }
.quota-fill.warn { background: linear-gradient(90deg, #d08700, #e2a93d); }
.quota-fill.full { background: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 70%, #ff9b8f)); }

/* Fenêtres */
.dialog { border-radius: var(--r-l); box-shadow: var(--ombre-3); }
.dialog::backdrop { backdrop-filter: blur(3px); background: rgba(20, 16, 12, .5); }
.dialog form { padding: 24px; gap: 14px; }
.tarif:hover { border-color: var(--accent-line); box-shadow: var(--ombre-1); }
.numero { background: var(--bg); }

/* Aperçu de document */
.doc-wrap { border-radius: var(--r-m); box-shadow: var(--ombre-2); }

/* Barres de défilement */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes apparait { from { opacity: 0; transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 760px) {
  .messages { padding: 18px 14px 4px; }
  /* Marge basse = la plus grande des deux : 14 px habituels, ou la zone sûre du téléphone
     (barre gestuelle, bas d'écran en `viewport-fit=cover`). Rien ne se glisse sous elle. */
  .composer { padding: 4px 14px 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .topbar { padding: 10px 14px; }
}

/* Profil et facturation */
#me { font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-h3 { margin: 4px 0 0; font-size: 14px; }
.factures { display: grid; gap: 5px; max-height: 190px; overflow-y: auto; }
.facture { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center;
  font-size: 13px; border: 1px solid var(--border); border-radius: var(--r-s); padding: 7px 11px; background: var(--bg); }
.facture .ftok { color: var(--muted); }

/* Conditions générales */
.cgu-case { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.cgu-case input { width: auto; margin-top: 2px; flex: none; }
.cgu-case a { color: var(--accent); }
.cgu-pied { text-align: center; margin: 0; font-size: 12px; }
.cgu-pied a { color: var(--muted); }
.pay-estime { font-size: 13px; color: var(--muted); margin: 0; padding: 9px 12px; background: var(--accent-soft); border-radius: var(--r-s); line-height: 1.5; }
.tarifs .tarif { text-align: center; padding: 9px; }

/* Sélecteur de mode */
.mode-btn { height: 38px; border: 1px solid var(--border); border-radius: var(--r-s); font-size: 13px;
  color: var(--muted); white-space: nowrap; padding: 0 11px; filter: none; opacity: 1; }
.mode-btn b { color: var(--text); font-weight: 650; }
.mode-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.mode-btn[aria-pressed="true"] b { color: var(--accent); }
.mode-btn.verrouille { opacity: .55; }
.mode-btn.verrouille::after { content: " 🔒"; }

/* Onglets de réglages */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: -2px 0 4px; }
.onglet { border: none; border-radius: var(--r-s) var(--r-s) 0 0; padding: 8px 14px; font-size: 14px;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglet:hover { color: var(--text); background: var(--bg); }
.onglet[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 650; }
.vue { display: grid; gap: 12px; }
.solde { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-m); padding: 14px 16px; }
.solde-chiffre { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.solde-lib { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Liste de discussions : regroupée, filtrable, actionnable ---------- */
.conv-filtre { font-size: 13.5px; padding: 8px 11px; border-radius: var(--r-s); background: var(--panel); }
.conv-groupe { font-size: 11px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase;
  color: var(--muted); padding: 14px 10px 5px; position: sticky; top: 0;
  background: linear-gradient(var(--side) 72%, transparent); z-index: 1; }
.conv-groupe:first-child { padding-top: 4px; }
.conv-rangee { display: flex; align-items: center; border-radius: var(--r-s); position: relative; transition: background var(--t); }
.conv-rangee:hover { background: var(--panel); }
.conv-rangee.active { background: var(--panel); box-shadow: var(--ombre-1); }
.conv-rangee.active::before { content: ""; position: absolute; left: 3px; top: 50%; translate: 0 -50%;
  width: 3px; height: 17px; border-radius: 2px; background: var(--accent); }
.conv-rangee .conv-item { flex: 1; min-width: 0; background: none; box-shadow: none; display: flex;
  align-items: center; gap: 7px; padding: 9px 4px 9px 12px; }
.conv-rangee .conv-item:hover { background: none; }
.conv-rangee.active .conv-item { font-weight: 600; }
.conv-rangee.active .conv-item::before { content: none; }
.conv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-suppr { flex: none; padding: 4px 9px; color: var(--muted); font-size: 17px; line-height: 1;
  opacity: 0; transition: opacity var(--t), color var(--t); border-radius: var(--r-s); }
.conv-rangee:hover .conv-suppr, .conv-rangee:focus-within .conv-suppr { opacity: 1; }
.conv-suppr:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }

/* Etoile de favori : discrete tant qu'elle est vide, affirmee une fois posee. Contrairement a
   la corbeille, un favori actif reste visible sans survol — c'est une information, pas une action. */
.conv-favori { flex: none; padding: 4px 2px 4px 7px; color: var(--muted); font-size: 15px; line-height: 1;
  background: none; border: none; cursor: pointer; opacity: 0; transition: opacity var(--t), color var(--t); }
.conv-rangee:hover .conv-favori, .conv-rangee:focus-within .conv-favori { opacity: 1; }
.conv-favori.on { opacity: 1; color: var(--accent); }
.conv-favori:hover { color: var(--accent); }
@media (hover: none) { .conv-favori { opacity: 1; } }

/* Menu deroulant du mode, dans la zone de saisie */
.mode-select {
  flex: none; height: 38px; border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--panel); color: var(--text); font: inherit; font-size: 13px;
  padding: 0 26px 0 10px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 6px;
  transition: border-color var(--t), background-color var(--t);
}
.mode-select:hover { border-color: var(--accent); }
.mode-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mode-select.verrouille { opacity: .6; }

/* Reglages : bloc des favoris */
.favoris-info { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--r-m); background: var(--user); }
.favoris-etoile { color: var(--accent); font-size: 19px; line-height: 1.1; }
.favoris-info b { display: block; margin-bottom: 3px; }
.favoris-info .pay-note { margin: 0; }

.conv-vide { color: var(--muted); font-size: 13px; padding: 14px 10px; margin: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .sidebar { width: 88%; max-width: 330px; padding: 14px; }
  .conv-suppr { opacity: 1; }           /* pas de survol au doigt */
  .conv-rangee .conv-item { padding-block: 12px; }  /* cible tactile confortable */
  .composer-row { border-radius: var(--r-m); }
  .composer-row textarea { font-size: 16px; }  /* évite le zoom automatique sur iOS */
  .mode-btn { padding: 0 8px; font-size: 12px; }
  .mode-btn b { display: none; }
  .dialog form { padding: 18px; }
  .pay-grid { grid-template-columns: 1fr; }
  .onglets { overflow-x: auto; }
  .onglet { white-space: nowrap; }
  .doc-actions { flex-direction: column; align-items: stretch; }
  .msg.user .bubble { max-width: 92%; }
}
.logo-img { display: block; border-radius: 8px; box-shadow: var(--ombre-1); }
.brand { align-items: center; }
.sous-marque { color: var(--muted); font-size: 12px; }
/* Titres de discussion : l'ellipse exige min-width:0 sur chaque parent flex */
.conv-list { min-width: 0; }
.conv-rangee { min-width: 0; }
.conv-rangee .conv-item { min-width: 0; overflow: hidden; }
.sidebar .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Messagerie avec l'exploitant, et notifications (2026-11-04) ===== */

.login-oubli { margin: 2px 0 0; text-align: center; font-size: 13.5px; }
.login-oubli a { color: var(--muted); text-decoration: none; }
.login-oubli a:hover { color: var(--accent); text-decoration: underline; }

/* Pastille de messages non lus : discrète, mais impossible à manquer une fois allumée. */
.pastille-nb {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: var(--accent-text);
  font-size: 11.5px; font-weight: 700; line-height: 1;
}
#messages-btn { display: inline-flex; align-items: center; gap: 7px; }
#messages-btn.a-lire { color: var(--accent); font-weight: 600; }
#lien-admin { text-decoration: none; display: inline-flex; align-items: center; }
.sidebar-foot { flex-wrap: wrap; gap: 6px; }

/* Fenêtre des messages : plus haute que les autres, c'est une conversation. */
.dialog-large { width: min(620px, 94vw); }
.msg-fil {
  display: flex; flex-direction: column; gap: 12px;
  max-height: min(46vh, 380px); overflow-y: auto; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--r-m); background: var(--bg);
  margin: 12px 0;
}
.msg-ligne { display: flex; flex-direction: column; gap: 3px; max-width: 82%; }
.msg-ligne.moi { align-self: flex-end; align-items: flex-end; }
.msg-ligne.eux { align-self: flex-start; }
.msg-bulle {
  padding: 9px 13px; border-radius: var(--r-m); font-size: 14.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.msg-ligne.moi .msg-bulle { background: var(--user); }
.msg-ligne.eux .msg-bulle { background: var(--panel); border: 1px solid var(--border); }
.msg-ligne.systeme .msg-bulle { background: var(--accent-soft); border-color: var(--accent-line); }
.msg-quand { font-size: 11.5px; color: var(--muted); }
#messages-texte { width: 100%; resize: vertical; }

/* Demande de changement de formule, dans les réglages */
.bloc-formule {
  margin-top: 16px; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--r-m); background: var(--user);
}
.bloc-formule > b { display: block; margin-bottom: 2px; }
.bloc-formule .pay-grid { margin-top: 10px; }

/* Barre d'outils des conversations : barre de filtre et bouton étoile sur une seule ligne. */
.conv-outils { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
/* Sans min-width: 0, la barre de filtre refuse de rétrécir et pousse l'étoile hors du cadre. */
.conv-outils #conv-filtre { flex: 1; min-width: 0; }

.filtre-favoris {
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--panel); color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
}
.filtre-favoris:hover { border-color: var(--accent); color: var(--accent); }
.filtre-favoris[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.filtre-favoris:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.action-conv {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px solid var(--border); border-radius: var(--r-s);
  background: transparent; color: var(--muted); font-size: 14px; cursor: pointer;
  transition: var(--t) border-color, var(--t) color, var(--t) background;
}
.action-conv:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.action-conv.danger:hover {
  border-color: var(--danger); color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.action-conv .ico { flex: none; }

/* Sur mobile on ne garde que les icônes : le libellé prendrait toute la largeur du rang. */
@media (max-width: 640px) {
  .action-conv .txt { display: none; }
  .action-conv { padding: 7px 10px; }
}

/* Fenêtres de confirmation : étroites pour rester lisibles et légères. */
.dialog-petit { width: min(420px, 92vw); }

/* ---- Menus deroulants (mode, discussion, compte) ----
   Trois endroits ou une liste s'ouvre au clic sous son bouton. Ils partagent la meme mecanique :
   un conteneur en position relative, une liste en position absolue. Aucun style en ligne : la CSP
   interdit `style="..."`, tout doit passer par ces classes. */
.menu-conteneur { position: relative; }
.menu-liste {
  position: absolute; z-index: 40; min-width: 200px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 4px; display: grid; gap: 2px;
}
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 8px 10px; border-radius: 7px;
  border: 1px solid transparent; background: none; color: var(--text); font-size: 14px;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--side); }
.menu-item.danger { color: var(--danger); }
.menu-item[aria-checked="true"] { background: var(--side); font-weight: 600; }
.menu-item.verrouille { color: var(--muted); }

/* Menu de la discussion : sous le picto, aligne a droite pour ne pas sortir de l'ecran. */
#conv-menu-liste { top: calc(100% + 6px); right: 0; }

/* Menu du compte : il s'ouvre au-dessus du bouton, la barre laterale etant en bas. */
.menu-compte { bottom: calc(100% + 6px); left: 0; right: 0; }
.compte-bouton {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); font-size: 14px; color: var(--text);
}
.compte-bouton:hover { background: var(--side); }
.compte-nom { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte-chevron { color: var(--muted); font-size: 12px; }
.compte-bouton.a-lire { border-color: var(--accent); }

/* Pastille : meme rendu sur le bouton du compte et dans le menu. */
.messages-pastille { flex: 0 0 auto; }

/* Selecteur de mode dans le composer : un bouton, pas un <select>. Les trois options ne se
   deplient qu'au clic, et chaque option porte son prix en resume. */
.mode-bouton {
  display: flex; align-items: center; gap: 6px; padding: 7px 11px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  font-size: 13px; color: var(--text); white-space: nowrap;
}
.mode-bouton:hover { background: var(--side); }
.menu-mode { bottom: calc(100% + 8px); left: 0; min-width: 260px; }
.mode-item { display: grid; grid-template-columns: 1fr; gap: 2px; }
.mode-item b { font-size: 14px; font-weight: 600; }
.mode-item small { color: var(--muted); font-size: 12.5px; }
.mode-item.verrouille b { color: var(--muted); }

/* ---- Detail de la consommation, au survol de la jauge ----
   Le bloc n'occupe aucune place tant qu'on ne le sollicite pas, mais reste lisible : panneau
   positionne au-dessus (la jauge est en bas de la barre laterale, en dessous sortirait de l'ecran).
   Il s'ouvre au survol ET au clavier (:focus-visible), sinon l'information serait inaccessible
   a qui navigue sans souris. */
.quota { position: relative; }
.quota-detail {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  display: grid; gap: 3px; padding: 10px 12px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  pointer-events: none;
}
.quota:hover .quota-detail,
.quota:focus-visible .quota-detail,
.quota:focus-within .quota-detail { opacity: 1; visibility: visible; transform: none; }
.quota-detail b { font-size: 13.5px; font-weight: 600; }
.quota-detail span { font-size: 12.5px; color: var(--muted); }
.quota-detail #quota-detail-reste { color: var(--text); }
.quota:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }