/* ═══════════════════════════════════════════════════════════════════
   Feuille « Envoyer avec… » — composant partagé entre les sites.
   Thème piloté par les variables --ms-* (voir bas de fichier).
   ═══════════════════════════════════════════════════════════════════ */

dialog.ms {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ms-fg);
  overscroll-behavior: contain;
}
dialog.ms[open] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
dialog.ms::backdrop {
  background: var(--ms-backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: ms-fade 0.3s ease both;
}
html.ms-lock { overflow: hidden; }

.ms__panel {
  position: relative;
  width: min(100%, 540px);
  max-height: 94dvh;
  overflow: auto;
  padding: 12px clamp(18px, 4vw, 30px) calc(26px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--ms-bg);
  border: 1px solid var(--ms-line);
  border-bottom: 0;
  box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, 0.55);
  font-family: var(--ms-font, inherit);
  animation: ms-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
dialog.ms.is-closing .ms__panel { animation: ms-down 0.26s ease both; }
dialog.ms.is-closing::backdrop { animation: ms-fade 0.26s ease reverse both; }

@media (min-width: 720px) {
  dialog.ms[open] { align-items: center; }
  .ms__panel {
    border-radius: 28px;
    border-bottom: 1px solid var(--ms-line);
    padding: 34px 34px 30px;
    animation-name: ms-pop;
  }
  dialog.ms.is-closing .ms__panel { animation-name: ms-pop-out; }
  .ms__grab { display: none !important; }
}

.ms__grab {
  display: block;
  width: 44px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 99px;
  background: var(--ms-line);
}
.ms__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ms-line);
  background: transparent;
  color: var(--ms-muted);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), color 0.2s;
}
.ms__close:hover { transform: rotate(90deg); color: var(--ms-fg); }
.ms__close svg { width: 18px; height: 18px; }

.ms__title {
  margin: 4px 48px 8px 0;
  font-family: var(--ms-title-font, inherit);
  font-weight: var(--ms-title-weight, 800);
  font-stretch: var(--ms-title-stretch, 100%);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: var(--ms-title-case, none);
}
.ms__intro {
  margin-bottom: 20px;
  color: var(--ms-muted);
  font-size: 0.96rem;
  line-height: 1.5;
}

.ms__apps { display: grid; gap: 10px; }
.ms__app {
  display: grid;
  grid-template-columns: 48px 1fr 22px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 70px;
  padding: 10px 16px 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--ms-line);
  background: var(--ms-tile);
  color: var(--ms-fg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ms__app:hover {
  border-color: var(--ms-accent-line);
  background: var(--ms-tile-hover);
  transform: translateX(3px);
}
.ms__app:active { transform: scale(0.985); }
.ms__app:focus-visible { outline: 2px solid var(--ms-focus); outline-offset: 2px; }
.ms__app--quiet { grid-template-columns: 48px 1fr; min-height: 60px; }

.ms__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--ms-icon-bg);
  color: var(--ms-fg);
}
.ms__icon svg { width: 24px; height: 24px; }
.ms__icon--tile { background: #fff; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.6); }

.ms__label {
  display: grid;
  gap: 2px;
  font-weight: 650;
  font-size: 1.04rem;
  line-height: 1.2;
}
.ms__label small {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ms-muted);
}
.ms__go { color: var(--ms-muted); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s; }
.ms__go svg { width: 20px; height: 20px; }
.ms__app:hover .ms__go { transform: translate(2px, -2px); color: var(--ms-fg); }

.ms__web {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ms-tile);
  font-size: 0.86rem;
  color: var(--ms-muted);
  line-height: 1.5;
}
.ms__web a { color: var(--ms-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.ms__preview {
  margin-top: 16px;
  border-top: 1px solid var(--ms-line);
  padding-top: 12px;
  font-size: 0.88rem;
}
.ms__preview summary {
  cursor: pointer;
  color: var(--ms-muted);
  font-weight: 600;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ms__preview summary::-webkit-details-marker { display: none; }
.ms__preview summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.3s;
}
.ms__preview[open] summary::before { transform: rotate(45deg); }
.ms__preview dl { display: grid; gap: 6px; margin: 12px 0 10px; }
.ms__preview dl div { display: grid; grid-template-columns: 56px 1fr; gap: 10px; }
.ms__preview dt { color: var(--ms-muted); }
.ms__preview dd { word-break: break-word; }
.ms__preview pre {
  max-height: 180px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ms-tile);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ms-fg);
}

.ms__view--sent { text-align: center; padding: 18px 0 6px; }
.ms__view--sent .ms__title { margin: 16px 0 8px; }
.ms__done {
  width: 74px;
  height: 74px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ms-accent);
  color: var(--ms-accent-ink);
  animation: ms-pop 0.6s cubic-bezier(0.34, 1.5, 0.64, 1) both;
}
.ms__done svg { width: 34px; height: 34px; }
.ms__ok {
  margin-top: 8px;
  width: 100%;
  height: 54px;
  border-radius: 999px;
  border: 0;
  background: var(--ms-accent);
  color: var(--ms-accent-ink);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

@keyframes ms-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ms-down { to { transform: translateY(100%); } }
@keyframes ms-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes ms-pop-out { to { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes ms-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ms__panel, dialog.ms::backdrop, .ms__done { animation: none !important; }
}