/* ============================================================
   Mercure Design System — Overlays
   Modal · Drawer · Toast · Tooltip · Popover
   All consume tokens from tokens.css only.
   ============================================================ */


/* ════════════════════════════════════════════════════════
   BACKDROP — shared by modal & drawer
   ════════════════════════════════════════════════════════ */

.mc-backdrop {
  position:          fixed;
  inset:             0;
  z-index:           80;
  background:        rgba(10, 11, 16, 0.62);
  backdrop-filter:   blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  opacity:           0;
  pointer-events:    none;
  transition:        opacity var(--mc-dur-short) var(--mc-ease);
}
.mc-backdrop.is-open {
  opacity:           1;
  pointer-events:    auto;
}

[data-theme="light"] .mc-backdrop {
  background:        rgba(244, 243, 246, 0.62);
}


/* ════════════════════════════════════════════════════════
   MODAL — centered glass dialog
   Markup:
     <div class="mc-modal" role="dialog" aria-modal="true" hidden>
       <div class="mc-modal__panel">
         <header class="mc-modal__head">…</header>
         <div   class="mc-modal__body">…</div>
         <footer class="mc-modal__foot">…</footer>
       </div>
     </div>
   ════════════════════════════════════════════════════════ */

.mc-modal {
  position:          fixed;
  inset:             0;
  z-index:           90;
  display:           grid;
  place-items:       center;
  padding:           var(--mc-space-5);
  pointer-events:    none;
}
/* `display: grid` above wins over UA `[hidden] { display: none }` — restore it. */
.mc-modal[hidden],
.mc-drawer[hidden],
.mc-backdrop[hidden] {
  display: none !important;
}
.mc-modal__panel {
  position:          relative;
  width:             100%;
  max-width:         520px;
  background:        var(--surface-card);
  border:            1px solid var(--border-active);
  border-radius:     var(--mc-radius-2xl);
  box-shadow:        0 40px 100px -30px rgba(0, 0, 0, 0.7),
                     0 1px 0 rgba(255, 255, 255, 0.06) inset;
  pointer-events:    auto;
  opacity:           0;
  transform:         translateY(12px) scale(0.98);
  transition:
    opacity          var(--mc-dur-short) var(--mc-ease-out),
    transform        var(--mc-dur-short) var(--mc-ease-out);
  overflow:          hidden;
}
.mc-modal__panel::before {
  content:           "";
  position:          absolute;
  inset:             0 0 auto 0;
  height:            1px;
  background:        var(--mc-glass-highlight);
  pointer-events:    none;
}
.mc-modal.is-open .mc-modal__panel {
  opacity:           1;
  transform:         none;
}
.mc-modal__head {
  display:           flex;
  align-items:       flex-start;
  justify-content:   space-between;
  gap:               var(--mc-space-4);
  padding:           var(--mc-space-7) var(--mc-space-7) var(--mc-space-3);
}
.mc-modal__title {
  margin:            0;
  font-family:       var(--type-display);
  font-weight:       500;
  font-size:         var(--mc-type-display-s);
  letter-spacing:    var(--mc-tracking-tight-m);
  color:             var(--text-primary);
}
.mc-modal__close {
  display:           grid;
  place-items:       center;
  width:             32px;
  height:            32px;
  border-radius:     var(--mc-radius-md);
  color:             var(--text-muted);
  transition:        background var(--mc-dur-micro) var(--mc-ease),
                     color var(--mc-dur-micro) var(--mc-ease);
}
.mc-modal__close:hover {
  background:        var(--surface-glass-hover);
  color:             var(--text-primary);
}
.mc-modal__body {
  padding:           0 var(--mc-space-7) var(--mc-space-6);
  color:             var(--text-body);
  font-size:         var(--mc-type-body);
  line-height:       var(--mc-leading-body);
}
.mc-modal__foot {
  display:           flex;
  justify-content:   flex-end;
  gap:               var(--mc-space-3);
  padding:           var(--mc-space-4) var(--mc-space-7) var(--mc-space-7);
  border-top:        1px solid var(--border-subtle);
  background:        var(--surface-alt);
}


/* ════════════════════════════════════════════════════════
   DRAWER — slides from right
   ════════════════════════════════════════════════════════ */

.mc-drawer {
  position:          fixed;
  top:               0;
  right:             0;
  bottom:            0;
  z-index:           90;
  width:             100%;
  max-width:         440px;
  background:        var(--surface-card);
  border-left:       1px solid var(--border-active);
  box-shadow:        -40px 0 80px -20px rgba(0, 0, 0, 0.5);
  transform:         translateX(100%);
  transition:        transform var(--mc-dur-medium) var(--mc-ease-out);
  display:           flex;
  flex-direction:    column;
  overflow:          hidden;
}
.mc-drawer.is-open  { transform: translateX(0); }

.mc-drawer__head {
  display:           flex;
  align-items:       center;
  justify-content:   space-between;
  padding:           var(--mc-space-6) var(--mc-space-7);
  border-bottom:     1px solid var(--border-subtle);
}
.mc-drawer__title {
  margin:            0;
  font-family:       var(--type-display);
  font-weight:       500;
  font-size:         var(--mc-type-display-s);
  letter-spacing:    var(--mc-tracking-tight-m);
  color:             var(--text-primary);
}
.mc-drawer__body {
  flex:              1;
  overflow-y:        auto;
  padding:           var(--mc-space-7);
  color:             var(--text-body);
}
.mc-drawer__close {
  display:           grid;
  place-items:       center;
  width:             32px;
  height:            32px;
  border-radius:     var(--mc-radius-md);
  color:             var(--text-muted);
  transition:        background var(--mc-dur-micro) var(--mc-ease),
                     color var(--mc-dur-micro) var(--mc-ease);
}
.mc-drawer__close:hover {
  background:        var(--surface-glass-hover);
  color:             var(--text-primary);
}


/* ════════════════════════════════════════════════════════
   TOAST — top-right stack
   Auto-dismiss handled by JS (data-mc-toast).
   ════════════════════════════════════════════════════════ */

.mc-toast-stack {
  position:          fixed;
  top:               var(--mc-space-6);
  right:             var(--mc-space-6);
  z-index:           100;
  display:           flex;
  flex-direction:    column;
  gap:               var(--mc-space-3);
  max-width:         360px;
  pointer-events:    none;
}
.mc-toast {
  pointer-events:    auto;
  display:           flex;
  align-items:       flex-start;
  gap:               var(--mc-space-3);
  padding:           var(--mc-space-4) var(--mc-space-5);
  background:        var(--surface-card);
  border:            1px solid var(--border-active);
  border-radius:     var(--mc-radius-lg);
  color:             var(--text-primary);
  font-size:         var(--mc-type-body);
  box-shadow:        var(--mc-glass-shadow-hover);
  transform:         translateX(120%);
  opacity:           0;
  transition:
    transform        var(--mc-dur-medium) var(--mc-ease-out),
    opacity          var(--mc-dur-medium) var(--mc-ease-out);
}
.mc-toast.is-in  { transform: none; opacity: 1; }
.mc-toast__icon  { flex-shrink: 0; margin-top: 2px; }
.mc-toast__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-toast__body  { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mc-toast__title { font-weight: 500; letter-spacing: var(--mc-tracking-tight-s); }
.mc-toast__lead  { font-size: var(--mc-type-small); color: var(--text-body); line-height: var(--mc-leading-body); }
.mc-toast--success .mc-toast__icon { color: var(--state-success); }
.mc-toast--warn    .mc-toast__icon { color: var(--state-warn); }
.mc-toast--error   .mc-toast__icon { color: var(--state-error); }
.mc-toast--info    .mc-toast__icon { color: var(--action-primary); }


/* ════════════════════════════════════════════════════════
   TOOLTIP — pure CSS, hover/focus only
   Markup: <button class="mc-tip" data-mc-tip="Texte" data-mc-tip-pos="top|right|bottom|left">…
   ════════════════════════════════════════════════════════ */

.mc-tip {
  position:          relative;
}
.mc-tip::before,
.mc-tip::after {
  position:          absolute;
  opacity:           0;
  pointer-events:    none;
  transition:        opacity var(--mc-dur-micro) var(--mc-ease) 0ms;
  z-index:           70;
}
.mc-tip::before {
  content:           attr(data-mc-tip);
  padding:           6px 10px;
  background:        var(--surface-card-elev);
  border:            1px solid var(--border-active);
  border-radius:     var(--mc-radius-xs);
  color:             var(--text-primary);
  font-family:       var(--type-mono);
  font-size:         11px;
  letter-spacing:    var(--mc-tracking-wide-s);
  text-transform:    uppercase;
  white-space:       nowrap;
  box-shadow:        0 14px 38px -16px rgba(0, 0, 0, 0.7);
}
.mc-tip::after {
  content:           "";
  width: 8px; height: 8px;
  background:        var(--surface-card-elev);
  border:            1px solid var(--border-active);
  transform:         rotate(45deg);
}
/* default top */
.mc-tip::before { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.mc-tip::after  { bottom: calc(100% + 6px);  left: 50%; transform: translateX(-50%) rotate(45deg); border-top: 0; border-left: 0; }
/* positions */
.mc-tip[data-mc-tip-pos="bottom"]::before { top: calc(100% + 10px); bottom: auto; }
.mc-tip[data-mc-tip-pos="bottom"]::after  { top: calc(100% + 6px);  bottom: auto; border-bottom: 0; border-right: 0; }
.mc-tip[data-mc-tip-pos="right"]::before  { top: 50%; bottom: auto; left: calc(100% + 10px); transform: translateY(-50%); }
.mc-tip[data-mc-tip-pos="right"]::after   { top: 50%; bottom: auto; left: calc(100% + 6px);  transform: translateY(-50%) rotate(45deg); border-top: 0; border-right: 0; }
.mc-tip[data-mc-tip-pos="left"]::before   { top: 50%; bottom: auto; right: calc(100% + 10px); left: auto; transform: translateY(-50%); }
.mc-tip[data-mc-tip-pos="left"]::after    { top: 50%; bottom: auto; right: calc(100% + 6px);  left: auto; transform: translateY(-50%) rotate(45deg); border-bottom: 0; border-left: 0; }
/* triggers */
.mc-tip:hover::before,
.mc-tip:hover::after,
.mc-tip:focus-visible::before,
.mc-tip:focus-visible::after {
  opacity:           1;
  transition-delay:  140ms;
}


/* ════════════════════════════════════════════════════════
   POPOVER — anchored, click-triggered
   Toggled by JS via .is-open on a wrapper [data-mc-popover].
   ════════════════════════════════════════════════════════ */

.mc-popover-wrap {
  position:          relative;
  display:           inline-flex;
}
.mc-popover {
  /* Fallback positioning if mcFloat (floating.js) is unavailable.
     When mcFloat IS available, it overrides position/top/left/transform
     with inline styles for auto-flip + shift behavior. */
  position:          absolute;
  top:               calc(100% + 10px);
  left:              0;
  z-index:           75;
  min-width:         240px;
  max-width:         320px;
  padding:           var(--mc-space-4);
  background:        var(--surface-card);
  border:            1px solid var(--border-active);
  border-radius:     var(--mc-radius-lg);
  box-shadow:        0 24px 60px -22px rgba(0, 0, 0, 0.6);
  color:             var(--text-body);
  font-size:         var(--mc-type-small);
  line-height:       var(--mc-leading-body);
  opacity:           0;
  pointer-events:    none;
  transition:        opacity var(--mc-dur-short) var(--mc-ease-out);
}
.mc-popover-wrap.is-open .mc-popover {
  opacity:           1;
  pointer-events:    auto;
}
.mc-popover__title {
  display:           block;
  font-family:       var(--type-mono);
  font-size:         var(--mc-type-micro);
  letter-spacing:    var(--mc-tracking-wide-m);
  text-transform:    uppercase;
  color:             var(--text-muted);
  margin-bottom:     var(--mc-space-2);
}
.mc-popover--right { left: auto; right: 0; }
.mc-popover--top   { top: auto; bottom: calc(100% + 10px); transform: translateY(6px); }
.mc-popover-wrap.is-open .mc-popover--top { transform: none; }