/**
 * FEMININE MODERN v1 — Ma Bulle Féminine
 * Design féminin moderne · Rose doux · Typographies élégantes
 * Corrections visuelles globales · Légèreté · Modernité
 */

/* ═══════════════════════════════════════════
   IMPORTS DE POLICES FÉMININES
   ═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Nunito:wght@300;400;500;600;700&family=Dancing+Script:wght@600&display=swap');

/* ═══════════════════════════════════════════
   VARIABLES RACINE — THÈME ROSE DOUX
   ═══════════════════════════════════════════ */
:root {
  --rose-1:    #fff0f6;
  --rose-2:    #ffe4ee;
  --rose-3:    #ffc2d9;
  --rose-4:    #ff94bf;
  --rose-5:    #ff6b9c;
  --rose-6:    #ff4b88;
  --rose-dark: #c72e60;
  --lavande:   #d8b4fe;
  --peche:     #fed7aa;
  --or:        #fde68a;
  --vert-doux: #d1fae5;
  --bleu-doux: #dbeafe;

  --font-serif:  'Playfair Display', Georgia, serif;
  --font-main:   'Nunito', system-ui, -apple-system, sans-serif;
  --font-script: 'Dancing Script', cursive;
}

/* ═══════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════ */
body {
  font-family: var(--font-main) !important;
  background: linear-gradient(160deg, #fff5f8 0%, #fffbff 45%, #fff0fb 100%) !important;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHIE
   ═══════════════════════════════════════════ */

/* Titres principaux */
h1, h2, .app-title, .section-title,
.module-title, .card-title-main {
  font-family: var(--font-serif) !important;
  color: var(--rose-6) !important;
  letter-spacing: .02em;
}

/* Titres de modules */
.module-header, .widget-title, .panel-title,
[class*="title"]:not(.card):not(.channel):not(.list-title) {
  font-family: var(--font-serif);
}

/* Logo / marque */
.app-logo-text, .brand-name, .site-name {
  font-family: var(--font-script) !important;
  font-size: 1.4em !important;
  background: linear-gradient(135deg, var(--rose-6), var(--lavande));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
.app-header, header.main-header, .top-bar {
  background: linear-gradient(135deg, rgba(255,107,156,.12), rgba(216,180,254,.1), rgba(255,237,213,.12)) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,107,156,.18) !important;
  box-shadow: 0 2px 20px rgba(255,107,156,.06) !important;
}

/* ═══════════════════════════════════════════
   CARDS & PANELS
   ═══════════════════════════════════════════ */
.card, .module-card, .widget, .panel {
  background: rgba(255,255,255,.92) !important;
  border: 1.5px solid rgba(255,107,156,.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(255,107,156,.06), 0 1px 4px rgba(0,0,0,.04) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.card:hover, .module-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(255,107,156,.12), 0 2px 8px rgba(0,0,0,.06) !important;
}

/* ═══════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════ */
.btn-primary, .btn.primary,
button.primary, [class*="btn-rose"],
.action-btn.main {
  background: linear-gradient(135deg, var(--rose-5), var(--rose-6)) !important;
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  font-family: var(--font-main) !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  box-shadow: 0 4px 15px rgba(255,75,136,.25) !important;
  transition: all .2s ease !important;
  letter-spacing: .02em;
}
.btn-primary:hover, .btn.primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255,75,136,.35) !important;
  filter: brightness(1.06) !important;
}

/* Boutons secondaires */
.btn-ghost, .btn.ghost, button.ghost {
  background: transparent !important;
  color: var(--rose-5) !important;
  border: 1.5px solid rgba(255,107,156,.3) !important;
  border-radius: 50px !important;
  transition: all .18s ease !important;
}
.btn-ghost:hover, .btn.ghost:hover {
  background: rgba(255,107,156,.08) !important;
  border-color: var(--rose-5) !important;
}

/* Pills de navigation */
.pill, .tab-btn {
  border-radius: 50px !important;
  font-family: var(--font-main) !important;
  font-weight: 500 !important;
  transition: all .18s ease !important;
}
.pill.active, .tab-btn.active {
  background: linear-gradient(135deg, var(--rose-5), var(--rose-6)) !important;
  color: white !important;
  box-shadow: 0 3px 10px rgba(255,75,136,.2) !important;
}

/* ═══════════════════════════════════════════
   FORMULAIRES
   ═══════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
  font-family: var(--font-main) !important;
  border: 1.5px solid rgba(255,107,156,.2) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.95) !important;
  color: var(--text-main, #2d1b24) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
  padding: 10px 14px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--rose-5) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,107,156,.15) !important;
}

/* ═══════════════════════════════════════════
   ICÔNES DE MODULES
   ═══════════════════════════════════════════ */
.module-icon, .quick-btn-icon {
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(255,107,156,.2));
  transition: transform .2s ease;
}
.quick-btn:hover .module-icon,
.quick-btn:hover .quick-btn-icon {
  transform: scale(1.2) rotate(5deg);
}

/* ═══════════════════════════════════════════
   SCROLL ÉLÉGANT
   ═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(255,107,156,.05); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,107,156,.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--rose-5); }
* { scrollbar-color: rgba(255,107,156,.3) rgba(255,107,156,.05); scrollbar-width: thin; }

/* ═══════════════════════════════════════════
   BADGES & TAGS
   ═══════════════════════════════════════════ */
.badge, .tag, .chip {
  border-radius: 50px !important;
  font-family: var(--font-main) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
}
.badge-rose, .badge-pink {
  background: rgba(255,107,156,.15) !important;
  color: var(--rose-6) !important;
  border: 1px solid rgba(255,107,156,.25) !important;
}

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes floatHeart {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-6px) scale(1.05); }
}
@keyframes shimmerRose {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-float { animation: floatHeart 3s ease-in-out infinite; }
.animate-fadein { animation: fadeInUp .4s ease forwards; }

/* Logo cœur animé */
.app-heart-logo {
  animation: floatHeart 3s ease-in-out infinite;
  filter: drop-shadow(0 3px 8px rgba(255,107,156,.4));
}

/* ═══════════════════════════════════════════
   SECTION SPORT — intégration
   ═══════════════════════════════════════════ */
#sportSection {
  animation: fadeInUp .5s ease forwards;
}

/* ═══════════════════════════════════════════
   MODALES
   ═══════════════════════════════════════════ */
.modal, .dialog, [role="dialog"] {
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px rgba(255,107,156,.08) !important;
}
.modal-header, .dialog-header {
  background: linear-gradient(135deg, rgba(255,107,156,.1), rgba(216,180,254,.08)) !important;
  border-bottom: 1px solid rgba(255,107,156,.12) !important;
  font-family: var(--font-serif) !important;
}
.modal-close, .dialog-close {
  color: var(--rose-5) !important;
}

/* ═══════════════════════════════════════════
   TOASTS & NOTIFICATIONS
   ═══════════════════════════════════════════ */
.toast, #toast, [id*="toast"] {
  background: linear-gradient(135deg, var(--rose-5), var(--rose-6)) !important;
  color: white !important;
  border-radius: 50px !important;
  font-family: var(--font-main) !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  box-shadow: 0 8px 24px rgba(255,75,136,.3) !important;
  border: none !important;
}

/* ═══════════════════════════════════════════
   PROFIL
   ═══════════════════════════════════════════ */
.profile-avatar, .user-avatar {
  border: 3px solid var(--rose-4) !important;
  box-shadow: 0 4px 16px rgba(255,107,156,.3) !important;
}
.profile-name, .user-name {
  font-family: var(--font-serif) !important;
  background: linear-gradient(135deg, var(--rose-6), var(--lavande));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════
   RESPONSIVE TABLET & MOBILE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .card, .module-card {
    border-radius: 16px !important;
    margin: 6px 0 !important;
  }
  .btn-primary, .btn.primary {
    padding: 9px 18px !important;
    font-size: 14px !important;
  }
  h1, h2 { font-size: clamp(20px, 4vw, 32px) !important; }
}

@media (max-width: 480px) {
  .card, .module-card {
    border-radius: 14px !important;
  }
  body { font-size: 15px !important; }
}

/* ═══════════════════════════════════════════
   SMART TV / SMA (grands écrans)
   ═══════════════════════════════════════════ */
@media (min-width: 1920px) {
  body { font-size: 18px !important; }
  .card, .module-card { border-radius: 28px !important; }
  .btn-primary, .btn.primary { padding: 14px 30px !important; font-size: 16px !important; }
}

/* ═══════════════════════════════════════════
   CORRECTIONS DE BUGS VISUELS
   ═══════════════════════════════════════════ */

/* Empêcher l'overflow horizontal */
body, html { overflow-x: hidden; }
.app-wrapper, .main-wrapper { max-width: 100%; overflow: hidden; }

/* Correction z-index modales */
.modal, .dialog, [role="dialog"] { z-index: 1000 !important; }
.modal-overlay, .dialog-backdrop { z-index: 999 !important; }

/* Fix boutons qui disparaissent */
button, [role="button"] { opacity: 1 !important; }

/* Fix des images cassées */
img[src=""], img:not([src]) {
  visibility: hidden;
}

/* Smooth transitions globales */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
}
/* Sauf les transitions de contenu */
.channel-list *, .fav-list *, .sport-videos * {
  transition: transform .18s ease, box-shadow .18s ease, opacity .15s ease !important;
}