/* =========================================================
   ECHOES — Foundations (Phase 1)
   Base layout, typography, variables
   ========================================================= */

/* Font: Exo 2 */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap');

:root {
    /* Typography */
    --font-sans: "Exo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
    /* Base colors Figma */
    --bg: rgb(255, 185, 234);        /* rose pâle */
    --text: #1B1F3B;      /* texte principal Figma */
    --text-74: rgba(27, 31, 59, 0.74);  /* texte logo */
    --text-80: rgba(27, 31, 59, 0.80);  /* texte paragraphe */
    --text-white: #F4F4F4;  /* blanc texte boutons */
    --muted: rgba(27, 31, 59, 0.80);    /* alias pour cohérence */
  
    /* Surfaces translucides */
    --surface: #ffffff;
    --bg-white-70: rgba(255, 255, 255, 0.70);
    --bg-white-85: rgb(255, 221, 245); /* Fond modales (blanc légèrement rosé, plus opaque pour compenser overlay sombre) */
    --border-white-30: rgba(255, 255, 255, 0.30);
    --border: rgba(0, 0, 0, 0.08);
  
    /* Gradient Figma exact */
    --gradient-primary: linear-gradient(180deg, #C6B6F2 0%, #FF8DAA 100%);
  
    /* Accent */
    --accent: #ff6b9d;
    --like-color: #ff6b9d;  /* Couleur cœur like */
  
    /* Boutons */
    --white-btn-bg: rgba(255, 255, 255, 0.6);  /* Opacité boutons blancs (modifiable ici) */
  
    /* Shadows */
    --shadow-hover: 0 6px 20px rgba(198, 182, 242, 0.4);
    --shadow-primary: 0 4px 15px rgba(198, 182, 242, 0.3);
  
    /* Transitions */
    --transition-base: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  
    /* Radius */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 14px;
    --r-md-16: 16px;     /* icônes fonctionnalités */
    --r-xl: 24px;        /* border cards */
    --r-pill: 9999px;    /* très arrondi pills/boutons */
    --r-nav: 20px;       /* header Figma */
  
    /* Border fine */
    --border-fine: 0.8px;
  
    /* Shadow */
    --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.1);
  
    /* Layout */
    --container: 1120px;
    --gutter: 20px;
    --page-pad: 28px;
    --header-width: 1000px;
    --header-height: 70px;
    --header-margin-lr: 75px;
    --header-margin-top: 25px;
    --grid-margin-lr: 25px;
    
    /* Espacements verticaux */
    --space-section: 80px;
    --space-hero-top: 50px;
    --space-hero-bottom: 80px;
    --space-footer-top: 80px;
    --space-section-head: 70px;
    --space-section-actions: 70px;

    /* Background Goo Bubbles - Palette Echoes (CodePen Version) */
    --color-bg1: #e292d1;
    --color-bg2: #e18ee3;
    --color1: 227, 151, 222; /* #e397de */
    --color2: 239, 201, 214; /* #efc9d6 */
    --color3: 228, 157, 197; /* #e49dc5 */
    --color4: 226, 146, 209; /* #e292d1 */
    --color5: 225, 142, 227; /* #e18ee3 */
    --color-interactive: 225, 139, 191; /* #e18bbf */
    --circle-size: 80%;
    --blending: hard-light;
  }
  
  @media (max-width: 768px) {
    :root {
      --page-pad: 16px;
      --header-margin-lr: 20px;
      --header-margin-top: 20px;
      --grid-margin-lr: 16px;
      --space-section: 60px;
      --space-hero-top: 50px;
      --space-hero-bottom: 60px;
      --space-footer-top: 60px;
    }
  }

/* Base document */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent !important;
}

body {
  font-family: var(--font-sans);
  background: transparent !important;
  color: var(--text);
  line-height: 1.6;
}

/* =========================================================
   ECHOES: Animated Background (Goo Bubbles - CodePen Version)
   Compiled from SCSS: assets/scss/components/_echoes-animated-bg.scss
   ========================================================= */

/* Keyframes CodePen (exact) */
@keyframes moveInCircle {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes moveVertical {
  0% { transform: translateY(-60%); }
  50% { transform: translateY(60%); }
  100% { transform: translateY(-60%); }
}

@keyframes moveHorizontal {
  0% { transform: translateX(-60%) translateY(-12%); }
  50% { transform: translateX(60%) translateY(12%); }
  100% { transform: translateX(-60%) translateY(-12%); }
}

/* Background container (CRITIQUE: fixed plein écran, derrière tout, sorti du flux) */
.echoes-animated-bg {
  position: fixed !important;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* CodePen structure (nesting identique) */
.gradient-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
  margin: 0;
  padding: 0;
}

.gradient-bg svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.gradient-bg .gradients-container {
  filter: url(#goo) blur(20px);
  width: 100%;
  height: 100%;
}

.gradient-bg .g1 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color1), 0.9) 0, rgba(var(--color1), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: center center;
  animation: moveVertical 22s ease infinite;
  opacity: 1;
}

.gradient-bg .g2 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color2), 0.9) 0, rgba(var(--color2), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: calc(50% - 400px);
  animation: moveInCircle 16s reverse infinite;
  opacity: 1;
}

.gradient-bg .g3 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color3), 0.9) 0, rgba(var(--color3), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2 + 200px);
  left: calc(50% - var(--circle-size) / 2 - 500px);
  transform-origin: calc(50% + 400px);
  animation: moveInCircle 28s linear infinite;
  opacity: 1;
}

.gradient-bg .g4 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color4), 0.9) 0, rgba(var(--color4), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: calc(50% - 200px);
  animation: moveHorizontal 26s ease infinite;
  opacity: 0.7;
}

.gradient-bg .g5 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color5), 0.9) 0, rgba(var(--color5), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: calc(var(--circle-size) * 2);
  height: calc(var(--circle-size) * 2);
  top: calc(50% - var(--circle-size));
  left: calc(50% - var(--circle-size));
  transform-origin: calc(50% - 800px) calc(50% + 200px);
  animation: moveInCircle 16s ease infinite;
  opacity: 1;
}

.gradient-bg .interactive {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.9) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  opacity: 0.7;
}

/* Contenu au-dessus du background */
#page, .site, .site-content, .site-main, main, header, footer {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Accessibilité : réduire les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .gradient-bg .g1,
  .gradient-bg .g2,
  .gradient-bg .g3,
  .gradient-bg .g4,
  .gradient-bg .g5 {
    animation: none !important;
  }
}

/*------------------------------------------------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Login & Register Forms */
.login-container,
.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem;
}

.login-form-wrapper,
.register-form-wrapper {
    width: 100%;
    max-width: 400px;
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login-form-wrapper h1,
.register-form-wrapper h1 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.form-group input[type="checkbox"] {
    margin-right: 0.5rem;
}

.submit-btn {
    width: 100%;
    padding: 0.75rem;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.submit-btn:hover {
    background: #005a87;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.success-message {
    background: #d4edda;
    color: #155724;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.register-link,
.login-link {
    text-align: center;
    margin-top: 1rem;
}

.register-link a,
.login-link a {
    color: #0073aa;
    text-decoration: none;
}

.register-link a:hover,
.login-link a:hover {
    text-decoration: underline;
}

/* Front Page User Status */
.front-page-content {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
}

.front-page-content h1 {
    margin-bottom: 2rem;
}

.user-status {
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
}

.user-status.logged-in {
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

.user-status.logged-out {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
}

.user-status p {
    margin-bottom: 1rem;
}

.user-status p:last-of-type {
    margin-bottom: 1.5rem;
}

.auth-links {
    display: flex;
    gap: 1rem;
}

.logout-btn,
.login-btn,
.register-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
}

.logout-btn:hover,
.login-btn:hover,
.register-btn:hover {
    background: #005a87;
}

.register-btn {
    background: #28a745;
}

.register-btn:hover {
    background: #218838;
}

/* =========================================================
   HOME + HEADER UI
   Glassmorphism design, cards, grids, buttons
   ========================================================= */

/* Layout Container */
.layout-container {
  max-width: calc(100% - (var(--grid-margin-lr) * 2));
  margin: 0 auto;
  padding-left: var(--grid-margin-lr);
  padding-right: var(--grid-margin-lr);
}

/* Section Spacing */
.section {
  padding-block: var(--space-section);
}

.section + .section {
  margin-top: 0;
}

/* Site Header */
.site-header {
  position: relative;
  position: sticky;
  top: var(--header-margin-top);
  z-index: 100;
  padding: 0 var(--header-margin-lr);
  margin-bottom: 40px;
}

/* Wrappers principaux au-dessus du background animé */
main,
#main-content,
footer.site-footer,
.site-footer--glass {
  position: relative;
  z-index: 1;
}

.nav-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--header-width);
  height: var(--header-height);
  margin: 0 auto;
  background: var(--bg-white-70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-nav);
  padding: 0 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: var(--border-fine) solid var(--border-white-30);
}

.nav-pill__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.nav-pill__logo {
  height: 32px;
  width: auto;
}

.nav-pill__brand-text {
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-74);
  font-family: var(--font-sans);
}

.nav-pill__links {
  display: flex;
  gap: 150px;
  align-items: center;
}

.nav-pill__link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: color 0.2s;
}

.nav-pill__link:hover,
.nav-pill__link:focus {
  color: #FF8DAA;
  outline: none;
}

.nav-pill__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (max-width: 768px) {
  .nav-pill {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    width: 100%;
    height: auto;
    min-height: 60px;
  }
  
  .nav-pill__links {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 24px;
  }
  
  .nav-pill__actions {
    margin-left: auto;
  }
  
  .site-header {
    padding: 0 var(--header-margin-lr);
  }
}
  
  /* =========================================================
     BUTTONS - Unified system
     ========================================================= */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--r-pill);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    line-height: 1.4;
  }
  
  .btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }
  
  /* Primary button (gradient) */
  .btn--primary {
    background: var(--gradient-primary);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    box-shadow: var(--shadow-primary);
  }
  
  .btn--primary:hover,
  .btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
  }
  
  .btn--primary:active {
    transform: translateY(0px);
    box-shadow: var(--shadow-primary);
  }
  
  /* Secondary/Ghost button (white translucent) */
  .btn--ghost {
    background: var(--white-btn-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    border: var(--border-fine) solid var(--border-white-30);
  }
  
  .btn--ghost:hover,
  .btn--ghost:focus-visible {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  
  .btn--ghost:active {
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .btn--lg {
    font-size: 18px;
    line-height: 28px;
  }
  
  /* Tailles boutons Figma spécifiques */
  .home-hero__actions .btn--lg {
    width: 225px;
    min-width: 225px;
    height: 60px;
    padding: 16px 32px;
    justify-content: center;
    white-space: nowrap;
  }
  
  .cta-panel .btn--lg {
    width: 300px;
    height: 60px;
    padding: 16px 32px;
    justify-content: center;
  }  

  .btn--sm {
    width: 108px;
    height: 40px;
    padding: 7.6px 15.194px 8.4px 16px;
    font-size: 14px;
    justify-content: center;
  }
  
  /* Composants boutons Figma (réutilisables - dépréciés, utiliser .btn--primary et .btn--ghost) */
  .btn-gradient {
    background: var(--gradient-primary);
    color: var(--text-white);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-primary);
  }
  
  .btn-white {
    background: var(--white-btn-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    border: var(--border-fine) solid var(--border-white-30);
    border-radius: var(--r-pill);
  }

  /* Composant Pill/Badge */
  .pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8.8px 16.8px;
    background: var(--bg-white-70);
    border: var(--border-fine) solid var(--border-white-30);
    border-radius: var(--r-pill);
  }

/* Section Head */
.section-head {
  text-align: center;
  margin-bottom: var(--space-section-head);
}
  
  .section-head__title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text);
  }
  
  .section-head__subtitle {
    font-size: 18px;
    color: var(--muted);
    font-weight: 400;
  }
  
  @media (max-width: 768px) {
    .section-head__title {
      font-size: 32px;
    }
    
    .section-head__subtitle {
      font-size: 16px;
    }
  }
  
  /* Grid System */
  .grid {
    display: grid;
    gap: 24px;
  }
  
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .grid--cards {
    gap: 20px;
  }
  
  @media (max-width: 1024px) {
    .grid--4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 768px) {
    .grid--3,
    .grid--4 {
      grid-template-columns: 1fr;
    }
  }
  
  /* Cards */
  .card {
    background: var(--bg-white-70);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: var(--border-fine) solid var(--border-white-30);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }
  
  .card--step {
    position: relative;
    min-height: 320px;
    display: flex;
    flex-direction: column;
  }
  
  .card__number {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    box-shadow: var(--shadow-primary);
  }
  
  .card__icon {
    width: 64px;
    height: 64px;
    margin: 24px auto 16px;
    object-fit: contain;
  }
  
  /* Icône avec fond carré gradient pour fonctionnalités */
  .card--feature .card__icon-wrapper {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md-16);
  }

  .card--feature .card__icon-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--gradient-primary);
    border-radius: var(--r-md-16);
    z-index: 0;
  }

  .card--feature .card__icon {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.8);
    z-index: 1;
    display: block; 
    margin: 0;
  }

  .card__title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text);
  }
  
  .card__text {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.6;
  }
  
  /* Echo Cards */
  .echo-card {
    background: var(--bg-white-70);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: var(--border-fine) solid var(--border-white-30);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
  }
  
  .echo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }
  
  .echo-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
  }

  .echo-card__video-thumbnail {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
  }

  .echo-card__video-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  .echo-card__play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background 0.2s ease;
  }

  .echo-card__play-icon svg {
    width: 24px;
    height: 24px;
    margin-left: 3px;
  }

  .echo-card:hover .echo-card__play-icon {
    background: rgba(0, 0, 0, 0.8);
  }
  
  .echo-card__content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    flex: 1;
  }
  
  .echo-card__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
  }
  
  .echo-card__artist {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .echo-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
  }
  
  .tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 107, 157, 0.1);
    color: #ff6b9d;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
  }
  
  .echo-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: auto;
    flex-shrink: 0;
  }
  
  .echo-card__date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
  }
  
  .echo-card__date img {
    width: 14px;
    height: 14px;
  }
  
  .echo-card__actions {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  
  .echo-card__like,
  .echo-card__share,
  .echo-card__comment {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s ease;
  }
  
  .echo-card__like:hover,
  .echo-card__share:hover,
  .echo-card__comment:hover {
    color: var(--text);
  }
  
/* Like state : cœur rouge, nombre reste normal */
.echo-card__like.is-liked img,
.echo-modal-like.is-liked img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(320deg) brightness(100%) contrast(101%);
}
  
  .echo-card__like img,
  .echo-card__share img,
  .echo-card__comment img,
  .echo-card__comment svg {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }
  
  .echo-card__comment svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  /* Home Hero */
  .home-hero {
    text-align: center;
    padding-top: var(--space-hero-top);
    padding-bottom: var(--space-hero-bottom);
  }
  
  .home-hero__inner {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .home-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8.8px 16.8px;
    background: var(--bg-white-70);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--border-fine) solid var(--border-white-30);
    border-radius: var(--r-pill);
    margin-bottom: 25px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
  }
  
  .home-hero__badge img {
    width: 18px;
    height: 18px;
  }
  
  .home-hero__title {
    font-size: 56px;
    font-weight: 700;
    line-height: 67.2px;
    margin-bottom: 30px;
    color: var(--text);
    text-align: center;
  }
  
  .home-hero__description {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: var(--text-80);
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .home-hero__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 50px;
    flex-wrap: wrap;
  }
  
  .home-hero__stats {
    display: flex;
    justify-content: center;
  }
  
  .stat-badge {
    text-align: center;
  }
  
  .stat-badge__value {
    display: block;
    font-size: 48px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
  }
  
  .stat-badge__label {
    display: block;
    font-size: 14px;
    color: var(--muted);
  }
  
  @media (max-width: 768px) {
    .home-hero {
      padding-top: var(--space-hero-top);
      padding-bottom: var(--space-hero-bottom);
    }
    
    .home-hero__title {
      font-size: 36px;
    }
    
    .home-hero__description {
      font-size: 16px;
    }
    
    .home-hero__actions {
      flex-direction: column;
      align-items: stretch;
    }
    
    .home-hero__actions .btn {
      width: 100%;
      justify-content: center;
    }
  }
  
/* Section Actions */
.section-actions {
  text-align: center;
  margin-top: var(--space-section-actions);
}
  
  /* CTA Panel */
  .cta-panel {
    background: transparent;
    padding: 64px 48px;
    text-align: center;
  }
  
  .cta-panel__title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text);
  }
  
  .cta-panel__subtitle {
    font-size: 18px;
    color: var(--muted);
    margin-bottom: 32px;
    line-height: 1.6;
  }
  
  @media (max-width: 768px) {
    .cta-panel {
      padding: 48px 24px;
    }
    
    .cta-panel__title {
      font-size: 28px;
    }
    
    .cta-panel__subtitle {
      font-size: 16px;
    }
  }

/* Wrappers principaux au-dessus du background animé */
header.site-header,
main,
#main-content,
footer.site-footer,
.site-footer--glass {
  position: relative;
  z-index: 1;
}

/* Footer - Style Glassmorphism (uniquement sur Home) */
.site-footer--glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px 24px 0 0;
  padding: 64px 0 40px;
  margin-top: var(--space-footer-top);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
  position: relative;
}

.footer-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--grid-margin-lr);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}

/* Colonne gauche : Logo + Description + Socials */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-brand__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.footer-brand__logo-img {
  height: 32px;
  width: auto;
  /* Pas de filtre : garder les couleurs d'origine du logo */
}

.footer-brand__text {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-sans);
}

.footer-brand__description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  max-width: 320px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.footer-social__link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  transition: all 0.2s ease;
  color: rgba(255, 255, 255, 0.9);
}

.footer-social__link:hover {
  background: rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
  color: rgba(255, 255, 255, 1);
}

.footer-social__link svg {
  width: 20px;
  height: 20px;
}

/* Colonnes Explorer et À propos */
.footer-column {
  display: flex;
  flex-direction: column;
}

.footer-column__title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20px;
  font-family: var(--font-sans);
}

.footer-column__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-column__list li {
  margin: 0;
}

.footer-column__list a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
  font-family: var(--font-sans);
}

.footer-column__list a:hover {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

/* Texte non cliquable dans "À propos" */
.footer-column__text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-family: var(--font-sans);
  cursor: default;
  display: block;
}

/* Séparateur */
.footer-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 32px 0;
  width: 100%;
}

/* Copyright */
.footer-bottom {
  text-align: center;
}

.footer-bottom__text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .site-footer--glass {
    padding: 48px 0 32px;
    border-radius: 20px 20px 0 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-brand__description {
    max-width: 100%;
  }

  .footer-social {
    margin-top: 8px;
  }
}

  .skip-link {
    position: absolute;
    top: -40px;
    left: 16px;
    background: #000;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    z-index: 1000;
    text-decoration: none;
    font-size: 14px;
  }
  
  .skip-link:focus {
    top: 16px;
  }

  /* Layout Container */
  .layout-container {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }

/* =========================================================
   PAGE DÉCOUVRIR
   ========================================================= */
.page-decouvrir {
  width: 100%;
  padding-bottom: 5px;
}

.page-decouvrir__inner {
  width: 100%;
  padding: 40px 0;
  padding-bottom: 5px;
}

/* Hero Section */
.page-decouvrir__hero {
  text-align: center;
  margin-bottom: 48px;
}

.page-decouvrir__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 16px;
}

.page-decouvrir__subtitle {
  font-size: 18px;
  color: var(--text-80);
  margin-bottom: 32px;
}

.page-decouvrir__search-form {
  max-width: 672px;
  margin: 0 auto;
}

.page-decouvrir__search {
  position: relative;
  display: flex;
  align-items: center;
}

.page-decouvrir__search-submit {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 1;
}

.page-decouvrir__search-submit:hover {
  color: var(--text);
}

.page-decouvrir__search-submit svg {
  width: 100%;
  height: 100%;
}

.page-decouvrir__search-input {
  width: 100%;
  height: 57.6px;
  padding: 16px 16px 16px 48px;
  border: var(--border-fine) solid var(--border-white-30);
  border-radius: var(--r-pill);
  background: var(--bg-white-70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 16px;
  color: var(--text);
  font-family: var(--font-sans);
}

.page-decouvrir__search-input::placeholder {
  color: var(--muted);
}

.page-decouvrir__search-input:focus {
  outline: 2px solid rgba(198, 182, 242, 0.5);
  outline-offset: 2px;
}

/* Filters Section */
.page-decouvrir__filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 55px;
  margin-top: 55px;
  gap: 24px;
  flex-wrap: wrap;
}

.page-decouvrir__filters-left {
  flex: 1;
  min-width: 300px;
}

.page-decouvrir__filters-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.page-decouvrir__filters-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  display: none; /* Cacher le titre "Filtrer par tags" selon Figma */
}

.mood-filter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
}

/* Grid layout : Entonnoir fixe (col1) + Tags/Actions (col2) - 2 rangées pour fixer l'icône */
.page-decouvrir__filters-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 5px;
  align-items: start;
}

/* Rangée 1, Colonne 1 : Entonnoir (fixe sur la première ligne uniquement) */
.page-decouvrir__filter-icon {
  color: var(--text);
  opacity: 0.6;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  grid-row: 1;
  grid-column: 1;
  align-self: center;
}

/* Rangée 1, Colonne 2 : Tags wrapper */
.page-decouvrir__tags-row-wrapper {
  grid-row: 1;
  grid-column: 2;
}

/* Ligne 1 : Tags */
.page-decouvrir__tags-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 0;
  padding-top: 2px; /* Espace pour hover translateY(-1px) */
}

/* En mode "Voir plus", autoriser le wrap avec gap vertical */
.page-decouvrir__tags-row .extra-tag {
  display: none;
}

.page-decouvrir.is-expanded .page-decouvrir__tags-row .extra-tag {
  display: inline-flex;
}

.page-decouvrir.is-expanded .page-decouvrir__tags-row {
  flex-wrap: wrap;
  row-gap: 7px;
  column-gap: 14px;
}

/* Rangée 2, Colonne 2 : Actions (alignées avec le début des tags) */
.page-decouvrir__filters-row--actions {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  align-items: center;
  margin-top: 7px;
  padding-left: 0;
}

.page-decouvrir__trend-icon {
  color: var(--text);
  opacity: 0.8;
  flex-shrink: 0;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--bg-white-70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--border-fine) solid var(--border-white-30);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-base);
  position: relative;
}

.tag-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tag-item:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

.tag-item:focus,
.tag-item:active {
  outline: none;
  box-shadow: none;
  border-top: none;
}

.tag-item:focus-visible {
  outline: 2px solid rgba(198, 182, 242, 0.3);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(198, 182, 242, 0.15);
  border-top: none;
}

.tag-item input[type="checkbox"]:checked + *,
.tag-item:has(input[type="checkbox"]:checked),
.tag-item.is-active {
  background: var(--gradient-primary);
  color: var(--text-white);
  border-color: transparent;
}

.tag-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Harmonisation des 3 boutons actions tags sur page Découvrir - Plus petits et moins dominants */
.page-decouvrir .tag-actions .btn {
  height: 36px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 13px;
  transition: var(--transition-base);
}

/* Voir plus / Tous : style ghost */
.page-decouvrir .tag-actions .btn--ghost {
  background: var(--white-btn-bg);
  color: var(--text);
  border: var(--border-fine) solid var(--border-white-30);
}

.page-decouvrir .tag-actions .btn--ghost:hover,
.page-decouvrir .tag-actions .btn--ghost:focus {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Appliquer : style dark élégant */
.page-decouvrir .tag-actions .btn--primary {
  background: #0f172a;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}

.page-decouvrir .tag-actions .btn--primary:hover,
.page-decouvrir .tag-actions .btn--primary:focus {
  background: #1e293b;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}

/* Media Filter */
.media-filter {
  display: flex;
  gap: 8px;
  align-items: center;
}

.media-filter__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--bg-white-70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--border-fine) solid var(--border-white-30);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-base);
  text-align: center;
  line-height: 1;
}

.media-filter__item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.media-filter__item:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* État actif pour les radios media - NOIR selon Figma */
.media-filter__item:has(input[type="radio"]:checked) {
  background: #0f172a;
  color: #ffffff;
  border-color: transparent;
}

.media-filter__item input[type="radio"]:checked {
  position: absolute;
}

/* Privacy Filter - Réutilise les mêmes classes que media pour cohérence totale */
/* Le conteneur privacy utilise maintenant .media-filter et .media-filter__item */
.page-decouvrir__privacy-filters {
  display: flex;
  gap: 8px;
}

#privacy-toggle-container,
#privacy-filter-form,
#media-filter-trends-form,
.media-filter-form,
.media-filter {
  position: relative;
  z-index: 100;
  pointer-events: auto;
}

/* Privacy Filter - Style identique à Photos/Vidéos/Tout */
/* Le conteneur privacy utilise .media-filter__item comme les media filters */
/* Override minimal pour garantir le centrage du texte */
#privacy-toggle-container .media-filter__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#privacy-toggle-container .media-filter__item span {
  margin: 0;
  padding: 0;
  display: inline;
  width: auto;
  line-height: inherit;
}

/* Sections */
.page-decouvrir__section {
  margin-bottom: 64px;
}

.page-decouvrir__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  z-index: 100;
}

.page-decouvrir__section-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-decouvrir__section-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.page-decouvrir__trend-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Grid */
.page-decouvrir__grid {
  margin-bottom: 32px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

/* Cards - Remove border on discover page (toujours, même en recherche) */
.page-decouvrir .echo-card {
  border: none !important;
  outline: none !important;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* S'assurer qu'il n'y a pas de border blanc ajouté en mode recherche */
.page-decouvrir .echo-card:focus,
.page-decouvrir .echo-card:active,
.page-decouvrir .echo-card:focus-visible,
.page-decouvrir .echo-card:hover {
  border: none !important;
  outline: none !important;
}

/* Forcer le même style de shadow partout */
.page-decouvrir .echo-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* CORRECTION : Lien cliquable sur toute la card pour rediriger vers single echo */
/* Cause : les cards n'avaient pas de lien, donc clic ne faisait rien */
/* IMPORTANT : flex colonne + height: 100% pour que le footer soit toujours en bas */
.page-decouvrir .echo-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1;
  height: 100%;
  box-sizing: border-box;
}

/* Image avec aspect-ratio fixe pour uniformiser les cards - ratio plus grand pour image plus visible */
.page-decouvrir .echo-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
}

/* Content prend l'espace disponible et pousse le footer en bas */
.page-decouvrir .echo-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 20px;
}

/* Footer toujours en bas grâce à margin-top: auto */
.page-decouvrir .echo-card__footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* Les boutons like/comment/share doivent être au-dessus du lien */
.page-decouvrir .echo-card__actions,
.page-decouvrir .echo-card__actions * {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* Empêcher le lien de recouvrir les boutons interactifs */
.page-decouvrir .echo-card__actions a,
.page-decouvrir .echo-card__actions button,
.page-decouvrir .echo-card__actions [role="button"] {
  pointer-events: auto;
}

/* Load More - Bouton plus petit */
.page-decouvrir__load-more {
  text-align: center;
  margin-top: 48px;
}

.page-decouvrir__load-more .btn {
  height: 40px;
  padding: 8px 20px;
  font-size: 14px;
}

/* Empty State */
.page-decouvrir__empty {
  text-align: center;
  color: var(--muted);
  font-size: 18px;
  padding: 64px 0;
}

/* Responsive */
@media (max-width: 768px) {
  .page-decouvrir {
    padding: 24px var(--page-pad);
  }
  
  .page-decouvrir__title {
    font-size: 36px;
  }
  
  .page-decouvrir__subtitle {
    font-size: 16px;
  }
  
  .page-decouvrir__filters {
    flex-direction: column;
  }
  
  .page-decouvrir__filters-right {
    justify-content: flex-start;
    width: 100%;
  }
  
  .page-decouvrir__section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .page-decouvrir__section-title {
    font-size: 28px;
  }
}

/* =========================================================
   CORRECTIONS FINALES PAGE DÉCOUVRIR
   Bugs fixes et harmonisations UI
   ========================================================= */

/* 1) Harmonisation style Public/Amis avec Photos/Vidéos/Tout (pixel-identique) */
.page-decouvrir .media-filter__item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}


/* 2) Corriger hover coupé des tags - s'assurer qu'aucun parent ne coupe */
.page-decouvrir__tags-row-wrapper {
  overflow: visible !important;
}

.page-decouvrir__tags-row {
  overflow: visible !important;
  padding-top: 2px; /* Espace pour hover translateY(-1px) sans couper */
}

.mood-filter {
  overflow: visible !important;
}

/* 3) Alignement icône entonnoir - déjà géré par le grid 2 rangées */
.page-decouvrir__filter-icon {
  align-self: center !important;
  margin-top: 0 !important;
}

/* 4) Alignement icône "Tendances de la semaine" - centrage vertical parfait */
.page-decouvrir__section-title {
  align-items: center !important;
}

.page-decouvrir__trend-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

/* 5) Harmoniser animations des boutons actions (Voir plus/Appliquer/Tous) */
.page-decouvrir .tag-actions .btn,
.page-decouvrir__filters-row--actions .btn {
  transition: var(--transition-base) !important;
}

.page-decouvrir .tag-actions .btn:hover,
.page-decouvrir__filters-row--actions .btn:hover,
.page-decouvrir .tag-actions .btn:focus,
.page-decouvrir__filters-row--actions .btn:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.page-decouvrir .tag-actions .btn--primary:hover,
.page-decouvrir__filters-row--actions .btn--primary:hover,
.page-decouvrir .tag-actions .btn--primary:focus,
.page-decouvrir__filters-row--actions .btn--primary:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3) !important;
}

/* ========================================
   MODAL SINGLE ECHO
   ======================================== */

/* Overlay avec fond flou renforcé */
#echo-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  z-index: 100000;
  padding: 24px;
}

/* Modal container - Large et agréable (version premium de la card) */
#echo-modal {
  width: min(600px, 92vw);
  max-width: 600px;
  max-height: 95vh;
  overflow: hidden;
  background: var(--bg-white-85);
  border-radius: var(--r-xl);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 100001;
}

/* Forcer la même taille exacte dans tous les contextes (y compris depuis Playlist) */
#echo-modal-overlay #echo-modal {
  width: min(600px, 92vw) !important;
  max-width: 600px !important;
}

/* Modale Echo ouverte depuis Playlist : 3px plus grande */
#playlist-view-modal.is-open ~ #echo-modal-overlay #echo-modal,
body:has(#playlist-view-modal.is-open) #echo-modal-overlay.echo-modal-from-playlist #echo-modal {
  width: min(586px, 92vw) !important;
  max-width: 586px !important;
}

/* Bouton fermer */
#echo-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 10000;
}

#echo-modal-close:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

#echo-modal-close:focus {
  outline: 2px solid var(--gradient-primary);
  outline-offset: 2px;
}

/* Contenu du modal - scrollable sans scrollbar visible */
#echo-modal-content {
  padding: 0;
  overflow-y: hidden; /* Pas de scroll par défaut */
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Cacher la scrollbar mais garder le scroll quand activé */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

#echo-modal-content::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Activer le scroll uniquement quand les commentaires sont ouverts */
#echo-modal-content.has-comments-open {
  overflow-y: auto;
}

/* Loader */
.echo-modal-loader {
  padding: 40px;
  text-align: center;
  color: var(--text);
  font-size: 16px;
}

/* Empêcher le scroll du body quand le modal est ouvert */
body.modal-open {
  overflow: hidden;
}

/* ========================================
   CARTE MODAL - Style cohérent avec le site
   ======================================== */

.echo-modal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Wrapper image avec overlay preview */
.echo-modal-image-wrapper {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.02);
  height: 0;
  padding-bottom: 67%; /* 16:9 aspect ratio légèrement augmenté pour +5px de hauteur */
}

/* Image/Vidéo en haut - remplit 100% sans bords */
.echo-modal-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Overlay preview audio discret en bas à droite */
.echo-modal-preview-overlay {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-pill);
  z-index: 100 !important;
  max-width: calc(100% - 24px);
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: background 0.2s ease;
}

.echo-modal-preview-overlay.is-playing .echo-modal-preview-play::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: preview-pulse 1.5s ease-in-out infinite;
  z-index: -1;
}

@keyframes preview-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.echo-modal-preview-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
  max-width: 180px;
}

.echo-modal-preview-title {
  font-size: 11px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.echo-modal-preview-artist {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.echo-modal-preview-play {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
  padding: 0;
  position: relative;
}

.echo-modal-preview-play:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}

.echo-modal-preview-play svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* Corps de la carte - structure identique aux cards du feed */
.echo-modal-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.echo-modal-content {
  padding: 24px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* Fond opaque identique aux cards */
  
}

/* Musique */
.echo-modal-music {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--r-pill);
  margin-bottom: 8px;
}

.echo-modal-music-title {
  font-size: 14px;
  color: var(--text);
  flex: 1;
}

.echo-modal-music-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--gradient-primary);
  color: white;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.echo-modal-music-play:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(198, 182, 242, 0.4);
}

.echo-modal-music-no-preview {
  font-size: 12px;
  color: var(--muted);
}

/* Titre - version premium (+25%) */
.echo-modal-title {
  font-size: 30px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px 0;
  line-height: 1.3;
}

/* Artiste - version premium (+20%) */
.echo-modal-artist {
  font-size: 19px;
  color: var(--muted);
  margin: 0 0 18px 0;
}

/* Description - version premium (+25%) */
.echo-modal-description {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 22px 0;
}

/* Tags - style identique au feed avec gradient, version premium (+25%) */
.echo-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.echo-modal-tags .tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 107, 157, 0.1);
  color: #ff6b9d;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
}

/* Footer (date + actions) - collé en bas comme dans les cards */
.echo-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: auto;
  flex-shrink: 0;
}

.echo-modal-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  color: var(--muted);
}

.echo-modal-date img {
  width: 18px;
  height: 18px;
}

.echo-modal-actions {
  display: flex;
  gap: 18px;
  align-items: center;
}

.echo-modal-like,
.echo-modal-share,
.echo-modal-comment {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.echo-modal-like:hover,
.echo-modal-share:hover,
.echo-modal-comment:hover {
  color: var(--text);
}

.echo-modal-like img,
.echo-modal-share img,
.echo-modal-comment img,
.echo-modal-comment svg {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.echo-modal-comment svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Panel commentaires - UI app-like simplifiée */
.echo-modal-comments-panel {
  padding: 24px 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--bg-white-70);
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  /* Cacher la scrollbar mais garder le scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.echo-modal-comments-panel::-webkit-scrollbar {
  display: none;
}

.echo-modal-comments-loading,
.echo-modal-comments-error,
.echo-modal-comments-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
}

.echo-modal-comments-content {
  padding: 0;
}

/* Simplification du formulaire WordPress - UI app-like */
.echo-modal-comments-panel .comment-form {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Masquer TOUS les textes et champs WordPress inutiles */
.echo-modal-comments-panel .comment-form-author,
.echo-modal-comments-panel .comment-form-email,
.echo-modal-comments-panel .comment-form-url,
.echo-modal-comments-panel .comment-form-cookies-consent {
  display: none !important;
}

/* Cacher TOUS les textes boilerplate WP */
.echo-modal-comments-panel .comment-reply-title,
.echo-modal-comments-panel h3.comment-reply-title,
.echo-modal-comments-panel h2.comment-reply-title,
.echo-modal-comments-panel .comment-notes,
.echo-modal-comments-panel .comment-form-comment .required,
.echo-modal-comments-panel .form-allowed-tags,
.echo-modal-comments-panel .comment-notes-required,
.echo-modal-comments-panel p.comment-notes,
.echo-modal-comments-panel p.comment-notes-required,
.echo-modal-comments-panel .logged-in-as {
  display: none !important;
}

/* Cacher les paragraphes contenant les textes indésirables */
.echo-modal-comments-panel p:contains("Leave a reply"),
.echo-modal-comments-panel p:contains("Your email address"),
.echo-modal-comments-panel p:contains("Required fields"),
.echo-modal-comments-panel p:contains("will not be published") {
  display: none !important;
}

/* Champ commentaire simplifié */
.echo-modal-comments-panel .comment-form-comment {
  margin-bottom: 16px;
}

.echo-modal-comments-panel .comment-form-comment label {
  display: none;
}

.echo-modal-comments-panel .comment-form-comment textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-md);
  font-size: 15px;
  font-family: var(--font-sans);
  resize: vertical;
  min-height: 60px;
  max-height: 120px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--text);
}

.echo-modal-comments-panel .comment-form-comment textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.8);
}

/* Bouton submit stylisé */
.echo-modal-comments-panel .form-submit {
  margin: 0;
}

.echo-modal-comments-panel .form-submit input[type="submit"] {
  padding: 12px 24px;
  background: #1B1F3B;
  color: var(--text-white);
  border: none;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.echo-modal-comments-panel .form-submit input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(198, 182, 242, 0.4);
}

/* Liste des commentaires */
.echo-modal-comments-panel .comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.echo-modal-comments-panel .comment {
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.echo-modal-comments-panel .comment:last-child {
  border-bottom: none;
}

.echo-modal-comments-panel .comment-author {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
  margin-bottom: 4px;
}

.echo-modal-comments-panel .comment-author a {
  color: var(--text);
  text-decoration: none;
}

.echo-modal-comments-panel .comment-author a:hover {
  text-decoration: none;
}

.echo-modal-comments-panel .comment-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.echo-modal-comments-panel .comment-meta a {
  color: var(--muted);
  text-decoration: none;
}

.echo-modal-comments-panel .comment-meta a:hover {
  text-decoration: none;
}

.echo-modal-comments-panel .comment-content {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin-top: 8px;
}

.echo-modal-comments-panel .comment-content p {
  margin: 0 0 8px 0;
}

.echo-modal-comments-panel .comment-content a {
  color: var(--accent);
  text-decoration: none;
}

.echo-modal-comments-panel .comment-content a:hover {
  text-decoration: none;
}

/* Désactiver/cacher les liens Reply dans la modal (éviter redirections) */
.echo-modal-comments-panel .comment-reply-link,
.echo-modal-comments-panel a.comment-reply-link {
  display: none !important;
}

/* Styliser tous les liens dans les commentaires (pas de bleu souligné) */
.echo-modal-comments-panel a {
  color: var(--text);
  text-decoration: none;
}

.echo-modal-comments-panel a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* Avatar simple */
.echo-modal-comments-panel .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  background: var(--accent);
  display: inline-block;
  vertical-align: middle;
}

/* Message "Aucun commentaire" */
.echo-modal-comments-panel .comment-list:empty::before,
.echo-modal-comments-panel .no-comments {
  display: block;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  font-style: italic;
}

/* Si utilisateur non connecté, afficher un message simple */
.echo-modal-comments-panel .must-log-in {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--r-md);
}

/* Audio caché */
.echo-modal-audio {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  #echo-modal {
    width: 100%;
    max-height: 95vh;
    border-radius: 24px 24px 0 0;
    margin-top: auto;
  }
  
  #echo-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  
  .echo-modal-body {
    padding: 24px;
  }
  
  .echo-modal-title {
    font-size: 24px;
  }
  
  .echo-modal-cta {
    flex-direction: column;
  }
  
  .echo-modal-spotify-btn,
  .echo-modal-share-btn {
    width: 100%;
  }
}

/* =========================================================
   CREATE ECHO PAGE - Layout 2 colonnes + Cards
   ========================================================= */

.create-echo-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--page-pad);
}

.create-echo-header {
  text-align: center;
  margin-bottom: 60px; /* Réduit de 5px (48px → 43px) pour décaler vers le haut */
}

.create-echo-title {
  font-size: 42px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.create-echo-subtitle {
  font-size: 18px;
  color: var(--muted);
  font-weight: 400;
}

.create-echo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.create-echo-col-left,
.create-echo-col-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Cards style (identique au feed) */
.create-echo-card {
  background: var(--bg-white-70);
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: var(--border-fine) solid var(--border-white-30);
}

.create-echo-card-title {
  font-size: 24px; /* Augmenté de +4px (20px → 24px) */
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.create-echo-card-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}

/* Form groups dans les cards */
.create-echo-card .form-group {
  margin-bottom: 20px;
}

.create-echo-card .form-group:last-child {
  margin-bottom: 0;
}

.create-echo-card label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.create-echo-card input[type="text"],
.create-echo-card input[type="date"],
.create-echo-card input[type="file"],
.create-echo-card textarea,
.create-echo-card select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-md);
  font-size: 15px;
  font-family: var(--font-sans);
  background: rgba(255, 255, 255, 0.5);
  color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.create-echo-card input[type="text"]:focus,
.create-echo-card input[type="date"]:focus,
.create-echo-card textarea:focus,
.create-echo-card select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.8);
}

.create-echo-card textarea {
  resize: vertical;
  min-height: 100px;
}

/* Wrapper pour input date avec icône calendrier */
.date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.date-input-icon {
  position: absolute;
  right: 16px;
  width: 18px;
  height: 18px;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.date-input-wrapper input[type="date"] {
  padding-right: 44px; /* Espace pour l'icône à droite */
  /* Cacher l'icône calendrier native du navigateur */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

/* Cacher l'icône calendrier native dans différents navigateurs */
.date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  appearance: none;
  -webkit-appearance: none;
}

.date-input-wrapper input[type="date"]::-webkit-inner-spin-button,
.date-input-wrapper input[type="date"]::-webkit-outer-spin-button {
  display: none;
  -webkit-appearance: none;
}

/* Tags wrapper */
.create-echo-tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.create-echo-tag-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.create-echo-tag-label input[type="checkbox"] {
  display: none;
}

.create-echo-tag-text {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 107, 157, 0.1);
  color: #ff6b9d;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}

.create-echo-tag-label input[type="checkbox"]:checked + .create-echo-tag-text {
  background: rgba(255, 107, 157, 0.25);
  color: #ff6b9d;
}

/* Privacy select styling */
.create-echo-card select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231B1F3B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Bouton submit */
.create-echo-submit-btn {
  width: 100%;
  padding: 16px 32px;
  background: var(--gradient-primary);
  color: var(--text-white);
  border: none;
  border-radius: var(--r-pill);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 8px;
}

.create-echo-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(198, 182, 242, 0.4);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .create-echo-page {
    padding: 24px var(--gutter);
  }

  .create-echo-title {
    font-size: 32px;
  }

  .create-echo-subtitle {
    font-size: 16px;
  }

  .create-echo-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .create-echo-col-left,
  .create-echo-col-right {
    gap: 20px;
  }

  .create-echo-card {
    padding: 20px;
  }
}

/* =========================================================
   MUSIC CARD - Style bloc "Musique associée"
   ========================================================= */

/* Masquer le label pour le champ recherche */
.music-card .music-form-group label {
  display: none;
}

/* Wrapper recherche avec icône loupe */
.music-card .music-search-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.music-card .music-search-wrapper::before {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 1;
}

.music-card .music-search {
  width: 100%;
  height: 44px;
  padding: 12px 44px 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-family: var(--font-sans);
  background: rgba(255, 255, 255, 0.3);
  color: var(--text);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.music-card .music-search:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.5);
}

.music-card .music-search::placeholder {
  color: rgba(27, 31, 59, 0.5);
}

/* Texte "Suggestions basées sur vos goûts" */
.music-card .music-hint {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
  margin-top: 0;
}

/* Liste des tracks */
.music-card .track-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Item track */
.music-card .track-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-md);
  transition: background 0.2s ease;
  cursor: pointer;
}

.music-card .track-item:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Icône musique (carré noir arrondi) */
.music-card .track-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: #1B1F3B;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.music-card .track-icon svg {
  width: 20px;
  height: 20px;
}

/* Meta (titre + artiste) */
.music-card .track-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.music-card .track-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-card .track-artist {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Actions (durée + play) */
.music-card .track-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.music-card .track-duration {
  font-size: 13px;
  color: var(--muted);
  min-width: 40px;
  text-align: right;
}

/* Bouton play rond gradient */
.music-card .track-play {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: none;
  background: var(--gradient-primary);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  position: relative;
}

.music-card .track-play:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(198, 182, 242, 0.4);
}

.music-card .track-play svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* État pause : 2 barres verticales */
.music-card .track-item.is-playing .track-play svg {
  display: none;
}

.music-card .track-item.is-playing .track-play::before,
.music-card .track-item.is-playing .track-play::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 12px;
  background: white;
  border-radius: 1px;
  top: 50%;
  transform: translateY(-50%);
}

.music-card .track-item.is-playing .track-play::before {
  left: calc(50% - 4px);
}

.music-card .track-item.is-playing .track-play::after {
  right: calc(50% - 4px);
}

/* Animation de pulsation (ring) - utiliser un pseudo-élément sur le parent */
.music-card .track-item.is-playing::before {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(198, 182, 242, 0.3);
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  animation: track-pulse-ring 1.5s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.music-card .track-item.is-playing .track-play {
  position: relative;
  z-index: 1;
}

@keyframes track-pulse-ring {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-50%) scale(1.4);
    opacity: 0;
  }
}

/* État "no preview" */
.music-card .spotify-no-preview {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Musique sélectionnée - même style que track-item */
.music-card .spotify-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.3);
  margin-top: 16px;
  cursor: default;
}

/* Bouton "Changer" stylisé */
.music-card .track-change-btn {
  padding: 8px 16px;
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.music-card .track-change-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(198, 182, 242, 0.4);
}

.music-card .track-change-btn:active {
  transform: translateY(0);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .music-card .track-item {
    padding: 10px;
    gap: 10px;
  }

  .music-card .track-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .music-card .track-play {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  .music-card .track-duration {
    font-size: 12px;
    min-width: 35px;
  }

  .music-card .spotify-selected {
    padding: 10px;
    gap: 10px;
  }

  .music-card .track-change-btn {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* =========================================================
   PRIVACY OPTIONS - Style section Confidentialité
   Ciblage spécifique avec .create-echo-page pour éviter les conflits
   ========================================================= */

.create-echo-page .echoes-privacy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Item option : flex row avec icône gauche, texte centre, dot droite */
.create-echo-page .echoes-privacy .privacy-option {
  display: flex !important; /* Force flex pour éviter override */
  flex-direction: row !important; /* Force row pour layout horizontal */
  align-items: center !important; /* Centre verticalement tous les éléments */
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-white-70);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.create-echo-page .echoes-privacy .privacy-option:hover {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.15);
}

/* Input radio caché mais accessible */
.create-echo-page .echoes-privacy .privacy-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* État checked : dot rempli avec gradient fluide (un seul gradient, pas de bandes) */
.create-echo-page .echoes-privacy .privacy-option input[type="radio"]:checked ~ .privacy-option-dot {
  background: radial-gradient(circle at center, #C6B6F2 0%, #FF8DAA 100%);
  border-color: transparent;
}

.create-echo-page .echoes-privacy .privacy-option input[type="radio"]:checked ~ .privacy-option-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  z-index: 1;
}

/* Highlight sur l'item entier quand sélectionné (fond plus opaque) */
.create-echo-page .echoes-privacy .privacy-option.checked {
  background: rgba(255, 255, 255, 0.85) !important; /* Fond plus opaque pour highlight */
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(255, 107, 157, 0.15);
}

/* Support moderne :has() si disponible */
@supports selector(:has(*)) {
  .create-echo-page .echoes-privacy .privacy-option:has(input[type="radio"]:checked) {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(255, 107, 157, 0.15);
  }
}

/* Icône à gauche */
.create-echo-page .echoes-privacy .privacy-option-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  order: 1; /* Force l'ordre : icône en premier */
}

.create-echo-page .echoes-privacy .privacy-option-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* Contenu texte au centre (titre + sous-texte en colonne) */
.create-echo-page .echoes-privacy .privacy-option-content {
  flex: 1 !important; /* Prend tout l'espace disponible */
  display: flex !important;
  flex-direction: column !important; /* Titre et sous-texte en colonne */
  gap: 2px;
  min-width: 0;
  order: 2; /* Force l'ordre : texte au milieu */
}

.create-echo-page .echoes-privacy .privacy-option-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: block;
  line-height: 1.3;
}

.create-echo-page .echoes-privacy .privacy-option-subtitle {
  font-size: 13px;
  color: var(--muted);
  display: block;
  line-height: 1.3;
}

/* Dot radio à droite */
.create-echo-page .echoes-privacy .privacy-option-dot {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  order: 3; /* Force l'ordre : dot en dernier (à droite) */
}

/* Mobile responsive */
@media (max-width: 768px) {
  .create-echo-page .echoes-privacy .privacy-option {
    padding: 12px 14px;
    gap: 10px;
  }

  .create-echo-page .echoes-privacy .privacy-option-icon {
    width: 28px;
    height: 28px;
  }

  .create-echo-page .echoes-privacy .privacy-option-icon img {
    width: 20px;
    height: 20px;
  }

  .create-echo-page .echoes-privacy .privacy-option-title {
    font-size: 14px;
  }

  .create-echo-page .echoes-privacy .privacy-option-subtitle {
    font-size: 12px;
  }
}

/* =========================================================
   CREATE ECHO - Icônes des titres de cartes
   ========================================================= */

.create-echo-card-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* =========================================================
   CREATE ECHO - Zone d'upload drag & drop
   ========================================================= */

.upload-zone-wrapper {
  margin-bottom: 0;
}

.upload-zone {
  position: relative;
  border: 2px dashed rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.3);
  padding: 40px 20px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-zone:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.4);
}

.upload-zone-dragover {
  border-color: var(--accent);
  background: rgba(255, 107, 157, 0.1);
}

.upload-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.upload-zone-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 0.6;
}

.upload-zone-text-main {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.upload-zone-text-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.upload-zone-formats {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.upload-format {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
}

/* État sélectionné (fichier choisi) */
.upload-zone-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  width: 100%;
}

.upload-file-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.1);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.upload-remove:hover {
  background: rgba(0, 0, 0, 0.15);
}

/* Cacher les inputs file natifs */
.upload-input-hidden {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .upload-zone {
    padding: 30px 16px;
    min-height: 160px;
  }

  .upload-zone-icon {
    width: 48px;
    height: 48px;
  }

  .upload-zone-text-main {
    font-size: 14px;
  }

  .upload-zone-text-sub {
    font-size: 13px;
  }
}

/* =========================================================
   OVERLAY DE CHARGEMENT - CRÉATION ECHO
   ========================================================= */

/* Variable de durée du loader (modifiable ici) */
:root {
  --echo-loader-duration: 4.5s;
}

/* Overlay plein écran */
.echo-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.echo-loading-overlay[style*="display: flex"],
.echo-loading-overlay[style*="display:flex"] {
  display: flex !important;
}

.echo-loading-overlay.echo-loading-overlay-visible {
  opacity: 1;
}

/* Bloquer le scroll du body quand overlay actif */
body.echo-loading-active {
  overflow: hidden;
}

/* Fond avec blur et assombrissement (blur fixe pour éviter l'à-coup) */
.echo-loading-bg {
  position: absolute;
  inset: 0;
  background: rgba(255, 185, 234, 0.7);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.echo-loading-overlay.echo-loading-overlay-visible .echo-loading-bg {
  opacity: 1;
}

/* Grand "heart glow" au centre (forme douce en dégradé) */
.echo-loading-heart-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(255, 141, 170, 0.4) 0%, rgba(198, 182, 242, 0.3) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

/* Conteneur des décorations (cercles flottants) */
.echo-loading-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Cercles SVG flottants */
.echo-loading-circle {
  position: absolute;
  width: auto;
  height: auto;
  pointer-events: none;
  animation: echo-loading-float 4s ease-in-out infinite;
}

.echo-loading-circle-1 {
  top: 15%;
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.echo-loading-circle-2 {
  top: 20%;
  right: 25%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
}

.echo-loading-circle-3 {
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  animation-delay: 0s;
}

@keyframes echo-loading-float {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.9;
  }
}

/* Contenu central (badge + texte + barre + points) */
.echo-loading-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s;
}

.echo-loading-overlay.echo-loading-overlay-visible .echo-loading-content {
  opacity: 1;
  transform: translateY(0);
}

/* Badge éclair (petit rond gradient avec éclair) */
.echo-loading-badge {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C6B6F2 0%, #FF8DAA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(198, 182, 242, 0.4), 0 1px 3px rgba(0, 0, 0, 0.1);
  animation: echo-loading-badge-pulse 2s ease-in-out infinite, echo-loading-badge-rotate 3s linear infinite;
  position: relative;
}

.echo-loading-badge::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: rgba(198, 182, 242, 0.3);
  animation: echo-loading-badge-glow 2s ease-in-out infinite;
  z-index: -1;
}

/* Première bulle blanche autour du badge (indépendante du badge) */
.echo-loading-content::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  top: calc(50% - 80px);
  left: calc(50% - 45px);
  animation: echo-loading-bubble-float-simple 3s ease-in-out infinite;
  z-index: 9;
  pointer-events: none;
}

/* Deuxième bulle blanche autour du badge (indépendante du badge) */
.echo-loading-content::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  top: calc(50% - 70px);
  right: calc(50% - 50px);
  animation: echo-loading-bubble-float-simple-2 3.5s ease-in-out infinite;
  z-index: 9;
  pointer-events: none;
}

.echo-loading-badge svg {
  width: 23px;
  height: 23px;
  display: block;
}

@keyframes echo-loading-badge-pulse {
 0%, 100% {
   transform: scale(1);
   box-shadow: 0 4px 20px rgba(198, 182, 242, 0.4), 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 50% {
   transform: scale(1.08);
   box-shadow: 0 6px 30px rgba(198, 182, 242, 0.6), 0 1px 3px rgba(0, 0, 0, 0.1);
 }
}

@keyframes echo-loading-badge-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes echo-loading-badge-glow {
 0%, 100% {
   opacity: 0.3;
   transform: scale(1);
 }
 50% {
   opacity: 0.6;
   transform: scale(1.2);
 }
}

@keyframes echo-loading-bubble-float-simple {
 0%, 100% {
   transform: translateY(0);
   opacity: 0.4;
 }
 50% {
   transform: translateY(-10px);
   opacity: 0.6;
 }
}

@keyframes echo-loading-bubble-float-simple-2 {
 0%, 100% {
   transform: translateY(0);
   opacity: 0.35;
 }
 50% {
   transform: translateY(-8px);
   opacity: 0.55;
 }
}

/* Texte */
.echo-loading-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.echo-loading-title {
  font-size: 27px;
  font-weight: 600;
  color: #1B1F3B;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.echo-loading-subtitle {
  font-size: 19px;
  font-weight: 400;
  color: rgba(27, 31, 59, 0.85);
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Barre de progression */
.echo-loading-progress {
  width: 283px;
  height: 6px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.echo-loading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C6B6F2 0%, #FF8DAA 100%);
  border-radius: 3px;
  transition: width var(--echo-loader-duration) linear;
  /* Pas d'animation infinite - la barre est contrôlée par JS */
}

/* 3 points animés */
.echo-loading-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.echo-loading-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(27, 31, 59, 0.5);
  animation: echo-loading-dot-bounce 1.4s ease-in-out infinite;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.echo-loading-dot:nth-child(1) {
  animation-delay: 0s;
}

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

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

@keyframes echo-loading-dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Support prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .echo-loading-circle,
  .echo-loading-badge,
  .echo-loading-dot {
    animation: none;
  }
  
  .echo-loading-overlay,
  .echo-loading-bg,
  .echo-loading-content {
    transition: opacity 0.2s ease-out;
  }
  
  .echo-loading-progress-bar {
    transition: width 2s linear;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .echo-loading-heart-glow {
    width: 400px;
    height: 400px;
  }
  
  .echo-loading-title {
    font-size: 20px;
  }
  
  .echo-loading-subtitle {
    font-size: 14px;
  }
  
  .echo-loading-progress {
    width: 240px;
  }
  
  .echo-loading-circle-1,
  .echo-loading-circle-2,
  .echo-loading-circle-3 {
    width: 60px !important;
    height: 60px !important;
  }
}

/* ============ PAGE: AUTH (Connexion / Inscription) ============ */

/* TWEAK HERE: variables auth */
.echoes-auth {
  /* Background officiel du site (réutilise la variable globale) */
  --auth-bg: var(--bg);

  --auth-card-bg: rgba(255, 255, 255, 0.95);
  --auth-card-radius: 32px;
  --auth-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --auth-card-padding: 48px 40px;
  --auth-brand-gap: 8px;            /* TWEAK HERE: espacement logo/texte */
  --auth-input-icon-left: 18px;     /* TWEAK HERE: position icône (plus à gauche = diminuer) */
  --auth-input-padding-left: 56px;  /* TWEAK HERE: départ texte (IMPORTANT: doit être > icon-left + 18px + espace) */
  --auth-input-padding-right: 48px; /* TWEAK HERE: pour l'œil password à droite (si présent) */
}

/* Cacher le header/nav uniquement sur les pages auth */
body.echoes-auth .site-header {
  display: none;
}

/* Neutraliser tout pseudo-element qui pourrait créer des variations de background */
body.echoes-auth::before,
body.echoes-auth::after,
.echoes-auth-page::before,
.echoes-auth-page::after,
.echoes-auth-card::before,
.echoes-auth-card::after {
  content: none !important;
  display: none !important;
}

/* Neutraliser les halos parasites (gradients/pseudo-elements) */
.echoes-auth .echoes-auth-page::before,
.echoes-auth .echoes-auth-page::after,
.echoes-auth .echoes-auth-card::before,
.echoes-auth .echoes-auth-card::after {
  content: none !important;
  display: none !important;
}

/* Fond officiel du site - réutilise exactement le même background que le reste du site */
html.echoes-auth,
body.echoes-auth {
  background: transparent !important; /* Permettre au background animé d'être visible */
  min-height: 100vh;
  position: relative;
}

/* Enlever tout fond blanc sur les wrappers du thème */
.echoes-auth #page,
.echoes-auth .site,
.echoes-auth .site-content,
.echoes-auth main:not(.echoes-auth-page),
.echoes-auth .content-area {
  background: transparent !important;
}

/* Masquer le footer global du thème sur les pages auth */
.echoes-auth footer,
.echoes-auth .site-footer,
.echoes-auth .footer,
.echoes-auth .footer-container {
  display: none !important;
}

/* S'assurer qu'aucun wrapper ne crée de bande blanche en bas */
.echoes-auth #page,
.echoes-auth .site,
.echoes-auth .site-content,
.echoes-auth main:not(.echoes-auth-page),
.echoes-auth .content-area,
.echoes-auth .wp-site-blocks {
  background: transparent !important;
  min-height: 100vh;
}

/* Wrapper principal centré */
.echoes-auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  position: relative;
}

/* Logo + texte ECHOES en haut */
.echoes-auth-brand {
  display: flex;
  align-items: center;
  gap: var(--auth-brand-gap);
  text-decoration: none;
  color: var(--text-white);
  margin-bottom: 40px;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.echoes-auth-brand:hover {
  opacity: 0.8;
}

.echoes-auth-brand__logo {
  width: 40px;
  height: 40px;
  display: block;
}

.echoes-auth-brand__text {
  font-size: 25px;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  color: #F4F4F4;
}

/* Carte principale */
.echoes-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--auth-card-bg);
  border-radius: var(--auth-card-radius);
  box-shadow: var(--auth-card-shadow);
  padding: var(--auth-card-padding);
  position: relative;
  z-index: 1;
}

/* Supprimer tout footer clair sur la carte (neutraliser pseudo-elements) */
.echoes-auth-card::after {
  display: none !important;
}

/* Contenu de la carte (login-card existant) */
.echoes-auth-card .login-card {
  width: 100%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Titre */
.echoes-auth-card .style-h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.2;
}

/* Sous-titre */
.echoes-auth-card .login-subtitle {
  font-size: 16px;
  color: var(--text-74);
  margin: 0 0 32px 0;
  line-height: 1.5;
}

/* Messages d'erreur/succès */
.echoes-auth-card .error-message,
.echoes-auth-card .success-message {
  margin-bottom: 24px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
}

/* Formulaire */
.echoes-auth-card .login-form {
  width: 100%;
}

/* Groupes de champs */
.echoes-auth-card .form-group {
  margin-bottom: 20px;
}

.echoes-auth-card .input-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

/* Wrapper input avec icône */
.echoes-auth-card .input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Cacher les icônes emoji/HTML existantes */
.echoes-auth-card .input-icon {
  display: none;
}

/* Icônes SVG via pseudo-element sur form-group */
.echoes-auth-card .form-group.is-email .input-wrapper::before,
.echoes-auth-card .form-group.is-password .input-wrapper::before,
.echoes-auth-card .form-group.is-name .input-wrapper::before {
  content: "";
  position: absolute;
  left: var(--auth-input-icon-left);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

.echoes-auth-card .form-group.is-email .input-wrapper::before {
  background-image: url('../images/Icon-mail.svg');
}

.echoes-auth-card .form-group.is-password .input-wrapper::before {
  background-image: url('../images/Icon-cadena.svg');
}

.echoes-auth-card .form-group.is-name .input-wrapper::before {
  background-image: url('../images/Icon-person.svg');
}

/* Inputs style pill - FORCER le padding-left pour éviter chevauchement icônes */
/* Override des règles globales .form-group input qui pourraient écraser le padding */
.echoes-auth .form-group input[type="email"],
.echoes-auth .form-group input[type="text"],
.echoes-auth .form-group input[type="password"],
.echoes-auth-card .auth-input,
.echoes-auth input[type="email"],
.echoes-auth input[type="text"],
.echoes-auth input[type="password"] {
  width: 100%;
  padding: 14px 16px 14px var(--auth-input-padding-left) !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  color: var(--text);
  font-family: var(--font-sans);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Pour les champs mot de passe avec l'icône "œil" à droite */
.echoes-auth input[type="password"],
.echoes-auth .form-group input[type="password"] {
  padding-right: var(--auth-input-padding-right) !important;
}

.echoes-auth-card .auth-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
}

.echoes-auth-card .auth-input::placeholder {
  color: var(--text-74);
}

/* Bouton oeil (password toggle) */
.echoes-auth-card .input-eye {
  position: absolute;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  z-index: 1;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.echoes-auth-card .input-eye:hover {
  opacity: 1;
}

/* Erreurs de champ */
.echoes-auth-card .input-error {
  margin-top: 6px;
  font-size: 13px;
  color: #dc3545;
}

/* Ligne "Se souvenir" + "Mot de passe oublié" */
.echoes-auth-card .form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}

.echoes-auth-card .remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-80);
  cursor: pointer;
}

.echoes-auth-card .remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: linear-gradient(180deg, #C6B6F2 0%, #FF8DAA 100%); /* Couleur du gradient primaire (rose Echoes) */
}

/* Style custom pour checkbox cochée avec gradient primaire */
.echoes-auth-card .remember-me input[type="checkbox"]:checked {
  accent-color: #FF8DAA;
  background: var(--gradient-primary);
  border-color: transparent;
}

.echoes-auth-card .form-row .link {
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.echoes-auth-card .form-row .link:hover {
  opacity: 0.8;
}

/* Bouton principal gradient */
.echoes-auth-card .btn-primary {
  width: 100%;
  padding: 16px;
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--r-pill);
  color: var(--text-white);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 24px;
}

.echoes-auth-card .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(198, 182, 242, 0.4);
}

.echoes-auth-card .btn-primary:active {
  transform: translateY(0);
}

/* Texte "Vous n'avez pas de compte ?" */
.echoes-auth-card .register-text {
  text-align: center;
  font-size: 14px;
  color: var(--text-80);
  margin: 0;
}

.echoes-auth-card .register-text .link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.echoes-auth-card .register-text .link:hover {
  opacity: 0.8;
}

/* Texte légal en bas */
.echoes-auth-page .legal-text {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  color: rgba(27, 31, 59, 0.5);
  max-width: 420px;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
  .echoes-auth-page {
    padding: 24px 16px;
  }

  .echoes-auth-brand {
    margin-bottom: 32px;
  }

  .echoes-auth-brand__logo {
    width: 32px;
    height: 32px;
  }

  .echoes-auth-brand__text {
    font-size: 20px;
  }

  .echoes-auth-card {
    max-width: 100%;
    padding: 32px 24px;
    border-radius: 24px;
  }

  .echoes-auth-card .style-h1 {
    font-size: 28px;
  }

  .echoes-auth-card .login-subtitle {
    font-size: 15px;
  }

  .echoes-auth-card .form-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* TWEAK GUIDE:
   - Espacement logo/texte: --auth-brand-gap (défaut: 8px)
   - Position icône dans input: --auth-input-icon-left (défaut: 18px, plus à gauche = diminuer)
   - Départ texte dans input: --auth-input-padding-left (défaut: 56px, IMPORTANT: doit être > icon-left + 18px + espace)
   - Padding droite password (pour œil): --auth-input-padding-right (défaut: 48px)
   - Padding carte: --auth-card-padding (défaut: 48px 40px)
   - Radius carte: --auth-card-radius (défaut: 32px)
   - Background gradients: --auth-bg-1, --auth-bg-2, --auth-bg-3, --auth-bg-base
*/

/* ============ PAGE: SETTINGS (Paramètres) ============ */

/* Container principal */
.echoes-settings {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px var(--page-pad);
  /* Variable tweakable pour taille avatar */
  --settings-avatar-size: 200px;
}

/* Header */
.echoes-settings__head {
  margin-bottom: 40px;
}

.echoes-settings__title {
  font-size: 37px; /* +1px */
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.echoes-settings__subtitle {
  font-size: 18px; /* +2px */
  color: var(--text-74);
  margin: 0;
  line-height: 1.5;
}

/* Cards */
.settings-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 14px;
  align-items: start;
  background: var(--surface);
  border-radius: 15px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.settings-card__icon {
  width: 31px; /* -1px */
  height: 31px; /* -1px */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0; /* Cacher le texte emoji */
}

/* Icônes SVG par card */
.settings-card--avatar .settings-card__icon {
  background-image: url('../images/Icon-person.svg');
}

.settings-card--email .settings-card__icon {
  background-image: url('../images/Icon-mail.svg');
}

.settings-card--password .settings-card__icon {
  background-image: url('../images/Icon-cadena.svg');
}

.settings-card--reset .settings-card__icon {
  background-image: url('../images/icon-key.svg');
}

.settings-card--danger .settings-card__icon {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 5H4.16667H17.5' stroke='%23dc3545' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.66667 5V3.33333C6.66667 2.89131 6.84226 2.46738 7.15482 2.15482C7.46738 1.84226 7.89131 1.66667 8.33333 1.66667H11.6667C12.1087 1.66667 12.5326 1.84226 12.8452 2.15482C13.1577 2.46738 13.3333 2.89131 13.3333 3.33333V5M15.8333 5V16.6667C15.8333 17.1087 15.6577 17.5326 15.3452 17.8452C15.0326 18.1577 14.6087 18.3333 14.1667 18.3333H5.83333C5.39131 18.3333 4.96738 18.1577 4.65482 17.8452C4.34226 17.5326 4.16667 17.1087 4.16667 16.6667V5H15.8333Z' stroke='%23dc3545' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.33333 9.16667V14.1667' stroke='%23dc3545' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.6667 9.16667V14.1667' stroke='%23dc3545' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.settings-card__body {
  flex: 1;
}

.settings-card__title {
  font-size: 21px; /* +1px */
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.settings-card--danger .settings-card__title {
  color: #dc3545;
}

.settings-card__hint {
  font-size: 16px; /* +2px */
  color: var(--text-74);
  margin: 0 0 20px 0;
  line-height: 1.2;
}

.settings-card__small {
  font-size: 14px; /* +2px */
  color: var(--text-74);
  margin: 36px 0 0 0;
  transform: translateY(-15px); /* Remonter uniquement ce texte de 5px sans affecter le flux */
}

.settings-card__error {
  background: #f8d7da;
  color: #dc3545;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}

.settings-card__error p {
  margin: 0;
}

.settings-card__success {
  background: #d4edda;
  color: #155724;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}

.settings-card__success p {
  margin: 0;
}

/* Zone de danger */
.settings-card--danger {
  border: 2px solid #dc3545;
}

/* Form groups */
.echoes-settings .form-group {
  margin-bottom: 20px;
}

.echoes-settings .form-label {
  display: block;
  font-size: 16px; /* +2px */
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.echoes-settings .form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #f5f5f5;
  font-size: 15px;
  color: var(--text);
  font-family: var(--font-sans);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.echoes-settings .form-input:focus {
  outline: none;
  border-color: var(--accent);
  background: #ffffff;
}

.echoes-settings .form-input::placeholder {
  color: var(--text-74);
}

/* Boutons */
.echoes-settings .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px; /* -2px horizontal */
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.echoes-settings .btn--dark {
  background: #1B1F3B;
  color: var(--text-white);
}

.echoes-settings .btn--dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(27, 31, 59, 0.3);
}

.echoes-settings .btn--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.echoes-settings .btn--outline:hover {
  background: rgba(0, 0, 0, 0.05);
}

.echoes-settings .btn--danger {
  background: #dc3545;
  color: #ffffff;
}

.echoes-settings .btn--danger::before {
  content: "";
  display: inline-block;
  width: 18px; /* EXCEPTION: on ne réduit PAS cette icône */
  height: 18px; /* EXCEPTION: on ne réduit PAS cette icône */
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 5H4.16667H17.5' stroke='%23ffffff' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.66667 5V3.33333C6.66667 2.89131 6.84226 2.46738 7.15482 2.15482C7.46738 1.84226 7.89131 1.66667 8.33333 1.66667H11.6667C12.1087 1.66667 12.5326 1.84226 12.8452 2.15482C13.1577 2.46738 13.3333 2.89131 13.3333 3.33333V5M15.8333 5V16.6667C15.8333 17.1087 15.6577 17.5326 15.3452 17.8452C15.0326 18.1577 14.6087 18.3333 14.1667 18.3333H5.83333C5.39131 18.3333 4.96738 18.1577 4.65482 17.8452C4.34226 17.5326 4.16667 17.1087 4.16667 16.6667V5H15.8333Z' stroke='%23ffffff' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.33333 9.16667V14.1667' stroke='%23ffffff' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.6667 9.16667V14.1667' stroke='%23ffffff' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.echoes-settings .btn--danger:hover {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.echoes-settings .btn--upload {
  position: relative;
  overflow: hidden;
}

.echoes-settings .btn--upload::before {
  content: "";
  display: inline-block;
  width: 17px; /* -1px */
  height: 17px; /* -1px */
  background-image: url('../images/Icon-upload.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.echoes-settings .btn--upload input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Card Photo de profil - Layout 2 colonnes */
.settings-card--avatar .settings-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.settings-card--avatar .avatar-content {
  flex: 1;
  max-width: 400px;
}

.settings-card--avatar .avatar-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.avatar-preview {
  width: var(--settings-avatar-size);
  height: var(--settings-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder icon-person dans avatar si pas d'image */
.avatar-preview::before {
  content: "";
  display: block;
  width: 64px; /* Agrandi pour avatar plus grand */
  height: 64px;
  background-image: url('../images/Icon-person.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.4;
  position: absolute;
  z-index: 1;
}

/* Cacher l'icône placeholder si une vraie image avatar existe (via classe JS ou fallback) */
.avatar-preview img {
  position: relative;
  z-index: 2;
}

/* Si l'image n'est pas le logo placeholder, cacher le ::before */
.avatar-preview.has-avatar::before {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  .echoes-settings {
    padding: 24px var(--page-pad);
  }

  .echoes-settings__title {
    font-size: 28px;
  }

  .settings-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px;
  }
  
  .settings-card__icon {
    width: 27px; /* -1px */
    height: 27px; /* -1px */
  }

  /* Card Photo de profil - repasser en colonne sur mobile */
  .settings-card--avatar .settings-card__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .settings-card--avatar .avatar-content {
    max-width: 100%;
  }

  .avatar-preview {
    width: 120px;
    height: 120px;
  }

  .avatar-preview::before {
    width: 48px;
    height: 48px;
  }
}

/* ============ PAGE: PROFIL (Mon Profil) ============ */

/* Layout global */
.page-profile {
  width: 100%;
  padding: 0;
}

.profile-body {
  padding: 24px 0 40px;
}

.profile-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

/* Header Profil (Module A) */
.profile-header {
  width: 100%;
  margin-bottom: 32px;
}

.profile-header__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.profile-header__inner {
  background: var(--bg-white-70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 32px 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: var(--border-fine) solid var(--border-white-30);
}

.profile-header__inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.profile-header__avatar {
  flex-shrink: 0;
}

.profile-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 3px solid transparent;
  background-clip: padding-box;
  background-image: linear-gradient(var(--bg-white-70), var(--bg-white-70)), var(--gradient-primary);
  background-origin: border-box;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.profile-avatar:not(.has-avatar)::before {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  background-image: url('../images/Icon-person.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.4;
  z-index: 0;
}

.profile-header__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.profile-header__name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.profile-header__name {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
  flex-shrink: 0;
}

.profile-header__badge-wrapper {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.profile-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 107, 157, 0.1);
  color: #ff6b9d;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  font-family: var(--font-sans);
}

.profile-header__badge:hover {
  background: rgba(255, 107, 157, 0.15);
  transform: translateY(-1px);
}

.profile-header__badge img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.profile-visibility-popover {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: var(--border-fine) solid var(--border-white-30);
  min-width: 140px;
  z-index: 9992;
  display: none;
  flex-direction: column;
  gap: 4px;
}

.profile-visibility-popover.is-open {
  display: flex;
}

.profile-visibility-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: left;
  font-family: var(--font-sans);
}

.profile-visibility-option:hover {
  background: rgba(255, 255, 255, 0.5);
}

.profile-visibility-option img,
.profile-visibility-option svg {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

.profile-header__bio {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.profile-header__stats {
  display: flex;
  gap: 32px;
  margin-top: 2px;
  margin-bottom: 20px;
  width: 100%;
  align-items: flex-start;
}

.profile-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-stat__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.profile-stat__label {
  font-size: 14px;
  color: var(--muted);
}

.profile-header__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  align-items: flex-start;
}

.profile-tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 107, 157, 0.1);
  color: #ff6b9d;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
}

.profile-header__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  position: absolute;
  top: 24px;
  right: 24px;
}

.profile-action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--bg-white-70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.profile-action-btn:hover {
  transform: translateY(-2px);
}

.profile-action-btn img,
.profile-action-btn svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.profile-action-btn--share {
  background: var(--gradient-primary);
  border: none;
  overflow: hidden;
}

.profile-action-btn--share:hover {
  transform: translateY(-2px);
}

.profile-action-btn--share img,
.profile-action-btn--share svg {
  filter: brightness(0) invert(1);
  position: relative;
  z-index: 1;
}

.profile-action-btn--settings {
  text-decoration: none;
  color: inherit;
}

/* Pilule "Se déconnecter" */
.profile-logout-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--bg-white-70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  box-shadow: none;
  flex-shrink: 0;
}

.profile-logout-pill:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-logout-pill:focus,
.profile-logout-pill:focus-visible {
  outline: 2px solid rgba(198, 182, 242, 0.5);
  outline-offset: 2px;
  box-shadow: none;
}

/* Barre "Mes Echoes" (Module B) */
.profile-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-white-70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: var(--border-fine) solid var(--border-white-30);
}

.profile-section-head__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-section-head__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.profile-section-head__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background: rgba(255, 107, 157, 0.1);
  color: #f4f4f4;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
}

.profile-section-head__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-filter-wrapper {
  position: relative;
}

.profile-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-white-70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-md);
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: var(--border-fine) solid var(--border-white-30);
  min-width: 180px;
  z-index: 100;
  display: none;
}

.profile-filter-menu.is-open {
  display: block;
}

.profile-filter-menu__header {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 8px 12px;
  margin-bottom: 4px;
}

/* Modal Filtrer */
.profile-filter-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.profile-filter-modal.is-open {
  display: flex;
}

.profile-filter-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9990;
}

.profile-filter-modal__content {
  position: relative;
  background: var(--bg-white-85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: var(--border-fine) solid var(--border-white-30);
  z-index: 9991;
}

.profile-filter-modal__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 24px 0;
}

.profile-filter-modal__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-filter-modal__field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-filter-modal__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.profile-filter-modal__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  color: var(--text);
  font-family: var(--font-sans);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.profile-filter-modal__input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 1);
}

.profile-filter-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-filter-modal__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-white-70);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  outline: none;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.profile-filter-modal__tag:focus,
.profile-filter-modal__tag:focus-visible {
  outline: none;
  box-shadow: none;
}

.profile-filter-modal__tag:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

.profile-filter-modal__tag input[type="checkbox"] {
  display: none;
}

.profile-filter-modal__tag span {
  background: transparent;
  padding: 0;
  border: none;
  transition: none;
}

.profile-filter-modal__tag:has(input:checked) {
  background: var(--gradient-primary);
  color: var(--text-white);
  border-color: transparent;
}

.profile-filter-modal__tag input:checked + span {
  background: transparent;
  color: inherit;
}

.profile-filter-modal__media {
  display: flex;
  gap: 8px;
}

.profile-filter-modal__media-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--bg-white-70);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  outline: none;
  box-shadow: none;
  position: relative;
}

.profile-filter-modal__media-item:focus,
.profile-filter-modal__media-item:focus-visible {
  outline: none;
  box-shadow: none;
}

.profile-filter-modal__media-item:hover {
  background: rgba(255, 255, 255, 0.85);
}

.profile-filter-modal__media-item input[type="radio"] {
  display: none;
}

.profile-filter-modal__media-item span {
  background: transparent;
  padding: 0;
  border: none;
  transition: none;
  color: inherit;
}

.profile-filter-modal__media-item:has(input:checked) {
  background: #0f172a;
  color: #ffffff;
  border-color: transparent;
}

.profile-filter-modal__media-item input:checked ~ span {
  background: transparent;
  color: inherit;
}

.profile-filter-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.profile-filter-modal__btn {
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

.profile-filter-modal__btn--reset {
  background: var(--bg-white-70);
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.profile-filter-modal__btn--reset:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.profile-filter-modal__btn--apply {
  background: var(--gradient-primary);
  color: var(--text-white);
  box-shadow: var(--shadow-primary);
  border: 0;
  overflow: hidden;
  background-clip: padding-box;
}

.profile-filter-modal__btn--apply:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.profile-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-white-70);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.profile-filter-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

.profile-filter-btn img,
.profile-filter-btn svg {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.profile-view-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-white-70);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-pill);
  padding: 4px;
  position: relative;
}

.profile-view-toggle__slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-primary);
  transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
  pointer-events: none;
  box-shadow: none;
  outline: none;
}

.profile-view-toggle.profile-view-toggle--echoes .profile-view-toggle__slider {
  transform: translateX(36px);
}

.profile-view-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
  position: relative;
  z-index: 1;
  outline: none;
  box-shadow: none;
}

.profile-view-btn:focus,
.profile-view-btn:focus-visible {
  outline: 2px solid rgba(198, 182, 242, 0.5);
  outline-offset: 2px;
}

.profile-view-btn:hover {
  color: var(--accent);
}

.profile-view-btn.active {
  color: var(--text-white);
  box-shadow: none;
  outline: none;
  border: none;
}

.profile-view-btn.active:focus,
.profile-view-btn.active:focus-visible {
  outline: 0px solid rgba(198, 182, 242, 0.5);
  outline-offset: 2px;
}

.profile-view-btn:not(.active) {
  color: var(--text);
  box-shadow: none;
  outline: none;
  border: none;
}

.profile-view-btn__text {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: inherit;
}

.profile-view-btn img,
.profile-view-btn svg {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

/* Grille de cartes */
.profile-main {
  display: flex;
  flex-direction: column;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

@media (min-width: 1200px) {
  .profile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

/* Card "Créer une nouvelle playlist" (Module D) */
.playlist-card--create {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  background: var(--bg-white-70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 40px 24px;
  border: var(--border-fine) solid var(--border-white-30);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  font-family: var(--font-sans);
  width: 100%;
}

.playlist-card--create:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Modal Créer une playlist */
.playlist-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.playlist-modal.is-open {
  display: flex;
}

.playlist-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9990;
}

.playlist-modal__content {
  position: relative;
  background: var(--bg-white-85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: var(--border-fine) solid var(--border-white-30);
  z-index: 9991;
}

.playlist-modal__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 24px 0;
}

.playlist-modal__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.playlist-modal__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.playlist-modal__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.playlist-modal__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  color: var(--text);
  font-family: var(--font-sans);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.playlist-modal__input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 1);
}

.playlist-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.playlist-modal__btn {
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

.playlist-modal__btn--cancel {
  background: var(--bg-white-70);
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.playlist-modal__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.playlist-modal__btn--create {
  background: var(--gradient-primary);
  color: var(--text-white);
  box-shadow: var(--shadow-primary);
}

.playlist-modal__btn--create:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.playlist-modal__btn--create:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.playlist-card__icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: radial-gradient(circle at center, rgba(198, 182, 242, 0.3) 0%, rgba(255, 141, 170, 0.2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.playlist-card__icon {
  width: 32px;
  height: 32px;
  color: #C6B6F2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.playlist-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.playlist-card__line1,
.playlist-card__line2 {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

/* Cartes Echo dans profil (réutilise les styles existants) */
.page-profile .echo-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: none !important;
  outline: none !important;
}

/* ============================================
   Playlist Cards - Style cohérent avec Echo Cards
   ============================================ */
.playlist-card {
  background: var(--bg-white-70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.playlist-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.playlist-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.playlist-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.playlist-card__placeholder {
  width: 100%;
  height: 200px;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}

.playlist-card__placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}

.playlist-card__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.playlist-card__title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: var(--text);
  line-height: 1.3;
}

.playlist-card__meta {
  margin-top: auto;
}

.playlist-card__subtitle {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

/* Bouton supprimer playlist (haut à gauche) */
.playlist-card__delete {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  z-index: 10;
  padding: 0;
}

.playlist-card__delete:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.playlist-card__delete svg {
  width: 18px;
  height: 18px;
  color: var(--text);
}

/* Badge "Playlist" discret en haut à droite de l'image */
.playlist-card__badge-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-profile .playlist-card--create {
  border: none !important;
  outline: none !important;
}

/* Sidebar */
.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Widgets (Modules E et F) */
.widget-card {
  background: var(--bg-white-70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: var(--border-fine) solid var(--border-white-30);
}

.widget-card__icon {
  margin-bottom: 16px;
}

.widget-card__icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.widget-card__icon-circle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.widget-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.widget-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.widget-card__subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 16px 0;
}

.widget-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.widget-card__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.widget-card__item-text {
  font-size: 14px;
  color: var(--text);
  flex: 1;
}

.widget-card__item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}

.widget-card__item-count {
  font-weight: 600;
  color: var(--text);
}

.widget-card__item-meta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .profile-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .profile-sidebar {
    order: -1;
  }

  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .profile-header__inner {
    padding: 24px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .profile-header__actions {
    position: static;
    margin-top: 16px;
  }

  .profile-header__actions {
    position: static;
    margin-top: 16px;
  }

  .profile-header__name-row {
    justify-content: center;
  }

  .profile-header__stats {
    justify-content: center;
  }

  .profile-header__tags {
    justify-content: center;
  }

  .profile-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .profile-section-head__right {
    width: 100%;
    justify-content: space-between;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-layout {
    padding: 0 var(--page-pad);
  }
}

/* ============================================
   Boutons sur Echo Cards (+ et X)
   ============================================ */
.echo-card {
  position: relative;
}

.echo-card__delete {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  z-index: 10;
  padding: 0;
}

.echo-card__delete:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.echo-card__delete svg {
  width: 18px;
  height: 18px;
  color: var(--text);
}

.echo-card__add-to-playlist {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  z-index: 10;
  padding: 0;
}

.echo-card__add-to-playlist:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.echo-card__add-to-playlist svg {
  width: 18px;
  height: 18px;
  color: var(--text);
}

/* ============================================
   Modal Ajouter à une playlist
   ============================================ */
.add-to-playlist-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.add-to-playlist-modal.is-open {
  display: flex;
}

.add-to-playlist-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9990;
}

.add-to-playlist-modal__content {
  position: relative;
  background: var(--bg-white-85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: var(--border-fine) solid var(--border-white-30);
  z-index: 9991;
  max-height: 80vh;
  overflow-y: auto;
}

.add-to-playlist-modal__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 24px 0;
}

.add-to-playlist-modal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden; /* Empêcher la scrollbar horizontale */
  width: 100%;
}

.add-to-playlist-modal__item {
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  width: 100%;
  box-sizing: border-box;
  min-width: 0; /* Empêcher le débordement */
}

.add-to-playlist-modal__item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateX(4px);
}

.add-to-playlist-modal__check {
  color: var(--accent);
  font-weight: 700;
  font-size: 18px;
}

.add-to-playlist-modal__empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

.add-to-playlist-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.add-to-playlist-modal__actions-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.add-to-playlist-modal__btn {
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

.add-to-playlist-modal__btn--cancel {
  background: var(--bg-white-70);
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.add-to-playlist-modal__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.add-to-playlist-modal__btn--create {
  background: var(--gradient-primary);
  color: var(--text-white);
}

.add-to-playlist-modal__btn--create:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(198, 182, 242, 0.4);
}

.add-to-playlist-modal__btn--ok {
  background: var(--gradient-primary);
  color: var(--text-white);
  box-shadow: var(--shadow-primary);
}

.add-to-playlist-modal__btn--ok:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* ============================================
   Stylisation input file (playlist modal)
   ============================================ */
.playlist-modal__file-wrapper {
  position: relative;
}

.playlist-modal__file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.playlist-modal__file-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--bg-white-70);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  font-family: var(--font-sans);
}

.playlist-modal__file-label:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.playlist-modal__file-label svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.playlist-modal__file-name {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.playlist-modal__preview {
  margin-top: 16px;
  border-radius: var(--r-md);
  overflow: hidden;
  display: none;
}

.playlist-modal__preview.has-image {
  display: block;
}

.playlist-modal__preview img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  display: block;
}

/* ============================================
   Supprimer tous les soulignements sur les cartes
   ============================================ */
.page-profile .echo-card a,
.page-profile .echo-card__link,
.page-profile .echo-card__title,
.page-profile .echo-card__artist,
.page-profile .echo-card__date,
.page-profile .echo-card__tags .tag,
.page-profile .echo-card__meta,
.page-profile .playlist-card a,
.page-profile .playlist-card__link,
.page-profile .playlist-card__title,
.page-profile .playlist-card__subtitle,
.page-profile .playlist-card__badge-overlay {
  text-decoration: none !important;
}

.page-profile .echo-card a:hover,
.page-profile .echo-card__link:hover,
.page-profile .playlist-card a:hover,
.page-profile .playlist-card__link:hover {
  text-decoration: none !important;
}

/* ============================================
   Modale "Changer le nom"
   ============================================ */
.rename-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.rename-modal.is-open {
  display: flex;
}

.rename-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9990;
}

.rename-modal__content {
  position: relative;
  background: var(--bg-white-85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: var(--border-fine) solid var(--border-white-30);
  z-index: 9991;
}

.rename-modal__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 24px 0;
}

.rename-modal__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rename-modal__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rename-modal__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.rename-modal__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  color: var(--text);
  font-family: var(--font-sans);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.rename-modal__input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 1);
}

.rename-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.rename-modal__btn {
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

.rename-modal__btn--cancel {
  background: var(--bg-white-70);
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.rename-modal__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.rename-modal__btn--save {
  background: var(--gradient-primary);
  color: var(--text-white);
  box-shadow: var(--shadow-primary);
}

.rename-modal__btn--save:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.rename-modal__btn--save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================
   Modale "Voir playlist"
   ============================================ */
.playlist-view-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.playlist-view-modal.is-open {
  display: flex;
}

.playlist-view-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9990;
}

.playlist-view-modal__content {
  position: relative;
  background: var(--bg-white-85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: var(--border-fine) solid var(--border-white-30);
  z-index: 9991;
}

.playlist-view-modal__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 24px 0;
}

.playlist-view-modal__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  overflow-x: hidden; /* Empêcher la scrollbar horizontale */
}

.playlist-view-modal__item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.playlist-view-modal__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 40px 12px 16px; /* Padding droite pour laisser place au bouton X */
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, transform 0.2s ease;
  flex: 1;
  min-width: 0;
}

.playlist-view-modal__item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateX(4px);
  text-decoration: none;
}

.playlist-view-modal__item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--r-md);
  flex-shrink: 0;
}

.playlist-view-modal__item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.playlist-view-modal__item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-view-modal__item-date {
  font-size: 13px;
  color: var(--muted);
}

.playlist-view-modal__item-remove {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  z-index: 2;
}

.playlist-view-modal__item-remove:hover {
  transform: translateY(-50%) scale(1.1);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.playlist-view-modal__item-remove svg {
  width: 14px;
  height: 14px;
  color: var(--text);
}

.playlist-view-modal__empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 15px;
}

.playlist-view-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.playlist-view-modal__btn {
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

.playlist-view-modal__btn--close {
  background: var(--gradient-primary);
  color: var(--text-white);
  box-shadow: var(--shadow-primary);
}

.playlist-view-modal__btn--close:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Username cliquable */
.profile-header__name {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.profile-header__name:hover {
  opacity: 0.8;
}

/* ============================================
   Modale Confirmation Suppression Playlist
   ============================================ */
.delete-playlist-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.delete-playlist-modal.is-open {
  display: flex;
}

.delete-playlist-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9990;
}

.delete-playlist-modal__content {
  position: relative;
  background: var(--bg-white-85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: var(--border-fine) solid var(--border-white-30);
  z-index: 9991;
}

.delete-playlist-modal__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px 0;
}

.delete-playlist-modal__message {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.delete-playlist-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.delete-playlist-modal__btn {
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

.delete-playlist-modal__btn--cancel {
  background: var(--bg-white-70);
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.delete-playlist-modal__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.delete-playlist-modal__btn--delete {
  background: #dc3545;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.delete-playlist-modal__btn--delete:hover {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

/* ============================================
   Modale Confirmation Suppression Echo
   ============================================ */
.delete-echo-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.delete-echo-modal.is-open {
  display: flex;
}

.delete-echo-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9990;
}

.delete-echo-modal__content {
  position: relative;
  background: var(--bg-white-85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: var(--border-fine) solid var(--border-white-30);
  z-index: 9991;
}

.delete-echo-modal__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px 0;
}

.delete-echo-modal__message {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.delete-echo-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.delete-echo-modal__btn {
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

.delete-echo-modal__btn--cancel {
  background: var(--bg-white-70);
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.delete-echo-modal__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.delete-echo-modal__btn--delete {
  background: #dc3545;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.delete-echo-modal__btn--delete:hover {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}