/* =========================================================================
   SORTEE — PREMIUM V5
   Couche de raffinement visuel chargée APRÈS style.css / app-mobile-v2.css /
   app-modern-v3.css. Ne redéfinit aucune classe métier : elle affine les
   tokens (couleurs, ombres, rayons, typo) et le mobile pour un rendu plus
   haut de gamme, plus sobre et plus lisible, sans casser le markup existant.
   ========================================================================= */

:root{
  /* Typo premium : Plus Jakarta Sans (titres/UI) + Inter (texte courant) */
  --font-ui:"Plus Jakarta Sans",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-text:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Palette resserrée : moins saturée, plus "chic", meilleur contraste */
  --primary:#6d28d9;--primary2:#db2777;--cyan:#0891b2;--green:#059669;--orange:#d97706;--red:#dc2626;
  --ink:#14121f;--muted:#6b6880;--soft:#f7f5fc;

  /* Ombres plus douces et diffuses (profondeur premium, pas "criarde") */
  --shadow:0 24px 64px -12px rgba(20,18,31,.20);
  --shadow2:0 10px 28px -8px rgba(20,18,31,.14);
  --shadow-sm:0 4px 14px -4px rgba(20,18,31,.10);
  --r:26px;

  /* Accent discret "or" réservé aux touches premium (badges, séparateurs) */
  --accent-gold:#b8860b;
}

@media(min-width:1px){
  @font-face{font-family:"__premium-font-preload";src:local("x")}
}

/* ---------- Typographie ---------- */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font-text);letter-spacing:-.006em}
h1,h2,h3,h4,h5,h6,.fw-black,.navbar-brand,.btn,.nav-link,.title-xl,.section-title{font-family:var(--font-ui)}
h1,h2,h3,.fw-black{font-weight:800;letter-spacing:-.03em}
.title-xl{font-weight:800;letter-spacing:-.03em}
.lead{color:var(--muted);font-weight:500}
p{color:#3c3950}

/* ---------- Fond global : plus sobre, moins "arc-en-ciel" ---------- */
body{
  background:
    radial-gradient(circle at 10% 0%,rgba(109,40,217,.10),transparent 38rem),
    radial-gradient(circle at 100% 10%,rgba(219,39,119,.07),transparent 40rem),
    linear-gradient(180deg,#fbfaff,#f6f4fb 46%,#fff);
}
body:before{opacity:.5}
body:after{opacity:.6}

/* ---------- Navigation ---------- */
.nav-shell{transition:box-shadow .25s ease,background-color .25s ease}
.topbar.is-scrolled .nav-shell{box-shadow:var(--shadow2)}
.logo-mark{box-shadow:0 10px 22px rgba(109,40,217,.30)}
.nav-link{font-weight:700;letter-spacing:-.01em}
.nav-link.active,.nav-link:hover{background:rgba(109,40,217,.08)}
.btn-gradient{background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 12px 26px -6px rgba(109,40,217,.38);font-weight:700;letter-spacing:-.01em;transition:transform .18s ease,box-shadow .18s ease}
.btn-gradient:hover{transform:translateY(-2px);box-shadow:0 16px 32px -6px rgba(109,40,217,.42)}
.btn-gradient:active{transform:translateY(0)}
.btn-soft{font-weight:700;transition:background-color .18s ease,border-color .18s ease}
.btn-soft:hover{background:rgba(109,40,217,.06)}
.dropdown-menu-premium{box-shadow:var(--shadow)}

/* Focus clavier visible et cohérent (accessibilité + finition pro) */
a:focus-visible,button:focus-visible,.btn:focus-visible,.form-control:focus-visible,.form-select:focus-visible,[tabindex]:focus-visible{
  outline:2.5px solid rgba(109,40,217,.55);outline-offset:2px;border-radius:12px;
}

/* ---------- Hero ---------- */
.ultra-hero,.hero-box{background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(255,255,255,.55));border:1px solid rgba(255,255,255,.65)}
.ultra-hero:before{opacity:.75}.ultra-hero:after{opacity:.75}
.eyebrow,.chip{font-weight:700;letter-spacing:.01em}
/* NB: .text-gradient garde sa règle d'origine (style.css) qui utilise déjà
   var(--primary)/var(--primary2) redéfinies plus haut — ne pas la
   redéclarer ici avec le raccourci "background", cela réinitialiserait
   background-clip et rendrait le texte (ex : le ".fr" du logo) invisible. */

/* ---------- Cartes : profondeur plus subtile, hover plus feutré ---------- */
.premium-card,.event-card,.side-card,.detail-card,.auth-card,.member-card,.member-outing-card,
.quick-feature,.member-profile-card,.message-shell,.member-card-v2,.stats-card,.content-panel,
.filter-card,.preference-board,.pref-category,.home-idea-card,.member-outing-row{
  border-radius:24px;border-color:rgba(20,18,31,.06)!important;box-shadow:var(--shadow-sm)!important;
}
.premium-card:hover,.event-card:hover,.member-outing-card:hover,.quick-feature:hover,
.member-profile-card:hover,.member-card-v2:hover,.home-idea-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow2)!important;
}
.premium-card,.event-card,.member-outing-card,.quick-feature,.member-profile-card,.member-card-v2,.home-idea-card{
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s ease;
}

/* ---------- Formulaires : plus nets, plus "pro" ---------- */
.form-control,.form-select{background:#f6f4fb;border-radius:14px;font-weight:600;border:1.5px solid transparent}
.form-control:focus,.form-select:focus{background:#fff;border-color:rgba(109,40,217,.35);box-shadow:0 0 0 4px rgba(109,40,217,.10)}
label,.form-label{font-weight:700;color:#2c2940;font-size:.9rem;letter-spacing:-.01em}

/* ---------- Boutons secondaires uniformisés ---------- */
.btn{border-radius:14px;font-weight:700;letter-spacing:-.005em}

/* ---------- Badges / pills plus lisibles ---------- */
.category-pill,.status-pill,.flag-pill,.mini-chip,.stat-mini{font-weight:700}

/* ---------- Footer : plus profond, plus élégant ---------- */
.site-footer{background:#0d0e19}
.site-footer:before{opacity:.7}
.footer-title{color:rgba(255,255,255,.92);font-weight:700}
.footer-newsletter{border-radius:20px}

/* ---------- Scrollbars discrètes (desktop) ---------- */
@media(min-width:992px){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(109,40,217,.22);border-radius:99px;border:2px solid #fff}
  ::-webkit-scrollbar-thumb:hover{background:rgba(109,40,217,.36)}
}

/* ---------- Animation d'apparition douce (respecte reduced-motion) ---------- */
@media(prefers-reduced-motion:no-preference){
  .reveal-up{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
  .reveal-up.is-visible{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}

/* =========================================================================
   MOBILE — l'essentiel de la demande : plus premium, plus intuitif
   ========================================================================= */
@media(max-width:991.98px){
  body{font-size:15.5px}

  /* Topbar mobile : plus nette, séparation propre du contenu */
  .topbar{background:transparent}
  .nav-shell.glass,.topbar .glass{background:rgba(255,255,255,.86);backdrop-filter:blur(20px) saturate(160%)}

  /* Titres plus posés, meilleure hiérarchie */
  .page-hero .title-xl,h1{letter-spacing:-.035em}
  .section-title{font-weight:800}

  /* Cartes : rayon cohérent, ombre plus légère pour un rendu net sur petit écran */
  .premium-card,.event-card,.member-outing-card,.quick-feature,.member-profile-card,
  .member-card-v2,.home-idea-card,.stats-card,.content-panel,.filter-card{
    border-radius:20px!important;box-shadow:0 8px 22px -6px rgba(20,18,31,.12)!important;
  }

  /* Barre de navigation basse : plus premium (verre dépoli plus marqué, item actif en pastille) */
  .mobile-bottom{
    border-radius:24px;background:rgba(255,255,255,.90)!important;
    box-shadow:0 -2px 0 rgba(20,18,31,.03),0 18px 46px -10px rgba(20,18,31,.22)!important;
    border:1px solid rgba(255,255,255,.6);
  }
  .mobile-bottom a,.mobile-more-btn{color:#6b6880;font-weight:700;gap:3px;transition:color .15s ease}
  .mobile-bottom a.active,.mobile-more-btn.active{color:var(--primary)}
  .mobile-bottom a.active i,.mobile-more-btn.active i{
    display:inline-flex;align-items:center;justify-content:center;
  }
  .mobile-bottom i{font-size:1.2rem}
  .mobile-fab{box-shadow:0 14px 28px -6px rgba(109,40,217,.45);transition:transform .15s ease}
  .mobile-fab:active{transform:scale(.94)}

  /* Boutons pleine largeur mobiles plus confortables au toucher */
  .btn{min-height:46px}

  /* Formulaires : champs plus grands, plus faciles à toucher */
  .form-control,.form-select{min-height:50px}

  /* Espacements resserrés mais réguliers pour une lecture plus "app native" */
  .container-xl{padding-left:16px!important;padding-right:16px!important}
  .page-hero{padding-top:14px!important}

  /* Dropdowns / feuilles mobiles avec un léger effet de profondeur premium */
  .mobile-more-menu,.dropdown-menu-premium{box-shadow:0 -6px 0 transparent,0 24px 60px -12px rgba(20,18,31,.30)!important}
}

@media(max-width:575.98px){
  .title-xl{font-size:clamp(1.7rem,7.5vw,2.3rem)}
  .quick-feature,.stats-card{padding:18px}
}