/* Relais Mail - theme "verre liquide" clair, injecte par Caddy par-dessus Keila */
:root{
  --rm-bg1:#e9efff; --rm-bg2:#f6eaff;
  --rm-glass:rgba(255,255,255,.58); --rm-glass-strong:rgba(255,255,255,.78);
  --rm-stroke:rgba(255,255,255,.8); --rm-line:rgba(20,30,60,.10);
  --rm-text:#0f1730; --rm-muted:#5b6482; --rm-accent:#5b6cff; --rm-accent2:#a35cff;
  --rm-ok:#12a37a; --rm-danger:#e5484d;
  --rm-shadow:0 10px 40px rgba(40,60,140,.12);
  --rm-radius:20px;
  --rm-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,sans-serif;
}

/* ---------- Fond ---------- */
html{
  background:
    radial-gradient(600px 600px at -5% -10%, rgba(127,176,255,.55), transparent 60%),
    radial-gradient(520px 520px at 85% 110%, rgba(198,156,255,.55), transparent 60%),
    radial-gradient(420px 420px at 105% 35%, rgba(127,240,216,.35), transparent 60%),
    linear-gradient(135deg,var(--rm-bg1),var(--rm-bg2)) !important;
  background-attachment:fixed !important;
  min-height:100%;
}
body{font-family:var(--rm-font) !important; color:var(--rm-text) !important; background:transparent !important; -webkit-font-smoothing:antialiased}
main, .bg-gray-950, .bg-gray-900, .bg-black, .from-gray-950, .from-gray-900{background:transparent !important}

/* ---------- Barre laterale ---------- */
body > aside, aside.bg-gray-800{
  background:var(--rm-glass) !important;
  border:1px solid var(--rm-stroke);
  border-radius:var(--rm-radius);
  margin:16px 0 16px 16px;
  height:calc(100vh - 32px);
  position:sticky; top:16px;
  backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:var(--rm-shadow), inset 0 1px 0 rgba(255,255,255,.5);
}
aside a, aside label, aside span, aside nav, aside div{color:var(--rm-text) !important}
aside nav a{border-radius:12px !important; padding-top:8px; padding-bottom:8px; transition:background .15s}
aside nav a:hover, aside .hover\:bg-gray-700:hover{background:var(--rm-glass-strong) !important}
aside .menu-link--active, aside [class*="bg-emerald"], aside a.active, aside a[aria-current="page"]{
  background:var(--rm-glass-strong) !important; color:var(--rm-accent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(40,60,140,.10);
}
aside svg{color:currentColor}
.rm-logo{display:flex;align-items:center;gap:10px;min-width:0;height:auto !important;margin:14px 0 18px !important}
div:has(> .rm-logo){flex:0 0 auto !important;min-width:0;width:calc(100% - 2rem)}
aside nav{margin-top:0 !important}
#rm-project-menu{display:flex;flex-direction:column;gap:2px;margin:4px 0}
#rm-project-menu .menu-link{padding:7px 12px !important}
#rm-project-menu .rm-menu-sec{padding-top:8px}
#rm-project-menu svg{width:18px !important;height:18px !important;flex:0 0 18px}
.rm-menu-sec{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--rm-muted);padding:10px 12px 4px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Menu compact facon maquette : l'espaceur Keila devient un simple separateur */
aside .sm\:flex-grow:empty{flex:0 0 1px !important;height:1px;margin:10px 16px;background:var(--rm-stroke)}
aside .menu-link, aside nav a{display:flex;align-items:center;gap:10px;padding:9px 12px !important;font-size:14.5px}
.rm-logo img{width:34px;height:34px;flex:0 0 34px;filter:drop-shadow(0 6px 14px rgba(91,108,255,.35))}
.rm-logo b{font-size:18px;font-weight:700;letter-spacing:-.4px;color:var(--rm-text);white-space:nowrap}
.menu-link{border-radius:12px !important}
.menu-link:hover{background:var(--rm-glass-strong) !important}

/* ---------- Contenu ---------- */
main{padding:8px 8px 24px !important}
main h1, main h2, main h3, main .text-2xl, main .text-3xl, main .text-xl{color:var(--rm-text) !important; letter-spacing:-.4px}
.text-white:not(.button--cta):not([class*="bg-emerald"] *):not(.button--cta *),
.text-gray-50, .text-gray-100, .text-gray-200, .text-gray-300{color:var(--rm-text) !important}
.text-gray-400, .text-gray-500{color:var(--rm-muted) !important}
.text-emerald-500, .text-emerald-600, .text-emerald-300, .text-green-300{color:var(--rm-accent) !important}
a.text-emerald-500:hover, a.text-emerald-600:hover{color:var(--rm-accent2) !important}

/* Cartes / panneaux sombres -> verre */
main .bg-gray-800, main .bg-gray-700, .card,
main .from-gray-900, main .from-gray-800, main .to-gray-800{
  background:var(--rm-glass) !important;
  border:1px solid var(--rm-stroke) !important;
  border-radius:var(--rm-radius) !important;
  backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%);
  box-shadow:var(--rm-shadow), inset 0 1px 0 rgba(255,255,255,.5) !important;
  color:var(--rm-text) !important;
}
main .bg-gray-600, main .hover\:bg-gray-700:hover, main .hover\:bg-gray-800:hover{background:var(--rm-glass-strong) !important}
.border-gray-500, .border-gray-600, .border-gray-700, .border-gray-800, .divide-gray-700 > * + *, .divide-gray-800 > * + *{border-color:var(--rm-line) !important}

/* ---------- Boutons ---------- */
.button{
  border-radius:12px !important; font-weight:600 !important;
  background:var(--rm-glass-strong) !important; color:var(--rm-text) !important;
  border:1px solid var(--rm-stroke) !important;
  box-shadow:0 2px 8px rgba(40,60,140,.08), inset 0 1px 0 rgba(255,255,255,.6) !important;
  outline:none !important;
  transition:transform .12s, box-shadow .12s;
}
.button:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(40,60,140,.14), inset 0 1px 0 rgba(255,255,255,.6) !important}
.button--text{background:transparent !important; border-color:transparent !important; box-shadow:none !important; color:var(--rm-muted) !important}
.button--cta, .button--cta *{color:#fff !important}
.button--cta{
  background:linear-gradient(135deg,var(--rm-accent),var(--rm-accent2)) !important;
  border-color:transparent !important;
  box-shadow:0 8px 22px rgba(91,108,255,.35), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.button--warn, .button--danger, .bg-red-700, .bg-red-800{background:var(--rm-danger) !important; color:#fff !important; border-color:transparent !important}

/* ---------- Formulaires ---------- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url],
input[type=search], input[type=datetime-local], input[type=date], input[type=time], select, textarea{
  background:rgba(255,255,255,.85) !important; color:var(--rm-text) !important;
  border:1px solid var(--rm-line) !important; border-radius:12px !important;
  box-shadow:inset 0 1px 2px rgba(20,30,60,.04) !important;
}
input:focus, select:focus, textarea:focus{
  outline:none !important; border-color:var(--rm-accent) !important;
  box-shadow:0 0 0 4px rgba(91,108,255,.18) !important;
}
label, .form-row label{color:var(--rm-text) !important}
.form-row .text-xs, .form-row p{color:var(--rm-muted) !important}
.form-errors, .form-error-indicator{color:var(--rm-danger) !important}
input[type=checkbox], input[type=radio]{accent-color:var(--rm-accent)}

/* ---------- Onglets ---------- */
.tabs{gap:6px; flex-wrap:wrap}
.tab-label{
  border-radius:12px !important; background:var(--rm-glass) !important; color:var(--rm-muted) !important;
  border:1px solid var(--rm-stroke) !important; padding:6px 12px !important; font-weight:600;
}
.tab-label.active{background:var(--rm-glass-strong) !important; color:var(--rm-accent) !important; box-shadow:0 4px 14px rgba(40,60,140,.10)}
.tab-content, .tabs + div{background:var(--rm-glass) !important; border:1px solid var(--rm-stroke) !important; border-radius:16px !important}

/* ---------- Tableaux ---------- */
table{border-collapse:separate !important; border-spacing:0}
table th{color:var(--rm-muted) !important; font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.5px}
main table{overflow:hidden; border-radius:var(--rm-radius) !important}
main table td, main table th{padding:12px 16px !important; vertical-align:middle}
/* Keila met "flex" sur certaines cellules : ca les sort de l'alignement du tableau */
main table td.flex{display:table-cell !important}
main table td.flex > *{display:inline-flex; vertical-align:middle; margin-left:4px}
main table td.justify-end{text-align:right}
tbody tr{transition:background .12s}
tbody tr:hover td{background:rgba(255,255,255,.45)}
td, th{border-color:var(--rm-line) !important}

/* ---------- Grandes cartes colorees (ex. "abonnes actifs") -> verre accentue ---------- */
main div.bg-emerald-600, main div.bg-emerald-700, main a.bg-emerald-600, main a.bg-emerald-700{
  background:linear-gradient(135deg,rgba(91,108,255,.16),rgba(163,92,255,.16)),var(--rm-glass) !important;
  border:1px solid var(--rm-stroke) !important; border-radius:var(--rm-radius) !important;
  box-shadow:var(--rm-shadow), inset 0 1px 0 rgba(255,255,255,.5) !important; color:var(--rm-text) !important;
}
main div.bg-emerald-600 *, main div.bg-emerald-700 *{color:var(--rm-text) !important}
main div.bg-emerald-600 .text-3xl, main div.bg-emerald-700 .text-3xl,
main div.bg-emerald-600 .text-4xl, main div.bg-emerald-700 .text-4xl{color:var(--rm-accent) !important}

/* ---------- Badges colores (contrastes sur fond clair) ---------- */
.bg-emerald-800, .bg-emerald-900, .bg-green-700{background:rgba(18,163,122,.14) !important; color:var(--rm-ok) !important}
.bg-amber-900, .bg-orange-800{background:rgba(240,170,20,.16) !important; color:#a86d00 !important}
.bg-cyan-800, .bg-purple-800, .bg-pink-800{background:rgba(91,108,255,.14) !important; color:var(--rm-accent) !important}

/* ---------- Fenetres (dialogues) ---------- */
.fixed.inset-0[class*="bg-black"], .bg-black\/90, .bg-black\/80, .bg-black\/75, .bg-black\/50{
  background:rgba(25,30,60,.28) !important;
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
}
.fixed .bg-gray-900, .fixed .bg-gray-800, .fixed .bg-gray-950,
[class*="bg-black/"] .inline-block, [role="dialog"] > div{
  background:rgba(255,255,255,.94) !important;
  border:1px solid var(--rm-stroke) !important;
  border-radius:24px !important;
  box-shadow:0 30px 80px rgba(30,40,90,.30), inset 0 1px 0 rgba(255,255,255,.8) !important;
  color:var(--rm-text) !important;
}
.fixed .bg-gray-900 *, .fixed .bg-gray-800 *{color:inherit}
.fixed .bg-gray-900 label, .fixed .bg-gray-900 h2, .fixed .bg-gray-900 h3, .fixed .bg-gray-900 p{color:var(--rm-text) !important}
.fixed .bg-gray-900 .text-gray-400, .fixed .bg-gray-900 .text-gray-500{color:var(--rm-muted) !important}
.fixed .bg-gray-900 a{color:var(--rm-accent) !important}

/* ---------- Bandeaux d'alerte (pas les boutons) ---------- */
main div.bg-red-500, main div.bg-red-700, main div.bg-red-800, main p.bg-red-700{
  background:rgba(229,72,77,.10) !important; color:#b42318 !important;
  border:1px solid rgba(229,72,77,.30) !important; border-radius:16px !important;
  box-shadow:0 6px 20px rgba(229,72,77,.10) !important;
}
main div.bg-red-500 *, main div.bg-red-700 *, main div.bg-red-800 *{color:#b42318 !important}
main div.bg-red-500 a, main div.bg-red-700 a, main div.bg-red-800 a{color:var(--rm-accent) !important; font-weight:600}

/* ---------- Barres de defilement masquees (le defilement reste actif) ---------- */
*{scrollbar-width:none !important}
*::-webkit-scrollbar{width:0 !important;height:0 !important;display:none !important}

/* ---------- Pied de page Keila : masque ---------- */
main > footer, body footer{display:none !important}

/* =====================================================================
   ANIMATIONS & INTERACTIVITE (relais-fx.js)
   ===================================================================== */
:root{ --rm-ease:cubic-bezier(.22,1,.36,1); }

/* Fond vivant : halos qui derivent + halo qui suit le curseur */
#rm-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.rm-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;will-change:transform}
.rm-blob.a{width:560px;height:560px;left:-140px;top:-160px;background:#7fb0ff;animation:rm-drift-a 22s ease-in-out infinite alternate}
.rm-blob.b{width:500px;height:500px;right:4%;bottom:-200px;background:#c69cff;animation:rm-drift-b 26s ease-in-out infinite alternate}
.rm-blob.c{width:380px;height:380px;right:-140px;top:28%;background:#7ff0d8;opacity:.32;animation:rm-drift-c 30s ease-in-out infinite alternate}
#rm-cursor-glow{position:absolute;left:0;top:0;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,92,255,.22),rgba(79,140,255,.10) 40%,transparent 70%);will-change:transform;mix-blend-mode:multiply}
@keyframes rm-drift-a{to{transform:translate(160px,120px) scale(1.15)}}
@keyframes rm-drift-b{to{transform:translate(-180px,-120px) scale(1.1)}}
@keyframes rm-drift-c{to{transform:translate(-120px,140px) scale(1.2)}}
html.rm-fx{background-image:linear-gradient(135deg,var(--rm-bg1),var(--rm-bg2)) !important}

/* Entrees en cascade */
.rm-reveal{animation:rm-in .7s var(--rm-ease) backwards}
@keyframes rm-in{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
main{transition:opacity .25s var(--rm-ease), transform .25s var(--rm-ease)}
body.rm-leaving main{opacity:.6;transform:translateY(6px) scale(.995)}

/* Cartes : inclinaison 3D + reflet lumineux qui suit la souris */
main .rm-tilt.rm-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s var(--rm-ease), box-shadow .35s var(--rm-ease) !important;
  background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.75), transparent 45%) !important}
main .rm-tilt.rm-tilt:hover{box-shadow:0 22px 60px rgba(40,60,140,.20), inset 0 1px 0 rgba(255,255,255,.7) !important}

/* Boutons : brillance qui traverse + aimant */
.button{position:relative;overflow:hidden;transition:transform .25s var(--rm-ease), box-shadow .25s var(--rm-ease), filter .2s !important}
.button::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--rm-ease);pointer-events:none}
.button:hover::after{transform:translateX(120%)}
.button:active{transform:scale(.97) !important;filter:brightness(.97)}
.button--cta{background-size:160% 160% !important;animation:rm-cta 6s ease-in-out infinite}
@keyframes rm-cta{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Onde au clic */
.rm-ripple{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);opacity:.45;
  background:radial-gradient(circle,rgba(91,108,255,.45),rgba(163,92,255,.18) 50%,transparent 70%);animation:rm-ripple .7s var(--rm-ease) forwards}
@keyframes rm-ripple{to{transform:scale(1);opacity:0}}

/* Menu lateral : glissement + icones vivantes */
aside nav a, .menu-link{transition:background .25s var(--rm-ease), transform .25s var(--rm-ease), color .2s !important}
aside nav a:hover, .menu-link:hover{transform:translateX(4px)}
aside nav a svg, .menu-link svg{transition:transform .35s var(--rm-ease)}
aside nav a:hover svg, .menu-link:hover svg{transform:scale(1.15) rotate(-6deg)}
aside .menu-link--active{position:relative}
aside .menu-link--active::before{content:"";position:absolute;left:-6px;top:22%;bottom:22%;width:4px;border-radius:4px;
  background:linear-gradient(var(--rm-accent),var(--rm-accent2));box-shadow:0 0 12px rgba(91,108,255,.6)}
.rm-logo img{transition:transform .6s var(--rm-ease)}
.rm-logo:hover img{transform:rotate(-8deg) scale(1.08)}

/* Onglets, champs, lignes */
.tab-label{transition:all .25s var(--rm-ease) !important}
.tab-label:hover{transform:translateY(-2px)}
input, select, textarea{transition:border-color .2s, box-shadow .25s var(--rm-ease), transform .2s var(--rm-ease) !important}
input:focus, select:focus, textarea:focus{transform:translateY(-1px)}

/* Barre de chargement des pages (nprogress de Keila) */
#nprogress .bar{background:linear-gradient(90deg,var(--rm-accent),var(--rm-accent2)) !important;height:3px !important;box-shadow:0 0 14px rgba(123,92,255,.7)}
#nprogress .peg{box-shadow:0 0 12px var(--rm-accent2),0 0 6px var(--rm-accent2) !important}

/* Boutons son + effets */
#rm-dock{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;gap:10px}
#rm-sound-toggle, #rm-motion-toggle, #rm-theme-toggle{width:44px;height:44px;border-radius:50%;border:1px solid var(--rm-stroke);
  background:var(--rm-glass-strong);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--rm-shadow), inset 0 1px 0 rgba(255,255,255,.6);display:grid;place-items:center;cursor:pointer;
  transition:transform .3s var(--rm-ease)}
#rm-sound-toggle:hover, #rm-motion-toggle:hover, #rm-theme-toggle:hover{transform:scale(1.08)}
#rm-sound-toggle svg, #rm-motion-toggle svg, #rm-theme-toggle svg{width:20px;height:20px;fill:none;stroke:var(--rm-accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#rm-sound-toggle.is-off svg, #rm-motion-toggle.is-off svg{stroke:var(--rm-muted)}

/* Accessibilite : effets reduits (reglage systeme ou bouton "Effets") */
html.rm-reduced .rm-blob, html.rm-reduced .button--cta, html.rm-reduced .rm-reveal{animation:none !important}
html.rm-reduced main .rm-tilt.rm-tilt{transform:none !important}
html.rm-reduced *{transition-duration:.01ms !important}

/* ---------- Menu projet fixe (relais.js) ---------- */
.rm-hide{display:none !important}

/* ---------- Pages vides ("Wow, c'est tout vide !") ---------- */
main .bg-onboarding{background:linear-gradient(135deg,rgba(91,108,255,.14),rgba(163,92,255,.12)),var(--rm-glass) !important;
  border:1px solid var(--rm-stroke);border-radius:24px;align-items:center;
  box-shadow:var(--rm-shadow), inset 0 1px 0 rgba(255,255,255,.5)}
main .bg-onboarding h2{color:var(--rm-text) !important;font-weight:700;letter-spacing:-.4px}
main .bg-onboarding p:not(.flex){color:var(--rm-muted) !important;max-width:640px}
main .bg-onboarding > span{width:88px !important;height:88px !important;padding:20px;border-radius:24px;color:#fff !important;
  background:linear-gradient(135deg,#4F8CFF,#7B5CFF 55%,#C45CFF);box-shadow:0 12px 30px rgba(91,108,255,.35), inset 0 1px 0 rgba(255,255,255,.4)}
main .bg-onboarding > span svg{width:100%;height:100%}

/* ---------- Statistiques de campagne ---------- */
main .rounded-full.h-14{border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
main .rounded-full.h-14.bg-emerald-800{background:rgba(18,163,122,.14) !important;color:#0e8a67 !important}
main .rounded-full.h-14.bg-orange-800{background:rgba(240,140,20,.16) !important;color:#b86a00 !important}
main .rounded-full.h-14.bg-cyan-800{background:rgba(91,108,255,.14) !important;color:var(--rm-accent) !important}
main .rounded-full.h-14.bg-purple-800{background:rgba(163,92,255,.14) !important;color:var(--rm-accent2) !important}
main .rounded-full.h-14.bg-gray-400{background:rgba(91,100,130,.10) !important;color:var(--rm-muted) !important}
/* Le graphique Keila est dessine pour un fond sombre : on l'inverse pour le theme clair */
main canvas[phx-hook="CampaignStatsChartHook"]{filter:invert(1) hue-rotate(180deg)}

/* ---------- En-tetes de page (titre + boutons) ---------- */
main .container > .max-w-md:has(> h1){max-width:none !important}

/* ---------- Ne pas toucher au contenu des e-mails ---------- */
.codex-editor, .codex-editor *, iframe{color:initial}