/* ==========================================================================
   Zoé — l'assistante de la gestion (01/10/2026). Panneau de discussion (js/components/zoe.js).
   Sobre : surfaces neutres, filets fins ; la question en bulle sombre, la réponse en carte claire.
   Un seul bouton plein : « Envoyer » de la carte « À confirmer ». Dettes en rouge (.zoe-dette).
   Bilan (v822, l'Analyse IA retirée) : bloc « Faire le bilan » de l'accueil et puce « Bilan » de l'en-tête, en filet ;
   intertitres des réponses (« Diagnostic »…) à l'encre, séparés par un filet.
   ========================================================================== */
.zoe-panneau, .zoe-ouvrir, .zoe-menu {
  --zoe-encre: #17181A;
  --zoe-encre-douce: #666B70;
  --zoe-fond: var(--bg-secondary, #fff);
  --zoe-carte: #F4F5F3;
  --zoe-filet: var(--border-color, #E7EAE8);
  --zoe-bulle: #17181A;
  --zoe-bulle-texte: #fff;
  --zoe-pastille: #17181A;
  --zoe-pastille-texte: #fff;
  --zoe-dette: #C8382A;
  --zoe-focus: #17181A;
}
/* Dettes : les mêmes rouges que .fin-sortie (règle des dettes de CLAUDE.md, Caisse comprise). */
[data-theme="dark"] .zoe-panneau, [data-theme="dark"] .zoe-ouvrir, [data-theme="dark"] .zoe-menu {
  --zoe-encre: #f1f5f9;
  --zoe-encre-douce: #94a3b8;
  --zoe-carte: #1a2235;
  --zoe-filet: rgba(255, 255, 255, 0.09);
  --zoe-bulle: #2b3549;
  --zoe-bulle-texte: #f1f5f9;
  --zoe-pastille: #f1f5f9;
  --zoe-pastille-texte: #111827;
  --zoe-dette: #FF5B4D;
  --zoe-focus: #f1f5f9;
}

/* ---------- bouton d'ouverture (barre du haut) ----------
   L'icône seule, sans cadre (demande du propriétaire, 01/10/2026) : le petit fantôme, rien autour. Au survol (ou au
   clavier, ou panneau ouvert), il grossit avec un léger ressort et un halo bleu. L'avatar est dessiné à sa taille de
   survol (36 px) et réduit au repos : grossi, il reste net. Le nom « Zoé » reste dans l'infobulle et pour les lecteurs
   d'écran. */
.zoe-ouvrir {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: 50%; background: none; color: var(--zoe-encre);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.zoe-ouvrir[hidden] { display: none; }
.zoe-ouvrir .zoe-ouvrir-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.zoe-ouvrir .zoe-avatar {
  --zoe-a: 36px;
  --zoe-halo: rgba(0, 74, 173, 0.38);
  transform: scale(0.9); transform-origin: 50% 55%;
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), filter .25s ease;
}
[data-theme="dark"] .zoe-ouvrir .zoe-avatar { --zoe-halo: rgba(110, 170, 255, 0.5); }
.zoe-ouvrir:hover .zoe-avatar,
.zoe-ouvrir:focus-visible .zoe-avatar,
.zoe-ouvrir[aria-expanded="true"] .zoe-avatar {
  transform: scale(1);
  filter: drop-shadow(0 5px 10px var(--zoe-halo));
}
.zoe-ouvrir:active .zoe-avatar { transform: scale(0.9); transition-duration: .1s; }
.zoe-ouvrir:focus-visible { outline: 2px solid var(--zoe-focus); outline-offset: 2px; }
/* Animations réduites : pas de changement de taille, le halo seul dit qu'on est dessus. */
@media (prefers-reduced-motion: reduce) {
  .zoe-ouvrir .zoe-avatar, .zoe-ouvrir:hover .zoe-avatar, .zoe-ouvrir:focus-visible .zoe-avatar,
  .zoe-ouvrir[aria-expanded="true"] .zoe-avatar, .zoe-ouvrir:active .zoe-avatar { transform: scale(0.9); transition: filter .2s ease; }
}
/* Téléphone et tablette : pas de bouton dans la barre du haut (il poussait le compte hors de l'écran) ; Zoé s'ouvre
   depuis la tuile « Zoé, l'assistante » du Menu (barre du bas). */
@media (max-width: 768px) {
  .zoe-ouvrir { display: none !important; }
}

/* ---------- avatar : le petit fantôme au dégradé maillé ----------
   D'après le composant React « MeshGradientSVG » fourni par le propriétaire (01/10/2026), sans dépendance.
   Le dessin et l'animation sont dans js/components/zoe.js (Zoe.avatar : un petit <canvas> par avatar, une seule boucle
   à 30 images par seconde pour tous, arrêtée hors écran, onglet caché ou animations réduites). Ici : la taille de la
   boîte (--zoe-a, carrée) et les COULEURS du dégradé, relues par le script au changement de thème.
   Couleurs de Pilote : le bleu du logo, l'orange de l'application (l'accent), un bleu clair, un bleu vif, un bleu nuit ;
   les yeux en blanc. Sur fond sombre, la même famille un cran plus lumineuse : la silhouette reste lisible. */
.zoe-avatar {
  --zoe-a: 36px;
  --zoe-m-fond: #004AAD;      /* bleu du logo */
  --zoe-m-clair: #8EC3FF;     /* bleu clair */
  --zoe-m-accent: #F5512E;    /* orange de l'application */
  --zoe-m-nuit: #06245C;      /* bleu nuit */
  --zoe-m-vif: #2C7BEA;       /* bleu vif */
  --zoe-m-oeil: #FFFFFF;
  position: relative; display: inline-block; flex-shrink: 0;
  width: var(--zoe-a); height: var(--zoe-a);
  vertical-align: middle; pointer-events: none;
}
[data-theme="dark"] .zoe-avatar {
  --zoe-m-fond: #1A5FCC;
  --zoe-m-clair: #9CCBFF;
  --zoe-m-accent: #F7663F;
  --zoe-m-nuit: #163F8A;
  --zoe-m-vif: #3D8BF5;
}
.zoe-avatar > canvas { display: block; width: 100%; height: 100%; }
/* Sans canvas : la même forme, en dégradé fixe (masque à la forme de la tête de chat, repère 240 × 240). */
.zoe-avatar-repli .zoe-avatar-maille {
  position: absolute; left: 9%; top: 8%; width: 82%; height: 82%;
  background: radial-gradient(60% 45% at 30% 22%, var(--zoe-m-clair), transparent),
              radial-gradient(55% 40% at 78% 58%, color-mix(in srgb, var(--zoe-m-accent) 25%, transparent), transparent),
              linear-gradient(165deg, var(--zoe-m-vif) 0%, var(--zoe-m-fond) 48%, var(--zoe-m-nuit) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' preserveAspectRatio='none'%3E%3Cpath d='M 34 92 L 58 14 L 104 66 Q 120 60 136 66 L 182 14 L 206 92 Q 231 122 226 159 Q 220 210 166 230 Q 120 243 74 230 Q 20 210 14 159 Q 9 122 34 92 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' preserveAspectRatio='none'%3E%3Cpath d='M 34 92 L 58 14 L 104 66 Q 120 60 136 66 L 182 14 L 206 92 Q 231 122 226 159 Q 220 210 166 230 Q 120 243 74 230 Q 20 210 14 159 Q 9 122 34 92 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.zoe-tete .zoe-avatar { --zoe-a: 40px; }
.zoe-avatar-grande { --zoe-a: 76px; margin-left: -8px; }

/* ---------- panneau ---------- */
.zoe-panneau {
  position: fixed; z-index: 900;
  top: 10px; right: 10px; bottom: 10px;
  width: min(420px, calc(100vw - 20px));
  display: flex; flex-direction: column;
  background: var(--zoe-fond); color: var(--zoe-encre);
  border: 1px solid var(--zoe-filet); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(23, 24, 26, 0.14);
  font-family: var(--font-family, inherit);
  opacity: 0; transform: translateX(16px);
  transition: opacity .18s ease, transform .18s ease;
  overflow: hidden;
}
.zoe-panneau.zoe-visible { opacity: 1; transform: none; }
.zoe-panneau[hidden] { display: none; }
[data-theme="dark"] .zoe-panneau { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.zoe-panneau :focus-visible { outline: 2px solid var(--zoe-focus); outline-offset: 2px; }

.zoe-tete {
  position: relative; z-index: 2;   /* le choix du bilan s'ouvre sous l'en-tête, par-dessus le fil */
  display: flex; align-items: center; gap: 11px;
  padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--zoe-filet);
}
.zoe-ident { flex: 1; min-width: 0; }
.zoe-titre { margin: 0; font-size: 15px; font-weight: 700; color: var(--zoe-encre); line-height: 1.2; }
.zoe-etat { margin: 2px 0 0; font-size: 12px; color: var(--zoe-encre-douce); }
.zoe-icone-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--zoe-encre-douce);
  font-size: 20px; cursor: pointer;
}
.zoe-icone-btn:hover { background: var(--bg-tertiary, #F3F5F3); color: var(--zoe-encre); }

/* ---------- fil ---------- */
.zoe-fil {
  position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}
.zoe-fil:focus-visible { outline-offset: -3px; }
.zoe-msg { max-width: 100%; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.zoe-msg p { margin: 0; color: inherit; }   /* base.css donne aux <p> la couleur secondaire : illisible dans la bulle sombre */
.zoe-question {
  align-self: flex-end; max-width: 85%;
  background: var(--zoe-bulle); color: var(--zoe-bulle-texte);
  padding: 10px 14px; border-radius: 18px 18px 6px 18px;
  white-space: pre-wrap;
}
.zoe-reponse {
  align-self: stretch;
  background: var(--zoe-carte); color: var(--zoe-encre);
  padding: 12px 14px; border-radius: 6px 16px 16px 16px;
}
.zoe-msg .zoe-corps > * + * { margin-top: 10px; }   /* plus fort que .zoe-msg p */
.zoe-corps strong { font-weight: 700; }
/* Montant qu'un chauffeur doit encore (reconnu d'après le résultat de l'outil, js/components/zoe.js _estDette). */
.zoe-corps .zoe-dette, .zoe-tableau td.zoe-dette { color: var(--zoe-dette); }
.zoe-corps ul, .zoe-corps ol { margin: 0; padding-left: 20px; }
.zoe-corps ul { list-style: disc; }
.zoe-corps ol { list-style: decimal; }
.zoe-corps li + li { margin-top: 4px; }
.zoe-corps .zoe-sous-liste { margin-top: 4px; padding-left: 18px; list-style: circle; }
.zoe-corps li::marker { color: var(--zoe-encre-douce); }
/* Intertitre d'une réponse (« **Diagnostic** » seul sur sa ligne, ou « # titre ») : petit, à l'encre, sans couleur vive ;
   à partir du deuxième, un filet fin le sépare de la partie d'avant (les quatre parties d'un bilan). */
.zoe-corps .zoe-sous-titre { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--zoe-encre); }
.zoe-msg .zoe-corps > .zoe-sous-titre:not(:first-child) { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--zoe-filet); }
.zoe-msg .zoe-corps > .zoe-sous-titre + * { margin-top: 5px; }
.zoe-tableau { overflow-x: auto; border: 1px solid var(--zoe-filet); border-radius: 10px; background: var(--zoe-fond); }
.zoe-tableau table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.zoe-tableau th, .zoe-tableau td { padding: 6px 9px; text-align: left; border-bottom: 1px solid var(--zoe-filet); white-space: nowrap; }
.zoe-tableau th { font-weight: 600; color: var(--zoe-encre-douce); }
.zoe-tableau tr:last-child td { border-bottom: 0; }

.zoe-sources { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--zoe-filet); font-size: 11.5px; color: var(--zoe-encre-douce); }
.zoe-sources summary { cursor: pointer; list-style: none; }
.zoe-sources summary::-webkit-details-marker { display: none; }
.zoe-sources summary::before { content: '▸'; display: inline-block; width: 12px; transition: transform .15s; }
.zoe-sources[open] summary::before { transform: rotate(90deg); }
.zoe-sources ul { margin: 6px 0 0; padding-left: 12px; list-style: none; }
.zoe-sources li + li { margin-top: 6px; }
.zoe-sources strong { color: var(--zoe-encre); font-weight: 600; }
.zoe-formule, .zoe-manque { display: block; margin-top: 2px; }

.zoe-info, .zoe-erreur {
  align-self: stretch; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--zoe-filet); color: var(--zoe-encre-douce); font-size: 13px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.zoe-erreur { color: var(--zoe-encre); border-left: 3px solid var(--zoe-encre); }
.zoe-erreur p, .zoe-info p { flex: 1 1 200px; }

/* Mot d'accueil (une seule fois, quand on arrive par une ancienne adresse de l'Analyse IA) : un filet sobre en tête du
   panneau, à l'encre, jamais un bouton plein ; lisible en clair, en sombre et sur téléphone (variables --zoe-*). */
.zoe-mot-accueil {
  align-self: stretch; margin: 0; padding: 10px 14px;
  border: 1px solid var(--zoe-filet); border-left: 3px solid var(--zoe-encre); border-radius: 12px;
  background: var(--zoe-carte); color: var(--zoe-encre); font-size: 12.5px; line-height: 1.5;
}

/* ---------- accueil + suggestions ---------- */
.zoe-accueil { margin: auto 0 0; padding: 8px 2px 4px; }
.zoe-accueil-titre { margin: 14px 0 4px; font-size: 18px; font-weight: 700; color: var(--zoe-encre); letter-spacing: -0.01em; }
.zoe-accueil-texte { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--zoe-encre-douce); }
.zoe-accueil-note { margin: -6px 0 16px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--zoe-filet); font-size: 12.5px; line-height: 1.5; color: var(--zoe-encre); }
.zoe-suggestions { display: flex; flex-direction: column; gap: 8px; }
.zoe-suggestion {
  text-align: left; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--zoe-filet); background: var(--zoe-fond); color: var(--zoe-encre);
  font: 500 13px/1.4 var(--font-family, inherit); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.zoe-suggestion:hover:not(:disabled) { border-color: var(--zoe-encre-douce); background: var(--zoe-carte); }
.zoe-suggestion:disabled { opacity: .5; cursor: default; }

/* ---------- bilan : bloc de l'accueil, puce de l'en-tête et son choix ----------
   Trois choix en filet (jamais pleins : le seul bouton plein reste « Envoyer » d'une relance). */
.zoe-bilan { margin: 0 0 14px; padding: 12px 12px 12px 14px; border: 1px solid var(--zoe-filet); border-radius: 14px; }
.zoe-bilan-titre { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--zoe-encre); }
.zoe-bilan-texte { margin: 3px 0 10px; font-size: 12px; line-height: 1.45; color: var(--zoe-encre-douce); }
.zoe-bilan-choix, .zoe-menu-bilan-choix { display: flex; gap: 6px; }
.zoe-bilan-btn {
  flex: 1 1 0; min-width: 0; height: 34px; padding: 0 8px; border-radius: 10px;
  border: 1px solid var(--zoe-filet); background: transparent; color: var(--zoe-encre);
  font: 600 12.5px/1 var(--font-family, inherit); white-space: nowrap; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.zoe-bilan-btn:hover:not(:disabled) { border-color: var(--zoe-encre-douce); background: var(--zoe-carte); }
.zoe-bilan-btn:disabled { opacity: .5; cursor: default; }
.zoe-puce-bilan {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  height: 30px; padding: 0 11px 0 9px; border-radius: 999px;
  border: 1px solid var(--zoe-filet); background: transparent; color: var(--zoe-encre);
  font: 600 12px/1 var(--font-family, inherit); cursor: pointer;
}
.zoe-puce-bilan iconify-icon { font-size: 15px; color: var(--zoe-encre-douce); }
.zoe-puce-bilan:hover:not(:disabled), .zoe-puce-bilan[aria-expanded="true"] { border-color: var(--zoe-encre-douce); background: var(--zoe-carte); }
.zoe-puce-bilan:disabled { opacity: .5; cursor: default; }
.zoe-puce-bilan[hidden] { display: none; }
.zoe-menu-bilan {
  position: absolute; top: calc(100% + 6px); right: 12px; width: min(300px, calc(100% - 24px));
  padding: 11px 12px 12px; border: 1px solid var(--zoe-filet); border-radius: 14px; background: var(--zoe-fond);
}
.zoe-menu-bilan[hidden] { display: none; }
.zoe-menu-bilan-titre { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--zoe-encre); }

/* ---------- « Zoé réfléchit… » ---------- */
.zoe-reflexion { display: flex; align-items: center; gap: 9px; padding: 4px 18px 8px; font-size: 12.5px; color: var(--zoe-encre-douce); }
.zoe-reflexion[hidden] { display: none; }
.zoe-points { display: inline-flex; gap: 3px; }
.zoe-points i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: zoe-point 1.1s infinite ease-in-out; }
.zoe-points i:nth-child(2) { animation-delay: .15s; }
.zoe-points i:nth-child(3) { animation-delay: .3s; }
@keyframes zoe-point { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: .9; transform: translateY(-2px); } }

/* ---------- saisie ---------- */
.zoe-form {
  display: flex; align-items: flex-end; gap: 8px;
  margin: 0 12px; padding: 6px 6px 6px 14px;
  border: 1px solid var(--zoe-filet); border-radius: 16px; background: var(--zoe-fond);
}
.zoe-form:focus-within { border-color: var(--zoe-encre-douce); }
.zoe-saisie {
  flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent;
  color: var(--zoe-encre); font: 400 14px/1.45 var(--font-family, inherit);
  padding: 7px 0; max-height: 140px;
}
.zoe-panneau .zoe-saisie:focus-visible { outline: none; }
.zoe-saisie::placeholder { color: var(--zoe-encre-douce); opacity: .8; }
.zoe-envoyer, .zoe-arreter {
  width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--zoe-filet); border-radius: 11px; background: transparent; color: var(--zoe-encre);
  font-size: 18px; cursor: pointer;
}
.zoe-envoyer:hover, .zoe-arreter:hover { border-color: var(--zoe-encre); }
.zoe-envoyer[hidden], .zoe-arreter[hidden] { display: none; }
.zoe-carre { width: 11px; height: 11px; border-radius: 2px; background: currentColor; }
.zoe-pied { margin: 0; padding: 7px 16px 10px; font-size: 11px; color: var(--zoe-encre-douce); text-align: center; }
/* Entrée pendant une réponse : on dit pourquoi la question ne part pas encore. */
.zoe-attente { margin: 6px 16px 0; font-size: 12px; line-height: 1.4; color: var(--zoe-encre); }
.zoe-attente[hidden] { display: none; }

/* ---------- carte « À confirmer » ---------- */
.zoe-carte {
  align-self: stretch; padding: 14px; border-radius: 14px;
  border: 1px solid var(--zoe-filet); background: var(--zoe-fond); font-size: 13px;
}
.zoe-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.zoe-carte-titre { margin: 0; font-size: 14px; font-weight: 700; color: var(--zoe-encre); }
.zoe-carte-etiquette {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--zoe-filet); color: var(--zoe-encre-douce);
}
.zoe-dest { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--zoe-filet); }
.zoe-dest > li { border-bottom: 1px solid var(--zoe-filet); }
.zoe-dest > li.zoe-dest-fixe { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; }
.zoe-dest-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 2px; cursor: pointer; }
.zoe-dest-ligne input { width: 16px; height: 16px; accent-color: var(--zoe-encre); flex-shrink: 0; margin: 0; }
.zoe-dest-nom { flex: 1; min-width: 0; color: var(--zoe-encre); }
.zoe-dest-montant { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--zoe-encre); }
.zoe-dest-montant.zoe-dette { color: var(--zoe-dette); }
.zoe-dest-ecarte { opacity: .5; text-decoration: line-through; }
.zoe-carte-ecartes { margin: -4px 0 12px; font-size: 12px; line-height: 1.5; color: var(--zoe-encre-douce); }
/* Relance proposée d'office, texte du modèle écarté : dit à l'encre, avec un filet à gauche (pas de couleur d'alerte). */
.zoe-carte-alerte, .zoe-carte-note { margin: 10px 0 0; padding: 6px 0 6px 10px; border-left: 3px solid var(--zoe-encre); font-size: 12px; line-height: 1.45; color: var(--zoe-encre); }
.zoe-carte-alerte { font-weight: 600; }
.zoe-carte-libelle { display: block; font-size: 12px; font-weight: 600; color: var(--zoe-encre-douce); margin-bottom: 6px; }
.zoe-carte-zone {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px;
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--zoe-filet);
  background: var(--zoe-fond); color: var(--zoe-encre); font: 400 13px/1.5 var(--font-family, inherit);
}
.zoe-carte-zone:focus { outline: none; border-color: var(--zoe-encre-douce); }
.zoe-carte-aide { margin: 5px 0 0; font-size: 11px; color: var(--zoe-encre-douce); }
.zoe-carte-apercu, .zoe-carte-texte-final { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--zoe-carte); font-size: 12px; line-height: 1.5; color: var(--zoe-encre); }
.zoe-carte-bilan { margin: 0; font-weight: 600; color: var(--zoe-encre); }
.zoe-carte-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.zoe-carte-erreur { margin: 8px 0 0; font-size: 12px; color: var(--zoe-encre); }
.zoe-carte-erreur:empty { display: none; }

.zoe-btn {
  height: 36px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  font: 600 13px/1 var(--font-family, inherit); white-space: nowrap;
}
.zoe-btn-filet { border: 1px solid var(--zoe-filet); background: transparent; color: var(--zoe-encre); }
.zoe-btn-filet:hover { border-color: var(--zoe-encre-douce); }
.zoe-btn-plein { border: 1px solid var(--zoe-pastille); background: var(--zoe-pastille); color: var(--zoe-pastille-texte); }
.zoe-btn-plein:hover:not(:disabled) { opacity: .88; }
.zoe-btn:disabled { opacity: .4; cursor: default; }

/* ---------- accessibilité ---------- */
.zoe-lecteur, .zoe-annonce {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- entrée du Menu téléphone ---------- */
.menu-grid-item.zoe-menu { font: inherit; color: inherit; }
.zoe-menu .zoe-avatar { --zoe-a: 52px; margin: -2px 0; }   /* même place que les pastilles de 48 px des autres tuiles */
@media (max-width: 480px) { .zoe-menu .zoe-avatar { --zoe-a: 46px; } }

/* ---------- téléphone : plein écran ---------- */
@media (max-width: 640px) {
  .zoe-panneau {
    top: 0; right: 0; bottom: 0; left: 0; width: auto; height: 100dvh;
    border: 0; border-radius: 0; box-shadow: none; transform: translateY(12px);
    padding-top: env(safe-area-inset-top, 0px);
  }
  .zoe-panneau.zoe-visible { transform: none; }
  .zoe-tete { padding: 10px 8px 10px 14px; }
  .zoe-icone-btn { width: 44px; height: 44px; }
  .zoe-puce-bilan { height: 36px; }
  .zoe-bilan-btn { height: 40px; }
  .zoe-fil { padding: 14px 14px 8px; }
  .zoe-question { max-width: 88%; }
  .zoe-form { margin: 0 10px; }
  .zoe-saisie { font-size: 16px; }   /* pas de zoom automatique sur iPhone */
  .zoe-envoyer, .zoe-arreter { width: 40px; height: 40px; }
  .zoe-pied { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .zoe-btn { height: 42px; }
  body.zoe-plein-ecran { overflow: hidden; }
}
/* Petits téléphones (360–400 px) : la puce « Bilan » n'est plus qu'une icône de 44 × 44 (le mot reste pour les lecteurs
   d'écran) et l'état tient sur une ligne : l'en-tête ne grandit plus quand la conversation commence. */
@media (max-width: 400px) {
  .zoe-tete { gap: 8px; }
  .zoe-puce-bilan { position: relative; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .zoe-puce-bilan iconify-icon { font-size: 19px; }
  .zoe-puce-bilan span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .zoe-etat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  .zoe-panneau { transition: none; transform: none; }
  .zoe-fil { scroll-behavior: auto; }
  .zoe-points i { animation: none; opacity: .6; }
}

@media print { .zoe-panneau, .zoe-ouvrir { display: none !important; } }