/* app.css — single-file custom utilities for Tailwind CDN + dynamic brand colors
   - No build step required
   - Uses CSS variables injected by PHP (branding settings)
   - Avoids transition: all
*/

:root{
  /* Dynamic brand colors (injected by PHP). Defaults match current DB values. */
  --color-primary: #7c3aed;   /* brand primary */
  --color-secondary: #f59e0b; /* brand secondary */
  --color-dark: #0f172a;      /* brand dark */

  /* Neutral system (premium “night bar” but readable in light mode) */
  --bg: #0b0f17;              /* app background (dark-first) */
  --bg-elev-1: rgba(255,255,255,.06);
  --bg-elev-2: rgba(255,255,255,.10);
  --surface: rgba(255,255,255,.08);
  --surface-strong: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --text-muted: rgba(255,255,255,.68);
  --text-faint: rgba(255,255,255,.52);
  --border: rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.18);

  /* Semantic */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #38bdf8;

  /* Focus ring uses brand primary but softened */
  --ring: color-mix(in srgb, var(--color-primary) 55%, white 45%);

  /* Radii + shadows */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 18px 60px rgba(0,0,0,.45);

  /* Spacing scale (8pt-ish) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* Typography */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-display: "Bodoni Moda", ui-serif, Georgia, serif;
  --font-ticket: "Anton", var(--font-display); /* accent typographique du hero d'accueil uniquement */

  /* iOS safe areas */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* Light mode (for browsers in light theme / admin desktop preference) */
[data-theme="light"]{
  --bg: #f7f7fb;
  --bg-elev-1: rgba(15,23,42,.04);
  --bg-elev-2: rgba(15,23,42,.06);
  --surface: rgba(255,255,255,.78);
  --surface-strong: rgba(255,255,255,.92);
  --text: rgba(15,23,42,.92);
  --text-muted: rgba(15,23,42,.68);
  --text-faint: rgba(15,23,42,.52);
  --border: rgba(15,23,42,.10);
  --border-strong: rgba(15,23,42,.16);
  --shadow-1: 0 10px 30px rgba(15,23,42,.10);
  --shadow-2: 0 18px 60px rgba(15,23,42,.14);
}

html, body{height:100%;}
body{
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}

/* Subtle noise overlay (very light; keep readable) */
.app-noise{
  position: relative;
}
.app-noise::before{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  opacity:.06;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Layout helpers */
.app-shell{
  min-height: 100vh;
  padding-top: calc(var(--safe-top) + var(--space-4));
  padding-bottom: calc(var(--safe-bottom) + 84px); /* room for bottom nav */
}

.mobile-frame{
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* Premium surfaces */
.surface{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px);
}

.surface-strong{
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(12px);
}

/* Buttons (token-driven) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 650;
  letter-spacing: .01em;
  border: 1px solid transparent;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:active{transform: scale(.98);} /* transform only on active */

.btn-primary{
  background: color-mix(in srgb, var(--color-primary) 86%, black 14%);
  color: white;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.btn-primary:hover{background: color-mix(in srgb, var(--color-primary) 92%, black 8%);}

.btn-secondary{
  background: color-mix(in srgb, var(--color-secondary) 88%, black 12%);
  color: #111827;
}

.btn-ghost{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover{background: var(--bg-elev-1); border-color: var(--border-strong);}

.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 35%, transparent);
}

/* Inputs */
.field{
  width:100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elev-1);
  color: var(--text);
  padding: 12px 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field::placeholder{color: var(--text-faint);}
.field:focus{
  outline:none;
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--border) 45%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 28%, transparent);
  background: var(--bg-elev-2);
}

/* Cards */
.card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev-1);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
.badge-primary{border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border) 65%); color: color-mix(in srgb, var(--color-primary) 70%, white 30%);}
.badge-secondary{border-color: color-mix(in srgb, var(--color-secondary) 35%, var(--border) 65%); color: color-mix(in srgb, var(--color-secondary) 70%, white 30%);}

/* Bottom navigation (mobile) */
.bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: var(--safe-bottom);
  z-index: 50;
}
.bottom-nav__inner{
  max-width: 480px;
  margin: 0 auto;
  padding: 10px 12px;
}
.bottom-nav__bar{
  display:flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-2);
}
.bottom-nav__item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 14px;
  color: var(--text-muted);
  text-decoration:none;
  transition: background-color .18s ease, color .18s ease;
}
.bottom-nav__item:hover{background: var(--bg-elev-1); color: var(--text);}
.bottom-nav__item[aria-current="page"]{
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--text);
}

/* QR screen helpers */
.qr-frame{
  width: min(320px, 86vw);
  aspect-ratio: 1/1;
  border-radius: 22px;
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  box-shadow: var(--shadow-2);
  display:grid;
  place-items:center;
}

/* Fullscreen scanner overlay */
.scanner{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 60;
}
.scanner__hud{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: calc(var(--safe-top) + 14px) 14px calc(var(--safe-bottom) + 14px);
}
.scanner__frame{
  width: min(320px, 78vw);
  height: min(320px, 78vw);
  border-radius: 22px;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  margin: 0 auto;
  position: relative;
}
.scanner__line{
  position:absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  top: 18px;
  background: color-mix(in srgb, var(--color-secondary) 70%, white 30%);
  animation: scanline 1.6s ease-in-out infinite;
}
@keyframes scanline{
  0%{transform: translateY(0); opacity:.65;}
  50%{transform: translateY(240px); opacity:1;}
  100%{transform: translateY(0); opacity:.65;}
}

/* Admin desktop container */
.admin-shell{
  min-height: 100vh;
  background: var(--bg);
}
.admin-grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
}
@media (max-width: 1024px){
  .admin-grid{grid-template-columns: 1fr;}
}

/* Navigation admin responsive (tiroir mobile) */
.admin-topbar{
  display:flex; align-items:center; gap:12px;
  padding: 12px 16px;
  position: sticky; top:0; z-index:30;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.admin-nav-overlay{
  position: fixed; inset:0; z-index:40;
  background: rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}
.admin-nav-overlay.open{ opacity:1; pointer-events:auto; }
@media (max-width: 1024px){
  .admin-aside{
    position: fixed; top:0; left:0; bottom:0;
    width: 270px; max-width: 85%;
    z-index:50; overflow-y:auto;
    border-radius:0;
    transform: translateX(-110%);
    transition: transform .25s ease;
  }
  .admin-aside.open{ transform: translateX(0); }
}

/* Utility: text clamp */
.line-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .scanner__line{animation:none;}
  .btn{transition:none;}
  .field{transition:none;}
  .bottom-nav__item{transition:none;}
}

/* ============================================================
   Accueil — hero "ticket" + tuiles néon (rose/or dynamiques)
   Nouvelles classes uniquement : n'affecte aucune autre page.
   ============================================================ */
.home-ticket{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--color-primary) 30%, transparent);
  background: linear-gradient(165deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 42%, black) 100%);
  color: #fff;
}
.home-ticket__top{
  padding: 22px 20px 4px;
  position: relative;
}
.home-ticket__eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: color-mix(in srgb, var(--color-secondary) 85%, white); margin: 0 0 8px;
}
.home-ticket__title{
  font-family: var(--font-ticket);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  margin: 0 0 8px;
  letter-spacing: .01em;
}
.home-ticket__sub{ margin:0; font-size:13px; color: rgba(255,255,255,.85); max-width: 260px; }
.home-ticket__stamp{
  position:absolute; top:18px; right:18px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size:10px; color: rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.35); border-radius:20px; padding:4px 10px;
}
.home-ticket__divider{
  margin: 14px 20px 0;
  border-top: 2px dashed rgba(255,255,255,.3);
}
.home-ticket__bottom{
  padding: 14px 20px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.home-ticket__cta{
  font-weight: 800; font-size: 13px;
  color: var(--color-dark);
  background: linear-gradient(120deg, var(--color-secondary), #fff8e6 120%);
  border: none; border-radius: 999px; padding: 12px 18px;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-secondary) 45%, transparent);
  text-decoration: none;
}

/* Tuiles néon (accès rapides) */
.home-tile{
  border-radius: var(--radius-lg);
  padding: 16px;
  display:flex; flex-direction:column; gap: 8px;
  border: 1px solid var(--border);
}
.home-tile.is-a{ background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 22%, transparent), color-mix(in srgb, var(--color-primary) 5%, transparent)); }
.home-tile.is-b{ background: linear-gradient(160deg, color-mix(in srgb, var(--color-secondary) 22%, transparent), color-mix(in srgb, var(--color-secondary) 5%, transparent)); }
.home-tile i{ font-size: 22px; }
.home-tile.is-a i{ color: var(--color-primary); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary) 55%, transparent)); }
.home-tile.is-b i{ color: var(--color-secondary); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-secondary) 55%, transparent)); }
.home-tile span{ font-weight: 800; font-size: 14px; }

/* Actus : effet "flyer" punaisé sur les cartes existantes (léger, sans toucher au HTML) */
#home-news-carousel [data-testid="news-card"]{ position: relative; }
#home-news-carousel [data-testid="news-card"]::before{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-primary) 60%, white), var(--color-primary));
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
  z-index: 2;
}
#home-news-carousel [data-testid="news-card"]:nth-child(odd){ transform: rotate(-1.5deg); }
#home-news-carousel [data-testid="news-card"]:nth-child(even){ transform: rotate(1.2deg); }

/* Panneaux secondaires (notifications, installation, nous trouver...) */
.home-glow-card{
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--border) 72%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 12%, var(--surface)) 0%, var(--surface) 65%);
}
.home-icon-badge{
  width: 40px; height:40px; border-radius: 12px; flex-shrink:0;
  display:grid; place-items:center; font-size:17px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.home-glow-btn{
  font-weight: 800; font-size: 13px;
  color: var(--color-dark);
  background: linear-gradient(120deg, var(--color-secondary), var(--color-primary));
  border: none; border-radius: 999px; padding: 10px 16px;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  text-decoration:none; flex-shrink:0;
}
.home-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--color-secondary); margin: 0 0 8px;
}
.home-social a{
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 30%, transparent), color-mix(in srgb, var(--color-secondary) 30%, transparent)) !important;
}
.gallery-marquee-item{ border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border) 65%) !important; }

/* ============================================================
   Habillage "premium néon" appliqué à TOUTES les pages client
   (scopé via body:not(.admin-shell) — n'affecte jamais l'admin/agence)
   ============================================================ */
body:not(.admin-shell) .surface,
body:not(.admin-shell) .surface-strong,
body:not(.admin-shell) .card{
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--border) 76%);
}
body:not(.admin-shell) .btn-primary{
  background: linear-gradient(120deg, var(--color-secondary), var(--color-primary));
  color: var(--color-dark);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-secondary) 35%, transparent);
}
body:not(.admin-shell) .btn-primary:hover{
  filter: brightness(1.06);
}
body:not(.admin-shell) .badge-primary{ background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
body:not(.admin-shell) .badge-secondary{ background: color-mix(in srgb, var(--color-secondary) 14%, transparent); }

/* =====================================================================
   Roue de la fortune
   ===================================================================== */
.wheel-root{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}
.wheel-stage{position:relative;display:grid;place-items:center;width:100%;overflow:visible;}
.wheel-canvas{display:block;filter:drop-shadow(0 12px 30px rgba(0,0,0,.45));border-radius:50%;}
.wheel-pointer{
  position:absolute;top:-4px;left:50%;transform:translateX(-50%);z-index:3;
  width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;
  border-top:22px solid var(--color-secondary);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
.wheel-hub{
  position:absolute;width:52px;height:52px;border-radius:50%;z-index:2;
  display:grid;place-items:center;color:#fff;font-size:18px;
  background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.wheel-spin-btn{width:100%;max-width:320px;}
.wheel-note{font-size:12px;opacity:.7;text-align:center;margin:0;}
.wheel-result{width:100%;max-width:340px;}
.wheel-result__card{
  border-radius:20px;padding:18px 16px;text-align:center;
  background:var(--bg-elev-1,#1a1f2b);border:1px solid var(--border,rgba(255,255,255,.08));
  animation:wheel-pop 320ms cubic-bezier(.2,.9,.3,1.2);
}
.wheel-result__card--win{border-color:color-mix(in srgb,var(--color-secondary) 55%,transparent);}
.wheel-result__card--lose{opacity:.92;}
.wheel-result__icon{
  width:52px;height:52px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;
  font-size:22px;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
}
.wheel-result__label{font-family:var(--font-display,inherit);font-size:22px;font-weight:700;margin-bottom:6px;}
.wheel-result__msg{font-size:13px;line-height:1.5;opacity:.85;margin:0;}
.wheel-result__expiry{font-size:11px;opacity:.6;margin-top:8px;}
.wheel-code{
  margin:14px auto 0;padding:10px 14px;border-radius:12px;display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;font-weight:700;letter-spacing:.18em;
  background:color-mix(in srgb,var(--color-secondary) 16%,transparent);
  border:1px dashed color-mix(in srgb,var(--color-secondary) 55%,transparent);
  color:var(--color-secondary);
}
.wheel-qr{margin:12px auto 0;width:fit-content;background:#fff;padding:8px;border-radius:12px;}
.wheel-qr img{display:block;}
.wheel-confetti{
  position:absolute;top:12%;width:8px;height:14px;border-radius:2px;z-index:4;pointer-events:none;
  animation:wheel-confetti-fall 2.2s ease-in forwards;
}
@keyframes wheel-confetti-fall{
  0%{opacity:1;transform:translateY(0) rotate(0);}
  100%{opacity:0;transform:translateY(240px) rotate(540deg);}
}
@keyframes wheel-pop{from{opacity:0;transform:translateY(14px) scale(.94);}to{opacity:1;transform:none;}}

/* Pop-up */
.wheel-modal{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:16px;}
.wheel-modal[hidden]{display:none;}
.wheel-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.wheel-modal__card{
  position:relative;width:100%;max-width:400px;max-height:92vh;overflow-y:auto;
  background:var(--bg-elev-1,#1a1f2b);border:1px solid var(--border,rgba(255,255,255,.08));
  border-radius:24px;padding:26px 20px 20px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:wheel-pop 300ms cubic-bezier(.2,.9,.3,1.2);
}
.wheel-modal__close{
  position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;
  background:color-mix(in srgb,var(--color-primary) 12%,transparent);border:none;color:inherit;opacity:.75;
  display:grid;place-items:center;cursor:pointer;z-index:5;
}
.wheel-modal__close:hover{opacity:1;}
.wheel-modal__title{font-family:var(--font-display,inherit);font-size:21px;font-weight:700;margin-bottom:4px;}
.wheel-modal__sub{font-size:13px;opacity:.8;margin-bottom:16px;}
@media (prefers-reduced-motion:reduce){
  .wheel-result__card,.wheel-modal__card{animation:none;}
  .wheel-confetti{display:none;}
}

/* =====================================================================
   Correctif : listes déroulantes natives
   .field utilise un fond semi-transparent (rgba blanc) que le menu natif
   compose sur du blanc → texte blanc sur fond blanc. On force donc une
   couleur opaque sur le select et ses options.
   ===================================================================== */
select.field{
  color-scheme: dark;
  background-color:#151a24;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' fill-opacity='.55' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
select.field option,
select.field optgroup{background-color:#151a24;color:#e8ecf4;}
[data-theme="light"] select.field{
  color-scheme: light;background-color:#ffffff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230f172a' fill-opacity='.55' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
[data-theme="light"] select.field option,
[data-theme="light"] select.field optgroup{background-color:#ffffff;color:#0f172a;}

/* Roue verrouillée (réservée aux abonnés notifications) */
.wheel-stage--locked .wheel-canvas{filter:grayscale(.85) blur(1.5px);opacity:.45;}
.wheel-stage--locked::after{
  content:"\f023";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;z-index:5;font-size:34px;color:var(--color-secondary);
  text-shadow:0 4px 14px rgba(0,0,0,.6);
}