/* À factoriser le CSS en plusieurs fichiers pour une meilleure maintenabilité. */
/* ================= TOKENS ================= */
/* @import url('./0-tokens/colors.css');
@import url('./0-tokens/spacing.css');
@import url('./0-tokens/typography.css'); */

/* ================= BASE ================= */
/* @import url('./1-base/reset.css');
@import url('./1-base/forms.css'); */

/* ================= UTILITIES ================= */
/* @import url('./2-utilities/theme.css');
@import url('./2-utilities/layout.css'); */

/* ================= COMPONENTS ================= */
/* @import url('./3-components/button.css');
@import url('./3-components/select.css');
@import url('./3-components/hero.css');
@import url('./3-components/output.css'); */




    /* =========================================================
      DESIGN SYSTEM — ROOT (LIGHT MODE)
      ========================================================= */
    :root {

      /* ----------------------------------------------
        1. COLOR TOKENS — médical, brand, texte
        ---------------------------------------------- */
      --medical-success: #10b981;
      --medical-info:    #3b82f6;
      --medical-warning: #f59e0b;
      --medical-danger:  #ef4444;
      --medical-neutral: #6b7280;

      --txt-strong: #0f172a;
      --txt-body:   #1f2937;
      --txt-muted:  #64748b;

      /* Mapping utilitaire → tokens (remplace Tailwind) */
      --color-blue-900: var(--select-accent);
      --color-gray-800: var(--txt-body);
      --color-gray-700: var(--txt-body);
      --color-gray-600: var(--txt-muted);

      /* ----------------------------------------------
        2. LAYOUT
        ---------------------------------------------- */
      --rail-w:   450px;
      --rail-min: 360px;
      --rail-max: 640px;

      --sidebar-w:           250px;
      --sidebar-collapsed-w: 56px;

      --rail-current:    0px;
      --sidebar-current: 0px;

      /* --main-max:     980px; */
      --reading-max:  820px;
      --reading-pad:  8px;
      --hero-row-h:   56px;

      /* Contenu central */
      --main-bg: #ffffff;

      /* Sidebar */
      --sidebar-bg:            var(--panel-bg);
      --sidebar-text:          var(--txt-body);
      --sidebar-hover-bg:      #f1f5f9;
      --sidebar-active-bg:     #eff6ff;
      --sidebar-active-border: #1e3a8a;

      /* ----------------------------------------------
        3. SURFACES (clair)
        ---------------------------------------------- */
      --panel-bg:     var(--field-bg);
      --panel-border: #e5e7eb;
      --panel-text:   #1f2937;

      --rail-border:  #dbeafe;

      --well-bg:      #f8fafc;
      --well-border:  #e2e8f0;
      --well-text:    var(--txt-body);

      --out-bg:       var(--well-bg);
      --out-border:   var(--well-border);
      --out-text:     var(--txt-body);
      --out-radius:   14px;

      /* ----------------------------------------------
        4. FORM FIELDS
        ---------------------------------------------- */
      --field-bg:          #f5f7fb;
      --field-text:        #111827;
      --field-border:      #e2e8f0;
      --field-placeholder: #6b7280;
      --field-focus:       #1e3a8a;

      /* ----------------------------------------------
        5. SELECT MENUS
        ---------------------------------------------- */
      --select-bg:         var(--field-bg);
      --select-text:       #111827;
      --select-border:     #e5e7eb;
      --select-hover:      #f8fafc;
      --select-accent:     #1e3a8a;
      --select-menu-bg:    var(--field-bg);
      --select-menu-bdr:   #e5e7eb;
      --select-option-hov: #eff6ff;
      --select-muted:      #6b7280;

      /* ----------------------------------------------
        6. CHAT BUBBLES
        ---------------------------------------------- */
      --bubble-user-bg:       #1e3a8a;
      --bubble-user-text:     #ffffff;
      /* Bulles assistant = même fond que le header */
      --bubble-assist-bg:     var(--bot-header-bg);
      --bubble-assist-border: var(--bot-header-border);
      --bubble-assist-text:   var(--bot-text);

      /* -----------------------------------------------------
        BOT UI — PALETTE CLAIRE
        ----------------------------------------------------- */
      --bot-bg:           #eaf3ff;   /* fond pastel */
      --bot-bg-hover:     #d5e7ff;   /* hover plus foncé */
      --bot-text:         #1e3a8a;   /* bleu profond lisible */
      --bot-border:       #bfd4ff;   /* bordure douce */
      --bot-shadow:       0 2px 10px rgba(0,0,0,.08);

      /* Header */
      --bot-header-bg:    #e2edff;   /* un poil plus soutenu */
      --bot-header-border:#cbdcff;
      --bot-header-text:  #1e3a8a;   /* bleu marque mais adouci */

      /* ----------------------------------------------
        7. CTA BUTTONS
        ---------------------------------------------- */
      --cta-bg:       #ffffff;
      --cta-text:     #111827;
      --cta-border:   #1f2937;
      --cta-hover-bg: #f3f4f6;
      --cta-shadow:   0 1px 2px rgba(0,0,0,.05);

      /* ----------------------------------------------
        8. BUTTON SYSTEM (LIGHT)
        ---------------------------------------------- */
      --btn-radius: .5rem;
      --btn-gap: .625rem;
      --btn-font: 600;
      --btn-transition: all .2s cubic-bezier(.4,0,.2,1);
      --btn-shadow: 0 1px 2px rgba(0,0,0,.05);

      /* Primary */
      --btn-pri-bg:    #1e40af;
      --btn-pri-txt:   #fff;
      --btn-pri-bdr:   #1e40af;
      --btn-pri-hov:   #1e3a8a;
      --btn-pri-shadow:0 1px 3px rgba(30,64,175,.12), 0 1px 2px rgba(30,64,175,.08);

      /* Success */
      --btn-suc-bg:    #059669;
      --btn-suc-txt:   #fff;
      --btn-suc-bdr:   #059669;
      --btn-suc-hov:   #047857;
      --btn-suc-shadow:0 1px 3px rgba(5,150,105,.12);

      /* Danger */
      --btn-dan-bg:    #dc2626;
      --btn-dan-txt:   #fff;
      --btn-dan-bdr:   #dc2626;
      --btn-dan-hov:   #b91c1c;
      --btn-dan-shadow:0 1px 3px rgba(220,38,38,.12);

      /* Ghost */
      --btn-gho-bg:    transparent;
      --btn-gho-txt:   var(--txt-body);
      --btn-gho-bdr:   var(--field-border);
      --btn-gho-hov:   var(--select-hover);
      --btn-gho-shadow:0 1px 2px rgba(0,0,0,.04);
      /* ----------------------------------------------
        9. SIDEBAR (LIGHT)
        ---------------------------------------------- */
      --sidebar-bg: var(--panel-bg);
      --sidebar-border: var(--panel-border);
      --sidebar-text: var(--txt-body);
      --sidebar-hover-bg: color-mix(in srgb, var(--panel-bg) 85%, white);
      --sidebar-active-bg: color-mix(in srgb, var(--select-accent) 12%, var(--panel-bg));
      --sidebar-active-border: var(--select-accent);
    }

    /* =========================================================
      DESIGN SYSTEM — DARK MODE
      ========================================================= */
    body.theme-dark {

      /* ----------------------------------------------
        1. SURFACES GÉNÉRALES
        ---------------------------------------------- */
      --bg-page:   #0a0e17;
      --bg-card:   #141823;
      --bg-well:   #1a1f2e;
      --border-dk: #2a3441;

      background: var(--bg-page);

      /* ----------------------------------------------
        2. TEXTE
        ---------------------------------------------- */
      --txt-strong: #f1f5f9;
      --txt-body:   #cbd5e1;
      --txt-muted:  #94a3b8;

      /* ----------------------------------------------
        3. ACCENTS
        ---------------------------------------------- */
      --brand-dk:        #60a5fa;
      --accent-success:  #10b981;
      --accent-warning:  #f59e0b;
      --accent-danger:   #ef4444;

      /* ----------------------------------------------
        4. SURFACES DÉRIVÉES
        ---------------------------------------------- */
      --panel-bg:     var(--bg-page);
      --panel-border: var(--border-dk);
      --panel-text:   var(--txt-body);
      --rail-border:  var(--border-dk);

      --well-bg:      var(--bg-well);
      --well-border:  var(--border-dk);
      --well-text:    var(--txt-body);

      --out-bg:       var(--well-bg);
      --out-border:   var(--well-border);
      --out-text:     var(--txt-body);

      /* ----------------------------------------------
        5. FIELDS
        ---------------------------------------------- */
      --field-bg:         #1a1f2e;
      --field-text:       #f1f5f9;
      --field-border:     #2a3441;
      --field-placeholder:#6b7280;
      --field-focus:      var(--brand-dk);

      /* ----------------------------------------------
        6. SELECT MENUS
        ---------------------------------------------- */
      --select-bg:         var(--bg-card);
      --select-text:       var(--txt-body);
      --select-border:     var(--panel-border);
      --select-hover:      #121a2e;
      --select-accent:     #93c5fd;
      --select-menu-bg:    var(--bg-card);
      --select-menu-bdr:   var(--panel-border);
      --select-option-hov: #17223a;
      --select-muted:      var(--txt-muted);

      /* ----------------------------------------------
        7. CHAT BUBBLES
        ---------------------------------------------- */
      --bubble-user-bg:    #1d4ed8;
      --bubble-user-text:  #ffffff;
      --bubble-assist-bg:  var(--bg-card);
      --bubble-assist-border: var(--border-dk);
      --bubble-assist-text: var(--txt-body);

      /* ----------------------------------------------
        8. CTA
        ---------------------------------------------- */
      --cta-bg:      var(--bg-card);
      --cta-text:    var(--txt-strong);
      --cta-border:  var(--border-dk);
      --cta-hover-bg:#121a2e;
      --cta-shadow:  0 1px 3px rgba(0,0,0,.5);

      /* -----------------------------------------------------
        BOT UI — PALETTE SOMBRE
        ----------------------------------------------------- */
      --bot-bg:           #1d2942;   /* bleu nuit */
      --bot-bg-hover:     #27385c;   /* hover + clair */
      --bot-text:         #dbeafe;   /* bleu clair */
      --bot-border:       #2c4168;

      --bot-header-bg:    #233556;
      --bot-header-border:#30456d;
      --bot-header-text:  #93c5fd;   /* bleu clair lisible en dark */
      /* --bubble-assist-bg:     var(--bot-header-bg);
      --bubble-assist-border: var(--bot-header-border);
      --bubble-assist-text:   var(--bot-text); */

      /* ----------------------------------------------
        9. BUTTON SYSTEM (DARK)
        ---------------------------------------------- */
      --btn-shadow: 0 1px 2px rgba(0,0,0,.35);

      --btn-pri-bg:   #2563eb;
      --btn-pri-bdr:  #1d4ed8;
      --btn-pri-hov:  #1d4ed8;

      --btn-suc-bg:   #16a34a;
      --btn-suc-bdr:  #15803d;
      --btn-suc-hov:  #127a3b;

      --btn-dan-bg:   #b91c1c;
      --btn-dan-bdr:  #991b1b;
      --btn-dan-hov:  #8a1717;

      --btn-gho-bg:   transparent;
      --btn-gho-txt:  #cbd5e1;
      --btn-gho-bdr:  #334155;
      --btn-gho-hov:  #1e293b;

      /* ----------------------------------------------
        10. SIDEBAR (DARK)
        ---------------------------------------------- */
      --sidebar-bg:            var(--bg-card);
      --sidebar-text:          var(--txt-body);
      --sidebar-border: var(--border-dk);
      --sidebar-hover-bg: color-mix(in srgb, var(--bg-card) 85%, black);
      --sidebar-active-bg: color-mix(in srgb, var(--select-accent) 20%, var(--bg-card));
      --sidebar-active-border: var(--select-accent);

      /* ----------------------------------------------
        11. CONTENT BACKGROUND
        ---------------------------------------------- */
      --main-bg: transparent;
    }


    /* =========================================================
      TOP BAR — MediFlow AppBar
      ========================================================= */

    .mf-topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3rem;                          /* 48px */
      z-index: 50;

      background: color-mix(in srgb, var(--panel-bg) 75%, transparent);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--panel-border);

      display: flex;
      align-items: center;
      pointer-events: none;                   /* la barre n’intercepte pas les clics */
    }

    .mf-topbar-inner {
      width: 100%;
      height: 100%;
      pointer-events: auto;                   /* tout le contenu clicable */

      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 1rem;
      padding: 0 .75rem;
    }

    .mf-topbar-brand {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin-right: auto;
      user-select: none;
    }

    .mf-topbar-brand img {
      width: 40px;
      height: 40px;
    }

    .mf-topbar-brand .mf-brand {
      font-weight: 600;
      color: var(--txt-strong);
    }

    .mf-topbar-item {
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .mf-topbar-toggle {
      display: flex;
      align-items: center;
      gap: .5rem;
      font-size: .875rem;
      color: var(--txt-body);
    }

    .mf-topbar-toggle input {
      accent-color: var(--select-accent);
    }

    .mf-topbar-btn i {
      color: inherit;
    }

    .mf-badge {
      padding: 0 .5rem;
      border-radius: .375rem;
      font-size: .75rem;
      font-weight: 600;
    }

    .mf-badge--info {
      background: color-mix(in srgb, var(--medical-info) 15%, transparent);
      color: var(--medical-info);
    }

    
/* =========================================================
   SIDEBAR GAUCHE — VERSION PRO, ALIGNÉE SOUS LA TOPBAR
   ========================================================= */

#mainSidebar {
  position: sticky;              /* reste dans la grille */
  top: 3rem;                     /* sous la topbar */
  align-self: start;

  box-shadow: 3px 0 6px rgba(0,0,0,0.3);
  border-right: 1px solid rgba(255,255,255,0.08);

  width: var(--sidebar-current);

  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);

  display: none;
  flex-direction: column;

  overflow-y: auto;
  overscroll-behavior: contain;

  padding: .75rem .5rem;

  transition:
    width .25s cubic-bezier(.2,.8,.2,1),
    background .25s ease,
    border-color .25s ease;
}

@media (min-width:1024px){
  .two-col.sidebar-pinned #mainSidebar {
    display: flex;
  }

  .two-col.sidebar-pinned.sidebar-collapsed #mainSidebar {
    padding: .75rem .25rem;
  }
}

/* -----------------------------------------
   HEADER DE SIDEBAR (titre + flèche)
   ----------------------------------------- */
#mainSidebar .sb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: .5rem .5rem;
  margin-bottom: .5rem;

  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
}

/* Titre + icône */
#mainSidebar .sb-title {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Texte + icône — no animation (évite les flash au collapse) */
#mainSidebar .sb-title span,
#mainSidebar .sb-title i {
  display: inline-flex;
  max-width: 180px;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: none;
}

/* Mode replié */
.two-col.sidebar-collapsed #mainSidebar .sb-title span,
.two-col.sidebar-collapsed #mainSidebar .sb-title i {
  max-width: 0 !important;
  opacity: 0 !important;
}

/* Flèche */
#mainSidebar #btnCollapseSidebar {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  color: var(--sidebar-text);
  transition: background .2s ease;
}

#mainSidebar #btnCollapseSidebar:hover {
  background: var(--sidebar-hover-bg);
}

/* Flèche centrée quand replié */
.two-col.sidebar-collapsed #mainSidebar #btnCollapseSidebar {
  margin-left: auto;
  margin-right: auto;
}
/* -----------------------------------------
   BOUTONS D’ONGLET
   ----------------------------------------- */




#mainSidebar .tab-button {
  width: 100%;
  padding: .5rem .75rem;
  border-radius: .5rem;

  display: flex;
  align-items: center;
  gap: .75rem;

  font-weight: 500;
  color: var(--sidebar-text);

  transition: background .2s ease, padding .2s ease;
}

#mainSidebar .tab-button:hover {
  background: var(--sidebar-hover-bg);
}

#mainSidebar .tab-button.active {
  background: var(--sidebar-active-bg);
  border-left: 3px solid var(--sidebar-active-border);
  padding-left: .5rem;
}

/* Texte des onglets (collapse) */
#mainSidebar .tab-button span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
  opacity: 1;
  transition: none;
}

/* Mode replié */
.two-col.sidebar-collapsed #mainSidebar .tab-button span {
  max-width: 0 !important;
  opacity: 0 !important;
}




    /* ===========================================
      COMPONENT — Example Picker (uniformisé)
      =========================================== */
    .mf-example-picker {
      position: relative;
      display: flex;
      justify-content: center;
      margin-top: .75rem;
    }

    /* Menu déroulant */
    .mf-example-menu {
      position: absolute;
      top: 100%;
      margin-top: .5rem;
      width: max-content;       /* 👈 s'adapte automatiquement au texte */
      min-width: 15rem;         /* 👈 largeur minimum pro */
      max-width: 90vw;          /* 👈 ne dépasse jamais la fenêtre */
      max-height: 16rem;
      overflow-y: auto;
      z-index: 20;
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      border-radius: .5rem;
      box-shadow: 0 4px 12px rgba(0,0,0,.08);
    }


    /* =========================================================
      DROPDOWN MENUS — lisibles en dark et light
      ========================================================= */
    .mf-dropdown-panel {
      background: var(--select-menu-bg);
      border: 1px solid var(--select-menu-bdr);
      color: var(--select-text);
    }

    /* Options du menu */
    .mf-dropdown-option {
      display: block;        /* 🔥 empêche deux options sur la même ligne */
      width: 100%;           /* 🔥 occupe toute la largeur */
      padding: .5rem .75rem;
      cursor: pointer;

      color: var(--select-text);
      background: transparent;
      transition: background .15s ease, color .15s ease;
    }

    .mf-dropdown-option:hover {
      background: var(--select-option-hov);
    }


    /* =========================================================
      Utility classes tokenisées (light + dark)
      ========================================================= */

    /* Texte */
    .mf-text-strong { color: var(--txt-strong); }
    .mf-text-body   { color: var(--txt-body); }
    .mf-text-muted  { color: var(--txt-muted); }

    /* Accents */
    .mf-text-accent      { color: var(--select-accent); }
    .mf-text-accent-weak { color: var(--select-hover); }
    .mf-text-danger      { color: var(--accent-danger); }

    /* Surfaces */
    .mf-surface { 
      background: var(--panel-bg);
      border-color: var(--panel-border);
    }

    /* Bordures */
    .mf-border-accent-weak { border-color: rgba(147,197,253,.5); } bleu clair tokenisé


    /* Auto : suit le système si pas .theme-light */
    @media (prefers-color-scheme: dark){
      body:not(.theme-light){
        /* Tokens dark */
        --bg-page:#0b1220; 
        --bg-card:#111827; 
        --bg-well:#1f2937;
        --border-dk:#243244; 
        --txt-strong:#e5e7eb; 
        --txt-body:#cbd5e1; 
        --txt-muted:#94a3b8; 
        --brand-dk:#93c5fd;

        /* Surfaces dérivées */
        --panel-bg: var(--page-bg); 
        --panel-border:var(--border-dk); 
        --panel-text:var(--txt-body);
        --rail-border:var(--border-dk);

        --well-bg:var(--bg-well); 
        --well-border:var(--border-dk); 
        --well-text:var(--txt-body);

        /* Menus — overrides dark */
        --select-bg:        var(--bg-card);
        --select-text:      var(--txt-body);
        --select-border:    var(--panel-border);
        --select-hover:     #121a2e;
        --select-accent:    #93c5fd;      /* accent en sombre */
        --select-menu-bg:   var(--bg-card);
        --select-menu-bdr:  var(--panel-border);
        --select-option-hov:#17223a;
        --select-muted:     var(--txt-muted);
        /* Fields (dark) */
        --field-bg:          #0c1424;   /* légèrement plus sombre que #0e1526 */
        --field-text:        var(--txt-strong); /* texte + clair (quasi-blanc) */
        --field-border:      var(--border-dk);
        --field-placeholder: #7b8794;
        --field-focus:       var(--brand-dk);

        /* Fond de page */
        background:var(--bg-page);
      }
    }

    @media (min-width: 1536px){
      :root{ --reading-max: 920px; }  /* un peu plus large sur très grands écrans */
    }

    .reading-col{
      max-width: var(--reading-max);
      margin-inline: auto;         /* centre la colonne */
      padding-inline: var(--reading-pad);
    }

    /* Si tu veux un bloc "plein écran" ponctuel dans le flux : ajoute-lui .full-bleed */
    .reading-col > .full-bleed{
      max-width: none;
      padding-inline: 0;
    }

    /* Impression : masquer le rail droit */
    @media print { #chatrail { display: none !important; } }


    /* =========================================================
      ICONES (dans tutoriel) — jeu cohérent pour clair + sombre
      ========================================================= */

    /* Accent principal (bleu médical) */
    .mf-icon-accent {
      color: var(--accent-info, var(--brand-dk));
    }

    /* Accent faible (icône secondaire, moins agressive) */
    .mf-icon-accent-weak {
      color: var(--txt-muted);
    }

    /* Accent succès / raisonnement */
    .mf-icon-success {
      color: var(--accent-success);
    }

    /* Accent alerte douce */
    .mf-icon-warning {
      color: var(--accent-warning);
    }

    /* Accent danger (erreurs) */
    .mf-icon-danger {
      color: var(--accent-danger);
    }


/* =========================================================
   COLLAPSIBLES — style factorisé pour clair + sombre
   ========================================================= */

.mf-collapsible {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: .5rem 0;
  transition: color .2s ease;
}
.mf-collapsible:hover { opacity: .8; }

.mf-collapse-content.hidden { display: none; }

/* Étapes internes */
.mf-step {
  border-left: 3px solid var(--out-border, #e2e8f0);
  padding-left: .75rem;
  margin-top: .5rem;
}
.mf-step summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--txt-strong, #1e3a8a);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.mf-step summary::-webkit-details-marker { display: none; }
.mf-step[open] summary i { transform: rotate(90deg); }
.mf-step i { transition: transform .25s ease; }

.mf-feedback {
  width: 100%;
  border: 1px solid var(--out-border, #cbd5e1);
  border-radius: 6px;
  background: var(--field-bg, #f8fafc);
  color: var(--txt-body, #111);
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  margin: 0.4rem 0;
  resize: vertical;
}




    /* =========================================================
      1) UI PRIMITIVES
      ========================================================= */
    .tab-content{ display:none; }
    .tab-content.active{ display:block; }
    /* .header-tabs .tab-button.active { border-bottom: 3px solid #1e3a8a; color:#1e3a8a; } */
    /* === Base Fields (appliqué partout) === */
    textarea,
    select,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    [contenteditable="true"]{
      background: var(--field-bg);
      color: var(--field-text) !important;  /* ← assure un texte bien lisible */
      caret-color: var(--field-text);       /* ← couleur du curseur */
      border: 1px solid var(--field-border);
      border-radius: .5rem;
      padding: .5rem .75rem;
      box-shadow: none;
    }

    /* Placeholder unifié (toujours plus atténué) */
    textarea::placeholder,
    input::placeholder{
      color: var(--field-placeholder);
      opacity: 1; /* certains navigateurs atténuent sinon */
    }

    /* Focus unifié (même accent que les menus) */
    textarea:focus,
    select:focus,
    input[type="text"]:focus,
    input[type="search"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="password"]:focus,
    input[type="url"]:focus,
    input[type="tel"]:focus,
    [contenteditable="true"]:focus{
      outline: 2px solid var(--field-focus);
      outline-offset: 2px;
    }

    .output-box{
      min-height:200px;
      border:1px solid; border-color: var(--well-border, #e2e8f0);
      background: var(--well-bg, #f8fafc);
      color: var(--well-text, inherit);
    }

    /* === Cartes factorisées === */
    .mf-panel{
      background: var(--panel-bg);
      color: var(--panel-text);
      border: 1px solid var(--panel-border);
      border-radius: .5rem;
      box-shadow: 0 1px 2px rgb(0 0 0 / .05);
      padding: 1rem;
    }
    .mf-panel .mf-panel-title{
      font-weight: 700;
      margin-bottom: .5rem;
      color: var(--txt-strong, var(--panel-text));
      display:flex; align-items:center; gap:.5rem;
    }

    /* Mini-chat factorisé (à cumuler avec .mf-panel) */
    .mf-chatcard .mf-chat-messages{
      background: var(--well-bg);
      border: 1px solid var(--well-border);
      border-radius: .5rem;
      min-height: 120px; max-height: 40vh;
      overflow:auto; padding:.75rem;
    }
    .mf-chatcard .mf-chat-input{ display:flex; gap:.5rem; margin-top:.5rem; }
    /* tes règles “Base Fields” stylent déjà inputs/textarea; rien à refaire */

    /* Petite ligne de séparation générique déjà utilisée dans la section présentation */
    .mf-divider{ border-top:1px solid var(--panel-border); }
    /* Texte atténué (suit les tokens clair/sombre) */
    .mf-muted{ color: var(--txt-muted) !important; }
    /* Hero (section de saisie principale) */

      /* =========================================================
      2) CHAT BUBBLES — Style simple (non thématisé)
      ========================================================= */
    /* CONTENEUR DES BULLES */
    .mf-chat-messages {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .mf-chat-bubble {
      max-width: 80%;
      padding: 0.55rem 0.9rem;
      border-radius: 0.75rem;
      line-height: 1.45;
      display: inline-block;
      word-break: break-word;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .mf-chat-content {
      font-size: 0.95rem;
      white-space: pre-wrap;   /* ici plutôt que sur la bulle */
    }


    /* UTILISATEUR (à droite) */
    .mf-chat-bubble.mf-user {
      margin-left: auto;
      background: var(--accent-bg, #276ef1);
      color: white;
    }

    .mf-chat-bubble.mf-assistant {
      margin-left: 0;         /* toujours collée à gauche */
      margin-right: auto;     /* empêche l’extension horizontale */
      margin-top: 0.4rem;     /* espace vertical naturel */
      margin-bottom: 0.4rem;

      background: var(--panel-bg, #f5f7fa);
      color: var(--panel-text, #222);
      border: 1px solid var(--panel-border, #d0d3d8);
    }
    
    /* 1) Enlève les marges par défaut des blocs Markdown */
    .mf-chat-content p,
    .mf-chat-content ul,
    .mf-chat-content ol,
    .mf-chat-content blockquote,
    .mf-chat-content pre,
    .mf-chat-content h1,
    .mf-chat-content h2,
    .mf-chat-content h3,
    .mf-chat-content h4,
    .mf-chat-content h5,
    .mf-chat-content h6 {
      margin: 0;
    }

    /* Bullets assistant: pas de marges héritées du HTML Markdown */
    .mf-chat-bubble.mf-assistant .mf-chat-content p {
      margin: 0;
    }
    .mf-chat-bubble.mf-assistant .mf-chat-content > :first-child { margin-top: 0; }
    .mf-chat-bubble.mf-assistant .mf-chat-content > :last-child  { margin-bottom: 0; }


    /* =========================================================
      THEME-COMPATIBLE OUTPUT + CHAT BUBBLES (STYLE PRINCIPAL)
      ========================================================= */

    /* ---------- CONTENEUR PRINCIPAL ---------- */
    .mf-output {
      background: var(--out-bg);
      color: var(--out-text);
      border: 1px solid var(--out-border);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      font-family: system-ui, sans-serif;
    }

    /* HEADER */
    .mf-output__header {
      position: sticky;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: color-mix(in srgb, var(--out-bg) 92%, transparent);
      backdrop-filter: blur(6px);
      padding: 0.7rem 1rem;
      border-bottom: 1px solid var(--out-border);
      z-index: 10;
    }
    .mf-output__title {
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--txt-strong);
    }

    /* Corps scrollable */
    .mf-output__body {
      padding: 1.1rem 1.3rem;
      overflow-y: auto;
      line-height: 1.5;
      font-size: 1rem;
      scroll-behavior: smooth;
      color: var(--txt-body);
    }
    .mf-output__body::-webkit-scrollbar {
      width: 8px;
    }
    .mf-output__body::-webkit-scrollbar-thumb {
      background: var(--txt-muted);
      border-radius: 4px;
    }
    .mf-output__body::-webkit-scrollbar-thumb:hover {
      background: color-mix(in srgb, var(--txt-muted) 60%, var(--txt-body));
    }

    /* ---------- BULLES ---------- */
    .mf-bubble {
      max-width: 80%;
      border-radius: 0.75rem;
      padding: 0.8rem 1rem;
      margin: 0.4rem 0;
      word-wrap: break-word;
      white-space: pre-wrap;
      line-height: 1.5;
      transition: background 0.25s ease, color 0.25s ease, border 0.25s ease;
      font-size: 0.95rem;
    }

    /* Utilisateur */
    .mf-bubble--user {
      background: var(--bubble-user-bg);
      color: var(--bubble-user-text);
      align-self: flex-end;
      margin-left: auto;
      border: 1px solid color-mix(in srgb, var(--bubble-user-bg) 80%, black);
    }

    /* Assistant */
    .mf-bubble--assistant {
      background: var(--bubble-assist-bg);
      color: var(--bubble-assist-text);
      border: 1px solid var(--bubble-assist-border);
      align-self: flex-start;
      margin-right: auto;
    }

    /* ---------- MARKDOWN GLOBAL (même style que bloc principal) ---------- */
    .mf-bubble--assistant,
    .mf-output__body {
      font-family: system-ui, sans-serif;
      color: var(--txt-body);
      line-height: 1.45;
    }

    /* Titres */
    .mf-bubble--assistant h1, .mf-output__body h1,
    .mf-bubble--assistant h2, .mf-output__body h2,
    .mf-bubble--assistant h3, .mf-output__body h3 {
      font-weight: 600;
      margin-top: 0.7em;
      margin-bottom: 0.3em;
      line-height: 1.35;
      color: var(--txt-strong);
    }
    .mf-bubble--assistant h1, .mf-output__body h1 { font-size: 1.15rem; }
    .mf-bubble--assistant h2, .mf-output__body h2 { font-size: 1.05rem; }
    .mf-bubble--assistant h3, .mf-output__body h3 { font-size: 1rem; }

    /* Paragraphes et listes */
    .mf-bubble--assistant p, .mf-output__body p {
      margin: 0.4em 0;
      color: var(--txt-body);
    }
    .mf-bubble--assistant ul, .mf-output__body ul,
    .mf-bubble--assistant ol, .mf-output__body ol {
      margin: 0.3em 0 0.5em 1.3em;
      padding-left: 1.2em;
    }
    .mf-bubble--assistant li, .mf-output__body li { margin: 0.15em 0; }

    /* Emphase & fort */
    .mf-bubble--assistant strong, .mf-output__body strong {
      font-weight: 600;
      color: var(--txt-strong);
    }
    .mf-bubble--assistant em, .mf-output__body em {
      color: var(--txt-muted);
      font-style: italic;
    }

    /* Code inline & bloc */
    .mf-bubble--assistant code, .mf-output__body code,
    .mf-bubble--assistant pre,  .mf-output__body pre {
      background: var(--field-bg);
      color: var(--field-text);
      border-radius: 4px;
      padding: 2px 5px;
      font-family: "Fira Code", monospace;
      font-size: 0.92em;
    }
    .mf-bubble--assistant pre, .mf-output__body pre {
      padding: 0.6em 0.8em;
      overflow-x: auto;
    }

    /* Séparateur */
    .mf-bubble--assistant hr, .mf-output__body hr {
      border: none;
      border-top: 1px solid var(--panel-border);
      margin: 0.8em 0;
    }

    /* Images */
    .mf-bubble--assistant img, .mf-output__body img {
      max-width: 100%;
      border-radius: 6px;
      margin: 0.5em 0;
    }

    /* Tables */
    .mf-bubble--assistant table, .mf-output__body table {
      border-collapse: collapse;
      width: 100%;
      margin: 0.6em 0;
      font-size: 0.95em;
      color: var(--txt-body);
    }
    .mf-bubble--assistant th, .mf-output__body th,
    .mf-bubble--assistant td, .mf-output__body td {
      border: 1px solid var(--panel-border);
      padding: 0.4em 0.6em;
      text-align: left;
    }

    /* Citations (style professionnel, neutre) */
    .mf-bubble--assistant blockquote,
    .mf-output__body blockquote {
      border-left: 3px solid var(--select-accent);
      margin: 0.8em 0;
      padding: 0.5em 1em;
      font-style: italic;
      color: var(--txt-muted);
      background: color-mix(in srgb, var(--well-bg) 90%, transparent);
      border-radius: 6px;
    }

    /* Densité */
    .mf-bubble--assistant *,
    .mf-output__body * {
      line-height: 1.45 !important;
    }

    /* Applique aussi la mise en forme Markdown aux sorties IA principales */
    .mf-output__body h1,
    .mf-output__body h2,
    .mf-output__body h3,
    .mf-output__body p,
    .mf-output__body ul,
    .mf-output__body ol,
    .mf-output__body li,
    .mf-output__body code,
    .mf-output__body pre,
    .mf-output__body strong,
    .mf-output__body em,
    .mf-output__body hr,
    .mf-output__body table,
    .mf-output__body th,
    .mf-output__body td,
    .mf-output__body img {
      all: unset;
      display: revert;
      font-family: inherit;
      color: inherit;
      line-height: 1.45;
    }

    /* Reprend le thème Markdown pro */
    .mf-output__body h1,
    .mf-output__body h2,
    .mf-output__body h3 {
      font-weight: 600;
      color: var(--txt-strong);
      margin-top: 0.7em;
      margin-bottom: 0.3em;
    }
    .mf-output__body h1 { font-size: 1.15rem; }
    .mf-output__body h2 { font-size: 1.05rem; }
    .mf-output__body h3 { font-size: 1rem; }

    .mf-output__body strong { color: var(--txt-strong); font-weight: 600; }
    .mf-output__body em { color: var(--txt-muted); }
    .mf-output__body p { margin: 0.4em 0; color: var(--txt-body); }
    .mf-output__body ul, .mf-output__body ol { margin: 0.3em 0 0.5em 1.3em; }
    .mf-output__body li { margin: 0.15em 0; }
    .mf-output__body code, .mf-output__body pre {
      background: var(--field-bg);
      color: var(--field-text);
      border-radius: 4px;
      padding: 2px 5px;
      font-family: "Fira Code", monospace;
      font-size: 0.92em;
    }
    .mf-output__body pre {
      padding: 0.6em 0.8em;
      overflow-x: auto;
    }
    .mf-output__body hr {
      border: none;
      border-top: 1px solid var(--panel-border);
      margin: 0.8em 0;
    }
    .mf-output__body table {
      border-collapse: collapse;
      width: 100%;
      margin: 0.6em 0;
      font-size: 0.95em;
    }
    .mf-output__body th,
    .mf-output__body td {
      border: 1px solid var(--panel-border);
      padding: 0.4em 0.6em;
      text-align: left;
    }
    .mf-output__body img {
      max-width: 100%;
      border-radius: 6px;
      margin: 0.5em 0;
    }





    /* Label de marque au-dessus du contenu central (comme "ChatGPT 5") */
    .mf-brand{
      margin: .25rem 0 .5rem 0;          /* respiration courte */
      font-weight: 700;
      font-size: 1rem;                    /* ≈ "ChatGPT 5" sur desktop */
      color: var(--txt-strong);           /* suit le thème clair/sombre */
      opacity: .95;
      letter-spacing: .1px;
    }

    /* Option : un poil plus grand en ≥ lg si tu veux */
    @media (min-width:1024px){
      .mf-brand{ font-size: 1.0625rem; }
    }

    /* Animation d’apparition et curseur de stream */
    .mf-output.is-ready .mf-output__body{ animation: fadeIn .25s ease-out; }
    @keyframes fadeIn{ from{opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }
    .mf-caret{ display:inline-block; width:.6ch; border-right:2px solid currentColor; animation: blink 1s steps(1) infinite;}
    @keyframes blink{ 50%{ opacity:0; } }

    /* Cadre IA = même skin que les autres "wells" */
    .mf-output--well{
      --out-bg:     var(--well-bg);
      --out-border: var(--well-border);
      --out-text:   var(--panel-text);
    }
    /* Badge "Éditer" dans l’entête */
    .mf-edit-badge{
      background: color-mix(in srgb, var(--btn-pri-bg) 10%, white);
      color: var(--btn-pri-bg);
    }
    body.theme-dark .mf-edit-badge{
      background: color-mix(in srgb, var(--btn-pri-bg) 20%, black);
      color: var(--txt-strong);
    }

    /* Harmonise le fond en mode édition */
    [contenteditable="true"] {
      background: var(--well-bg) !important;
      color: var(--well-text, var(--txt-body)) !important;
      border: 1px solid var(--well-border);
      border-radius: .5rem;
      padding: .5rem .75rem;
    }

    /* En thème sombre : fond un peu plus profond */
    body.theme-dark [contenteditable="true"] {
      background: var(--bg-well) !important;
      color: var(--txt-body) !important;
    }

    /* Et on aligne l’entête du cadre sur ces variables */
    #courrier-output.mf-output--well .mf-output__header{
      background: var(--out-bg);
      border-bottom-color: var(--out-border);
    }

    /* Skeleton (pendant “Génération…”) */
    .mf-skel{ display:grid; gap:.5rem; }
    .mf-skel > i{ display:block; height:12px; border-radius:999px; 
      background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08));
      animation: skel 1.2s linear infinite; 
    }
    @keyframes skel{ to{ background-position: 200% 0; } }

    /* Surfaces réutilisables (suivent directement tes tokens) */
    .mf-surface      { background: var(--panel-bg); color: var(--panel-text); border:1px solid var(--panel-border); }
    .mf-surface--well{ background: var(--well-bg);  color: var(--panel-text); border:1px solid var(--well-border); }
    .mf-muted        { color: var(--txt-muted) !important; }
    /* Skeleton (pendant “Génération…”) */
    .mf-skel > i{
      background: linear-gradient(90deg,
        color-mix(in srgb, var(--out-text) 12%, transparent),
        color-mix(in srgb, var(--out-text) 24%, transparent),
        color-mix(in srgb, var(--out-text) 12%, transparent)
      );
      opacity:.25;
    }

    /* =========================================================
      2) LAYOUT ENGINE (grille globale)
      ========================================================= */
    .two-col {
      display: block; /* mobile */
    }

    .two-col.rail-open { --rail-current: var(--rail-w); }
    .two-col.sidebar-pinned { --sidebar-current: var(--sidebar-w); }
    .two-col.sidebar-pinned.sidebar-collapsed { --sidebar-current: var(--sidebar-collapsed-w); }

    @media (min-width:1024px){
      .two-col {
        display: grid;
        grid-template-columns: minmax(0,1fr);
        gap: 1.5rem;
        align-items: start;
      }

      .two-col.rail-open {
        grid-template-columns: minmax(0,1fr) var(--rail-w);
      }

      .two-col.sidebar-pinned {
        grid-template-columns: var(--sidebar-current) minmax(0,1fr);
      }

      .two-col.sidebar-pinned.rail-open {
        grid-template-columns: var(--sidebar-current) minmax(0,1fr) var(--rail-w);
      }
    }

    /* =========================================================
      6) MENUS UNIFIÉS (bouton + menu) — light & dark
      ========================================================= */
      /* Cache totalement le <select> natif qui sert juste de source de données */
      select.sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
        pointer-events: none !important; /* ← ne capte plus les clics */
      }

      /* === MENUS UNIFIÉS (une seule source de vérité) === */
      .mf-select__trigger{
        width:100%; padding:.5rem .75rem;
        border:1px solid var(--select-border);
        background:var(--select-bg); color:var(--select-text);
        border-radius:.5rem; box-shadow:0 1px 2px rgb(0 0 0 / .03);
        display:flex; align-items:center; gap:.5rem; text-align:left;
      }
      .mf-select__trigger:hover{ background:var(--select-hover); }
      .mf-select__trigger:focus{ outline:2px solid var(--select-accent); outline-offset:2px; }
      .mf-select__chev{ margin-left:auto; opacity:.6; color:var(--select-text); }

      .mf-select__menu{
        position: absolute;
        left: 0; right: 0;
        top: calc(100% + .25rem);  /* ↓ juste sous le trigger */
        z-index: 60;               /* au-dessus des autres blocs */
        overflow-y: auto;           /* permet le scroll si trop haut */
        max-height: 300px;         /* hauteur max avant scroll */
        background: var(--select-menu-bg);
        color: var(--select-text);
        border: 1px solid var(--select-menu-bdr);
        border-radius: .5rem;
        box-shadow: 0 10px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
        padding: .25rem;
      }
      .mf-select__menu.hidden{ display:none; }


      .mf-select__option{
        width:100%; text-align:left; padding:.5rem .75rem; border-radius:.5rem;
        display:flex; align-items:center; gap:.75rem;
      }
      .mf-select__option:hover{ background:var(--select-option-hov); }
      .mf-select__option--placeholder{ color:var(--select-muted); }


    /* Dark */
    body.theme-dark .mf-select__trigger{ background:var(--bg-card); color:var(--txt-body); border-color:var(--panel-border); }
    body.theme-dark .mf-select__trigger:hover{ background:#121a2e; }
    body.theme-dark .mf-select__chev{ color:var(--txt-muted); }
    body.theme-dark .mf-select__menu{ background:var(--bg-card); color:var(--txt-body); border-color:var(--panel-border); box-shadow:0 12px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.4); }
    body.theme-dark .mf-select__option:hover{ background:#17223a; }
    body.theme-dark .mf-select__option--placeholder{ color:var(--txt-muted); }


    /* === Barre d'options compacte (collapsible) dans courrier et cotation === */
    .mf-options{ 
      border:1px solid var(--panel-border); background:var(--panel-bg); color:var(--panel-text);
      border-radius:.5rem; margin-bottom:.75rem; overflow:visible;
    }
    .mf-options > summary{
      list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem;
      padding:.5rem .75rem; font-weight:600;
    }
    .mf-options > summary::-webkit-details-marker{ display:none; }
    .mf-options > summary::after{
      content:""; margin-left:auto; width:.75rem; aspect-ratio:1/1; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); opacity:.6;
    }
    .mf-options[open] > summary::after{ transform:rotate(45deg); }

    .mf-options-tags{ display:flex; gap:.375rem; flex-wrap:wrap; font-weight:500; }
    .mf-tag{ background:var(--well-bg); border:1px solid var(--well-border); color:var(--panel-text);
      padding:.125rem .5rem; border-radius:999px; font-size:.75rem; }

    /* Grille interne des options (menus) */
    .mf-options-grid{ padding:.5rem .75rem .75rem; display:grid; gap:.5rem; 
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
      /* .mf-options-grid{
        padding:.5rem .75rem .75rem; display: grid; gap:.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colonnes = 2 champs par ligne */
        /* gap: .75rem;                                      garde une gouttière raisonnable */
      /* } */

      /* Empêche les débordements (labels longs, sélecteurs) */
      .mf-options-grid > div{ min-width: 0; }

      /* Sur petits écrans: 1 colonne (lisible) */
      @media (max-width: 640px){
        .mf-options-grid{ grid-template-columns: 1fr; }
      } */

    /* Courrier : 3 colonnes sur desktop (1 ligne), wrap en dessous */
    @media (min-width: 1024px){
      #opts-courrier .mf-options-grid {
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      }
    }
    /* Variante compacte : réduit la densité des contrôles */
    .mf-options.dense .mf-select__trigger{ padding:.375rem .5rem; }
    .mf-options.dense label{ font-size:.875rem; }

    .mf-msg--assistant {
      display: block;
      white-space: pre-wrap;
      line-height: 1.5;
    }

  /* =========================================================
      7) BOUTONS (style factorisé pour clair + sombre)
      ========================================================= */
    .has-tooltip {
      position: relative;
      cursor: help;
      border-bottom: 1px dotted currentColor; /* Ligne pointillée pour signaler l'interaction */
    }


    .tooltip {
      position: absolute;
      bottom: 120%;
      left: 50%;
      transform: translateX(-50%);
      background: #1f2937;
      color: white;
      padding: 0.5rem 0.75rem;
      border-radius: 6px;
      font-size: 0.85rem;
      line-height: 1.3;
      width: 220px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease-in-out;
      z-index: 20;
    }

    .has-tooltip:hover .tooltip {
      opacity: 1;
    }

    /* Cadres de présentation (pour clair + sombre) */
    .mf-card {
      border: 1px solid var(--panel-border);
      background: var(--panel-bg-soft); /* ou var(--panel-bg) si tu n’as pas une version "soft" */
      border-radius: 0.5rem;
    }


    .mf-btn {
      /* Layout */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--btn-gap);
      
      /* Spacing */
      padding: .5rem 1rem;
      
      /* Style */
      background: transparent;
      border: 1.5px solid transparent;  /* Bordure plus épaisse = plus pro */
      border-radius: var(--btn-radius);
      
      /* Typography */
      font-weight: var(--btn-font);
      font-size: .9375rem;
      line-height: 1.2;
      letter-spacing: .01em;  /* Légère espacement = plus lisible */
      
      /* Interaction */
      cursor: pointer;
      user-select: none;
      transition: var(--btn-transition);
      box-shadow: none;  /* Pas d'ombre par défaut */
      
      /* Accessibilité */
      position: relative;
      overflow: hidden;
    }

    /* Effet ripple subtil au clic */
    .mf-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle, rgba(255,255,255,.3) 0%, transparent 70%);
      opacity: 0;
      transition: opacity .3s;
      pointer-events: none;
    }

    .mf-btn:active::before {
      opacity: 1;
      transition: opacity 0s;
    }

    /* Hover général (léger lift) */
    .mf-btn:hover {
      transform: translateY(-1px);
    }

    .mf-btn:active {
      transform: translateY(0);
    }

    /* Focus (accessibilité) */
    .mf-btn:focus-visible {
      outline: 2px solid var(--btn-pri-bg);
      outline-offset: 2px;
    }

    /* === TAILLES === */
    .mf-btn--sm {
      padding: .375rem .75rem;
      font-size: .8125rem;
      gap: .5rem;
    }

    .mf-btn--md {
      padding: .5rem 1rem;
      font-size: .9375rem;
    }

    .mf-btn--lg {
      padding: .625rem 1.25rem;
      font-size: 1rem;
      border-width: 2px;  /* Bordure plus épaisse pour les gros boutons */
    }

    /* === VARIANTS === */

    /* Primary (action principale) */
    .mf-btn--primary {
      background: var(--btn-pri-bg);
      color: var(--btn-pri-txt);
      border-color: var(--btn-pri-bdr);
      box-shadow: var(--btn-pri-shadow);
    }

    .mf-btn--primary:hover {
      background: var(--btn-pri-hov);
      box-shadow: 0 2px 6px rgba(30,64,175,.16), 0 2px 4px rgba(30,64,175,.12);
    }

    /* Success (validation médicale) */
    .mf-btn--success {
      background: var(--btn-suc-bg);
      color: var(--btn-suc-txt);
      border-color: var(--btn-suc-bdr);
      box-shadow: var(--btn-suc-shadow);
    }

    .mf-btn--success:hover {
      background: var(--btn-suc-hov);
      box-shadow: 0 2px 6px rgba(5,150,105,.16);
    }

    /* Danger (alerte/suppression) */
    .mf-btn--danger {
      background: var(--btn-dan-bg);
      color: var(--btn-dan-txt);
      border-color: var(--btn-dan-bdr);
      box-shadow: var(--btn-dan-shadow);
    }

    .mf-btn--danger:hover {
      background: var(--btn-dan-hov);
      box-shadow: 0 2px 6px rgba(220,38,38,.16);
    }
    
    /* Warning (attention) */
    .mf-btn--warning {
      background: #f59e0b;          /* amber-500 */
      color: #1f2937;               /* gris foncé: lisible */
      border-color: #d97706;        /* amber-600 */
      box-shadow: 0 1px 3px rgba(245,158,11,0.25);
    }
    .mf-btn--warning:hover {
      background: #d97706;          /* amber-600 */
      box-shadow: 0 2px 6px rgba(217,119,6,0.20);
    }

    /* Variante icône seule : on veut l’icône en blanc sur fond orange */
    .mf-btn--warning.mf-btn--icon {
      color: #fff;
    }
    /* Gray (action neutre) */
    .mf-btn--gray {
      background: #374151;          /* gray-700 */
      color: #f9fafb;
      border-color: #4b5563;        /* gray-600 */
      box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    }

    .mf-btn--gray:hover {
      background: #4b5563;          /* gray-600 */
      box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    }


        /* Ghost (action secondaire) */
    .mf-btn--ghost {
      color: var(--btn-gho-txt);
      background: var(--btn-gho-bg);
      border-color: var(--btn-gho-bdr);
      box-shadow: 0 0 6px rgba(100, 150, 255, 0.25); /* léger glow bleu */
    }
    .mf-btn--ghost:hover {
      background: var(--btn-gho-hov);
      border-color: rgba(120, 170, 255, 0.9); /* plus lumineux */
      box-shadow: 0 0 6px rgba(120, 170, 255, 0.55); /* glow plus intense */
    }

/* =========================================================
   BOUTON D’OUVERTURE DU CHATBOT — bleu doux premium
   ========================================================= */
.mf-bot-open-btn {
  background: var(--bot-bg);
  color: var(--bot-text);
  border: 1px solid var(--bot-border);
  box-shadow: var(--bot-shadow);

  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.mf-bot-open-btn:hover {
  background: var(--bot-bg-hover);
  border-color: color-mix(in srgb, var(--bot-text) 45%, transparent);
}
/* =========================================================
   ENTÊTE DU CHATBOT — bleu doux premium
   ========================================================= */
.mf-bot-header {
  background: var(--bot-header-bg);
  border-bottom: 1px solid var(--bot-header-border);
  color: var(--bot-text);

  transition: background .25s ease, border-color .25s ease;
}
.mf-bot-header i {
  color: var(--bot-text);
}

.mf-bot-header .mf-text-danger {
  color: var(--medical-danger); /* rouge déjà dans ton DS */
}

.mf-bot-close-btn:hover i {
  opacity: 0.8;
  transform: scale(1.05);
  transition: opacity .15s ease, transform .15s ease;
}
.hero-action-btn.hero-send {
  background: var(--bot-text);
  color: white;
  transition: background .2s ease;
}

.hero-action-btn.hero-send:hover {
  background: color-mix(in srgb, var(--bot-text) 80%, black);
}

/* Bulle assistant */
.mf-chat-assistant {
  background: var(--bubble-assist-bg);
  color: var(--bubble-assist-text);
  border: 1px solid var(--bubble-assist-border);
  border-radius: 10px;
  padding: .5rem .75rem;
  max-width: 80%;
  line-height: 1.45;
}

/* Bulle user */
.mf-chat-user {
  background: var(--bubble-user-bg);
  color: var(--bubble-user-text);
  border-radius: 10px;
  padding: .5rem .75rem;
  max-width: 80%;
  margin-left: auto;
  line-height: 1.45;
}
/* Fin */
    /* Icône seule (actions rapides) */
    .mf-btn--icon {
      padding: .5rem;
      width: 38px;
      height: 38px;
      border-radius: .5rem;
    }

    .mf-btn--icon.mf-btn--sm {
      width: 32px;
      height: 32px;
      padding: .375rem;
    }

    .mf-btn--icon.mf-btn--lg {
      width: 44px;
      height: 44px;
      padding: .625rem;
    }

    /* Icône + texte avec icône à gauche */
    .mf-btn i:first-child {
      margin-right: -.125rem;  /* Compense l'espacement visuel */
    }

    .mf-btn i:last-child {
      margin-left: -.125rem;
    }

    /* === ÉTATS === */

    /* Disabled (désactivé) */
    .mf-btn:disabled,
    .mf-btn[disabled] {
      opacity: .5;
      cursor: not-allowed;
      filter: saturate(.7);
      box-shadow: none !important;
      transform: none !important;
      pointer-events: none;
    }

    /* Loading (en cours) */
    .mf-btn--loading {
      position: relative;
      color: transparent !important;
      pointer-events: none;
    }

    .mf-btn--loading::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: btn-spin .6s linear infinite;
    }

    @keyframes btn-spin {
      to { transform: rotate(360deg); }
    }

    /* === COMPOSITIONS AVANCÉES === */

    /* Groupe de boutons */
    .mf-btn-group {
      display: inline-flex;
      gap: .5rem;
    }

    .mf-btn-group .mf-btn {
      flex: 1;
      min-width: 0;
    }

    /* Bouton pleine largeur (mobile) */
    .mf-btn--full {
      width: 100%;
    }

    /* Bouton avec badge (notifications) */
    .mf-btn--badge {
      position: relative;
    }

    .mf-btn--badge::after {
      content: attr(data-badge);
      position: absolute;
      top: -.25rem;
      right: -.25rem;
      min-width: 1.25rem;
      height: 1.25rem;
      padding: 0 .25rem;
      background: #ef4444;
      color: white;
      font-size: .625rem;
      font-weight: 700;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 2px var(--bg-page, white);
    }


    /* === HERO pattern à la ChatGPT (réutilisable) =================== */
    :root{
      --hero-max-w: 880px;   /* largeur max de la barre (desktop) */
      --hero-pad-y: 32px;    /* respiration verticale */
    }
    .mf-hero{ 
      display:flex; flex-direction:column; align-items:center; 
      gap: 16px; padding: var(--hero-pad-y) 0;
    }
    .mf-hero-title{
      text-align:center; font-size: clamp(22px, 3.4vw, 40px); 
      font-weight: 700; letter-spacing: .2px;
      color: var(--txt-strong, #0f172a);
    }
    .mf-hero-input{ width: 100%; display:flex; justify-content:center; }

    .mf-hero-actions{ display:flex; align-items:center; gap:.5rem; }
    .mf-hero-icon{ opacity:.7; }

    /* Dark mode s’appuie sur tes tokens existants */
    body.theme-dark .mf-hero-title{ color: var(--txt-strong); }

    /* === HERO BAR COURRIER (style ChatGPT) === */
    .mf-hero-bar {
      width: min(100%, var(--hero-max-w));
      display: flex;
      align-items: center;
      gap: .75rem;
      background: var(--field-bg);
      border: 1px solid var(--field-border);
      color: var(--field-text);
      border-radius: 24px;
      padding: 12px 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,.08);
      transition: all 0.2s ease;
    }

    .mf-hero-bar:focus-within {
      border-color: #3b82f6;
      box-shadow: 0 4px 16px rgba(59,130,246,.2);
    }

    .mf-hero-bar textarea {
      flex: 1;
      background: transparent;
      border: 0;
      outline: 0;
      resize: none;
      color: inherit;
      font-size: 15px;
      line-height: 1.5;
      max-height: 200px;
      min-height: 24px;
      padding: 0;
    }

    .mf-hero-bar textarea::placeholder {
      color: var(--field-placeholder);
    }

    /* Boutons d'actions dans la barre */
    .mf-hero-bar .hero-action-btn {
      background: transparent;
      border: none;
      color: var(--txt-muted);
      cursor: pointer;
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      transition: all 0.2s ease;
      font-size: 18px;
      width: 36px;
      height: 36px;
      flex-shrink: 0;
    }

    .mf-hero-bar .hero-action-btn:hover {
      background: var(--select-hover);
      color: var(--txt-body);
    }

    .mf-hero-bar .hero-action-btn.hero-send {
      background: var(--btn-pri-bg);
      color: #ffffff;
    }

    .mf-hero-bar .hero-action-btn.hero-send:hover {
      background: var(--btn-pri-hov);
    }

    .mf-hero-bar .hero-action-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Dark mode pour la barre courrier */
    body.theme-dark .mf-hero-bar {
      background: var(--field-bg);
      border-color: var(--border-dk);
      box-shadow: 0 4px 12px rgba(0,0,0,.3);
    }

    body.theme-dark .mf-hero-bar:focus-within {
      border-color: #60a5fa;
      box-shadow: 0 4px 16px rgba(96,165,250,.3);
    }

    /* === OPTIONS MODERNES (style ChatGPT) === */
    .mf-options-modern {
      background: var(--field-bg);
      border: 1px solid var(--field-border);
      border-radius: 12px;
      padding: 16px 20px;
      margin-bottom: 1rem;
      box-shadow: 0 2px 8px rgba(0,0,0,.04);
      transition: all 0.2s ease;
    }

    .mf-options-modern:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,.08);
    }

    /* Header des options */
    .mf-options-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--field-border);
    }

    .mf-options-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--txt-strong);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .mf-options-toggle {
      background: transparent;
      border: none;
      color: var(--txt-muted);
      cursor: pointer;
      padding: 6px;
      border-radius: 6px;
      transition: all 0.2s ease;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .mf-options-toggle:hover {
      background: var(--select-hover);
      color: var(--txt-body);
    }

    .mf-options-toggle i {
      transition: transform 0.2s ease;
    }

    .mf-options-modern.collapsed .mf-options-toggle i {
      transform: rotate(-90deg);
    }

    /* Contenu des options */
    .mf-options-content {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      max-height: 500px;
      overflow: visible;
      opacity: 1;
      transition: max-height 0.3s ease, opacity 0.2s ease;
    }

    .mf-options-modern.collapsed .mf-options-content {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
    }

    /* Champ d'option individuel */
    .mf-option-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .mf-option-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--txt-body);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* ============================
      RADIO GROUP — Version Pro
      ============================ */
    .mf-radio-group {
      display: flex;
      gap: 4px;
      padding: 4px;
      border-radius: 8px;
      background: var(--well-bg);
      border: 1px solid var(--well-border);
    }

    .mf-radio-option {
      flex: 1;
      position: relative;
    }

    /* Input invisible mais accessible */
    .mf-radio-option input[type="radio"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }

    /* Label = bouton */
    .mf-radio-option label {
      display: block;
      text-align: center;
      padding: 8px 12px;
      /* min-width: 50px;   ou 70px si tu veux plus de confort */
      font-size: 13px;
      font-weight: 500;
      border-radius: 6px;
      cursor: pointer;
      user-select: none;
      color: var(--txt-muted);
      transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    }

    /* Hover */
    .mf-radio-option:hover label {
      color: var(--txt-body);
    }

    /* État actif */
    .mf-radio-option input:checked + label {
      background: var(--btn-pri-bg);
      color: #fff;
      box-shadow: var(--btn-shadow);
    }

    /* Focus clavier (accessibilité) */
    .mf-radio-option input:focus-visible + label {
      outline: 2px solid var(--btn-pri-bg);
      outline-offset: 2px;
    }


    /* Tags de résumé (condensés, modernes) */
    .mf-options-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .mf-summary-tag {
      background: var(--btn-pri-bg);
      color: #ffffff;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .mf-summary-tag i {
      font-size: 10px;
      opacity: 0.8;
    }

    /* Dark mode */
    body.theme-dark .mf-options-modern {
      background: var(--field-bg);
      border-color: var(--border-dk);
      box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }

    body.theme-dark .mf-options-modern:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,.3);
    }

    body.theme-dark .mf-options-header {
      border-bottom-color: var(--border-dk);
    }

    body.theme-dark .mf-radio-group {
      background: var(--bg-well);
      border-color: var(--border-dk);
    }

    body.theme-dark .mf-radio-option input[type="radio"]:checked + label {
      background: var(--btn-pri-bg);
    }

    /* Responsive */
    @media (max-width: 640px) {
      .mf-options-content {
        grid-template-columns: 1fr;
      }
      
      .mf-radio-option label {
        padding: 10px 8px;
        font-size: 12px;
      }
    }
          .mf-edit-toolbar .format-btn{
        background:transparent!important; color:inherit;
        display:inline-flex; align-items:center; justify-content:center;
        min-width:28px; height:26px;
      }
      .mf-btn--xs{ padding:2px 6px; font-size:12px; }
      .mf-select--xs{ padding:2px 6px; font-size:12px; height:26px; }

      /* Fallbacks texte pour B/I/U */
      .mf-fallback{ font-weight:700; line-height:1; }
      .mf-fallback-i{ font-style:italic; font-weight:600; }
      .mf-fallback-u{ text-decoration: underline; text-underline-offset: 2px; }

      /* Palette (au cas où une règle globale couperait l’overflow) */
      .mf-edit-toolbar{ overflow: visible; }
    /* =========================================================