/* ========== BASE ========== */
:root{
  --bg1: #081223;
  --bg2: #071028;
  --accent: #6ff3ff;
  --accent-2:#3fdcff;
  --glass: rgba(20,26,40,0.55);
  --glass-strong: rgba(10,15,25,0.75);
  --text: #d9faff;
  --muted:#9bdcff;
  --gold: rgba(255,200,50,0.95);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"Segoe UI", Roboto, Arial, sans-serif;color:var(--text);background:
  radial-gradient(circle at 20% 10%, #08122a 0%, #060819 45%, #03040a 100%);overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;display:block}


/* ========== LOADER HOLOGRAPHIQUE ========== */
#loader {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(4,8,14,0.95), rgba(2,3,6,0.95));
  z-index:99999; backdrop-filter: blur(6px);
}
.loader-inner{
  width:160px;height:160px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(10,18,30,0.6), rgba(20,30,45,0.5));
  box-shadow:0 0 40px rgba(111,243,255,0.08), 0 10px 40px rgba(0,0,0,0.6);
  border:1px solid rgba(111,243,255,0.08);
  position:relative; overflow:hidden;
}
.loader-ring{
  position:absolute;width:120px;height:120px;border-radius:50%;
  border:3px dashed rgba(63,220,255,0.08); box-shadow:0 0 36px rgba(63,220,255,0.06) inset;
  animation:spin 2.6s linear infinite;
}
.loader-gem{
  width:54px;height:54px;border-radius:8px;background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 0 28px #3fdcff66, 0 8px 28px rgba(0,0,0,0.6); transform:translateY(-6px);
  animation:gemPulse 1.7s ease-in-out infinite;
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes gemPulse{0%{transform:translateY(-6px) scale(1)}50%{transform:translateY(-12px) scale(1.06)}100%{transform:translateY(-6px) scale(1)}}


/* ========== PAGE LAYOUT ========== */
.container{
  max-width:1200px;
  margin:48px auto;
  padding:clamp(12px, 4vw, 28px);
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,380px);
  gap:24px;
  width:100%;
}

.header{
  grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:14px;
}
.logo{
  width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 24px rgba(63,220,255,0.12); display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#00151c; font-size:18px;
}
.title{
  font-size:1.6rem; font-weight:800; letter-spacing:2px; color:var(--accent);
  text-shadow:0 0 14px rgba(111,243,255,0.18);
}
.nav{
  display:flex; gap:12px; align-items:center;
}
.nav a{
  padding:10px 16px; border-radius:999px; font-weight:700; font-size:.9rem;
  background:transparent; border:1px solid rgba(111,243,255,0.06);
  transition:all .18s;
}
.nav a:hover{ transform:translateY(-4px); box-shadow:0 8px 22px rgba(63,220,255,0.06); background:rgba(111,243,255,0.03) }




/* ========== HERO ========== */
.hero{
  min-height: 420px;   /* ← donne de la présence */
  display:flex;
  align-items:center;

  background: linear-gradient(180deg, rgba(8,12,20,0.55), rgba(6,8,12,0.45));
  border-radius:18px;
  padding:26px;
  position:relative;
  overflow:hidden;

  box-shadow:0 14px 40px rgba(0,0,0,0.6), 0 0 40px rgba(63,220,255,0.03);
  border:1px solid rgba(111,243,255,0.04);
}


.hero .scanlines{
  position:absolute; inset:0; background-image:linear-gradient(transparent 94%, rgba(255,255,255,0.02) 96%);
  background-size: 100% 8px; pointer-events:none; mix-blend-mode:overlay; opacity:0.55;
}
.hero-grid{  display:grid;  grid-template-columns: 1fr;  gap:28px; } 

/* MOBILE */
@media (max-width: 900px){
  .hero-grid{
    grid-template-columns: 1fr;
  }
}
.hero h2{
  margin:0;
  font-size:3.1rem;
  line-height:1.15;
  letter-spacing:2px;
  max-width:900px;
  color:var(--accent);

  text-shadow:
    0 0 20px rgba(63,220,255,0.35),
    0 0 40px rgba(63,220,255,0.15);
}

.hero p.lead{ margin-top:8px; color:var(--muted); line-height:1.45; font-size:1.05rem; max-width:900px; }
.hero .cta{ margin-top:18px; display:flex; gap:12px; align-items:center }
.btn{
  background: linear-gradient(135deg,#6ff3ff,#2ec1d0);
  color:#00151c; padding:12px 20px; border-radius:999px; font-weight:800; border:none; cursor:pointer;
  box-shadow:0 8px 28px rgba(46,193,208,0.12);
}
.btn.secondary{ background:transparent; color:var(--accent); border:1px solid rgba(111,243,255,0.08) }

/* HERO SIDEBAR (cartes) */


.card:hover{ transform:translateY(-8px); box-shadow:0 18px 48px rgba(63,220,255,0.06) }
.card h4{ margin:0; color:var(--accent); font-size:1rem }
.card p{ margin:6px 0 0; color:var(--muted); font-size:.9rem word-break: break-word;
  white-space: normal;
  }




/* ========== SLIDER ========== */
.slider{
    margin-top:18px;
  position:relative;
  overflow-x:hidden; /* ✅ seulement horizontal */
  overflow-y:visible; /* ✅ */
  border-radius:12px;
  background: linear-gradient(180deg, rgba(5,8,12,0.45), rgba(10,14,20,0.25)); padding:12px;
  border:1px solid rgba(111,243,255,0.03);
}
.slides{ display:flex; gap:12px; transition: transform .55s cubic-bezier(.2,.9,.2,1) }

.slider-controls{ margin-top:12px; display:flex; gap:10px }




/* ========== SIDEBAR (droite) ========== */
.side-panel{
  background:var(--glass); border-radius:14px; padding:18px; height:fit-content; position:sticky; top:28px;
  max-height: calc(100vh - 40px); /* limite pour que ça ne dépasse pas l'écran */
  overflow-y: auto;               /* scroll interne si le contenu est trop long */
  backdrop-filter: blur(8px); border:1px solid rgba(111,243,255,0.03)
}
.side-panel h3{ margin:0 0 10px 0; color:var(--accent) }
.side-panel .mini {
  display:flex; gap:10px; align-items:center; margin-bottom:10px
}
.mini .dot{ width:12px;height:12px;border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(255,200,50,0.3) }




/* ========== PARTICULES & CURSEUR ========== */
#particleCanvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }
#customCursor{
  position:fixed; top:0; left:0; width:56px; height:56px; pointer-events:none; z-index:99998;
  background:url('assets/embleme.png') center center no-repeat; background-size:contain; transform:translate(-50%,-50%);
  transition: width .18s, height .18s, transform .12s; animation:cursorPulse 2s infinite ease-in-out;
}
@keyframes cursorPulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1)}}

/* gem particle (halo) */
.gemParticle{ position:fixed; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(111,243,255,0.9); pointer-events:none; z-index:99997 }

/* trail dot style fallback for non-canvas - kept minimal */
.trail-dot{ position:fixed; width:6px;height:6px;border-radius:50%; background:var(--accent); pointer-events:none; z-index:99996 }


/* ========== BLOC SEO HOME ========== */
.seo-home{
  grid-column: 1 / -1;
  max-width: 1100px;
  margin: 40px auto 10px;
  padding: 26px;
  border-radius: 18px;
  background: rgba(10,20,35,0.55);
  border: 1px solid rgba(111,243,255,0.12);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  color: var(--muted);
  line-height: 1.7;
}

.seo-home h2{
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 1.5rem;
}

.seo-home p{
  margin: 0;
  font-size: 1rem;
}

/* ========== FOOTER ========== */
.footer{ grid-column:1/-1; margin-top:24px; text-align:center; color:var(--muted); opacity:0.9 }
.footer-links{
  grid-column:1/-1; text-align:center; padding:10px 0 18px;
  font-size:0.8em;
}
.footer-links a{
  color:rgba(111,243,255,0.55); text-decoration:none; margin:0 10px;
  transition:color .18s;
}
.footer-links a:hover{ color:var(--accent); text-decoration:underline; }




/* ========== RESPONSIVE ========== */
@media (max-width:900px){
  .container{ grid-template-columns: 1fr; padding:18px }
  .hero-grid{ grid-template-columns: 1fr; }
  .side-panel{ position:relative; top:auto; max-height:none; overflow:visible; width:100%; }
}


.hero,
.cards,
.card,
.slider,
.slide {
  max-width:100%;
  overflow-x:hidden;
}


/* ========== NIGHT MODE (toggle via body.night) ========== */
body.night{
  background: radial-gradient(circle at 30% 20%, #050416 0%, #14031a 45%, #020212 100%);
}
body.night .logo{ background:linear-gradient(135deg,#8ff5ff,#6ff3ff) }
body.night .hero{ box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(63,220,255,0.06) }

/* small helper */
.kv { font-weight:700; color:var(--muted); font-size:.9rem }


/* Définir une largeur fixe ou min/max pour les cards */
.cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  width: 100%;       /* s'étend sur toute la colonne */
  max-width: none;  /* laisse s'étendre */
}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius: 12px;
  padding: 18px;      /* un peu plus de padding pour homogénéité */
  border: 1px solid rgba(111,243,255,0.04);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* permet d'étirer le contenu de manière homogène */
}

@media (max-width:1000px){
  .cards { max-width: 100%; }
  .card { min-height: auto; }
}



/* AFIICHER IMAGE DE FOND */
.slide {
  min-width: 100%;
  width: 100%;
  border-radius: 10px;
  padding: 26px;
  background: linear-gradient(180deg, rgba(10,15,25,0.55), rgba(6,9,14,0.35));
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
  color: #fff;
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease-in-out;
}

.slide::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35); /* overlay pour texte lisible */
  pointer-events:none;
  border-radius: 10px;
}


/* Right card */
.right-card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word;  /* force retour à la ligne sur les mots longs */
}


/* ==========================================================
   📱 MOBILE FIRST — OPTIMISATION TÉLÉPHONE
   ========================================================== */

  /* === BASE === */
  body {
    font-size: 16px;
  }


  /* === HEADER === */
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .nav {
    flex-wrap: wrap;
    gap: 8px;
  }

  .nav a {
    padding: 10px 14px;
    font-size: 0.85rem;
  }

  /* === HERO === */
@media (max-width: 768px) {
  .hero {
    padding: 20px 16px;
    min-height: 300px;
    overflow: hidden;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hero h2,
  .hero h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: 1px;
  }

  .hero p,
  .hero .lead {
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 100%;
  }

  .hero .cta {
    flex-direction: column;
    gap: 10px;
  }

  .hero .btn {
    width: 100%;
    min-height: 48px;
  }
}


  /* === CARDS HERO === */


  /* === SLIDER === */
  .slide {
    padding: 18px;
  }


  /* === FOOTER === */
  .footer {
    font-size: 0.85rem;
    padding-bottom: 12px;
  }

  /* === DÉSACTIVER CE QUI NE SERT PAS SUR MOBILE === */
  #customCursor,
  .gemParticle,
  .trail-dot {
    display: none !important;
  }
}


/* ==========================================================
   📱 TRÈS PETITS ÉCRANS (iPhone SE, vieux Android)
   ========================================================== */

@media (max-width: 420px) {

  .hero h2 {
    font-size: 1.4rem;
  }

  .title {
    font-size: 1.2rem;
  }

  .logo {
    width: 52px;
    height: 52px;
    font-size: 16px;
  }

  .nav a {
    font-size: 0.8rem;
    padding: 8px 12px;
  }
}

/* Renforcer la profondeur du fond */
html, body {
  background:
    radial-gradient(circle at 20% 10%, #0b1633 0%, #050814 50%, #02030a 100%);
}

.hero{
  background:
    linear-gradient(
      90deg,
      rgba(5,10,20,0.92) 0%,
      rgba(5,10,20,0.85) 40%,
      rgba(5,10,20,0.4) 70%,
      rgba(5,10,20,0.1) 100%
    ),
    url("images/visuel-mois/slide1.png");

  background-size: cover;
  background-position: center right;

  border-radius:18px;
  padding:26px;
  position:relative;
  overflow:visible;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.85),
    0 0 60px rgba(63,220,255,0.08);

  border:1px solid rgba(111,243,255,0.18);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 75% 50%,
      rgba(63,220,255,0.11),
      transparent 60%
    );

  pointer-events:none;
}

.card {
  background:
    linear-gradient(
      180deg,
      rgba(20, 35, 60, 0.9),
      rgba(10, 18, 32, 0.9)
    );
  border: 1px solid rgba(111,243,255,0.22);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.75),
    inset 0 0 18px rgba(63,220,255,0.05);
}

.card:hover {
  box-shadow:
    0 24px 70px rgba(0,0,0,0.85),
    0 0 24px rgba(63,220,255,0.15);
}

.side-panel {
  background:
    linear-gradient(
      180deg,
      rgba(22, 36, 60, 0.85),
      rgba(10, 18, 32, 0.9)
    );
  border: 1px solid rgba(111,243,255,0.2);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.8),
    inset 0 0 24px rgba(63,220,255,0.05);
}


.hero::before,
.side-panel::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.hero-quote{
  margin-top:18px;
  opacity:0;
  font-style:italic;
  color:#6ff3ff;
text-shadow:0 0 18px rgba(111,243,255,0.45);
  letter-spacing:1px;
  filter: blur(6px);

  animation: fadeInQuote 2.2s ease forwards;
  animation-delay: 0.6s;
}

@keyframes fadeInQuote{
  from{
    opacity:0;
    transform:translateY(14px);
	filter:blur(6px);
  }
  to{
    opacity:.85;
    transform:translateY(0);
	filter:blur(0);
  }
}


/* Animation pulse quand la musique joue */
@keyframes musicPulse {
  0% { transform: scale(1); box-shadow: 0 0 8px var(--accent); }
  50% { transform: scale(1.15); box-shadow: 0 0 24px var(--accent-2); }
  100% { transform: scale(1); box-shadow: 0 0 8px var(--accent); }
}

#musicBtn.playing {
  animation: musicPulse 1s infinite ease-in-out;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #00151c;
}


/* ==================== MODE NUIT RENFORCÉ ==================== */
body.night {
  background: radial-gradient(circle at 30% 20%, #010113 0%, #05021a 50%, #000005 100%);
  color: #9bdcff; /* texte principal plus clair sur fond sombre */
}

/* Logo */
body.night .logo {
  background: linear-gradient(135deg, #3fdcff, #0d6b8f);
  color: #e0faff;
  box-shadow: 0 6px 24px rgba(0,150,200,0.2);
}

/* Hero */
body.night .hero {
  background: linear-gradient(180deg, rgba(0,0,10,0.95), rgba(5,5,15,0.85));
  border: 1px solid rgba(63,220,255,0.1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.95), 0 0 60px rgba(0,200,255,0.08);
}

/* Cards (sidebar) */
body.night .card {
  background: linear-gradient(180deg, rgba(10,15,25,0.95), rgba(5,5,15,0.95));
  border: 1px solid rgba(63,220,255,0.1);
  box-shadow: 0 14px 40px rgba(0,0,0,0.85), inset 0 0 18px rgba(0,150,200,0.05);
}

/* Boutons */
body.night .btn {
  background: linear-gradient(135deg, #0d6b8f, #3fdcff);
  color: #00151c;
  box-shadow: 0 8px 28px rgba(0,150,200,0.2);
}
body.night .btn.secondary {
  background: transparent;
  color: #3fdcff;
  border: 1px solid rgba(63,220,255,0.3);
}

/* Texte et labels */
body.night .kv,
body.night .lead,
body.night p {
  color: rgba(157,220,255,0.9);
}

/* Slider overlay */
body.night .slide::before {
  background: rgba(0,0,10,0.6);
}

/* Footer */
body.night .footer {
  color: rgba(157,220,255,0.7);
}

/* Hero scanlines plus visibles en nuit */
body.night .hero .scanlines {
  opacity: 0.75;
}

/* Empêche le hero et les boutons d’être écrasés par la barre basse. */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
}


/* ==================== Boutons du hero plus compacts ==================== */

@media (max-width: 768px) {
  .hero .btn,
  .hero button {
    padding: 12px 16px;
    font-size: 0.95rem;
    border-radius: 999px;
  }

  .hero .btn + .btn {
    margin-top: 10px;
  }
}


/* ==================== Sidebar mobile : hauteur verrouillée (sécurité) ==================== */

@media (max-width: 768px) {
  .nav-left {
    height: 72px;
    max-height: 72px;
  }
}


@media (max-width: 768px){
  .container{
    padding: 12px;
  }

  .hero{
    padding: 16px;
  }
}

@media (max-width: 900px){
  .container{
    grid-template-columns: 1fr;
    gap:16px;
  }
}


html,body{
  height:100%;
  margin:0;
  width:100%;
  overflow-x:hidden;
}
* { min-width: 0; }


/* 🎵 Bouton Play plus compact */
#musicBtn {
  padding: 10px 18px;      /* taille réduite */
  font-size: 0.9rem;       /* texte plus petit */
  border-radius: 999px;
  width: auto;             /* empêche le full-width */
  min-width: unset;
  align-self: center;      /* centré dans la card */
}

/* Mobile : encore plus compact */
@media (max-width: 768px) {
  #musicBtn {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
}


#musicBtn {
  padding: 8px 14px;
  font-size: 0.85rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 16px rgba(63,220,255,0.35);
}




.cards{
  margin-top: 20px;
}


.cards{
  margin-top: 24px;
  gap:16px;
}

.card{
  backdrop-filter: blur(12px);
  background: rgba(10,20,35,0.75);
}


.hero{
  animation: heroBreath 8s ease-in-out infinite;
}

@keyframes heroBreath{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.01); }
  100%{ transform:scale(1); }
}



.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    transparent 60%,
    rgba(0,0,0,0.35) 100%
  );
  pointer-events:none;
}

/* mini effet IA au chargement des visuels du mois */
#visuelMoisContainer::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 70%, rgba(0,0,0,0.4));
  pointer-events:none;
}

.ia-boost {
  filter: brightness(1.05) contrast(1.05);
  transition: filter 0.8s ease;
}


/* =========================
   VISUEL DU MOIS — BOUTON SON VIDÉO
   ========================= */

#visuelMoisContainer{
  position: relative;
}

#visuelMoisSoundBtn{
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 5;

  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(111,243,255,0.25);

  background: rgba(5,10,20,0.72);
  color: #6ff3ff;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  backdrop-filter: blur(6px);

  box-shadow:
    0 0 14px rgba(111,243,255,0.12),
    inset 0 0 8px rgba(111,243,255,0.05);

  transition: all 0.2s ease;
}

#visuelMoisSoundBtn:hover{
  transform: scale(1.06);
  box-shadow:
    0 0 18px rgba(111,243,255,0.22),
    inset 0 0 10px rgba(111,243,255,0.08);
}

#visuelMoisSoundBtn.active{
  background: rgba(0,255,255,0.14);
  border-color: rgba(111,243,255,0.45);
  box-shadow:
    0 0 20px rgba(111,243,255,0.24),
    inset 0 0 10px rgba(111,243,255,0.10);
}


/* AMÉLIORATION VISUELLE des boutons de telechargement */
.card a.btn.secondary{
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.card a.btn.secondary:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(63,220,255,0.15);
}


/* =========================
   VISUEL DU MOIS — BOUTON AGRANDIR
   ========================= */

#visuelMoisExpandBtn{
  position: absolute;
  bottom: 10px;
  right: 58px;
  z-index: 5;

  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(111,243,255,0.25);

  background: rgba(5,10,20,0.72);
  color: #6ff3ff;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  backdrop-filter: blur(6px);

  box-shadow:
    0 0 14px rgba(111,243,255,0.12),
    inset 0 0 8px rgba(111,243,255,0.05);

  transition: all 0.2s ease;
}

#visuelMoisExpandBtn:hover{
  transform: scale(1.06);
  box-shadow:
    0 0 18px rgba(111,243,255,0.22),
    inset 0 0 10px rgba(111,243,255,0.08);
}

/* =========================
   VISUEL DU MOIS — OVERLAY
   ========================= */

#visuelMoisOverlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(8px);
}

#visuelMoisOverlay.active{
  display: flex;
}

#visuelMoisOverlayInner{
  position: relative;
  width: min(92vw, 1100px);
  max-height: 88vh;
}

#visuelMoisOverlayMedia{
  width: 100%;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  box-shadow:
    0 0 30px rgba(111,243,255,0.16),
    0 0 80px rgba(0,0,0,0.65);
  background: #000;
}

#visuelMoisOverlayClose{
  position: absolute;
  top: -12px;
  right: -12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(111,243,255,0.25);
  background: rgba(5,10,20,0.88);
  color: #6ff3ff;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 0 16px rgba(111,243,255,0.12);
}


/* =========================
   RESSOURCES RAPIDES — VERSION AÉRÉE
   ========================= */

.resources-card{
  padding: 26px 24px;
}

.resources-card h4{
  margin-bottom: 10px;
}

.resources-intro{
  margin-top: 12px !important;
  margin-bottom: 22px !important;
  line-height: 1.65;
}

.resources-subintro{
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
}

.resources-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 6px;
}

.resource-link{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center !important;
  gap: 8px;
  padding: 18px 20px !important;
  border-radius: 16px;
  text-align: left;
  line-height: 1.5;
}

.resource-title{
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  padding-left: 14px;   /* décale le titre à droite */
}

.resource-desc{
  display: block;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  opacity: 0.95;
  padding-left: 14px;   /* décale le titre à droite */
}

.resource-link:hover{
  background: rgba(0,255,255,0.08);
  border-color: rgba(111,243,255,0.22);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.28),
    0 0 18px rgba(63,220,255,0.10);
}

/* Mobile */
@media (max-width: 768px){
  .resources-card{
    padding: 22px 18px;
  }

  .resources-list{
    gap: 14px;
  }

  .resource-link{
    padding: 16px 16px !important;
  }

  .resource-title{
    font-size: 0.96rem;
  }

  .resource-desc{
    font-size: 0.84rem;
  }
}


@keyframes noctuaFade {
  0% { opacity: 0.15; }
  50% { opacity: 0.35; }
  100% { opacity: 0.15; }
}

body.noctua-secret-mode::after {
  content: attr(data-noctua-label);
  position: fixed;
  bottom: 10px;
  right: 20px;
  font-size: 10px;
  letter-spacing: 2px;
  animation: noctuaFade 4s infinite;
  pointer-events: none;
  z-index: 9999;
}


/* =========================
   AMBIANCE — VERSION AÉRÉE
   ========================= */

.ambiance-card{
  padding: 22px 20px;
}

.ambiance-card h4{
  margin-bottom: 8px;
}

.ambiance-control{
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 14px;
  border-radius: 12px;

  background: rgba(0,255,255,0.04);
  border: 1px solid rgba(111,243,255,0.12);
}

/* Bouton plus propre */
.ambiance-btn{
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* Texte état */
.ambiance-status{
  font-size: 0.9rem;
  color: var(--muted);
  opacity: 0.85;
}

.ambiance-btn.playing{
  box-shadow: 0 0 14px rgba(111,243,255,0.35);
  background: rgba(0,255,255,0.12);
}


.ambiance-btn:hover{
  box-shadow: 0 0 12px rgba(111,243,255,0.3);
}

/* =========================
   COMPTEUR VISITEURS — PULSE
   ========================= */

#onlineCount{
  display: inline-block;
  color: var(--accent);
  font-weight: 800;
  text-shadow: 0 0 8px rgba(111,243,255,0.22);
  animation: onlineCountPulse 2.2s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, text-shadow, opacity;
}

@keyframes onlineCountPulse{
  0%{
    transform: scale(1);
    opacity: 0.95;
    text-shadow:
      0 0 6px rgba(111,243,255,0.16),
      0 0 12px rgba(111,243,255,0.08);
  }

  50%{
    transform: scale(1.12);
    opacity: 1;
    text-shadow:
      0 0 10px rgba(111,243,255,0.38),
      0 0 22px rgba(111,243,255,0.22),
      0 0 34px rgba(111,243,255,0.10);
  }

  100%{
    transform: scale(1);
    opacity: 0.95;
    text-shadow:
      0 0 6px rgba(111,243,255,0.16),
      0 0 12px rgba(111,243,255,0.08);
  }
}

/* petit boost visuel quand le chiffre vient d’être mis à jour */
#onlineCount.count-update{
  animation:
    onlineCountPulse 2.2s ease-in-out infinite,
    onlineCountFlash 0.55s ease;
}


/* pulsation du nombre de visiteurs */
@keyframes onlineCountFlash{
  0%{
    transform: scale(0.88);
    opacity: 0.55;
    filter: blur(1px);
  }

  55%{
    transform: scale(1.24);
    opacity: 1;
    filter: blur(0);
    text-shadow:
      0 0 14px rgba(111,243,255,0.55),
      0 0 30px rgba(111,243,255,0.28),
      0 0 42px rgba(111,243,255,0.16);
  }

  100%{
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* =========================
   PROMO LIVRE (AU-DESSUS DE "À LA UNE")
   ========================= */

.book-promo{
  background:
    linear-gradient(
      180deg,
      rgba(20,35,60,0.9),
      rgba(10,18,32,0.9)
    );
  border: 1px solid rgba(111,243,255,0.22);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 24px;

  box-shadow:
    0 14px 40px rgba(0,0,0,0.75),
    inset 0 0 18px rgba(63,220,255,0.05);

  backdrop-filter: blur(10px);
}

.book-promo h3{
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.book-promo .promo-sub{
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 10px;
}

.book-promo .promo-desc{
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.85;
  margin-bottom: 14px;
  line-height: 1.5;
}

.book-promo .promo-price{
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;

  text-shadow:
    0 0 10px rgba(111,243,255,0.25),
    0 0 20px rgba(111,243,255,0.08);
}

/* bouton intégré à ton design */
.book-promo .cta-buy{
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #00151c;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;

  box-shadow: 0 8px 28px rgba(46,193,208,0.18);
  transition: all 0.2s ease;
}

.book-promo .cta-buy:hover{
  transform: translateY(-3px);
  box-shadow:
    0 14px 40px rgba(46,193,208,0.25),
    0 0 18px rgba(63,220,255,0.15);
}

/* Positionner l'encart promo dans la colonne de droite */
.book-promo{
  grid-column: 2;
}

/* Mobile : remettre en pleine largeur */
@media (max-width: 900px){
  .book-promo{
    grid-column: 1;
  }
}

.book-promo{
  grid-column: 2;
}

.right-rail{
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
}

.right-rail .side-panel{
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
}

@media (max-width: 900px){
  .right-rail{
    grid-column: 1;
  }
}

/* Image livre dans promo */
.promo-img{
  width: 100%;
  max-width: 160px;
  margin: 12px auto 14px;
  display: block;

  border-radius: 10px;

  box-shadow:
    0 12px 30px rgba(0,0,0,0.6),
    0 0 18px rgba(63,220,255,0.15);

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* petit effet premium */
.promo-img:hover{
  transform: scale(1.04);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.75),
    0 0 24px rgba(63,220,255,0.25);
}


/* CONTENEUR IMAGE (cadre premium) */
.promo-img-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 12px 0 18px;

  padding: 10px;
  border-radius: 12px;

  background: rgba(0,255,255,0.03);
  border: 1px solid rgba(111,243,255,0.12);

  box-shadow:
    inset 0 0 12px rgba(63,220,255,0.04),
    0 8px 24px rgba(0,0,0,0.6);
}

/* IMAGE */
.promo-img{
  width: 100%;
  max-width: 140px;   /* 🔥 clé : taille contrôlée */
  height: auto;

  border-radius: 8px;

  box-shadow:
    0 12px 30px rgba(0,0,0,0.8),
    0 0 18px rgba(63,220,255,0.15);

  transition: transform 0.25s ease;
}

/* HOVER */
.promo-img:hover{
  transform: scale(1.05);
}


.promo-badge{
  position:absolute;
  top:8px;
  left:8px;
  background:#00e0ff;
  color:#000;
  font-size:0.7rem;
  padding:4px 8px;
  border-radius:6px;
  font-weight:700;
}
.promo-img-wrapper{ position:relative; }