/* Pyroman Mailer — thème SaaS partagé pour l’intégralité du dossier vente/ */
:root {
  color-scheme: dark;
  --saas-bg: #07111f;
  --saas-bg-deep: #050b15;
  --saas-surface: #101c35;
  --saas-surface-soft: rgba(255, 255, 255, .045);
  --saas-surface-strong: #0b1427;
  --saas-line: rgba(159, 178, 216, .16);
  --saas-line-strong: rgba(109, 140, 255, .34);
  --saas-text: #edf3ff;
  --saas-muted: #9fb2d8;
  --saas-primary: #6d8cff;
  --saas-primary-2: #8e6bff;
  --saas-success: #22c55e;
  --saas-warning: #f59e0b;
  --saas-danger: #ef4444;
  --saas-shadow: 0 28px 70px rgba(0, 0, 0, .26);
  --saas-radius-lg: 24px;
  --saas-radius-md: 16px;
  --saas-radius-sm: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.saas-page,
body.saas-page.bg-slate-950 {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--saas-text) !important;
  background:
    radial-gradient(circle at 50% -10%, #142955 0%, transparent 46%),
    radial-gradient(circle at 100% 28%, rgba(109, 140, 255, .09), transparent 34%),
    linear-gradient(180deg, var(--saas-bg) 0%, var(--saas-bg-deep) 100%) !important;
  -webkit-font-smoothing: antialiased;
}
body.saas-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(159,178,216,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(159,178,216,.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
body.saas-page a { color: inherit; text-decoration: none; }
body.saas-page img { max-width: 100%; height: auto; }
body.saas-page button,
body.saas-page input,
body.saas-page select,
body.saas-page textarea { font: inherit; }
body.saas-page button,
body.saas-page a { -webkit-tap-highlight-color: transparent; }
body.saas-page :focus-visible { outline: 3px solid rgba(109,140,255,.45); outline-offset: 3px; }

/* En-tête commun */
.saas-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(159,178,216,.12);
  background: rgba(7,17,31,.84);
  backdrop-filter: blur(16px);
}
.saas-nav__inner {
  width: min(1180px, calc(100% - 32px));
  min-height: 68px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.saas-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 850; letter-spacing: -.015em; white-space: nowrap; }
.saas-brand__mark { width: 14px; height: 14px; border-radius: 999px; background: linear-gradient(135deg, var(--saas-primary), var(--saas-primary-2)); box-shadow: 0 0 22px rgba(109,140,255,.7); }
.saas-brand__copy { display: grid; line-height: 1.05; }
.saas-brand__name { font-size: 15px; }
.saas-brand__meta { margin-top: 4px; color: var(--saas-muted); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.saas-nav__links { display: flex; align-items: center; gap: 8px; }
.saas-nav__links a { padding: 9px 11px; border-radius: 10px; color: var(--saas-muted); font-size: 13px; font-weight: 700; transition: .2s ease; }
.saas-nav__links a:hover,
.saas-nav__links a[aria-current="page"] { color: var(--saas-text); background: rgba(255,255,255,.055); }
.saas-nav__links .saas-nav__cta { margin-left: 5px; color: #fff; background: linear-gradient(135deg, var(--saas-primary), var(--saas-primary-2)); box-shadow: 0 10px 28px rgba(109,140,255,.22); }
.saas-menu { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--saas-line); border-radius: 12px; color: var(--saas-text); background: rgba(255,255,255,.04); cursor: pointer; }
.saas-menu span,
.saas-menu::before,
.saas-menu::after { content: ""; display: block; width: 18px; height: 2px; margin: 4px auto; border-radius: 2px; background: currentColor; }

/* Cadre et hiérarchie */
body.saas-page > .relative,
body.saas-page > .max-w-6xl,
body.saas-page > .max-w-5xl,
body.saas-page > .max-w-4xl,
body.saas-page > .max-w-3xl,
body.saas-page > .max-w-2xl,
body.saas-page > main,
body.saas-page > section { position: relative; }
body.saas-page > .relative.overflow-hidden > .absolute { display: none !important; }
body.saas-page .max-w-6xl { max-width: 1180px !important; }
body.saas-page .max-w-5xl { max-width: 1040px !important; }
body.saas-page .max-w-4xl { max-width: 920px !important; }
body.saas-page .max-w-3xl { max-width: 780px !important; }
body.saas-page .max-w-2xl { max-width: 680px !important; }
body.saas-page > div > .relative.max-w-6xl,
body.saas-page > .max-w-6xl,
body.saas-page > .max-w-5xl,
body.saas-page > .max-w-4xl,
body.saas-page > .max-w-3xl,
body.saas-page > .max-w-2xl { padding-top: 42px !important; padding-bottom: 52px !important; }

body.saas-page h1,
body.saas-page h2,
body.saas-page h3,
body.saas-page h4 { color: var(--saas-text); letter-spacing: -.025em; }
body.saas-page h1 { font-size: clamp(2.35rem, 5.2vw, 4.35rem) !important; line-height: 1.02 !important; }
body.saas-page h2 { line-height: 1.14; }
body.saas-page p { line-height: 1.68; }
body.saas-page .text-slate-100,
body.saas-page .text-slate-200 { color: var(--saas-text) !important; }
body.saas-page .text-slate-300 { color: #d7e1f5 !important; }
body.saas-page .text-slate-400,
body.saas-page .text-slate-500,
body.saas-page .text-slate-600 { color: var(--saas-muted) !important; }
body.saas-page .text-white { color: #fff !important; }
body.saas-page .text-orange-300,
body.saas-page .text-orange-400,
body.saas-page .text-red-400,
body.saas-page .text-sky-400,
body.saas-page .text-purple-400 { color: #b9c7ff !important; }
body.saas-page .text-emerald-400 { color: #4ade80 !important; }

/* Surfaces et cartes */
body.saas-page .bg-slate-900\/30,
body.saas-page .bg-slate-900\/40,
body.saas-page .bg-slate-900\/50,
body.saas-page .bg-slate-950\/40,
body.saas-page .bg-slate-950\/50,
body.saas-page .bg-slate-950\/60,
body.saas-page .bg-slate-800\/40,
body.saas-page .bg-slate-800\/60 {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)) !important;
  border-color: var(--saas-line) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
body.saas-page .border-slate-700,
body.saas-page .border-slate-800,
body.saas-page .border-slate-900 { border-color: var(--saas-line) !important; }
body.saas-page .rounded-xl { border-radius: var(--saas-radius-sm) !important; }
body.saas-page .rounded-2xl { border-radius: var(--saas-radius-md) !important; }
body.saas-page .rounded-3xl { border-radius: var(--saas-radius-lg) !important; }
body.saas-page .shadow,
body.saas-page .shadow-lg,
body.saas-page .shadow-xl { box-shadow: var(--saas-shadow) !important; }
body.saas-page section > .bg-slate-900\/30,
body.saas-page section > .bg-slate-900\/40,
body.saas-page section > .bg-slate-950\/40 { backdrop-filter: blur(8px); }
body.saas-page .hover\:border-orange-500\/30:hover,
body.saas-page .hover\:border-orange-500\/40:hover { border-color: var(--saas-line-strong) !important; transform: translateY(-2px); }

/* Badges et pastilles */
body.saas-page .inline-flex.rounded-full,
body.saas-page [class*="bg-emerald-500/10"],
body.saas-page [class*="bg-red-500/10"] {
  border-color: rgba(109,140,255,.28) !important;
  background: rgba(109,140,255,.1) !important;
}
body.saas-page .bg-emerald-400 { background: var(--saas-success) !important; box-shadow: 0 0 14px rgba(34,197,94,.45); }
body.saas-page .bg-orange-500\/20,
body.saas-page .bg-red-500\/15 { background: rgba(109,140,255,.12) !important; }

/* Boutons et liens d’action */
body.saas-page a.bg-gradient-to-r,
body.saas-page button.bg-gradient-to-r,
body.saas-page button[type="submit"],
body.saas-page .saas-primary-action {
  color: #fff !important;
  background: linear-gradient(135deg, var(--saas-primary), var(--saas-primary-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 34px rgba(109,140,255,.24) !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
body.saas-page a.bg-gradient-to-r:hover,
body.saas-page button.bg-gradient-to-r:hover,
body.saas-page button[type="submit"]:hover,
body.saas-page .saas-primary-action:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 18px 42px rgba(109,140,255,.32) !important; }
body.saas-page button:disabled,
body.saas-page [disabled] { opacity: .48; cursor: not-allowed; transform: none !important; }
body.saas-page a[class*="bg-slate-900"],
body.saas-page a[class*="border-slate-800"] { transition: .2s ease; }
body.saas-page a[class*="bg-slate-900"]:hover,
body.saas-page a[class*="border-slate-800"]:hover { color: #fff; border-color: rgba(109,140,255,.32) !important; background: rgba(109,140,255,.09) !important; }

/* Formulaires */
body.saas-page label { color: #dce6f9 !important; }
body.saas-page input,
body.saas-page select,
body.saas-page textarea {
  width: 100%;
  color: var(--saas-text) !important;
  background: rgba(5,11,21,.58) !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
body.saas-page input::placeholder,
body.saas-page textarea::placeholder { color: #6f82a8 !important; }
body.saas-page input:focus,
body.saas-page select:focus,
body.saas-page textarea:focus { outline: none; border-color: rgba(109,140,255,.62) !important; background: rgba(11,20,39,.88) !important; box-shadow: 0 0 0 4px rgba(109,140,255,.12); }
body.saas-page select option { background: var(--saas-surface-strong); color: var(--saas-text); }

/* Tableaux et interfaces d’administration */
body.saas-page table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--saas-line); border-radius: 16px; background: rgba(11,20,39,.56); }
body.saas-page th { padding: 13px 15px; color: #c8d5ef; background: rgba(109,140,255,.08); border-bottom: 1px solid var(--saas-line); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
body.saas-page td { padding: 14px 15px; color: #d9e3f6; border-bottom: 1px solid rgba(159,178,216,.09); }
body.saas-page tr:last-child td { border-bottom: 0; }
body.saas-page tbody tr:hover { background: rgba(109,140,255,.045); }
body.saas-page code,
body.saas-page pre { color: #cbd6ff; background: #081225; border: 1px solid var(--saas-line); border-radius: 10px; }

/* États métier */
.saas-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--saas-line); border-radius: 999px; color: var(--saas-muted); background: rgba(255,255,255,.04); font-size: 11px; font-weight: 800; }
.saas-status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--saas-primary); box-shadow: 0 0 10px rgba(109,140,255,.5); }
.saas-status--success::before { background: var(--saas-success); box-shadow: 0 0 10px rgba(34,197,94,.45); }
.saas-callout { border: 1px solid rgba(109,140,255,.23); background: linear-gradient(135deg, rgba(109,140,255,.11), rgba(142,107,255,.055)); border-radius: 16px; }

/* Pied de page commun */
.saas-footer { margin-top: 42px; border-top: 1px solid rgba(159,178,216,.13); }
.saas-footer__inner { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 25px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--saas-muted); font-size: 12px; }
.saas-footer__links { display: flex; gap: 16px; flex-wrap: wrap; }
.saas-footer__links a:hover { color: var(--saas-text); }
body.saas-page footer:not(.saas-footer) { display: none !important; }

/* Normalisation spécifique des pages historiques */
body.saas-page #nav-placeholder { display: none; }
body.saas-page #catalog-root { height: 0; }
body.saas-page #promo-banner:not(.hidden) { border-color: rgba(109,140,255,.3) !important; background: linear-gradient(135deg, rgba(109,140,255,.11), rgba(142,107,255,.07)) !important; }
body.saas-page #quick-cards:empty::after { content: "Synchronisation du catalogue…"; display: block; padding: 18px; color: var(--saas-muted); font-size: 13px; }
body.saas-page .opacity-60 { opacity: .54 !important; }
body.saas-page .hidden { display: none !important; }
body.saas-page [class*="from-orange-600"],
body.saas-page [class*="to-red-500"] { --tw-gradient-from: var(--saas-primary) !important; --tw-gradient-to: var(--saas-primary-2) !important; }
body.saas-page .bg-orange-500,
body.saas-page .bg-orange-600,
body.saas-page .bg-red-500 { background-color: var(--saas-primary) !important; }
body.saas-page .border-orange-500\/20,
body.saas-page .border-orange-500\/30,
body.saas-page .border-red-500\/20 { border-color: rgba(109,140,255,.28) !important; }

/* Le contenu reste visible immédiatement : aucun fondu d’entrée bloquant. */

/* Responsive */
@media (max-width: 900px) {
  .saas-menu { display: block; }
  .saas-nav__links { display: none; position: absolute; top: 60px; left: 16px; right: 16px; padding: 10px; flex-direction: column; align-items: stretch; background: rgba(7,17,31,.98); border: 1px solid var(--saas-line); border-radius: 16px; box-shadow: var(--saas-shadow); }
  .saas-nav__links.is-open { display: flex; }
  .saas-nav__links a { padding: 12px 14px; }
  .saas-nav__links .saas-nav__cta { margin: 4px 0 0; text-align: center; }
}
@media (max-width: 640px) {
  .saas-nav__inner { min-height: 62px; }
  .saas-brand__meta { display: none; }
  body.saas-page > div > .relative.max-w-6xl,
  body.saas-page > .max-w-6xl,
  body.saas-page > .max-w-5xl,
  body.saas-page > .max-w-4xl,
  body.saas-page > .max-w-3xl,
  body.saas-page > .max-w-2xl { padding-top: 28px !important; padding-bottom: 38px !important; }
  body.saas-page h1 { font-size: clamp(2.05rem, 11vw, 3rem) !important; }
  body.saas-page .p-6 { padding: 1.15rem !important; }
  body.saas-page .p-5 { padding: 1rem !important; }
  .saas-footer__inner { align-items: flex-start; flex-direction: column; }
  body.saas-page table { display: block; overflow-x: auto; white-space: nowrap; }
  body.saas-page .top { align-items: stretch; flex-direction: column; }
  body.saas-page .top > .actions { width: 100%; }
  body.saas-page .section-title { align-items: flex-start; flex-direction: column; gap: 4px; }
  body.saas-page .section-title .small { max-width: 100%; white-space: normal; }
}