/* ===== SPLASH SCREEN ===== */
.splash-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: var(--splash-min-height, 100vh);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-primary, #ffffff);
  z-index: var(--z-index-splash, 9999);
  overflow: hidden; /* Empêche tout débordement */
}

.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg, 20px);
  animation: splashFadeIn var(--animation-fade-duration, 400ms) var(--transition-timing, ease-out);
  width: 100%;
  max-width: 1000px;
  box-sizing: border-box;
}

/* ===== LOGO - DESIGN ULTRA RESPONSIVE ===== */
.logo-wrapper {
  position: relative;
  display: inline-block;
  font-family: var(--font-family-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  margin: 0 auto;
  /* Contient strictement le logo + baseline */
  width: auto;
  max-width: 95vw; /* Jamais plus large que l'écran */
}

/* Conteneur du logo principal - TOUJOURS EN LIGNE */
.logo-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0;
  white-space: nowrap; /* CRUCIAL : empêche le retour à la ligne */
  flex-wrap: nowrap;   /* Double sécurité */
  gap: clamp(4px, 1vw, 20px); /* Espacement fluide entre My et Jeunesse */
}

/* "My" en pur magenta */
.logo-text-pure {
  font-size: clamp(32px, 15vw, 180px); /* Ultra fluide : min 32px, max 180px */
  font-weight: var(--font-weight-bold, 800);
  color: var(--color-primary, #e91e8c);
  letter-spacing: -0.02em;
  transition: color var(--transition-speed-normal, 300ms) var(--transition-timing);
  flex-shrink: 0; /* Empêche le rétrécissement */
  white-space: nowrap;
}

/* "Jeunesse" en contour */
.logo-text-outline {
  font-size: clamp(32px, 15vw, 180px); /* Identique à My pour alignement parfait */
  font-weight: var(--font-weight-bold, 800);
  color: transparent;
  -webkit-text-stroke: clamp(1.5px, 0.4vw, 4px) var(--color-primary-dark, #c2188b);
  text-stroke: clamp(1.5px, 0.4vw, 4px) var(--color-primary-dark, #c2188b);
  letter-spacing: -0.05em;
  position: relative;
  transition: -webkit-text-stroke var(--transition-speed-normal) var(--transition-timing);
  flex-shrink: 0; /* Empêche le rétrécissement */
  white-space: nowrap;
}

/* Effet de gradient subtil sur le contour */
.logo-text-outline::before {
  content: 'Jeunesse';
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  -webkit-text-stroke: clamp(1.5px, 0.4vw, 4px) var(--color-primary-light, #9c27b0);
  text-stroke: clamp(1.5px, 0.4vw, 4px) var(--color-primary-light, #9c27b0);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  opacity: 0.6;
  transition: -webkit-text-stroke var(--transition-speed-normal) var(--transition-timing);
  pointer-events: none;
}

/* Baseline MEARA - TOUJOURS EN BAS À DROITE */
.logo-sub {
  position: absolute;
  bottom: clamp(-65px, -10vw, -40px); /* Position fluide sous le logo */
  right: 0; /* TOUJOURS collée à droite de Jeunesse */
  font-size: clamp(14px, 3.5vw, 50px); /* Échelle fluide */
  font-weight: var(--font-weight-bold, 800);
  color: var(--color-primary, #e91e8c);
  letter-spacing: clamp(2px, 0.8vw, 5px);
  text-transform: uppercase;
  transition: color var(--transition-speed-normal) var(--transition-timing);
  white-space: nowrap;
  transform-origin: right center;
}

/* ===== LOADING INDICATOR ===== */
.loading-indicator {
  display: flex;
  gap: var(--spacing-sm, 8px);
  margin-top: clamp(40px, 8vw, 80px); /* Ajustement dynamique pour la baseline */
  justify-content: center;
}

.loading-dot {
  width: clamp(6px, 1.5vw, 8px);
  height: clamp(6px, 1.5vw, 8px);
  background-color: var(--color-primary, #e91e8c);
  border-radius: var(--border-radius-full, 50%);
  animation: dotPulse var(--animation-pulse-duration, 1.4s) infinite ease-in-out;
  opacity: 0.6;
  transition: background-color var(--transition-speed-normal) var(--transition-timing);
}

.loading-dot:nth-child(2) {
  animation-delay: 0.2s;
  opacity: 0.8;
}

.loading-dot:nth-child(3) {
  animation-delay: 0.4s;
  opacity: 1;
}

/* ===== ANIMATIONS ===== */
@keyframes splashFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dotPulse {
  0%, 60%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.5);
  }
}

/* ===== RESPONSIVE - UNIFORMITÉ GARANTIE ===== */

/* Tablettes */
@media (max-width: 1024px) {
  .logo-text-pure,
  .logo-text-outline {
    font-size: clamp(40px, 18vw, 140px);
  }

  .logo-text-outline,
  .logo-text-outline::before {
    -webkit-text-stroke-width: clamp(2px, 0.5vw, 3px);
  }

  .logo-sub {
    font-size: clamp(16px, 4vw, 32px);
    bottom: clamp(-20px, -3vw, -35px);
  }
}

/* Mobiles */
@media (max-width: 768px) {
  .splash-content {
    max-width: 98%;
    padding: var(--spacing-md, 16px);
  }

  .logo-text-pure,
  .logo-text-outline {
    font-size: clamp(28px, 16vw, 100px);
  }

  .logo-text-outline,
  .logo-text-outline::before {
    -webkit-text-stroke-width: clamp(1.5px, 0.45vw, 2.5px);
  }

  .logo-sub {
    font-size: clamp(12px, 3.5vw, 24px);
    letter-spacing: clamp(1px, 0.6vw, 3px);
    bottom: clamp(-15px, -3vw, -25px);
  }

  .loading-indicator {
    margin-top: clamp(30px, 6vw, 50px);
  }
}

/* Petits mobiles */
@media (max-width: 480px) {
  .splash-content {
    padding: var(--spacing-sm, 12px);
  }

  /* GARDE LA MÊME STRUCTURE - PAS DE COLUMN */
  .logo-main {
    flex-direction: row; /* Maintient l'horizontalité */
    gap: clamp(2px, 1vw, 8px);
  }

  .logo-text-pure,
  .logo-text-outline {
    font-size: clamp(24px, 14vw, 80px);
  }

  .logo-text-outline,
  .logo-text-outline::before {
    -webkit-text-stroke-width: clamp(1px, 0.4vw, 2px);
  }

  .logo-sub {
    position: absolute; /* Maintient le positionnement absolu */
    bottom: clamp(-25px, -20vw, -27px);
    right: 0; /* TOUJOURS à droite */
    font-size: clamp(21px, 10vw, 20px);
    letter-spacing: clamp(1px, 0.5vw, 2px);
    text-align: right;
  }

  .loading-indicator {
    margin-top: clamp(25px, 5vw, 40px);
  }
}

/* Très petits écrans (iPhone SE, etc.) */
@media (max-width: 320px) {
  .logo-text-pure,
  .logo-text-outline {
    font-size: clamp(20px, 13vw, 60px);
  }

  .logo-sub {
    font-size: clamp(9px, 2.8vw, 14px);
    bottom: clamp(-10px, -2.5vw, -15px);
  }
}

/* ===== ÉTATS DE CHARGEMENT ===== */
.splash-container.loading .loading-dot {
  animation-play-state: running;
}

.splash-container.loaded {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-speed-normal) var(--transition-timing);
}

/* ===== THÈME DYNAMIQUE ===== */
[data-theme="dark"] .logo-text-outline {
  -webkit-text-stroke-color: var(--color-primary, #e91e8c);
}

[data-theme="dark"] .logo-text-outline::before {
  -webkit-text-stroke-color: var(--color-primary-light, #9c27b0);
}

[data-theme="custom"] .logo-text-outline {
  -webkit-text-stroke-color: var(--color-primary-dark, #c2188b);
}

[data-theme="custom"] .logo-text-outline::before {
  -webkit-text-stroke-color: var(--color-primary-light, #9c27b0);
}

/* Support des préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .splash-content,
  .loading-dot {
    animation: none;
  }

  .splash-container.loaded {
    transition: none;
  }
}

/* Compatibilité cross-browser pour text-stroke */
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
  .logo-text-outline {
    color: var(--color-bg-primary, #ffffff);
    text-shadow: 
      -2px -2px 0 var(--color-primary-dark, #c2188b),
      2px -2px 0 var(--color-primary-dark, #c2188b),
      -2px 2px 0 var(--color-primary-dark, #c2188b),
      2px 2px 0 var(--color-primary-dark, #c2188b);
  }

  .logo-text-outline::before {
    display: none;
  }
}