/* ============================================================
   pride.custom.css — Extensions LGBT+ pour ProjetRencontre
   Complète vikinger-base.min.css (ne jamais modifier la base)
   Variables --pride-* · Dark mode first
   ============================================================ */

/* ── 1. Variables globales ─────────────────────────────────────────────── */
:root {
  /* Palette arc-en-ciel principale */
  --pride-red:       #FF6B6B;
  --pride-orange:    #FF9F43;
  --pride-yellow:    #FECA57;
  --pride-green:     #1DD1A1;
  --pride-blue:      #54A0FF;
  --pride-indigo:    #5F27CD;
  --pride-violet:    #A29BFE;

  /* Dégradé signature */
  --pride-gradient:  linear-gradient(135deg,
    var(--pride-red)    0%,
    var(--pride-orange) 20%,
    var(--pride-yellow) 40%,
    var(--pride-green)  60%,
    var(--pride-blue)   80%,
    var(--pride-violet) 100%
  );

  /* Couleurs sémantiques */
  --pride-primary:   var(--pride-blue);
  --pride-accent:    var(--pride-violet);
  --pride-success:   var(--pride-green);
  --pride-warning:   var(--pride-yellow);
  --pride-danger:    var(--pride-red);

  /* Fond & texte (dark mode) */
  --pride-bg:        #1a1a2e;
  --pride-bg-card:   #16213e;
  --pride-bg-input:  #0f3460;
  --pride-text:      #e8e8f0;
  --pride-text-muted:#9a9ab5;
  --pride-border:    rgba(255, 255, 255, 0.08);

  /* Typographie */
  --pride-font-main: 'Inter', 'Segoe UI', sans-serif;
  --pride-font-size: 0.9375rem; /* 15px */
  --pride-line-height: 1.6;

  /* Espacements */
  --pride-radius:    12px;
  --pride-radius-sm: 6px;
  --pride-radius-lg: 20px;
  --pride-shadow:    0 4px 24px rgba(0, 0, 0, 0.4);

  /* Transitions */
  --pride-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Plans premium — couleurs spécifiques */
  --gold-color:          #FECA57;
  --plat-color:          #A29BFE;
  --diamond-color:       #54A0FF;

  /* Alias sémantiques utilisés dans les composants et les vues */
  --match-green:         var(--pride-green);   /* #1DD1A1 */
  --pride-primary-light: #B980D4;              /* violet clair pour liens/accents */
  --like-pink:           #FF3366;              /* rose like / danger romantique */
  --pride-purple:        #9B59B6;              /* violet notifications & badges */
  --color-box-background: rgba(22, 33, 62, 0.95);  /* fond widget-box */
  --color-text:          #e8e8f0;              /* texte principal */
  --color-text-secondary: rgba(255,255,255,0.45);  /* texte secondaire */

  /* Espacements (utilisés dans les formulaires inline) */
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --radius-full: 50px;
}

/* ── 2. Base & Reset léger ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--pride-font-main);
  font-size: var(--pride-font-size);
  line-height: var(--pride-line-height);
  color: var(--pride-text);
  background-color: var(--pride-bg);
}

/* ── 3. Dégradé arc-en-ciel (utilitaires) ──────────────────────────────── */
.pride-gradient-text {
  background: var(--pride-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pride-gradient-bg {
  background: var(--pride-gradient);
}

.pride-gradient-border {
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.pride-gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--pride-gradient);
  z-index: -1;
}

/* ── 4. Boutons ────────────────────────────────────────────────────────── */
.btn-pride {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border: none;
  border-radius: var(--pride-radius);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: var(--pride-transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-pride-primary {
  background: var(--pride-gradient);
  color: #fff;
  box-shadow: 0 4px 15px rgba(84, 160, 255, 0.3);
}
.btn-pride-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(84, 160, 255, 0.5);
  color: #fff;
}

.btn-pride-ghost {
  background: transparent;
  color: var(--pride-text);
  border: 1.5px solid var(--pride-border);
}
.btn-pride-ghost:hover {
  border-color: var(--pride-accent);
  color: var(--pride-accent);
}

.btn-pride-outline {
  background: transparent;
  color: var(--pride-primary);
  border: 1.5px solid var(--pride-primary);
}
.btn-pride-outline:hover {
  background: var(--pride-primary);
  color: #fff;
}

/* ── 5. Cartes ─────────────────────────────────────────────────────────── */
.card-pride {
  background: var(--pride-bg-card);
  border-radius: var(--pride-radius-lg);
  border: 1px solid var(--pride-border);
  box-shadow: var(--pride-shadow);
  overflow: hidden;
  transition: var(--pride-transition);
}
.card-pride:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* ── 6. Formulaires ────────────────────────────────────────────────────── */
.form-pride .form-group {
  margin-bottom: 20px;
}

.form-pride label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pride-text-muted);
  letter-spacing: 0.02em;
}

.form-pride input,
.form-pride select,
.form-pride textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--pride-bg-input);
  border: 1.5px solid var(--pride-border);
  border-radius: var(--pride-radius);
  color: var(--pride-text);
  font-size: var(--pride-font-size);
  font-family: var(--pride-font-main);
  transition: var(--pride-transition);
  outline: none;
  -webkit-appearance: none;
}

.form-pride input:focus,
.form-pride select:focus,
.form-pride textarea:focus {
  border-color: var(--pride-primary);
  box-shadow: 0 0 0 3px rgba(84, 160, 255, 0.2);
}

.form-pride input::placeholder,
.form-pride textarea::placeholder {
  color: var(--pride-text-muted);
}

/* ── 7. Messages flash ─────────────────────────────────────────────────── */
.flash-message {
  padding: 14px 20px;
  border-radius: var(--pride-radius);
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.flash-success {
  background: rgba(29, 209, 161, 0.15);
  border: 1px solid rgba(29, 209, 161, 0.4);
  color: var(--pride-success);
}

.flash-error {
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid rgba(255, 107, 107, 0.4);
  color: var(--pride-danger);
}

.flash-warning {
  background: rgba(254, 202, 87, 0.15);
  border: 1px solid rgba(254, 202, 87, 0.4);
  color: var(--pride-warning);
}

.flash-info {
  background: rgba(84, 160, 255, 0.15);
  border: 1px solid rgba(84, 160, 255, 0.4);
  color: var(--pride-primary);
}

/* ── 8. Avatar hexagonal (signature Vikinger) ──────────────────────────── */
.avatar-hex {
  position: relative;
  display: inline-block;
}
.avatar-hex img {
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-hex-online::after {
  content: '';
  position: absolute;
  bottom: 8%;
  right: 8%;
  width: 22%;
  height: 22%;
  background: var(--pride-success);
  border-radius: 50%;
  border: 2px solid var(--pride-bg-card);
}

/* Tailles prédéfinies */
.avatar-hex-sm  { width: 40px;  height: 40px;  }
.avatar-hex-md  { width: 60px;  height: 60px;  }
.avatar-hex-lg  { width: 90px;  height: 90px;  }
.avatar-hex-xl  { width: 120px; height: 120px; }

/* ── 9. Tags identité LGBT+ ────────────────────────────────────────────── */
.identity-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid;
  white-space: nowrap;
}

.tag-gender     { background: rgba(162, 155, 254, 0.15); border-color: rgba(162, 155, 254, 0.5); color: var(--pride-violet); }
.tag-orientation{ background: rgba(84, 160, 255, 0.15);  border-color: rgba(84, 160, 255, 0.5);  color: var(--pride-blue);   }
.tag-pronoun    { background: rgba(29, 209, 161, 0.15);  border-color: rgba(29, 209, 161, 0.5);  color: var(--pride-green);  }
.tag-interest   { background: rgba(255, 159, 67, 0.15);  border-color: rgba(255, 159, 67, 0.5);  color: var(--pride-orange); }

/* ── 10. Badge Premium ─────────────────────────────────────────────────── */
.badge-free     { background: rgba(255,255,255,0.1);       color: var(--pride-text-muted); }
.badge-gold     { background: rgba(254, 202, 87, 0.2);     color: var(--pride-yellow);     border: 1px solid rgba(254,202,87,0.4); }
.badge-platinum { background: rgba(162, 155, 254, 0.2);    color: var(--pride-violet);     border: 1px solid rgba(162,155,254,0.4); }
.badge-diamond  { background: var(--pride-gradient);       color: #fff; }

.badge-premium {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── 11. Barre de progression (onboarding) ─────────────────────────────── */
.pride-progress {
  height: 4px;
  background: var(--pride-border);
  border-radius: 2px;
  overflow: hidden;
}
.pride-progress-bar {
  height: 100%;
  background: var(--pride-gradient);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ── 12. Lien / texte helper ───────────────────────────────────────────── */
.pride-link {
  color: var(--pride-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.pride-link:hover {
  color: var(--pride-accent);
}

/* ── 13. Diviseur ──────────────────────────────────────────────────────── */
.pride-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--pride-text-muted);
  font-size: 0.875rem;
  margin: 24px 0;
}
.pride-divider::before,
.pride-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--pride-border);
}

/* ── 14. Page wrapper pour auth ────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pride-bg);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--pride-bg-card);
  border-radius: var(--pride-radius-lg);
  border: 1px solid var(--pride-border);
  box-shadow: var(--pride-shadow);
  padding: 40px 36px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 32px;
}
.auth-logo h1 {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0;
}
.auth-logo p {
  color: var(--pride-text-muted);
  font-size: 0.9rem;
  margin: 6px 0 0;
}

/* ── 15. Landing Vikinger / auth publique ─────────────────────────────── */

/* ---- Keyframes -------------------------------------------------------- */
@keyframes pride-float-1 {
  0%   { transform: translateY(0)      scale(1);    opacity: 0.20; }
  50%  { transform: translateY(-55px)  scale(1.08); opacity: 0.32; }
  100% { transform: translateY(0)      scale(1);    opacity: 0.20; }
}
@keyframes pride-float-2 {
  0%   { transform: translateY(0)      scale(1);    opacity: 0.14; }
  50%  { transform: translateY(-40px)  scale(1.05); opacity: 0.26; }
  100% { transform: translateY(0)      scale(1);    opacity: 0.14; }
}
@keyframes pride-float-3 {
  0%   { transform: translateY(0)      scale(1);    opacity: 0.10; }
  50%  { transform: translateY(-70px)  scale(1.12); opacity: 0.22; }
  100% { transform: translateY(0)      scale(1);    opacity: 0.10; }
}
@keyframes pride-drift {
  0%   { transform: translate(0,      0)      rotate(0deg);   }
  33%  { transform: translate(14px,  -22px)   rotate(3deg);   }
  66%  { transform: translate(-10px, -38px)   rotate(-2deg);  }
  100% { transform: translate(0,      0)      rotate(0deg);   }
}
@keyframes pride-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
/* Gradient background animé (mouvement lent du fond) */
@keyframes pride-bg-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Animation d'entrée des formulaires */
@keyframes pride-form-enter {
  0%   { opacity: 0; transform: translateY(28px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
/* Twinkle pour étoiles CSS */
@keyframes pride-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.9); }
  50%       { opacity: 0.55; transform: scale(1.2); }
}

/* ---- Container principal ---------------------------------------------- */
/* IMPORTANT : ne PAS override position/height — Vikinger définit
   position:fixed;top:0;left:0;width:100%;height:100% sur .landing.
   On surcharge uniquement le background. */
.landing {
  /* Fond de base : deep space navy — le SVG pride-rings-bg.svg
     est rendu via ::after ; ici on pose juste la couleur de base
     et un léger dégradé pour les navigateurs sans SVG. */
  background-color: #07071a;
  background-image: linear-gradient(160deg, #07071a 0%, #0e0e28 50%, #08101e 100%);
}

/* ---- Couche 2 : SVG illustration silhouettes + étoiles (::before) ----- */
.landing::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* micro-étoiles CSS via radial-gradient repeat */
    radial-gradient(1px 1px at  8%  6%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 19%  3%, rgba(162,155,254,0.70) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 34%  2%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 49%  5%, rgba(84,160,255,0.70) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60%  3%, rgba(255,255,255,0.82) 0%, transparent 100%),
    radial-gradient(1px 1px at 73%  5%, rgba(255,107,157,0.68) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 87%  2%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 96%  7%, rgba(254,202,87,0.72) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 14%, rgba(29,209,161,0.65) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 37% 12%, rgba(255,255,255,0.78) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 10%, rgba(162,155,254,0.65) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 93% 15%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 19%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 54% 18%, rgba(84,160,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 17%, rgba(255,255,255,0.65) 0%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

/* ---- Couche 3 : Anneaux concentriques arc-en-ciel pride (::after) ----- */
.landing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/img/pride-rings-bg.svg') no-repeat center bottom;
  background-size: cover;
  opacity: 0.85;
  z-index: 1;
  pointer-events: none;
}

/* ---- landing-decoration : orbes animés + dot texture Vikinger --------- */
.landing .landing-decoration {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* dot texture Vikinger en overlay très subtil */
  background: url("/vikinger/img/landing/dot-texture.png") repeat left top transparent;
  opacity: 0.20;
}

/* Orbe violet premium (haut gauche) */
.landing .landing-decoration::before {
  content: '';
  position: absolute;
  width: 460px;
  height: 460px;
  top: -100px;
  left: -100px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(95,39,205,0.40) 0%,
    rgba(95,39,205,0.15) 40%,
    rgba(95,39,205,0)    70%);
  animation: pride-float-1 10s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Orbe teal-bleu (bas droite) */
.landing .landing-decoration::after {
  content: '';
  position: absolute;
  width: 540px;
  height: 540px;
  bottom: -140px;
  right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0,210,255,0.28)  0%,
    rgba(84,160,255,0.18) 35%,
    rgba(29,209,161,0.10) 55%,
    transparent           72%);
  animation: pride-float-2 13s ease-in-out infinite 2.5s;
  will-change: transform, opacity;
}

/* ---- Particules colorées (box-shadow trick sur landing-info::before) -- */
.landing-info::before {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(162,155,254,0.65);
  top: 10%;
  left: 7%;
  box-shadow:
    /* couleurs LGBT+ dispersées — (x y blur spread color) */
     28px   76px 0 4px rgba(255,107,107,0.40),
     78px   18px 0 3px rgba(84,160,255,0.45),
    -42px  128px 0 2px rgba(29,209,161,0.40),
    118px  155px 0 5px rgba(254,202,87,0.35),
     58px  196px 0 3px rgba(95,39,205,0.45),
    -22px  236px 0 2px rgba(255,107,157,0.40),
    148px   58px 0 2px rgba(162,155,254,0.45),
    -62px  295px 0 4px rgba(255,107,107,0.30),
    198px  118px 0 3px rgba(29,209,161,0.35),
    -82px  176px 0 2px rgba(0,210,255,0.35),
    102px  275px 0 3px rgba(254,202,87,0.30),
    168px  228px 0 2px rgba(162,155,254,0.40),
     52px  340px 0 3px rgba(255,107,157,0.30),
    225px  180px 0 2px rgba(84,160,255,0.35);
  animation: pride-drift 15s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
  z-index: 3;
}

/* Orbe rose-orange (milieu gauche) */
.landing-info::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  top: 42%;
  left: -70px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,107,157,0.16) 0%,
    rgba(255,159,67,0.10)  40%,
    transparent            68%);
  animation: pride-float-3 18s ease-in-out infinite 4s;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 2;
}

/* ---- Z-index des enfants directs de .landing -------------------------- */
/* IMPORTANT : Vikinger définit position:absolute sur .landing-info et
   .landing-form — ne JAMAIS écraser avec position:relative sinon le
   formulaire sort de l'écran (right:13% ne s'applique plus). */
.landing-info,
.landing-form {
  z-index: 10;
}
.landing > .landing-decoration ~ * {
  z-index: 10;
}

/* ---- Bande arc-en-ciel shimmer en haut du panneau formulaire ---------- */
/* NOTE : pas de position:relative ici — Vikinger met position:absolute sur
   .landing-form, ce qui suffit pour ancrer le ::before */
.landing-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--pride-red)    0%,
    var(--pride-orange) 17%,
    var(--pride-yellow) 33%,
    var(--pride-green)  50%,
    var(--pride-blue)   67%,
    var(--pride-indigo) 83%,
    var(--pride-violet) 100%);
  background-size: 200% auto;
  animation: pride-shimmer 5s linear infinite;
  z-index: 20;
}

/* ---- Form box : glassmorphism PREMIUM --------------------------------- */
.landing .form-box {
  /* fond semi-transparent + blur renforcé */
  background: rgba(14, 16, 30, 0.80);
  backdrop-filter: blur(22px) saturate(1.6) brightness(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(1.6) brightness(1.05);
  /* bordure subtile avec reflet arc-en-ciel */
  border: 1px solid rgba(162,155,254,0.14);
  border-top-color: rgba(255,255,255,0.10);
  /* ombres multi-couches : profondeur + lueur colorée */
  box-shadow:
    0  12px  50px rgba(0,0,0,0.60),
    0   2px  12px rgba(0,0,0,0.40),
    0   0   40px rgba(95,39,205,0.12),
    inset 0  1px   0 rgba(255,255,255,0.07),
    inset 0 -1px   0 rgba(0,0,0,0.25);
  /* animation d'entrée */
  animation: pride-form-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Filet lumineux en haut de chaque form-box */
.landing .form-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(162,155,254,0.45) 30%,
    rgba(84,160,255,0.55)  50%,
    rgba(162,155,254,0.45) 70%,
    transparent);
  border-radius: 50%;
  pointer-events: none;
}

.landing .form-box .form {
  margin-top: 76px;
}

/* ---- Inputs landing — style cohérent --------------------------------- */
.landing .form-input input[type="text"],
.landing .form-input input[type="email"],
.landing .form-input input[type="password"],
.landing .form-input input[type="date"] {
  width: 100%;
  height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(63, 72, 95, 0.80);
  border-radius: 12px;
  background-color: rgba(18, 22, 38, 0.85);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.landing .form-input input[type="text"]:focus,
.landing .form-input input[type="email"]:focus,
.landing .form-input input[type="password"]:focus,
.landing .form-input input[type="date"]:focus {
  border-color: var(--pride-indigo);
  background-color: rgba(22, 28, 48, 0.92);
  box-shadow:
    0 0 0 3px rgba(95,39,205,0.22),
    0 0 18px rgba(95,39,205,0.15);
}

.landing .form-input input:hover:not(:focus) {
  border-color: rgba(162,155,254,0.40);
}

.landing .form-input.active input,
.landing .form-input input:-webkit-autofill {
  caret-color: #fff;
}

/* Autofill override */
.landing .form-input input:-webkit-autofill,
.landing .form-input input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px rgba(18, 22, 38, 0.92) inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}

/* ---- Boutons --------------------------------------------------------- */
.landing .button {
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landing .button.primary {
  box-shadow: 4px 7px 18px rgba(97,93,250,0.30);
}
.landing .button.secondary {
  box-shadow: 4px 7px 14px rgba(97,93,250,0.22);
}
.landing .button.primary:hover,
.landing .button.secondary:hover {
  transform: translateY(-2px);
  box-shadow: 4px 10px 26px rgba(97,93,250,0.45);
}

/* ---- Textes ---------------------------------------------------------- */
.landing .form-text { color: #9aa4bf; }
.landing .form-text a,
.landing .form-link  { color: #adafca; transition: color 0.2s; }
.landing .form-text a:hover,
.landing .form-link:hover { color: #fff; }

/* ---- Landing info — lisibilité -------------------------------------- */
.landing .landing-info-title {
  letter-spacing: 0;
  text-shadow: 0 2px 20px rgba(95,39,205,0.35);
}

/* ---- Messages flash -------------------------------------------------- */
.landing .form-box-message {
  margin-top: 28px;
  margin-bottom: -36px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
}
.landing .form-box-message--error {
  background: rgba(255,107,107,0.12);
  border: 1px solid rgba(255,107,107,0.34);
  color: #ff8a9d;
}
.landing .form-box-message--success {
  background: rgba(79,244,97,0.12);
  border: 1px solid rgba(79,244,97,0.34);
  color: #4ff461;
}

/* ---- Responsive : tablette ------------------------------------------ */
@media (max-width: 768px) {
  /* Réduire les orbes pour éviter l'overflow horizontal */
  .landing .landing-decoration::before {
    width: 280px;
    height: 280px;
    top: -60px;
    left: -60px;
  }
  .landing .landing-decoration::after {
    width: 320px;
    height: 320px;
    bottom: -90px;
    right: -80px;
  }
  .landing-info::after {
    width: 200px;
    height: 200px;
    top: 35%;
    left: -45px;
  }
  /* SVG illustration : légèrement réduite sur tablette */
  .landing::after {
    background-position: center bottom;
    background-size: 130% auto;
    opacity: 0.45;
  }
  /* Particules réduites sur tablette */
  .landing-info::before {
    animation-duration: 18s;
    box-shadow:
       28px   76px 0 3px rgba(255,107,107,0.28),
       78px   18px 0 2px rgba(84,160,255,0.32),
      -42px  128px 0 2px rgba(29,209,161,0.28),
      118px  155px 0 3px rgba(254,202,87,0.25),
       58px  196px 0 2px rgba(95,39,205,0.32),
      -22px  236px 0 2px rgba(255,107,157,0.28);
  }
}

/* ---- Responsive : mobile -------------------------------------------- */
@media (max-width: 480px) {
  /* Background simplifié sur mobile pour performance */
  .landing {
    background-image:
      radial-gradient(ellipse 100% 60% at 50% 0%, rgba(95,39,205,0.22) 0%, transparent 60%),
      radial-gradient(ellipse 80%  50% at 50% 100%, rgba(0,210,255,0.14) 0%, transparent 55%),
      linear-gradient(180deg, #07071a 0%, #0e0e28 100%);
    animation: none;
  }
  .landing::after {
    background-size: 200% auto;
    opacity: 0.30;
  }
  /* Désactiver le filet lumineux sur mobile (performance) */
  .landing .landing-decoration::before,
  .landing .landing-decoration::after {
    display: none;
  }
  .landing-info::before {
    animation-duration: 22s;
    box-shadow:
       28px   76px 0 3px rgba(255,107,107,0.22),
       78px   18px 0 2px rgba(84,160,255,0.26),
      -42px  128px 0 2px rgba(29,209,161,0.22),
      118px  155px 0 3px rgba(254,202,87,0.20),
       58px  196px 0 2px rgba(95,39,205,0.26);
  }
}

/* ---- Respect des préférences d'accessibilité ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .landing,
  .landing .landing-decoration::before,
  .landing .landing-decoration::after,
  .landing-info::before,
  .landing-info::after,
  .landing-form::before,
  .landing .form-box {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Sélecteur de langue — .pr-lang-switcher
   ============================================================ */

.pr-lang-switcher {
  display: flex;
  align-items: center;
}

.pr-lang-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #adafca;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  padding: 4px 8px;
  transition: background .2s, color .2s, border-color .2s;
}

.pr-lang-select:hover,
.pr-lang-select:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--pride-primary, #54A0FF);
  color: #fff;
  outline: none;
}

.pr-lang-select option {
  background: #2d2d3e;
  color: #fff;
}

/* Variante page landing */
.pr-lang-switcher--landing {
  margin-bottom: 20px;
}

.pr-lang-switcher--landing .pr-lang-select {
  font-size: 13px;
  padding: 6px 12px;
}

/* Intégration topbar — entre la nav et l'avatar */
.pr-header__user .pr-lang-switcher {
  margin-right: 12px;
}

/* ============================================================
   LAYOUT GLOBAL — toutes les pages utilisant layout.php
   La grande sidebar #navigation-widget (avec sa figure liquid
   .navigation-widget-cover) n'est pilotée par aucun script de
   toggle fonctionnel côté JS : elle reste donc visible en
   permanence et se superpose au contenu sur TOUTES les pages
   (feed, settings, events, chat, matches, profile...), pas
   seulement sur Discover. On la masque globalement — le rail
   d'icônes #navigation-widget-small (sidebar compacte) reste
   affiché normalement, il n'est pas concerné par ces règles —
   et on recentre .content-grid en conséquence.
   ============================================================ */

#navigation-widget:not(#navigation-widget-small),
.navigation-widget-desktop:not(#navigation-widget-small) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Correctif rail d'icônes (#navigation-widget-small) : les <svg
   class="menu-item-link-icon"> du menu n'ont pas d'attributs
   width/height et vikinger-base.min.css ne fixe pas non plus de
   taille pour cette classe -> le navigateur applique la taille de
   remplacement par défaut (300x150px), ce qui produit une énorme
   icône superposée au contenu ("robot" en surimpression). On fixe
   une taille cohérente avec la zone cliquable de 48px
   (top:14px/left:14px + 20x20 = 48px). */
.menu-item-link-icon {
  width: 20px !important;
  height: 20px !important;
}

/* Sécurité : cacher aussi la cover et tout élément décoratif
   au cas où la sidebar serait ouverte via le toggle burger */
.navigation-widget-cover,
.navigation-widget .user-short-description {
  display: none !important;
}

/* Sécurité ciblée : la déco "rocket" (.form-box-decoration) appartient
   aux pages onboarding (step1-4) qui ne passent PAS par layout.php et
   l'affichent volontairement — on ne la masque donc QUE si elle se
   retrouve par erreur dans une page utilisant layout.php. */
body:not(.page-onboarding) .navigation-widget [class*="sidebar-bot"],
body:not(.page-onboarding) .navigation-widget [class*="sidebar-cover"] {
  display: none !important;
}

/* ── Recentrage global du conteneur de contenu ───────────────────────────
   La grande sidebar Vikinger est masquée (cf. règles ci-dessus), mais
   .content-grid hérite de marges/largeurs pensées pour coexister avec
   elle (pas de margin:auto sur grand écran). Résultat : le contenu reste
   collé à gauche au lieu d'être centré. On recentre explicitement le
   conteneur sur toutes les pages. */
.content-grid {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1360px !important;
  width: 100%;
  padding-left: var(--space-5, 20px) !important;
  padding-right: var(--space-5, 20px) !important;
  box-sizing: border-box;
}

@media (max-width: 680px) {
  .content-grid {
    padding-left: var(--space-3, 12px) !important;
    padding-right: var(--space-3, 12px) !important;
  }
}

/* ============================================================
   Page discover — habillage spécifique
   Le masquage de la sidebar et le recentrage de .content-grid
   sont désormais gérés globalement ci-dessus. Cette section ne
   contient plus que l'habillage visuel propre à Discover.
   ============================================================ */

/* ── Discover — page background immersif ───────────────────────────────── */
body.page-discover {
  background: linear-gradient(160deg, #0d0f1a 0%, #1a1034 50%, #0d0f1a 100%) !important;
  min-height: 100vh;
}

body.page-discover .content-grid,
body.page-discover .grid.medium-space {
  background: transparent;
}

/* ============================================================
   Feedback tactile global des boutons (press premium)
   Vikinger ne définit qu'un :hover ; on ajoute une réponse au clic
   (léger enfoncement) pour une sensation "app" sur chaque CTA :
   envoi chat, profil Like/Pass, filtres, etc. Sobre, jamais gadget.
   La transition couvre transform + couleurs/ombre pour ne rien perdre.
   ============================================================ */
.button,
.btn {
  transition: transform 0.12s cubic-bezier(0.2, 0.7, 0.3, 1),
              background-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease,
              border-color 0.2s ease;
}
.button:active,
.btn:active {
  transform: scale(0.97);
}
.button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--pride-primary-light, #b980d4);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .button:active,
  .btn:active { transform: none; }
}

/* ============================================================
   Heart-pop — petit shot de satisfaction au clic (like / réaction)
   Sobre : un seul rebond doux, sans overshoot agressif ni cartoon.
   ============================================================ */
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.heart-pop {
  animation: heartPop 0.26s ease-out;
  display: inline-block; /* permet le scale même sur un span inline */
}
@media (prefers-reduced-motion: reduce) {
  .heart-pop { animation: none; }
}