/* ===========================
   MITALA — PREMIUM DESIGN SYSTEM
=========================== */

:root{
  /* Dark */
  --bg0:#07070a;
  --bg1:#0c0d12;
  --bg2:#11131a;

  --card0: rgba(255,255,255,.08);
  --card1: rgba(255,255,255,.04);

  --txt:#f7f6f3;
  --text:var(--txt);
  --muted: rgba(247,246,243,.72);

  --gold:#f6c454;
  --gold2:#e7c48a;
  --gold3:#f6c35461;

  --line: rgba(255,255,255,.12);

  --r-md: 16px;

  --max-w: 980px;

  /* Boutons plus fins */
  --btn-h: 27px;
  --btn-px: 16px;
  --btn-font: 13px;

  /* Layout */
  --nav-h: 64px;
  --top-h: 74px;
  --page-py: 18px;
  --page-px: 16px;
}

/* Opacité de saisie harmonisée dans toute l’application Invitations. */
input::placeholder,
textarea::placeholder {
  opacity: .52 !important;
}

/* Light theme overrides */
html[data-theme="light"]{
  --bg0:#f7f7f9;
  --bg1:#ffffff;
  --bg2:#f2f2f6;

  --card0: rgba(10,10,12,.06);
  --card1: rgba(10,10,12,.03);

  --txt:#101114;
  --muted: rgba(16,17,20,.70);

  --line: rgba(10,10,12,.10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--txt); overflow-x:hidden; }

/* Background premium (dark/light via variables) */
body{
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(243,239,231,.12) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(246,196,84,.10) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(900px 700px at 55% 110%, rgba(255,255,255,.08) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg2) 100%);
}

/* ===========================
   TOP BAR
=========================== */
.app-top{
  position:sticky;
  top:0;
  z-index: 900;
  height: var(--top-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px var(--page-px);
  background: rgba(10, 10, 12, 0.737);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Le voile vit hors du header : il couvre bien le contenu et la navigation,
   tandis que le menu reste au-dessus quand il est ouvert. */
.app-top.app-settings-open {
  z-index: 1201;
}

.app-settings__veil {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(3, 5, 9, .64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: app-settings-veil-in .16s ease-out;
}

.app-settings__veil[hidden] {
  display: none;
}

@keyframes app-settings-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

html[data-theme="light"] .app-settings__veil {
  background: rgba(35, 31, 24, .40);
}
html[data-theme="light"] .app-top{
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid rgba(10,10,12,.08);
}

.brand{
  font-weight: 950;
  letter-spacing: .6px;
  font-size: 22px;
}
.subtitle{
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

/* ===============================
   HEADER BRAND WITH LOGO
=============================== */

.app-top__left {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 0px;
}

.app-settings {
  position: relative;
}

.app-settings__trigger {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.app-settings__trigger:hover,
.app-settings__trigger:focus-visible {
  outline: none;
  transform: translateY(-1px);
  background: rgba(255,255,255,.18);
  border-color: rgba(246,196,84,.72);
}

.app-settings__trigger i {
  font-size: 17px;
}

.app-settings__trigger-badge {
  position: absolute;
  top: -7px;
  right: -8px;
  display: grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid #17181d;
  border-radius: 999px;
  color: #25190a;
  background: var(--gold);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.app-settings__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: calc(var(--page-px) * -1);
  z-index: 1001;
  width: min(292px, 100vw);
  padding: 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-right: 0;
  border-radius: 9px 0 0 9px;
  color: var(--txt);
  background: rgba(20,21,26,.97);
  box-shadow: 0 24px 56px rgba(0,0,0,.38);
  backdrop-filter: blur(20px);
}

.app-settings__menu[hidden] {
  display: none;
}

.app-settings__heading {
  display: grid;
  gap: 2px;
  padding: 8px 10px 12px;
}

.app-settings__heading span,
.app-settings__appearance > div:first-child > span {
  font-size: 14px;
  font-weight: 800;
}

.app-settings__heading small,
.app-settings__appearance small {
  color: var(--muted);
  font-size: 11px;
}

.app-settings__item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  color: inherit;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.app-settings__item:hover,
.app-settings__item:focus-visible {
  outline: none;
  color: var(--txt);
  background: rgba(246,196,84,.14);
}

.app-settings__item i {
  width: 18px;
  color: var(--gold);
  text-align: center;
}

.app-settings__item-label {
  flex: 1 1 auto;
}

.app-settings__notification-badge {
  display: grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  color: #25190a;
  background: var(--gold);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.app-settings__appearance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
  margin-top: 4px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}

.app-settings__appearance > div:first-child {
  display: grid;
  gap: 3px;
}

.app-settings__appearance .theme-toggle-wrap {
  flex: 0 0 auto;
  transform: scale(.78);
  transform-origin: right center;
}

.app-settings__separator {
  height: 1px;
  margin: 8px 4px;
  background: var(--line);
}

.app-settings__item--logout {
  color: #ffb1a9;
}

.app-settings__item--logout i {
  color: #ff9d91;
}

html[data-theme="light"] .app-settings__trigger {
  color: #201b16;
  background: rgba(255,255,255,.70);
  border-color: rgba(91,68,37,.22);
}

html[data-theme="light"] .app-settings__trigger-badge {
  border-color: #fffdf8;
}

html[data-theme="light"] .app-settings__menu {
  background: rgba(255,253,248,.98);
  border-color: rgba(91,68,37,.16);
  box-shadow: 0 24px 56px rgba(60,40,20,.18);
}

html[data-theme="light"] .app-settings__appearance {
  background: rgba(88,62,30,.06);
}


/* Logo MITALA */
.mitala-logo {
  width: 50px;
  height: 50px;
  background-image: url("/invitation/assets/applogo1.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 14px;
  flex-shrink: 0;
  border: 1px solid white;
}

/* Mode clair : fond sombre derrière le logo */
html[data-theme="light"] .mitala-logo {
  background-color: #111216;
  border-radius: 14px;
  padding: 5px;
}

/* ===========================
   THEME TOGGLE (VERTICAL MITALA)
=========================== */

.theme-toggle-wrap{
  position: relative;
  width: 27px;
  height: 36px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* input caché */
#toggle_theme{
  display:none;
}

/* Track */
.theme-toggle{
  position: relative;
  display:block;
  width: 42px;
  height: 55px;
  cursor:pointer;
  user-select:none;

  border-radius: 999px;
  border: 1px solid var(--line);

  backdrop-filter: blur(10px);

  box-shadow: 0 10px 30px rgba(0,0,0,.25);

  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
  background: #eee7d9 !important;
}

/* Thumb */
.theme-toggle::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 7px;
  transform: translateX(-50%);

  width: 20px;
  height: 20px;
  border-radius: 999px;

  /* Gold MITALA */
  background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%);
  border: 1px solid rgba(0,0,0,.20);

  box-shadow: 0 10px 22px rgba(0,0,0,.35);

  transition:
    top .35s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

/* Halo premium */
.theme-toggle::after{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: 999px;

  background:
    radial-gradient(
      120px 80px at 50% 0%,
      rgba(231,196,138,.16),
      rgba(0,0,0,0) 60%
    );

  pointer-events:none;
  opacity: .9;
}

/* ===========================
   LIGHT MODE (CHECKED)
=========================== */

#toggle_theme:checked + .theme-toggle{
  background: rgba(10,10,12,.06);
  border-color: rgba(10,10,12,.12);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

#toggle_theme:checked + .theme-toggle::before{
  top: calc(62px - 7px - 28px);

  /* Navy MITALA */
  background: linear-gradient(180deg, var(--navy2) 0%, var(--navy) 100%);
  border-color: rgba(255,255,255,.20);

  box-shadow: 0 8px 18px rgba(0,0,0,.20);
}


/* ===========================
   LIGHT THEME GLOBAL LOOK
=========================== */

html[data-theme="light"] .theme-toggle{
  border: 1px solid rgba(10,10,12,.12);
  background: rgba(10,10,12,.03);

  box-shadow: 0 6px 20px rgba(0,0,0,.10);
}

html[data-theme="light"] .theme-toggle::before{
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}


/* ===========================
   MAIN LAYOUT
=========================== */
.app-main{
  min-height: calc(100svh - var(--top-h));
  padding: var(--page-py) var(--page-px);
  display:flex;
}
.container{
  width:100%;
  max-width: var(--max-w);
  margin: 0 auto;
  background-color: rgba(255, 255, 254, 0);
}

/* ✅ Centrage vertical des cards/pages */
body.center-page .app-main{
  align-items:center;
}
body.center-page .container{
  max-width: 720px;
}

/* Utilitaire spacing */
.stack > * + *{ margin-top: 12px; }

/* ===========================
   CARDS
=========================== */
.card{
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  background:var(--card0);
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  margin-bottom: 20px;
}

/* ===========================
   TEXT
=========================== */
h1,h2,h3{ margin:0 0 10px; font-weight:950; }
.muted,.hint{ color: var(--muted); font-size: 11px; line-height:1.5; }
a{ color: var(--gold); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===========================
   FORM
=========================== */
label{
  display:block;
  font-size: 12px;
  color: rgba(247,246,243,.80);
  margin: 0 0 6px;
  font-weight: 800;
}
html[data-theme="light"] label{ color: rgba(16,17,20,.78); }

input, select, textarea{
  width:100%;
  border-radius: var(--r-md);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,16,24,.70);
  color: var(--txt);
  padding: 11px 12px;
  font-size: 14px;
  outline:none;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background: rgba(255,255,255,.75);
  border:1px solid rgba(10,10,12,.12);
  color: var(--txt);
}

textarea{ 
  min-height: 100px !important; 
  resize: vertical;
 }

input:focus, select:focus, textarea:focus{
  border-color: rgba(246,196,84,.70);
  box-shadow: 0 0 0 4px rgba(246,196,84,.12);
}

.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 760px){
  .row{ grid-template-columns: 1fr; }
}

/* ===========================
   BUTTONS
=========================== */
.btn{
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: 8px;
  font-size: var(--btn-font);
  font-weight: 950;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  text-decoration:none;
  user-select:none;
}

.ghost{
  max-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: 14px;
  font-size: var(--btn-font);
  font-weight: 950;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  text-decoration:none;
  user-select:none;
}

.btn{
  border:0;
  color:#1a1208;
  background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
.btn:hover{ filter:brightness(.99); }
.btn:active{ transform: translateY(1px); }

.ghost{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--txt);
}
.resend {
  border:1px solid rgba(10,10,12,.12) !important;
  background: rgba(10,10,12,.03) !important;
  color: black;
}
html[data-theme="light"] .ghost{
  border:1px solid rgba(10,10,12,.12);
  background: rgba(10,10,12,.03);
}
.ghost:hover{ border-color: rgba(255,255,255,.22); }

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
@media (max-width:520px){
  .actions{ flex-direction:column; }
  .actions .btn, .actions .ghost{ width:100%; }
}

.err{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(231,76,60,.12);
  border: 1px solid rgba(231,76,60,.25);
}

.create-submit{
  margin-top: 15px;
  margin-bottom: 15px;
}

/* ===========================
   NAV BAR
=========================== */
/* ===========================
   MOBILE APP NAV (bottom)
=========================== */

:root{
  --nav-h: 72px;
}

/* Assure que le contenu ne passe pas sous la nav */
.main,
.app-main{
  padding-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
}

/* Bottom bar */
.app-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  z-index: 1200;

  background: rgba(18,18,18,.78);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}

/* Items */
.nav-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: rgba(247,246,243,.75);
}

.nav-ico{
  width: 24px;
  height: 24px;
  opacity: .78;
}

.nav-ico svg,
.nav-plus svg{
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.nav-txt{
  font-size: 11px;
  font-weight: 900;
  color: rgba(247,246,243,.75);
}

.nav-item.active{
  color: var(--gold2);
}
.nav-item.active .nav-txt{
  color: var(--gold2);
}

/* Big + (centre) */
.nav-add{
  transform: translateY(0px);
}

.nav-plus{
  width: 40px;
  height: 40px;
  border-radius: 9px;
  display: grid;
  place-items: center;

  color: #cfcfcf;
  background: linear-gradient(180deg, var(--gold1), var(--gold2));
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.12);
}

/* Light theme garde un look propre */
html[data-theme="light"] .app-nav{
  background: rgba(255,255,255,.86);
  border-top: 1px solid rgba(10,10,12,.10);
}
html[data-theme="light"] .app-nav .nav-item{
  color: rgba(16,17,20,.72);
}
html[data-theme="light"] .nav-txt{
  color: rgba(16,17,20,.72);
}

/*  Bouton + en dark mode */

/* Par défaut (dark) */
html[data-theme="dark"] .nav-plus{
  background: linear-gradient(180deg, #faf9f8 0%, #cfcfcf 100%);
  color: #c1c1c1;

  border: 1px solid rgba(255,255,255,.25);

  /* Glow + profondeur */
  box-shadow:
    0 0 0 3px rgba(255, 254, 253, 0.18),
    0 10px 25px rgba(216, 216, 216, 0.45),
    0 25px 60px rgba(0,0,0,.65);

}

/* Effet pression */
html[data-theme="dark"] .nav-plus:active{
  box-shadow:
    0 6px 18px rgba(246,196,84,.35),
    0 18px 45px rgba(0,0,0,.6);
}

/* Petit halo discret autour */
html[data-theme="dark"] .nav-add::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:22px;

  background:
    radial-gradient(circle,
      rgba(246,196,84,.35),
      rgba(0,0,0,0) 70%
    );

  z-index:-1;
  pointer-events:none;
}


/* ===========================
   WIZARD (event_create)
=========================== */

.top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.title{ font-weight:950; margin:0; }
.sub{ color:var(--muted); font-size:13px; line-height:1.45; margin-top:6px; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  font-weight:900;
  font-size:12px;
  color: rgba(247,246,243,.9);
}

.head{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }

.stepmeta{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.stepnum{
  width:34px;height:34px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

html[data-theme="light"] .stepnum{
  border:1.5px solid var(--gold3);
}

.steptitle{ font-weight:950; }
.stepdesc{ color:var(--muted); font-size:13px; margin-top:3px; }

.progress{
  height:6px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  overflow:hidden;
}

.progress .bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  transition: width .25s ease;
}

/* IMPORTANT : cache tous les panels */
.stage{ position:relative; }
.panel{
  display:none;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.panel.active{
  display:block;
  opacity:1;
  transform: translateY(0);
}

/* Grille 2 colonnes “app-like” */
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media(max-width:760px){
  .grid2{ grid-template-columns: 1fr; }
}

/* mini erreurs wizard */
.miniErr{
  display:none;
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  background: linear-gradient(180deg, var(--gold2) 0%, var(--gold3) 100%);
}

html[data-theme="light"] .miniErr{
  background: linear-gradient(180deg, var(--gold3) 0%, var(--gold3) 100%);
  border: 1px solid rgba(231,76,60,.25);
}

.miniErr.show{ display:block; }

/* Les omissions de saisie sont signalées au plus près du champ concerné. */
body.event-create-page .field-error-tooltip {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 7px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  color: #fff;
  background: #8b1e24;
  box-shadow: 0 9px 22px rgba(90,9,15,.26);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  z-index: 3;
}

body.event-create-page .field-error-tooltip::before {
  position: absolute;
  top: -5px;
  left: 15px;
  width: 9px;
  height: 9px;
  content: "";
  background: #8b1e24;
  transform: rotate(45deg);
}

body.event-create-page input.field-validation-error,
body.event-create-page textarea.field-validation-error,
body.event-create-page select.field-validation-error,
body.event-create-page .event-date-field.field-validation-error,
body.event-create-page .event-media-surface.field-validation-error {
  box-shadow: inset 0 0 0 2px rgba(239,68,68,.95) !important;
}

body.event-create-page .is-omission-pulse {
  animation: event-field-omission-pulse .42s ease-in-out 4;
}

@keyframes event-field-omission-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(239,68,68,0));
  }
  50% {
    filter: drop-shadow(0 0 7px rgba(255,79,79,.72));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.event-create-page .is-omission-pulse {
    animation: none;
  }
}

/* preview images */
.imgbox{ margin-top:10px; }
.imgbox img{
  max-width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  display:none;
}

/* Résumé */
.summary{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
@media(max-width:760px){
  .summary{ grid-template-columns: 1fr; }
}
.sumCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:14px;
}
.sumK{ color:var(--muted); font-size:12px; font-weight:800; }
.sumV{ margin-top:6px; font-size:18px; font-weight:950; }

/* Actions wizard */
.actions{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.leftActions, .rightActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.link{ color: var(--gold); text-decoration:none; font-weight:900; }


/* ===== Event cards (premium) ===== */
.eventGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-top:12px;
}


/* top area */
.eventTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.eventTitle{
  font-weight:950;
  font-size:18px;
  line-height:1.15;
  margin:0;
}

.eventMeta{
  margin-top:8px;
  display:grid;
  gap:4px;
  color:rgba(244,244,246,.78);
  font-size:12px;
}

.eventChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(244,244,246,.92);
  font-size:12px;
  font-weight:800;
}

.chip.isActive{
  border-color: rgba(46,204,113,.45);
  background: rgba(46,204,113,.10);
}

.eventAction{
  margin-top:12px;
}

.eventAction .btn{
  width:100%;
}

/* ===== Events cards with cover (premium) ===== */

.eventGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
  margin-top:12px;
}

.eventCard{
  overflow:hidden;
  border-radius:9px !important;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}

.eventCover{
  position:relative;
  min-height: 190px;
  display:flex;
  align-items:flex-end;
}

.eventOverlay{
  width:100%;
  padding:14px;
  color:rgba(247,246,243,.95);
}

.eventTitle{
  font-weight:950;
  font-size:18px;
  line-height:1.15;
  margin:0 0 6px;
}

.eventMeta{
  display:grid;
  gap:4px;
  color:rgba(244,244,246,.78);
  font-size:12.5px;
}

.eventChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.eventFooter{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.eventFooter .btn,
.eventFooter .ghost{
  width:100%;
}



.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(244,244,246,.90);
  font-size:12px;
  font-weight:800;
  backdrop-filter: blur(8px);
}

.chip.isActive{
  border-color: rgba(46,204,113,.35);
  background: rgba(46,204,113,.10);
}

.eventAction .btn{ width:100%; }

/* ===========================
   WIZARD — SEGMENTED ACTION BAR (3 buttons)
   (Revenir | Annuler | Suivant)
=========================== */

.actions.actions--seg{
  margin-top: 10px;
  display: block;
  gap: 10px;
}

.segBar{
  display: flex;
  gap: 4px;                 
  align-items: stretch;
}

/* Base */
.segBtn{
  flex: 1;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  font-size: 15px;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

/* Arrondis “orientés” */
.segBtn--left{
  border-radius: 9px 0 0 9px;
}
.segBtn--mid{
  border-radius: 0;
}
.segBtn--right{
  border-radius: 0 9px 9px 0;
}

/* Couleurs selon ton mockup :
   - Gauche & Droite = Gold MITALA
   - Milieu = neutre (gris premium)
*/
.segBtn--left,
.segBtn--right{
  border: 0;
  color: #1a1208;
  background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

.segBtn--mid{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  color: rgba(247,246,243,.92);
}

/* Hover / active */
.segBtn:active{ transform: translateY(1px); }
.segBtn--mid:hover{ background: rgba(255,255,255,.14); }

/* État disabled (bouton Revenir à l’étape 1) */
.segBtn:disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* “Passer” sous la barre */
.segSkip{
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(247,246,243,.85);
  font-weight: 900;
  display: none;
}

/* LIGHT THEME */
html[data-theme="light"] .segBtn{
  border-color: rgba(10,10,12,.12);
  background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%);
  color: rgba(16,17,20,.92);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

html[data-theme="light"] .segBtn--mid{
  background: rgba(10,10,12,.08);
  border-color: rgba(10,10,12,.12);
  color: rgba(16,17,20,.88);
}

html[data-theme="light"] .segSkip{
  border-color: rgba(10,10,12,.12);
  background: rgba(10,10,12,.04);
  color: rgba(16,17,20,.78);
}

/* ===========================
   SEGMENT BAR — MOBILE FULL WIDTH
=========================== */

@media (max-width: 590px){

  .actions.actions--seg{
    width: 100%;
    display: block;
  }
  .segBar{
    width: 100%;
    display: flex;
    gap: 4px;             
  }

  .segBar > *{
    flex: 1 1 0;           
    min-width: 0;
  }

}


/* ===========================
   GLOBAL FONT WEIGHT TUNING
=========================== */

h1,
.h1{
  font-weight: 760 !important;
}

h2,
.h2{
  font-weight: 720 !important;
}

h3,
.h3,
.modalTitle,
.dashHero__title,
.eventTitle,
.title,
.steptitle{
  font-weight: 680 !important;
}

.subtitle,
.sub,
.muted,
.hint,
.dashHero__sub,
.stepdesc,
.eventMeta,
.kvRow span,
label{
  font-weight: 400 !important;
}

.btn,
.ghost,
.menu a,
.menu button,
.addGuestBtn,
.segBtn,
details > summary,
.nav-txt{
  font-weight: 620 !important;
}

.kvRow b,
.badge,
.chip,
.tag{
  font-weight: 520 !important;
}

input,
select,
textarea{
  font-weight: 400 !important;
}

/* cas spécifiques qui étaient trop lourds */
.brand{
  font-weight: 720 !important;
}

.guestMeta > div{
  font-weight: 620 !important;
}

.addGuestPlus{
  font-weight: 650 !important;
}


/* =========================================================
   MITALA INVIT ONLINE — RELOOKING PREMIUM V1
   Remplace l'apparence générale sans casser les vues EJS.
========================================================= */

:root{
  --orange:#ff9800;
  --orange2:#ffbd59;
  --black:#070708;
  --black2:#111216;
  --white:#ffffff;
  --soft:#fff7ee;
  --txt:#ffffff;
  --muted:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.10);
  --card0:rgba(255,255,255,.105);
  --card1:rgba(255,255,255,.045);
  --gold:var(--orange);
  --gold2:var(--orange2);
  --max-w:1040px;
  --r-lg:14px;
  --r-md:18px;
  --top-h:76px;
  --btn-h:46px;
  --btn-font:14px;
}

html[data-theme="light"]{
  --txt:#111216;
  --muted:rgba(17,18,22,.64);
  --line:rgba(17,18,22,.10);
  --card0:rgba(255,255,255,.92);
  --card1:rgba(255,255,255,.70);
}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 620px at 85% -10%, rgba(255,152,0,.24), transparent 55%),
    radial-gradient(740px 580px at 8% 5%, rgba(255,255,255,.12), transparent 58%),
    linear-gradient(180deg,#151515 0%,#0a0b0f 58%,#06070a 100%);
}

html[data-theme="light"] body{
  background:
    radial-gradient(900px 620px at 85% -10%, rgba(255,152,0,.22), transparent 55%),
    linear-gradient(180deg,#fff 0%,#fff7ed 52%,#fff 100%);
}

.app-top{
  height:var(--top-h);
  padding:14px 22px;
  background:rgba(8,8,10,.68);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}
html[data-theme="light"] .app-top{
  background:rgba(255,255,255,.80);
}

.brand{
  display:flex;
  flex-direction:column;
  gap:1px;
  letter-spacing:.02em;
  line-height:1;
}
.brand span{
  font-size:25px;
  font-weight:800;
}
.brand small{
  color:var(--orange2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.20em;
  font-weight:700;
}

.app-main{
  min-height:calc(100svh - var(--top-h));
  padding:22px 18px calc(var(--nav-h) + 22px);
}

/*.card{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:
    linear-gradient(180deg,var(--card0),var(--card1)),
    radial-gradient(600px 260px at 10% 0%,rgba(255,152,0,.12),transparent 60%);
  box-shadow:0 28px 90px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
}*/
.event-create-title {
  margin-bottom: 15px;
}

h1,.h1,.title{
  font-family:"Cormorant Garamond",serif;
  font-weight:700!important;
  letter-spacing:.01em;
}
h2,.h2{
  font-size:32px;
  font-weight:780!important;
  letter-spacing:-.03em;
}
.muted,.hint,.sub,.subtitle{
  color:var(--muted)!important;
}

input,select,textarea{
  min-height:50px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,10,13,.72);
  color:var(--txt);
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,18,22,.11);
}

.btn{
  min-height:46px;
  color:#111!important;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  box-shadow:0 18px 44px rgba(255,152,0,.22),0 16px 45px rgba(0,0,0,.24);
}
.ghost{
  min-height:46px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
}
html[data-theme="light"] .ghost{
  background:rgba(17,18,22,.035);
}

.theme-toggle{
  width:42px;
  height:58px;
  border-radius:999px;
}
.theme-toggle::before{
  width:26px;
  height:26px;
  background:linear-gradient(180deg,var(--orange2),var(--orange));
}
#toggle_theme:checked + .theme-toggle::before{
  top:25px;
  background:linear-gradient(180deg,#fff,#e8e8e8);
}

/* Auth / onboarding */
body.auth-screen .app-main{
  align-items:center;
}
body.auth-screen .container{
  width:min(1040px,100%);
  max-width:1040px;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:22px;
  align-items:center;
}
.auth-hero{
  min-height:520px;
  border-radius:34px;
  padding:34px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.78)),
    radial-gradient(420px 260px at 80% 12%,rgba(255,152,0,.32),transparent 62%),
    url('/invitation/assets/auth-wedding.jpg') center/cover no-repeat;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 32px 100px rgba(0,0,0,.45);
}
.auth-hero::after{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,189,89,.28);
  border-radius:24px;
  pointer-events:none;
}
.auth-logo{
  position:absolute;
  top:28px;
  left:28px;
  display:flex;
  align-items:center;
  gap:12px;
}
.auth-mark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  color:#111;
  font-weight:900;
  box-shadow:0 18px 42px rgba(255,152,0,.22);
}
.auth-logo strong{
  display:block;
  font-size:20px;
  letter-spacing:.06em;
}
.auth-logo small{
  color:rgba(255,255,255,.70);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
}
.auth-kicker{
  position:relative;
  z-index:2;
  color:var(--orange2);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  margin-bottom:12px;
}
.auth-hero h1{
  position:relative;
  z-index:2;
  max-width:600px;
  margin:0;
  color:#fff;
  font-size:52px;
  line-height:.96;
}
.auth-hero p{
  position:relative;
  z-index:2;
  max-width:520px;
  margin:18px 0 0;
  color:rgba(255,255,255,.76);
  line-height:1.65;
}
.auth-types{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
}
.auth-types span{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:999px;
  padding:9px 12px;
  font-size:12px;
  font-weight:700;
}
.auth-card{
  padding:28px;
}
.form-step{
  display:inline-flex;
  margin-bottom:12px;
  color:#111;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}
.auth-return{
  text-align:center;
  padding-top:8px;
}

.app-nav{
  height:76px;
  background:rgba(8,8,10,.82);
  border-top:1px solid rgba(255,255,255,.10);
}
.nav-plus{
  width:48px;
  height:48px;
  border-radius:18px;
  color:#111;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
}

.eventCard{
  border-radius:26px;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.30);
}
.eventCover{
  min-height:220px;
}
.eventFooter{
  border-top:1px solid var(--line);
}

.prev-cta{
  background-color:transparent !important;
  backdrop-filter: none;
}

.prev-card{
  margin-top: 20px;
}

@media(max-width:760px){
  .app-top{padding:13px 18px;}
  .brand span{font-size:18px;}
  body.auth-screen .container{
    display:block;
  }
  .auth-hero{
    min-height:390px;
    padding:28px;
    border-radius:0 0 34px 34px;
    margin:-22px -18px 18px;
  }
  .auth-hero h1{
    font-size:40px;
  }
  .auth-hero p{
    font-size:14px;
  }
  .auth-card{
    padding:24px;
    
  }
  h2,.h2{font-size:30px;}
}

/* =========================================================
   AUTH HOME V2 — IMAGE BACKGROUND FULL SCREEN
========================================================= */

body.auth-home-v2 {
  width: 100%;
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  background: #fff !important;
  position: relative !important;
}

/* Image réelle en fond de toute la page */
body.auth-home-v2::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: var(--auth-bg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

body.auth-home-v2 .auth-bg-slider {

  position: fixed;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  pointer-events:none;
}


body.auth-home-v2 .auth-bg-slider.active {

  opacity:1;

}

/*
  Le dégradé est son propre calque : il reste visible pendant que
  .auth-bg-slider effectue le fondu vers la prochaine image.
*/
body.auth-home-v2 .auth-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, .20) 60%,
    rgba(8, 8, 6, .82) 82%,
    #050504 100%
  );
}

/* Header au-dessus du background*/ 
body.auth-home-v2 .app-top {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-h);
  padding: 12px 22px 0 !important;
  font-size: 14px;
  background:  rgba(10, 10, 12, 0.737) !important;
  border: 0 !important;
  z-index: 40 !important;
}

/* =====================================================
   ESSAI GRATUIT — ONGLET HEADER ET PARCOURS EXPRESS
===================================================== */
.app-free-trial-tab {
  position: absolute;
  left: 50%;
  top: 100%;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 6px 15px;
  border: 1px solid rgba(255, 184, 55, .58);
  border-radius: 0 0 14px 14px;
  background: linear-gradient(135deg, #ff9700, #ffc259);
  color: #17120a;
  box-shadow: 0 7px 18px rgba(53, 34, 8, .24);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.app-free-trial-tab:hover { transform: translateX(-50%) translateY(1px); }

/* La page d'essai ne défile jamais : elle occupe uniquement la fenêtre
   disponible entre le header et la navigation. Seule l'étape active scrolle. */
body.free-trial-page {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.free-trial-page .app-main {
  height: calc(100dvh - var(--top-h));
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding:
    40px
    var(--page-px)
    calc(var(--app-nav-height, 78px) + var(--app-nav-bottom, 18px) + 12px) !important;
}

body.free-trial-page .container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.free-trial-shell {
  width: min(100%, 720px);
  height: min(720px, calc(100dvh - var(--top-h) - var(--app-nav-height, 78px) - 72px));
  min-height: 420px;
  margin: 27px auto calc(var(--app-nav-height, 78px) + 36px);
  padding: clamp(16px, 4vw, 25px);
  border: 1.5px solid color-mix(in srgb, #d89832 58%, var(--border));
  border-radius: 28px;
  background: #fffaf1;
  box-shadow:
    0 2px 0 rgba(255,255,255,.72) inset,
    0 18px 46px rgba(42, 25, 5, .24),
    0 5px 14px rgba(42, 25, 5, .15);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.free-trial-page .free-trial-shell {
  flex: 0 1 720px;
  width: min(100%, 720px);
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: 0 auto;
}

.free-trial-hero { flex: 0 0 auto; text-align: center; margin-bottom: 7px; }
.free-trial-kicker { display: inline-flex; align-items: center; gap: 7px; color: #e98500; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.free-trial-shell h1 { margin: 5px 0 0; font-family: "Cormorant Garamond", serif; font-size: clamp(29px, 6vw, 42px); line-height: 1; }
.free-trial-shell p { color: var(--muted); }
.free-trial-alert { margin: 16px 0; padding: 13px 15px; border: 1px solid #e6a9a4; border-radius: 14px; background: #fff0ef; color: #8d2520; font-weight: 700; }
.free-trial-form { flex: 1 1 auto; min-height: 0; display: block; }
.free-trial-step[hidden] { display: none; }
.free-trial-step { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 12px 8px 18px !important; }
.free-trial-progress { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin: 8px 0 11px; }
.free-trial-progress button { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; }
.free-trial-progress button span { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--border); border-radius: 50%; background: var(--card); font-weight: 900; }
.free-trial-progress button small { font-size: 10px; font-weight: 800; }
.free-trial-progress button.is-active span,.free-trial-progress button.is-complete span { border-color: #f3a120; background: #f3a120; color: #17120a; }
.free-trial-progress i { width: clamp(18px,6vw,60px); height: 2px; margin: 0 5px 17px; background: var(--border); }
.free-trial-form fieldset { display: grid; align-content: start; gap: 9px; margin: 0; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--card) 88%, #e7d3b4); }
.free-trial-form legend { padding: 0 8px; font-weight: 900; }
.free-trial-form legend span { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 6px; border-radius: 50%; background: #ff9b08; color: #18120a; }
.free-trial-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 800; }
.free-trial-form label small { color: var(--muted); font-weight: 500; }
.free-trial-form input,.free-trial-form select,.free-trial-form textarea { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--input-bg, rgba(255,255,255,.85)); color: var(--text); font: inherit; }
.free-trial-form textarea { resize: vertical; }
.free-trial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.free-trial-grid--phone { grid-template-columns: minmax(170px,.7fr) 1.3fr; }
.free-trial-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.free-trial-design { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--border); border-radius: 14px; }
.free-trial-design h2 { margin: 0; font-size: 16px; }
.free-trial-design h2 i { margin-right: 6px; color: #ec9210; }
.free-trial-design input[type="range"] { min-height: 30px; padding: 0; accent-color: #f39a13; }
.free-trial-upload { align-content: start; padding: 8px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--card) 92%, #dba647); }
.free-trial-upload-preview { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: rgba(128,128,128,.12); color: #e99012; font-size: 30px; }
.free-trial-upload-preview--cover { aspect-ratio: 1.91 / 1; }
.free-trial-upload-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.free-trial-upload input[type="file"] { min-height: 42px; padding: 8px; font-size: 11px; }
.free-trial-file-help { margin: -5px 0 0; font-size: 11px; text-align: center; }
.trial-visually-hidden { 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; white-space:nowrap !important; border:0 !important; }
.trial-hero-composer { display:grid; gap:7px; padding:10px; border:1px solid color-mix(in srgb,#d89832 48%,var(--border)); border-radius:15px; background:color-mix(in srgb,var(--card) 94%,#e6bd78); box-shadow:0 9px 24px rgba(45,27,7,.12); }
.trial-hero-composer__title { font-size:13px; }
.trial-hero-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(116px,31%); gap:9px; min-height:330px; }
.trial-hero-preview { position:relative; display:grid; width:100%; min-height:330px; place-items:center; overflow:hidden; padding:5px; border:1px dashed color-mix(in srgb,#d89832 48%,var(--border)); border-radius:10px; background:rgba(70,52,30,.08); color:#d98c12; cursor:pointer; }
.trial-hero-preview img,.trial-hero-preview canvas { position:absolute; inset:5px; display:block; width:calc(100% - 10px); height:calc(100% - 10px); object-fit:contain; }
.trial-hero-preview [hidden] { display:none !important; }
.trial-hero-preview > span { display:grid; justify-items:center; gap:8px; color:var(--muted); }
.trial-hero-preview > span i { color:#e99012; font-size:28px; }
.trial-hero-controls { display:grid; grid-template-rows:auto auto auto 1fr; align-content:start; gap:8px; }
.trial-hero-controls > button { display:flex; min-height:44px; align-items:center; gap:7px; padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); font-size:11px; font-weight:850; line-height:1.15; text-align:left; cursor:pointer; }
.trial-hero-controls > button i { color:#e99012; }
.trial-hero-controls button:disabled { opacity:.43; cursor:not-allowed; }
.trial-hero-zoom { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; min-height:48px; overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--card); }
.trial-hero-zoom button { border:0; background:transparent; color:#ed950e; font-size:20px; font-weight:900; cursor:pointer; }
.trial-hero-zoom button:first-child { border-right:1px solid var(--border); }
.trial-hero-zoom button:last-child { border-left:1px solid var(--border); }
.trial-hero-zoom output { display:grid; place-content:center; justify-items:center; color:var(--text); font-size:9px; font-weight:850; }
.trial-hero-zoom output small { color:var(--muted); }
.trial-position-pad { align-self:center; justify-self:center; display:grid; grid-template:repeat(3,28px)/repeat(3,28px); width:84px; height:84px; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); border:1px solid rgba(222,146,26,.55); background:linear-gradient(145deg,rgba(240,160,28,.18),rgba(255,255,255,.1)); }
.trial-position-pad button,.trial-position-pad span { display:grid; place-items:center; border:0; background:transparent; color:#e99012; }
.trial-position-pad button { cursor:pointer; }
.trial-position-pad button:nth-child(1) { grid-area:1/2; }.trial-position-pad button:nth-child(2) { grid-area:2/1; }.trial-position-pad span { grid-area:2/2; font-size:10px; }.trial-position-pad button:nth-child(4) { grid-area:2/3; }.trial-position-pad button:nth-child(5) { grid-area:3/2; }
.trial-frame-picker[hidden] { display:none; }
.trial-frame-picker { position:fixed; z-index:2100; inset:var(--top-h) 0 calc(var(--app-nav-height,78px) + var(--app-nav-bottom,18px)) 0; display:grid; place-items:center; padding:12px; }
.trial-frame-picker__backdrop { position:absolute; inset:0; border:0; background:rgba(5,6,9,.76); backdrop-filter:blur(7px); }
.trial-frame-picker__dialog { position:relative; z-index:1; display:grid; grid-template-rows:auto 1fr; width:min(680px,100%); max-height:100%; overflow:hidden; border:1px solid rgba(255,191,79,.45); border-radius:18px; background:var(--card); box-shadow:0 24px 70px rgba(0,0,0,.5); }
.trial-frame-picker__dialog header { display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-bottom:1px solid var(--border); }
.trial-frame-picker__dialog header button { width:36px; height:36px; border:1px solid var(--border); border-radius:9px; background:transparent; color:var(--text); }
.trial-frame-picker__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; overflow-y:auto; padding:12px; }
.trial-frame-picker__grid button { position:relative; display:grid; gap:5px; padding:5px; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--text); font:inherit; cursor:pointer; }
.trial-frame-picker__grid button.is-selected { border-color:#ee9d1d; box-shadow:0 0 0 2px rgba(238,157,29,.2); }
.trial-frame-picker__grid img { width:100%; height:145px; object-fit:cover; border-radius:8px; }
.trial-frame-picker__grid span { font-size:11px; font-weight:800; }
body.has-trial-frame-picker { overflow:hidden; }
.free-trial-submit,.free-trial-ready-actions a { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 15px; font-weight: 900; text-decoration: none; cursor: pointer; }
.free-trial-submit { background: linear-gradient(135deg,#ff9700,#ffc45c); color: #17120a; box-shadow: 0 10px 24px rgba(255,151,0,.24); }
.free-trial-step-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; }
.free-trial-step-actions--end { justify-content: flex-end; }
.free-trial-step-actions button { min-height: 46px; padding: 10px 17px; border: 1px solid var(--border); border-radius: 13px; background: var(--card); color: var(--text); font-weight: 900; cursor: pointer; }
.free-trial-step-actions button:last-child { background: linear-gradient(135deg,#ff9700,#ffc45c); color: #17120a; border-color: transparent; }
.free-trial-review { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.free-trial-review div { display: grid; gap: 3px; padding: 13px; border: 1px solid var(--border); border-radius: 13px; }
.free-trial-review small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.free-trial-review strong { overflow-wrap: anywhere; }
.free-trial-consent { margin: -7px 0 0; text-align: center; font-size: 11px; }
.free-trial-ready { flex: 0 1 auto !important; height: auto; min-height: 0; text-align: center; }
.free-trial-success { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 50%; background: #dff6e8; color: #16844b; font-size: 31px; }
.free-trial-ready-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 18px; }
.free-trial-secondary { border: 1px solid var(--border); color: var(--text); background: transparent; }
.free-trial-whatsapp { background: #168b55; color: #fff; }
.free-trial-dashboard-link { color: #e98500; font-weight: 800; text-decoration: none; }

html[data-theme="dark"] .free-trial-alert { background: #381c1d; color: #ffc8c3; border-color: #743438; }
html[data-theme="light"] .free-trial-shell { background:#fffaf1; }
html[data-theme="dark"] .free-trial-shell { background:#17181d; }
html[data-theme="dark"] .free-trial-form input,
html[data-theme="dark"] .free-trial-form select,
html[data-theme="dark"] .free-trial-form textarea { background: #202126; }
html[data-theme="dark"] .free-trial-shell { border-color:rgba(247,181,68,.55); box-shadow:0 0 0 1px rgba(255,194,88,.08) inset,0 22px 58px rgba(0,0,0,.5),0 5px 18px rgba(0,0,0,.34); }

@media (max-width: 560px) {
  .app-free-trial-tab { left: auto; right: 74px; transform: none; }
  .app-free-trial-tab:hover { transform: translateY(1px); }
  .free-trial-shell { width: calc(100% - 8px); height: calc(100dvh - var(--top-h) - var(--app-nav-height, 78px) - 54px); min-height: 420px; margin-top: 25px; padding: 14px 12px; border-radius: 23px; }
  .free-trial-ready { height: auto; min-height: 0; }
  .free-trial-grid,.free-trial-grid--phone,.free-trial-media-grid,.free-trial-ready-actions { grid-template-columns: 1fr; }
  .free-trial-progress button small { display: none; }
  .free-trial-progress i { margin-bottom: 0; }
  .free-trial-review { grid-template-columns: 1fr; }
  .free-trial-step-actions button { flex: 1; }
  .trial-hero-workspace { grid-template-columns:minmax(0,1fr) 124px; min-height:300px; }
  .trial-hero-preview { min-height:300px; }
  .trial-frame-picker__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

  body.free-trial-page .app-main {
    padding:
      40px
      8px
      calc(var(--app-nav-height, 78px) + var(--app-nav-bottom, 18px) + 8px) !important;
  }

  body.free-trial-page .free-trial-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    margin: 0 auto;
    padding: 14px 12px;
  }
}

/*body.auth-home-v2 .brand span {
  color: #ffffff !important;
  font-size: 33px !important;
  line-height: .9 !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
}

body.auth-home-v2 .brand small {
  color: #f6a21a !important;
  font-size: 12px !important;
  letter-spacing: .32em !important;
  font-weight: 800 !important;
}*/

body.auth-home-v2 .theme-toggle::before {
  background: #fff !important;
  border: 0 !important;
}

/* Layout principal */
body.auth-home-v2 .app-main {
  height: 100svh !important;
  min-height: 100svh !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
  position: relative !important;
  z-index: 2 !important;
}

body.auth-home-v2 .container {
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  min-height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Section texte uniquement, sans faux visuel */
body.auth-home-v2 .auth-landing {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* Texte hero */
body.auth-home-v2 .auth-copy {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 60svh !important;
  z-index: 10 !important;
  text-align: center;
}

body.auth-home-v2 .auth-copy h1 {
  margin: 0 auto !important;
  max-width: 390px;
  color: #fff !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: 36px !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -.03em !important;
  text-shadow: 0 18px 34px rgba(0,0,0,.48);
}

body.auth-home-v2 .auth-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 11px auto 10px;
  color: #d6a64a;
}

body.auth-home-v2 .auth-separator span {
  width: 54px;
  height: 1px;
  background: rgba(214,166,74,.72);
}

body.auth-home-v2 .auth-separator b {
  font-size: 14px;
}

body.auth-home-v2 .auth-copy p {
  margin: 0 auto !important;
  max-width: 350px;
  color: rgba(255,255,255,.96) !important;
  font-size: 14px !important;
  line-height: 1.38 !important;
  font-weight: 500 !important;
  text-shadow: 0 12px 24px rgba(0,0,0,.40);
}

/* Card connexion : fixée en bas, sans scroll */
body.auth-home-v2 .auth-card-v2 {
  position: absolute !important;
  left: 22px;
  right: 22px;
  bottom: -100%;
  z-index: 30 !important;

  width: auto !important;
  height: auto !important;
  max-height: 315px !important;
  min-height: 285px !important;

  margin: 0 !important;
  padding: 24px 24px 18px !important;

  border-radius: 34px 34px 0 0 !important;
  background: #fff !important;
  color: #111216 !important;
  border: 1px solid rgba(17,18,22,.08) !important;
  box-shadow: 0 -24px 60px rgba(0,0,0,.14) !important;

  transition:
  bottom .45s cubic-bezier(.22,1,.36,1);
  overflow: hidden !important;
}

/* ouverture de la carte */

body.auth-home-v2 .auth-card-v2.show {

  bottom:0;
  padding-top: 5px !important;

}

body.auth-home-v2 .auth-card-v2:not(.show) {
  bottom: -100% !important;
}

.form-head {
  margin-top: 10px !important;
}

/* Contenu de la card réduit pour tenir dans l'écran */
body.auth-home-v2 .form-step {
  display: inline-flex !important;
  margin: 0 0 13px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff9800, #ffbd59) !important;
  color: #111216 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}

body.auth-home-v2 .form-head h2 {
  margin: 0 0 10px !important;
  color: #111216 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 26px !important;
  line-height: 1.05 !important;
  letter-spacing: -.05em !important;
  font-weight: 900 !important;
  text-align: center;
}

body.auth-home-v2 .form-head .muted {
  color: rgba(17,18,22,.58) !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.33 !important;
  text-align: center;
}

body.auth-home-v2 .auth-form {
  margin-top: 12px !important;
  gap: 9px !important;
}

body.auth-home-v2 .auth-form input {
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 9px !important;
  background: #f4f4f6 !important;
  border: 1px solid rgba(17,18,22,.08) !important;
  color: #111216 !important;
  font-size: 15.5px !important;
  padding: 0 15px !important;
}

body.auth-home-v2 .phone-input-group {
  display: grid;
  grid-template-columns: minmax(118px, 38%) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
}

body.auth-home-v2 .auth-form .phone-country-code,
body.auth-home-v2 .auth-form .phone-national-number {
  min-width: 0;
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 9px !important;
  background: #f4f4f6 !important;
  border: 1px solid rgba(17,18,22,.08) !important;
  color: #111216 !important;
  font-size: 14px !important;
}

body.auth-home-v2 .auth-form .phone-country-code {
  padding: 0 8px !important;
  font-weight: 700;
}

body.auth-home-v2 .auth-form .phone-national-number {
  padding: 0 12px !important;
}

/* Premier écran : l'action principale est alignée sur les deux champs. */
body.auth-home-v2 .auth-form:has(.phone-input-group) {
  gap: 0 !important;
}

body.auth-home-v2 .phone-input-group + .receive {
  width: 100% !important;
  margin: 14px 0 0 !important;
}

body.auth-home-v2 .auth-card-v2:has(.phone-input-group) {
  height: auto !important;
  max-height: calc(100svh - 18px) !important;
}

body.auth-home-v2 .auth-primary,
body.auth-home-v2 .ghost {
  min-height: 43px !important;
  height: 43px !important;
  border-radius: 999px !important;
  font-size: 14.5px !important;
}

body.auth-home-v2 .auth-primary {
  background: linear-gradient(135deg, #ff9800, #ffbd59) !important;
  color: #111216 !important;
  font-weight: 850 !important;
}

body.auth-home-v2 .auth-secondary-form {
  margin-top: 9px !important;
}

body.auth-home-v2 .auth-return {
  margin-top: 8px !important;
  line-height: 1.1 !important;
}

body.auth-home-v2 .auth-return a {
  color: #c47a00 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

body.auth-home-v2 .auth-forgot-form {
  margin-top: 10px;
  text-align: center;
}

body.auth-home-v2 .auth-text-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: #c47a00 !important;
  font: inherit;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}

body.auth-home-v2 .auth-text-link:hover,
body.auth-home-v2 .auth-text-link:focus-visible {
  text-decoration: underline;
}

body.auth-home-v2 .auth-links-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

body.auth-home-v2 .auth-links-row .auth-return,
body.auth-home-v2 .auth-links-row .auth-forgot-form {
  margin: 0 !important;
  line-height: 1.1;
}

body.auth-home-v2 .auth-links-row .auth-return a,
body.auth-home-v2 .auth-links-row .auth-text-link,
body.auth-home-v2 .auth-return.auth-return-muted a {
  font-size: 13px !important;
}

@media (max-width: 360px) {
  body.auth-home-v2 .auth-links-row {
    gap: 10px;
  }

  body.auth-home-v2 .auth-links-row .auth-return a,
  body.auth-home-v2 .auth-links-row .auth-text-link,
  body.auth-home-v2 .auth-return.auth-return-muted a {
    font-size: 12px !important;
  }
}

body.auth-home-v2 .app-nav {
  display: none !important;
}

/* Très petits écrans */
@media (max-height: 690px) {
  body.auth-home-v2 .auth-copy {
    top: 37svh;
  }

  body.auth-home-v2 .auth-copy h1 {
    font-size: 31px !important;
  }

  body.auth-home-v2 .auth-copy p {
    font-size: 13px !important;
  }

  body.auth-home-v2 .auth-card-v2 {
    height: 41svh !important;
    min-height: 270px !important;
    padding: 21px 23px 16px !important;
  }

  body.auth-home-v2 .form-head h2 {
    font-size: 24px !important;
  }

  body.auth-home-v2 .form-head .muted {
    font-size: 13.5px !important;
  }
}

/* Cartes d'authentification : la hauteur suit le contenu. Si l'écran est trop
   court, seul l'intérieur de la carte défile. */
body.auth-home-v2 .auth-card-v2 {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100svh - 18px) !important;
  width: auto !important;
  padding-bottom: 26px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Les mêmes marges internes sont conservées sur les étapes développées. */
body.auth-home-v2 .auth-card-v2.auth-card-expanded {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100svh - 18px) !important;
  padding-bottom: 26px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Une erreur agrandit naturellement la carte, sans masquer les actions. */
body.auth-home-v2 .auth-card-v2.auth-card-has-error {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100svh - 18px) !important;
  padding-bottom: 26px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.auth-title-1 {
  width: 100% !important;
}

/* On remonte un peu le texte hero quand la card OTP est ouverte */
body.auth-home-v2:has(.auth-card-expanded) .auth-copy {
  top: 32svh !important;
}

/* On réduit légèrement le texte hero pour éviter conflit */
body.auth-home-v2:has(.auth-card-expanded) .auth-copy h1 {
  font-size: 31px !important;
}

body.auth-home-v2:has(.auth-card-expanded) .auth-copy p {
  font-size: 13px !important;
}

/* ================================
   OTP ACTIONS INLINE
================================ */

body.auth-home-v2 .otp-actions {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
}


/* Formulaire principal */
body.auth-home-v2 .otp-verify-form {
  flex: 1;
  display: flex;
  gap: 10px;
  align-items: center;
}

.muted, .err {
  margin: 10px;
}

.err {
  width: 100%;
  margin-left: 0px !important;
}

.validate, .ghost {
  width: 40vw;
}  

.validate {
  margin-top: 5px;
}  

/* Input OTP */
body.auth-home-v2 .otp-verify-form input {
  flex: 1;
  min-width: 0;
  height: 44px !important;
}


/* Boutons */
body.auth-home-v2 .otp-actions button {
  white-space: nowrap;
  height: 44px !important;
  padding: 0 18px !important;
}


/* Bouton renvoi */
body.auth-home-v2 .otp-resend-form {
  flex-shrink: 0;
}


/* Sur petits écrans : on réduit */
@media (max-width: 380px) {

  body.auth-home-v2 .otp-actions {
    gap: 8px;
  }

  body.auth-home-v2 .otp-actions button {
    padding: 0 12px !important;
    font-size: 13px !important;
  }

}

/* =====================================
   START BUTTON HERO
===================================== */

body.auth-home-v2 .auth-start-btn {

  position: absolute !important;
  bottom: 43px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20 !important;
  height: 48px;
  padding: 0 42px;
  width: max-content;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,196,73,.85);
  color: #ffd36a;
  font-size: 16px;
  font-weight: 400;
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 20px rgba(255,190,60,.65),
    inset 0 0 20px rgba(255,255,255,.15);

  animation:
    authGlow 2.2s infinite ease-in-out;

  cursor:pointer;

}


@keyframes authGlow {

  0%,100% {
    box-shadow:
      0 0 12px rgba(255,190,60,.4),
      inset 0 0 10px rgba(255,255,255,.1);
  }

  50% {
    box-shadow:
      0 0 35px rgba(255,190,60,.9),
      inset 0 0 18px rgba(255,255,255,.2);
  }

}


body.auth-home-v2 .auth-start-btn.hide {

  opacity:0;
  pointer-events:none;

}

.receive {
width: 100%;
}

.auth-card-handle {
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  margin: 10px auto 0;
  cursor: pointer;
}

.dashbord-title {
  left:0 !important;
  padding: 0px !important;
  margin: 0 !important;
}

/* =====================================================
   NAV MODERN PREMIUM
===================================================== */

.app-nav.nav-modern {
  position: fixed !important;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 78px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  background: rgba(255,255,255,.92);
  backdrop-filter:
  blur(18px);
  border-radius:50px;
  box-shadow:
  0 15px 40px rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.6);
  z-index:100;
}

.nav-modern .nav-item {
  flex:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
  color:#777;
  transition:.25s ease;
}

.nav-modern .nav-ico svg {
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.nav-modern .nav-txt {
  font-size:11px;
  font-weight:600;
}

/* Etat actif */
.nav-modern .nav-item.active {
  color:#d69a28;
}

.nav-modern .nav-item.active .nav-ico {
 transform:translateY(-2px);
}

/* Bouton créer */
.nav-modern .nav-add {
 position:relative;
}

.nav-modern .nav-create {
 width:23px;
 height:23px;
 border-radius:10px;
 display:flex;
 margin-bottom: 6px !important;
 align-items:center;
 justify-content:center;
 background:
 linear-gradient(
 135deg,
 #e9a632,
 #ffd477
 );
 box-shadow:
 0 12px 25px rgba(218,158,40,.35);
 color:white;
}

.nav-modern .nav-create svg {
 width:18px;
 height:18px;
 fill:none;
 stroke:white;
 stroke-width:2.2;
}

.nav-modern .nav-add .nav-txt {
 margin-top:-5px;
}

/* Mode sombre */
[data-theme="dark"] .app-nav.nav-modern {
 background:
 rgba(25,25,25,.92);
 border-color:
 rgba(255,255,255,.08);
}

[data-theme="dark"] .nav-modern .nav-item {
 color:#aaa;
}

[data-theme="dark"] .nav-modern .nav-item.active {
 color:#ffc45b;
}


/* =====================================================
   DASHBOARD EVENTS MODERN PREMIUM
===================================================== */


/* Conteneur principal */
.dashboard-modern {

  padding:20px 16px 120px;
  max-width:600px;
  margin:auto;

}



/* =========================
   HEADER DASHBOARD
========================= */

.dash-header {

  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:25px;

}


.dash-user h1 {

  margin:0;

  font-family:Inter,sans-serif;

  font-size:24px;
  font-weight:700;

  color:var(--text);

}


.dash-user p {

  margin-top:5px;

  font-size:14px;

  color:var(--muted);

}



/* =========================
   BOUTON CREATION
========================= */


.create-event-btn {


display:flex;

align-items:center;

justify-content:center;

gap:8px;


height:48px;


border-radius:14px;


background:

linear-gradient(
135deg,
#e9a632,
#ffc85b
);


color:white;

text-decoration:none;


font-size:15px;

font-weight:600;


box-shadow:

0 12px 30px rgba(230,165,40,.30);


margin-bottom:28px;


transition:.25s;

}


.create-event-btn span {

font-size:22px;

line-height:0;

}



.create-event-btn:active {

transform:scale(.97);

}





/* =========================
   TITRE SECTION
========================= */


.events-title {


display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:15px;


}


.events-title h2 {


font-size:18px;

margin:0;

font-weight:700;


}



.events-title a {


font-size:13px;

color:#e6b04b;

text-decoration:none;

}





/* =========================
   GRID EVENTS
========================= */


.event-grid-modern {


display:flex;

flex-direction:column;

gap:12px;


}




/* =========================
   CARD EVENT
========================= */


.event-open-form {


display:block;

}


.event-card-modern {


position:relative;


display:flex;

align-items:center;


height:105px;


padding:10px;


border-radius:18px;


background:

rgba(255,255,255,.94);


overflow:hidden;


cursor:pointer;


transition:.25s;


box-shadow:

0 8px 25px rgba(0,0,0,.18);


}





.event-card-modern:hover {


transform:translateY(-2px);


}





/* Image gauche */


.event-thumb {


width:85px;

height:85px;

flex-shrink:0;


border-radius:14px;


overflow:hidden;


background:#ddd;


}



.event-thumb img {


width:100%;

height:100%;

object-fit:cover;

object-position:center top;


}



.event-placeholder {


height:100%;

display:flex;

align-items:center;

justify-content:center;


font-size:12px;

font-weight:700;


background:

linear-gradient(
135deg,
#222,
#555
);


color:white;


}





/* =========================
   INFO EVENT
========================= */


.event-info {


flex:1;

padding-left:14px;

min-width:0;


}


.event-type {


font-size:11px;

color:#888;

margin-bottom:5px;


}



.event-info h3 {


margin:0;


font-size:15px;


font-weight:700;


color:#222;


white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;


}



.event-date {


margin-top:8px;


font-size:12px;


color:#777;


}




/* =========================
   STATUS
========================= */


.event-status {


align-self:flex-start;


padding-top:6px;


}


.event-status span {


font-size:11px;


padding:5px 9px;


border-radius:20px;


background:#eee;


color:#999;


}


.event-status span.active {
background:
rgba(80,180,100,.15);
color:#55a85f;
font-weight:600;
}

/* =========================
   MODE SOMBRE
========================= */
[data-theme="dark"] .event-card-modern {
background:
rgba(255,255,255,.93);
}

[data-theme="dark"] .event-info h3 {
color:#222;
}

[data-theme="dark"] .event-date {
color:#666;
}



/* ---------- PROFIL ---------- */

.profile-card{
    padding:0;
    border-radius:24px;
    overflow:hidden;
    background:var(--card1);
    color:var(--text);
    height:100%;
    display:flex;
    flex-direction:column;
}

/* Header */

.profile-header{
    padding:14px 18px 10px;
    text-align:center;
}

.profile-title{
    margin:0 0 12px;
    font-size:22px;
    font-weight:700;
    color:var(--text);
}

.profile-avatar-wrapper{
    width:88px;
    height:88px;
    margin:auto;
    position:relative;
}

.profile-avatar{
    width:88px;
    height:88px;
    border-radius:50%;
    object-fit:cover;
    background:var(--bg-soft);
}

.profile-camera{
    position:absolute;
    right:-2px;
    bottom:-2px;
    width:28px;
    height:28px;
    border:none;
    border-radius:50%;
    background:var(--gold);
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.profile-name{
    margin-top:10px;
    font-size:20px;
    font-weight:700;
    line-height:1.2;
    color:var(--text);
}

.profile-phone{
    margin-top:2px;
    font-size:14px;
    color:var(--muted);
}

/* Menu */

.profile-menu{
    margin-top:10px;
    border-top:1px solid var(--line);
}

.profile-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    padding:14px 18px;
    color:var(--text);
    text-decoration:none;
    border-bottom:1px solid var(--line);
    transition:background .18s ease;
}

.profile-item:hover{
    background:rgba(255,255,255,.04);
}

html[data-theme="light"] .profile-item:hover{
    background:rgba(0,0,0,.035);
}

.profile-item i{
    color:var(--muted);
}

.profile-item-right{
    display:flex;
    align-items:center;
    gap:8px;
}

.premium-badge{
    background:rgba(243,178,50,.18);
    color:var(--gold);
    font-size:11px;
    font-weight:700;
    padding:3px 9px;
    border-radius:999px;
}

.profile-logout{
    color:var(--text);
}


/* =====================================================
   PACKAGES - MOBILE FIRST (MITALA)
===================================================== */
/* =====================================================
   MITALA PACKAGES
   MOBILE FIRST
   PARTIE 1 / 3
===================================================== */


/* =====================================================
   LAYOUT
===================================================== */

.packages-modern{

    width:100%;
    max-width:430px;
    margin:0 auto;
    padding:22px 16px 120px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.packages-modern>*+*{

    margin-top:22px;

}



/* =====================================================
   HEADER
===================================================== */

.packages-header-modern{

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.packages-header-modern>div{

    flex:1;

    min-width:0;

}



/* =====================================================
   BACK BUTTON
===================================================== */

.packages-back{

    width:46px;

    height:46px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    background:var(--card0);

    color:var(--text);

    transition:.25s;

}

.packages-back:hover{

    transform:translateY(-2px);

    border-color:rgba(226,171,63,.45);

}

.packages-back i{

    font-size:17px;

}



/* =====================================================
   TOP PILL
===================================================== */

.packages-pill{

    display:inline-flex;

    align-items:center;

    gap:8px;

    height:32px;

    padding:0 14px;

    margin-bottom:14px;

    border-radius:999px;

    background:rgba(226,171,63,.08);

    border:1px solid rgba(226,171,63,.25);

    color:var(--gold);

    font-size:12px;

    font-weight:600;

    letter-spacing:.2px;

}

.packages-pill i{

    font-size:11px;

}



/* =====================================================
   TITLES
===================================================== */

.packages-header-modern h1{

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-size:34px;

    line-height:1.05;

    font-weight:600;

    letter-spacing:-.4px;

    color:var(--text);

}

.packages-header-modern p{

    margin:10px 0 0;

    color:var(--muted);

    font-size:14px;

    line-height:1.45;

}

.packages-header-modern b{

    color:var(--gold);

    font-weight:600;

}



/* =====================================================
   CURRENCY CARD
===================================================== */

.currency-box{

    padding:18px;

    border-radius:22px;

    background:var(--card0);

    border:1px solid rgba(255,255,255,.08);

}

.currency-title{

    margin-bottom:14px;

    font-size:14px;

    font-weight:600;

    color:var(--text);

}



/* =====================================================
   SWITCH
===================================================== */

.currency-switch{

    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:4px;

    padding:4px;

    border-radius:999px;

    background:var(--card1);

}

.currency-switch button{

    position:relative;

    z-index:2;

    height:42px;

    border:none;

    outline:none;

    background:transparent;

    border-radius:999px;

    color:var(--muted);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.currency-switch button:hover{

    color:var(--text);

}

.currency-switch button.active{

    background:linear-gradient(
        135deg,
        #D79A2F,
        #F5C562
    );

    color:#fff;

    box-shadow:
        0 8px 18px rgba(215,154,47,.28);

}



/* =====================================================
   INFO
===================================================== */

.currency-box p{

    margin:14px 0 0;

    font-size:12px;

    color:var(--muted);

    line-height:1.5;

}

.currency-box strong{

    color:var(--gold);

    font-weight:600;

}



/* =====================================================
   SECTION
===================================================== */

.packages-section{

    margin-top:30px;

}

.packs-section-title{

    margin:0 0 16px;

    font-size:15px;

    font-weight:700;

    letter-spacing:.3px;

    text-transform:uppercase;

    color:var(--muted);

}



/* =====================================================
   LIST
===================================================== */

.packs-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}



/* =====================================================
   PLACEHOLDER
===================================================== */

.muted{

    padding:40px 20px;

    text-align:center;

    border-radius:20px;

    background:var(--card0);

    border:1px dashed rgba(255,255,255,.08);

    color:var(--muted);

}

/* =====================================================
   PACK CARD
   PARTIE 2 / 3
===================================================== */

.pack-card-modern{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:54px 1fr auto;
    grid-template-areas:
        "icon content price"
        "button button button";
    align-items:center;
    gap:14px 16px;
    padding:18px;
    border-radius:24px;
    background:var(--card0);
    border:1px solid rgba(255,255,255,.08);
    transition:
        transform .25s,
        border-color .25s,
        box-shadow .25s;
}

.pack-card-modern:hover{

    transform:translateY(-2px);

    border-color:rgba(226,171,63,.25);

    box-shadow:
        0 14px 28px rgba(0,0,0,.18);

}



/* ==========================================
   FEATURED
========================================== */

.pack-card-modern.featured{
    height: 240px !important;
    border-color:rgba(226,171,63,.45);
    background:
        linear-gradient(
            180deg,
            rgba(226,171,63,.05),
            transparent 55%
        ),
        var(--card0);

    box-shadow:

        0 0 0 1px rgba(226,171,63,.08),

        0 18px 34px rgba(210,155,45,.14);

}



/* ==========================================
   BADGE
========================================== */

.pack-badge{
    position:absolute;
    top:14px;
    right:16px;
    height:24px;
    display:flex;
    align-items:center;
    padding:0 10px;
    margin-bottom: 20px !important;
    border-radius:999px;
    background:rgba(226,171,63,.12);
    border:1px solid rgba(226,171,63,.30);
    color:var(--gold);
    font-size:11px;
    font-weight:700;
    letter-spacing:.3px;
}



/* ==========================================
   ICON
========================================== */

.pack-icon{

    grid-area:icon;

    width:54px;

    height:54px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            145deg,
            rgba(226,171,63,.20),
            rgba(226,171,63,.05)
        );

    border:1px solid rgba(226,171,63,.18);

    color:var(--gold);

    font-size:20px;

    flex-shrink:0;

}

.featured .pack-icon{

    background:

        linear-gradient(
            135deg,
            #D99A31,
            #F5C562
        );

    color:#fff;

    border:none;

}



/* ==========================================
   CONTENT
========================================== */

.pack-content{

    grid-area:content;

    min-width:0;

}

.pack-content h3{

    margin:0 0 8px;

    font-size:17px;

    font-weight:700;

    letter-spacing:.2px;

    color:var(--text);

}

.pack-limit{

    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:9px;
    border: 0.5px solid rgba(255, 255, 255, 0.224);
    background:rgba(255,255,255,.04);
    font-size:12px;
    color:var(--muted);
}

.pack-limit strong{

    color:var(--gold);

    font-size:13px;

    font-weight:700;

}



/* ==========================================
   PRICE
========================================== */

.pack-price{

    grid-area:price;

    text-align:right;

}

.price-value{

    display:block;

    font-size:22px;

    font-weight:700;

    line-height:1;

    color:var(--text);

    letter-spacing:-1px;
    margin-top: 0 !important;
    padding: 0 !important;

}

.price-currency{

    display:block;

    margin-top:4px;

    font-size:11px;

    letter-spacing:1px;

    text-transform:uppercase;

    color:var(--muted);

}



/* ==========================================
   BUTTON
========================================== */

.package-form{

    grid-area:button;

}

.pack-button{

    width:100%;

    height:48px;

    margin-top:4px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:16px;

    cursor:pointer;

    border:1px solid rgba(226,171,63,.35);

    background:transparent;

    color:var(--gold);

    font-size:14px;

    font-weight:600;

    transition:
        .25s;

}

.pack-button:hover{

    background:rgba(226,171,63,.08);

    border-color:var(--gold);

}

.pack-button i{

    transition:transform .25s;

}

.pack-button:hover i{

    transform:translateX(4px);

}



/* ==========================================
   FEATURED BUTTON
========================================== */

.featured .pack-button{

    background:

        linear-gradient(
            135deg,
            #D99A31,
            #F5C562
        );

    color:white;

    border:none;

}

.featured .pack-button:hover{

    transform:translateY(-1px);

    box-shadow:

        0 12px 24px rgba(214,158,47,.30);

}



/* ==========================================
   ACTIVE
========================================== */

.pack-card-modern:active{

    transform:scale(.985);

}

/* =====================================================
   CUSTOM PACK
   PARTIE 3 / 3
===================================================== */

.custom-pack-modern{

    position:relative;

    overflow:hidden;

    margin-top:26px;

    padding:20px;

    border-radius:24px;

    background:var(--card0);

    border:1px solid rgba(255,255,255,.08);

    transition:.25s;

}

.custom-pack-modern:hover{

    border-color:rgba(226,171,63,.25);

    box-shadow:

        0 14px 28px rgba(0,0,0,.18);

}

.custom-pack-modern h3{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0;

    font-size:18px;

    font-weight:700;

}

.custom-pack-modern h3 i{

    color:var(--gold);

}

.custom-pack-modern p{

    margin:8px 0 18px;

    color:var(--muted);

    font-size:13px;

    line-height:1.5;

}



/* =====================================================
   GUEST COUNTER
===================================================== */

.guest-counter{

    display:grid;

    grid-template-columns:48px 1fr 48px;

    align-items:center;

    gap:14px;

    padding:10px;

    border-radius:18px;

    background:var(--card1);

    border:1px solid rgba(255,255,255,.05);

}

.guest-counter button{

    width:48px;

    height:48px;

    border:none;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    color:var(--text);

    cursor:pointer;

    font-size:15px;

    transition:.20s;

}

.guest-counter button:hover{

    background:rgba(226,171,63,.12);

    color:var(--gold);

}

.guest-counter button:active{

    transform:scale(.95);

}

.guest-counter div{

    text-align:center;

}

.guest-counter strong{

    display:block;

    font-size:26px;

    font-weight:700;

    color:var(--text);

}

.guest-counter small{

    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:12px;

}



/* =====================================================
   PRICE ESTIMATION
===================================================== */

.estimate{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin:18px 0;

    padding:16px 0;

    border-top:1px solid rgba(255,255,255,.06);

    border-bottom:1px solid rgba(255,255,255,.06);

}

.estimate span{

    font-size:13px;

    color:var(--muted);

}

.estimate strong{

    font-size:28px;

    font-weight:700;

    color:var(--gold);

    line-height:1;

}

.estimate .price-currency{

    margin-left:6px;

    font-size:12px;

}



/* =====================================================
   PAYMENT
===================================================== */

.payment-safe{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:30px;

    padding:18px;

    border-radius:20px;

    background:rgba(226,171,63,.04);

    border:1px solid rgba(226,171,63,.10);

}

.payment-icon{

    width:48px;

    height:48px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(226,171,63,.10);

    color:var(--gold);

    font-size:18px;

}

.payment-safe b{

    display:block;

    margin-bottom:4px;

    font-size:14px;

}

.payment-safe small{

    color:var(--muted);

    line-height:1.5;

}



/* =====================================================
   TRANSITIONS
===================================================== */

.pack-card-modern,
.custom-pack-modern,
.pack-button,
.currency-switch button,
.guest-counter button{

    transition:

        background .25s,

        color .25s,

        border-color .25s,

        box-shadow .25s,

        transform .20s;

}



/* =====================================================
   SCROLL ANIMATION
===================================================== */

.pack-card-modern,
.custom-pack-modern{

    animation:cardAppear .45s ease;

}

@keyframes cardAppear{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* =====================================================
   FOCUS
===================================================== */

button:focus-visible,
a:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:2px;

}



/* =====================================================
   DARK MODE
===================================================== */

[data-theme="dark"] .pack-card-modern,
[data-theme="dark"] .custom-pack-modern,
[data-theme="dark"] .currency-box{

    background:var(--card0);

}



/* =====================================================
   LIGHT MODE
===================================================== */

[data-theme="light"] .pack-card-modern,
[data-theme="light"] .custom-pack-modern,
[data-theme="light"] .currency-box{

    background:#fff;

    box-shadow:

        0 10px 24px rgba(0,0,0,.06);

}



/* =====================================================
   LARGE MOBILE
===================================================== */

@media (min-width:420px){

    .packages-modern{

        padding-left:18px;

        padding-right:18px;

    }

}



/* =====================================================
   TABLET
===================================================== */

@media (min-width:768px){

    .packages-modern{

        max-width:560px;

    }

}

/*==================================================
PROFILE ONBOARDING POPUP
==================================================*/

.profile-overlay{

    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(5,6,8,.72);
    backdrop-filter:blur(12px);

    z-index:99999;

}

.profile-modal{

    width:100%;
    max-width:430px;

    padding:28px;

    border-radius:24px;

    background:var(--card0);

    border:1px solid var(--line);

    backdrop-filter:blur(22px);

    box-shadow:
    0 30px 70px rgba(0,0,0,.45);

}

html[data-theme="light"] .profile-modal{

    background:#ffffff;

}

.profile-modal h2{

    margin:0;

    font-size:28px;
    font-weight:700;

    line-height:1.1;

    color:var(--txt);

}

.profile-modal p{

    margin:8px 0 24px;

    font-size:14px;

    line-height:1.55;

    color:var(--muted);

}

.profile-modal label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:var(--txt);

}

.profile-modal input[type="text"],
.profile-modal input[type="email"],
.profile-modal input:not([type="checkbox"]){

    width:100%;
    height:48px;

    margin-bottom:18px;

    border-radius:14px;

    font-size:14px;

}

.profile-modal input:focus{

    border-color:rgba(246,196,84,.65);

    box-shadow:
    0 0 0 4px rgba(246,196,84,.12);

}

.same{

    width:100%;

    display:flex;

    justify-content:center;

    margin:12px 0 24px;

    cursor:pointer;

    user-select:none;

}

.same-content{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

}

.same input[type="checkbox"]{

    width:20px;
    height:20px;

    margin:0;

    accent-color:var(--gold);

    flex-shrink:0;

}

.same span{

    margin:0;

    font-size:15px;

    font-weight:500;

    line-height:20px;

    color:var(--txt);

}

.profile-modal .btn{

    width:100%;

    height:48px;

    border-radius:14px;

    font-size:15px;

    font-weight:650;

    margin-top:6px;

    justify-content:center;

}

.profile-modal .btn:hover{

    filter:brightness(1.03);

}

@media(max-width:480px){

    .profile-overlay{

        padding:18px;

    }

    .profile-modal{

        padding:24px;

    }

    .profile-modal h2{

        font-size:24px;

    }

    .profile-modal p{

        font-size:13px;

    }

}

/*==================================================
GOOGLE MAP POPUP
==================================================*/

.map-popup{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
padding:12px;
background:rgba(0,0,0,.72);
backdrop-filter:blur(10px);
z-index:999999;
}

.map-popup.show{
display:flex;
}

.map-popup-card{
width:min(760px,100%);
max-height:94svh;
height:auto;
display:flex;
flex-direction:column;
padding:18px;
border-radius:16px;
background:var(--card0);
border:1px solid var(--line);
box-shadow:0 30px 80px rgba(0,0,0,.45);
overflow:hidden;
}

.map-popup-head{
margin-bottom:14px;
}

.map-popup-head h2{
margin:0;
font-size:28px;
font-weight:700;
color:var(--txt);
line-height:1.15;
}

.map-popup-head p{
margin:4px 0 0;
font-size:13px;
color:var(--muted);
line-height:1.3;
}

.popup-grid{
display:grid;
grid-template-columns:1fr 54px;
gap:10px 12px;
margin-bottom:12px;
}

.popup-field{
display:flex;
flex-direction:column;
}

.popup-field label{
margin-bottom:3px;
font-size:12px;
font-weight:500;
color:var(--muted);
}

.popup-field input{
height:44px;
padding:0 16px;
border-radius:16px;
background:var(--input);
border:1px solid var(--line);
color:var(--txt);
font-size:15px;
}

.popup-field input:read-only{
opacity:.95;
cursor:default;
}

.popup-side{
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:center;
gap:6px;
}

.popup-side small{
font-size:12px;
font-weight:600;
color:var(--muted);
}

.popup-icon-btn{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px;
border:1px solid var(--line);
background:rgba(255,255,255,.04);
cursor:pointer;
transition:.25s;
}

.popup-icon-btn:hover{
border-color:var(--gold);
transform:translateY(-2px);
}

.popup-icon-btn.active{
background:rgba(223,177,100,.14);
border-color:var(--gold);
}

.popup-icon-btn img{
width:22px;
height:22px;
object-fit:contain;
pointer-events:none;
}

.popup-mode{
position:relative;
}

#popupAddress{
opacity:.82;
font-size:14px;
}

#modeIndicator{
width:18px;
height:18px;
border-radius:50%;
background:#2ecc71;
transition:.25s;
}

.popup-mode.pin #modeIndicator{
background:#ff9800;
}

.popup-map{
height:280px;
min-height:260px;
max-height:320px;
margin:6px 0 8px;
border-radius:18px;
overflow:hidden;
border:1px solid var(--line);
background:#111;
}

@media(max-width:650px){

.popup-map{
height:270px;
min-height:250px;
max-height:300px;
}

}

#popupMap{
width:100%;
height:100%;
}

.popup-status{
height:28px;
display:flex;
align-items:center;
font-size:14px;
font-weight:600;
color:var(--muted);
}

.popup-status.wait{
color:#f7b942;
}

.popup-status.ok{
color:#3ddc84;
}

.popup-status.error{
color:#ff6868;
}

.popup-actions{
display:grid;
grid-template-columns:1fr 1.45fr;
gap:12px;
margin-top:10px;
}

.popup-actions button{
height:44px;
border-radius:9px;
}

/*==================================================
LIGHT
==================================================*/

html[data-theme="light"] .map-popup{
background:rgba(0,0,0,.42);
}

html[data-theme="light"] .map-popup-card{
background:#fff;
}

html[data-theme="light"] .popup-icon-btn{
background:rgba(0,0,0,.04);
}

html[data-theme="light"] .popup-map{
background:#ececec;
}

/*==================================================
GOOGLE MAPS
==================================================*/

.gm-style .gm-style-mtc{
margin-top:8px!important;
margin-right:8px!important;
}

.gm-style .gm-style-mtc button{
height:28px!important;
padding:0 12px!important;
font-size:11px!important;
font-weight:600!important;
border:none!important;
border-radius:10px!important;
background:rgba(18,18,18,.56)!important;
backdrop-filter:blur(12px)!important;
box-shadow:none!important;
color:#fff!important;
}

html[data-theme="light"] .gm-style .gm-style-mtc button{
background:rgba(255,255,255,.82)!important;
color:#111!important;
}

.gm-style .gm-control-active{
background:rgba(18,18,18,.55)!important;
backdrop-filter:blur(10px)!important;
border:none!important;
box-shadow:none!important;
}

html[data-theme="light"] .gm-style .gm-control-active{
background:rgba(255,255,255,.82)!important;
}

/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:650px){

.map-popup{
padding:8px;
}

.map-popup-card{
height:95svh;
padding:14px;
border-radius:16px;
}

.map-popup-head h2{
font-size:24px;
}

.map-popup-head p{
font-size:12px;
}

.popup-grid{
grid-template-columns:1fr 58px;
gap:8px 10px;
}

.popup-icon-btn{
width:46px;
height:46px;
border-radius:14px;
}

.popup-icon-btn img{
width:20px;
height:20px;
}

.popup-field input{
height:46px;
font-size:14px;
}

.popup-map{
min-height:300px;
}

.popup-status{
font-size:13px;
}

.popup-actions{
grid-template-columns:1fr 1.45fr;
gap:10px;
}

.popup-actions button{
height:46px;
}

}

.gm-me-button{
height:28px;
padding:0 12px;
margin:8px;
border:none;
border-radius:10px;
background:rgba(18,18,18,.55);
backdrop-filter:blur(10px);
color:#fff;
font-size:11px;
font-weight:600;
cursor:pointer;
transition:.25s;
}

.gm-me-button:hover{
background:rgba(223,177,100,.35);
}

.gm-me-button.active{
background:var(--gold);
color:#111;
}

html[data-theme="light"] .gm-me-button{
background:rgba(255,255,255,.82);
color:#111;
}

/* =====================================================
   PAGE ÉVÉNEMENTS — FOND FIXE + CARTES COMPACTES
===================================================== */
body.events-page {
  background:
    linear-gradient(
      180deg,
      #fbf7f0 0%,
      #e5d4bd 30%,
      #635a54 66%,
      #090b0e 100%
    );
  background-attachment: fixed;
  background-size: 100% 100%;
}

body.events-page .app-main {
  align-items: flex-start;
  background: transparent;
}

/* Fond et header en mode sombre */
html[data-theme="dark"] body.events-page {
  background:
    linear-gradient(
      180deg,
      #66635e 0%,
      #343435 32%,
      #161719 64%,
      #07090c 100%
    );
}

body.events-page .app-top {
  background: rgba(30, 30, 31, .88);
  border-bottom-color: rgba(255, 194, 90, .20);
}

/* Les dimensions existantes des cartes sont conservées */
body.events-page .event-grid-modern {
  gap: 12px;
}

body.events-page .event-card-modern {
  display: grid;
  grid-template-columns: 85px minmax(0, 1fr);
  gap: 14px;
  align-items: center;

  height: 105px;
  min-height: 105px;
  padding: 10px;
  border-radius: 18px;

  background: linear-gradient(135deg, #292a2c, #191a1c);
  border: 1px solid rgba(255, 199, 104, .20);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .24);
}

body.events-page .event-card-modern:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 177, 69, .58);
}

/* Image : mêmes dimensions qu’avant */
body.events-page .event-thumb {
  width: 85px;
  height: 85px;
  min-height: 0;
  border-radius: 14px;
}

body.events-page .event-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Colonne texte */
body.events-page .event-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0;
}

/* Titre, puis statut juste en dessous */
body.events-page .event-card-heading {
  display: block;
}

body.events-page .event-card-title {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.events-page .event-status {
  margin-top: 4px;
  padding: 0;
}

body.events-page .event-status span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 9px;

  border: 1px solid rgba(244, 180, 66, .55);
  border-radius: 999px;
  background: rgba(244, 180, 66, .12);
  color: #f4c15b;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

body.events-page .event-status span.is-active {
  border-color: rgba(101, 208, 109, .72);
  background: rgba(54, 141, 70, .20);
  color: #74dd7d;
}

body.events-page .event-status span.is-neutral {
  border-color: rgba(255, 255, 255, .20);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
}

/* Date et heure sur une seule ligne */
body.events-page .event-meta-modern {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
}

body.events-page .event-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;

  color: rgba(255, 255, 255, .78);
  font-size: clamp(11px, 3.25vw, 13px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

body.events-page .event-meta-row i {
  width: auto;
  color: #f4b442;
  font-size: 14px;
}

/* Mode clair */
html[data-theme="light"] body.events-page {
  background:
    linear-gradient(
      180deg,
      #fffdf8 0%,
      #f2e7d8 34%,
      #9d8875 70%,
      #4d4540 100%
    );
}

html[data-theme="light"] body.events-page .app-top {
  background: rgba(255, 253, 248, .90);
  border-bottom-color: rgba(95, 67, 28, .14);
}

html[data-theme="light"] body.events-page .event-card-modern {
  background: linear-gradient(135deg, #ffffff, #f8f6f2);
  border-color: rgba(70, 60, 48, .12);
  box-shadow: 0 8px 24px rgba(82, 61, 33, .14);
}

html[data-theme="light"] body.events-page .event-card-title {
  color: #1a1b1e;
}

html[data-theme="light"] body.events-page .event-meta-row {
  color: rgba(31, 32, 35, .76);
}

html[data-theme="light"] body.events-page .event-status span {
  background: rgba(238, 234, 227, .95);
  border-color: rgba(173, 132, 55, .16);
  color: #9d6815;
}

html[data-theme="light"] body.events-page .event-status span.is-active {
  background: rgba(78, 183, 91, .12);
  border-color: rgba(78, 183, 91, .34);
  color: #398742;
}

html[data-theme="light"] body.events-page .event-status span.is-neutral {
  background: rgba(30, 30, 30, .06);
  border-color: rgba(30, 30, 30, .10);
  color: rgba(35, 36, 39, .60);
}

/* =====================================================
   CORRECTIONS : FOND FIXE + BADGE EN HAUT À DROITE
===================================================== */

/* Un vrai calque fixe : le dégradé ne bouge plus au scroll */
body.events-page {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

body.events-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      #68645e 0%,
      #363536 32%,
      #17181a 64%,
      #07090c 100%
    );
}

/* Mode clair : clair en haut, sombre vers le bas */
html[data-theme="light"] body.events-page::before {
  background:
    linear-gradient(
      180deg,
      #fffdf8 0%,
      #f0e2d0 34%,
      #9c8775 70%,
      #4b4440 100%
    );
}

/* La pastille est alignée au coin supérieur droit de la carte */
body.events-page .event-card-modern {
  position: relative;
}

body.events-page .event-card-heading {
  padding-right: 132px;
}

body.events-page .event-status-modern {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0 !important;
}

body.events-page .event-status-modern span {
  min-height: 24px;
  padding: 4px 10px;
}

/* =====================================================
   AJUSTEMENTS FINAUX — ÉVÉNEMENTS
===================================================== */

/* Calque réellement fixe : indépendant du scroll Android */
body.events-page {
  position: relative;
  isolation: isolate;
  background: #07090c !important;
}

body.events-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      #68645e 0%,
      #363536 32%,
      #17181a 64%,
      #07090c 100%
    );
}

body.events-page .app-main {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Variante claire : clair en haut, sombre vers le bas */
html[data-theme="light"] body.events-page::before {
  background:
    linear-gradient(
      180deg,
      #fffdf8 0%,
      #f0e2d0 34%,
      #9c8775 70%,
      #4b4440 100%
    );
}

/* Cartes légèrement plus larges que leur conteneur */
body.events-page .event-open-form {
  width: calc(100% + 16px);
  margin-left: -8px;
}

/*
  Le titre descend sous la pastille. Il peut alors prendre toute
  la largeur disponible au lieu d’être réduit à « A… ».
*/
body.events-page .event-card-heading {
  padding: 26px 0 0 !important;
}

body.events-page .event-card-title {
  font-size: 15px;
  line-height: 1.1;
}

/* Pastille strictement au coin supérieur droit */
body.events-page .event-status-modern {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0 !important;
}

body.events-page .event-status-modern span {
  min-height: 24px;
  padding: 4px 10px;
}

/* Date et heure descendues avec le titre, toujours sur une ligne */
body.events-page .event-meta-modern {
  margin-top: 6px;
}

/* =====================================================
   FOND GLOBAL MITALA — TOUTES LES PAGES HORS AUTH
===================================================== */

/*
  Le layout place déjà la classe .app sur toutes les pages.
  L’authentification est exclue pour conserver son slider mariage.
*/
body.app:not(.auth-home-v2) {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background: #07090c !important;
}

/* Calque fixe : il ne défile jamais avec le contenu */
body.app:not(.auth-home-v2)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      90% 48% at 50% 0%,
      rgba(255, 196, 99, .12) 0%,
      rgba(255, 196, 99, 0) 68%
    ),
    linear-gradient(
      180deg,
      #68645e 0%,
      #383637 31%,
      #17181a 65%,
      #07090c 100%
    );
}

/* Le contenu reste toujours au-dessus du fond */
body.app:not(.auth-home-v2) .app-main {
  position: relative;
  z-index: 1;
  background: transparent;
}

body.app:not(.auth-home-v2) .container {
  background: transparent;
}

/* Header uniforme */
body.app:not(.auth-home-v2) .app-top {
  background: rgba(25, 25, 27, .82);
  border-bottom-color: rgba(247, 191, 91, .18);
  backdrop-filter: blur(16px);
}

/* Variante claire */
html[data-theme="light"] body.app:not(.auth-home-v2) {
  background: #4c4540 !important;
}

html[data-theme="light"] body.app:not(.auth-home-v2)::before {
  background:
    radial-gradient(
      90% 45% at 50% 0%,
      rgba(255, 197, 105, .22) 0%,
      rgba(255, 197, 105, 0) 67%
    ),
    linear-gradient(
      180deg,
      #fffdf8 0%,
      #f1e4d3 34%,
      #9a8574 70%,
      #4c4540 100%
    );
}

html[data-theme="light"] body.app:not(.auth-home-v2) .app-top {
  background: rgba(255, 253, 248, .88);
  border-bottom-color: rgba(93, 66, 29, .14);
}

/* =====================================================
   CALQUE FIXE ENTRE LE CONTENU ET LA NAV
===================================================== */

:root {
  --app-nav-height: 78px;
  --app-nav-half-height: 39px;
  --app-nav-bottom: calc(18px + env(safe-area-inset-bottom));
}

/* Le contenu garde une marge de confort au défilement */
.app-main {
  padding-bottom: calc(
    var(--app-nav-height) + 54px + env(safe-area-inset-bottom)
  ) !important;
}

/*
  Clone fixe du fond, mais visible uniquement à partir
  du milieu de la navbar jusqu'au bas de l'écran.
*/
.app-scroll-fade {
  position: fixed;
  inset: 0;
  z-index: 1900;
  pointer-events: none;

  background:
  radial-gradient(
    90% 48% at 50% 0%,
    rgba(255, 196, 99, .12) 0%,
    rgba(255, 196, 99, 0) 68%
  ),
  linear-gradient(
    180deg,
    #68645e 0%,
    #383637 31%,
    #17181a 65%,
    #07090c 100%
  );

  /*
    L’élément occupe tout le viewport : le dégradé garde
    donc exactement les mêmes coordonnées que le fond.
  */
  clip-path: inset(
    calc(100dvh - var(--app-nav-bottom) - var(--app-nav-half-height))
    0 0 0
  );
  -webkit-clip-path: inset(
    calc(100dvh - var(--app-nav-bottom) - var(--app-nav-half-height))
    0 0 0
  );

  /*
    Le calque apparaît progressivement derrière la moitié
    basse de la nav, puis devient totalement opaque avant
    la zone sous le menu.
  */
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--app-nav-half-height),
    #000 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--app-nav-half-height),
    #000 100%
  );
}

/* La navbar reste au-dessus du calque */
.app-nav.nav-modern {
  z-index: 2000 !important;
}

/* Le même fond exact en thème clair */
html[data-theme="light"] .app-scroll-fade {
  background:
    radial-gradient(
      90% 45% at 50% 0%,
      rgba(255, 197, 105, .22) 0%,
      rgba(255, 197, 105, 0) 67%
    ),
    linear-gradient(
      180deg,
      #fffdf8 0%,
      #f1e4d3 34%,
      #9a8574 70%,
      #4c4540 100%
    );
}

/* =====================================================
   PACKAGES — VERSION COMPACTE MOBILE
===================================================== */

.packages-modern {
  max-width: 360px;
  padding: 0 4px calc(100px + env(safe-area-inset-bottom)) !important;
}

.packages-modern > * + * {
  margin-top: 14px;
}

/* Header : retour et pill sur la même ligne, titre dessous */
.packages-header-modern {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-areas:
    "back . pill"
    "title title title"
    "event event event";
  gap: 8px 10px;
}

.packages-header-modern > div {
  display: contents;
}

.packages-back {
  grid-area: back;
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.packages-back i {
  font-size: 12px;
}

.packages-pill {
  grid-area: pill;
  justify-self: end;
  height: 22px;
  margin: 0;
  padding: 0 9px;
  gap: 4px;
  font-size: 12px;
  letter-spacing: 0;
}

.packages-pill i {
  font-size: 8px;
}

.packages-header-modern h1 {
  grid-area: title;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -.3px;
}

.packages-header-modern p {
  grid-area: event;
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
}

/* Devise */
.currency-box {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px 10px;
  padding: 11px;
  border-radius: 13px;
}

.currency-title {
  align-self: center;
  margin: 0;
  font-size: 10px;
}

.currency-switch {
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
}

.currency-switch button {
  height: 25px;
  font-size: 10px;
}

.currency-switch button.active {
  box-shadow: 0 4px 10px rgba(215, 154, 47, .24);
}

.currency-box p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 9px;
  line-height: 1.25;
}

/* Liste */
.packages-section {
  margin-top: 18px;
}

.packs-section-title {
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.packs-list {
  gap: 10px;
}

/* Cartes de packs */
.pack-card-modern {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 13px;
  border-radius: 13px;
}

.pack-card-modern.featured {
  height: auto !important;
  box-shadow:
    0 0 0 1px rgba(226, 171, 63, .10),
    0 9px 22px rgba(210, 155, 45, .17);
}

.pack-badge {
  top: 9px;
  right: 10px;
  height: 18px;
  padding: 0 7px;
  font-size: 8px;
  letter-spacing: 0;
}

.pack-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 16px;
}

.pack-content h3 {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.pack-limit {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 10px;
  line-height: 1.2;
}

.pack-limit strong {
  font-size: 14px;
}

.price-value {
  font-size: 21px;
}

.price-currency {
  margin-top: 1px;
  font-size: 9px;
  letter-spacing: .5px;
}

.package-form {
  margin-top: 0;
}

.pack-button {
  height: 32px;
  margin-top: 0;
  border-radius: 9px;
  gap: 7px;
  font-size: 10px;
}

/* Pack personnalisé */
.custom-pack-modern {
  margin-top: 0;
  padding: 13px;
  border-radius: 13px;
}

.custom-pack-modern h3 {
  gap: 7px;
  font-size: 11px;
}

.custom-pack-modern p {
  margin: 4px 0 10px;
  font-size: 9px;
  line-height: 1.3;
}

.guest-counter {
  grid-template-columns: 34px 1fr 34px;
  gap: 8px;
  padding: 6px;
  border-radius: 10px;
}

.guest-counter button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 11px;
}

.guest-counter strong {
  font-size: 17px;
}

.guest-counter small {
  margin-top: 0;
  font-size: 9px;
}

.estimate {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 4px;
  margin: 10px 0;
  padding: 10px 0;
}

.estimate span {
  font-size: 10px;
}

.estimate strong {
  font-size: 16px;
}

.estimate .price-currency {
  margin-left: 0;
  font-size: 9px;
}

/* Mention de sécurité légère, comme la maquette */
.payment-safe {
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.payment-icon {
  width: auto;
  height: auto;
  background: transparent;
  font-size: 12px;
}

.payment-safe b {
  margin: 0;
  font-size: 9px;
}

.payment-safe small {
  display: block;
  font-size: 8px;
  line-height: 1.15;
}

/* =====================================================
   PACKAGES — AJUSTEMENTS FINAUX DE RYTHME
===================================================== */

/* Écart net entre le dernier pack recommandé et le choix personnalisé */
.packages-modern > .custom-pack-modern {
  margin-top: 14px !important;
}

/* Les packs gardent assez de hauteur pour leurs deux lignes et le bouton */
.packs-list > .pack-card-modern {
  min-height: 124px;
}

.packs-list > .pack-card-modern.featured {
  min-height: 138px !important;
  padding-top: 18px;
}

.pack-card-modern.featured .pack-price {
  padding-top: 7px;
}

/* Évite que le nom d'un pack dynamique ne se rapproche du badge */
.pack-card-modern.featured .pack-content h3 {
  padding-right: 58px;
}

.packages-modern {
  padding-bottom: 0 !important;
}

@supports selector(body:has(.packages-modern)) {
  body.app:not(.auth-home-v2):has(.packages-modern) .app-main {
    padding-bottom: calc(
      78px + 18px + 10px + env(safe-area-inset-bottom)
    ) !important;
  }
}

/* =====================================================
   BTN AUTH
===================================================== */

.btn.auth-primary.receive, 
.btn.auth-primary.validate,
.ghost.auth.resend {
  border-radius: 9px !important;
}

.otp-actions {
  display: flex;
  flex-direction: row-reverse !important;
}

/* Écran OTP : les deux actions restent côte à côte, comme sur le parcours initial. */
body.auth-home-v2 .otp-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

body.auth-home-v2 .otp-actions .otp-resend-form {
  width: 100%;
  margin: 0 !important;
}

body.auth-home-v2 .otp-actions .ghost,
body.auth-home-v2 .otp-actions .validate {
  width: 100% !important;
  min-width: 0;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 10px !important;
}

@media (max-width: 360px) {
  body.auth-home-v2 .otp-actions {
    gap: 8px;
  }

  body.auth-home-v2 .otp-actions .ghost,
  body.auth-home-v2 .otp-actions .validate {
    font-size: 13px !important;
    padding: 0 6px !important;
  }
}

.guest-counter input#guestCount {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.guest-counter input#guestCount::-webkit-outer-spin-button,
.guest-counter input#guestCount::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.guest-counter input#guestCount:focus {
  color: var(--gold);
}

/* =====================================================
   CHECKOUT — VERSION COMPACTE MOBILE
===================================================== */

body.checkout-page .app-main {
  padding:
    14px
    18px
    calc(78px + 16px + env(safe-area-inset-bottom));
}

.checkout-modern {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.checkout-modern > * + * {
  margin-top: 12px;
}

.checkout-header-modern {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-areas:
    "back . pill"
    "title title title"
    "event event event";
  gap: 8px 10px;
}

.checkout-back {
  grid-area: back;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
  text-decoration: none;
}

.checkout-back i {
  font-size: 12px;
}

.checkout-pill {
  grid-area: pill;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(226, 171, 63, .30);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(226, 171, 63, .07);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.checkout-pill i {
  font-size: 8px;
}

.checkout-header-modern h1 {
  grid-area: title;
  margin: 0;
  color: var(--text);
  font-family: "Cormorant Garamond", serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.3px;
}

.checkout-header-modern p {
  grid-area: event;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.checkout-header-modern p b {
  color: var(--gold);
  font-weight: 700;
}

.checkout-error {
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 139, 121, .42);
  border-radius: 9px;
  background: rgba(137, 48, 39, .28);
  color: #ffd4ce;
  font-size: 10px;
  line-height: 1.35;
}

.checkout-card {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 13px;
  background: var(--card0);
  box-shadow: 0 9px 22px rgba(0, 0, 0, .16);
}

.checkout-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.checkout-secure-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gold);
  font-size: 8px;
  font-weight: 700;
}

.checkout-secure-pill i {
  font-size: 8px;
}

.checkout-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.checkout-detail {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}

.checkout-detail--pack {
  grid-column: 1 / -1;
}

.checkout-detail span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.checkout-detail strong {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-detail--amount strong {
  display: inline-block;
  color: var(--gold);
  font-size: 18px;
  letter-spacing: -.3px;
}

.checkout-detail--amount small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}

.checkout-payment-form {
  margin-top: 10px;
}

.checkout-pay-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 34px;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  color: #1a1208;
  background: linear-gradient(
    135deg,
    var(--orange),
    var(--orange2)
  );
  box-shadow: 0 9px 22px rgba(210, 155, 45, .20);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.checkout-pay-button i {
  font-size: 10px;
}

.checkout-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.checkout-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 32px;
  gap: 5px;
  border: 1px solid rgba(226, 171, 63, .32);
  border-radius: 9px;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.checkout-secondary i {
  color: var(--gold);
  font-size: 9px;
}

.checkout-safety-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.2;
  text-align: center;
}

.checkout-safety-note i {
  color: var(--gold);
  font-size: 11px;
}

.checkout-pending-card {
  text-align: center;
}

.checkout-pending-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 2px auto 9px;
  border: 1px solid rgba(226, 171, 63, .34);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(226, 171, 63, .10);
  font-size: 17px;
}

.checkout-pending-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

.checkout-pending-copy {
  margin: 6px auto 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.checkout-pending-card .checkout-details {
  grid-template-columns: 1fr 1fr;
  margin-top: 0;
  text-align: left;
}

.checkout-reference {
  display: grid;
  gap: 3px;
  margin: 10px 0;
  padding: 9px;
  border: 1px dashed rgba(226, 171, 63, .34);
  border-radius: 9px;
  text-align: left;
}

.checkout-reference span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.checkout-reference b {
  overflow-wrap: anywhere;
  color: var(--gold2);
  font-size: 10px;
  letter-spacing: .03em;
}

/* Le sélecteur de date est natif : son icône noire disparaissait sur le
   fond sombre. Cette règle ne touche pas le rendu du thème clair. */
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  filter: invert(1) brightness(1.45) contrast(.9);
}

/* =====================================================
   CRÉATION D'ÉVÉNEMENT — CADRE FIXE SUR MOBILE
   La page ne défile pas : seul le contenu de la carte peut le faire.
===================================================== */
@media (max-width: 760px) {
  body.event-create-page {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.event-create-page .app-main {
    height: calc(100dvh - var(--top-h));
    min-height: 0;
    overflow: hidden;
    padding:
      12px
      var(--page-px)
      calc(var(--app-nav-height) + 18px + env(safe-area-inset-bottom)) !important;
  }

  body.event-create-page .container,
  body.event-create-page .wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  body.event-create-page .wrap {
    gap: 8px;
  }

  body.event-create-page .top {
    flex: 0 0 auto;
    margin: 0;
  }

  body.event-create-page .event-create-title {
    margin: 0;
    font-size: clamp(34px, 9.25vw, 43px);
    line-height: .95;
  }

  body.event-create-page .card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 16px;
    overflow: hidden;
  }

  body.event-create-page .card > .head {
    flex: 0 0 auto;
    gap: 8px;
    margin-bottom: 10px;
  }

  body.event-create-page .card > .body,
  body.event-create-page #wizForm {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  body.event-create-page .stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px 10px;
  }

  body.event-create-page .actions.actions--seg {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding-top: 10px;
  }

  body.event-create-page .segBtn {
    height: 44px;
    font-size: 14px;
  }

  body.event-create-page .profile-banner {
    margin-bottom: 0;
  }

  body.event-create-page .panel[data-step="1"] > div[style],
  body.event-create-page .panel[data-step="2"] .grid2 > div[style] {
    margin-top: 14px !important;
  }

  body.event-create-page .wrap > .sub {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  /* Fenêtre de géolocalisation : tous les contrôles restent accessibles. */
  body.event-create-page .map-popup {
    align-items: stretch;
    padding: 8px;
  }

  body.event-create-page .map-popup-card {
    width: 100%;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 12px;
    border-radius: 18px;
  }

  body.event-create-page .map-popup-head {
    flex: 0 0 auto;
    margin-bottom: 8px;
  }

  body.event-create-page .map-popup-head h2 {
    font-size: 21px;
  }

  body.event-create-page .map-popup-head p {
    font-size: 11px;
  }

  body.event-create-page .popup-grid {
    flex: 0 0 auto;
    gap: 6px 8px;
    margin-bottom: 6px;
  }

  body.event-create-page .popup-map {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 4px 0 6px;
  }

  body.event-create-page .popup-status {
    flex: 0 0 24px;
    height: 24px;
  }

  body.event-create-page .popup-actions {
    flex: 0 0 auto;
    margin-top: 6px;
  }
}

@media (max-width: 380px) {
  body.event-create-page .app-main {
    padding-top: 8px;
    padding-bottom: calc(var(--app-nav-height) + 12px + env(safe-area-inset-bottom)) !important;
  }

  body.event-create-page .card {
    padding: 13px;
  }

  body.event-create-page .event-create-title {
    font-size: 32px;
  }

  body.event-create-page .stepdesc {
    font-size: 12px;
  }
}

/* =====================================================
   ASSISTANT ÉVÉNEMENT — COMPACTAGE MOBILE
   Les champs gagnent de la place sans réduire leur confort tactile.
===================================================== */
@media (max-width: 760px) {
  body.event-create-page #wizForm input:not([type="hidden"]),
  body.event-create-page #wizForm select {
    min-height: 44px;
    height: 44px;
    padding: 8px 12px;
    border-radius: 14px;
  }

  body.event-create-page #wizForm textarea {
    min-height: 84px !important;
    padding: 9px 12px;
    border-radius: 14px;
  }

  body.event-create-page #wizForm label {
    margin-bottom: 4px;
  }

  body.event-create-page .grid2 {
    gap: 10px;
  }

  body.event-create-page .panel[data-step="1"] > div[style],
  body.event-create-page .panel[data-step="2"] .grid2 > div[style] {
    margin-top: 10px !important;
  }

  body.event-create-page .hint {
    line-height: 1.3;
  }

}

/* =====================================================
   LOCALISATION — FENÊTRE STRICTEMENT ENTRE HEADER ET NAV
   Cette fenêtre est indépendante de la carte du wizard : ses actions
   restent donc toujours atteignables, même avec Google Maps ouvert.
===================================================== */
@media (max-width: 760px) {
  body.event-create-page .map-popup {
    inset: auto;
    top: calc(var(--top-h) + 8px);
    right: 8px;
    bottom: calc(var(--app-nav-height) + var(--app-nav-bottom) + 8px);
    left: 8px;
    display: none;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: #1b1c1f;
    backdrop-filter: none;
    z-index: 1999;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .42);
  }

  body.event-create-page .map-popup.show {
    display: flex;
  }

  body.event-create-page .map-popup-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* La localisation est une étape distincte : l'étape 2 ne peut plus
     apparaître derrière elle, même si le navigateur applique du flou. */
  body.event-create-page.map-popup-open .wrap {
    visibility: hidden;
  }

  body.event-create-page .map-popup-head {
    flex: 0 0 auto;
    margin-bottom: 6px;
  }

  body.event-create-page .map-popup-head h2 {
    font-size: 19px;
    line-height: 1.1;
  }

  body.event-create-page .map-popup-head p {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.2;
  }

  body.event-create-page .popup-grid {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 5px 8px;
    margin-bottom: 5px;
  }

  body.event-create-page .popup-field label {
    margin-bottom: 2px;
    font-size: 11px;
  }

  body.event-create-page .popup-field input {
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 13px;
  }

  body.event-create-page .popup-side {
    gap: 3px;
  }

  body.event-create-page .popup-side small {
    font-size: 11px;
  }

  body.event-create-page .popup-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  body.event-create-page .popup-map {
    flex: 1 1 auto;
    height: auto;
    min-height: 140px;
    max-height: none;
    margin: 4px 0;
  }

  body.event-create-page .popup-status {
    flex: 0 0 20px;
    height: 20px;
    font-size: 12px;
  }

  body.event-create-page .popup-actions {
    flex: 0 0 auto;
    gap: 8px;
    margin-top: 4px;
  }

  body.event-create-page .popup-actions button {
    height: 40px;
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
  }

  html[data-theme="light"] body.event-create-page .map-popup {
    background: #fffdf8;
    border-color: rgba(42, 35, 27, .12);
    box-shadow: 0 18px 42px rgba(78, 56, 31, .22);
  }
}

@media (max-height: 650px) and (max-width: 760px) {
  body.event-create-page .map-popup {
    top: calc(var(--top-h) + 5px);
    bottom: calc(var(--app-nav-height) + var(--app-nav-bottom) + 5px);
  }

  body.event-create-page .map-popup-card {
    padding: 9px;
  }

  body.event-create-page .map-popup-head {
    margin-bottom: 4px;
  }

  body.event-create-page .map-popup-head p {
    display: none;
  }

  body.event-create-page .popup-map {
    min-height: 110px;
  }

  body.event-create-page .popup-actions button {
    height: 36px;
    min-height: 36px;
  }
}

/* =====================================================
   AUTH — CENTRAGE VERTICAL STRICT DE LA MARQUE
===================================================== */
body.auth-home-v2 .app-top {
  display: flex !important;
  align-items: center !important;
  height: var(--top-h) !important;
  padding: 0 22px !important;
}

body.auth-home-v2 .app-top__left,
body.auth-home-v2 .app-top__right {
  align-items: center;
  height: 100%;
  margin: 0;
}

body.auth-home-v2 .mitala-logo,
body.auth-home-v2 .brand {
  align-self: center;
  margin-block: 0;
}

@media (max-width: 760px) {
  body.auth-home-v2 .app-top {
    padding-inline: 22px !important;
  }
}

/* =====================================================
   LISTE ÉVÉNEMENTS — MODIFIER, SUPPRIMER, CONFIRMER
===================================================== */
body.events-page .event-card-shell {
  position: relative;
  width: calc(100% + 16px);
  margin-left: -8px;
}

body.events-page .event-card-shell .event-open-form {
  width: 100%;
  margin-left: 0;
}

body.events-page .event-card-actions {
  position: absolute;
  z-index: 3;
  right: 9px;
  bottom: 8px;
  display: flex;
  gap: 5px;
}

body.events-page .event-card-actions form {
  margin: 0;
}

body.events-page .event-card-action {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  color: rgba(255,255,255,.82);
  background: rgba(10,11,14,.72);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  cursor: pointer;
}

body.events-page .event-card-action--edit:hover,
body.events-page .event-card-action--edit:focus-visible {
  outline: none;
  color: #1b1409;
  border-color: var(--gold);
  background: var(--gold);
}

body.events-page .event-card-action--delete:hover,
body.events-page .event-card-action--delete:focus-visible {
  outline: none;
  color: #fff;
  border-color: #ef6a61;
  background: #c93e37;
}

html[data-theme="light"] body.events-page .event-card-action {
  color: #33291e;
  border-color: rgba(64,45,24,.16);
  background: rgba(255,255,255,.94);
}

html[data-theme="light"] body.events-page .event-card-action--delete {
  color: #b63832;
}

body.has-event-delete-modal {
  overflow: hidden;
}

.event-delete-modal {
  position: fixed;
  z-index: 1500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.event-delete-modal[hidden] {
  display: none;
}

.event-delete-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(3,5,9,.7);
  backdrop-filter: blur(9px);
}

.event-delete-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(390px,100%);
  padding: 22px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  color: var(--txt);
  background: rgba(24,25,30,.97);
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  text-align: center;
}

.event-delete-modal__icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 50%;
  color: #ff8a80;
  background: rgba(218,61,53,.14);
  font-size: 20px;
}

.event-delete-modal__dialog h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.event-delete-modal__dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.event-delete-modal__dialog p strong {
  color: var(--txt);
}

.event-delete-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
  margin-top: 20px;
}

.event-delete-modal__actions form {
  margin: 0;
}

.event-delete-modal__actions button {
  width: 100%;
  min-height: 43px;
  padding: 8px 10px;
  border-radius: 9px;
  font-weight: 800;
  cursor: pointer;
}

.event-delete-cancel {
  border: 1px solid var(--line);
  color: var(--txt);
  background: rgba(255,255,255,.06);
}

.event-delete-confirm {
  border: 1px solid #d94c43;
  color: #fff;
  background: #bd342d;
}

html[data-theme="light"] .event-delete-modal__backdrop {
  background: rgba(43,35,25,.46);
}

html[data-theme="light"] .event-delete-modal__dialog {
  border-color: rgba(71,49,25,.16);
  background: rgba(255,253,248,.98);
  box-shadow: 0 24px 70px rgba(57,39,20,.28);
}

/* =====================================================
   ÉTAPE 4 — TROISIÈME ZONE DRESS CODE
===================================================== */
body.event-create-page .dress-code-card {
  grid-template-rows: auto minmax(0,1fr);
}

body.event-create-page .dress-code-editor {
  display: grid;
  align-content: center;
  gap: 14px;
  width: min(520px,100%);
  height: 100%;
  margin: auto;
}

body.event-create-page .dress-code-toggle {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  cursor: pointer;
}

body.event-create-page .dress-code-toggle > span:first-child {
  display: grid;
  gap: 3px;
}

body.event-create-page .dress-code-toggle b {
  color: var(--txt);
  font-size: 13px;
}

body.event-create-page .dress-code-toggle small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

body.event-create-page .dress-code-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.event-create-page .dress-code-toggle__control {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  transition: background .18s ease;
}

body.event-create-page .dress-code-toggle__control::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}

body.event-create-page .dress-code-toggle input:checked + .dress-code-toggle__control {
  background: var(--gold);
}

body.event-create-page .dress-code-toggle input:checked + .dress-code-toggle__control::after {
  transform: translateX(18px);
}

body.event-create-page .dress-code-toggle:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

body.event-create-page .dress-code-field {
  display: grid;
  gap: 5px;
  transition: opacity .18s ease;
}

body.event-create-page .dress-code-field.is-disabled {
  opacity: .42;
}

body.event-create-page .dress-code-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid rgba(246,196,84,.28);
  border-radius: 9px;
  color: var(--txt);
  background: linear-gradient(135deg,rgba(246,196,84,.12),rgba(255,255,255,.035));
}

body.event-create-page .dress-code-preview > i {
  color: var(--gold);
  font-size: 26px;
}

body.event-create-page .dress-code-preview span {
  display: grid;
  gap: 3px;
}

body.event-create-page .dress-code-preview small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

body.event-create-page .dress-code-preview strong {
  font-family: "Cormorant Garamond",serif;
  font-size: 20px;
}

html[data-theme="light"] body.event-create-page .dress-code-toggle,
html[data-theme="light"] body.event-create-page .dress-code-preview {
  background: rgba(255,255,255,.82);
}

@media (max-height: 700px) and (max-width: 760px) {
  body.event-create-page .dress-code-editor {
    gap: 9px;
  }
  body.event-create-page .dress-code-toggle,
  body.event-create-page .dress-code-preview {
    padding: 9px 11px;
  }
  body.event-create-page .dress-code-preview {
    min-height: 60px;
  }
}

/* =====================================================
   WIZARD ÉVÉNEMENT — CINQ ÉTAPES HARMONISÉES
===================================================== */
body.event-create-page .event-essential-fields,
body.event-create-page .event-location-fields,
body.event-create-page .wizard-content-fields {
  display: grid;
  gap: 12px;
}

body.event-create-page .event-essential-fields,
body.event-create-page .event-location-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.event-create-page .wizard-content-fields {
  max-width: 680px;
}

.event-date-field__android-placeholder {
  display: none;
}

/* Deux préférences, une seule ligne de choix sur desktop comme sur mobile. */
body.event-create-page .invitation-preferences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.event-create-page .invitation-preferences > div {
  min-width: 0;
}

body.event-create-page .wedding-first-names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.event-create-page .wedding-first-names[hidden] {
  display: none;
}

body.event-create-page .wedding-first-names > div {
  min-width: 0;
}

body.event-create-page .field-optional {
  color: var(--muted);
  font-size: .9em;
  font-weight: 500;
}

body.event-create-page .invitation-preference-hint {
  margin: -3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

body.event-create-page .invitation-preference-hint.is-mitala::before {
  content: "Design MITALA · ";
  color: var(--gold);
  font-weight: 800;
}

body.event-create-page .invitation-design-panel {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding: 13px;
  border: 1px solid rgba(246, 196, 84, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

body.event-create-page .invitation-design-panel[hidden] {
  display: none;
}

body.event-create-page .invitation-design-panel__head {
  display: grid;
  gap: 3px;
}

body.event-create-page .invitation-design-panel__head strong {
  font-size: 13px;
}

body.event-create-page .invitation-design-panel__head span,
body.event-create-page .invitation-design-panel__note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

body.event-create-page .invitation-design-panel__note {
  margin: 0;
}

body.event-create-page .invitation-design-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.event-create-page .invitation-design-options > div {
  min-width: 0;
}

body.event-create-page .invitation-design-options label {
  margin-bottom: 5px;
  font-size: 12px;
}

body.event-create-page .invitation-design-options input[type="file"] {
  width: 100%;
  padding: 8px;
  font-size: 11px;
}

/* Composition MITALA : la photo est recadrée au centre de la zone intérieure
   de la frame, avec une galerie distincte pour chaque type d'événement. */
body.event-create-page .mitala-hero-composer {
  display: grid;
  gap: 12px;
  max-width: 680px;
  padding: 13px;
  border: 1px solid rgba(246, 196, 84, .28);
  border-radius: 12px;
  background: rgba(246, 196, 84, .045);
}

body.event-create-page .mitala-hero-composer[hidden] {
  display: none;
}

body.event-create-page .mitala-hero-composer__head {
  display: grid;
  gap: 3px;
}

body.event-create-page .mitala-hero-composer__head strong,
body.event-create-page .mitala-frame-gallery__head strong {
  font-size: 13px;
}

body.event-create-page .mitala-hero-composer__head span,
body.event-create-page .mitala-frame-gallery__head span,
body.event-create-page .mitala-frame-gallery__empty,
body.event-create-page .mitala-frame-live-preview > p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

body.event-create-page .mitala-hero-composer__preview-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.event-create-page .mitala-hero-source,
body.event-create-page .mitala-frame-live-preview {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

body.event-create-page .mitala-hero-source label,
body.event-create-page .mitala-frame-live-preview > span {
  min-height: 17px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

body.event-create-page .mitala-hero-source__image,
body.event-create-page .mitala-frame-live-preview {
  min-height: 194px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .14);
}

body.event-create-page .mitala-hero-source__image {
  display: grid;
  place-items: center;
  margin-top: 0;
}

body.event-create-page .mitala-hero-source__image img {
  width: 100%;
  height: 180px;
  max-width: none;
  border: 0;
  border-radius: 7px;
  object-fit: cover;
}

body.event-create-page .mitala-frame-live-preview {
  grid-template-rows: auto minmax(0, 1fr);
  place-items: stretch;
}

body.event-create-page .mitala-frame-live-preview > p {
  display: grid;
  place-items: center;
  min-height: 148px;
  margin: 0;
  padding: 12px;
  text-align: center;
}

body.event-create-page .mitala-frame-live-preview canvas {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 180px;
  margin: auto;
  border-radius: 7px;
  background: rgba(0, 0, 0, .12);
}

body.event-create-page .mitala-frame-gallery {
  display: grid;
  gap: 8px;
}

body.event-create-page .mitala-frame-gallery__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

body.event-create-page .mitala-frame-gallery__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

body.event-create-page .mitala-frame-choice {
  display: grid;
  grid-template-rows: 76px auto;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

body.event-create-page .mitala-frame-choice:hover,
body.event-create-page .mitala-frame-choice:focus-visible {
  border-color: rgba(246, 196, 84, .7);
  outline: none;
  transform: translateY(-1px);
}

body.event-create-page .mitala-frame-choice.is-selected {
  border-color: var(--gold);
  background: rgba(246, 196, 84, .13);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(246, 196, 84, .16);
}

body.event-create-page .mitala-frame-choice img {
  width: 100%;
  height: 76px;
  border-radius: 5px;
  object-fit: contain;
  background: rgba(255, 255, 255, .88);
}

body.event-create-page .mitala-frame-choice span {
  overflow: hidden;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.event-create-page .mitala-frame-gallery__empty {
  margin: 0;
  padding: 9px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

body.event-create-page .sharing-image-field {
  display: grid;
  gap: 5px;
  max-width: 334px;
  margin-top: 12px;
}

body.event-create-page .review-intro {
  padding: 10px 12px;
  border: 1px solid rgba(246, 196, 84, .22);
  border-radius: 12px;
  background: rgba(246, 196, 84, .08);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

body.event-create-page .review-address-editor {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

body.event-create-page .review-address-editor label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
}

body.event-create-page .review-address-editor .hint {
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
}

body.event-create-page .review-assets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

body.event-create-page .review-asset {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

body.event-create-page .review-asset span {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

body.event-create-page .review-asset img {
  grid-column: 1;
  grid-row: 1;
  width: 52px;
  height: 52px;
  border-radius: 9px;
  object-fit: cover;
  background: rgba(255, 255, 255, .08);
}

@media (max-width: 760px) {
  body.event-create-page .event-essential-fields,
  body.event-create-page .event-location-fields,
  body.event-create-page .wizard-content-fields {
    gap: 8px;
  }

  body.event-create-page .invitation-preferences {
    gap: 8px;
  }

  body.event-create-page .wedding-first-names {
    gap: 8px;
  }

  body.event-create-page .invitation-preferences label {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.2;
  }

  body.event-create-page .invitation-design-panel {
    gap: 8px;
    padding: 10px;
  }

  body.event-create-page .invitation-design-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.event-create-page .mitala-hero-composer {
    gap: 9px;
    padding: 10px;
  }

  body.event-create-page .mitala-hero-composer__preview-pair {
    gap: 7px;
  }

  body.event-create-page .mitala-hero-source__image,
  body.event-create-page .mitala-frame-live-preview {
    min-height: 162px;
    padding: 5px;
    border-radius: 9px;
  }

  body.event-create-page .mitala-hero-source__image img {
    height: 148px;
  }

  body.event-create-page .mitala-frame-live-preview > p {
    min-height: 117px;
    padding: 7px;
    font-size: 10px;
  }

  body.event-create-page .mitala-frame-live-preview canvas {
    max-height: 148px;
  }

  body.event-create-page .mitala-frame-gallery__items {
    gap: 5px;
  }

  body.event-create-page .mitala-frame-choice {
    grid-template-rows: 62px auto;
    padding: 3px;
  }

  body.event-create-page .mitala-frame-choice img {
    height: 62px;
  }

  body.event-create-page .mitala-frame-choice span {
    font-size: 9px;
  }

  body.event-create-page .sharing-image-field {
    max-width: none;
    margin-top: 10px;
  }

  /* Sur Android uniquement, le libellé est superposé à l'unique input natif
     quand il est vide. Il n'existe ni seconde valeur, ni second champ. */
  body.event-create-page .event-date-field.uses-android-placeholder {
    position: relative;
  }

  body.event-create-page .event-date-field.uses-android-placeholder .event-date-field__android-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 48px 0 12px;
    pointer-events: none;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }

  body.event-create-page .event-date-field.uses-android-placeholder.has-value .event-date-field__android-placeholder {
    display: none;
  }

  body.event-create-page .event-essential-fields,
  body.event-create-page .event-location-fields {
    grid-template-columns: 1fr;
  }

  body.event-create-page .profile-banner {
    margin-bottom: 6px;
  }

  body.event-create-page .profile-user small {
    font-size: 11px;
  }

  body.event-create-page .profile-user strong,
  body.event-create-page .profile-user span {
    font-size: 14px;
    line-height: 1.25;
  }

  body.event-create-page .summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
  }

  body.event-create-page .sumCard {
    min-width: 0;
    padding: 8px;
    border-radius: 11px;
  }

  body.event-create-page .sumK {
    font-size: 10px;
    line-height: 1.15;
  }

  body.event-create-page .sumV {
    margin-top: 3px;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
  }

  body.event-create-page .review-intro {
    padding: 8px 10px;
    font-size: 11px;
  }

  body.event-create-page .review-address-editor {
    gap: 4px;
    margin-top: 8px;
    padding: 8px 10px;
  }

  body.event-create-page .review-assets {
    gap: 7px;
    margin-top: 8px;
  }

  body.event-create-page .review-asset {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
  }

  body.event-create-page .review-asset img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
  }

  body.event-create-page .review-asset span {
    font-size: 10px;
  }
}

/* Proposition PWA : discrète, déclenchée seulement avant la première connexion. */
body.auth-home-v2 .pwa-welcome-prompt {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

body.auth-home-v2 .pwa-welcome-prompt__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, .56);
  backdrop-filter: blur(5px);
}

body.auth-home-v2 .pwa-welcome-prompt__panel {
  position: relative;
  width: min(100%, 360px);
  padding: 26px 24px 22px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 24px;
  background: rgba(255, 253, 248, .98);
  color: #111216;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
  text-align: center;
}

body.auth-home-v2 .pwa-welcome-prompt__icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 auto 13px;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff9800, #ffbd59);
  color: #19191b;
  font-size: 19px;
}

body.auth-home-v2 .pwa-welcome-prompt__icon--success {
  background: linear-gradient(135deg, #20bb78, #65d69c);
}

body.auth-home-v2 .pwa-welcome-prompt__spinner {
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto 13px;
  border: 4px solid rgba(17, 18, 22, .12);
  border-top-color: #f39a05;
  border-radius: 50%;
  animation: pwa-welcome-spin .8s linear infinite;
}

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

body.auth-home-v2 .pwa-welcome-prompt h2 {
  margin: 0;
  color: #111216;
  font-family: Inter, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.22;
}

body.auth-home-v2 .pwa-welcome-prompt p {
  margin: 10px auto 20px;
  color: rgba(17, 18, 22, .67);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

body.auth-home-v2 .pwa-welcome-prompt__notice {
  margin: -8px auto 16px;
  color: #9a5a00;
  font-size: 12px;
  font-weight: 700;
}

body.auth-home-v2 .pwa-welcome-prompt__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.auth-home-v2 .pwa-welcome-prompt__actions--single {
  grid-template-columns: minmax(0, 1fr);
}

body.auth-home-v2 .pwa-welcome-prompt__actions button,
body.auth-home-v2 .pwa-welcome-prompt__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  border-radius: 13px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

body.auth-home-v2 .pwa-welcome-prompt__open {
  border: 1px solid #f2a11a;
  background: linear-gradient(135deg, #ff9800, #ffbd59);
  color: #111216;
  box-shadow: 0 8px 20px rgba(255, 152, 0, .22);
  text-decoration: none;
}

body.auth-home-v2 .pwa-welcome-prompt__later {
  border: 1px solid rgba(17, 18, 22, .13);
  background: #fff;
  color: #34363b;
}

body.auth-home-v2 .pwa-welcome-prompt__add {
  border: 1px solid #f2a11a;
  background: linear-gradient(135deg, #ff9800, #ffbd59);
  color: #111216;
  box-shadow: 0 8px 20px rgba(255, 152, 0, .22);
}

body.auth-home-v2 .pwa-welcome-prompt__actions button:focus-visible {
  outline: 3px solid rgba(17, 18, 22, .42);
  outline-offset: 2px;
}

body.auth-home-v2 .pwa-welcome-prompt.is-busy .pwa-welcome-prompt__panel {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.auth-home-v2 .pwa-welcome-prompt__spinner {
    animation-duration: 1.8s;
  }
}

/* ===========================
   NOTIFICATIONS
=========================== */
.notifications-shell {
  display: grid;
  gap: 14px;
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 6px 0 calc(var(--nav-h) + 28px);
}

.notifications-list {
  display: grid;
  gap: 14px;
}

.notifications-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 4px 4px;
}

.notifications-eyebrow {
  margin: 0 0 5px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.notifications-header h1 {
  margin: 0;
  color: var(--txt);
  font-size: clamp(25px, 7vw, 34px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.notifications-intro {
  max-width: 460px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.notifications-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 48px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(246,196,84,.42);
  border-radius: 14px;
  color: var(--gold);
  background: rgba(246,196,84,.10);
  font-size: 14px;
  font-weight: 850;
}

.notifications-count i {
  font-size: 15px;
}

.notification-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--card0), var(--card1));
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.notification-card__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: var(--gold);
  background: rgba(246,196,84,.13);
}

.notification-card--pending .notification-card__icon {
  color: #ffca5c;
  background: rgba(246,196,84,.15);
}

.notification-card--warning .notification-card__icon {
  color: #ff9b87;
  background: rgba(255,122,99,.14);
}

.notification-card--event .notification-card__icon {
  color: #85d9f4;
  background: rgba(89,194,231,.14);
}

.notification-card__content {
  min-width: 0;
}

.notification-card__topline {
  display: flex;
  align-items: center;
  min-height: 17px;
}

.notification-card__meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .015em;
}

.notification-card h2 {
  margin: 2px 0 5px;
  color: var(--txt);
  font-size: 16px;
  line-height: 1.25;
}

.notification-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.48;
}

.notification-card__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.notification-card__action:hover,
.notification-card__action:focus-visible {
  text-decoration: underline;
}

.notification-card__action:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.notifications-empty {
  padding: 34px 22px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  text-align: center;
  background: var(--card1);
}

.notifications-empty__icon {
  display: grid;
  width: 50px;
  height: 50px;
  margin: 0 auto 13px;
  place-items: center;
  border-radius: 16px;
  color: var(--gold);
  background: rgba(246,196,84,.13);
  font-size: 20px;
}

.notifications-empty h2 {
  margin: 0;
  color: var(--txt);
  font-size: 18px;
}

.notifications-empty p {
  max-width: 380px;
  margin: 8px auto 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.notifications-empty a {
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
}

.notifications-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
}

.notifications-note i {
  margin-top: 2px;
  color: var(--gold);
}

.notifications-note p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 420px) {
  .notifications-header {
    gap: 10px;
  }

  .notifications-count {
    min-width: 42px;
    padding: 0 10px;
  }

  .notification-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    padding: 13px;
  }

  .notification-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
}

@media (max-width: 480px) {
  body.event-create-page .invitation-design-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =====================================================
   ÉTAPE 4 — DEUX CADRES D’IMAGES ET GALERIE MODALE
===================================================== */
body.event-create-page .event-image-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 780px;
}

body.event-create-page .event-media-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 11px;
  border: 1px solid rgba(246, 196, 84, .24);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

body.event-create-page .event-media-card[hidden] {
  display: none;
}

body.event-create-page .event-media-card__head {
  display: grid;
  gap: 1px;
}

body.event-create-page .event-media-card__head strong {
  color: var(--text);
  font-size: 13px;
}

body.event-create-page .event-media-card__head span {
  color: var(--muted);
  font-size: 11px;
}

body.event-create-page .event-media-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

body.event-create-page .event-media-surface {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 334px;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 9px;
  background: rgba(0, 0, 0, .24);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

body.event-create-page .event-media-surface:hover,
body.event-create-page .event-media-surface:focus-within {
  border-color: var(--gold);
  background: rgba(246, 196, 84, .06);
}

body.event-create-page .event-media-surface img,
body.event-create-page .event-media-surface canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.event-create-page .event-media-surface [hidden] {
  display: none !important;
}

body.event-create-page .event-media-surface--hero img,
body.event-create-page .event-media-surface--hero canvas {
  object-fit: contain;
}

body.event-create-page .event-media-surface--share {
  min-height: 0;
  aspect-ratio: 16 / 9;
}

body.event-create-page .event-media-surface--share img {
  object-fit: cover;
}

body.event-create-page .event-media-surface__placeholder {
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  max-width: 230px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

body.event-create-page .event-media-surface__placeholder i {
  color: var(--gold);
  font-size: 22px;
}

body.event-create-page .event-media-surface__placeholder b {
  color: var(--text);
  font-size: 13px;
}

body.event-create-page .event-media-surface__placeholder small {
  font-size: 10px;
  line-height: 1.35;
}

body.event-create-page .event-media-link {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

body.event-create-page .event-media-link:hover,
body.event-create-page .event-media-link:focus-visible {
  color: #ffd66c;
  outline: none;
  text-decoration: underline;
}

body.event-create-page .mitala-hero-composer[hidden] + .sharing-image-field {
  grid-column: 1 / -1;
  max-width: 680px;
}

body.event-create-page .sharing-image-field {
  max-width: none;
  margin-top: 0;
}

body.event-create-page .mitala-frame-modal[hidden] {
  display: none;
}

body.event-create-page .mitala-frame-modal {
  position: fixed;
  z-index: 1000;
  top: calc(var(--top-h) + 6px);
  right: 6px;
  bottom: calc(var(--app-nav-height) + var(--app-nav-bottom) + 6px);
  left: 6px;
  display: grid;
  place-items: stretch center;
  padding: 0;
}

body.event-create-page .mitala-frame-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 11, .72);
  backdrop-filter: blur(7px);
}

body.event-create-page .mitala-frame-modal__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(780px, 100%);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .025) 42%),
    rgba(20, 20, 25, .76);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .52);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
}

body.event-create-page .mitala-frame-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(18, 18, 23, .42);
  backdrop-filter: blur(18px);
}

body.event-create-page .mitala-frame-modal__head > div {
  display: grid;
  gap: 2px;
}

body.event-create-page .mitala-frame-modal__head strong {
  color: var(--text);
  font-size: 16px;
}

body.event-create-page .mitala-frame-modal__head span {
  color: var(--muted);
  font-size: 12px;
}

body.event-create-page .mitala-frame-modal__close {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  cursor: pointer;
}

body.event-create-page .mitala-frame-modal__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 13px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(246, 196, 84, .48) transparent;
}

body.event-create-page .mitala-frame-modal__footer {
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(18, 18, 23, .52);
  backdrop-filter: blur(18px);
}

body.event-create-page .mitala-frame-modal__apply {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 213, 108, .72);
  border-radius: 9px;
  background: linear-gradient(135deg, #ffad16, #ffc658);
  color: #15110a;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(255, 171, 22, .2);
}

body.event-create-page .mitala-frame-modal__apply:disabled {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .38);
  cursor: not-allowed;
  box-shadow: none;
}

body.event-create-page .mitala-frame-modal .mitala-frame-gallery__items {
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px;
}

body.event-create-page .mitala-frame-modal .mitala-frame-choice {
  position: relative;
  grid-template-rows: 132px auto;
  gap: 5px;
  padding: 5px;
}

body.event-create-page .mitala-frame-modal .mitala-frame-choice img {
  height: 132px;
}

body.event-create-page .mitala-frame-modal .mitala-frame-choice.is-selected::after {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  content: "✓";
  background: var(--gold);
  color: #17120a;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}

body.event-create-page.has-mitala-frame-modal {
  overflow: hidden;
}

body.event-create-page .event-create-back-guard {
  position: fixed;
  left: 50%;
  bottom: calc(var(--app-nav-height) + var(--app-nav-bottom) + 16px);
  z-index: 1400;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border: 1px solid rgba(255, 183, 61, .46);
  border-radius: 12px;
  color: #fff7e8;
  background: rgba(18, 18, 20, .88);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .36);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

body.event-create-page .event-create-back-guard.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (max-width: 660px) {
  body.event-create-page .event-image-upload-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body.event-create-page .event-media-card {
    padding: 9px;
  }

  body.event-create-page .event-media-surface {
    min-height: 286px;
  }

  body.event-create-page .event-media-surface--share {
    min-height: 0;
  }

  body.event-create-page .mitala-frame-modal {
    top: calc(var(--top-h) + 5px);
    right: 5px;
    bottom: calc(var(--app-nav-height) + var(--app-nav-bottom) + 5px);
    left: 5px;
    padding: 0;
  }

  body.event-create-page .mitala-frame-modal__dialog {
    max-height: none;
    border-radius: 15px;
  }

  body.event-create-page .mitala-frame-modal .mitala-frame-gallery__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  body.event-create-page .mitala-frame-modal .mitala-frame-choice {
    grid-template-rows: 104px auto;
  }

  body.event-create-page .mitala-frame-modal .mitala-frame-choice img {
    height: 104px;
  }
}

/* =====================================================
   ÉTAPE 4 — COMPOSITEUR HERO PLEINE HAUTEUR
   Les deux zones occupent exactement le viewport interne de la carte.
===================================================== */
body.event-create-page .event-hero-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(126px, 31%);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

body.event-create-page .mitala-hero-composer {
  max-width: none;
}

body.event-create-page .event-hero-controls {
  display: grid;
  grid-template-rows: repeat(2, minmax(44px, auto)) minmax(48px, auto) minmax(92px, 1fr);
  gap: 8px;
  min-width: 0;
}

body.event-create-page .event-hero-controls > button {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--txt);
  background: rgba(255,255,255,.055);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

body.event-create-page .event-hero-controls > button i {
  flex: 0 0 17px;
  color: var(--gold);
  font-size: 14px;
  text-align: center;
}

body.event-create-page .event-hero-controls > button:hover,
body.event-create-page .event-hero-controls > button:focus-visible {
  border-color: rgba(246,196,84,.72);
  outline: none;
  background: rgba(246,196,84,.1);
  transform: translateY(-1px);
}

body.event-create-page .event-hero-controls button:disabled {
  color: var(--muted);
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

body.event-create-page .hero-zoom-segmented {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
}

body.event-create-page .hero-zoom-segmented button {
  border: 0;
  color: var(--gold);
  background: transparent;
  font-size: 21px;
  font-weight: 800;
  cursor: pointer;
}

body.event-create-page .hero-zoom-segmented button:first-child { border-right: 1px solid var(--line); }
body.event-create-page .hero-zoom-segmented button:last-child { border-left: 1px solid var(--line); }

body.event-create-page .event-hero-controls output {
  display: flex;
  min-height: 18px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

body.event-create-page .event-hero-controls output span { color: var(--txt); font-size: 10px; }
body.event-create-page .event-hero-controls output small { color: var(--muted); font-size: 9px; }

body.event-create-page .hero-position-pad {
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template: repeat(3, 28px) / repeat(3, 28px);
  width: 84px;
  height: 84px;
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
  background: linear-gradient(145deg, rgba(246,196,84,.22), rgba(255,255,255,.04));
  border: 1px solid rgba(246,196,84,.5);
}

body.event-create-page .hero-position-pad button,
body.event-create-page .hero-position-pad span {
  display: grid;
  place-items: center;
  border: 0;
  color: var(--gold);
  background: transparent;
}
body.event-create-page .hero-position-pad button { cursor: pointer; font-size: 14px; }
body.event-create-page .hero-position-pad button:hover,
body.event-create-page .hero-position-pad button:focus-visible { color: #fff; background: rgba(246,196,84,.2); outline: none; }
body.event-create-page .hero-position-pad__up { grid-area: 1 / 2; }
body.event-create-page .hero-position-pad__left { grid-area: 2 / 1; }
body.event-create-page .hero-position-pad__center { grid-area: 2 / 2; font-size: 10px; opacity: .72; }
body.event-create-page .hero-position-pad__right { grid-area: 2 / 3; }
body.event-create-page .hero-position-pad__down { grid-area: 3 / 2; }

body.event-create-page .event-media-surface--hero {
  height: 100%;
  min-height: 0;
  padding: 6px;
  appearance: none;
  color: inherit;
  cursor: zoom-in;
  margin-top:6px;
  height:calc(100% - 6px);
}

body.has-hero-fullscreen { overflow: hidden; }
body.event-create-page .hero-fullscreen-viewer {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  box-sizing: border-box;
  padding: max(14px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: rgba(5,5,7,.96);
}
body.event-create-page .hero-fullscreen-viewer[hidden] { display: none; }
body.event-create-page .hero-fullscreen-viewer__close {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
  overflow: hidden;
}
body.event-create-page .hero-fullscreen-viewer img,
body.event-create-page .hero-fullscreen-viewer canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
body.event-create-page .hero-fullscreen-viewer [hidden] { display: none; }
body.event-create-page .hero-fullscreen-viewer__watermark {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: max-content;
  transform: translate(-50%, -50%) rotate(-28deg);
  color: rgba(255,255,255,.16);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 11vw, 96px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .18em;
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
body.event-create-page .hero-fullscreen-viewer__watermark--1 { top: 18%; }
body.event-create-page .hero-fullscreen-viewer__watermark--2 { top: 39%; }
body.event-create-page .hero-fullscreen-viewer__watermark--3 { top: 60%; }
body.event-create-page .hero-fullscreen-viewer__watermark--4 { top: 81%; }
body.event-create-page .hero-fullscreen-viewer__hint {
  position: absolute;
  z-index: 3;
  right: 50%;
  bottom: 12px;
  transform: translateX(50%);
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.62);
  font-size: 11px;
  white-space: nowrap;
}

/* Le canvas et la photo gardent leur ratio intrinsèque : aucune dimension
   CSS ne peut les étirer pour remplir artificiellement la zone. */
body.event-create-page .event-media-surface--hero img,
body.event-create-page .event-media-surface--hero canvas {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 4px);
  max-height: calc(100% - 4px);
  object-fit: contain;
}

body.event-create-page .event-media-surface--hero canvas {
  width: auto;
  height: auto;
}

body.event-create-page.event-create-step-4.event-create-mode-mitala .panel[data-step="4"] {
  height: 100%;
  min-height: 0;
}

body.event-create-page.event-create-step-4.event-create-mode-mitala .event-image-upload-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 100%;
  gap: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(246,196,84,.48) transparent;
}

body.event-create-page.event-create-step-4.event-create-mode-mitala .event-media-card {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

body.event-create-page.event-create-step-4.event-create-mode-mitala .sharing-image-field {
  margin-top: 0;
}

body.event-create-page.event-create-step-4.event-create-mode-mitala .sharing-image-field .event-media-surface--share {
  place-self: center stretch;
  width: 100%;
  max-height: 100%;
}

/* Palette explicite des surfaces et des modales. */
html[data-theme="dark"] body.event-create-page .event-media-card {
  border-color: rgba(246,196,84,.25);
  background: rgba(24,25,30,.82);
}

html[data-theme="light"] body.event-create-page .event-media-card {
  border-color: rgba(166,111,19,.22);
  background: rgba(255,255,255,.84);
}

html[data-theme="light"] body.event-create-page .event-media-surface {
  border-color: rgba(50,42,31,.22);
  background: rgba(34,28,20,.08);
}

html[data-theme="light"] body.event-create-page .event-hero-controls > button,
html[data-theme="light"] body.event-create-page .hero-zoom-segmented {
  border-color: rgba(50,42,31,.16);
  color: var(--txt);
  background: rgba(255,255,255,.92);
  box-shadow: 0 5px 14px rgba(72,52,25,.07);
}

body.event-create-page .mitala-frame-modal__dialog,
body.event-create-page .mitala-frame-modal__head strong,
body.event-create-page .mitala-frame-modal__close,
body.event-create-page .mitala-frame-modal .mitala-frame-choice.is-selected {
  color: var(--txt);
}

html[data-theme="dark"] body.event-create-page .mitala-frame-modal__dialog {
  border-color: rgba(255,255,255,.18);
  background:
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.025) 42%),
    rgba(18,19,24,.9);
}

html[data-theme="light"] body.event-create-page .mitala-frame-modal__backdrop {
  background: rgba(43,35,25,.42);
}

html[data-theme="light"] body.event-create-page .mitala-frame-modal__dialog {
  border-color: rgba(62,49,31,.18);
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,250,241,.78)),
    rgba(255,253,248,.9);
  box-shadow: 0 24px 60px rgba(69,50,27,.25);
}

html[data-theme="light"] body.event-create-page .mitala-frame-modal__head,
html[data-theme="light"] body.event-create-page .mitala-frame-modal__footer {
  border-color: rgba(62,49,31,.13);
  background: rgba(255,253,248,.74);
}

html[data-theme="light"] body.event-create-page .mitala-frame-modal__close,
html[data-theme="light"] body.event-create-page .mitala-frame-modal .mitala-frame-choice {
  border-color: rgba(62,49,31,.15);
  color: var(--txt);
  background: rgba(255,255,255,.72);
}

html[data-theme="light"] body.event-create-page .mitala-frame-modal__apply:disabled {
  border-color: rgba(62,49,31,.12);
  color: rgba(16,17,20,.42);
  background: rgba(16,17,20,.07);
}

/* Le dialogue d'installation suit lui aussi le thème mémorisé. */
html[data-theme="dark"] body.auth-home-v2 .pwa-welcome-prompt__panel {
  border-color: rgba(255,255,255,.18);
  color: var(--txt);
  background: rgba(20,21,26,.96);
  box-shadow: 0 24px 60px rgba(0,0,0,.52);
}

html[data-theme="dark"] body.auth-home-v2 .pwa-welcome-prompt h2 {
  color: var(--txt);
}

html[data-theme="dark"] body.auth-home-v2 .pwa-welcome-prompt p {
  color: var(--muted);
}

html[data-theme="dark"] body.auth-home-v2 .pwa-welcome-prompt__later {
  border-color: rgba(255,255,255,.16);
  color: var(--txt);
  background: rgba(255,255,255,.07);
}

html[data-theme="dark"] body.event-create-page .map-popup-card {
  color: var(--txt);
  background: rgba(24,25,30,.98);
}

html[data-theme="dark"] .profile-modal {
  color: var(--txt);
  background: rgba(24,25,30,.96);
}

/* =========================================================
   Échelle mobile commune — composants applicatifs
   ========================================================= */
:root {
  --mobile-control-height: 42px;
  --mobile-button-height: 42px;
  --mobile-control-radius: 11px;
}

.app-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.app-main select {
  min-height: var(--mobile-control-height);
  border-radius: var(--mobile-control-radius);
}

.app-main textarea {
  border-radius: var(--mobile-control-radius);
}

.app-main .btn,
.app-main button[type="submit"]:not(.guest-more):not(.x),
.app-main a.primary {
  min-height: var(--mobile-button-height);
  border-radius: var(--mobile-control-radius);
}

/* Confirmation de l’essai : hiérarchie compacte d’application mobile. */
body.free-trial-ready-page .app-main,
body.free-trial-page:has(.free-trial-ready) .app-main {
  display: grid;
  place-items: center;
}

.free-trial-ready {
  width: min(100%, 430px) !important;
  padding: 18px 16px 15px !important;
  border-radius: 22px !important;
}

.free-trial-ready .free-trial-success {
  width: 52px;
  height: 52px;
  margin: 0 auto 11px;
  font-size: 22px;
}

.free-trial-ready__heading {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.free-trial-ready .free-trial-kicker {
  display: block;
  width: 100%;
  color: #df7b00;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}

.free-trial-ready h1 {
  margin: 0;
  font-size: clamp(24px, 7vw, 30px);
  line-height: 1.05;
}

.free-trial-ready > p:not(.free-trial-consent) {
  max-width: 360px;
  margin: 14px auto 0;
  font-size: 12px;
  line-height: 1.42;
}

.free-trial-ready .free-trial-ready-actions {
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 18px 0 12px;
}

.free-trial-ready .free-trial-ready-actions a {
  min-height: 42px;
  border-radius: 11px;
  font-size: 12px;
}

.free-trial-ready .free-trial-secondary {
  border-color: transparent;
}

.free-trial-ready .free-trial-consent {
  max-width: 350px;
  margin: 0 auto;
  font-size: 9px;
  line-height: 1.4;
}

/* L’application de gestion est volontairement réservée aux petits écrans. */
.device-size-guard {
  display: none;
}

@media (min-width: 901px) {
  body.app {
    overflow: hidden !important;
    background: #111216 !important;
  }

  body.app > *:not(.device-size-guard) {
    display: none !important;
  }

  body.app > .device-size-guard {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 32px;
    color: #f8f6f1;
    background: radial-gradient(circle at 50% 35%, #302719 0, #17181d 42%, #0f1013 100%);
    text-align: center;
  }

  .device-size-guard__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 174, 45, .45);
    border-radius: 19px;
    color: #ffad32;
    background: rgba(255, 159, 19, .1);
    font-size: 27px;
  }

  .device-size-guard h1 {
    max-width: 520px;
    margin: 0;
    font: 700 34px/1.05 "Cormorant Garamond", serif;
  }

  .device-size-guard p {
    max-width: 410px;
    margin: 13px 0 0;
    color: rgba(248, 246, 241, .7);
    font-size: 13px;
    line-height: 1.55;
  }
}

html[data-theme="light"] .profile-overlay {
  background: rgba(43,35,25,.4);
}

@media (min-width: 761px) {
  body.event-create-page.event-create-step-4.event-create-mode-mitala .panel[data-step="4"] {
    height: clamp(520px, 66vh, 720px);
  }
}

@media (max-width: 760px) {
  body.event-create-page.event-create-step-4.event-create-mode-mitala .stage {
    overflow: hidden;
    padding-bottom: 0;
  }

  body.event-create-page .event-media-card {
    padding: 9px;
  }

  body.event-create-page .event-hero-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 31%);
    gap: 7px;
  }

  body.event-create-page .event-hero-controls {
    grid-template-rows: repeat(2, minmax(36px, auto)) minmax(42px, auto) minmax(86px, 1fr);
    gap: 5px;
  }

  body.event-create-page .event-hero-controls > button {
    min-height: 36px;
    gap: 5px;
    padding: 5px 7px;
    font-size: 9px;
  }

  body.event-create-page .event-hero-controls > button i {
    flex-basis: 14px;
    font-size: 12px;
  }
}

@media (max-height: 650px) and (max-width: 760px) {
  body.event-create-page .event-media-card__head span {
    display: none;
  }

  body.event-create-page .event-media-card {
    gap: 5px;
    padding: 7px;
  }
}

/* =====================================================
   STABILISATION MOBILE — CARTES, DRESS CODE ET NAV
===================================================== */

/* Une ligne basse dédiée aux actions, sans chevauchement date/heure. */
body.events-page .event-card-modern {
  height: 136px;
  min-height: 136px;
}

body.events-page .event-card-actions {
  right: 10px;
  bottom: 10px;
  gap: 6px;
}

body.events-page .event-card-action {
  width: 29px;
  height: 29px;
  min-height: 29px;
}

body.events-page .event-card-action--edit {
  width: auto;
  min-width: 58px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
}

/* Le défilement vertical en flex évite le recalcul instable des lignes
   CSS Grid en pourcentage observé dans Chrome Android. */
body.event-create-page.event-create-step-4.event-create-mode-mitala .event-image-upload-grid {
  display: flex;
  flex-direction: column;
  grid-auto-rows: unset;
}

body.event-create-page.event-create-step-4.event-create-mode-mitala .event-media-card {
  flex: 0 0 100%;
}

body.event-create-page .dress-code-card,
body.event-create-page .dress-code-editor {
  visibility: visible;
  opacity: 1;
}

body.event-create-page .dress-code-card {
  grid-template-rows: auto minmax(0, 1fr);
}

body.event-create-page .dress-code-mode {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
}

body.event-create-page .dress-code-mode > span {
  display: grid;
  gap: 3px;
}

body.event-create-page .dress-code-mode b {
  color: var(--txt);
  font-size: 13px;
}

body.event-create-page .dress-code-mode small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

body.event-create-page .dress-code-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  min-height: 38px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(0,0,0,.18);
}

body.event-create-page .dress-code-segmented button {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  appearance: none;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  opacity: 1;
  visibility: visible;
  cursor: pointer;
}

body.event-create-page .dress-code-segmented button.is-active {
  color: #17120a;
  background: var(--gold);
  box-shadow: 0 3px 10px rgba(246,196,84,.24);
}

body.event-create-page .dress-code-segmented button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

html[data-theme="light"] body.event-create-page .dress-code-mode {
  background: rgba(255,255,255,.82);
}

html[data-theme="light"] body.event-create-page .dress-code-segmented {
  background: rgba(41,33,24,.08);
}

/* Calque bas réellement fixe : aucune découpe basée sur 100dvh et aucun
   masque à recomposer pendant le scroll de la barre d’adresse Android. */
.app-scroll-fade {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--app-nav-bottom) + var(--app-nav-half-height) + 10px);
  clip-path: none;
  -webkit-clip-path: none;
  mask-image: none;
  -webkit-mask-image: none;
  background: linear-gradient(
    to bottom,
    rgba(7,9,12,0) 0,
    rgba(7,9,12,.97) calc(var(--app-nav-half-height) + 2px),
    #07090c 100%
  );
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  contain: strict;
}

html[data-theme="light"] .app-scroll-fade {
  background: linear-gradient(
    to bottom,
    rgba(76,69,64,0) 0,
    rgba(76,69,64,.97) calc(var(--app-nav-half-height) + 2px),
    #4c4540 100%
  );
}

/* =====================================================
   AJUSTEMENT COMPACT — CARTES ÉVÉNEMENTS ET DRESS CODE
===================================================== */
body.events-page .event-card-modern {
  height: 120px;
  min-height: 120px;
}

body.events-page .event-info {
  align-self: stretch;
  justify-content: center;
  padding: 31px 0 35px;
}

body.events-page .event-card-heading {
  padding: 0 !important;
}

body.events-page .event-card-title {
  font-size: 14px;
  line-height: 1.08;
}

body.events-page .event-meta-modern {
  gap: 5px;
  margin-top: 4px;
}

body.events-page .event-meta-row {
  gap: 3px;
  font-size: 11px;
}

body.events-page .event-meta-row i {
  font-size: 12px;
}

body.events-page .event-card-actions {
  bottom: 9px;
}

/* Corrections ciblées après l’harmonisation des contrôles. */
body.events-page .app-main .event-card-actions {
  right: 9px !important;
  bottom: 5px !important;
  align-items: center;
  gap: 5px !important;
}

body.events-page .app-main .event-card-actions form {
  display: flex;
  align-items: center;
}

body.events-page .app-main .event-card-action,
body.events-page .app-main button.event-card-action[type="submit"] {
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

body.events-page .app-main .event-card-action--edit,
body.events-page .app-main button.event-card-action--edit[type="submit"] {
  width: auto !important;
  min-width: 54px !important;
  padding-inline: 9px !important;
}

body.event-create-page.event-create-step-4 .event-hero-controls {
  padding-top: 6px !important;
}

@media (max-width: 760px) {
  body.event-create-page .dress-code-card {
    gap: 5px;
    padding: 7px;
  }

  body.event-create-page .dress-code-card .event-media-card__head {
    gap: 0;
  }

  body.event-create-page .dress-code-card .event-media-card__head strong {
    font-size: 12px;
    line-height: 1.1;
  }

  body.event-create-page .dress-code-card .event-media-card__head span {
    font-size: 9px;
    line-height: 1.15;
  }

  body.event-create-page .dress-code-editor {
    align-content: center;
    gap: 7px;
  }

  body.event-create-page .dress-code-mode {
    gap: 6px;
    padding: 7px 8px;
  }

  body.event-create-page .dress-code-mode b {
    font-size: 11px;
    line-height: 1.1;
  }

  body.event-create-page .dress-code-mode small {
    font-size: 8px;
    line-height: 1.15;
  }

  body.event-create-page .dress-code-segmented {
    min-height: 32px;
    padding: 2px;
  }

  body.event-create-page .dress-code-segmented button {
    min-height: 26px;
    padding: 4px 6px;
    font-size: 10px;
  }

  body.event-create-page .dress-code-field {
    gap: 3px;
  }

  body.event-create-page .dress-code-field > label {
    margin: 0;
    font-size: 10px;
    line-height: 1.1;
  }

  body.event-create-page .dress-code-field > input {
    height: 38px;
    min-height: 38px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 12px;
  }

  body.event-create-page .dress-code-preview {
    min-height: 50px;
    gap: 8px;
    padding: 7px 9px;
  }

  body.event-create-page .dress-code-preview > i {
    font-size: 20px;
  }

  body.event-create-page .dress-code-preview small {
    font-size: 8px;
  }

body.event-create-page .dress-code-preview strong {
    font-size: 16px;
    line-height: 1.05;
  }
}

/* =====================================================
   GOUTTIÈRE HORIZONTALE COMMUNE
   Référence : page de création d’événement (--page-px = 16px).
===================================================== */
body.app:not(.auth-home-v2):not(.event-dashboard-page) .app-main {
  padding-left: var(--page-px) !important;
  padding-right: var(--page-px) !important;
}

/* Évite de cumuler la gouttière de .app-main avec d’anciens paddings
   propres aux pages Événements et Packs. */
body.events-page .dashboard-modern {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body.events-page .dash-user h1 span {
  display: inline-block;
  margin-top: 2px;
}

body.events-page .event-card-shell {
  width: 100%;
  margin-left: 0;
}

.packages-modern {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Les destinations encore en préparation restent visibles sans être actives. */
.nav-modern .nav-item--disabled {
  cursor: default;
  opacity: .55;
  pointer-events: none;
}

.profile-camera:disabled,
.profile-item--disabled {
  cursor: default;
}

.profile-camera:disabled {
  opacity: .78;
}

.profile-item--disabled {
  user-select: none;
}

.profile-item--disabled:hover {
  background: transparent;
}

.profile-item--disabled i {
  opacity: .55;
}

/* La liste s'arrête près de la navigation, sans cumuler deux réserves basses. */
body.events-page .dashboard-modern {
  padding-bottom: 0;
}

body.events-page .app-main {
  padding-bottom: calc(var(--app-nav-height) + var(--app-nav-bottom) + 12px) !important;
}

body.events-page .event-status span.is-failed {
  color: #b82727;
  border-color: rgba(203, 47, 47, .28);
  background: rgba(255, 224, 224, .92);
}

html[data-theme="dark"] body.events-page .event-status span.is-failed {
  color: #ff9b9b;
  border-color: rgba(255, 105, 105, .28);
  background: rgba(105, 24, 31, .72);
}

/* Conditions d'utilisation */
.terms-page .app-main{padding-bottom:calc(var(--nav-h) + 28px)}
.terms-shell{width:min(100%,720px);margin:0 auto;padding:18px 14px 32px}
.terms-hero{padding:8px 4px 18px}
.terms-hero>span{color:var(--gold);font-size:10px;font-weight:850;letter-spacing:.17em}
.terms-hero h1{margin:6px 0 3px;color:var(--text);font-family:"Cormorant Garamond",serif;font-size:clamp(32px,8vw,46px);line-height:1}
.terms-hero p{margin:0;color:var(--muted);font-size:11px}
.terms-card{padding:20px;border:1px solid var(--line);border-radius:20px;color:var(--text);background:var(--card);box-shadow:0 18px 42px rgba(0,0,0,.12)}
.terms-intro{margin:0 0 18px;padding:13px 14px;border-radius:12px;background:rgba(255,159,19,.09);font-size:13px;font-weight:650;line-height:1.55}
.terms-card article{padding:15px 0;border-top:1px solid var(--line)}
.terms-card article:first-of-type{border-top:0}
.terms-card h2{margin:0 0 7px;color:var(--text);font-size:15px;line-height:1.25}
.terms-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.terms-card p+p{margin-top:8px}
.terms-card__retention{margin:5px -8px;padding:16px 12px!important;border:1px solid rgba(255,159,19,.24)!important;border-radius:14px;background:rgba(255,159,19,.065)}
html[data-theme="light"] .terms-card{background:#fffdfa;box-shadow:0 18px 42px rgba(78,59,33,.12)}
html[data-theme="light"] .terms-card__retention{background:#fff7e8}
@media(max-width:420px){.terms-shell{padding-inline:10px}.terms-card{padding:16px}.terms-card h2{font-size:14px}.terms-card p{font-size:11.5px}}