/* NutriSaaS — Composants reutilisables : onglets, modales, badges, toggle,
   accordeons, panneau IA flottant, toasts, animations.
   Extrait de site/index.html le 2026-07-13. */

/* Boutons neutres (gris clair) qui restaient codes en dur en style inline
   (#f8fafc) sans variante .dark — invisibles/dissonants en mode sombre.
   Classe partagee pour eviter de repeter le meme correctif partout. */
.btn-neutral { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.dark .btn-neutral { background: #1e293b; color: #cbd5e1; border-color: #334155; }

/* Onglets du haut (.tnav) : shell.css. */
/* Day tabs */
.dtab{transition:all .15s ease;padding:.35rem .8rem;border-radius:.5rem;font-size:.8rem;font-weight:500;cursor:pointer;border:1px solid #cbd5e1;background:#fff;color:#475569}
.dark .dtab{background:#1e293b;border-color:#334155;color:#94a3b8}
.dtab.on{background:#16a34a;color:#fff;border-color:#16a34a;box-shadow:0 1px 2px rgba(22,163,74,.3)}
.dtab:hover{border-color:#94a3b8}

/* Modal */
/* BUG (trouve en testant la modale de checkout Whop) : z-index:9000 mettait TOUTE modale
   .overlay derriere #landing-screen et #login-screen (Tailwind z-[9999]) — invisible bien que
   techniquement "ouverte" (display:flex). Ne s'etait jamais vu avant car aucune modale n'etait
   declenchee depuis l'ecran landing/login jusqu'ici (m-newclient, m-admin, etc. s'ouvrent
   uniquement depuis l'app, deja au-dessus). Remonte au-dessus des deux pour que toute modale
   fonctionne quel que soit l'ecran depuis lequel elle s'ouvre. */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);animation:fadeIn .15s ease-out}
.mbox{background:#fff;border-radius:.875rem;padding:1.5rem;width:90%;max-width:48rem;max-height:90vh;overflow-y:auto;border:1px solid #e2e8f0;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);animation:slideUp .2s ease-out}
.dark .mbox{background:#1e293b;color:#e2e8f0;border-color:#334155}
/* Croix de fermeture des fenetres : zone de 44 px (au doigt), meme marge visuelle qu avant. */
.mclose{display:inline-grid;place-items:center;flex-shrink:0;width:2.75rem;height:2.75rem;margin:-.5rem -.6rem -.5rem 0;border:0;border-radius:.6rem;background:none;color:#64748b;font-size:1.5rem;line-height:1;cursor:pointer}
.dark .mclose{color:#94a3b8}
.mclose:hover{background:var(--hover,#f1f5f9);color:var(--ink,#0f172a)}
/* En-tete de fenetre qui reste visible quand on fait defiler une longue fenetre. */
.mbox-head-sticky{position:sticky;top:-1.5rem;z-index:2;margin:-1.5rem -1.5rem 1.25rem!important;padding:1rem 1.5rem .75rem;background:inherit;border-bottom:1px solid var(--line,#e2e8f0)}

/* Badge IMC */
.bge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.bg-ok{background:#dcfce7;color:#15803d}
.bg-w{background:#fef9c3;color:#854d0e}
.bg-o{background:#ffedd5;color:#c2410c}
.bg-r{background:#fee2e2;color:#b91c1c}

/* Toggle */
.tgl{width:3rem;height:1.5rem;border-radius:9999px;background:#e2e8f0;position:relative;cursor:pointer;transition:.2s;border:none;outline:none}
.tgl.on{background:#16a34a}
.tgl::after{content:'';position:absolute;top:.2rem;left:.2rem;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.tgl.on::after{transform:translateX(1.5rem)}

/* NAP radio */
.nap-opt{display:flex;align-items:center;gap:.75rem;padding:.65rem .9rem;border-radius:.75rem;border:1px solid #e2e8f0;cursor:pointer;transition:.15s;background:#fff}
.dark .nap-opt{background:#1e293b;border-color:#334155}
.nap-opt.on{border-color:#16a34a;background:#f0fdf4}
.dark .nap-opt.on{background:#052e16}
.nap-opt:hover{border-color:#86efac}

/* Section header */
.sh{display:flex;align-items:center;gap:.5rem;font-weight:600;margin-bottom:1.25rem;color:#0f172a;font-size:.95rem}
.dark .sh{color:#e2e8f0}

/* Cards calmes sans sauts visuels */
.card{border:1px solid #e2e8f0;border-radius:.75rem;transition:border-color .2s ease,box-shadow .2s ease;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.dark .card{border-color:#334155;box-shadow:none}
.card:hover{border-color:#cbd5e1;box-shadow:0 4px 12px rgba(15,23,42,.06)}

/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes sectionFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.anim-in{animation:sectionFade .28s ease-out}
/* Stagger animation for KPI cards */
@keyframes kpiStagger{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
#kpi-grid>.card:nth-child(1){animation:kpiStagger .3s .05s ease-out both}
#kpi-grid>.card:nth-child(2){animation:kpiStagger .3s .1s ease-out both}
#kpi-grid>.card:nth-child(3){animation:kpiStagger .3s .15s ease-out both}
#kpi-grid>.card:nth-child(4){animation:kpiStagger .3s .2s ease-out both}

/* Bouton ghost (IA, etc.) */
.btn-ghost{padding:.55rem 1.1rem;border-radius:.75rem;border:1px solid #e2e8f0;background:#ffffff;color:#0f172a;font-size:.8rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;transition:all .2s cubic-bezier(.4,0,.2,1)}
.btn-ghost:hover{background:#f8fafc;box-shadow:0 6px 16px rgba(15,23,42,.12);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0);box-shadow:none}
.dark .btn-ghost{background:#0f172a;border-color:#334155;color:#e2e8f0}
.dark .btn-ghost:hover{background:#111827}

/* Textarea IA */
.ai-text{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:.8rem;line-height:1.55}

/* Login Screen */
#login-screen{background-image:radial-gradient(circle at 10% 20%, rgba(22,163,74,0.05) 0%, rgba(255,255,255,1) 90%);}

/* Accordéon */
.acc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.5rem;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dark .acc-header {
  background: #1e293b;
  color: #f1f5f9;
  border-bottom-color: #334155;
}
.acc-header:hover {
  background: #f1f5f9;
}
.dark .acc-header:hover {
  background: #334155;
}
.acc-body {
  padding: 1.5rem;
  background: #fff;
  transition: all 0.25s ease-out;
}
.dark .acc-body {
  background: #1e293b;
}
.acc-chevron {
  transition: transform 0.25s ease;
  font-size: 0.8rem;
  color: #64748b;
}
.dark .acc-chevron {
  color: #94a3b8;
}
.acc-card {
  border: 1px solid #e2e8f0;
  border-radius: 0.625rem;
  overflow: hidden;
  margin-bottom: 0.875rem;
  background: #ffffff;
  transition: border-color 0.15s ease;
}
.dark .acc-card {
  border-color: #334155;
  background: #1e293b;
}
.acc-card.open {
  border-color: #cbd5e1;
}
.dark .acc-card.open {
  border-color: #475569;
}
.acc-card.open .acc-chevron {
  transform: rotate(180deg);
}

/* Floating AI panel */
#ai-floating-panel {
  position: fixed;
  top: 7.2rem;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 24rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  box-shadow: 0 20px 40px rgba(15,23,42,0.15);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9998;
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark #ai-floating-panel {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  color: #e2e8f0;
}
.dark .ai-panel-tabs {
  background: #0f172a !important;
  border-bottom-color: #334155 !important;
}
.dark .ai-panel-tab {
  color: #94a3b8 !important;
}
.dark .ai-panel-tab.active {
  color: #22c55e !important;
  background: #1e293b !important;
  border-bottom-color: #22c55e !important;
}
#ai-floating-panel .panel-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
#ai-floating-panel .panel-close-btn:hover {
  color: #ef4444;
}

.ai-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  flex-shrink: 0;
}
.dark .ai-panel-header {
  background: #1e293b;
  border-bottom-color: #334155;
}

#ai-menus-bubble {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(22,163,74,0.4);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
  border: 2px solid rgba(255,255,255,0.2);
}
#ai-menus-bubble:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 28px rgba(22,163,74,0.5);
}
#ai-menus-bubble.active {
  background: #1e293b;
  transform: rotate(90deg);
}
.dark #ai-menus-bubble {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 10px 25px rgba(34,197,94,0.3);
}
.dark #ai-menus-bubble.active {
  background: #334155;
}
/* BUG (signale par Kylian, capture d'ecran) : la bulle (z-index:9999, tres
   au-dessus du tiroir clients plein ecran, z-index:210) restait affichee et
   chevauchait le bouton "Deconnexion" quand le tiroir s'ouvrait sur telephone
   — sa visibilite ne depend que de l'onglet actif (t-menus), jamais de l'etat
   du tiroir. Les bulles sont hors de #app-container dans le DOM (position:fixed
   posee n'importe ou), donc un selecteur descendant `.sidebar-collapsed #ai-*`
   ne les atteint jamais : `body:has(...)` fonctionne quelle que soit la
   position reelle dans l'arbre. `#app-sidebar.mobile-drawer-open` est la
   classe posee par toggleAppSidebar() (sidebar.js) exactement quand le tiroir
   est ouvert. */
@media (max-width: 768px), (max-width: 1024px) and (orientation: portrait) {
  body:has(#app-sidebar.mobile-drawer-open) #ai-menus-bubble,
  body:has(#app-sidebar.mobile-drawer-open) #ai-conclusion-bubble {
    display: none !important;
  }
}
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait) {
  #ai-menus-bubble { display: none !important; }
}
/* La classe bubble-pulse etait posee sur la bulle (HTML) sans aucune regle
   correspondante nulle part dans le fichier — l'effet d'appel visuel n'avait
   jamais ete implemente. Halo pulsant discret, desactive des que la bulle
   passe en mode "actif" (panneau ouvert) pour ne pas distraire pendant la
   conversation. */
.bubble-pulse {
  animation: bubblePulse 2.4s ease-out infinite;
}
.bubble-pulse.active {
  animation: none;
}
@keyframes bubblePulse {
  0% { box-shadow: 0 10px 25px rgba(22,163,74,0.4), 0 0 0 0 rgba(22,163,74,0.45); }
  70% { box-shadow: 0 10px 25px rgba(22,163,74,0.4), 0 0 0 .9rem rgba(22,163,74,0); }
  100% { box-shadow: 0 10px 25px rgba(22,163,74,0.4), 0 0 0 0 rgba(22,163,74,0); }
}

.ai-panel-tabs {
  display: flex;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.dark .ai-panel-tabs {
  background: #0f172a;
  border-bottom-color: #334155;
}
.ai-panel-tab {
  flex: 1;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.2s ease;
}
.ai-panel-tab.active {
  color: #16a34a;
  background: #fff;
  border-bottom: 2px solid #16a34a;
}

/* Premium Toast System */
#toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 18rem;
  max-width: 24rem;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 16px -6px rgba(15, 23, 42, 0.04);
  border-radius: 0.75rem;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.toast { cursor: pointer; }
/* Telephone / tablette portrait : messages en bas, au-dessus de la barre basse, sur toute
   la largeur (avant : colles au bord gauche et par-dessus "Nouveau client" dans le tiroir).
   top en !important : initToastPositioning() (ui.js) pose un top en ligne pour le bureau. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait) {
  #toast-container {
    top: auto !important; left: .75rem; right: .75rem;
    bottom: calc(4.25rem + .75rem + env(safe-area-inset-bottom, 0px));
  }
  .toast { min-width: 0; max-width: none; }
}
.dark .toast {
  background: #1e293b;
  border-color: #475569;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}
/* Type de toast : icone coloree a gauche (ui.js) + barre de progression ; plus de
   bordure gauche epaisse coloree (motif generique). */
.toast-icon{width:1.1rem;height:1.1rem;flex-shrink:0;stroke:currentColor;fill:none}
.toast-success .toast-icon{color:#15803d}.toast-error .toast-icon{color:#b91c1c}
.toast-warning .toast-icon{color:#b45309}.toast-info .toast-icon{color:#1d4ed8}
.dark .toast-success .toast-icon{color:#4ade80}.dark .toast-error .toast-icon{color:#fca5a5}
.dark .toast-warning .toast-icon{color:#fcd34d}.dark .toast-info .toast-icon{color:#93c5fd}
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #15803d;
  width: 100%;
  transform-origin: left;
  animation: toastProgress linear forwards;
}
.toast-error .toast-progress { background: #ef4444; }
.toast-warning .toast-progress { background: #f59e0b; }
.toast-info .toast-progress { background: #3b82f6; }

@keyframes toastIn {
  from { transform: translateX(100%) scale(0.9); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to { transform: translateX(120%) scale(0.9); opacity: 0; }
}
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
.float-anim {
  animation: float 6s ease-in-out infinite;
}
/* Boutons verts principaux — hover premium */
button[style*="background:#16a34a"],
button[style*="bg-green-600"]{transition:all .2s cubic-bezier(.4,0,.2,1)}
button[style*="background:#16a34a"]:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(22,163,74,.3)!important}
button[style*="background:#16a34a"]:active{transform:translateY(0)}

/* Landing responsive */
@media(max-width:640px){
  #landing-screen h1{font-size:2.5rem!important;line-height:1.1!important}
  #landing-screen header{flex-direction:column;gap:.75rem;margin-bottom:2rem!important;align-items:flex-start}
  #landing-screen header>div:last-child{flex-direction:column;width:100%;gap:.5rem}
  #landing-screen header>div:last-child button{width:100%}
  #landing-screen main{flex-direction:column!important;padding-bottom:2rem!important}
  #landing-screen .relative.h-\[500px\]{height:250px!important;min-height:200px}
  #landing-screen .absolute.w-24{width:3rem!important;height:3rem!important}
  #landing-screen .absolute.w-20{width:2.5rem!important;height:2.5rem!important}
  #landing-screen .absolute.w-28{width:3.5rem!important;height:3.5rem!important}
  #landing-screen .absolute.w-32{width:3.5rem!important;height:3.5rem!important}
  #landing-screen .relative.w-64{width:10rem!important;height:10rem!important;padding:1rem!important}
  #landing-screen .relative.w-64 .text-6xl{font-size:2.5rem!important}
}
/* Admin modal KPI grid mobile */
@media(max-width:640px){
  #m-admin .mbox div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}
}

/* Style global pour la bulle Copilote Conclusion.
   BUG (trouve en implementant l'ouverture au survol, jamais signale car
   invisible en usage normal a la souris) : `display:flex !important` forcait
   cette bulle visible EN PERMANENCE, sur tous les onglets — la seule chose
   qui la masquait vraiment etait `updateAiBubbleVisibility()` posant
   `style.display='none'` en inline, qu'un `!important` externe bat toujours.
   Consequence concrete : sur l'onglet Menus, les deux bulles (memes
   bottom/right) se superposaient exactement, et #ai-conclusion-bubble (plus
   loin dans le DOM) recevait TOUS les clics/survols a la place de
   #ai-menus-bubble — le Copilote Menus etait donc injoignable au clic sur la
   bulle. Retrait du display forcé : la visibilite redevient entierement
   pilotee par le JS, comme #ai-menus-bubble (qui n'a jamais eu ce probleme). */
#ai-conclusion-bubble {
  position: fixed;
  bottom: calc(4.25rem + 1rem + env(safe-area-inset-bottom, 0px)) !important;
  right: 1.5rem !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #fff !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(22,163,74,0.3) !important;
  z-index: 9999 !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  transition: all .2s ease !important;
}
#ai-conclusion-bubble:hover {
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(22,163,74,0.5) !important;
}
#ai-conclusion-bubble.active {
  background: #1e293b !important;
  transform: rotate(90deg) !important;
}
.dark #ai-conclusion-bubble {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 10px 25px rgba(34,197,94,0.3) !important;
}
.dark #ai-conclusion-bubble.active {
  background: #334155 !important;
}

@media (min-width: 1025px) {
  #ai-conclusion-bubble {
    bottom: 1.5rem !important;
  }
}


/* ━━━━━━━━ MINI ÉDITEUR DE TEXTE (Gras, Souligné, Taille, Couleur, Justifier, Puces) ━━━━━━━━ */
.mini-editor-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--r-ctl, 8px);
  border: 1px solid var(--line, #e2e8f0);
  background: var(--surface, #ffffff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.mini-editor-wrap:focus-within {
  border-color: var(--brand, #15803d);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
}

.mini-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  padding: 6px 8px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line, #e2e8f0);
  font-size: 0.8rem;
  user-select: none;
}

.dark .mini-editor-toolbar {
  background: #0f172a;
  border-bottom-color: var(--line, #334155);
}

.me-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink, #1e293b);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.me-btn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink);
}

.dark .me-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.me-btn:active {
  background: rgba(15, 23, 42, 0.12);
}

.me-sep {
  width: 1px;
  height: 18px;
  background: var(--line, #e2e8f0);
  margin: 0 3px;
  flex-shrink: 0;
}

.dark .me-sep {
  background: var(--line, #334155);
}

.me-select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--ink, #1e293b);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
}

.dark .me-select {
  background: #1e293b;
  border-color: #475569;
  color: #e2e8f0;
}

.me-colors {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: rgba(15, 23, 42, 0.03);
  border-radius: 6px;
}

.dark .me-colors {
  background: rgba(255, 255, 255, 0.05);
}

.me-color-dot {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}

.me-color-dot:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px var(--brand, #15803d);
}

.me-spacer {
  flex: 1;
}

.me-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dark .me-ai-btn {
  background: rgba(22, 163, 74, 0.15);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.3);
}

.me-ai-btn:hover {
  background: #dcfce7;
  color: #15803d;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.2);
}

.mini-editor-content {
  min-height: 110px;
  padding: 12px 14px;
  background: var(--surface, #ffffff);
  color: var(--ink, #1e293b);
  line-height: 1.6;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  overflow-y: auto;
  word-break: break-word;
}

.dark .mini-editor-content {
  background: var(--surface, #1e293b);
  color: var(--ink, #f1f5f9);
}

.mini-editor-content:empty:before {
  content: attr(data-placeholder);
  color: var(--muted, #94a3b8);
  pointer-events: none;
  display: block;
}

.mini-editor-content[style*="text-align: justify"],
.mini-editor-content [style*="text-align: justify"],
.mini-editor-content div[align="justify"] {
  text-align: justify !important;
}

/* ━━━━━━━━ BARRE COPILOTE MENUS (MENUS 7 JOURS) ━━━━━━━━ */
.menus-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(to right, rgba(240, 253, 244, 0.9), rgba(255, 255, 255, 0.9));
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.06);
}

.dark .menus-header-bar {
  background: linear-gradient(to right, rgba(22, 163, 74, 0.12), rgba(15, 23, 42, 0.6));
  border-color: rgba(34, 197, 94, 0.3);
}

.menus-header-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menus-header-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink, #1e293b);
}

.menus-header-sub {
  font-size: 0.78rem;
  color: var(--muted, #64748b);
}

.menus-ai-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 2rem;
  padding: 0 .85rem;
  border: 1px solid var(--brand, #15803d);
  border-radius: .5rem;
  background: var(--brand, #15803d);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.2);
  transition: all 0.15s ease;
}

.menus-ai-action-btn:hover {
  background: #166534;
  border-color: #166534;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

/* Clic a cote d'un questionnaire en cours : petite secousse (guard.js), pas de message. */
@keyframes mbox-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.mbox-shake { animation: mbox-shake .3s ease; }
@media (prefers-reduced-motion: reduce) { .mbox-shake { animation: none; } }