/* ---------------------------------------------------------
   BenTrade — NON-CRITICAL CSS (lazy)
   @layer pour isoler et minifier sélectivement en prod
   --------------------------------------------------------- */

@layer tokens, base, layout, components, animations, utilities;

/* ========== tokens étendus (toutes pages) ========== */ 
@layer tokens {
  :root{
    --color-bg-primary:#000004;--color-bg-secondary:#000004;--color-bg-tertiary:#000004;
    --color-text-primary:#ffffff;--color-text-secondary:rgba(255,255,255,0.8);--color-text-muted:rgba(255,255,255,.6);
    --color-primary-light: #b388ff;
    --color-primary-lighter: #d4c1ff;
    --color-primary-dark: #5a2fb0;
    --color-border-primary:rgba(149, 248, 0, 0.1);--color-border-secondary:rgba(255,255,255,0.05);
    --color-purple-primary:#8b03ff;--color-purple-alpha-20:rgba(139,3,255,.2);--color-purple-alpha-40:rgba(139,3,255,.4);
    --color-blue-primary:#4040e5;--color-pink-primary:#FF91DB;

    --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:50px;
    --spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:.75rem;--spacing-lg:1rem;--spacing-xl:1.5rem;--spacing-2xl:2rem;--spacing-3xl:2.5rem;--spacing-4xl:4rem;

    --size-loader-lg:clamp(40px,8vw,60px);
    --shadow-light:0 2px 4px rgba(0,0,0,.2);
    --shadow-md:0 4px 12px rgba(139,3,255,0.25);
    --shadow-xl:0 15px 30px rgba(139,3,255,0.2);

    --ease:cubic-bezier(.4,0,.2,1);--t-150:.15s;--t-200:.2s;--t-300:.3s;--t-400:.4s;--t-500:.5s;
  }
}

/* ========== base : global + sections lazy (content-visibility) ========== */
@layer base {
  body{font-family:'Roobert','Roobert-Fallback',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
  /* grosses sections hors écran : lazy layout/paint */
 .reviews-section,#faq-section,#videos-section,#video-player-section,#live-section{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
  contain:layout paint style;
}
@supports not (contain-intrinsic-size: auto 1px){
  .reviews-section,#faq-section,#videos-section,#video-player-section,#live-section{
    contain-intrinsic-size:700px 1000px;
  }
}
  .darkness-overlay{background:#000;position:fixed;inset:0;opacity:0;z-index:1}
}

/* ========== layout (grands blocs) ========== */
@layer layout {
  /* TARIF / HERO VIDÉO (landing rose) */
  .tarif-wrapper{background:var(--color-pink-primary);display:flex;min-height:calc(var(--vh,1vh)*100);overflow:hidden;position:relative}
  .content-container{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2xl);margin:auto;max-width:1400px;padding:var(--spacing-2xl);width:100%}
  .showcase-video-container{flex:1;max-width:50%;position:relative;display:flex;align-items:center;justify-content:center}
  .showcase-video{position:relative;width:100%;height:auto;overflow:hidden}
  .showcase-video::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--color-pink-primary) 0,transparent 20%,transparent 90%,var(--color-pink-primary) 100%);z-index:1}
  .showcase-video::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--color-pink-primary) 0,transparent 20%,transparent 80%,var(--color-pink-primary) 100%);z-index:1}
  .showcase-video video{width:100%;height:100%;object-fit:contain;border:none}

  .tarif-content{flex:1;max-width:50%;padding:var(--spacing-2xl);z-index:2}
  .subscription-toggle{display:inline-flex;align-items:center;gap:var(--spacing-2xl);margin-bottom:var(--spacing-3xl);padding:var(--spacing-sm) var(--spacing-lg);background:#fff;border-radius:var(--radius-xl)}
.ios-switch{width:60px;height:36px;border-radius:18px;background:grey;position:relative;flex-shrink:0;transition:background-color 0.3s ease}
.ios-switch::before{content:"";position:absolute;inset:2px auto auto 2px;width:32px;height:32px;border-radius:50%;background:#000;transition:transform 0.3s ease}

/* États actifs du toggle iOS-switch */
.ios-switch.active{background:#007AFF}
.ios-switch.active::before{transform:translateX(24px)}
  .tarif-heading{font-size:clamp(2.5rem,4vw,4rem);margin:0;color:#000;font-weight:600;line-height:1}
  .tarif-amount{font-size:clamp(3.5rem,6vw,6rem);color:#000;font-weight:600;line-height:1}
  .advantages-list{display:flex;flex-wrap:wrap;gap:var(--spacing-lg);font-size:clamp(1rem,2vw,1.4rem);margin:var(--spacing-2xl) 0}
  .advantages-list span{color:#000;font-weight:500;white-space:nowrap}
  .advantages-list span:nth-child(3){flex-basis:100%;margin-top:var(--spacing-sm)}
  .trial-btn{display:inline-flex;align-items:center;justify-content:center;padding:1.2rem var(--spacing-3xl);border-radius:var(--spacing-3xl);background:#000;color:#fff;font-size:clamp(.9rem,1.5vw,1.2rem);font-weight:500;white-space:nowrap;will-change:transform;text-decoration: none;}

  /* NAV mobile + vh correct */
  @supports(height:1dvh){
    .site-header,.section-hero,.reviews-section,#faq-section,#videos-section,#video-player-section,#live-section{min-height:100dvh}
  }
}

/* ========== components (toutes les pages) ========== */
@layer components {

  /* ==== REVIEWS (slider infini, GPU only) ==== */
  .reviews-section{
    display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem 0;position:relative;width:100%;opacity:1;background:#000;overflow:hidden;z-index:100
  }
  .reviews-section::before,
  .reviews-section::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%
  }

.reviews-section::before{
  width:300px;height:300px;
    background:radial-gradient(circle at center,rgba(147,51,234,.5) 0,rgba(88,28,135,.3) 40%,rgba(88,28,135,.1) 60%,transparent 80%);
  animation:pulseSphere 6s ease-in-out infinite;
  animation-play-state: paused;
}
.reviews-section::after{
  width:400px;height:400px;
background:radial-gradient(circle at center,transparent 0,rgba(147,51,234,.1) 40%,rgba(88,28,135,.05) 60%,transparent 80%);
  animation:pulseHalo 8s ease-in-out infinite alternate;
  animation-play-state: paused;
}
/* activer seulement quand nécessaire */
.reviews-section.is-animating::before,
.reviews-section.is-animating::after{ will-change: transform, opacity }
.reviews-title{
  position: static; /* ou relative si tu as besoin d'un z-index */
  left: auto;
  transform: none;
  margin-inline: auto; /* centre horizontalement */
  font-size: clamp(32px, 5vw, 42px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.75));
  -webkit-background-clip: text;
  background-clip: text;
  color: #fff;
  text-align: center;
}

  .reviews-container{position:relative;width:100vw;margin:0;max-width:none;z-index:100}
  .reviews-slider-container{width:100vw;padding-bottom:4rem;position:relative;overflow:hidden}
  .slider-track{position:relative;width:100%;height:auto;min-height:220px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 20%,black 80%,transparent)}
.slider-content{
  position:relative;left:0;display:flex;gap:2rem;padding:1rem 0;width:fit-content;
  animation:slideTrack 100s linear infinite;
  animation-play-state: paused;            /* pause par défaut */
}
/* quand on lance réellement l’anim */
.slider-content.is-animating{ will-change: transform, opacity }

.slider-content.reverse{
  animation:slideTrack 100s linear infinite reverse;
  animation-play-state: paused;
}
/* quand on lance réellement l’anim */
.slider-content.reverse.is-animating{ will-change: transform, opacity }


  .review-card{
    background:rgba(18,21,23,.4);border:1px solid var(--color-border-primary);border-radius:16px;box-shadow:var(--shadow-light);
    flex:0 0 auto;width:380px;min-height:200px;padding:1.5rem;will-change:auto
  }
  .review-header{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
  .review-header-content{display:flex;align-items:flex-start;justify-content:space-between;flex:1;min-width:200px}
  .reviewer-avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;background-color:rgba(255,255,255,.1);color:rgba(255,255,255,.8);font-size:14px;font-weight:500;text-transform:uppercase}
  .reviewer-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .reviewer-name{color:#fff;font-size:1rem;font-weight:500}
  .review-date{color:var(--color-text-secondary);font-size:.875rem;font-weight:300}
  .review-stars{display:flex;gap:.25rem}
  .star{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:4px;border-radius:4px;background:rgba(30,32,35,.5)}
  .star svg{width:16px;height:16px;fill:rgba(255,255,255,.75)}
  .review-text{color:rgba(255,255,255,.85);font-size:.9rem;line-height:1.5;margin-bottom:1rem}
  .review-verified{display:flex;align-items:center;gap:.5rem;margin-top:1rem;color:rgba(255,255,255,.75);font-size:.875rem}
  .review-verified svg{width:24px;height:24px;padding:4px;border-radius:50%;background:rgba(30,32,35,.5)}

  /* ==== PRICING GRID ==== */
  .pricing-grid-section{
    background:linear-gradient(140deg,#000,rgba(2,2,4,.99) 45%,rgba(4,4,8,.98) 75%,rgba(6,6,12,.97));
    min-height:100vh;padding:clamp(2rem,5vw,4rem);position:relative;width:100%;font-family:inherit
  }
  .pricing-grid-container{max-width:1200px;margin:0 auto;position:relative}
  .pricing-grid-wrapper{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2rem);padding:clamp(.5rem,2vw,2rem)}
  .pricing-grid-title{margin-bottom:clamp(2rem,6vw,4rem);padding:0 var(--spacing-lg);text-align:center}
  .pricing-grid-title h2{color:#fff;font-size:clamp(2rem,5vw,3.5rem);font-weight:600;margin:0}
  .pricing-grid-card{
    background:rgba(18,21,23,.4);backdrop-filter:blur(20px);
    border:1px solid var(--color-border-primary);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;
    padding:clamp(1.5rem,4vw,2rem);height:100%;position:relative
  }
  .pricing-grid-save-badge{
    position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);
    padding:var(--spacing-sm) var(--spacing-lg);
    background:var(--color-purple-alpha-40);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:20px;
    font-weight:600;font-size:clamp(.75rem,2vw,.875rem);backdrop-filter:blur(10px);animation:float 3s ease-in-out infinite
  }
  .pricing-grid-header{text-align:center;margin-bottom:var(--spacing-2xl)}
  .pricing-grid-header h3{color:#fff;font-size:clamp(1.3rem,3vw,1.5rem);margin:0 0 var(--spacing-lg)}
  .pricing-grid-price{font-size:clamp(2rem,5vw,2.5rem);font-weight:600;color:#fff}
  .pricing-grid-features{flex-grow:1;margin:var(--spacing-lg) 0}
  .pricing-grid-feature{display:flex;align-items:center;gap:var(--spacing-lg);margin:var(--spacing-lg) 0;padding:var(--spacing-sm) 0;color:#fff}
  .pricing-grid-button{
    width:100%;padding:var(--spacing-lg);border-radius:var(--radius-full);
    background:#fff;border:1px solid #00d4ff;color:#000;font-weight:700;font-size:1.1rem;position:relative;will-change:auto
  }
  .pricing-grid-button::before{
    content:"";position:absolute;left:-100%;
    background:linear-gradient(90deg,transparent,rgba(0,212,255,.1),transparent)
  }

  /* ==== FAQ ==== */
  #faq-section{display:flex;flex-direction:row;position:relative;min-height:100vh;overflow:hidden;background:#000}
  .faq-video-container{flex:0 0 50%;max-width:50%;display:flex;align-items:center;justify-content:center;position:relative}
  .faq-video-container video{width:100%;height:auto;object-fit:contain}
  .faq-content-container{flex:0 0 50%;max-width:50%;display:flex;flex-direction:column;height:100vh;overflow-y:auto;padding:3rem}
  .faq-title{color:#fff;font-size:2.2rem;margin:0 0 var(--spacing-3xl)}
  .faq-filter-buttons{display:flex;gap:var(--spacing-xl);margin-bottom:3rem;flex-wrap:wrap}
  .faq-filter-btn{border:none;border-radius:var(--radius-full);padding:.8rem 1.8rem;background:#333;color:#fff;font-weight:500}
  .faq-filter-btn.active{background:#fff;color:#000}
  .faq-list{display:flex;flex-direction:column;gap:var(--spacing-sm);padding-bottom:8rem}

  /* ==== VIDEOS (listing) ==== */
  #videos-section{background:#000;min-height:100vh;padding:var(--spacing-4xl) var(--spacing-2xl)}
  .videos-container{max-width:1400px;margin:0 auto;width:100%}
  .videos-title{color:#fff;font-size:clamp(2rem,5vw,3rem);font-weight:500;margin:0 0 3rem}
  .videos-content{display:flex;gap:var(--spacing-xl)}
  .modules-list{display:flex;flex-direction:column;gap:.75rem;width:30%}
  .module-btn{
    background:rgba(18,21,23,.8);border:1px solid var(--color-border-primary);border-radius:16px;
    color:var(--color-text-muted);padding:1.25rem var(--spacing-xl);text-align:left;will-change:auto
  }
  .module-btn.active{background:var(--color-purple-alpha-40);border-color:rgba(165,81,255,.5);color:#fff;transform:translateZ(0) scale(1.02)}
  .videos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;place-items:start;width:70%}
  .video-card{
    background:rgba(18,21,23,.8);border:1px solid var(--color-border-primary);border-radius:16px;
    display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:300px;max-width:400px;aspect-ratio:.85
  }
  .video-card::after{content:"";position:absolute;inset:0;border-radius:16px;background:radial-gradient(circle at center,rgba(139,3,255,.15),rgba(165,81,255,.1) 20%,transparent 60%);opacity:0}
  .video-thumbnail{position:relative;min-height:60%;width:100%}
  .video-thumbnail img{width:100%;height:100%;object-fit:cover}
  .video-info{display:flex;flex-direction:column;justify-content:center;min-height:40%;padding:1.25rem}
  .video-title{color:#fff;font-size:1.125rem;font-weight:500;margin:0 0 .5rem}
  .video-subtitle{color:var(--color-text-muted);font-size:.875rem;margin:0}

  /* ==== VIDEO PLAYER PAGE ==== */
  #video-player-section{background:#000;min-height:100vh;padding:var(--spacing-2xl)}
  .player-container{max-width:1400px;margin:0 auto;width:100%}
  .back-to-videos{background:rgba(18,21,23,.8);border:1px solid var(--color-border-primary);border-radius:var(--radius-xl);color:#fff;margin-bottom:var(--spacing-2xl);padding:.75rem var(--spacing-xl);font-size:1rem}
  .player-content{display:flex;gap:var(--spacing-2xl)}
  .main-content{flex:1}
  .video-player{background:rgba(18,21,23,.8);border:1px solid var(--color-border-primary);border-radius:16px;overflow:hidden;width:100%}
  .video-details{color:#fff;margin-top:var(--spacing-xl)}
  .player-video-title{font-size:1.75rem;font-weight:500;margin:0 0 var(--spacing-lg)}
  .video-metadata{display:flex;align-items:center;gap:var(--spacing-lg);color:var(--color-text-muted);margin-bottom:var(--spacing-lg)}
  .video-description{color:var(--color-text-secondary);line-height:1.6;margin:0}
  .module-videos-list{width:30%;padding:var(--spacing-xl);border:1px solid var(--color-border-primary);border-radius:16px;background:rgba(18,21,23,.8)}
  .list-title{color:#fff;margin:0 0 var(--spacing-xl)}
  .module-video-item{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-lg);border:1px solid transparent;border-radius:.75rem}
  .module-video-item.active{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2)}
  .item-thumbnail{width:80px;height:45px;border-radius:8px;overflow:hidden;position:relative;background:rgba(0,0,0,.3)}
  .item-thumbnail img{width:100%;height:100%;object-fit:cover}
  .item-duration{position:absolute;right:4px;bottom:4px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.7);color:#fff;font-size:.7rem;font-weight:500}
  .item-info{flex:1;min-width:0}
  .item-info h4{margin:0 0 .25rem;color:#fff;font-size:.9rem;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .item-info p{margin:0;color:var(--color-text-muted);font-size:.8rem}

  /* ==== LIVE (player + chat) ==== */
  #live-section{position:relative;width:100%;min-height:100vh;overflow:hidden;background:#09090f}
  #live-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 10%,rgba(139,3,255,.15) 0,rgba(165,81,255,.1) 20%,transparent 60%);z-index:0}
  .livestream-container{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;margin:0 auto;padding:0;width:100%}
  .livestream-title{color:#fff;font-size:clamp(1.25rem,3vw,2.5rem);font-weight:500;letter-spacing:-.02em;margin:0 0 .5rem;text-align:left}
  .livestream-content{display:flex;flex-direction:column;gap:0;flex-grow:1;min-height:0}
  .livestream-main{display:flex;flex-direction:column;height:30vh;overflow:hidden;padding:0;border:none;background:transparent}
  .livestream-player{position:relative;width:100%;height:100%;margin:0;overflow:hidden;background:rgba(255,255,255,.06)}
  .livestream-player iframe,.livestream-placeholder{position:absolute;inset:0;width:100%;height:100%;border:none}
  .livestream-offline{position:absolute;right:1rem;top:1rem;z-index:2;border-radius:var(--radius-2xl);overflow:hidden}
  .livestream-status{display:inline-block;padding:.5rem 1rem;border-radius:50px;text-transform:uppercase;white-space:nowrap;min-width:80px;text-align:center;background:var(--color-purple-alpha-20);border:1px solid var(--color-purple-alpha-40);color:rgba(255,255,255,.9);font-size:.75rem;font-weight:500}

  .livestream-chat{z-index:100;position:relative;display:flex;flex-direction:column;flex:1;height:100%;overflow:hidden;
    background:rgba(18,21,23,.9);border:1px solid rgba(255,255,255,.1);clip-path:inset(0 0 0 0 round var(--radius-2xl))}
  .chat-content{flex:1;overflow-y:auto;padding:1rem;background:rgba(18,21,23,.8);border-top:1px solid var(--color-border-primary);scroll-behavior:smooth}
  .chat-compose{padding:.75rem 1rem;background:rgba(28,30,35,.9);border-top:1px solid var(--color-border-primary)}
  .chat-input{background:rgba(255,255,255,.07);border:none;border-radius:25px;color:#fff;flex:1;font-size:.95rem;line-height:1.5;min-height:42px;max-height:120px;resize:none;padding:.5rem}
  .chat-emoji,.chat-send,.chat-upload{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;border-radius:50%;background:rgba(45,45,50,.4);color:#fff}
  .chat-send{background:#fff;border:1px solid #ddd;margin-left:.5rem}
  .chat-send svg{width:18px;height:18px;color:#000}

  /* ==== AUTH MODAL + SETTINGS ==== */
  .auth-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;z-index:9999}
  .auth-modal.hidden{display:none}
  .auth-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85)}
  .auth-modal-content{
    position:relative;z-index:1;width:90%;max-width:480px;max-height:90vh;overflow:auto;padding:32px;
    background:rgba(18,21,23,.9);border:1px solid var(--color-border-primary);border-radius:var(--radius-xl);animation:.2s fadeInScale
  }
  .auth-tabs{display:flex;gap:32px;justify-content:center;margin-bottom:32px}
  .auth-tab{background:none;border:none;color:var(--color-text-muted);font-size:18px;font-weight:500;padding:8px 4px;position:relative}
  .auth-tab.active{color:#B49DF8}
  .auth-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#B49DF8;border-radius:2px}

  .auth-forms-container{display:flex;flex-direction:column;flex:1;position:relative;width:100%}
  .auth-form{position:absolute;width:100%;opacity:0;visibility:hidden}
  .auth-form.active{opacity:1;visibility:visible;animation:slideIn var(--t-300)}
  .form-field{position:relative;margin-bottom:24px}
  .auth-input{width:100%;padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--color-border-primary);background:rgba(255,255,255,.05);color:#fff;font-size:16px}
  .error-message{position:absolute;left:0;top:100%;opacity:0;transform:translateY(-5px);color:#ff4081}
  .auth-submit{
    width:100%;padding:14px;border-radius:50px;background:#a77bf7;color:#fff;border:1px solid rgba(255,255,255,.3);
    font-weight:500;position:relative;overflow:hidden
  }
  .auth-submit::before{
    content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;
    background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.5),rgba(255,255,255,.1));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
            mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:destination-out;mask-composite:exclude;animation:shimmer 3s linear infinite
  }
  .auth-submit::after{
    content:"";position:absolute;top:-100%;left:-100%;width:50%;height:300%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4) 50%,transparent);transform:rotate(30deg);animation:shine 3s infinite
  }
  .auth-close-button{position:absolute;top:24px;right:24px;width:40px;height:40px;border-radius:50%;background:none;border:none;color:rgba(255,255,255,.7)}

  .settings-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(5px);opacity:0;visibility:hidden;z-index:1100}
  .settings-overlay.hidden{display:none}
  .settings-modal{
    width:100%;max-width:500px;max-height:85vh;margin:16px;display:flex;flex-direction:column;overflow:hidden;
    background:#232222;border:1px solid var(--color-border-primary);border-radius:16px;transform:translateY(20px)
  }
  .settings-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#232222;border-bottom:1px solid var(--color-border-primary)}
  .settings-content{flex:1;min-height:0;overflow:auto;padding:24px}
  .settings-section,.settings-field{display:flex;flex-direction:column}
  .settings-field{gap:8px;padding:8px 0}
  .settings-actions{margin-top:24px;padding-top:20px;border-top:1px solid var(--color-border-primary);display:flex;flex-direction:column;gap:12px}

  /* ==== SUBSCRIPTION CARD ==== */
  .subscription-card{
    background:#1a1d21;border:1px solid #2a2d31;border-radius:12px;contain:layout style;
    padding:clamp(1rem,3vw,1.5rem);position:relative
  }
  .feature-item{display:flex;align-items:center;gap:var(--spacing-md);color:#fff;font-size:.9rem;padding:var(--spacing-sm) 0}
  .feature-item.disabled{opacity:.8;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4);border-radius:var(--radius-sm);color:#9ca3af;padding:var(--spacing-md) var(--spacing-lg)}
  .upgrade-button-new{width:100%;min-height:56px;border:none;border-radius:var(--radius-sm);background:var(--color-purple-primary);color:#fff}

  



}

/* ========== animations & keyframes (groupées pour minif) ========== */
@layer animations {
  @keyframes pulseSphere{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
  @keyframes pulseHalo{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(1.3)}}
  @keyframes slideTrack{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  @keyframes shimmer{0%{background-position:0 50%}100%{background-position:130% 50%}}
  @keyframes shine{0%{transform:rotate(30deg) translateX(-200%)}100%{transform:rotate(30deg) translateX(200%)}}
  @keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}100%{opacity:1;transform:scale(1)}}
  @keyframes left{to{margin-left:-32000px}}
  @keyframes back{to{margin-left:-32870px}}
  @keyframes right{to{margin-left:-33740px}}
  @keyframes filter-animation{0%,100%{filter:hue-rotate(0)}50%{filter:hue-rotate(90deg)}}
  @keyframes blur{0%{filter:blur(0)}100%{filter:blur(2px)}}
  @keyframes brightness{0%{filter:brightness(1) contrast(1)}100%{filter:brightness(.8) contrast(1.2)}}
}

/* ========== utilities (accessibilité, responsive, perf) ========== */
@layer utilities {
  /* Scroll prédictible iOS */
  .chat-content{overscroll-behavior:contain}

  /* Désactiver will-change où non nécessaire (sécurité globale) */
.review-card,.videos-grid,.video-card,.module-btn,.pricing-grid-card,.pricing-grid-button,
  .subscription-card,.trial-btn,.bottom-header,.livestream-chat,
  .toggle-slider::before,.auth-modal-content{will-change:auto}

/* n’active des layers qu’au moment d’animer */
.is-animating{ will-change: transform, opacity }



  /* Réduire coûts si prefers-reduced-motion */
  @media (prefers-reduced-motion:reduce){
    .reviews-section::before,.reviews-section::after,.slider-content,
     .content,.boyImage{animation:none!important}
     .container-reflect{filter:none!important}
  }

  /* Masque mobile si auth (parité avec ton JS) */
  body.authenticated-user .site-header,
  body.authenticated-user .section-hero { display:none!important }

  /* Media queries compressées */
  @media (max-width:1024px){
    .content-container{flex-direction:column;height:100vh;justify-content:space-between;padding:0}
    .showcase-video-container{order:1;max-width:100%;height:55%}
    .showcase-video,.showcase-video video{padding-bottom:7rem}
    .tarif-content{order:2;position:absolute;left:0;right:0;bottom:0;max-width:100%;margin:0;padding:var(--spacing-xl) var(--spacing-2xl) var(--spacing-lg);background:transparent;z-index:2}
    .pricing-grid-wrapper{grid-template-columns:1fr;margin:0 auto;max-width:600px}
    .faq-content-container{height:auto;min-height:60vh;padding:var(--spacing-2xl) var(--spacing-xl)}
    #faq-section{flex-direction:column;min-height:100vh}
    .faq-video-container,.faq-content-container{flex:0 0 auto;max-width:100%;width:100%}
    .faq-video-container{height:auto;max-height:40vh}
    .videos-content{flex-direction:column}
    .modules-list,.videos-grid{width:100%}
    .videos-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
    #video-player-section{padding-top:100px}
    .player-content{flex-direction:column}
    .main-content,.module-videos-list{width:100%}
  }
  @media (max-width:768px){
    .subscription-toggle{gap:var(--spacing-xl);margin-bottom:var(--spacing-lg);padding:.4rem .8rem}
    .ios-switch{width:50px;height:30px}.ios-switch::before{width:26px;height:26px}
    #videos-section{padding:3rem var(--spacing-lg)}
    .module-btn{padding:var(--spacing-lg) 1.25rem}
    .item-thumbnail{width:60px;height:34px}
    .item-info h4{font-size:.85rem}
    .item-info p{font-size:.75rem}
    .module-video-item{gap:.75rem;padding:.75rem}
    .video-description{padding-bottom:30px}
    .chat-compose{position:fixed;left:0;right:0;bottom:0;z-index:100;padding-bottom:max(.75rem,env(safe-area-inset-bottom));backdrop-filter:blur(10px);background:rgba(18,21,26,.95);box-shadow:0 -5px 15px rgba(0,0,0,.7)}
    .chat-content{padding-bottom:calc(4rem + 80px)}
  }
  @media (max-width:767px){
    .reviews-section{min-height:auto;overflow-x:hidden;padding:1rem 0}
    .reviews-title{font-size:clamp(24px,4vw,32px);margin-bottom:1rem;width:95%}
    .reviews-container{max-width:calc(100vw - 2rem)}
    .reviews-slider-container{padding-bottom:2rem}
    .slider-track{min-height:200px}
    .review-card{width:320px;min-height:auto;padding:1.2rem}
    .review-text{font-size:.85rem;line-height:1.4}
    .reviewer-avatar{width:36px;height:36px;font-size:12px}
  .slider-content{animation-duration:120s;animation-play-state:paused}
  .slider-content.reverse{animation-duration:120s;animation-play-state:paused}
  }
  @media (max-width:480px){
    .reviews-title{font-size:clamp(20px,5vw,28px);margin-bottom:.5rem}
    .reviews-container{max-width:calc(100vw - 1rem)}
    .slider-track{min-height:180px;mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent)}
    .review-card{width:280px;padding:1rem}
    .video-card{aspect-ratio:.9;min-width:240px}
    .videos-grid{grid-template-columns:1fr}
    .videos-title{font-size:1.75rem}
    #video-player-section{padding-top:80px}
    .video-metadata{flex-direction:column;gap:.5rem}
  }
  @media (min-width:1024px){
    .livestream-container{max-width:1800px;min-height:calc(100vh - 96px);padding:2rem;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none}
    .livestream-container::-webkit-scrollbar{display:none}
    .livestream-content{gap:2rem!important;min-height:calc(100vh - 96px - 4rem)!important;padding-right:calc(38% + 4rem)!important}
    .livestream-main{height:auto!important}
    .livestream-chat{position:fixed!important;top:0;right:0;width:38%!important;height:calc(100vh - 4rem - 96px)!important;margin:2rem 2rem 2rem 0!important;border-radius:var(--radius-2xl);box-shadow:0 4px 20px rgba(0,0,0,.15);background:rgba(18,21,23,.8)!important}
    .livestream-player{position:relative;width:100%;height:0;padding-top:56.25%;border-radius:var(--radius-2xl);overflow:hidden}
    .livestream-player iframe,.livestream-placeholder{position:absolute;inset:0;width:100%;height:100%}
  }

  /* Fallback masques si navigateur ancien */
  @supports not (mask-image: linear-gradient(black, black)) {
    .slider-track{mask-image:none}
    .slider-track::before,.slider-track::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.85) 20%,rgba(0,0,0,.85) 80%,transparent);pointer-events:none}
  }

  /* Haute densité : ombres douces */
  @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
    .review-card{box-shadow:0 8px 16px rgba(87,73,132,.12)}
    .toggle-slider::before{box-shadow:0 1px 2px rgba(0,0,0,.3)}
  }
}








@layer base,components,layout,utilities;:root{--text-primary:var(--color-text-primary);--text-secondary:var(--color-text-secondary);--primary-purple:var(--color-purple-primary);--nav-hover:var(--color-nav-hover);--btn-border:var(--color-btn-border);--chat-bg-primary:var(--color-chat-bg-primary);--chat-bg-secondary:var(--color-chat-bg-secondary);--modal-bg:var(--color-modal-bg);--overlay-bg:var(--color-overlay-bg);--font-primary:var(--font-family-primary);--hero-title-size:var(--font-size-hero-title);--hero-subtitle-size:var(--font-size-hero-subtitle);--spacing-lg:var(--spacing-large);--spacing-md:var(--spacing-medium);--spacing-sm:var(--spacing-small);--color-bg-primary:#000004;--color-bg-secondary:#000004;--color-bg-tertiary:#000004;--color-bg-space:hsl(240,15%,12%);--color-text-primary:#fff;--color-text-secondary:rgba(255,255,255,0.8);--color-text-muted:rgba(255,255,255,0.6);--color-text-dark:#000;--color-text-dark-secondary:rgba(0,0,0,0.8);--color-border-primary:rgba(255,255,255,0.1);--color-border-secondary:rgba(255,255,255,0.05);--color-purple-primary:#8b03ff;--color-purple-light:#a551ff;--color-purple-very-light:#d0b0ff;--color-purple-deep:#4a2196;--color-purple-accent:#A259FF;--color-purple-soft:#B49DF8;--color-pink-primary:#FF91DB;--color-blue-primary:#4040e5;--color-blue-light:#0078ff;--color-success:#10b981;--color-error:#ff4081;--color-purple-alpha-20:rgba(139,3,255,0.2);--color-purple-alpha-40:rgba(139,3,255,0.4);--color-purple-alpha-50:rgba(139,3,255,0.5);--color-white-alpha-10:rgba(255,255,255,0.1);--color-white-alpha-15:rgba(255,255,255,0.15);--color-white-alpha-20:rgba(255,255,255,0.2);--color-black-alpha-70:rgba(0,0,0,0.7);--color-chat-border:rgba(255,255,255,0.1);--color-mention-bg:rgba(182,109,255,0.08);--color-mention-bg-hover:rgba(182,109,255,0.15);--color-mention-text:#b66dff;--color-modal-bg-dark:#212121;--color-modal-overlay:rgba(0,0,0,0.85);--color-modal-border:rgba(255,255,255,0.08);--color-button-cancel-bg:rgba(255,255,255,0.07);--color-button-cancel-border:rgba(255,255,255,0.15);--color-input-bg:rgba(255,255,255,0.07);--color-input-bg-focus:rgba(255,255,255,0.1);--color-suggestions-bg:rgba(24,27,33,0.95);--color-nav-bg:rgba(35,34,34,0.8);--color-nav-text:rgba(255,255,255,0.8);--color-nav-hover:#fff;--color-chat-bg-primary:rgba(18,21,23,0.8);--color-chat-bg-secondary:rgba(28,30,35,0.9);--color-chat-text-secondary:#ddd;--color-card-bg:rgba(18,21,23,0.4);--color-card-bg-dark:rgba(18,21,23,0.8);--color-modal-bg:rgba(18,21,23,0.9);--color-overlay-bg:rgba(0,0,0,0.7);--color-shiny-cta-bg:#000;--color-shiny-cta-bg-subtle:#1a1818;--color-shiny-cta-fg:#fff;--color-shiny-cta-highlight:darkslateblue;--color-shiny-cta-highlight-subtle:#8484ff;--color-faq-bg:#333;--color-pricing-border:#00d4ff;--color-pricing-border-hover:#00b8e6;--color-btn-bg:rgba(18,21,23,0.7);--color-btn-shiny-bg:#000;--color-btn-shiny-bg-subtle:#1a1818;--color-btn-shiny-highlight:darkslateblue;--color-btn-shiny-highlight-subtle:#8484ff;--color-loader-secondary:rgba(255,255,255,0.15);--color-loader-blue-light:rgba(0,123,255,0.2);--color-loader-light-secondary:rgba(255,255,255,0.2);--color-loader-success-secondary:rgba(16,185,129,0.2);--color-premium-secondary:#982aff;--color-premium-disabled:#6b7280;--color-premium-card-bg:#1a1d21;--color-premium-card-border:#2a2d31;--color-premium-trial-bg:#2d1b1b;--color-premium-trial-border:#ef4444;--color-success-bg:rgba(34,197,94,0.2);--color-success-border:rgba(34,197,94,0.4);--color-error-bg:rgba(239,68,68,0.15);--color-error-border:rgba(239,68,68,0.4);--font-primary:"Roobert",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-normal:var(--font-weight-regular);--font-size-hero-title:clamp(42px,8vw,95px);--font-size-hero-subtitle:clamp(16px,2vw,23px);--font-size-action:clamp(30px,7.5vw,90px);--font-size-btn:clamp(16px,2vw,20px);--font-size-trustpilot:clamp(14px,1.5vw,18px);--line-height-hero:1.2;--line-height-base:1.5;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:.75rem;--spacing-lg:1rem;--spacing-xl:1.5rem;--spacing-2xl:2rem;--spacing-3xl:2.5rem;--spacing-4xl:4rem;--spacing-hero-padding:clamp(20px,5vw,40px);--spacing-nav-padding:.8rem 2rem;--spacing-trustpilot-gap:var(--spacing-md);--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:50px;--border-radius-large:20px;--border-radius-medium:12px;--color-card-border:rgba(255,255,255,0.08);--shadow-sm:0 2px 4px rgba(0,0,0,0.2);--shadow-md:0 4px 12px rgba(139,3,255,0.25);--shadow-lg:0 8px 24px rgba(87,73,132,0.08);--shadow-xl:0 15px 30px rgba(139,3,255,0.2);--shadow-2xl:0 20px 40px rgba(0,0,0,0.2);--shadow-nav:0 4px 30px rgba(0,0,0,0.1);--shadow-nav-active:0 4px 30px rgba(0,0,0,0.2);--shadow-heavy:0 8px 32px rgba(139,3,255,0.2);--shadow-pricing:0 0 8px rgba(0,212,255,0.25),inset 0 1px 0 rgba(255,255,255,0.8);--shadow-pricing-hover:0 0 15px rgba(0,212,255,0.4),0 8px 20px rgba(0,0,0,0.1);--shadow-light:0 2px 4px rgba(0,0,0,0.2);--duration-fast:.2s;--duration-normal:.3s;--duration-slow:.5s;--duration-loader:.8s;--duration-loader-reduced:1.5s;--easing-linear:linear;--easing-ease:ease;--easing-ease-out:ease-out;--easing-smooth:cubic-bezier(.4,0,.2,1);--easing-bounce:cubic-bezier(.25,.1,.25,1);--easing-word:cubic-bezier(.16,1,.3,1);--transition-fast:transform var(--duration-fast) var(--easing-smooth),opacity var(--duration-fast) var(--easing-smooth),background-color var(--duration-fast) var(--easing-smooth),border-color var(--duration-fast) var(--easing-smooth),box-shadow var(--duration-fast) var(--easing-smooth);--transition-normal:transform var(--duration-normal) var(--easing-smooth),opacity var(--duration-normal) var(--easing-smooth),background-color var(--duration-normal) var(--easing-smooth),border-color var(--duration-normal) var(--easing-smooth),box-shadow var(--duration-normal) var(--easing-smooth);--transition-smooth:transform var(--duration-normal) var(--easing-smooth),opacity var(--duration-normal) var(--easing-smooth);--transition-bounce:transform var(--duration-normal) var(--easing-bounce),opacity var(--duration-normal) var(--easing-bounce);--transition-word:.5s var(--easing-word);--size-header-height:70px;--size-hero-content-width:1200px;--size-hero-top-position:40%;--size-trustpilot-star:clamp(20px,2vw,24px);--size-loader-xs:16px;--size-loader-sm:24px;--size-loader-md:40px;--size-loader-lg:clamp(40px,8vw,60px);--border-width-xs:2px;--border-width-sm:2px;--border-width-md:3px;--border-width-lg:4px;--btn-padding-y:clamp(10px,2vw,14px);--btn-padding-x:clamp(30px,3vw,45px);--btn-min-width:clamp(200px,30vw,280px);--toggle-width:44px;--toggle-height:24px;--toggle-slider-size:18px;--gradient-primary:linear-gradient(180deg,var(--color-bg-primary) 0%,var(--color-bg-secondary) 60%,var(--color-bg-tertiary) 100%);--gradient-premium:linear-gradient(135deg,#8b03ff,#a551ff);--gradient-premium-overlay:linear-gradient(135deg,rgba(0,0,0,0.95),rgba(15,10,25,0.95));--word-height:calc(1em * 1.4);--word-move-distance:20px;--bgrotate:120deg;--text-rotate:220deg;--color-primary-light:#b388ff;--color-primary-lighter:#d4c1ff;--color-primary-dark:#5a2fb0}
@media (max-width:768px){:root{--word-height:calc(1em * 1.6);--word-move-distance:15px}}
@media (max-width:480px){:root{--word-height:calc(1em * 1.8);--word-move-distance:10px;--spacing-hero-padding:clamp(15px,4vw,30px)}}
[data-theme=light]{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:rgba(0,0,0,0.8)}
@property --text-rotate{initial-value:220deg;inherits:false;syntax:"<angle>"}
@property --bgrotate{initial-value:120deg;inherits:false;syntax:"<angle>"}
@font-face{font-display:swap;font-family:Roobert;font-style:normal;font-weight:300;src:url(../assets/fonts/RoobertPRO-Light.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-display:swap;font-family:Roobert;font-style:normal;font-weight:400;src:url(../assets/fonts/RoobertPRO-Regular.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-display:swap;font-family:Roobert;font-style:normal;font-weight:500;src:url(../assets/fonts/RoobertPRO-Medium.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}
@font-face{font-display:swap;font-family:Roobert;font-style:normal;font-weight:700;src:url(../assets/fonts/RoobertPRO-Bold.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}

@layer base{
  html{color-scheme:light dark}
  [data-theme=light]{color-scheme:only light;--bg-primary:#fff;--text-primary:#000;--text-secondary:rgba(0,0,0,0.8)}
  [data-theme=dark]{color-scheme:only dark}
  *,:before,:after{box-sizing:border-box}
  body{background:var(--gradient-primary);color:var(--text-primary);display:grid;font-family:var(--font-primary);font-weight:var(--font-weight-normal);line-height:1.5;margin:0;min-height:100dvh;overflow-x:hidden; justify-items:stretch;align-items:flex-start;}
}

@layer components{
  .trustpilot-section{align-items:center;display:flex;gap:var(--spacing-trustpilot-gap);justify-content:center}
  .trustpilot-stars{display:flex;gap:var(--spacing-xs)}
  .trustpilot-star{background:rgba(30,32,35,0.5);border-radius:var(--radius-sm);display:grid;height:var(--size-trustpilot-star);padding:clamp(3px,0.4vw,4px);place-items:center;transition:background-color var(--duration-fast) var(--easing-smooth);width:var(--size-trustpilot-star)}
  .trustpilot-star:hover{background:rgba(30,32,35,0.7)}
  .trustpilot-star svg{height:100%;width:100%;fill:var(--text-secondary);transition:fill var(--duration-fast) var(--easing-smooth)}
  .trustpilot-text{color:var(--text-secondary);font-size:var(--font-size-trustpilot);font-weight:var(--font-weight-normal)}

  .hero-title{color:var(--color-text-primary);display:flex;flex-direction:column;font-size:var(--font-size-hero-title);font-weight:var(--font-weight-medium);letter-spacing:-.02em;line-height:var(--line-height-hero);margin:0;position:relative;text-align:center}
  .hero-title-main{white-space:nowrap}
  .hero-subtitle{color:var(--color-text-secondary);font-size:var(--font-size-hero-subtitle);line-height:var(--line-height-base);margin:1.5em auto 0;max-width:min(100%,800px);text-align:center;white-space:normal;font-weight:var(--font-weight-regular)}
  .button-cta{background-color:var(--color-btn-bg);border:1px solid var(--color-text-primary);border-radius:var(--radius-full);color:var(--color-text-primary);cursor:pointer;display:block;font-size:var(--font-size-btn);margin:2em auto 0;min-width:var(--btn-min-width);padding:var(--btn-padding-y) var(--btn-padding-x);text-decoration:none;transition:var(--transition-normal)}
  .button-cta:hover{background-color:rgba(18,21,23,0.9);transform:translateY(-1px)}

  .word-container{align-items:center;display:flex;height:var(--word-height);justify-content:center;min-height:var(--word-height);overflow:visible;padding:.2em 0;pointer-events:none;position:relative}
  .word,.word-initial{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:transform var(--duration-slow) var(--easing-word),opacity .4s var(--easing-bounce)}
  .word-initial{opacity:1;transition:transform .6s var(--easing-bounce),opacity .4s var(--easing-bounce)}
  .word-initial.exiting{opacity:0;transform:translate(-50%,-50%) translateY(-30px)}
  .word{opacity:0;transform:translate(-50%,-50%) translateY(var(--word-move-distance));visibility:hidden}
  .word.visible{opacity:1;transform:translate(-50%,-50%) translateY(0);visibility:visible}
  .word.exiting{opacity:0;transform:translate(-50%,-50%) translateY(-25px)}
  .word.final{background:#fff;-webkit-background-clip:text;background-clip:text;display:inline-block;-webkit-text-fill-color:transparent;opacity:0;padding-bottom:10px;transform:translate(-50%,-50%) translateY(var(--word-move-distance));transition:transform var(--duration-loader) var(--easing-word),opacity var(--duration-loader) var(--easing-word);visibility:hidden}
  .word.final.visible{animation:final-entrance 1.2s var(--easing-ease) forwards;opacity:1;transform:translate(-50%,-50%) translateY(0);visibility:visible}
  @keyframes final-entrance{0%{opacity:0;transform:translate(-50%,-50%) translateY(var(--word-move-distance))}50%{opacity:.7}100%{opacity:1;transform:translate(-50%,-50%) translateY(0)}}
  .action-list{font-size:var(--font-size-action);font-weight:600;letter-spacing:-.02em;list-style:none;margin:0;padding:0}
  .action-item:first-of-type{color:#8a7dfb}.action-item:nth-of-type(2){color:#5241e7}.action-item:nth-of-type(3){color:#5f6dff}.action-item:nth-of-type(4){color:#4b8ce8}.action-item:nth-of-type(5){color:#38a0d4}
  [data-animate=true] .action-item{opacity:.2;transition:opacity var(--duration-normal) var(--easing-smooth)}[data-animate=true] .action-item.active{opacity:1}
  .intro-title,.title-main{color:var(--color-text-primary)}
  .title-main{display:flex;flex-direction:column;font-size:clamp(45px,8vw,60px);font-weight:var(--font-weight-medium);letter-spacing:-.02em;line-height:var(--line-height-hero);margin:0;position:relative;text-align:center}
  .section-main-title{margin-left:clamp(5vw,7vw,9vw);padding-top:clamp(40px,10vw,120px)}
  .main-header{color:var(--color-text-primary);display:flex;flex-direction:column;font-size:clamp(40px,10vw,120px);font-weight:600;letter-spacing:-.02em;line-height:.8;margin:0 auto;text-align:left}
  .title-line{display:block;white-space:nowrap}
  .intro-title{display:inline-block;font-size:var(--font-size-action);font-weight:600;height:fit-content;letter-spacing:-.02em;margin:0 0 0 clamp(5vw,7vw,9vw);position:sticky;top:calc(50% - .5em);transform:translateX(-1.1rem)}
}

@layer utilities{
  .sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}
  .hidden{display:none!important}.invisible{visibility:hidden}
  .no-scroll{overflow:hidden}
  .performance-critical{contain:strict;content-visibility:auto}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  .fluid{--font-level:0;--font-min:1rem;--font-max:2rem;--width-min:320px;--width-max:1440px;--fluid-min:calc(var(--font-min)*(1.1**var(--font-level)));--fluid-max:calc(var(--font-max)*(1.33**var(--font-level)));--fluid-value:clamp(calc(var(--fluid-min)/16*1rem),calc(var(--fluid-min)/16*1rem)+calc(var(--fluid-max)-var(--fluid-min))*calc((100vw-calc(var(--width-min)/16*1rem))/(calc(var(--width-max)/16*1rem)-calc(var(--width-min)/16*1rem))),calc(var(--fluid-max)/16*1rem));font-size:var(--fluid-value);padding-bottom:100px}
  [data-snap=true]{scroll-snap-type:none}[data-snap=true] .action-item{scroll-snap-align:center}
  .word,.word-container,.word-initial{-webkit-backface-visibility:hidden;backface-visibility:hidden}
}

@media (max-width:1024px){.word-container{padding:.3em 0}}
@media (max-width:768px){.word-container{padding:.3em 0}.word.final.visible{animation:none;transition:transform .6s var(--easing-ease-out),opacity .6s var(--easing-ease-out)}}
@media (max-width:480px){.word-container{padding:.4em 0}}

@layer base{
  :root{--nav-border-radius:var(--radius-full);--nav-padding:var(--spacing-nav-padding);--nav-shadow:var(--shadow-nav);--nav-shadow-active:var(--shadow-nav-active);--nav-transition:opacity var(--duration-normal) var(--easing-smooth),transform var(--duration-normal) var(--easing-smooth),background-color var(--duration-normal) var(--easing-smooth),border-color var(--duration-normal) var(--easing-smooth),box-shadow var(--duration-normal) var(--easing-smooth)}
}

@layer layout{
  .site-section{padding:clamp(1rem,5vw,3rem);position:relative}
  .section-hero,.site-header,.site-section{min-height:100dvh;width:100%}
  .section-hero{overflow:hidden;position:relative}
  .hero-content{left:50%;max-width:var(--size-hero-content-width);padding:0 var(--spacing-hero-padding);top:var(--size-hero-top-position);transform:translate(-50%,-50%);z-index:2}
  .hero-content,.hero-video{position:absolute;width:100%}
  .hero-video{height:100%;left:0;object-fit:cover;top:0;z-index:1}
  .section-intro{display:flex;font-size:clamp(40px,6vw,80px);letter-spacing:-.02em;padding-top:clamp(1.376rem,9vw,6.86rem);width:100%}
  .section-conclusion{display:grid;min-height:100dvh;place-items:center;width:100%}
}

@layer components{
  .bottom-header{bottom:0;left:0;padding:1rem 2rem;position:fixed;width:100%;z-index:1000;transition:var(--nav-transition)}
  .nav-container{background-color:var(--color-nav-bg);border:1px solid var(--color-border-primary);border-radius:var(--nav-border-radius);box-shadow:var(--nav-shadow);margin:0 auto;max-width:1400px;overflow:visible;padding:var(--nav-padding);position:relative;transition:var(--nav-transition);display:flex;align-items:center;justify-content:space-between}
  .nav-content{display:flex;align-items:center;justify-content:space-between;width:100%}
  .nav-section{align-items:center;display:flex}
  .nav-section-left{flex:0 0 auto}.nav-section-center{display:flex;flex:1;justify-content:center}.nav-section-right{flex:0 0 auto}

  .nav-left .logo,.nav-section-left .logo{color:var(--color-nav-hover);font-size:1.25rem;font-weight:var(--font-weight-medium);text-decoration:none;display:flex;align-items:center;justify-content:center}
  .desktop-nav{display:flex;align-items:center;justify-content:center;gap:2.5rem}
  .nav-link{color:var(--color-nav-text);font-size:1rem;font-weight:var(--font-weight-regular);text-decoration:none;transition:color var(--duration-normal) var(--easing-smooth)}
  .nav-link:hover{color:var(--color-nav-hover)}
  .desktop-actions{align-items:center;display:flex}
  .nav-cta{background-color:transparent;border:1px solid var(--color-text-primary);border-radius:25px;color:var(--color-nav-hover);cursor:pointer;font-size:.9rem;font-weight:var(--font-weight-regular);margin-left:2rem;padding:.6rem 1.2rem;transition:var(--nav-transition)}
  .nav-cta:hover{background-color:var(--color-white-alpha-10);border-color:var(--color-nav-hover);transform:translateY(-1px)}
  .burger-menu{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:44px;justify-content:center;padding:8px;position:relative;transition:transform var(--duration-normal) var(--easing-smooth);width:44px;z-index:1004}
  .burger-menu:focus{outline:none}
  .burger-icon,.close-icon{color:var(--color-nav-hover);height:24px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity var(--duration-normal) var(--easing-smooth),transform var(--duration-normal) var(--easing-smooth);width:24px}
  .burger-menu .burger-icon{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .burger-menu .close-icon,.burger-menu.active .burger-icon{display:none;opacity:0;transform:translate(-50%,-50%) scale(.8)}
  .burger-menu.active .close-icon{display:block;opacity:1;transform:translate(-50%,-50%) scale(1)}
  .header-fixed{justify-content:space-between;position:relative;z-index:1002;display:flex;align-items:center;width:100%}
  .mobile-login-section{display:flex;align-items:center;width:100%;flex-direction:column;gap:.7rem;max-width:300px}
  .mobile-login-link{color:var(--color-nav-hover);font-size:22px;font-weight:var(--font-weight-medium);text-decoration:none}
  .mobile-start-button{background-color:transparent;border:1px solid var(--color-text-primary);border-radius:var(--nav-border-radius);color:var(--color-nav-hover);cursor:pointer;display:block;font-size:18px;font-weight:var(--font-weight-regular);margin:1.5em auto 0;min-width:200px;padding:12px 28px;text-align:center;transition:var(--nav-transition)}
  .mobile-start-button:hover{background-color:var(--color-white-alpha-10);border-color:var(--color-nav-hover);transform:translateY(-1px)}
}
@layer utilities{
  .nav-scrolled{background-color:var(--color-nav-bg)}.burger-line{display:none}body.menu-open{overflow:hidden}
}
@layer layout{
@media (min-width:1025px){
.nav-container{height:clamp(64px,5vw,80px);min-height:clamp(64px,5vw,80px)}
.nav-content{align-items:center;display:grid;grid-template-columns:minmax(200px,1fr) 2fr minmax(200px,1fr);opacity:1!important;transform:none!important;visibility:visible!important;gap:clamp(2rem,4vw,4rem);padding:0 clamp(0.25rem,0.5vw,0.75rem)}
.nav-section-center{justify-self:center}
.nav-section-left,.nav-section-right{min-width:150px}
.nav-section-right{justify-content:flex-end;padding-right:clamp(0.125rem,0.25vw,0.25rem)}
.desktop-actions{align-items:center;display:flex;justify-content:flex-end;gap:1.25rem}
.nav-cta{margin-left:0;padding:.6rem 1.2rem;white-space:nowrap;flex-shrink:0}
.nav-link{white-space:nowrap}
.header-fixed,.mobile-actions,.mobile-login-section{display:none}
}
  @media (max-width:1024px){
    .bottom-header{bottom:auto;height:var(--size-header-height);padding:.5rem 1rem;top:0}
    .nav-container{border-radius:var(--nav-border-radius);margin:0 1rem;overflow:hidden;padding:0;z-index:1001}
    .header-fixed,.nav-container{height:calc(var(--size-header-height) - 20px)}
    .header-fixed{background-color:var(--color-nav-bg);left:0;padding:0 1rem;position:absolute;top:0;width:100%;z-index:1003}
@media (max-width:1024px){
  .nav-container.menu-active{
    overflow: visible !important;  /* Force l'application */
    box-shadow: var(--nav-shadow-active);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
  }
}
.nav-content {
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    /* détaché du conteneur pour éviter le clipping */
    position: fixed;
    left: 0;
    right: 0;
    top: var(--size-header-height);        /* plus de -20px “magique” */
    max-height: calc(100dvh - var(--size-header-height));
    overflow: auto;
    width: 100%;                           /* ou laisse auto; left/right suffisent */
    /* visuels/anim inchangés */
    opacity: 0;
    padding: 2rem;
    transform-origin: top;
    transform: scaleY(0);
    transition: var(--transition-smooth);
    visibility: hidden;
    z-index: 1005;                         /* > .header-fixed (1003) */
}
    .nav-content.active{background-color:var(--color-nav-bg);opacity:1;transform:scaleY(1);visibility:visible}
    .nav-section-left,.nav-section-right{display:none!important}
    .nav-section-center{width:100%}
    .desktop-nav{flex-direction:column;gap:1.5rem;margin-bottom:2rem;margin-top:1rem}
    .desktop-nav .nav-link{font-size:22px;font-weight:var(--font-weight-medium);transition:color var(--duration-fast) var(--easing-smooth)}
    .desktop-actions{display:none}
    .mobile-actions{display:block}
    .mobile-login-section{margin-top:auto;padding-bottom:2rem}
  }
  @media (max-width:768px){.header-fixed,.nav-container.menu-active .header-fixed{background-color:var(--color-nav-bg);padding:0 1.5rem}}
  @media (max-width:480px){.bottom-header{padding:.5rem}.nav-container{margin:0 .8rem}.header-fixed{padding:0 .8rem}.nav-container.menu-active .header-fixed{padding:0 1.2rem}.logo{font-size:1rem}.desktop-nav .nav-link,.mobile-login-link{font-size:20px}}
  @media (max-height:600px) and (max-width:1024px){.nav-content{gap:1rem}.desktop-nav{gap:1rem;margin-bottom:1rem}.mobile-login-section{padding-bottom:1rem}}
}

:root{--ar:.718;--br:4.55%/3.5%;--hl:1;--bg:hsl(240,15%,12%);--t:all .66s ease;--cards-position:fixed}
@property --text{initial-value:220deg;inherits:false;syntax:"<angle>"}

.space-section{background:linear-gradient(180deg,#000004,#050709 50%,#070B0F);height:100dvh;overflow:hidden;position:relative;width:100%}
.space-section:before{animation:stars-move 60s linear infinite;background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 40% 70%,#fff,transparent),radial-gradient(1px 1px at 90% 40%,#fff,transparent),radial-gradient(1px 1px at 50% 60%,#fff,transparent),radial-gradient(2px 2px at 10% 80%,#fff,transparent),radial-gradient(1px 1px at 75% 25%,#fff,transparent),radial-gradient(1px 1px at 30% 90%,#fff,transparent);background-size:400px 400px,300px 300px,200px 200px,150px 150px,250px 250px,180px 180px,220px 220px;opacity:.8}
.space-section:after,.space-section:before{background-repeat:repeat;content:"";height:200%;left:0;position:absolute;top:0;width:100%}
.space-section:after{animation:stars-move 120s linear infinite reverse;background-image:radial-gradient(1px 1px at 25% 25%,rgba(255,255,255,0.6),transparent),radial-gradient(1px 1px at 75% 75%,rgba(255,255,255,0.4),transparent),radial-gradient(1px 1px at 60% 40%,rgba(255,255,255,0.5),transparent);background-size:350px 350px,280px 280px,180px 180px;opacity:.6}
@keyframes stars-move{0%{transform:translateY(0)}100%{transform:translateY(-100dvh)}}
.space-section #horizon{background:var(--color-bg-primary);bottom:-20%;left:50%;margin-left:-80%;width:160%}
.space-section #horizon,.space-section #horizon:before{border-radius:100%/100%;filter:blur(20px);height:70%;position:absolute}
.space-section #horizon:before{background:var(--color-primary-light);content:" ";margin-left:9.375%;opacity:.6;width:81.25%}
.space-section #horizon:after{background:var(--color-primary-lighter);border-radius:650px/350px;content:" ";filter:blur(16px);height:20%;margin-left:34%;opacity:.5;position:absolute;width:32%}
.space-section #horizon .glow{background:var(--color-primary-dark);filter:blur(120px);opacity:.7;top:-10%;width:100%}
.space-section #earth,.space-section #horizon .glow{border-radius:100%/100%;height:100%;position:absolute}
.space-section #earth{background:#000;bottom:-50%;left:50%;margin-left:-100%;width:200%}
.space-section #earth:before{box-shadow:inset 0 0 62px 20px rgba(138,60,173,0.85)}
.space-section #earth:after,.space-section #earth:before{border-radius:100%/100%;content:" ";height:100%;position:absolute;width:100%}
.space-section #earth:after{background:linear-gradient(90deg,rgba(26,9,38,1),rgba(26,9,38,0) 50%,rgba(26,9,38,1)),linear-gradient(180deg,rgba(0,0,0,0) 80%,rgba(0,0,0,1))}

.countdown-container{left:50%;max-width:1200px;padding:0 20px;position:absolute;text-align:center;top:30%;transform:translate(-50%,-50%);width:100%;z-index:10}
.countdown-title{font-size:clamp(18px,2vw,24px);margin-bottom:20px}
.countdown,.countdown-title{color:var(--color-text-primary);font-weight:500;letter-spacing:-.02em}
.countdown{align-items:center;display:flex;flex-wrap:nowrap;font-size:clamp(25px,5vw,48px);gap:10px;justify-content:center;margin-bottom:30px}
.countdown span{margin:0;white-space:nowrap}
.cta-button{background-color:rgba(18,21,23,0.7);border:1px solid #fff;border-radius:50px;color:var(--color-text-primary);cursor:pointer;display:inline-block;font-size:clamp(14px,2vw,18px);font-weight:400;letter-spacing:0;margin:.5em auto 0;min-width:clamp(180px,30vw,260px);padding:12px 40px;transition:var(--transition-fast);white-space:nowrap}
.cta-button:hover{background-color:rgba(18,21,23,0.8);border-color:rgba(255,255,255,0.4)}

.landing{background:#000;position:relative;z-index:1}
.landing,.landing-wrapper{overflow:hidden;width:100%}
.landing-wrapper{margin:0 auto;max-width:100vw}
.landing-inner{display:flex;flex-direction:column;margin:0 auto;max-width:1400px;padding:0 2rem;width:100%}
.landing-text{padding-top:5rem;width:100%;z-index:2}
.landing-heading{color:var(--color-text-primary);display:flex;flex-direction:column;font-size:clamp(56px,7.5vw,120px);font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:0;position:relative;text-align:left}
.landing-subheading{color:var(--color-text-secondary);font-size:clamp(21px,2.25vw,36px);font-weight:400;line-height:1.4;margin:1.5em 0 0;text-align:left;white-space:normal}
.landing-media{margin-top:2rem;overflow:hidden;width:100%}
.video-wrapper{height:0;overflow:hidden;padding-bottom:100%;position:relative;width:100%}
.landing-video{aspect-ratio:1/1;height:auto;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1) 80%,rgba(0,0,0,0));mask-image:linear-gradient(180deg,rgba(0,0,0,1) 80%,rgba(0,0,0,0));object-fit:contain;object-position:center;position:absolute;transform:translate3d(-50%,-50%,0) rotate(15deg) scale(1.2);width:100%}

.cards-section{background:#000;min-height:100dvh;overflow:hidden;padding:clamp(2rem,5vw,4rem);position:relative;width:100%;z-index:2}
.background-container{pointer-events:none;z-index:1}
#background-designvideo,.background-container{height:100%;left:0;position:absolute;top:0;width:100%}
#background-designvideo{object-fit:cover;opacity:0;transition:opacity .8s ease-out;position:absolute}
.cards-container{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));margin:0 auto;max-width:1400px;padding:clamp(1rem,2vw,2rem);position:relative;z-index:3}
.card{align-items:center;background:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:var(--border-radius-large);box-shadow:var(--shadow-heavy);display:flex;justify-content:center;min-height:clamp(400px,50vh,600px);overflow:hidden;position:relative;transition:var(--transition-fast)}
.card:before{background:linear-gradient(165deg,rgba(139,3,255,0.1),transparent);content:"";inset:0;opacity:1;position:absolute;transition:opacity var(--duration-fast) var(--easing-smooth)}
.card .inner{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;padding:clamp(1.5rem,3vw,2.5rem);position:relative;text-align:center;width:100%;z-index:2}
.card-icon{font-size:clamp(2rem,4vw,3rem);margin-bottom:clamp(1.5rem,3vw,2.5rem);opacity:.9}
.card h2{color:var(--color-text-primary);font-size:clamp(1.5rem,3vw,2rem);font-weight:500;letter-spacing:-.01em;line-height:1.3;margin:0 0 clamp(1rem,2vw,1.5rem)}
.card p{color:var(--color-text-secondary);font-size:clamp(.9rem,2vw,1.1rem);line-height:1.6;margin:0;max-width:85%}
.darkness-overlay{background:#000;height:100dvh;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition:opacity .5s ease;width:100%;z-index:1}

.pricing-title-section{margin-bottom:clamp(2rem,6vw,4rem);margin-top:clamp(3rem,8vw,6rem);padding:0 1rem;position:relative;text-align:center;z-index:10}
.pricing-main-title{color:var(--color-text-primary);font-size:clamp(2.5rem,6vw,4rem);font-weight:600;letter-spacing:-.02em;margin:0;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.pricing-container{margin:4rem auto;max-width:1200px;padding:0 20px;position:relative;width:100%;z-index:2}
.pricing-grid{display:grid;gap:30px;grid-template-columns:repeat(3,1fr);margin:0 auto}
.pricing-card{background:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:var(--border-radius-large);color:var(--color-text-primary);padding:2rem;position:relative;transition:transform var(--duration-fast) var(--easing-smooth)}
.pricing-card:hover{transform:translateY(-5px)}
.pricing-header{margin-bottom:2rem;text-align:center}
.pricing-header h3{font-size:1.5rem;margin-bottom:1rem}
.price{font-size:2.5rem;font-weight:700}.period{font-size:1rem;opacity:.7}
.pricing-features{margin:2rem 0}.pricing-feature{align-items:center;display:flex;gap:1rem;margin:1rem 0}.pricing-emoji{font-size:1.2rem}
.pricing-button{background:rgba(255,255,255,0.95);border:1px solid #00d4ff;border-radius:100px;box-shadow:0 0 8px rgba(0,212,255,0.25),inset 0 1px 0 rgba(255,255,255,0.8);color:#000;cursor:pointer;font-weight:700;padding:1rem;text-align:center;transition:transform var(--duration-fast) var(--easing-smooth),box-shadow var(--duration-fast) var(--easing-smooth);width:100%}
.pricing-button:hover{border-color:#00b8e6;box-shadow:0 0 15px rgba(0,212,255,0.4),inset 0 1px 0 rgba(255,255,255,0.9);transform:scale(1.02)}
.pricing-save-badge{background:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:1rem;color:var(--color-text-primary);font-size:.75rem;font-weight:500;padding:.3rem .6rem;position:absolute;right:15px;top:15px}

.reviews-section{align-items:center;background:#000;display:flex;height:auto;justify-content:center;min-height:100dvh;opacity:1;overflow:hidden;padding:2rem 0;position:relative;width:100%;z-index:100}
.reviews-section:before{animation:pulseSphere 6s ease-in-out infinite;background:radial-gradient(circle at center,rgba(147,51,234,0.5) 0%,rgba(88,28,135,0.3) 40%,rgba(88,28,135,0.1) 60%,transparent 80%);border-radius:50%;height:300px;width:300px}
.reviews-section:after,.reviews-section:before{content:"";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}
.reviews-section:after{animation:pulseHalo 8s ease-in-out infinite alternate;background:radial-gradient(circle at center,transparent 0%,rgba(147,51,234,0.1) 40%,rgba(88,28,135,0.05) 60%,transparent 80%);height:400px;width:400px}
.reviews-title{background:linear-gradient(180deg,#fff,rgba(255,255,255,.75));-webkit-background-clip:text;background-clip:text;color:#fff;font-size:clamp(32px,5vw,42px);font-weight:500;left:50%;letter-spacing:-.02em;line-height:1.2;position:relative;text-align:center;transform:translateX(-50%);width:100%}
.reviews-container{margin:0;max-width:none;position:relative;width:100vw;z-index:100}
.reviews-slider-container{padding-bottom:4rem;width:100vw}.reviews-slider-container,.slider-track{margin:0;position:relative}
.slider-track{height:auto;mask-image:linear-gradient(90deg,transparent,black 20%,black 80%,transparent);min-height:220px;width:100%}
.slider-content{animation:slideTrack 50s linear infinite;display:flex;gap:2rem;left:0;padding:1rem 0;position:relative;width:fit-content}
.review-card{background:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:var(--border-radius-medium);box-shadow:var(--shadow-light);flex:0 0 auto;min-height:200px;padding:1.5rem;transition:transform .4s ease;width:380px}
.review-header{align-items:flex-start;display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}
.review-header-content{align-items:flex-start;display:flex;flex:1;justify-content:space-between;min-width:200px}
.reviewer-avatar{align-items:center;background-color:rgba(255,255,255,0.1);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:50%;color:rgba(255,255,255,0.8);display:flex;flex-shrink:0;font-size:14px;font-weight:500;height:40px;justify-content:center;overflow:hidden;text-transform:uppercase;width:40px}
.reviewer-avatar img{border-radius:50%;height:100%;object-fit:cover;width:100%}
.reviewer-avatar:not(.has-photo){background-image:none}
.reviewer-info{flex-shrink:1}.reviewer-name{color:var(--color-text-primary);font-size:1rem;font-weight:500}.review-date{color:var(--color-text-secondary);font-size:.875rem;font-weight:300}
.review-stars{display:flex;gap:.25rem}.star{align-items:center;background:rgba(30,32,35,0.5);border-radius:4px;display:inline-flex;height:24px;justify-content:center;padding:4px;width:24px}
.star svg{height:16px;width:16px;fill:rgba(255,255,255,0.75)}
.review-text{color:rgba(255,255,255,0.85);font-size:.9rem;line-height:1.5;margin-bottom:1rem}
.review-verified{align-items:center;color:rgba(255,255,255,0.75);display:flex;font-size:.875rem;gap:.5rem;margin-top:1rem}
.review-verified svg{background:rgba(30,32,35,0.5);border-radius:50%;height:24px;padding:4px;width:24px}
.review-verified svg path{stroke:rgba(255,255,255,0.75)}

.final-section{height:100dvh;overflow:hidden;position:relative;width:100%}
.final-section__background-video{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%;z-index:100}
.final-section-inner{align-items:center;display:flex;height:100dvh;z-index:101}
.final-section-text{max-width:800px;padding-left:5%}
.final-section-heading{color:var(--color-text-primary);display:flex;flex-direction:column;font-size:clamp(56px,7.5vw,120px);font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:0;position:relative;text-align:left}
.final-section__cta{background-color:rgba(18,21,23,0.7);border:1px solid #fff;border-radius:50px;color:var(--color-text-primary);cursor:pointer;display:inline-block;font-size:18px;font-weight:400;letter-spacing:0;margin-top:2em;min-width:260px;padding:12px 40px;text-align:center;text-decoration:none;transition:transform var(--duration-fast) var(--easing-smooth),background-color var(--duration-fast) var(--easing-smooth),border-color var(--duration-fast) var(--easing-smooth)}
.final-section__cta:hover{background-color:rgba(18,21,23,0.8);border-color:rgba(255,255,255,0.4)}

@keyframes pulseSphere{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes pulseHalo{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(1.3)}}
@keyframes slideTrack{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

@media (max-width:767px){
  .landing-video{left:50%;top:35%}
  .landing-inner,.landing-media,.landing-wrapper,.video-wrapper{max-width:100%;overflow:hidden}
  .landing-heading{font-size:clamp(40px,6vw,56px)}.landing-subheading{font-size:clamp(18px,4vw,21px)}
  .landing-text{padding-top:0}
  .card{flex:0 0 clamp(150px,85vw,300px);min-height:350px}
  .card h2{font-size:clamp(1.5rem,3vw,2.5rem)}.card p{font-size:clamp(.8rem,1.6vw,1.1rem)}.card-icon{font-size:clamp(18px,2vw,28px);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
  .pricing-grid{gap:2rem;grid-template-columns:1fr}
  .pricing-title-section{margin-bottom:clamp(1.5rem,4vw,2.5rem);margin-top:clamp(2rem,6vw,4rem)}
  .pricing-main-title{font-size:clamp(2rem,8vw,3rem)}
  .pricing-button{border-width:2px;font-size:.85rem;padding:.8rem}
  .pricing-save-badge{font-size:.65rem;right:10px;top:10px}
  .pricing-container{margin:2rem auto;padding:0 15px}
  .pricing-grid{gap:1.5rem;margin:0 auto;max-width:400px}
  .pricing-card{margin-bottom:1rem}
  .reviews-section{min-height:auto;overflow-x:hidden;padding:1rem 0}
  .reviews-title{font-size:clamp(24px,4vw,32px);margin-bottom:1rem;width:95%}
  .reviews-container{max-width:calc(100vw - 2rem);width:100%}
  .reviews-slider-container{max-width:100%;padding-bottom:2rem;width:100%}
  .slider-track{min-height:200px}.slider-track:first-child{margin-bottom:1rem}
  .review-card{min-height:auto;padding:1.2rem;width:320px}
  .review-text{font-size:.85rem;line-height:1.4}
  .reviewer-avatar{font-size:12px;height:36px;width:36px}
  .slider-content{animation:slideTrack 120s linear infinite;animation-play-state:paused}
  .slider-content.reverse{animation:slideTrack 120s linear infinite reverse;animation-play-state:paused}

  .final-section-text{padding:5rem 5% 0;text-align:left}
  .final-section-heading{font-size:clamp(40px,6vw,56px);text-align:left}
  .final-section__cta{display:inline-block;margin:2em 0 0}
  .final-section-inner{align-items:flex-start}
  .final-section__background-video{object-position:60% center}
}

@media (max-width:480px){
  .reviews-title{font-size:clamp(20px,5vw,28px);margin-bottom:.5rem}
  .reviews-container{max-width:calc(100vw - 1rem)}
  .reviews-slider-container{padding-bottom:1rem;width:100%}
  .slider-track{mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent);min-height:180px}
  .slider-track:first-child{margin-bottom:.5rem}
  .review-card{padding:1rem;width:280px}
  .review-text{font-size:.8rem;line-height:1.3}
  .reviewer-name{font-size:.9375rem}
  .star{height:20px;padding:3px;width:20px}.star svg{height:14px;width:14px}
}

@media (min-width:768px) and (max-width:1023px){
  :root{--cards-position:relative}
  .landing-inner{flex-direction:column;padding:0 4rem}
  .landing-text{padding-left:0;padding-top:0;width:100%}
  .landing-media{align-self:center}
  .landing-heading{font-size:clamp(50px,6vw,80px)}
  .landing-subheading{font-size:clamp(18px,2.5vw,24px)}
  .landing-video{left:50%;top:35%}
  .cards-section{background:#000;height:auto;min-height:100dvh;overflow:visible}
  .cards-container{flex-direction:column;gap:2rem;grid-template-columns:repeat(2,1fr);padding:2rem;position:relative;top:0;transform:none}
  .card{margin:0 auto;max-width:500px;min-height:400px;transform:none!important;width:100%}
  .darkness-overlay{display:none}
  .pricing-title-section{margin-top:clamp(4rem,7vw,5rem)}
  .pricing-save-badge{font-size:.7rem;padding:.25rem .5rem;right:12px;top:12px}
  .pricing-grid{gap:20px;grid-template-columns:repeat(3,1fr)}
  .pricing-card{padding:1.5rem}
  .pricing-button{border-width:2px;font-size:.9rem;padding:.9rem}
  .final-section__background-video{object-position:75% center}
  .final-section-heading{font-size:clamp(50px,6vw,80px)}
  .final-section-inner{align-items:flex-start}
  .final-section-text{padding-top:7rem}
}

@media (min-width:1024px){
  .landing-inner{align-items:center;flex-direction:row;justify-content:space-between}
  .landing-text{margin-top:-5rem;padding-top:0;width:50%}
  .landing-media{margin-top:0;width:50%}
  .landing-video{height:100%;left:20%;pointer-events:none;top:0;transform:none}
  .video-wrapper{position:static}
  .landing-heading{font-size:clamp(50px,5vw,70px)}
  .landing-subheading{font-size:clamp(18px,2vw,24px)}
  .pricing-container{position:relative}
  .cards-container{grid-template-columns:repeat(3,1fr)}
  .final-section-heading{font-size:clamp(50px,5vw,70px)}
}
@media (min-width:1201px){.cards-container{grid-template-columns:repeat(3,1fr)}}

@media (max-width:1023px){
  :root{--cards-position:relative}
  .video-wrapper{height:0;padding-bottom:120%}
  .landing-media,.video-wrapper{overflow:visible;position:relative}
  .cards-section{background:#000;height:auto;min-height:100dvh;overflow:hidden;position:relative}
  .cards-section .background-container{height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}
  .cards-container{display:flex;flex-direction:column;gap:2rem;padding:2rem;position:relative;top:0;transform:none;visibility:visible;z-index:2}
  .card{flex:0 0 clamp(180px,70vw,400px);height:auto;margin:0 auto;max-width:500px;min-height:400px;width:100%}
  .card,.card:nth-child(2n){transform:none!important}
  .landing{overflow:hidden;position:relative}
  .darkness-overlay{display:none}
  #background-designvideo{left:0;position:absolute;top:0;transition:opacity 1s ease-in-out;height:100%;object-fit:cover;opacity:0;width:100%}
  .background-container{pointer-events:none;z-index:0;height:100%;left:0;margin-bottom:0;position:absolute;top:0;z-index:-1}
  #faq-section,#live-section,#prix-section,#video-player-section,#videos-section,.site-header,.site-main{position:relative;z-index:2}
 .slider-content{animation:slideTrack 100s linear infinite;animation-play-state:paused}
  .slider-content.reverse{animation:slideTrack 100s linear infinite reverse;animation-play-state:paused}

}

@media (prefers-reduced-motion:reduce){
  .card,.pricing-card,.reviews-section:after,.reviews-section:before,.slider-content{animation:none!important}
}

/* FAQ, Videos, Player sections (unchanged visuals, perf-safe transitions) */
#faq-section{background:#000;display:flex;flex-direction:row!important;min-height:100dvh;overflow:hidden;position:relative}
.faq-video-container{align-items:center;display:flex;flex:0 0 50%;justify-content:center;max-width:50%;position:relative}
.faq-video-container video{height:auto;object-fit:contain;width:100%}
.faq-content-container{display:flex;flex:0 0 50%;flex-direction:column;height:100dvh;max-width:50%;overflow-y:auto;padding:3rem}
.faq-title{color:var(--color-text-primary);font-family:var(--font-primary);font-size:2.2rem;margin-bottom:var(--spacing-3xl)}
.faq-filter-buttons{display:flex;gap:var(--spacing-xl);margin-bottom:3rem}
.faq-filter-btn{background:var(--color-faq-bg);border:none;border-radius:var(--radius-full);color:var(--color-text-primary);cursor:pointer;font-family:var(--font-primary);font-size:.95rem;font-weight:500;padding:.8rem 1.8rem;transition:background-color var(--duration-normal) var(--easing-smooth),opacity var(--duration-normal) var(--easing-smooth)}
.faq-filter-btn:hover{opacity:.9}.faq-filter-btn.active{background:var(--color-text-primary);color:#000}
.faq-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}
.faq-item{border-bottom:1px solid var(--color-faq-bg);cursor:pointer;padding:1.2rem 0}
.faq-question{color:var(--color-text-primary);font-family:var(--font-primary);font-size:1.1rem;justify-content:space-between;display:flex;align-items:center}
.faq-arrow-icon{aspect-ratio:1;background:var(--color-faq-bg);border-radius:50%;flex-shrink:0;font-size:.8rem;height:24px;justify-content:center;min-height:24px;min-width:24px;transition:transform var(--duration-normal) var(--easing-smooth);width:24px;display:flex;align-items:center}
.faq-item.active .faq-arrow-icon{transform:rotate(180deg)}
.faq-answer{
  color:var(--color-text-primary);
  font-family:var(--font-primary);
  font-size:.95rem;line-height:1.6;
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--ease);
}
.faq-item.active .faq-answer{ grid-template-rows:1fr; }
.faq-answer > div{ overflow:hidden; padding-right:var(--spacing-2xl); }


#videos-section{background:#000;min-height:100dvh;padding:var(--spacing-4xl) var(--spacing-2xl)}
.videos-container{margin:0 auto;max-width:1400px;width:100%}
.videos-title{color:var(--color-text-primary);font-family:var(--font-primary);font-size:clamp(2rem,5vw,3rem);font-weight:500;margin-bottom:3rem}
.videos-content{display:flex;gap:var(--spacing-xl)}
.modules-list{display:flex;flex-direction:column;gap:.75rem;width:30%}
.module-btn{background:var(--color-chat-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--spacing-lg);color:var(--color-text-muted);cursor:pointer;font-family:var(--font-primary);font-size:var(--spacing-lg);padding:1.25rem var(--spacing-xl);text-align:left;transition:transform var(--duration-normal) var(--easing-smooth),background-color var(--duration-normal) var(--easing-smooth),border-color var(--duration-normal) var(--easing-smooth)}
.module-btn:hover{background:rgba(139,3,255,0.2);border-color:rgba(165,81,255,0.3);transform:translateY(-2px)}
.module-btn.active{background:var(--color-purple-alpha-40);border-color:rgba(165,81,255,0.5);color:var(--color-text-primary);transform:scale(1.02)}

.videos-grid{align-content:start;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));place-items:start;width:70%}
.video-card{aspect-ratio:.85;background:var(--color-chat-bg-primary);border:1px solid var(--color-border-primary);cursor:pointer;display:flex;flex-direction:column;max-width:400px;min-width:300px;overflow:hidden;position:relative;transform:translateY(0);transition:transform var(--duration-normal) var(--easing-smooth),border-color var(--duration-normal) var(--easing-smooth),box-shadow var(--duration-normal) var(--easing-smooth);border-radius:var(--spacing-lg)}
.video-card:after{background:radial-gradient(circle at center,rgba(139,3,255,0.15) 0%,rgba(165,81,255,0.1) 20%,transparent 60%);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--duration-normal) var(--easing-smooth);border-radius:var(--spacing-lg)}
.video-card:hover{border-color:rgba(165,81,255,0.3);box-shadow:0 10px 30px rgba(139,3,255,0.1);transform:translateY(-5px)}.video-card:hover:after{opacity:1}
.video-card:active{transform:translateY(-2px)}
.video-thumbnail{flex:1;min-height:60%;position:relative;width:100%}.video-thumbnail img{height:100%;object-fit:cover;width:100%}
.video-duration{background:var(--color-black-alpha-70);border-radius:var(--spacing-sm);bottom:.75rem;color:var(--color-text-primary);font-size:.875rem;padding:.25rem var(--spacing-sm);position:absolute;right:.75rem}
.video-info{display:flex;flex:0 0 auto;flex-direction:column;justify-content:center;min-height:40%;padding:1.25rem}
.video-title{color:var(--color-text-primary);font-size:1.125rem;font-weight:500;margin-bottom:var(--spacing-sm)}
.video-subtitle,.video-title{font-family:var(--font-primary)}.video-subtitle{color:var(--color-text-muted);font-size:.875rem}

#video-player-section{background:#000;min-height:100dvh;padding:var(--spacing-2xl)}
.player-container{margin:0 auto;max-width:1400px;width:100%}
.back-to-videos{background:var(--color-chat-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-xl);color:var(--color-text-primary);cursor:pointer;font-family:var(--font-primary);font-size:var(--spacing-lg);margin-bottom:var(--spacing-2xl);padding:.75rem var(--spacing-xl);transition:transform var(--duration-normal) var(--easing-smooth),background-color var(--duration-normal) var(--easing-smooth),border-color var(--duration-normal) var(--easing-smooth)}
.back-to-videos:hover{background:rgba(139,3,255,0.2);border-color:rgba(165,81,255,0.3);transform:translateY(-2px)}
.player-content{display:flex;gap:var(--spacing-2xl)}
.main-content{flex:1}
.video-player{background:var(--color-chat-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--spacing-lg);overflow:hidden;width:100%}
.video-details{color:var(--color-text-primary);margin-top:var(--spacing-xl)}
.player-video-title{font-size:1.75rem;font-weight:500}.player-video-title,.video-metadata{font-family:var(--font-primary);margin-bottom:var(--spacing-lg)}
.video-metadata{align-items:center;color:var(--color-text-muted);display:flex;gap:var(--spacing-lg)}
.module-indicator,.video-part{display:inline-block;line-height:1;margin:0;padding:0;vertical-align:baseline}
.video-description{color:var(--color-text-secondary);font-family:var(--font-primary);line-height:1.6;margin-bottom:0}
.module-videos-list{background:var(--color-chat-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--spacing-lg);padding:var(--spacing-xl);width:30%}
.list-title{color:var(--color-text-primary);margin-bottom:var(--spacing-xl)}
.module-video-item{align-items:center;border:1px solid transparent;border-radius:.75rem;cursor:pointer;display:flex;gap:var(--spacing-lg);padding:var(--spacing-lg);transition:transform var(--duration-normal) var(--easing-smooth),background-color var(--duration-normal) var(--easing-smooth),border-color var(--duration-normal) var(--easing-smooth)}
.module-video-item:hover{background:var(--color-white-alpha-10);border-color:var(--color-border-primary)}
.module-video-item.active{background:var(--color-white-alpha-15);border-color:var(--color-white-alpha-20)}
.item-thumbnail{background:rgba(0,0,0,0.3);border-radius:var(--spacing-sm);flex-shrink:0;height:45px;overflow:hidden;position:relative;width:80px}


/* ==========================================================================
   non-critical.perf.css — production build (performance-optimized)
   Guidelines applied:
   - Disable costly continuous effects by default (enable on hover only)
   - Respect prefers-reduced-motion: fully disable animations/transitions
   - Replace `transition: all` with property-specific lists
   - Reduce/filter GPU-heavy effects (blur/drop-shadow), provide cheaper fallbacks
   - Fix mobile viewport jank (100dvh + 100vh fallback)
   - Use content-visibility/contain-intrinsic-size on long lists
   - Avoid persistent `will-change`; only apply when needed (hover)
   - Keep visual design intact as much as possible
   ========================================================================== */

/* ------------------------------
   Thumbnails & video list items
   ------------------------------ */

.item-thumbnail {
  /* Keep intended sizes from breakpoints; add safe default aspect to avoid layout shifts */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
  /* Hint: in HTML use loading="lazy" decoding="async" for perf */
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .module-video-item:hover .item-thumbnail img {
    transform: scale(1.05);
    will-change: transform; /* promoted only while hovered */
  }
}

.item-duration {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-black-alpha-70);
  color: var(--color-text-primary);
  font-size: 0.7rem;
  font-weight: 500;
}

.item-info { flex: 1; min-width: 0; }

.item-info h4 {
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-info p {
  color: var(--color-text-muted);
  font-family: var(--font-primary);
  font-size: 0.8rem;
  margin: 0;
}

/* Paint only visible children in long lists */
.module-videos-list > * {
  content-visibility: auto;
  contain-intrinsic-size: 200px 300px; /* tune to your actual card size */
}

/* ------------------------------
   Motion preferences (PRM)
   ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* Cut animations/transitions entirely for accessibility & perf */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------
   Desktop refinements
   ------------------------------ */

@media (min-width: 1025px) {
  .video-description { padding-bottom: 120px; }

  .module-videos-list {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
    scrollbar-width: thin;
    /* Reduce layout shift when scrollbar appears */
    scrollbar-gutter: stable both-edges;
  }
  .module-videos-list::-webkit-scrollbar { width: 6px; }
  .module-videos-list::-webkit-scrollbar-track { background: transparent; }
  .module-videos-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
  }
  .module-videos-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
  }
}

/* ------------------------------
   Tablet / mobile layout
   ------------------------------ */

@media (max-width: 1024px) {
  .content-container {
    flex-direction: column;
    height: 100dvh;
    min-height: 100vh; /* fallback */
    justify-content: space-between;
    padding: 0;
  }
  .showcase-video-container { height: 55%; max-width: 100%; order: 1; }
  .showcase-video, .showcase-video video { padding-bottom: 7rem; }

  .tarif-content {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    background: transparent;
    margin: 0; max-width: 100%; order: 2;
    padding: var(--spacing-xl) var(--spacing-2xl) var(--spacing-lg);
  }

  .advantages-list { margin: var(--spacing-xl) 0; }
  .subscription-toggle { margin-bottom: var(--spacing-xl); }
  .trial-btn { padding: 1.1rem; }

  .pricing-grid-wrapper { grid-template-columns: 1fr; margin: 0 auto; max-width: 600px; }
  .pricing-grid-save-badge { font-size: 0.7rem; padding: 0.25rem var(--spacing-sm); right: 12px; top: 12px; }
  .pricing-grid-button { border-width: 2px; font-size: 0.9rem; padding: 0.9rem; }

  .faq-content-container { padding-top: 0; }
  .faq-filter-buttons { gap: var(--spacing-lg); }
  .faq-filter-btn { font-size: 0.9rem; padding: 0.7rem 1.4rem; }

  #faq-section { flex-direction: column !important; height: auto; min-height: 100dvh; }

  .faq-content-container, .faq-video-container { flex: 0 0 auto; max-width: 100%; width: 100%; }
  .faq-video-container { height: auto; max-height: 40vh; }
  .faq-video-container video { width: 100%; height: 100%; max-height: 40vh; object-fit: contain; }

  .faq-content-container { height: auto; min-height: 60vh; padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-2xl); }
  .faq-filter-buttons { flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
  .faq-filter-btn { font-size: 0.85rem; padding: 0.6rem 1.2rem; }
  .faq-title { margin-top: 0; text-align: center; }

  .videos-content { flex-direction: column; }
  .modules-list, .videos-grid { width: 100%; }
  .videos-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .video-card { min-width: 280px; }
  #video-player-section { padding-top: 100px; }
  .player-content { flex-direction: column; }
  .main-content, .module-videos-list { width: 100%; }
  .module-video-item { padding: 0.75rem; }
  .video-description { padding-bottom: 60px; }
}

@media (max-width: 768px) {
  .content-container {
    height: 100dvh;
    min-height: 100vh; /* fallback */
    -webkit-overflow-scrolling: touch;
  }
  .showcase-video-container { height: 50%; min-height: auto; }
  .showcase-video video { padding-bottom: 7rem; }

  .tarif-content { padding: var(--spacing-lg) var(--spacing-xl) 0.8rem; }
  .advantages-list { gap: 0.8rem; margin: var(--spacing-lg) 0; }
  .trial-btn { padding: 1.1rem; -webkit-tap-highlight-color: transparent; }
  .subscription-toggle { gap: var(--spacing-xl); margin-bottom: var(--spacing-lg); padding: 0.4rem 0.8rem; }

  .ios-switch { -webkit-appearance: none; appearance: none; height: 30px; width: 50px; }
  .ios-switch:before { height: 26px; width: 26px; }

  .pricing-grid-wrapper { grid-template-columns: 1fr; margin: 0 auto; max-width: 400px; }
  .pricing-grid-save-badge { font-size: 0.65rem; right: 10px; top: 10px; }
  .pricing-grid-button { border-width: 2px; font-size: 0.85rem; padding: 0.8rem; }

  #videos-section { padding: 3rem var(--spacing-lg); }
  .module-btn { padding: var(--spacing-lg) 1.25rem; }

  .item-thumbnail { height: 34px; width: 60px; }
  .item-info h4 { font-size: 0.85rem; }
  .item-info p { font-size: 0.75rem; }

  .module-video-item { gap: 0.75rem; padding: 0.75rem; }
  .video-description { padding-bottom: 30px; }
}

@media (max-width: 640px) {
  .faq-filter-buttons { gap: 0.8rem; }
  .faq-filter-btn { font-size: 0.85rem; padding: 0.6rem 1.4rem; }
}

@media (max-width: 480px) {
  .faq-video-container, .faq-video-container video { max-height: 35vh; }
  .faq-filter-buttons { gap: var(--spacing-sm); }
  .faq-filter-btn { font-size: 0.8rem; padding: var(--spacing-sm) 1.2rem; }
  .video-card { aspect-ratio: 0.9; min-width: 240px; }
  .videos-grid { grid-template-columns: 1fr; }
  .videos-title { font-size: 1.75rem; }
  #video-player-section { padding-top: 80px; }
  .video-metadata { flex-direction: column; gap: var(--spacing-sm); }
  .module-video-item { gap: 0.75rem; }
  .item-thumbnail { height: 50px; width: 90px; }
}

@media (max-height: 667px) {
  .showcase-video-container { height: 45%; }
  .tarif-content { padding-bottom: var(--spacing-sm); }
  .tarif-heading { font-size: clamp(1.5rem, 2.5vw, 2rem); }
  .tarif-amount { font-size: clamp(2rem, 3vw, 2.5rem); }
  .advantages-list { font-size: clamp(0.8rem, 1.5vw, 1rem); gap: 0.4rem; margin: var(--spacing-lg) 0; }
  .trial-btn { padding: 1.1rem; }
  .subscription-toggle { margin-bottom: 0.8rem; padding: 0.3rem 0.6rem; }
}

/* ------------------------------
   Keyframes & custom properties
   (left intact; gated by PRM/hover rules above)
   ------------------------------ */

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes fadeInScale {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slideIn {
  0% { opacity: 0; transform: translateX(10px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2px); }
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 130% 50%; }
}

@keyframes shine {
  0% { transform: rotate(30deg) translateX(-200%); }
  100% { transform: rotate(30deg) translateX(200%); }
}

/* ------------------------------
   Auth modal
   ------------------------------ */

.auth-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.auth-modal.visible { opacity: 1; visibility: visible; }
.auth-modal.hidden { display: none; } /* keep for hard hide when needed */

.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-bg);
}

.auth-modal-content {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  padding: 32px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--color-modal-bg);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  /* animation gated by PRM */
  animation: fadeInScale 0.2s ease;
  /* Scrollbar invisible */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Webkit browsers (Chrome, Safari, Edge) */
.auth-modal-content::-webkit-scrollbar {
  display: none;
}

/* Tabs */
.auth-tabs { display: flex; gap: 32px; justify-content: center; margin-bottom: 32px; }

.auth-tab {
  background: none; border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit; font-size: 18px; font-weight: 500;
  padding: 8px 4px; position: relative;
  transition: color var(--transition-normal), transform var(--transition-normal);
}
.auth-tab:hover { color: rgba(255,255,255,0.9); transform: translateY(-1px); }
.auth-tab.active { color: var(--color-purple-soft); }
.auth-tab.active::after {
  content: "";
  position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: var(--color-purple-soft);
  border-radius: 2px;
  transform: scaleX(1);
  transition: transform var(--transition-normal);
}

/* Forms */
.auth-forms-container { display: flex; flex: 1; flex-direction: column; position: relative; width: 100%; }

.auth-form {
  position: absolute; width: 100%;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
}
.auth-form.active {
  opacity: 1; visibility: visible;
  animation: slideIn var(--transition-normal);
}

.form-field {
  position: relative;
  margin-bottom: 24px;
  transition: margin-bottom var(--transition-normal);
}
.form-field.has-error { margin-bottom: 56px; }

.auth-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: inherit; font-size: 16px;
  transition: border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
}
.auth-input::placeholder { color: rgba(255,255,255,0.4); }
.auth-input:focus {
  outline: none;
  background: rgba(255,255,255,0.08);
  border-color: var(--color-purple-soft);
  box-shadow: 0 0 0 4px rgba(139,3,255,0.1);
}
.auth-input.error {
  border-color: var(--color-error);
  animation: shake 0.5s cubic-bezier(0.36,0.07,0.19,0.97);
}

.error-message {
  position: absolute; top: 100%; left: 0;
  margin-top: 8px;
  color: var(--color-error);
  opacity: 0; pointer-events: none;
  transform: translateY(-5px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.error-message.visible,
.error-message:not(:empty) { opacity: 1; transform: translateY(0); }

/* Submit button (bling effects gated) */
.auth-submit {
  position: relative; width: 100%; overflow: hidden;
  padding: 14px;
  background: #A77BF7;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  box-shadow: 0 0 0 1px rgba(140,91,231,0.2);
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: Roobert, sans-serif; /* fix font name */
  font-size: 16px; font-weight: 500; line-height: 1.2;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.auth-submit .button-text { position: relative; z-index: 1; }

/* Disable continuous shimmer/shine by default */
.auth-submit::before,
.auth-submit::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: none;
}

/* Keep the subtle border highlight via masking only when hovered & user ok with motion */
.auth-submit::before {
  padding: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; -webkit-mask-composite: destination-out;
}
.auth-submit::after {
  left: -100%; top: -100%; width: 50%; height: 300%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.4) 50%, rgba(255,255,255,0));
  transform: rotate(30deg);
}

/* Hover-only bling */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .auth-submit:hover { box-shadow: 0 4px 12px rgba(140,91,231,0.3); transform: translateY(-2px); }
  .auth-submit:active { box-shadow: 0 2px 5px rgba(140,91,231,0.2); transform: translateY(0); }

  .auth-submit:hover::before { animation: shimmer 2.5s linear infinite; }
  .auth-submit:hover::after  { animation: shine 1.8s ease-in-out; }
}

.auth-submit:disabled { cursor: not-allowed; opacity: 0.7; transform: none; }

.auth-submit.reset-animation::after,
.auth-submit.reset-animation::before { animation: none; }

.auth-close-button {
  position: absolute; right: 24px; top: 24px; z-index: 2;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-normal), background var(--transition-normal);
}
.auth-close-button:hover { background: rgba(255,255,255,0.1); color: var(--color-text-primary); }

.forgot-password-container { margin-bottom: 24px; text-align: left; }
.forgot-password-link {
  color: var(--color-text-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--transition-normal);
}
.forgot-password-link:hover { color: rgba(255,255,255,0.9); text-decoration: underline; }

/* Social auth */
.social-auth-divider { position: relative; text-align: center; margin: 24px 0; }
.social-auth-divider::before,
.social-auth-divider::after {
  content: ""; position: absolute; top: 50%; height: 1px; width: calc(50% - 24px);
  background: var(--color-border-primary);
}
.social-auth-divider::before { left: 0; }
.social-auth-divider::after  { right: 0; }
.social-auth-divider span { color: var(--color-text-muted); font-size: 14px; padding: 0 12px; }

.social-auth-buttons { 
  display: flex; 
  flex-direction: column; 
  gap: 12px;
  /* Ajouter une marge en bas sur desktop pour éviter que le bouton soit collé */
  margin-bottom: 0;
}

/* Amélioration de l'espacement sur desktop */
@media (min-width: 1025px) {
  .social-auth-buttons {
    margin-bottom: 24px;
  }
}

.social-auth-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 24px;
  background: rgba(139,3,255,0.1);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 50px;
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500;
  transition: transform var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal);
}
.social-auth-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.social-auth-btn:active { transform: translateY(0); }
.social-auth-btn img { width: 20px; height: 20px; object-fit: contain; }
.google-btn { background: rgba(255,255,255,0.08); }

/* ------------------------------
   Confirmation popup
   ------------------------------ */

.confirmation-popup {
  position: fixed; left: 50%; top: 50%;
  width: 90%; max-width: 420px;
  padding: 2.5rem;
  background: var(--color-modal-bg);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 10000;
  transition: opacity 0.4s cubic-bezier(0.34,1.56,0.64,1),
              visibility 0.4s cubic-bezier(0.34,1.56,0.64,1),
              transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.confirmation-popup.visible {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.confirmation-popup-content { position: relative; text-align: center; }

.confirmation-popup-icon {
  position: relative; width: 72px; height: 72px;
  margin: 0 auto 2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139,3,255,0.1), rgba(165,81,255,0.1));
  border: 1px solid rgba(139,3,255,0.2);
  transition: transform var(--transition-normal);
  /* cheaper glow vs filter: blur */
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.confirmation-popup-icon::before {
  /* remove heavy blur; maintain subtle inner glow via transparent layer */
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  opacity: 0.15;
  background: linear-gradient(135deg, #8b03ff, #a551ff);
  /* no filter here for perf */
}
.confirmation-popup-icon svg {
  width: 36px; height: 36px;
  color: var(--color-purple-soft);
  /* replace drop-shadow filter by shadow on container above */
  filter: none;
}

.confirmation-popup-title {
  color: var(--color-text-primary);
  font-family: Roobert, sans-serif;
  font-size: clamp(1.5rem, 5vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.confirmation-popup-text {
  color: rgba(255,255,255,0.8);
  font-family: Roobert, sans-serif;
  font-size: clamp(1rem, 3vw, 1.125rem);
  line-height: 1.6;
  margin-bottom: 2.5rem;
  margin-left: auto; margin-right: auto;
  max-width: 90%;
}

.confirmation-popup-button,
.confirmation-popup-close,
.confirmation-popup-resend {
  position: relative;
  min-width: 140px;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  cursor: pointer;
  color: var(--color-text-primary);
  font-family: Roobert, sans-serif;
  font-size: 0.925rem; font-weight: 500;
  background: linear-gradient(135deg, rgba(139,3,255,0.1), rgba(165,81,255,0.1));
  border: 1px solid rgba(139,3,255,0.2);
  transition: transform var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal);
}
.confirmation-popup-button:hover,
.confirmation-popup-close:hover,
.confirmation-popup-resend:hover {
  background: linear-gradient(135deg, rgba(139,3,255,0.2), rgba(165,81,255,0.2));
  border-color: rgba(139,3,255,0.3);
  transform: translateY(-2px);
}
.confirmation-popup-close { background: #404040; border: 1px solid #404040; }

.confirmation-popup-buttons { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; }

.popup-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--color-overlay-bg);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.popup-overlay.visible { opacity: 1; visibility: visible; }

.confirmation-popup-button::before,
.confirmation-popup-resend::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50px;
  opacity: 0.15;
  background: linear-gradient(135deg, #8b03ff, #a551ff);
  transition: opacity var(--transition-normal);
  /* no blur filter here for perf */
}
.confirmation-popup-button:hover::before,
.confirmation-popup-close:hover::before,
.confirmation-popup-resend:hover::before {
  opacity: 0.25;
}

.button-loading .button-text { transition: opacity var(--transition-fast); }

/* ------------------------------
   Settings overlay & modal
   ------------------------------ */

.settings-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(0,0,0,0.65); /* fast fallback */
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Enable backdrop blur only when supported & user allows motion */
@supports ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {
  @media (prefers-reduced-motion: no-preference) {
    .settings-overlay {
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
  }
}

.settings-overlay.visible { opacity: 1; visibility: visible; }
.settings-overlay.hidden { display: none; }

.settings-modal {
  width: 100%; max-width: 500px; max-height: 85vh;
  margin: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  background-color: #232222;
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.settings-overlay.visible .settings-modal { opacity: 1; transform: translateY(0); }

.settings-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  background-color: #232222;
  border-bottom: 1px solid var(--color-border-primary);
}
.settings-header h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-family: Roobert, sans-serif;
  font-size: 1.25rem; font-weight: 500;
}

.settings-back-button,
.settings-close-button {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  margin: -6px; padding: 0;
  background: none; border: none;
  color: var(--color-text-muted);
  cursor: pointer; touch-action: manipulation;
  transition: color var(--transition-fast);
}
.settings-back-button:hover,
.settings-close-button:hover { color: var(--color-text-primary); }

.settings-content {
  flex: 1; min-height: 0;
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-section,
.settings-field { display: flex; flex-direction: column; }
.settings-section { gap: 24px; }
.settings-field { gap: 8px; padding: 8px 0; }

.settings-field label {
  color: var(--color-text-muted);
  font-family: Roobert, sans-serif;
  font-size: 0.875rem;
}

.settings-input-group { display: flex; align-items: center; gap: 12px; }
.settings-input-group input,
.settings-input-group span {
  flex: 1; padding: 0;
  background: none; border: none;
  color: var(--color-text-primary);
  font-family: Roobert, sans-serif;
  font-size: 1rem;
}
.settings-input-group input:focus { outline: none; }

.settings-edit-button {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--color-text-muted);
  cursor: pointer; touch-action: manipulation;
  transition: color var(--transition-fast);
}
.settings-edit-button:hover { color: var(--color-text-primary); }

.settings-actions {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--color-border-primary);
}
.settings-action-button {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: none; border: none; border-radius: 8px;
  cursor: pointer; touch-action: manipulation;
  font-family: Roobert, sans-serif; font-size: 1rem;
  transition: background-color var(--transition-fast);
}
.settings-action-button.logout-button { color: rgba(255,255,255,0.8); }
.settings-action-button.logout-button:hover {
  background-color: rgba(255,255,255,0.05);
  color: var(--color-text-primary);
}
.settings-action-button.delete-button { color: rgb(248,113,113); }
.settings-action-button.delete-button:hover {
  background-color: rgba(248,113,113,0.05);
  color: rgb(252,165,165);
}

/* ------------------------------
   Confirm overlay
   ------------------------------ */

.confirmation-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-overlay-bg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.confirmation-overlay.visible { opacity: 1; visibility: visible; }

.confirmation-modal {
  width: 90%; max-width: 400px;
  background: rgba(35,34,34,0.95);
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  opacity: 0; overflow: hidden;
  transform: translateY(20px);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}
.confirmation-overlay.visible .confirmation-modal {
  opacity: 1; transform: translateY(0);
}

.confirmation-content { padding: 1.5rem; }
.confirmation-content h3 {
  margin: 0 0 1rem;
  color: var(--color-text-primary);
  font-family: Roobert, sans-serif;
  font-size: 1.25rem; font-weight: 500;
}
.confirmation-content p {
  margin: 0 0 1.5rem;
  color: rgba(255,255,255,0.8);
  font-family: Roobert, sans-serif;
  font-size: 1rem; line-height: 1.5;
}

.confirmation-buttons { display: flex; gap: 1rem; justify-content: flex-end; }
.confirmation-buttons button {
  border-radius: 8px; cursor: pointer;
  font-family: Roobert, sans-serif;
  font-size: 0.9375rem; font-weight: 500;
  padding: 0.625rem 1.25rem;
  transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.cancel-button {
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
}
.cancel-button:hover { background: rgba(255,255,255,0.15); }

.confirm-button {
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.2);
  color: rgb(248,113,113);
}
.confirm-button:hover {
  background: rgba(248,113,113,0.15);
  color: rgb(252,165,165);
}


/* non-critical.perf.css — performance-optimized production build
   Notes:
   - Replaces transition: all with scoped transitions (opacity/transform/etc.)
   - Removes full-screen backdrop-filter; keeps optional local blur on small cards
   - Avoids animating layout properties (height/margin-left); uses transforms
   - Tames box-shadow on large surfaces; avoids animating heavy shadows
   - Limits will-change to .is-animating helper; removes global misuse
   - Extends prefers-reduced-motion / prefers-reduced-data safeguards
*/

/* ---------- Edit popup (modal) ---------- */
.edit-popup-overlay{
  align-items:center;
  background:var(--color-overlay-bg);
  display:flex;
  inset:0;
  justify-content:center;
  opacity:0;
  position:fixed;
  transition:opacity var(--transition-normal), visibility var(--transition-normal);
  visibility:hidden;
  z-index:11000;
}
.edit-popup-overlay.visible{opacity:1;visibility:visible}

.edit-popup-modal{
  background:var(--color-modal-bg);
  border:1px solid var(--color-border-primary);
  border-radius:var(--radius-xl);
  /* lighter, layered shadow (static) */
  box-shadow:0 4px 12px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2);
  max-width:400px;
  padding:2rem;
  width:90%;
}

.edit-popup-header{
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-bottom:1rem;
}
.edit-popup-header h2{
  color:var(--color-text-primary);
  font-family:Roobert,sans-serif;
  font-size:1.5rem;
  margin:0;
}
.edit-popup-close-button{
  background:none;border:none;
  color:var(--color-text-primary);
  cursor:pointer;
}

.edit-popup-content{margin-bottom:1rem}
.edit-popup-content input{
  background:transparent;
  border:1px solid var(--color-border-primary);
  border-radius:var(--radius-md);
  color:var(--color-text-primary);
  font-family:Roobert,sans-serif;
  font-size:1rem;
  padding:0.75rem;
  width:100%;
}

.edit-popup-actions{
  display:flex;
  gap:1rem;
  justify-content:flex-end;
}
.edit-popup-actions button{
  background:linear-gradient(135deg,rgba(139,3,255,0.1),rgba(165,81,255,0.1));
  border:1px solid rgba(139,3,255,0.2);
  border-radius:50px;
  color:var(--color-text-primary);
  cursor:pointer;
  font-family:Roobert,sans-serif;
  font-weight:500;
  padding:0.75rem 1.5rem;
  transition:opacity var(--transition-normal), transform var(--transition-normal);
}
.edit-popup-actions button:hover{
  background:linear-gradient(135deg,rgba(139,3,255,0.2),rgba(165,81,255,0.2));
  border-color:rgba(139,3,255,0.3);
  transform:translateY(-1px);
}

/* ---------- Feedback toast ---------- */
.success-notification{
  opacity:0;
  transform:translateY(-20px);
  transition:opacity var(--transition-normal), transform var(--transition-normal);
}
.success-notification.visible{opacity:1;transform:translateY(0)}

/* ---------- Auth blur / gated sections ---------- */
.section-blocked{position:relative}
.section-blocked>:not(.auth-blur-message){pointer-events:none;user-select:none}

.auth-blur-message{
  align-items:center;
  background:linear-gradient(140deg,rgba(0,0,0,0.8),rgba(2,2,4,0.85) 45%,rgba(4,4,8,0.9) 75%,rgba(6,6,12,0.95));
  display:flex;
  inset:0;
  justify-content:center;
  padding:2rem;
  position:fixed;
  z-index:100;
}

/* Positionnement spécifique pour desktop - centré dans la première vision */
@media (min-width: 1025px) {
  .auth-blur-message {
    align-items: flex-start;
    padding-top: 20vh; /* Ajuste cette valeur selon tes besoins */
    /* Alternative: utilise top au lieu de padding-top */
    /* top: 0;
    bottom: auto;
    height: 100vh;
    align-items: center;
    padding-top: 0; */
  }
}
.auth-blur-content{
  background:black;
  border:1px solid var(--color-border-primary);
  border-radius:var(--radius-xl);
  max-width:90%;
  overflow:hidden;
  padding:2.5rem;
  position:relative;
  text-align:center;
  width:400px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.auth-blur-content:before{
  background:radial-gradient(circle at 50% 10%,rgba(139,3,255,0.15) 0%,rgba(165,81,255,0.1) 20%,transparent 60%);
  content:""; inset:0; pointer-events:none; position:absolute;
}

.auth-blur-icon{
  align-items:center;
  background:linear-gradient(135deg,rgba(139,3,255,0.1),rgba(165,81,255,0.1));
  border:1px solid rgba(139,3,255,0.2);
  border-radius:50%;
  color:var(--color-text-primary);
  display:flex;
  height:72px; width:72px;
  justify-content:center;
  margin:0 auto 2rem;
  position:relative;
  transition:transform var(--transition-normal);
}
.auth-blur-icon:before{
  background:linear-gradient(135deg,#8b03ff,#a551ff);
  border-radius:50%;
  content:""; filter:blur(8px);
  inset:-2px; opacity:0.15; position:absolute;
}
.auth-blur-icon svg{
  color:var(--color-purple-soft);
  filter:drop-shadow(0 2px 4px rgba(139,3,255,0.3));
  height:32px; width:32px;
}

.auth-blur-content h2{
  color:var(--color-text-primary);
  font-family:Roobert,sans-serif;
  font-size:clamp(1.5rem,5vw,1.75rem);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.3;
  margin-bottom:1rem;
}
.auth-blur-content p{
  color:rgba(255,255,255,0.8);
  font-family:Roobert,sans-serif;
  font-size:clamp(1rem,3vw,1.125rem);
  line-height:1.6;
  margin-bottom:2.5rem;
}

.auth-blur-cta{
  background:linear-gradient(135deg,rgba(139,3,255,0.1),rgba(165,81,255,0.1));
  border:1px solid rgba(139,3,255,0.2);
  border-radius:50px;
  color:var(--color-text-primary);
  cursor:pointer;
  font-family:Roobert,sans-serif;
  font-size:clamp(0.875rem,2vw,1.125rem);
  font-weight:500;
  padding:0.875rem 2rem;
  position:relative;
  transition:opacity var(--transition-normal), transform var(--transition-normal);
}
.auth-blur-cta:before{
  background:linear-gradient(135deg,#8b03ff,#a551ff);
  border-radius:50px;
  content:"";
  filter:blur(8px);
  inset:-2px; opacity:0.15; position:absolute;
  transition:opacity var(--transition-normal);
}
.auth-blur-cta:hover{ transform:translateY(-2px) }
.auth-blur-cta:hover:before{ opacity:0.25 }

/* Full-screen overlay: NO backdrop-filter by default */
.auth-blur-overlay{
  align-items:center;
  background:var(--color-overlay-bg);
  display:flex;
  inset:0;
  justify-content:center;
  opacity:0;
  position:fixed;
  transition:opacity var(--transition-normal), visibility var(--transition-normal);
  visibility:hidden;
  z-index:9998;
}
.auth-blur-overlay.visible{opacity:1;visibility:visible}

/* Button */
.auth-blur-button{
  background:linear-gradient(135deg,var(--color-purple-primary),var(--color-purple-light));
  border:none; border-radius:50px;
  color:var(--color-text-primary);
  cursor:pointer;
  font-family:Roobert,sans-serif;
  font-size:1rem; font-weight:500;
  overflow:hidden;
  padding:0.875rem 2rem;
  position:relative;
  transition:transform var(--transition-normal);
}
.auth-blur-button:hover{ transform:translateY(-2px) }
.auth-blur-button:active{ transform:translateY(0) }

.auth-blur-title{
  color:var(--color-text-primary);
  font-family:Roobert,sans-serif;
  font-size:clamp(1.5rem,5vw,1.75rem);
  font-weight:500;
  line-height:1.3;
  margin-bottom:1rem;
}
.auth-blur-text{
  color:var(--color-text-secondary);
  font-family:Roobert,sans-serif;
  font-size:clamp(1rem,3vw,1.125rem);
  line-height:1.6;
  margin-bottom:2rem;
}

/* ---------- Responsive bits (unchanged semantics, perf-safe) ---------- */
@media (max-width:1024px){
  .auth-modal-content{
    align-items:center; border-radius:0; display:flex; height:100%;
    margin:0; max-height:100%; max-width:100%; padding:24px; transform:none; width:100%;
  }
  .auth-modal.visible .auth-modal-content{ transform:none }
  .auth-forms-container{ margin:0 auto; padding-bottom:24px; width:100% }
  .auth-close-button{ right:16px; top:16px }
  .auth-tabs{ gap:24px; margin-bottom:24px }

  .confirmation-popup{ max-width:400px; padding:2rem; width:85% }
  .confirmation-popup-icon{ height:64px; width:64px; margin-bottom:1.75rem }
  .confirmation-popup-icon svg{ height:32px; width:32px }

  .settings-overlay{ align-items:flex-end }
  .settings-modal{ border-radius:0; height:100%; margin:0; max-height:100%; max-width:100%; transform:translateY(100%) }
  .settings-content{ padding:20px 16px max(16px,env(safe-area-inset-bottom)) }
  .settings-field{ padding:10px 0 }
  .settings-header{ padding:16px }
  .settings-action-button{ padding:14px 16px }
  .settings-action-button.delete-button:hover,
  .settings-action-button.logout-button:hover,
  .settings-back-button:hover,
  .settings-close-button:hover,
  .settings-edit-button:hover{ background-color:inherit; color:inherit }
  .settings-back-button:active,
  .settings-close-button:active,
  .settings-edit-button:active{ color:var(--color-text-primary) }
  .settings-action-button.logout-button:active{ background-color:rgba(255,255,255,0.05) }
  .settings-action-button.delete-button:active{ background-color:rgba(248,113,113,0.05) }
}
@media (min-width:600px) and (max-width:1024px){
  .auth-forms-container{ height:auto; max-width:480px; padding:0 16px; position:relative }
  .auth-form{ left:0; right:0; top:0; position:absolute }
}
@media (min-width:1025px){
  .auth-modal-content{ border-radius:var(--radius-xl); max-height:90vh; max-width:480px; min-height:700px; padding:32px; width:90% }
}
@media (max-width:768px){
  .confirmation-popup{ max-width:360px; padding:1.75rem; width:90% }
  .confirmation-popup-icon{ height:56px; width:56px; margin-bottom:1.5rem }
  .confirmation-popup-icon svg{ height:28px; width:28px }
  .confirmation-popup-buttons{ flex-direction:column; width:100% }
  .confirmation-popup-button,.confirmation-popup-close,.confirmation-popup-resend{ min-width:0; width:100% }
  .auth-blur-icon{ height:64px; width:64px; margin-bottom:1.75rem }
  .auth-blur-icon svg{ height:28px; width:28px }
}
@media (max-width:480px){
  .confirmation-buttons{ flex-direction:column }
  .confirmation-buttons button{ width:100% }
  .auth-blur-content{ padding:1.75rem }
  .auth-blur-icon{ height:56px; width:56px; margin-bottom:1.5rem }
  .auth-blur-icon svg{ height:24px; width:24px }
}
@media (max-width:380px){
  .confirmation-popup{ max-width:320px; padding:1.5rem; width:95% }
  .confirmation-popup-icon{ height:48px; width:48px; margin-bottom:1.25rem }
  .confirmation-popup-icon svg{ height:24px; width:24px }
}
@media (max-width:375px){
  .settings-content{ padding:16px 12px }
  .settings-header{ padding:14px 12px }
}
@media (max-height:600px) and (orientation:landscape){
  .confirmation-popup{ padding:1.5rem }
  .confirmation-popup-icon{ height:48px; width:48px; margin-bottom:1rem }
  .confirmation-popup-title{ margin-bottom:0.75rem }
  .confirmation-popup-text{ margin-bottom:1.5rem }
}

/* ---------- Loaders & spinners ---------- */
.loader{
  align-items:center;
  background:var(--color-bg-primary);
  display:flex;
  flex-direction:column;
  inset:0;
  justify-content:center;
  pointer-events:none;
  position:fixed;
  /* keep needed will-change (visibility/opacity) only here */
  will-change:opacity, visibility;
  z-index:9999;
}
.loader__spinner{
  animation:spin var(--duration-loader) infinite linear;
  border:var(--border-width-lg) solid var(--color-loader-secondary);
  border-radius:50%;
  border-top-color:var(--color-blue-primary);
  height:var(--size-loader-lg);
  width:var(--size-loader-lg);
}
.loader__text{
  color:var(--color-text-primary);
  font-family:var(--font-primary);
  font-size:16px;
  margin-top:var(--spacing-lg);
  opacity:0.9;
}
.loader--hidden{
  opacity:0;
  transition:opacity var(--duration-normal) ease-out, visibility var(--duration-normal) ease-out;
  visibility:hidden;
}

.button-loading .button-text{
  opacity:0;
  transition:opacity var(--duration-normal) ease-out;
  visibility:hidden;
}
button:disabled{ cursor:wait }

.compact-loader{
  animation:spin var(--duration-loader) infinite linear;
  border:var(--border-width-xs) solid var(--color-loader-secondary);
  border-radius:50%;
  border-top-color:var(--color-blue-primary);
  display:inline-block;
  height:var(--size-loader-xs);
  width:var(--size-loader-xs);
  vertical-align:middle;
}

.image-loading-spinner{
  display:inline-block;
  height:var(--size-loader-sm);
  left:20px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:var(--size-loader-sm);
  z-index:1;
}
.image-loading-spinner:after{
  animation:spin var(--duration-loader) linear infinite;
  border:var(--border-width-sm) solid var(--color-loader-blue-light);
  border-radius:50%;
  border-top-color:var(--color-blue-light);
  content:"";
  display:block;
  height:20px;
  width:20px;
}

.loader--light{ --loader-primary:var(--color-text-primary); --loader-secondary:var(--color-loader-light-secondary) }
.loader--purple{ --loader-primary:var(--color-purple-soft); --loader-secondary:var(--color-purple-alpha-20) }
.loader--success{ --loader-primary:var(--color-success); --loader-secondary:var(--color-loader-success-secondary) }

.social-auth-btn:disabled{ cursor:not-allowed; opacity:0.7 }
.social-auth-btn a,.social-auth-btn span{ transition:opacity var(--duration-normal) ease }

@media (prefers-reduced-motion:reduce){
  .image-loading-spinner:after{ animation:none; border:var(--border-width-sm) solid rgba(0,123,255,0.5) }
}
@media (max-width:767px){
  .image-loading-spinner{ height:18px; left:12px; width:18px }
  .image-loading-spinner:after{ border-width:var(--border-width-sm); height:16px; width:16px }
}
/* Fix: do NOT re-enable animation under reduce-animations-all */
.reduce-animations-all .image-loading-spinner:after{
  animation:none;
  border-width:1px;
  height:16px; width:16px;
}

/* ---------- Chat / Livestream ---------- */
.livestream-chat{
  background:var(--color-chat-bg-secondary);
  background-color:var(--color-chat-bg-primary);
  border:1px solid var(--color-chat-border);
  /* Replace expensive clip-path with radius + overflow */
  border-radius:var(--radius-2xl);
  overflow:hidden;
  display:flex; flex:1; flex-direction:column;
  height:100%;
  position:relative;
  z-index:100;
}
.chat-content{
  background:var(--color-chat-bg-primary);
  border-top:1px solid var(--color-chat-border);
  flex:1;
  overflow-y:auto;
  padding:1rem;
  scroll-behavior:smooth;
}
.chat-message{
  border-radius:var(--radius-sm);
  color:var(--color-text-primary);
  font-size:0.9rem;
  margin-bottom:0.75rem;
  padding:0.5rem;
  word-wrap:break-word;
}
.chat-user{ color:var(--color-purple-primary); font-weight:700; margin-right:0.5rem }
.chat-text{ color:var(--color-chat-text-secondary) }
.chat-time{ color:var(--color-text-muted); float:right; font-size:0.75rem }

.chat-compose{
  background:var(--color-chat-bg-secondary);
  border-top:1px solid var(--color-chat-border);
  padding:0.75rem 1rem;
}
.chat-input{
  border-radius:4px;
  font-size:1rem;
  padding:0.5rem;
  transition:box-shadow var(--transition-fast);
}
.chat-input:focus{ box-shadow:0 0 0 2px var(--color-purple-alpha-50) }
.chat-upload{ cursor:pointer; margin-left:0.5rem }

.chat-text .mention{
  background:var(--color-mention-bg);
  border-radius:3px;
  color:var(--color-mention-text);
  font-weight:500;
  padding:0 3px;
  transition:background var(--transition-fast);
}
.chat-text .mention:hover{ background:var(--color-mention-bg-hover) }

.verified-badge-chat{ display:inline-flex; margin-left:0.3rem; position:relative; top:-0.05em; vertical-align:middle }
.chat-message .verified-badge-chat svg,.verified-badge-chat svg{
  fill:var(--color-purple-primary)!important;
  color:var(--color-purple-primary)!important;
  height:14px; width:14px; vertical-align:middle;
}

#live-section{ background:#09090f; min-height:100vh; overflow:hidden; position:relative; width:100% }
#live-section:before{
  background:radial-gradient(circle at 50% 10%,rgba(139,3,255,0.15) 0%,rgba(165,81,255,0.1) 20%,transparent 60%);
  content:""; inset:0; pointer-events:none; position:absolute; z-index:0;
}
.livestream-container{
  display:flex; flex-direction:column;
  margin:0 auto; min-height:100vh; padding:0; position:relative; width:100%; z-index:1;
}
.livestream-title{
  color:var(--color-text-primary);
  font-family:var(--font-primary);
  font-size:clamp(1.25rem,3vw,2.5rem);
  font-weight:500;
  letter-spacing:-0.02em;
  margin-bottom:0.5rem;
  text-align:left;
}
.livestream-subscribers{
  color:var(--color-text-muted);
  font-family:var(--font-primary);
  font-size:clamp(0.875rem,1.5vw,1rem);
  letter-spacing:-0.01em;
}

.livestream-content{ align-items:stretch; display:flex; flex-direction:column; flex-grow:1; gap:0; min-height:0 }
.livestream-main{ background:transparent; border:none; display:flex; flex-direction:column; height:30vh; overflow:hidden; padding:0; width:100% }
.livestream-player{ background:var(--color-input-bg); height:100%; margin:0; overflow:hidden; position:relative; width:100% }
.livestream-placeholder,.livestream-player iframe{ border:none; height:100%; inset:0; position:absolute; width:100% }

.livestream-offline{
  border-radius:var(--radius-2xl);
  overflow:hidden;
  position:absolute; right:1rem; top:1rem;
  transition:opacity 0.5s ease;
  width:auto; z-index:2;
}
.livestream-status{
  background:var(--color-purple-alpha-20);
  border:1px solid var(--color-purple-alpha-40);
  border-radius:50px;
  color:rgba(255,255,255,0.9);
  display:inline-block;
  font-family:var(--font-primary);
  font-size:0.75rem; font-weight:500;
  letter-spacing:-0.01em;
  padding:0.5rem 1rem;
  text-transform:uppercase;
  transition:background-color var(--transition-smooth), color var(--transition-smooth), border-color var(--transition-smooth), opacity var(--transition-smooth), transform var(--transition-smooth);
  white-space:nowrap;
}
.livestream-status.live{ animation:pulse-live 2s infinite; background-color:#ff4444; color:white }
.livestream-status.offline{}

.stream-title-container{ display:flex; flex-direction:column; gap:0.5rem }
.trading-stats{ display:flex; gap:15px; margin-top:12px }
.trading-stat-card{ background:rgba(28,30,35,0.7); border:none; border-radius:var(--radius-md); flex:1; min-width:170px; padding:12px 16px }
.stat-label{ color:rgba(255,255,255,0.7); font-size:0.85rem; margin-bottom:6px }
.stat-value{ color:white; font-size:1.05rem; font-weight:500; line-height:1.3 }

.livestream-bio,.livestream-quote{
  background:rgba(28,30,35,0.7);
  border:none; border-radius:var(--radius-md);
  display:none; margin:1rem 0; padding:1.25rem;
}
.bio-title,.quote-title{
  color:rgba(255,255,255,0.7);
  font-family:var(--font-primary);
  font-size:1.1rem; font-weight:500;
  letter-spacing:-0.02em; margin-bottom:0.75rem;
}
.bio-content{ font-size:0.9rem }
.bio-content,.quote-content{ color:white; line-height:1.5; margin-bottom:1.5rem }
.quote-content{ font-size:1.1rem; font-style:italic; padding:0.5rem 0; text-align:center }

.bio-separator{ background:rgba(255,255,255,0.4); height:1px; margin:1.25rem 0; opacity:0.6; width:100% }

.social-links{ display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem; margin-top:1.25rem }
.social-link{ color:rgba(255,255,255,0.7); font-size:0.85rem; font-weight:500; text-decoration:none; transition:color var(--transition-fast), transform var(--transition-fast) }
.social-link:hover{ color:var(--color-text-primary); transform:translateY(-1px) }
.social-icon{ height:1rem; width:1rem; margin-right:0.5rem; opacity:0.8 }

.verified-badge{ display:inline-flex; margin-left:0.25rem; position:relative; top:-0.05em; vertical-align:middle }
.verified-badge svg{ fill:var(--color-purple-primary); filter:drop-shadow(0 0 2px rgba(139,3,255,0.3)); height:18px; width:18px; vertical-align:middle }

/* ---------- Image preview modal ---------- */
.image-preview-modal{
  align-items:center;
  background:var(--color-modal-overlay);
  display:flex;
  inset:0;
  justify-content:center;
  opacity:0;
  padding-bottom:env(safe-area-inset-bottom,0);
  padding-top:env(safe-area-inset-top,0);
  pointer-events:none;
  position:fixed;
  transition:opacity var(--transition-fast);
  z-index:9999;
}
.image-preview-modal.visible{ opacity:1; pointer-events:auto }

.modal-content{
  background:var(--color-modal-bg-dark);
  border-radius:var(--radius-md);
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
  display:flex; flex-direction:column;
  max-height:85vh; max-width:500px;
  overflow:hidden; position:relative; width:90%;
  z-index:10000;
}
.modal-header{
  align-items:center;
  border-bottom:1px solid var(--color-modal-border);
  display:flex;
  justify-content:space-between;
  padding:16px;
}
.modal-header h3{ color:var(--color-text-primary); font-size:1.1rem; font-weight:500; margin:0 }
.modal-close{
  align-items:center;
  background:var(--color-button-cancel-bg);
  border:none; border-radius:50%;
  color:rgba(255,255,255,0.7);
  cursor:pointer;
  display:flex; font-size:1.3rem;
  height:36px; width:36px; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.modal-close:active{ background:var(--color-button-cancel-border); color:white }

.modal-body{ display:flex; flex:1; flex-direction:column; gap:16px; overflow-y:auto; padding:16px }
.image-preview-container{
  align-items:center; display:flex; flex-direction:column;
  gap:12px; max-height:45vh; overflow:hidden; width:100%;
}
.preview-image{
  background:rgba(0,0,0,0.3);
  border-radius:var(--radius-sm);
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  max-height:40vh; max-width:100%;
  object-fit:contain;
}
.image-info{
  color:var(--color-text-muted);
  font-size:0.75rem;
  overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; width:100%;
  word-break:break-word;
}

.message-input-container{ position:relative; width:100% }
.message-with-image{
  background:var(--color-input-bg);
  border:1px solid var(--color-chat-border);
  border-radius:10px;
  color:white; font-family:inherit; font-size:0.95rem; line-height:1.4;
  max-height:120px; min-height:70px; padding:12px; resize:vertical; width:100%;
}
.message-with-image:focus{ background:var(--color-input-bg-focus); border-color:var(--color-purple-alpha-40); outline:none }
.char-counter{ bottom:8px; color:rgba(255,255,255,0.5); font-size:0.7rem; position:absolute; right:12px }

.modal-footer{
  background:rgba(0,0,0,0.2);
  border-top:1px solid var(--color-modal-border);
  display:flex; gap:12px; justify-content:flex-end;
  padding:14px 16px;
}
.cancel-button,.send-button{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  border-radius:50px; cursor:pointer;
  font-size:0.9rem; font-weight:500;
  padding:10px 18px; min-width:80px; text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.cancel-button{ background:var(--color-button-cancel-bg); border:1px solid var(--color-button-cancel-border); color:rgba(255,255,255,0.8) }
.cancel-button:active{ background:rgba(255,255,255,0.12); color:white }
.send-button{ background:var(--color-purple-primary); border:none; color:white }
.send-button:active{ background:#9c14ff }

/* ---------- Mentions ---------- */
/* Remove backdrop-filter by default (small area but still expensive on scroll) */
.mention-suggestions-modal{
  background:var(--color-suggestions-bg);
  border:1px solid var(--color-purple-alpha-40);
  border-radius:var(--radius-md);
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
  display:none; max-height:200px; opacity:0; overflow:hidden;
  pointer-events:none; position:absolute;
  transform:scale(0.95) translateY(5px);
  transform-origin:bottom left;
  transition:opacity var(--transition-fast), transform var(--transition-fast);
  width:280px; z-index:1000;
}
.mention-suggestions-modal.active{ display:block; opacity:1; pointer-events:auto; transform:scale(1) translateY(0) }

.mention-header{
  align-items:center;
  background:rgba(0,0,0,0.2);
  border-bottom:1px solid var(--color-chat-border);
  display:flex; justify-content:space-between; padding:8px 12px;
}
.mention-title{ color:rgba(255,255,255,0.8); font-size:0.85rem; font-weight:500 }
.mention-info{ color:rgba(255,255,255,0.5); font-size:0.7rem }

.mention-list{
  max-height:calc(200px - 40px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:4px 0; -webkit-overflow-scrolling:touch;
}
.mention-list::-webkit-scrollbar{ width:4px }
.mention-list::-webkit-scrollbar-track{ background:rgba(0,0,0,0.1) }
.mention-list::-webkit-scrollbar-thumb{ background:var(--color-purple-alpha-50); border-radius:4px }

.mention-item{
  align-items:center; border-radius:6px; cursor:pointer; display:flex;
  margin:0 4px; padding:8px 12px; position:relative;
  transition:background-color 0.15s ease;
}
.mention-item:hover{ background:rgba(255,255,255,0.05) }
.mention-item.selected{ background:var(--color-purple-alpha-40) }
.mention-item-avatar{ flex-shrink:0; margin-right:10px }
.mention-item .avatar-circle{ font-size:0.8rem; height:24px; width:24px; transform:none }
.mention-item-content{ flex:1; min-width:0 }
.mention-item-username{
  color:hsl(var(--user-hue,270),90%,75%);
  font-size:0.85rem; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mention-empty-state{ color:rgba(255,255,255,0.5); display:none; font-size:0.85rem; padding:16px; text-align:center }

/* ---------- Nav / header ---------- */
.mobile-navbar-toggle-button,
.navbar-toggle-button{
  align-items:center; background:none; border:none;
  color:rgba(255,255,255,0.8);
  cursor:pointer; display:flex; justify-content:center; padding:0.5rem;
  position:relative;
  transition:color var(--transition-smooth), opacity var(--transition-smooth), transform var(--transition-smooth);
}
.navbar-toggle-button{ border-radius:50%; height:36px; width:36px }
.mobile-navbar-toggle-button:hover,.navbar-toggle-button:hover{ color:white; transform:scale(1.05) }

.toggle-icon{
  height:20px; width:20px;
  left:50%; top:50%;
  position:absolute; transform:translate(-50%,-50%);
  transition:opacity var(--transition-smooth), transform var(--transition-smooth);
}
.toggle-icon-cross{ opacity:1 }
.mobile-navbar-toggle-button.active .toggle-icon-cross,
.navbar-toggle-button.active .toggle-icon-cross,
.toggle-icon-arrow{ opacity:0; transform:translate(-50%,-50%) scale(0.8) }
.mobile-navbar-toggle-button.active .toggle-icon-arrow,
.navbar-toggle-button.active .toggle-icon-arrow{ opacity:1; transform:translate(-50%,-50%) scale(1) }

/* Collapsing menu: grid rows instead of height */
.bottom-header{
  overflow:visible;
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows var(--transition-smooth), opacity var(--transition-smooth);
}
.bottom-header.collapsed{ grid-template-rows:0fr; overflow:hidden; opacity:0.999 } /* keep layer stable */
.bottom-header .nav-container{ overflow:hidden }

.navbar-toggle-floating{
  align-items:center; background:var(--color-white-alpha-20);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:50%;
  bottom:2rem;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
  color:white; cursor:pointer; display:flex; height:56px; justify-content:center;
  opacity:0; pointer-events:none; position:fixed; right:2rem; transform:translateY(100%);
  transition:opacity var(--transition-smooth), transform var(--transition-smooth);
  width:56px; z-index:1010;
}
.navbar-toggle-floating:hover{ transform:translateY(-2px) }
.navbar-toggle-floating.mobile-position{ bottom:auto; height:44px; right:1rem; top:1rem; transform:translateY(-100%); width:44px }
.bottom-header.collapsed .navbar-toggle-floating.mobile-position{ transform:translateY(0) }
.navbar-toggle-floating.mobile-position:hover{ transform:translateY(0) scale(1.05) }

.player-placeholder{
  background:rgba(0,0,0,0.5);
  border-radius:var(--radius-sm);
  height:0; overflow:hidden; padding-top:56.25%; position:relative; width:100%;
}
#youtube-player{
  border:none; border-radius:var(--radius-sm);
  height:100%!important; inset:0; position:absolute; width:100%!important;
  transition:opacity 0.5s ease;
}
#youtube-player.hidden{ opacity:0; pointer-events:none }

.loading-spinner,.video-error{
  left:50%; top:50%; position:absolute; transform:translate(-50%,-50%); z-index:10;
}
.video-error{
  align-items:center; background:rgba(0,0,0,0.8);
  border-radius:var(--radius-sm); color:white;
  display:flex; flex-direction:column; justify-content:center;
  min-width:200px; padding:20px; text-align:center;
}
.error-icon{ font-size:2rem; margin-bottom:10px }
.error-message{ font-size:14px; line-height:1.4; margin:10px 0 }
.retry-button{
  background:#ff6b6b; border:none; border-radius:4px; color:white; cursor:pointer;
  font-size:12px; margin-top:10px; padding:8px 16px; transition:background var(--transition-fast);
}
.retry-button:hover{ background:#ff5252 }

.preview-mode{ position:relative }
.preview-placeholder{
  align-items:center; background:linear-gradient(135deg,#667eea,#764ba2);
  border-radius:var(--radius-md); color:white; display:flex; justify-content:center;
  min-height:300px; text-align:center;
  transition:transform var(--transition-smooth);
}
.preview-placeholder:hover{ transform:translateY(-2px) }
.placeholder-content{ padding:2rem }
.placeholder-icon{ animation:pulse 2s infinite; font-size:3rem; margin-bottom:1rem }
.placeholder-content p{ font-size:1.1rem; margin:0; opacity:0.9 }

.lazy{ opacity:0; transition:opacity var(--transition-smooth) }
.lazy.loaded{ opacity:1 }

.live-status-indicator.preview{
  background:#ffa726; border-radius:20px; color:white; font-size:0.9rem; font-weight:500; padding:0.5rem 1rem;
}

/* Remove global will-change; enable via helper when animating */
.module-btn,.videos-grid{ will-change:auto }
.videos-grid{ transition:opacity var(--transition-smooth) }

.reviewer-avatar.error-fallback{
  align-items:center; background:linear-gradient(135deg,#667eea,#764ba2);
  color:white; display:flex; font-size:16px; font-weight:600; justify-content:center;
}
.reviewer-avatar.error-fallback:before{ content:attr(data-initials) }
.reviewer-avatar img.hidden{ display:none }

@keyframes pulse-live{ 0%,100%{opacity:1} 50%{opacity:0.7} }
@keyframes mention-highlight{ 0%,100%{background:var(--color-mention-bg)} 50%{background:var(--color-mention-bg-hover)} }
.chat-message.just-sent .mention{ animation:mention-highlight 1.5s ease }

/* ---------- Poem animation (perf rework) ---------- */

.poem-animation-container .container-full {
  position: relative;
  width: 1000px;
  height: 562px;
  margin: 0 auto;
  overflow: hidden;
}

.poem-animation-container .backgroundImage,
.poem-animation-container .boyImage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 1000px;
  width: 100%;
  object-fit: contain;
}

.poem-animation-container .backgroundImage {
  z-index: 1;
}

.poem-animation-container .boyImage {
  z-index: 2;
}
/* ---------- Responsive tweaks ---------- */
@media (max-width:1023px){
  .livestream-chat{ border-radius:0; display:flex; flex-direction:column; height:100vh; overflow:hidden; width:100% }
  .chat-content{ flex:1; overflow-y:auto }
  .chat-compose{ flex-shrink:0 }
  .livestream-subscribers,.livestream-title,.stream-title-container,.trading-stats{ display:none!important }
  .livestream-content{ flex-direction:column }
  .livestream-main{ height:30vh }
  .livestream-chat{ flex:1; height:70vh }
  .livestream-container{ padding:0!important }
  .livestream-player{ border-radius:0; height:100%!important; margin:0; overflow:hidden; padding-top:0!important }
  .livestream-player iframe{ object-fit:cover }
  .livestream-placeholder,.livestream-player iframe{ border:none; height:100%; inset:0; position:absolute; width:100% }
  .verified-badge-chat svg{ height:12px; width:12px }
  .verified-badge svg{ height:15px; width:15px }
  .mention-suggestions-modal{
    border-radius:var(--radius-md) var(--radius-md) 0 0;
    bottom:60px; box-shadow:0 -5px 20px rgba(0,0,0,0.4);
    left:0; max-width:100%; position:fixed; right:0; width:100%;
  }
  .mention-header,.mention-item{ padding:10px 15px }
  .mention-item .avatar-circle{ height:28px; width:28px }
  .mention-item:active{ background:rgba(139,3,255,0.25) }
  body.keyboard-open .mention-suggestions-modal{ bottom:calc(60px + var(--keyboard-height)) }
  .nav-right{ align-items:center; display:flex; gap:0.5rem }
  .mobile-navbar-toggle-button{ border:none; border-radius:50%; flex:0 0 auto; height:44px; order:3; width:44px }
  .nav-container.menu-active+.navbar-toggle-floating,
  .nav-container.menu-active~.navbar-toggle-floating{ display:none }
  .bottom-header.collapsed .navbar-toggle-floating{ opacity:1!important; pointer-events:auto!important }
  .preview-placeholder{ min-height:200px }
  .placeholder-icon{ font-size:2rem }
  .placeholder-content{ padding:1rem }
}
@media (max-width:767px){
  .modal-content{ margin:0.5rem; max-height:80vh; max-width:none; width:92% }
  .modal-header{ padding:14px }
  .modal-header h3{ font-size:1rem }
  .modal-body{ gap:12px; padding:12px }
  .image-preview-container{ max-height:40vh }
  .preview-image{ max-height:35vh }
  .message-with-image{ font-size:0.9rem; min-height:60px }
  .cancel-button,.send-button{ min-width:90px; padding:12px 16px }
  .send-button{ flex:1.2 } .cancel-button{ flex:0.8 }
  .player-placeholder{ border-radius:6px; padding-top:56.25% }
  #youtube-player{ border-radius:6px }
  .video-error{ min-width:150px; padding:15px }
  .error-message{ font-size:12px }
  .retry-button{ font-size:11px; padding:6px 12px }
}
@media (max-width:480px){
  .modal-content{
    border-radius:var(--radius-md);
    box-shadow:0 3px 12px rgba(0,0,0,0.2);
    height:auto; margin:0 auto; max-height:85vh; width:92%;
  }
  .image-preview-modal{ align-items:center }
  .modal-header{ padding:12px 14px }
  .modal-close{ height:36px; width:36px }
  .modal-body{ padding:12px 10px }
  .image-preview-container{ max-height:32vh }
  .preview-image{ max-height:28vh }
  .message-with-image{ min-height:60px; padding:10px }
  .char-counter{ bottom:6px; right:8px }
  .modal-footer{ padding:12px 10px max(12px,env(safe-area-inset-bottom,12px)) }
  .cancel-button,.send-button{ align-items:center; display:flex; font-size:0.95rem; justify-content:center; min-height:46px; padding:12px }
  .send-button{ flex:3 } .cancel-button{ flex:2 }
  .navbar-toggle-floating.mobile-position{ height:40px; right:0.75rem; top:0.75rem; width:40px }
  .player-placeholder{ border-radius:4px; padding-top:56.25% }
  #youtube-player{ border-radius:4px }
}
@media (max-height:640px),(max-width:360px){
  .image-preview-container{ max-height:25vh }
  .preview-image{ max-height:22vh }
  .modal-header h3{ font-size:0.95rem }
  .modal-close{ font-size:1.1rem; height:32px; width:32px }
}
@media (max-height:480px) and (orientation:landscape){
  .modal-content{ flex-direction:row; height:85vh; max-width:80% }
  .image-preview-container{ max-height:70vh; max-width:45% }
  .preview-image{ max-height:65vh; max-width:100% }
  .modal-body{ flex-direction:row; overflow:hidden }
  .message-input-container{ display:flex; flex:1; flex-direction:column }
  .message-with-image{ flex:1 }
  .modal-header{ padding:10px }
  .modal-footer{ border-left:1px solid var(--color-modal-border); border-top:none; flex-direction:column; padding:10px }
  .cancel-button,.send-button{ width:100% }
}
@media (max-height:500px) and (orientation:landscape){
  .livestream-chat{ height:100vh }
}
@media (min-width:1024px){
  .trading-stats{ display:flex; gap:15px; margin-top:12px }
  .trading-stat-card{ background:rgba(28,30,35,0.7); border:none; border-radius:var(--radius-md); flex:1; min-width:170px; padding:12px 16px }
  .stat-label{ color:rgba(255,255,255,0.7); font-size:0.85rem; margin-bottom:6px }
  .stat-value{ color:white; font-size:1.05rem; font-weight:500; line-height:1.3 }
  .stream-title-container{ gap:0.25rem; max-width:600px }
  .livestream-info{ align-items:flex-start; background:transparent; display:flex!important; justify-content:space-between; margin-top:1rem }
  .livestream-offline{ right:1rem; top:1rem; width:auto }
  .livestream-status{ min-width:80px; text-align:center }
  .livestream-info .livestream-title{ font-size:clamp(1rem,2vw,1.75rem); margin-bottom:0.25rem }
  .livestream-info .livestream-subscribers{ font-size:clamp(0.75rem,1.2vw,0.875rem) }
  .livestream-info{ margin-top:0.75rem }
  .livestream-title{ margin:0 }
  .livestream-title-group{ display:flex; flex-direction:column; gap:0.25rem }
  .livestream-container{
    height:auto; max-width:1800px; min-height:calc(100vh - 96px);
    overflow-y:visible; padding:2rem;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .livestream-container::-webkit-scrollbar{ display:none }
  .livestream-content{
    display:flex!important; flex-direction:column!important; gap:2rem!important; height:auto!important;
    min-height:calc(100vh - 96px - 4rem)!important; padding-right:calc(38% + 4rem)!important;
  }
  .livestream-content:after{ content:""; display:block; flex-shrink:0; height:2rem }
  .livestream-main{ flex-shrink:0; height:auto!important; width:100%!important }
  .livestream-bio,.livestream-quote{
    border-radius:var(--radius-2xl); display:block!important; flex-shrink:0; padding:1.5rem; width:100%!important;
  }
  .livestream-quote{ margin:2rem 0 }
  .bio-title,.quote-title{ font-size:1.25rem; margin-bottom:1rem }
  .bio-content{ font-size:0.95rem }
  .social-links{ gap:1.5rem }
  .social-link{ font-size:0.9rem }
  .social-icon{ height:1.1rem; width:1.1rem }
  .livestream-chat{
    background-color:var(--color-chat-bg-primary)!important;
    border-radius:var(--radius-2xl);
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
    height:calc(100vh - 4rem - 96px)!important;
    margin:2rem 2rem 2rem 0!important;
    position:fixed!important; right:0!important; top:0;
    width:38%!important; z-index:10;
  }
  .livestream-player{
    border-radius:var(--radius-2xl);
    height:0; overflow:hidden; padding-top:56.25%; position:relative; width:100%;
  }
  .livestream-placeholder,.livestream-player iframe{ height:100%; inset:0; position:absolute; width:100% }
}
@media (min-width:1025px){
  #videos-section{ background-color:black; min-height:100vh; padding:4rem 2rem 120px }
}

/* Respect reduced motion: disable transitions/animations */
@media (prefers-reduced-motion:reduce){
  .bottom-header,.chat-text .mention,.lazy,.mention-item,.mention-suggestions-modal,
  .mobile-navbar-toggle-button,.nav-container,.navbar-toggle-button,.navbar-toggle-floating,
  .preview-placeholder,.toggle-icon,.videos-grid{
    animation:none!important; transition:none!important;
  }
  .placeholder-icon{ animation:none }
  .chat-message.just-sent .mention{ animation:none!important }
  .chat-content{ scroll-behavior:auto }
}

/* Data-saver & dark tweaks */
@media (connection:slow),(prefers-reduced-data:reduce){
  .mention-suggestions-modal{ /* already no backdrop-filter */ background:rgba(18,20,24,0.98) }
}
@media (prefers-color-scheme:dark){
  .mention-suggestions-modal{ background:rgba(18,20,24,0.95) }
}
.is-safari-ios .mention-suggestions-modal{ transform:translateZ(0); -webkit-transform:translateZ(0) }
.dark-theme .mention-suggestions-modal{ background:rgba(18,20,24,0.95) }

@supports (padding:max(0px)){
  .image-preview-modal{ padding-bottom:env(safe-area-inset-bottom,0) }
  @media (max-width:480px){
    .modal-footer{ padding-bottom:max(12px,env(safe-area-inset-bottom,12px)) }
  }
}

.livestream-title.visible{ opacity:1 }
.livestream-offline.hidden{ opacity:0; pointer-events:none }

#vimeo-player,#vimeo-player iframe{
  border:none; border-radius:var(--radius-sm);
  height:100%!important; left:0; position:absolute; top:0; width:100%!important;
}

/* ---------- Autoplay toggle ---------- */
.autoplay-toggle{ align-items:center; display:flex; margin-left:auto; user-select:none }
.toggle-switch{ align-items:center; cursor:pointer; display:flex; font-size:14px; gap:8px; position:relative }
.toggle-switch input{ height:0; opacity:0; width:0 }
.toggle-slider{
  background-color:#ccc; border-radius:var(--toggle-height);
  flex-shrink:0; height:var(--toggle-height); position:relative;
  transition:background-color var(--transition-normal);
  width:var(--toggle-width);
}
.toggle-slider:before{
  background-color:white; border-radius:50%; bottom:3px; box-shadow:var(--shadow-light);
  content:""; height:var(--toggle-slider-size); left:3px; position:absolute;
  transition:transform var(--transition-normal); width:var(--toggle-slider-size);
}
.toggle-switch input:checked + .toggle-slider{ background-color:var(--color-purple-accent) }
.toggle-switch input:checked + .toggle-slider:before{ transform:translateX(20px) }
.toggle-label{ color:#666; font-weight:500 }

/* ---------- Lists ---------- */
.list-title-container{ align-items:center; display:flex; gap:1rem; justify-content:space-between; margin-bottom:1.5rem }
.list-title{ color:white; flex:1; font-family:var(--font-primary); font-size:1.2rem; font-weight:500; margin:0 }
.module-videos-list .autoplay-toggle{ flex-shrink:0; margin-left:0 }
.module-videos-list .toggle-switch{ font-size:13px }
.module-videos-list .toggle-label{ color:rgba(255,255,255,0.7) }

/* ---------- Polls ---------- */
.poll-container{
  margin:0 auto 20px;
  max-width:800px;
  opacity:0;
  position:relative;
  transform:translateY(-20px);
  transition:opacity var(--transition-normal), transform var(--transition-normal);
  z-index:100;
}
.poll-container.visible{ opacity:1; transform:translateY(0) }
.poll-container.hidden{ display:none }

.active-poll{
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border:2px solid var(--color-purple-primary);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-heavy);
  overflow:hidden; padding:24px; position:relative;
}
.poll-admin-interface{
  /* avoid backdrop blur */
  background:rgba(26,26,46,0.95);
  border:1px solid var(--color-purple-primary);
  border-radius:var(--radius-md);
  margin:20px 0; padding:20px;
}
.poll-option{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(139,3,255,0.3);
  border-radius:var(--radius-sm);
  color:white; cursor:pointer; margin:8px 0; overflow:hidden; padding:12px 16px;
  transition:background-color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
}
.poll-option:hover{ background:rgba(139,3,255,0.1); border-color:var(--color-purple-primary); transform:translateY(-1px) }
.poll-option[data-voted=true]{ background:rgba(139,3,255,0.2); border-color:var(--color-purple-primary) }

@media (max-width:768px){
  .video-metadata{ align-items:flex-start; flex-direction:column; gap:12px }
  .autoplay-toggle{ margin-left:0 }
  .toggle-switch{ font-size:13px }
  .list-title-container{ gap:0.5rem }
  .list-title{ font-size:1.1rem }
  .module-videos-list .toggle-switch{ font-size:11px }
  .module-videos-list .toggle-label{ font-size:10px }
  .player-container{ box-sizing:border-box; max-width:100%; padding:1rem; width:100% }
  .player-content{ gap:1rem }
  .main-content{ max-width:100%; width:100%!important }
  .player-placeholder,.video-player{ max-width:100%; overflow:hidden; width:100% }
  .player-placeholder{ padding-top:56.25% }
  #vimeo-player,#vimeo-player iframe{ max-width:100%!important; overflow:hidden }
  #video-player-section{ padding-top:calc(var(--size-header-height) + 50px) }
  .back-to-videos{ margin:1rem 0 1.5rem }
  .poll-container{ margin:0 10px 20px }
  .active-poll{ padding:16px }
}
@media (max-width:480px){
  .list-title-container{ gap:0.5rem }
  .list-title{ font-size:1.1rem }
  .module-videos-list .toggle-label{ font-size:11px }
  #video-player-section{ overflow-x:hidden; padding:0.5rem; padding-top:calc(var(--size-header-height) + 30px) }
  .player-container{ margin:0; padding:0.5rem }
  .back-to-videos{ font-size:0.9rem; margin:0.75rem 0 1rem; padding:0.6rem 1.2rem }
}
@media (prefers-reduced-motion:reduce){
  .poll-container,.poll-option,.toggle-slider,.toggle-slider:before{ transition:none }
}
/* supprimer le will-change global */
 /* rien ici */

/* activer au besoin seulement */
.poll-container.is-animating{ will-change: transform }
.toggle-slider.is-animating::before{ will-change: transform }

@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .toggle-slider:before{ box-shadow:0 1px 2px rgba(0,0,0,0.3) }
}

/* ---------- Premium / subscription ---------- */
.premium-loading-overlay,
.premium-overlay-spinner,
.premium-restriction-overlay-chat,
.premium-restriction-overlay-player,
.premium-restriction-overlay-video{
  backface-visibility:hidden;
  contain:layout style;
  transform:translateZ(0);
  will-change:auto;
}

.subscription-field{ margin-bottom:var(--spacing-2xl); position:relative; transition:opacity var(--transition-fast) }

.premium-restriction-overlay-chat,
.premium-restriction-overlay-player{
  align-items:center;
  background:var(--gradient-premium-overlay);
  border-radius:var(--radius-sm);
  bottom:0; display:flex; flex-direction:column; justify-content:center;
  left:0; padding:clamp(1rem,4vw,2rem); position:absolute; right:0; text-align:center; top:0; z-index:10;
}
.premium-restriction-icon{
  align-items:center; background:var(--gradient-premium);
  border-radius:50%; display:flex; height:clamp(48px,8vw,64px); justify-content:center;
  margin-bottom:clamp(0.75rem,2vw,1rem); transform:translateZ(0); width:clamp(48px,8vw,64px);
}
.premium-restriction-icon svg{ height:clamp(24px,4vw,32px); width:clamp(24px,4vw,32px); fill:var(--color-text-primary) }
.premium-restriction-content{ margin-bottom:clamp(1rem,3vw,1.25rem) }
.premium-restriction-title{ color:var(--color-text-primary); font-size:clamp(1.25rem,4vw,1.75rem); font-weight:600; line-height:var(--line-height-hero); margin-bottom:clamp(0.25rem,1vw,0.5rem) }
.premium-restriction-subtitle{ color:var(--color-text-secondary); font-size:clamp(0.875rem,3vw,1rem); line-height:var(--line-height-base); max-width:280px }

.premium-restriction-button{
  backface-visibility:hidden;
  background:var(--gradient-premium);
  border:none; border-radius:var(--radius-md);
  cursor:pointer; max-width:280px; min-height:clamp(48px,10vw,56px);
  padding:0; transform:translateZ(0); width:100%; will-change:auto;
}
.premium-restriction-button-content{ align-items:center; display:flex; padding:clamp(0.75rem,3vw,1rem) clamp(1rem,4vw,1.25rem); position:relative; z-index:1 }
.premium-restriction-button-icon{
  align-items:center; background:var(--color-white-alpha-15);
  border-radius:6px; color:var(--color-text-primary); display:flex; flex-shrink:0;
  height:clamp(28px,6vw,32px); justify-content:center; margin-right:clamp(0.75rem,3vw,1rem);
  width:clamp(28px,6vw,32px);
}
.premium-restriction-button-icon svg{ height:clamp(16px,3vw,18px); width:clamp(16px,3vw,18px); fill:currentColor }
.premium-restriction-button-text{ flex:1; min-width:0; text-align:left }
.premium-restriction-button-title{ color:var(--color-text-primary); display:block; font-size:clamp(0.875rem,3vw,1rem); font-weight:600; line-height:var(--line-height-hero); margin-bottom:0.125rem }
.premium-restriction-button-subtitle{ color:var(--color-text-secondary); display:block; font-size:clamp(0.75rem,2.5vw,0.875rem); line-height:var(--line-height-hero) }
.premium-restriction-button-arrow{ color:var(--color-text-secondary); flex-shrink:0; transform:translateZ(0) }
.premium-restriction-button-arrow svg{ height:clamp(16px,3vw,20px); width:clamp(16px,3vw,20px); fill:currentColor }

.premium-overlay-spinner{
  align-items:center;
  animation:premiumSpinnerFadeIn 0.4s ease-out forwards;
  background:linear-gradient(135deg,var(--color-bg-primary) 0%,rgba(20,20,25,0.99) 50%,var(--color-bg-primary) 100%);
  border-radius:var(--radius-sm);
  bottom:0; display:flex; justify-content:center; left:0; opacity:0; position:absolute; right:0; top:0; z-index:15;
}
.premium-spinner-ring{ height:clamp(40px,8vw,56px); position:relative; width:clamp(40px,8vw,56px) }
.premium-spinner-ring:after,.premium-spinner-ring:before{ border:3px solid transparent; border-radius:50%; content:""; position:absolute }
.premium-spinner-ring:before{
  animation:premiumSpinnerRotate 1.2s cubic-bezier(0.68,-0.55,0.265,1.55) infinite;
  border-right-color:var(--color-purple-primary); border-top-color:var(--color-purple-primary);
  bottom:0; left:0; right:0; top:0;
}
.premium-spinner-ring:after{
  animation:premiumSpinnerRotate 0.8s cubic-bezier(0.68,-0.55,0.265,1.55) infinite reverse;
  border-bottom-color:var(--color-purple-light); border-left-color:var(--color-purple-light);
  bottom:6px; left:6px; right:6px; top:6px;
}
.premium-spinner-icon{
  align-items:center; animation:premiumSpinnerPulse 1.5s ease-in-out infinite;
  background:var(--gradient-premium);
  border-radius:50%; color:var(--color-text-primary);
  display:flex; height:clamp(16px,3vw,20px); justify-content:center;
  left:50%; opacity:0.8; position:absolute; top:50%; transform:translate(-50%,-50%);
  width:clamp(16px,3vw,20px);
}
.premium-spinner-icon svg{ height:clamp(8px,1.5vw,10px); width:clamp(8px,1.5vw,10px); fill:var(--color-text-primary) }

/* Remove full-screen backdrop blur */
.premium-restriction-overlay-video{
  align-items:center;
  background:linear-gradient(135deg,rgba(177,156,217,0.95),rgba(142,115,192,0.95));
  border-radius:var(--radius-md);
  bottom:0; box-shadow:var(--shadow-2xl);
  color:var(--color-text-primary);
  display:flex; flex-direction:column; justify-content:center;
  left:0; padding:var(--spacing-2xl); position:absolute; right:0; text-align:center; top:0; z-index:1000;
}
.premium-restriction-overlay-video .premium-restriction-icon{ animation:pulse 2s infinite; margin-bottom:var(--spacing-xl); opacity:0.9 }
.premium-restriction-overlay-video .premium-restriction-icon svg{ filter:drop-shadow(0 4px 8px var(--color-black-alpha-70)) }
.premium-restriction-overlay-video .premium-restriction-content{ margin-bottom:var(--spacing-2xl); max-width:400px }
.premium-restriction-overlay-video .premium-restriction-title{ font-size:1.5rem; font-weight:700; margin-bottom:var(--spacing-sm); text-shadow:0 2px 4px var(--color-black-alpha-70) }
.premium-restriction-overlay-video .premium-restriction-subtitle{ font-size:1rem; line-height:var(--line-height-base); opacity:0.9; text-shadow:0 1px 2px rgba(0,0,0,0.1) }
.premium-restriction-overlay-video .premium-restriction-button{
  /* drop backdrop-filter here */
  background:var(--color-white-alpha-20); border:2px solid rgba(255,255,255,0.3);
  border-radius:var(--radius-md); cursor:pointer; overflow:hidden; padding:0; position:relative;
  transition:transform var(--transition-normal), box-shadow var(--transition-normal);
}
.premium-restriction-overlay-video .premium-restriction-button:hover{
  background:rgba(255,255,255,0.3); border-color:rgba(255,255,255,0.5);
  box-shadow:0 8px 25px var(--color-black-alpha-70); transform:translateY(-2px);
}
.premium-restriction-overlay-video .premium-restriction-button-content{ align-items:center; display:flex; gap:var(--spacing-lg); padding:var(--spacing-lg) var(--spacing-xl) }
.premium-restriction-overlay-video .premium-restriction-button-icon{ flex-shrink:0; opacity:0.9 }
.premium-restriction-overlay-video .premium-restriction-button-text{ flex:1; text-align:left }
.premium-restriction-overlay-video .premium-restriction-button-title{ display:block; font-size:1rem; font-weight:600; margin-bottom:0.25rem }
.premium-restriction-overlay-video .premium-restriction-button-subtitle{ display:block; font-size:0.875rem; opacity:0.8 }
.premium-restriction-overlay-video .premium-restriction-button-arrow{ flex-shrink:0; opacity:0.7; transition:transform var(--transition-normal) }
.premium-restriction-overlay-video .premium-restriction-button:hover .premium-restriction-button-arrow{ transform:translateX(4px) }

.subscription-card{
  background:var(--color-premium-card-bg);
  border:1px solid var(--color-premium-card-border);
  border-radius:var(--radius-md);
  contain:layout style;
  padding:clamp(1rem,3vw,1.5rem);
  position:relative;
  will-change:auto;
}
.subscription-card:before{ display:none }
.subscription-card.premium:before{ background:var(--color-premium-secondary) }
.subscription-header{ align-items:center; display:flex; gap:var(--spacing-lg); margin-bottom:1.25rem }
.subscription-icon{ background:var(--color-purple-primary); border-radius:var(--radius-sm); color:var(--color-text-primary); display:grid; flex-shrink:0; height:40px; place-items:center; width:40px }
.subscription-icon.premium{ background:var(--color-premium-secondary) }
.subscription-icon.free{ background:var(--color-premium-disabled) }
.subscription-info{ flex:1; min-width:0 }
.subscription-status{ color:var(--color-text-primary); display:block; font-size:1.1rem; font-weight:600; margin-bottom:0.25rem }
.subscription-status.free{ color:#9ca3af }
.subscription-description{ color:var(--color-premium-disabled); font-size:0.875rem; line-height:var(--line-height-base) }
.trial-badge{ background:linear-gradient(135deg,#ff6b6b,#feca57); color:var(--color-text-primary); font-size:14px; font-weight:600; margin-bottom:16px; padding:var(--spacing-sm) var(--spacing-lg); text-align:center }
.trial-badge,.trial-info{ border-radius:var(--radius-sm) }
.trial-info{ align-items:center; background:rgba(152,42,255,0.15); display:flex; gap:var(--spacing-md); margin-bottom:1.25rem; padding:var(--spacing-md) var(--spacing-lg) }
.trial-info.expired{ background:var(--color-premium-trial-bg); border-left-color:var(--color-premium-trial-border) }
.trial-icon{ flex-shrink:0; font-size:1.25rem }
.trial-content{ flex:1 }
.trial-title{ color:var(--color-text-primary); display:block; font-weight:600; margin-bottom:0.25rem }
.trial-remaining{ color:#9ca3af; font-size:0.875rem }
.subscription-details{ margin-bottom:24px }
.detail-item{ align-items:center; display:flex; gap:var(--spacing-md); padding:var(--spacing-md) 0 }
.detail-icon{ align-items:center; background:var(--color-white-alpha-10); border-radius:var(--radius-sm); height:32px; justify-content:center; width:32px }
.detail-content{ flex:1 }
.detail-label{ display:block; font-size:12px; margin-bottom:2px; opacity:0.7 }
.detail-value{ display:block; font-size:14px; font-weight:600 }
.detail-subtitle{ display:block; font-size:11px; margin-top:2px; opacity:0.6 }

.premium-features{ margin-bottom:var(--spacing-xl) }
.premium-features h4{ color:var(--color-text-primary); font-size:1rem; font-weight:600; margin:0 0 var(--spacing-lg) 0 }
.features-grid{ display:grid; gap:var(--spacing-sm) }
.feature-item{ align-items:center; color:var(--color-text-primary); display:flex; font-size:0.9rem; gap:var(--spacing-md); padding:var(--spacing-sm) 0; transition:transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast) }
.feature-item.active{ background:rgba(152,42,255,0.15); border:1px solid rgba(152,42,255,0.3); border-radius:var(--radius-sm); padding:var(--spacing-md) var(--spacing-lg) }
.feature-item.disabled{ background:var(--color-error-bg); border:1px solid var(--color-error-border); border-radius:var(--radius-sm); color:var(--color-premium-disabled); opacity:0.8; padding:var(--spacing-md) var(--spacing-lg) }
.feature-item svg{ flex-shrink:0; height:16px; width:16px; stroke:currentColor }
.feature-item.active svg{ color:#22c55e; stroke:#22c55e }
.feature-item.disabled svg{ color:#9ca3af; stroke:#9ca3af }
.feature-item span{ color:var(--color-text-primary); font-size:14px; font-weight:500; line-height:var(--line-height-base) }
.feature-item.disabled span{ color:#9ca3af }

.subscription-actions{ display:flex; gap:var(--spacing-md) }
.upgrade-button-new{ background:var(--color-purple-primary); border:none; border-radius:var(--radius-sm); cursor:pointer; min-height:56px; padding:0; transition:background-color var(--transition-fast), transform var(--transition-fast); width:100% }
.upgrade-button-new:hover{ background:#7c02e6; transform:translateY(-1px) }
.upgrade-content{ align-items:center; display:flex; gap:var(--spacing-lg); padding:var(--spacing-lg) }
.upgrade-icon{ background:var(--color-white-alpha-20); border-radius:6px; color:var(--color-text-primary); display:grid; flex-shrink:0; height:32px; place-items:center; width:32px }
.upgrade-text{ flex:1; text-align:left }
.upgrade-title{ color:var(--color-text-primary); display:block; font-size:1rem; font-weight:600; margin-bottom:0.25rem }
.upgrade-subtitle{ font-size:0.875rem }
.upgrade-arrow,.upgrade-subtitle{ color:var(--color-text-secondary) }
.upgrade-arrow{ transition:transform var(--transition-fast) }
.upgrade-button-new:hover .upgrade-arrow{ transform:translateX(4px) }

.manage-subscription-btn{
  align-items:center; background:var(--color-premium-card-border); border:1px solid #3a3d41;
  border-radius:var(--radius-sm); color:var(--color-text-primary); cursor:pointer; display:flex; font-weight:500;
  gap:var(--spacing-sm); justify-content:center; padding:var(--spacing-md) var(--spacing-lg);
  transition:background-color var(--transition-fast), transform var(--transition-fast); width:100%;
}
.manage-subscription-btn:hover{ background:#3a3d41; transform:translateY(-1px) }

.admin-only{ display:none!important }
.admin-user .admin-only{ display:inline-flex!important }
.admin-user .message-ban-btn.own-message{ display:none!important }

.message-ban-btn,.message-delete-btn,.message-pin-btn{
  align-items:center; background:transparent; border:none; border-radius:4px; color:#888; cursor:pointer; display:inline-flex;
  height:24px; justify-content:center; margin-left:4px; opacity:0.6;
  transition:opacity var(--transition-fast), transform var(--transition-fast);
  width:24px;
}
.message-ban-btn:hover,.message-delete-btn:hover,.message-pin-btn:hover{ background:var(--color-white-alpha-10); opacity:1; transform:scale(1.1) }
.message-delete-btn:hover{ color:#ff6b6b }
.message-ban-btn:hover{ color:#ff4757 }
.message-pin-btn:hover{ color:#ffa502 }
.admin-user .admin-only{ animation:fadeInButton 0.3s ease-out }

.premium-loading-overlay{
  align-items:center;
  /* reduce blur intensity */
  backdrop-filter:none;
  background:linear-gradient(135deg,var(--color-bg-primary) 0%,rgba(10,8,15,0.93) 50%,var(--color-bg-primary) 100%);
  border-radius:var(--radius-sm);
  bottom:0; display:flex; justify-content:center; left:0; position:absolute; right:0; top:0; z-index:5;
}
.premium-loading-content{ align-items:center; display:flex; flex-direction:column; gap:var(--spacing-lg) }
.premium-loading-spinner{ height:48px; position:relative; width:48px }
.premium-loading-ring{
  animation:premium-loading-spin 1s linear infinite;
  border-radius:50%; border-top:3px solid var(--color-purple-alpha-20); border:3px solid var(--color-purple-alpha-20); border-top-color:var(--color-purple-primary);
  bottom:0; left:0; position:absolute; right:0; top:0;
}
.premium-loading-icon{ color:var(--color-purple-primary); height:20px; left:50%; position:absolute; top:50%; transform:translate(-50%,-50%); width:20px }
.premium-loading-icon svg{ height:100%; width:100%; fill:currentColor }
.premium-loading-text{ color:var(--color-text-secondary); font-size:0.875rem; font-weight:500; text-align:center }

.skeleton-loading{ pointer-events:none }
.skeleton-shimmer{ animation:pulse 1.5s ease-in-out infinite; background:var(--color-premium-card-border); border-radius:4px }
.skeleton-text{ height:16px; margin-bottom:var(--spacing-sm) }
.skeleton-feature{ height:20px; margin-bottom:var(--spacing-sm) }

.subscription-badge{ display:none }
.current-plan-badge{ pointer-events:none; position:absolute; top:-16px; z-index:100 }
.badge-container{ backdrop-filter:none; background:linear-gradient(135deg,rgba(135,206,250,0.9),rgba(147,112,219,0.9)); border:1px solid rgba(255,255,255,0.3); border-radius:var(--radius-full); box-shadow:var(--shadow-md); gap:6px; padding:var(--spacing-sm) var(--spacing-lg) }
.badge-container,.badge-icon{ align-items:center; display:flex }
.badge-icon{ background:var(--color-white-alpha-20); border-radius:50%; flex-shrink:0; height:16px; justify-content:center; width:16px }
.badge-icon,.badge-text{ color:var(--color-text-primary) }
.badge-text{ font-family:var(--font-primary); font-size:12px; font-weight:600; letter-spacing:0.01em; line-height:1; text-shadow:0 1px 2px var(--color-black-alpha-70); white-space:nowrap }

.pricing-grid-card.current-plan{
  background:linear-gradient(135deg,rgba(18,21,23,0.85),rgba(25,30,35,0.9) 50%,rgba(18,21,23,0.85));
  border-radius:20px;
  box-shadow:0 8px 25px rgba(135,206,250,0.15), var(--shadow-sm);
  outline:2px solid rgba(135,206,250,0.6); outline-offset:-2px;
  overflow:visible; position:relative; transform:scale(1.02);
  transition:transform var(--transition-fast);
  z-index:10;
}
.pricing-grid-card.current-plan:hover{ transform:scale(1.03) translateY(-2px) }
.current-plan .pricing-button,.current-plan .pricing-grid-button{
  backdrop-filter:none;
  background:linear-gradient(135deg,rgba(135,206,250,0.15),rgba(147,112,219,0.15));
  border:1px solid rgba(135,206,250,0.4);
  color:var(--color-text-primary);
  font-weight:600; transition:transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
.current-plan .pricing-button:hover,.current-plan .pricing-grid-button:hover{
  background:linear-gradient(135deg,rgba(135,206,250,0.25),rgba(147,112,219,0.25));
  border-color:rgba(135,206,250,0.6);
  box-shadow:0 4px 12px rgba(135,206,250,0.2);
  transform:translateY(-1px);
}

/* ---------- Video transition overlay (no backdrop blur) ---------- */
.video-transition-overlay{
  align-items:center;
  background:var(--color-overlay-bg);
  bottom:0; display:flex; justify-content:center; left:0; opacity:0; position:fixed; right:0; top:0;
  transition:opacity var(--transition-normal), visibility var(--transition-normal);
  visibility:hidden; z-index:1000;
}
.video-transition-overlay.active{ opacity:1; visibility:visible }
.transition-content{ color:var(--color-text-primary); text-align:center }
.transition-spinner{ height:60px; margin:0 auto 20px; position:relative; width:60px }
.spinner-ring{
  animation:spin 1s linear infinite;
  border-radius:50%;
  border-top:3px solid var(--color-white-alpha-20);
  border:3px solid var(--color-white-alpha-20);
  border-top-color:var(--color-blue-light);
  height:100%;
  position:absolute; width:100%;
}
.spinner-icon{ color:var(--color-blue-light); height:24px; left:50%; position:absolute; top:50%; transform:translate(-50%,-50%); width:24px }
.transition-text{ font-size:16px; font-weight:500; opacity:0.9 }

.video-card.loading-state{ opacity:0.7; transform:scale(0.98); transition:transform var(--transition-fast), opacity var(--transition-fast) }
.video-card.loading-state:after{
  animation:pulse 1.5s ease-in-out infinite;
  background:rgba(0,123,255,0.1);
  border:2px solid var(--color-blue-light);
  border-radius:inherit;
  bottom:0; content:""; left:0; position:absolute; right:0; top:0;
}

/* ---------- Keyframes (unified) ---------- */
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes premiumSpinnerFadeIn { to { opacity:1 } }
@keyframes premiumSpinnerRotate { to { transform:rotate(360deg) } }
@keyframes premiumSpinnerPulse { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }

/* ---------- Helpers ---------- */
/* Enable only where you truly animate transform/opacity */
.is-animating{ will-change:transform, opacity }

/* --------- Feature safeguards --------- */
/* Disable full-screen blur if not supported or on data-saver */
@supports not (backdrop-filter: blur(1px)) {
  .auth-blur-overlay{ backdrop-filter:none; -webkit-backdrop-filter:none }
}
@media (prefers-reduced-data: reduce){
  .auth-blur-overlay{ backdrop-filter:none; -webkit-backdrop-filter:none }
  .premium-restriction-overlay-video{ /* already no backdrop-filter */ }
}
/*!
 * non-critical.optimized.css — production build (performance-tuned)
 * Strategy:
 * - No `transition: all`; limit to transform/opacity/background-color/color/border-color.
 * - No fixed, full-width `backdrop-filter`. Opaque fallback for .chat-compose (mobile/desktop).
 * - Lighter, unified shadows; no shadow transitions across large surfaces.
 * - Infinite animations paused by default; enable via `.is-animating` wrapper.
 * - Prudent use of `content-visibility` with realistic `contain-intrinsic-size`.
 * - Removed gratuitous `will-change` and `translateZ(0)`.
 * - Deduplicated keyframes; consistent fade/rotate.
 */

/* -------------------------------
   Tabs
---------------------------------*/
.chat-tabs{
  background: rgba(18,20,24,0.95);
  border-bottom: none;
  display: flex;
  padding: 0;
  width: 100%;
}

.chat-tab{
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  flex: 1;
  font-family: Inter, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.7px;
  padding: 0.85rem 0;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  transition: color 150ms cubic-bezier(.2,.8,.2,1), opacity 150ms cubic-bezier(.2,.8,.2,1);
}

.chat-tab:hover{ color: rgba(255,255,255,0.85); }

.chat-tab.active{
  color: var(--color-text-primary);
  font-weight: 500;
}

/* underline via transform (composite-friendly) */
.chat-tab::after{
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 0;
  height: 2px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  background: currentColor;
  transition: transform 150ms ease, opacity 150ms ease;
}
.chat-tab.active::after{ opacity: .9; transform: scaleX(1); }


/* -------------------------------
   Composer / Input
---------------------------------*/
.chat-compose{
  align-items: center;
  /* no full-width blur to avoid GPU overdraw; keep opaque look */
  backdrop-filter: none;
  background: rgba(18,21,26,0.95);
  border-top: 1px solid var(--color-border-secondary);
  display: flex;
  position: relative;
  z-index: 10;
  gap: .5rem;
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: none;
}

.chat-input{
  background: var(--color-input-bg);
  border: none;
  border-radius: 25px;
  color: var(--color-text-primary);
  flex: 1;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: var(--line-height-base);
  max-height: 120px;
  min-height: 42px;
  resize: none;
  padding: var(--spacing-md) var(--spacing-lg);
  transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.chat-input:focus{
  background: var(--color-input-bg-focus);
  box-shadow: 0 0 0 2px var(--color-purple-light), var(--shadow-sm);
  outline: none;
}

.chat-input::placeholder{ color: rgba(255,255,255,0.4); }

.chat-emoji,
.chat-upload,
.chat-send{
  align-items: center;
  background: rgba(45,45,50,0.4);
  border: none;
  border-radius: 50%;
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  height: 38px;
  justify-content: center;
  width: 38px;
  flex-shrink: 0;
  transition: transform 150ms ease, opacity 150ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.chat-send{
  background: var(--color-text-primary);
  border: 1px solid #ddd;
  margin-left: var(--spacing-sm);
}
.chat-send i,
.chat-send svg{
  color: var(--color-text-dark);
  height: 18px;
  width: 18px;
}

.chat-emoji:hover,
.chat-upload:hover{
  background: var(--color-purple-alpha-20);
  color: var(--color-text-secondary);
  transform: translateY(-1px);
}


/* -------------------------------
   Messages
---------------------------------*/
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeOut{ from { opacity: 1 } to { opacity: 0 } }
@keyframes rotate360 { from { transform: rotate(0) } to { transform: rotate(360deg) } }
@keyframes pulse { 0%,100% { opacity:1; transform: scale(1)} 50% { opacity:.7; transform: scale(.96)} }

.chat-message{
  animation: fadeInUp 300ms ease forwards;
  margin-bottom: var(--spacing-sm);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
  /* remove broad contain to avoid layering explosion */
}

.message-container{
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  overflow: visible;
  padding-bottom: var(--spacing-sm);
  position: relative;
}

.chat-message-avatar{
  /* drop contain/transform hints unless actually animating */
  flex-shrink: 0;
  height: 32px;
  margin-right: var(--spacing-md);
  width: 32px;
}

.avatar-circle{
  align-items: center;
  background: hsl(var(--avatar-hue,270),100%,50%);
  border: none;
  border-radius: 50%;
  box-shadow: none;
  color: var(--color-text-primary);
  display: flex;
  font-size: 0.9rem;
  font-weight: 500;
  height: 32px;
  justify-content: center;
  width: 32px;
  /* remove translateZ(0) to avoid forced compositing */
}


/* -------------------------------
   Badges / Pricing / Cards
---------------------------------*/
.current-plan-badge.trial-badge{ display: none; } /* remove dead subtree if always hidden */

.tarif-content.current-plan{
  position: relative;
  padding-bottom: var(--spacing-2xl);
  height: clamp(320px, 50vh, 560px);
}

.trial-btn.manage-subscription{
  background: linear-gradient(135deg,#b0b0b0,#8a709f);
  border: none;
  color: var(--color-text-primary);
  font-weight: 600;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.trial-btn.manage-subscription:hover{
  filter: brightness(1.02);
  box-shadow: 0 6px 18px rgba(34,197,94,0.22);
  transform: translateY(-2px);
}

/* Unified, lighter elevations */
.pricing-card,
.pricing-grid-card,
.card,
.review-card,
.video-card,
.cards-container .card,
.pricing-grid .pricing-card,
.pricing-grid .pricing-grid-card,
.reviews-section .review-card,
.videos-grid .video-card{
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.pricing-card:hover,
.pricing-grid-card:hover,
.card:hover,
.review-card:hover,
.video-card:hover{
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
  transform: translateY(-1px);
}

/* Remove heavy purple multi-shadow variants from prod */


/* -------------------------------
   OTP / Phone flow
---------------------------------*/
.otp-input-section{ margin:1.5rem 0; position:relative; }
.otp-label{ color:var(--color-text-primary); display:block; font-size:14px; font-weight:500; margin-bottom:0.5rem; }
.otp-input-container{ align-items:center; display:flex; position:relative; }

.otp-input{
  background: var(--color-input-bg);
  border:2px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: Courier New, monospace;
  font-size: 18px;
  letter-spacing: 0.5em;
  padding: 12px 40px 12px 16px;
  text-align: center;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  width: 100%;
}
.otp-input:focus{
  background: var(--color-input-bg-focus);
  border-color: var(--color-purple-primary);
  box-shadow: 0 0 0 3px rgba(139,3,255,0.1);
  outline: none;
}
.otp-input::placeholder{ color: var(--color-text-muted); letter-spacing: .3em; }

.otp-validation-icon{
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 20px;
  justify-content: center;
  position: absolute;
  right: 12px;
  width: 20px;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.otp-validation-icon.validating{
  background: var(--color-purple-primary);
}
.otp-validation-icon.validating:after{
  content:"";
  height:8px; width:8px;
  border:2px solid white;
  border-radius:50%;
  border-top-color: transparent;
  animation: rotate360 .8s linear infinite;
}
.otp-validation-icon.valid { background: var(--color-success); }
.otp-validation-icon.valid:after{ content:"✓"; color:white; font-size:12px; font-weight:700; }
.otp-validation-icon.error{ background: var(--color-error); }
.otp-validation-icon.error:after{ content:"✗"; color:white; font-size:12px; font-weight:700; }

.countdown-text{
  align-items:center;
  color: var(--color-text-secondary);
  display:flex;
  font-size:14px;
  gap:.5rem;
  justify-content:center;
  margin-top:.5rem;
  text-align:center;
}
.countdown-timer{ font-family: Courier New, monospace; font-weight:500; color: var(--color-purple-primary); }
.resend-button{
  background:none; border:none; border-radius:4px;
  cursor:pointer; font-size:14px; padding:4px 8px;
  text-decoration: underline;
  transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease;
  color: var(--color-purple-primary);
}
.resend-button:hover{ background: rgba(139,3,255,0.1); color: var(--color-purple-light); }
.resend-button:disabled{ color: var(--color-text-muted); cursor:not-allowed; text-decoration:none; }

.otp-error-message,
.otp-success-message{
  font-size:13px; margin-top:.5rem; padding:8px; text-align:center; border-radius: var(--radius-sm);
}
.otp-error-message{ background: var(--color-error-bg); border:1px solid var(--color-error-border); color: var(--color-error); }
.otp-success-message{ background: var(--color-success-bg); border:1px solid var(--color-success-border); color: var(--color-success); }

/* phone modal */
.phone-step{ opacity:1; transform:translateX(0); transition: opacity 180ms ease, transform 180ms ease; }
.phone-step-hidden{ opacity:0; pointer-events:none; position:absolute; transform:translateX(-20px); width:100%; }

.code-input-section{ margin-bottom:24px; }
.code-input-container{ margin-bottom:8px; position:relative; }

.code-input{
  background: rgba(255,255,255,0.05);
  border:2px solid rgba(255,255,255,0.1);
  border-radius:12px;
  box-sizing: border-box;
  color:#fff;
  font-family: Roobert,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:24px;
  font-weight:600;
  letter-spacing:8px;
  outline:none;
  padding:20px 16px;
  text-align:center;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  width:100%;
}
.code-input:focus{ background: rgba(255,255,255,0.08); border-color:#a551ff; box-shadow:0 0 0 4px rgba(139,3,255,0.1); }

.phone-btn-send,
.phone-btn-verify{
  align-items:center; border:none; border-radius:12px; color:#fff; cursor:pointer;
  display:flex; font-family:Roobert,-apple-system,BlinkMacSystemFont,sans-serif; font-size:16px; font-weight:600;
  gap:8px; justify-content:center; margin-bottom:16px; padding:16px 24px; width:100%;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.phone-btn-send:hover:not(:disabled),
.phone-btn-verify:hover:not(:disabled){
  box-shadow: 0 8px 25px rgba(255,107,53,0.28);
  transform: translateY(-2px);
}
.phone-btn-send:disabled,
.phone-btn-verify:disabled{ cursor:not-allowed; opacity:.5; transform:none; }

.phone-btn-resend{
  background:transparent; border:1px solid rgba(255,255,255,0.2); border-radius:8px;
  color:rgba(255,255,255,0.7); cursor:pointer;
  font-family:Roobert,-apple-system,BlinkMacSystemFont,sans-serif; font-size:14px;
  margin-top:8px; padding:12px 24px; width:100%;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.phone-btn-resend:hover{ background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.9); }

.phone-btn.loading .btn-text{ opacity:0; }
.phone-btn.loading .btn-loader{ opacity:1; }

.btn-loader{
  animation: rotate360 1s linear infinite;
  border:2px solid rgba(255,255,255,0.3);
  border-radius:50%;
  border-top-color:#fff;
  height:20px; width:20px;
  left:50%; top:50%; opacity:0; position:absolute; transform:translate(-50%,-50%);
  transition: opacity 150ms ease;
}


/* -------------------------------
   Final section / Link pill (keeps small backdrop blur only on tiny element)
---------------------------------*/
.final-section-footer{ position:absolute; left:0; bottom:150px; width:auto; z-index:999; }
.final-section__background-video{ z-index:1; }
.final-section-inner{ position:relative; z-index:2; }
.final-section-footer{ z-index:999; }

.conditions-link{
  /* small, localized blur is acceptable; fallback included */
  background: rgba(255,255,255,0.15);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.95);
  display: inline-block;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  margin-left: 0;
  padding: 10px 20px 10px 15px;
  position: relative;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .conditions-link{ backdrop-filter: blur(15px); }
}
.conditions-link:before{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  border-right:10px solid rgba(255,255,255,0.15);
  border-top:10px solid transparent; border-bottom:10px solid transparent;
  height:0; width:0; left:-10px;
}
.conditions-link:after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,0.9);
  border-radius:50%; box-shadow:0 0 3px rgba(0,0,0,0.4);
  height:6px; width:6px; left:-4px;
}
.conditions-link:hover{
  background: rgba(255,255,255,0.25);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  color: #fff;
  transform: translateX(6px);
}
.conditions-link:hover:before{ border-right-color: rgba(255,255,255,0.25); }
.conditions-link:focus{ outline:2px solid rgba(255,255,255,0.6); outline-offset:3px; }
.conditions-link:active{ transform: translateX(3px); }


/* -------------------------------
   Utilities
---------------------------------*/
.hidden{ display:none !important; }
.fade-in{ animation: fadeIn 300ms ease-in both; }
.fade-out{ animation: fadeOut 300ms ease-out both; }

/* rate-limited: static (no infinite pulse) */
.auth-submit.rate-limited,
.google-btn.rate-limited{
  opacity:.5; cursor:not-allowed; background:#666; border-color:#666; position:relative;
}
.auth-submit.rate-limited::after,
.google-btn.rate-limited::after{
  content:"⏱️"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:14px;
}

/* .rate-limited (generic flag) without animation */
.rate-limited{ opacity:.5; }


/* -------------------------------
   Content Visibility (careful defaults)
---------------------------------*/
.premium-restriction-overlay-chat,
.premium-restriction-overlay-player,
.section-hero,
.space-section{
  /* avoid over-constraining with contain: layout style unless measured beneficial */
}

.section:not(.section-hero):not(.space-section){
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* -------------------------------
   Responsive
---------------------------------*/
@media (max-width: 1024px){
  .chat-message:last-child{
    margin-bottom: calc(3rem + env(safe-area-inset-bottom, 20px)) !important;
  }
  .chat-compose{
    position: fixed; left:0; right:0; bottom:0; width:100%;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    box-shadow: 0 -1px 8px rgba(0,0,0,.25); /* short shadow, no blur */
    z-index: 100;
  }
  .chat-content{ padding-bottom: calc(4rem + 80px); }
  .chat-emoji{ margin-right: var(--spacing-sm); display:none; }
}

@media (max-width: 768px){
  .premium-restriction-overlay-chat,
  .premium-restriction-overlay-player{ padding: var(--spacing-lg); }

  .premium-restriction-button{ min-height: 48px; }

  .premium-restriction-button-content{ padding: var(--spacing-md) var(--spacing-lg); }

  .premium-restriction-icon{ height:48px; width:48px; margin-bottom: var(--spacing-md); }
  .premium-restriction-icon svg{ height:24px; width:24px; }

  .premium-restriction-overlay-video{ padding: var(--spacing-xl); }
  .premium-restriction-overlay-video .premium-restriction-title{ font-size:1.25rem; }
  .premium-restriction-overlay-video .premium-restriction-subtitle{ font-size:.9rem; }
  .premium-restriction-overlay-video .premium-restriction-button-content{ gap: var(--spacing-md); padding: .875rem 1.25rem; }

  .features-grid{ gap: var(--spacing-sm); grid-template-columns: 1fr; }
  .feature-item{ padding:10px 14px; }
  .feature-item svg{ margin-right:10px; }
  .feature-item span{ font-size:13px; }

  .subscription-card{ padding: var(--spacing-lg); }
  .subscription-icon{ height:36px; width:36px; }

  .upgrade-content{ padding: .875rem; }
  .upgrade-icon{ height:28px; width:28px; }

  .premium-spinner-ring{ height:40px; width:40px; }
  .premium-spinner-ring:after{ bottom:4px; left:4px; right:4px; top:4px; }
  .premium-spinner-icon{ height:16px; width:16px; }
  .premium-spinner-icon svg{ height: var(--spacing-sm); width: var(--spacing-sm); }
  .premium-loading-spinner{ height:40px; width:40px; }
  .premium-loading-icon{ height:16px; width:16px; }
  .premium-loading-text{ font-size:.8rem; }

  .current-plan-badge{ top:-14px; }
  .badge-container{ gap:4px; padding:6px var(--spacing-md); }
  .badge-text{ font-size:11px; }
  .badge-icon{ height:14px; width:14px; }
  .badge-icon svg{ height:10px; width:10px; }

  .pricing-grid-card.current-plan{ transform: scale(1.01); }
  .pricing-grid-card.current-plan:hover{ transform: scale(1.02) translateY(-1px); }

  .tarif-content{ padding: var(--spacing-lg) var(--spacing-xl) 0.8rem; padding-bottom: var(--spacing-xl); }

  .skeleton-shimmer{ animation: none; background: var(--color-premium-card-border); }

  /* OTP sizing */
  .otp-input{ font-size:16px; padding:10px 35px 10px 12px; }
  .otp-validation-icon{ height:18px; width:18px; right:10px; }
}

@media (max-width: 480px){
  .premium-restriction-overlay-chat,
  .premium-restriction-overlay-player{ padding: var(--spacing-md); }

  .premium-restriction-content{ margin-bottom: var(--spacing-lg); }
  .premium-restriction-button,
  .premium-restriction-subtitle{ max-width: 240px; }

  .chat-tab{ font-size: .7rem; letter-spacing: .5px; padding: .65rem 0; }

  .current-plan-badge{ top:-12px; }
  .badge-container{ padding:5px 10px; }
  .badge-text{ font-size:10px; }
  .badge-icon{ height: var(--spacing-md); width: var(--spacing-md); }
  .badge-icon svg{ height: var(--spacing-sm); width: var(--spacing-sm); }

  .final-section-footer{ bottom: 80px; }
}

/* pointer-capability adjustments */
@media (hover:hover){
  .premium-restriction-button:hover{ transform: translateY(-1px); }
  .premium-restriction-button:hover .premium-restriction-button-content{
    background: var(--color-input-bg);
    border-radius: 10px;
  }
  .premium-restriction-button:hover .premium-restriction-button-arrow{
    color: var(--color-text-primary);
    transform: translateX(2px);
  }
  .feature-item.active:hover{
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    transform: translateY(-1px);
  }
  .feature-item.disabled:hover{
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
  }
}
@media (hover:none){
  .premium-restriction-button:hover{ transform: none; }
  .premium-restriction-button:hover .premium-restriction-button-content{ background: transparent; }
  .premium-restriction-button:hover .premium-restriction-button-arrow{ color: var(--color-text-secondary); transform: none; }
}

/* High contrast */
@media (prefers-contrast: high){
  :root{
    --color-text-secondary:#ffffff;
    --color-border-primary: rgba(255,255,255,0.4);
    --color-nav-text:#ffffff;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
  .pricing-card, .pricing-grid-card, .card, .review-card, .video-card{ transition: none; }
  .premium-spinner-icon{ animation: none; }
}

/* Device-size tweaks from original */
@media (max-width:768px) and (max-height:1024px){
  .space-section:before{ animation-duration:120s; opacity:.5; }
  .nav-container{ backdrop-filter: none; background-color: rgba(0,0,4,0.95); }
  .loader__spinner{ animation-duration:1.5s; }
}

/* -------------------------------
   Layout helpers
---------------------------------*/
@media (min-width:1024px){
  .cards-container{
    display:grid; gap:2rem; grid-template-columns: repeat(3,1fr);
    margin:0 auto; max-width:1200px; padding:2rem;
  }
  .card{ min-height:280px; display:flex; flex-direction:column; height:100%; }
  .card .inner{ display:flex; flex-direction:column; height:100%; padding:1.5rem; text-align:center; }
  .card .card-icon{ flex-shrink:0; font-size:2.5rem; margin-bottom:1rem; }
  .card h2{
    align-items:center; display:flex; flex-shrink:0;
    font-size:1.25rem; font-weight:600; justify-content:center; line-height:1.3;
    margin:0 0 1rem; min-height:3.25rem;
  }
  .card p{
    align-items:flex-start; display:flex; flex-grow:1;
    font-size:.95rem; line-height:1.5; margin:0; text-align:center;
  }
}

/* Optional: show emoji button on wider viewports only */
@media (min-width:768px){ .chat-emoji{ display:flex; } }
@media (max-width:767.98px){ .chat-emoji{ display:none; } }


/* -------------------------------
   Spinners/Loaders (paused by default)
---------------------------------*/
.premium-loading-spinner,
.premium-spinner-ring,
.premium-spinner-icon{
  animation-play-state: paused;
}
.is-animating .premium-loading-spinner,
.is-animating .premium-spinner-ring{
  animation: rotate360 1s linear infinite;
}
/* Example inner icon if needed */
.is-animating .premium-spinner-icon{ animation: rotate360 1s linear infinite; }



/* ================================
   Premium Gate — Overlay minimal & perf
   ================================ */
:root{
  --pg-scrim: rgba(0,0,0,.82);
  --pg-accent-1: #9b35ff;
  --pg-accent-2: #7c2ae8;
  --pg-text: #fff;
  --pg-text-muted:#cfcfd5;

  /* Rythme & tailles responsives - AMÉLIORÉS */
  --pg-gap: clamp(16px, 3vw, 24px);  /* Plus d'espace entre éléments */
  --pg-pad: clamp(20px, 4vw, 32px);  /* Plus de padding */
  --pg-radius: 16px;
  --pg-btn-radius: 12px;
  --pg-title-size: clamp(18px, 2.8vw, 24px);  /* Titre plus grand */
  --pg-sub-size: clamp(14px, 2vw, 16px);      /* Sous-titre plus lisible */
  /* --pg-icon-size supprimé car plus utilisé */
}

/* Tout conteneur premium doit positionner l'overlay */
:is([data-premium-gate], [data-premium-state]){
  position: relative;
  contain: paint;
}

/* Clip seulement quand c’est verrouillé (utile pour le player) */
[data-premium-gate]:not([data-premium-state="unlocked"]){ overflow: hidden; }
.livestream-player{ overflow: hidden; }

/* Skeleton CSS (scrim + message) tant que l'état n'est pas "unlocked"
   - Couvre à la fois le mode annoté (data-premium-gate) et le fallback (data-premium-state="locked") */
:is([data-premium-gate]:not([data-premium-state="unlocked"]), [data-premium-state="locked"])::before{
  content:"";
  position:absolute; inset:0;
  background: var(--pg-scrim, rgba(0,0,0,.82));
  z-index:1000;
}
@supports (backdrop-filter: blur(6px)){
  :is([data-premium-gate]:not([data-premium-state="unlocked"]), [data-premium-state="locked"])::before{
    backdrop-filter: blur(6px) saturate(120%);
  }
}
:is([data-premium-gate]:not([data-premium-state="unlocked"]), [data-premium-state="locked"])::after{
  content:"Premium — vérification…";
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:var(--pg-text);
  font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  z-index:1001; pointer-events:none; text-align:center; padding:8px;
}

/* Overlay JS enrichi (plein cadre) */
.pg-overlay{
  position:absolute; inset:0; z-index:1010;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  pointer-events:none;        /* on laisse cliquer uniquement la carte */
  border-radius:inherit;
}

/* Masquer le skeleton quand l’overlay JS est présent (si :has est supporté) */
@supports selector(:has(*)) {
  [data-premium-gate]:has(> .pg-overlay)::before,
  [data-premium-gate]:has(> .pg-overlay)::after{ display:none !important; }
}
/* Fallback si tu poses data-pg-overlayed en JS */
[data-pg-overlayed]::before,
[data-pg-overlayed]::after{ display:none !important; }

/* Dédoublonnage visuel si un gate est imbriqué */
[data-premium-gate] [data-premium-gate] > .pg-overlay{ display:none !important; }

/* "Carte" minimale avec meilleur espacement */
.pg-card{
  pointer-events:auto;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: var(--pg-radius);
  padding: var(--pg-pad);
  width: min(520px, 92%);
  display:grid; 
  gap: var(--pg-gap); 
  justify-items:center;
  text-align:center;
  /* Amélioration de l'espacement vertical */
  grid-template-rows: auto 1fr auto;
  min-height: 200px;
}


/* Titres & sous-titres avec espacement optimisé */
.pg-title{
  color: var(--pg-text);
  font-weight: 700;
  font-size: var(--pg-title-size);
  letter-spacing:.2px;
  margin-bottom: clamp(4px, 1vw, 8px);
}
.pg-subtitle{
  color: var(--pg-text-muted);
  font-size: var(--pg-sub-size);
  max-width: 44ch;
  line-height: 1.4;
}

/* Bouton avec meilleur espacement */
.pg-button{
  --ring: color-mix(in oklab, var(--pg-accent-1) 50%, white 0%);
  background: linear-gradient(135deg, var(--pg-accent-1) 0%, var(--pg-accent-2) 100%);
  color:#fff;
  border:0;
  border-radius: var(--pg-btn-radius);
  padding: clamp(12px, 2.5vw, 16px) clamp(20px, 5vw, 28px);  /* Plus de padding */
  cursor:pointer;
  font-weight: 800;
  letter-spacing:.2px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  will-change: transform;
  outline: none;
}
.pg-button:hover{ transform: translateY(-1px); }
.pg-button:active{ transform: translateY(0); opacity:.95; }
.pg-button:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 0 6px color-mix(in oklab, var(--pg-accent-1) 60%, transparent);
}

/* Label bouton (optionnel) */
.pg-cta-title{ font-size: clamp(14px, 2vw, 15px); }
.pg-cta-sub{
  display:block; margin-top:2px;
  font-size: clamp(11px, 1.6vw, 12px);
  opacity:.9; font-weight:600;
}

/* Unlocked: on coupe skeleton + overlay */
[data-premium-state="unlocked"]::before,
[data-premium-state="unlocked"]::after{ display:none !important; }
[data-premium-state="unlocked"] > .pg-overlay{
  display:none !important;
  pointer-events:none !important;
}

/* Locked: s'assurer que l'overlay JS s'affiche si présent */
[data-premium-state="locked"] > .pg-overlay{ display:flex; }

/* Mobile micro-ajustements */
@media (max-width: 480px){
  .pg-card{ width: 94%; }
}

/* A11y/Compat z-index */
.livestream-status{ position:relative; z-index:5; }

/* Motion-reduction */
@media (prefers-reduced-motion: reduce){
  .pg-button{ transition: none; }
}

/* Ajuster l'espacement sans les icônes */
.pg-card {
  gap: clamp(20px, 4vw, 32px);
  padding: clamp(24px, 5vw, 40px);
}
/* Styles de base pour module-video-item */
.module-video-item {
    align-items: center;
    border: 1px solid transparent !important;
    border-radius: .75rem;
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: transparent;
    transition: all 0.2s ease;
    /* Propriétés pour éviter le débordement */
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.module-video-item:hover {
    background: var(--color-white-alpha-10);
    border-color: transparent !important;
}

.module-video-item.active {
    background: var(--color-white-alpha-15);
    border-color: var(--color-white-alpha-20) !important;
}

/* Styles pour les éléments internes */
.item-thumbnail {
    background: rgba(0,0,0,.3);
    border-radius: var(--spacing-sm);
    flex-shrink: 0;
    height: 45px;
    overflow: hidden;
    position: relative;
    width: 80px;
    min-width: 60px;
}

.item-info {
    flex: 1;
    min-width: 0; /* Crucial pour permettre le text-overflow */
    overflow: hidden; /* Empêcher le débordement du texte */
}

/* Media queries responsives */
@media (max-width: 1024px) {
    .module-videos-list {
        width: 100% !important;
        margin-bottom: var(--spacing-xl);
        padding: var(--spacing-md);
    }
    
    .player-content {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .module-video-item {
        padding: .75rem;
        gap: .75rem;
    }
}

@media (max-width: 768px) {
    .module-video-item {
        padding: .5rem;
        gap: .5rem;
    }
    
    .item-thumbnail {
        height: 34px;
        width: 60px;
        min-width: 50px;
    }
    
    .item-info h4 {
        font-size: .85rem;
        line-height: 1.2;
    }
    
    .item-info p {
        font-size: .75rem;
    }
}

@media (max-width: 480px) {
    .module-video-item {
        gap: .5rem;
        padding: .5rem;
    }
    
    .item-thumbnail {
        height: 40px;
        width: 70px;
        min-width: 60px;
    }
}
/* fullmode-anim.css */
:root {
  --fm-dur: 220ms;
  --fm-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Optionnel : petit fondu du header bottom quand on passe en full */
.bottom-header.fullmode-entering {
  transition: opacity var(--fm-dur) var(--fm-ease);
  will-change: opacity;
  opacity: .98;
}

.bottom-header.fullmode-entered {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fm-dur: 1ms;
  }
}

.current-plan-badge {
  pointer-events: none;
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.inview .slider-content,
.inview .reviews-section::before,
.inview .reviews-section::after {
  animation-play-state: running;
}

/* Réactiver un léger blur UNIQUEMENT si hover + pas PRM/PRD */
@media (hover: hover) and (prefers-reduced-motion: no-preference) and (prefers-reduced-data: no-preference) {
  .auth-blur-content {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* ===== NAV mobile/tablette : panneau collé/arrondi ===== */
@layer layout {
  @media (max-width: 1024px) {
    /* Le conteneur garde son arrondi haut et laisse dépasser le panneau */
    .nav-container {
      position: relative;
      /* sur mobile tu mettais overflow:hidden ; on ouvre seulement quand actif */
      overflow: hidden;
    }
    
    .nav-container.menu-active {
      overflow: visible; /* important pour laisser sortir le panneau */
      box-shadow: var(--nav-shadow-active);
      border-bottom-left-radius: 0; /* continuité visuelle */
      border-bottom-right-radius: 0;
      border-bottom: 0; /* pas de ligne de séparation */
    }

    /* Panneau d'ouverture ancré au bas de la navbar (plus de fixed) */
    .nav-container .nav-content {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%; /* collé sous la nav */
      margin: 0;
      padding: var(--nav-padding); /* même écartement que la nav */
      background: var(--color-nav-bg);
      border: 1px solid var(--color-border-primary);
      border-top: 0; /* pas de "joint" horizontal */
      border-radius: 0 0 var(--nav-border-radius) var(--nav-border-radius);
      box-shadow: var(--nav-shadow-active);

      /* comportement & animation */
      transform-origin: top center;
      transform: scaleY(0);
      opacity: 0;
      visibility: hidden;

      /* scroll propre si long */
      max-height: min(75vh, calc(100dvh - var(--size-header-height) - 16px));
      overflow: auto;
      overscroll-behavior: contain;

      /* s'affiche au-dessus du contenu, sous le header fixe */
      z-index: 1005;
    }

    /* État ouvert (utilise déjà ta classe .active) */
    .nav-container .nav-content.active {
      overflow: visible !important;
      transform: scaleY(1);
      opacity: 1;
      visibility: visible;
    }

    /* Le header reste au-dessus, sans clipper le panneau */
    .nav-container .header-fixed {
      position: relative;
      z-index: 1006;
      border-radius: inherit; /* Hérite des arrondis du parent */
    }
  }
}

/* (optionnel) fond d'assombrissement quand le menu est ouvert */
.darkness-overlay {
  transition: opacity var(--t-300) var(--ease);
}

body.menu-open .darkness-overlay {
  opacity: .5;
  z-index: 100;
}