:root{
  --kyool-blue:#24C7EB;
  --kyool-orange:#F39800;
  --kyool-green:#25CE62;

  --bg-top:#000000;
  --bg-bottom:#081a33;

  --text:#ffffff;
  --muted:rgba(255,255,255,.78);

  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --shadow:0 18px 50px rgba(0,0,0,.45);

  --radius:22px;
  --radius2:16px;

  --max:1760px;
  --pad:14px;

  --topbarH:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(900px 520px at 78% 10%, rgba(36,199,235,.25), rgba(0,0,0,0) 60%),
    linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
}

a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.55);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  height: var(--topbarH);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;

  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.brand{
  display:flex; 
  align-items:center; 
  gap:12px;
  min-width:210px;
  transition: opacity 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.brand:hover{
  opacity: 0.85;
  transform: translateY(-1px);
}

.brand:active{
  transform: translateY(0);
}
.brand img{
  height:34px; width:auto; display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.brand-text{display:flex; flex-direction:column; line-height:1.05; gap:6px;}
.logo-fallback{font-weight:900; letter-spacing:.4px; font-size:20px;}
.slogan{font-size:16px; color:var(--muted); font-weight:600;}

nav{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}
nav a{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--muted);
  transition:.18s ease;
  font-size:14px;
}
nav a:hover{
  color:#000;
  background:var(--kyool-blue);
  border-color:rgba(255,255,255,.15);
}

/* Lien de la page active - AVEC GLOW INTENSE */
nav a[aria-current="page"]{
  background: rgba(36,199,235,.12);
  color: var(--kyool-blue);
  border: 2px solid var(--kyool-blue);
  font-weight: 600;
  box-shadow: 
    0 0 15px rgba(36,199,235,.4),
    inset 0 0 10px rgba(36,199,235,.15);
}
section{padding: 46px 0 56px;}

.title{
  font-size: clamp(38px, 4.2vw, 64px);
  margin:0 0 12px;
  letter-spacing:-.9px;
  line-height:1.05;
}
.title .coree{color:var(--kyool-blue)}
.subtitle{
  margin:0 0 22px;
  color:var(--muted);
  font-size:16.5px;
  line-height:1.5;
  max-width:60ch;
}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-weight:900;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  transition:.18s ease;
  min-width:210px;
}
.btn:hover{background:var(--kyool-blue); color:#000}
.btn.secondary{
  background:transparent; color:#fff;
  border:1px solid var(--border);
  box-shadow:none;
  min-width:190px;
}
.btn.secondary:hover{background:rgba(36,199,235,.18); border-color:rgba(36,199,235,.45)}

.home-grid{
  display:grid;
  grid-template-columns: 1.05fr 1.55fr;
  gap:36px;
  align-items:center;
  min-height: calc(100vh - var(--topbarH) - 70px);
}

.showcase{
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.showcase:before,
.showcase:after{
  content:"";
  position:absolute;
  border-radius: var(--radius);
  border:1px solid rgba(36,199,235,.22);
  background: rgba(0,0,0,.12);
  transform: rotate(-4deg);
  opacity:.55;
  pointer-events:none;
}
.showcase:before{width:88%; height:84%; right:-18px; top:10px;}
.showcase:after{width:84%; height:78%; right:18px; top:34px; transform: rotate(-8deg); opacity:.35;}

.device-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  align-items:stretch;
  z-index:1;
}
.frame{
  border-radius: var(--radius2);
  border: 1px solid rgba(36,199,235,.55);
  box-shadow: 0 0 0 1px rgba(36,199,235,.18), 0 14px 40px rgba(0,0,0,.55);
  background: rgba(0,0,0,.38);
  overflow:hidden;
  position:relative;
}
.phone{
  aspect-ratio: 9/16;
  min-height: 590px;
  transform: rotate(-2.5deg) translateY(-4px);
  transform-origin: 50% 60%;
  transition: transform .25s ease;
}
.phone:hover{transform: rotate(-1deg) translateY(-8px);}

.right-col{display:flex; flex-direction:column; gap:14px;}
.tablet{aspect-ratio: 16/10; min-height:220px; transform: rotate(1.2deg);}
.square{aspect-ratio: 1/1; min-height:220px; transform: rotate(-.8deg);}

.frame video,.frame img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  background:#000;
}
.tablet video,.tablet img{object-fit: contain;}

.below-text{
  margin-top: 110px;
  display: grid;
  gap: 14px;
  max-width: 640px;
  position: relative;
}

.mascot-row{
  display:flex; gap:12px; align-items:center;
  padding:12px 14px; border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.mascot-avatar{
  width:56px; height:56px; border-radius:16px;
  overflow:hidden; border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  flex:0 0 auto;
}
.mascot-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.mascot-text{color: rgba(255,255,255,.92); font-size:14.5px; line-height:1.35;}

.qr-title{font-weight:900; margin-right:auto; font-size:13.5px;}
.qr{
  width:84px; height:84px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  overflow:hidden;
}
.qr img{width:100%; height:100%; object-fit:cover; display:block;}
.qr-note{width:100%; color: rgba(255,255,255,.75); font-size:12.8px;}

.home-foot{
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:space-between; gap:10px;
  color: rgba(255,255,255,.68);
  font-size:13px;
  flex-wrap:wrap;
}
/* ====================================================
   CORRECTION RESPONSIVE PROGRESSIVE 1025px-1307px
   Réduction graduelle pour éviter chevauchement et scroll bloqué
   À AJOUTER DANS styles.css AVANT @media (min-width: 770px) and (max-width: 1024px)
   ==================================================== */

/* Zone 1201px - 1307px : Réduire un peu pour éviter chevauchement */
@media (min-width: 1201px) and (max-width: 1307px) {
  
  /* Réduire légèrement les blocs */
  .phone {
    min-height: 540px !important;  /* Au lieu de 590px */
  }
  
  .tablet,
  .square {
    min-height: 200px !important;  /* Au lieu de 220px */
  }
  
  /* Réduire le gap pour gagner de l'espace */
  .device-grid {
    gap: 12px !important;
  }
  
  /* Réduire le showcase */
  .showcase {
    max-width: 780px !important;
  }
  
  /* S'assurer que le scroll fonctionne */
  .home-grid {
    min-height: auto !important;
    padding-bottom: 40px;
  }
}

/* Zone 1101px - 1200px : Réduire plus pour préparer passage 1 colonne */
@media (min-width: 1101px) and (max-width: 1200px) {
  
  /* Réduire encore plus */
  .phone {
    min-height: 500px !important;  /* Au lieu de 540px */
  }
  
  .tablet,
  .square {
    min-height: 185px !important;  /* Au lieu de 200px */
  }
  
  /* Compacter */
  .device-grid {
    gap: 11px !important;
  }
  
  .showcase {
    max-width: 750px !important;
  }
  
  /* Réduire l'espacement en haut */
  .top-content {
    margin-top: 140px !important;
    margin-bottom: 50px !important;
  }
  
  /* S'assurer que le scroll fonctionne */
  .home-grid {
    min-height: auto !important;
    padding-bottom: 40px;
  }
}

/* Zone 1025px - 1100px : Encore plus compact avant 1 colonne */
@media (min-width: 1025px) and (max-width: 1100px) {
  
  /* Très compact */
  .phone {
    min-height: 460px !important;  /* Au lieu de 500px */
  }
  
  .tablet,
  .square {
    min-height: 175px !important;  /* Au lieu de 185px */
  }
  
  /* Très compacté */
  .device-grid {
    gap: 10px !important;
  }
  
  .showcase {
    max-width: 720px !important;
  }
  
  /* Encore moins d'espace en haut */
  .top-content {
    margin-top: 120px !important;
    margin-bottom: 45px !important;
  }
  
  /* S'assurer que le scroll fonctionne */
  .home-grid {
    min-height: auto !important;
    padding-bottom: 40px;
  }
  
  /* Compacter la mascotte */
  .mascot-row {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* S'assurer que le scroll fonctionne PARTOUT */
html {
  overflow-y: auto !important;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* Permettre au wrap de laisser scroller */
.wrap {
  overflow: visible !important;
}

section.wrap {
  overflow: visible !important;
}

/* ====================================================
   CORRECTION RESPONSIVE HOME - ZONE 770px-1024px
   À AJOUTER DANS styles.css JUSTE AVANT @media (max-width: 1200px) (ligne 257)
   ==================================================== */

/* Zone problématique : Entre tablette et desktop compact */
@media (min-width: 770px) and (max-width: 1024px) {
  
  /* Permettre au contenu de définir sa hauteur */
  .home-grid {
    min-height: auto !important;
    padding-bottom: 40px;
  }
  
  /* Réduire les hauteurs fixes pour que tout rentre */
  .phone {
    min-height: 420px !important;  /* Au lieu de 590px */
    max-height: 500px;
  }
  
  .tablet,
  .square {
    min-height: 170px !important;  /* Au lieu de 220px */
    max-height: 190px;
  }
  
  /* Réduire l'espacement en haut pour gagner de la place */
  .top-content {
    margin-top: 100px !important;  /* Au lieu de 170px */
    margin-bottom: 40px !important;  /* Au lieu de 70px */
  }
  
  /* Réduire la taille du showcase pour compacter */
  .showcase {
    max-width: 700px !important;  /* Au lieu de 840px */
  }
  
  /* Réduire le gap entre les devices */
  .device-grid {
    gap: 10px !important;  /* Au lieu de 14px */
  }
  
  /* Compacter la mascotte */
  .mascot-row {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  /* QR codes un peu plus petits */
  .qr-pack {
    transform: scale(0.92);
    transform-origin: left center;
  }
}

/* Zone encore plus critique : 770px-900px */
@media (min-width: 770px) and (max-width: 900px) {
  
  /* Encore plus petit */
  .phone {
    min-height: 380px !important;  /* Encore plus compact */
    max-height: 450px;
  }
  
  .tablet,
  .square {
    min-height: 150px !important;
    max-height: 170px;
  }
  
  /* Moins d'espace en haut */
  .top-content {
    margin-top: 80px !important;
    margin-bottom: 30px !important;
  }
  
  /* Showcase encore plus petit */
  .showcase {
    max-width: 600px !important;
  }
  
  /* QR codes encore plus petits */
  .qr-pack {
    transform: scale(0.85);
  }
}

/* S'assurer que le scroll fonctionne TOUJOURS */
html {
  overflow-y: auto !important;
  overflow-x: hidden;
}

body {
  overflow-y: auto !important;
  overflow-x: hidden;
}

@media (max-width: 1200px){
  .home-grid{grid-template-columns: 1fr; min-height:auto;}
  .device-grid{grid-template-columns: 1fr;}
  .phone{min-height:520px; transform:none;}
  .tablet,.square{transform:none;}
  nav{justify-content:flex-start}
}
/* ===============================
   HOME – AJUSTEMENTS PROPRES (FIN)
   =============================== */

/* 1) Place le bloc texte un peu plus bas (mais pas collé en haut) */
.top-content{
  margin-top: 170px; /* augmente à 200 si tu veux plus bas */
  margin-bottom: 70px;  /* ← C’EST LUI QUI CRÉE LE VIDE */
}

/* 2) Bloc visuels : taille “bonne” + légèrement à droite */
.showcase{
  justify-self: end;
  width: 100%;
  max-width: 840px;   /* ← clé : réduit la zone à droite */
  margin-right: 10px; /* rapproche du bord */
}

/* 3) Devices : proportions raisonnables */
.device-grid{
  grid-template-columns: 1.08fr .92fr;
  gap: 14px;
}

/* Taille du phone/tablet/square (revenir à “entre-deux”) */
.phone{  min-height: 590px; }
.tablet{ min-height: 220px; }
.square{ min-height: 220px; }

/* QR : 2 QR côte à côte + bloc compact avec titre */
.qr-row{
  width: fit-content;
  max-width: 280px;
  padding: 14px 14px 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  border-radius:18px;
  border:1px solid rgba(36,199,235,.28);
  background: rgba(0,0,0,.18);
}

/* Titre au-dessus des QR codes */
.qr-title{
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kyool-blue);
  line-height: 1.35;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(36,199,235,.2);
}

.qr-row .qr{
  width: 92px;
  height: 92px;
  justify-self: center;
}

/* texte sous les QR centré sur 2 colonnes */
.qr-note{
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  font-size: 12.8px;
}
/* 5) Mascotte : bloc compact, avatar un peu plus grand */
.mascot-row{
  width: fit-content;
  max-width: 520px;
}
.mascot-avatar{
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
}
/* --- Bottom bar (comme la topbar) --- */
.bottombar{
  position: fixed;
  left:0; right:0; bottom:0;
  z-index: 60;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.55);
  border-top: 1px solid var(--border);
}
.bottombar-inner{
  height: 28px;  /* ← CHANGÉ : 56px → 28px */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: rgba(255,255,255,.68);
  font-size: 12px;  /* ← CHANGÉ : 13px → 12px */
  flex-wrap: wrap;
}

/* évite que la barre cache le bas */
section{ padding-bottom: 100px; }

/* ===============================
   CAROUSEL (images tablette)
   =============================== */

.carousel{
  position:relative;
  overflow:hidden;
}

.carousel img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation: carouselFade 30s infinite;
  background:#000;
}

/* 10 images → décalage de 3s */
.carousel img:nth-child(1){ animation-delay: 0s; }
.carousel img:nth-child(2){ animation-delay: 3s; }
.carousel img:nth-child(3){ animation-delay: 6s; }
.carousel img:nth-child(4){ animation-delay: 9s; }
.carousel img:nth-child(5){ animation-delay: 12s; }
.carousel img:nth-child(6){ animation-delay: 15s; }
.carousel img:nth-child(7){ animation-delay: 18s; }
.carousel img:nth-child(8){ animation-delay: 21s; }
.carousel img:nth-child(9){ animation-delay: 24s; }
.carousel img:nth-child(10){ animation-delay: 27s; }
.carousel:hover img{
  animation-play-state: paused;
}

@keyframes carouselFade{
  0%   {opacity:0; transform:scale(1.03)}
  8%   {opacity:1}
  25%  {opacity:1}
  33%  {opacity:0}
  100% {opacity:0; transform:scale(1)}
}
/* ===============================
   SOUND BUTTON (video)
   =============================== */

.sound-btn{
  position:absolute;
  bottom:12px;     /* ⬅️ bas */
  right:12px;      /* ⬅️ droite */
  z-index:6;

  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;

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

  font-size:16px;
  transition: background .2s ease, transform .2s ease;
}

.sound-btn:hover{
  background: rgba(36,199,235,.75);
  transform: scale(1.05);
}
/* ===============================
   KYOOL – HEART MASCOT
   =============================== */

/* Le pack devient la référence */
.qr-pack{
  position: relative;
  width: fit-content;
}

/* Kyool Heart ne prend plus de place : il se superpose à côté */
.kyool-heart{
  position: absolute;
  left: 290px;   /* ajuste : 210 / 230 / 250 selon ton rendu */
  top: 5px;      /* ajuste */
  width: 260px;  /* taille du perso */
  pointer-events: none;
  z-index: 2;
}

.kyool-heart img{
  width: 100%;
  height: auto;
  display: block;
  animation: kyoolFloat 3.2s ease-in-out infinite;
}

@keyframes kyoolFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* ===============================
   HISTOIRE – LAYOUT TEXTE + MOSAÏQUE
   =============================== */
.story{
  padding-top: 30px;
}

.story-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: start; /* ← CHANGÉ de stretch à start pour aligner en haut */
}

.story-tagline{
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  width: fit-content;
}

.story-card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  border-radius: 22px;
  padding: 18px 18px; /* ← RÉDUIT de 22px à 18px */
  backdrop-filter: blur(8px);
  margin-top: 0;
}

.story-card p{
  margin: 0 0 12px; /* ← RÉDUIT de 16px à 12px */
  color: rgba(255,255,255,.88);
  line-height: 1.5; /* ← RÉDUIT de 1.6 à 1.5 */
  font-size: 15px;  /* ← AJOUTÉ : réduit la taille du texte */
}

.story-bullets{
  margin: 16px 0; /* ← RÉDUIT de 20px à 16px */
  padding: 14px;  /* ← RÉDUIT de 16px à 14px */
  background: rgba(36,199,235,.08);
  border-left: 3px solid var(--kyool-blue);
  border-radius: 8px;
}

.story-bullets div{
  margin: 6px 0;  /* ← RÉDUIT de 8px à 6px */
  color: rgba(255,255,255,.92);
  line-height: 1.4; /* ← RÉDUIT de 1.5 à 1.4 */
  font-size: 14px;  /* ← AJOUTÉ */
}

/* Cadre à droite - ALIGNÉ EN HAUT */
.kyool-frame{
  border:1px solid rgba(36,199,235,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  overflow:hidden;
  position: sticky;
  top: 92px; /* distance depuis le haut quand on scroll */
  align-self: start; /* ← IMPORTANT : aligné en haut */
  margin-top: 0; /* ← AJOUTÉ : pas de marge en haut */
}

/* Grille puzzle */
.kyool-mosaic{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  height: 100%;
}

/* Images avec ANIMATION ACTIVÉE */
.kyool-mosaic .k{
  width:100%;
  height: auto;
  min-height: 100px; /* ← RÉDUIT de 180px à 120px */
  max-height: 180px; /* ← RÉDUIT de 280px à 200px */
  object-fit:cover;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  opacity: .98;
  display: block;
  cursor: pointer;
  
  /* ANIMATION : utilise les variables CSS custom */
  transform: translate(var(--x,0px), var(--y,0px)) rotate(var(--r,0deg)) scale(var(--s,1));
  animation: kyoolDrift var(--d,5.2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transition: all 0.3s ease;
}

/* Animation au survol - zoom */
.kyool-mosaic .k:hover{
  transform: scale(1.15) rotate(0deg) !important;
  z-index: 10;
  box-shadow: 0 25px 60px rgba(36,199,235,.55);
  filter: brightness(1.1);
}

/* Réglages individuels pour chaque image (mouvement, rotation, timing) */
.kyool-mosaic .k:nth-child(1){ 
  --s:1.02; --x:4px; --y:-5px; --r:-2deg; --d:6.5s; --delay:0s; 
}
.kyool-mosaic .k:nth-child(2){ 
  --s:0.98; --x:-5px; --y:3px; --r:1.5deg; --d:5.8s; --delay:-1.2s; 
}
.kyool-mosaic .k:nth-child(3){ 
  --s:1.00; --x:3px; --y:6px; --r:-1deg; --d:6.2s; --delay:-0.8s; 
}
.kyool-mosaic .k:nth-child(4){ 
  --s:0.96; --x:6px; --y:2px; --r:2deg; --d:5.5s; --delay:-1.8s; 
}
.kyool-mosaic .k:nth-child(5){ 
  --s:1.04; --x:-3px; --y:5px; --r:-1.8deg; --d:6.8s; --delay:-0.4s; 
}
.kyool-mosaic .k:nth-child(6){ 
  --s:1.01; --x:-6px; --y:-3px; --r:1.2deg; --d:5.3s; --delay:-1.5s; 
}
.kyool-mosaic .k:nth-child(7){ 
  --s:0.97; --x:2px; --y:-6px; --r:-1.5deg; --d:6.0s; --delay:-2.0s; 
}
.kyool-mosaic .k:nth-child(8){ 
  --s:1.03; --x:5px; --y:4px; --r:0.8deg; --d:5.6s; --delay:-0.6s; 
}
.kyool-mosaic .k:nth-child(9){ 
  --s:0.99; --x:-4px; --y:-4px; --r:-0.9deg; --d:6.3s; --delay:-1.3s; 
}

/* Animation de flottement doux - MOUVEMENT DANS TOUS LES SENS */
@keyframes kyoolDrift{
  0%{
    transform: translate(var(--x,0px), var(--y,0px)) rotate(var(--r,0deg)) scale(var(--s,1));
    filter: saturate(1.0) brightness(1.0);
  }
  25%{
    transform: translate(calc(var(--x,0px) + 3px), calc(var(--y,0px) - 4px)) 
               rotate(calc(var(--r,0deg) + 0.5deg)) 
               scale(calc(var(--s,1) * 1.01));
    filter: saturate(1.05) brightness(1.02);
  }
  50%{
    transform: translate(calc(var(--x,0px) - 2px), calc(var(--y,0px) + 5px)) 
               rotate(calc(var(--r,0deg) - 0.8deg)) 
               scale(var(--s,1));
    filter: saturate(1.08) brightness(1.05);
  }
  75%{
    transform: translate(calc(var(--x,0px) + 4px), calc(var(--y,0px) + 2px)) 
               rotate(calc(var(--r,0deg) + 0.6deg)) 
               scale(calc(var(--s,1) * 0.99));
    filter: saturate(1.04) brightness(1.03);
  }
  100%{
    transform: translate(var(--x,0px), var(--y,0px)) rotate(var(--r,0deg)) scale(var(--s,1));
    filter: saturate(1.0) brightness(1.0);
  }
}

/* Mobile responsive */
@media (max-width: 1200px){
  .story-grid{
    grid-template-columns: 1fr;
  }
  
  .kyool-frame{
    position: relative;
    top: 0;
    max-height: none;
  }
  
  .kyool-mosaic .k{
    min-height: 140px;
    max-height: 220px;
  }
 /* ← AJOUTEZ CECI */
  .bottombar-inner{
    font-size: 11px;
    padding: 8px 0;
    text-align: center;
    flex-direction: column;
    gap: 6px;
    height: auto;
  }
}
/* ===============================
   PROGRAMMES - STYLE NETFLIX
   À AJOUTER À LA FIN DE styles.css
   =============================== */

/* HERO BANNER VIDÉO */
.hero-banner{
  position: relative;
  padding: 0;
  margin-top: calc(var(--topbarH) * 0);
}

.hero-video-container{
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 500px;
  overflow: hidden;
  background: #000;
}

.hero-video-container video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,0) 100%);
  padding: 60px 0 40px;
}

.hero-title{
  font-size: clamp(42px, 5vw, 72px);
  margin: 0 0 16px;
  letter-spacing: -1.2px;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 4px 12px rgba(0,0,0,.6);
}

.hero-subtitle{
  font-size: clamp(18px, 2vw, 24px);
  margin: 0;
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* SECTION INTRODUCTION */
.programs-intro{
  padding: 50px 0;
  background: linear-gradient(180deg, rgba(0,0,0,.4), transparent);
}

.intro-content{
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  gap: 40px;
  align-items: center;
}

.intro-mascot{
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-mascot img{
  width: 100%;
  height: auto;
  display: block;
  animation: kyoolFloat 3.5s ease-in-out infinite;
}

.intro-mascot.left img{
  animation-delay: 0s;
}

.intro-mascot.right img{
  animation-delay: -1.2s;
}

.intro-text{
  text-align: center;
}

.intro-title{
  font-size: clamp(28px, 3.5vw, 42px);
  margin: 0 0 20px;
  line-height: 1.3;
  color: #fff;
}

.intro-text .highlight{
  color: var(--kyool-blue);
  font-weight: 700;
}

.intro-text p{
  margin: 0 0 16px;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.intro-text p:last-child{
  margin-bottom: 0;
}

/* CATALOGUE DE PROGRAMMES */
.programs-catalog{
  padding: 20px 0 80px;
}

.program-row{
  margin-bottom: 45px;
}

.row-title{
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 0 0 18px;
  padding-left: 4px;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.row-container{
  position: relative;
  padding: 0 50px;
}
/* ===============================
   PROGRAMMES – TITRE + LIEN "TOUT EXPLORER"
   =============================== */

.genre-header{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;

  /* on reprend ton spacing actuel du titre */
  margin: 0 0 18px;
  padding-left: 4px;
}

/* IMPORTANT : quand row-title est dans genre-header,
   on enlève son margin-bottom sinon ça fait double espace */
.genre-header .row-title{
  margin: 0;
}

.tout-explorer{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-size: 14px;
  font-weight: 800;
  color: var(--kyool-blue);

  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(36,199,235,.35);
  background: rgba(36,199,235,.08);

  transition: .2s ease;
  white-space: nowrap;
}

.tout-explorer:hover{
  background: rgba(36,199,235,.20);
  border-color: rgba(36,199,235,.65);
  color: #fff;
  transform: translateY(-1px);
}

/* BOUTONS DE NAVIGATION */
.row-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 100%;
  background: rgba(0,0,0,.75);
  border: none;
  color: #fff;
  font-size: 48px;
  cursor: pointer;
  z-index: 5;
  transition: all .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);

  opacity: 0;              /* invisible */
  pointer-events: auto;    /* MAIS cliquable */
}

.row-container:hover .row-nav,
.row-nav:focus-visible{
  opacity: 1;
}

.row-nav.prev{
  left: 0;
}

.row-nav.next{
  right: 0;
}

.row-nav:hover{
  background: rgba(36,199,235,.85);
  color: #000;
}

/* SLIDER */
.row-slider{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px;
}

.row-slider::-webkit-scrollbar{
  display: none;
}

/* CARTES PROGRAMMES */
.program-card{
  position: relative;
  flex: 0 0 auto;
  width: 280px;
  height: 157px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.08);
}

/* FORMAT VERTICAL pour Short Drama */
.program-card.vertical{
  width: 180px;
  height: 257px;
}

.program-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
  color: var(--kyool-blue);  /* ← BLEU CYAN */
  font-weight: 700;  /* ← Plus gras */
  opacity: 0;
  transition: all .3s ease;
  text-shadow: 
    0 0 10px rgba(36,199,235,.8),
    0 0 20px rgba(36,199,235,.6),
    0 0 30px rgba(36,199,235,.4);  /* ← HALO BLEU */
}

.program-card:hover .card-overlay {
  opacity: 1;
  text-shadow: 
    0 0 15px rgba(36,199,235,1),
    0 0 25px rgba(36,199,235,.8),
    0 0 35px rgba(36,199,235,.6);  /* ← HALO PLUS FORT AU SURVOL */
}

.program-card:hover{
  transform: scale(1.08);
  z-index: 3;
  box-shadow: 0 12px 30px rgba(36,199,235,.45);
  border-color: var(--kyool-blue);
}

.program-card:hover img{
  transform: scale(1.05);
}

.program-card:hover .card-overlay{
  opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 1200px){
  .intro-content{
    grid-template-columns: 120px 1fr 120px;
    gap: 24px;
  }

  .intro-mascot{
    width: 120px;
    height: 120px;
  }

  .row-container{
    padding: 0 40px;
  }

  .row-nav{
    width: 40px;
    font-size: 36px;
  }

  .program-card{
    width: 220px;
    height: 124px;
  }

  .program-card.vertical{
    width: 140px;
    height: 200px;
  }
}

@media (max-width: 768px){
  .hero-video-container{
    height: 50vh;
    min-height: 350px;
  }

  .intro-content{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .intro-mascot{
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }

  .intro-mascot.right{
    display: none;
  }

  .row-container{
    padding: 0;
  }

  .row-nav{
    display: none;
  }

  .program-card{
    width: 180px;
    height: 101px;
  }

  .program-card.vertical{
    width: 120px;
    height: 172px;
  }

  .bottombar-inner{
    font-size: 11px;
    padding: 8px 0;
    text-align: center;
    flex-direction: column;
    gap: 6px;
    height: auto;
  }
}
/* ===============================
   PARTENAIRES - ORBITE FLOTTANTE (VERSION 4 - CORRECTE)
   =============================== */

/* HERO AVEC CITATION CORÉENNE */
.partners-hero{
  padding: 40px 0 20px;
  text-align: center;
  position: relative;
  z-index: 5;
}

.korean-quote{
  font-size: clamp(52px, 7vw, 110px);
  margin: 0 0 18px;
  letter-spacing: 6px;
  line-height: 1.1;
  color: var(--kyool-blue);
  font-weight: 700;
  text-shadow: 0 4px 25px rgba(36,199,235,.5);
}

.quote-translation{
  font-size: clamp(20px, 2.8vw, 32px);
  margin: 0;
  color: rgba(255,255,255,.95);
  font-style: italic;
  font-weight: 300;
}

/* SECTION ORBITE */
.partners-orbit-section{
  padding: 0;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: -120px;
}

.orbit-container{
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MASCOTTE CENTRALE - RÉDUITE À 1/3 */
.center-mascot{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 275px;
  height: 275px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: centralPulse 4s ease-in-out infinite;
}

.center-mascot img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 25px rgba(36,199,235,.5));
}

@keyframes centralPulse{
  0%, 100%{
    transform: translate(-50%, -50%) scale(1);
  }
  50%{
    transform: translate(-50%, -50%) scale(1.03);
  }
}

/* BULLES PARTENAIRES - GROSSES (COMME AVANT) */
.partner-bubble{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(36,199,235,.18), rgba(36,199,235,.08));
  border: 2px solid rgba(36,199,235,.45);
  box-shadow: 
    0 0 25px rgba(36,199,235,.4),
    inset 0 0 20px rgba(36,199,235,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: all .3s ease;
  
  animation: orbit var(--duration, 30s) linear infinite;
  animation-delay: var(--delay, 0s);
  transform-origin: 0 0;
}

.partner-bubble img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(1.15) contrast(1.08);
  transition: transform .3s ease;
}

/* Animation d'orbite circulaire */
@keyframes orbit{
  from{
    transform: 
      translate(-50%, -50%)
      rotate(var(--angle, 0deg))
      translateX(var(--distance, 300px))
      rotate(calc(-1 * var(--angle, 0deg)));
  }
  to{
    transform: 
      translate(-50%, -50%)
      rotate(calc(var(--angle, 0deg) + 360deg))
      translateX(var(--distance, 300px))
      rotate(calc(-1 * (var(--angle, 0deg) + 360deg)));
  }
}

/* Hover effect */
.partner-bubble:hover{
  transform: 
    translate(-50%, -50%)
    rotate(var(--angle, 0deg))
    translateX(var(--distance, 300px))
    rotate(calc(-1 * var(--angle, 0deg)))
    scale(1.3) !important;
  border-color: var(--kyool-blue);
  box-shadow: 
    0 0 40px rgba(36,199,235,.7),
    inset 0 0 30px rgba(36,199,235,.25);
  z-index: 50;
  animation-play-state: paused;
}

.partner-bubble:hover img{
  transform: scale(1.15);
}

/* SECTION MANIFESTE */
.partners-manifesto{
  padding: 80px 0 60px;
  background: linear-gradient(180deg, transparent, rgba(36,199,235,.08), transparent);
  position: relative;
  z-index: 5;
}

.manifesto-content{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.manifesto-content p{
  margin: 0 0 24px;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.7;
  color: rgba(255,255,255,.88);
}

.manifesto-content p:last-child{
  margin-bottom: 0;
}

.manifesto-intro{
  font-size: clamp(18px, 2vw, 22px) !important;
  color: rgba(255,255,255,.95) !important;
  margin-bottom: 32px !important;
}

.manifesto-content .emphasis{
  font-size: clamp(20px, 2.2vw, 26px) !important;
  font-weight: 600;
  color: var(--kyool-blue);
  margin: 32px 0 !important;
  text-shadow: 0 2px 10px rgba(36,199,235,.3);
}

.manifesto-content .highlight{
  color: var(--kyool-blue);
  font-weight: 700;
}

.manifesto-cta{
  margin-top: 40px !important;
  padding: 24px 32px;
  border-radius: 18px;
  background: rgba(36,199,235,.12);
  border: 1px solid rgba(36,199,235,.3);
  font-size: clamp(17px, 1.9vw, 21px) !important;
}

/* LISTE PARTENAIRES */
.partners-list{
  padding: 50px 0 60px;
  position: relative;
  z-index: 5;
}

.partners-list-title{
  font-size: clamp(28px, 3.5vw, 42px);
  margin: 0 0 30px;
  text-align: center;
  color: var(--kyool-blue);
  font-weight: 700;
}

.partners-names{
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.8;
  color: rgba(255,255,255,.85);
  padding: 30px 40px;
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

/* RESPONSIVE */
@media (max-width: 1200px){
  .orbit-container{
    height: 900px;
    max-width: 900px;
  }

  .center-mascot{
    width: 140px;
    height: 140px;
  }

  .partner-bubble{
    width: 90px;
    height: 90px;
    padding: 12px;
  }
}

@media (max-width: 768px){
  .partners-hero{
    padding: 30px 0 15px;
  }

  .partners-orbit-section{
    min-height: auto;
    padding: 20px 0;
    margin-top: -80px;
  }

  .orbit-container{
    height: 650px;
    max-width: 650px;
  }

  .center-mascot{
    width: 93px;
    height: 93px;
  }

  .partner-bubble{
    width: 70px;
    height: 70px;
    padding: 10px;
  }

  .partner-bubble{
    --distance: 200px !important;
  }

  .partner-bubble[style*="--distance: 400px"],
  .partner-bubble[style*="--distance: 420px"]{
    --distance: 280px !important;
  }

  .korean-quote{
    font-size: 44px;
  }

  .manifesto-content{
    padding: 0 20px;
  }

  .partners-names{
    padding: 20px 24px;
    font-size: 14px;
  }
}
/* ===============================
   CONTACT - DESIGN MODERNE
   À AJOUTER À LA FIN DE styles.css
   =============================== */

/* ===============================
   CONTACT – HERO IDENTIQUE PROGRAMMES
   =============================== */

.contact-hero{
  padding: 0;
  margin-top: 0;
}

.contact-hero-image{
  width: 100%;
  height: 520px;                 /* ✅ même ordre que Programmes */
  overflow: hidden;
  position: relative;
}

/* Overlay cinéma (comme Programmes) */
.contact-hero-image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.90) 100%
  );
  pointer-events: none;
}

/* Image */
.contact-hero-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;   /* ✅ descend le visuel */
  display: block;
}


/* TEXTE D'INTRODUCTION */
.contact-intro{
  padding: 60px 0 40px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), transparent);
}

.contact-title{
  font-size: clamp(36px, 4vw, 56px);
  margin: 0 0 30px;
  text-align: center;
  color: var(--kyool-blue);
  font-weight: 700;
  letter-spacing: -0.8px;
}

.contact-intro-text{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.contact-intro-text p{
  margin: 0 0 20px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
  color: rgba(255,255,255,.88);
}

.contact-intro-text p:last-child{
  margin-bottom: 0;
}

.highlight-text{
  margin-top: 32px !important;
  padding: 24px 32px;
  border-radius: 18px;
  background: rgba(36,199,235,.12);
  border: 1px solid rgba(36,199,235,.3);
  color: rgba(255,255,255,.95) !important;
  font-size: clamp(17px, 1.7vw, 19px) !important;
}

/* SECTION CONTACT : GRILLE 2 COLONNES */
.contact-section{
  padding: 40px 0 80px;
}

.contact-grid{
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: stretch;
}

.section-title-centered{
  font-size: clamp(26px, 3vw, 38px);
  margin: 0 0 40px;
  text-align: center;
  color: var(--kyool-blue);
  font-weight: 500;
}

/* FORMULAIRE / EMAIL CARD */
.contact-form-container{
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.email-card{
  border: 1px solid rgba(36,199,235,.3);
  background: rgba(0,0,0,.25);
  border-radius: 22px;
  padding: 40px 32px;
  text-align: center;
  backdrop-filter: blur(10px);
  margin-bottom: 60px; /* ← AJOUTEZ CETTE LIGNE */
}

.email-icon{
  font-size: 64px;
  margin-bottom: 20px;
}

.email-card h3{
  font-size: 24px;
  margin: 0 0 16px;
  color: var(--kyool-blue);
}

.email-card p{
  margin: 0 0 20px;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
}

.email-link{
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  color: var(--kyool-blue);
  padding: 16px 32px;
  border-radius: 999px;
  border: 2px solid var(--kyool-blue);
  background: rgba(36,199,235,.12);
  transition: all .3s ease;
  margin: 10px 0 20px;
  text-decoration: none;
}

.email-link:hover{
  background: var(--kyool-blue);
  color: #000;
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(36,199,235,.4);
}

.email-note{
  font-size: 14px !important;
  color: rgba(255,255,255,.68) !important;
  font-style: italic;
  margin-top: 16px !important;
}

/* FORMULAIRE (si activé) */
.contact-form{
  border: 1px solid rgba(36,199,235,.3);
  background: rgba(0,0,0,.25);
  border-radius: 22px;
  padding: 32px;
  backdrop-filter: blur(10px);
}

.form-group{
  margin-bottom: 20px;
}

.form-group label{
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.9);
  font-weight: 600;
  font-size: 14px;
}

.form-group input,
.form-group textarea{
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: all .3s ease;
}

.form-group input:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--kyool-blue);
  background: rgba(36,199,235,.12);
  box-shadow: 0 0 0 3px rgba(36,199,235,.2);
}

.form-group textarea{
  resize: vertical;
  min-height: 120px;
}

/* BUREAUX */
.offices-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.office-card{
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.25);
  border-radius: 22px;
  padding: 28px;
  backdrop-filter: blur(10px);
  transition: all .3s ease;
}

.office-card:hover{
  border-color: rgba(36,199,235,.4);
  background: rgba(36,199,235,.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(36,199,235,.2);
}

.office-info h3{
  font-size: 20px;
  margin: 0 0 12px;
  color: var(--kyool-blue);
  font-weight: 600;
}

.office-address{
  margin: 0 0 20px;
  color: rgba(255,255,255,.85);
  line-height: 1.7;
  font-size: 15px;
}

/* GOOGLE MAPS */
.map-container{
  width: 100%;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(36,199,235,.3);
  box-shadow: 0 4px 15px rgba(0,0,0,.3);
}

.map-container iframe{
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* RESPONSIVE */
@media (max-width: 1200px){
  .contact-grid{
    grid-template-columns: 1fr;
  }

  .contact-form-container{
    position: relative;
    top: 0;
  }

  .contact-hero-image{
    height: 300px;
  }
}

@media (max-width: 768px){
  .contact-hero-image{
    height: 250px;
  }

  .contact-intro{
    padding: 40px 0 30px;
  }

  .email-card{
    padding: 32px 24px;
  }

  .email-link{
    font-size: 18px;
    padding: 14px 24px;
  }

  .map-container{
    height: 220px;
  }
}
/* =====================================================
   BADGE "ÉPISODES GRATUITS" - HOMEPAGE
   À ajouter dans styles.css
   ===================================================== */

/* Badge principal - Style tampon rouge EXACTEMENT comme sur la fiche programme */
.badge-episodes-gratuits {
    position: fixed;
    bottom: 120px;
    right: 40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle at 30% 30%, #FF4757 0%, #E63946 40%, #DC143C 70%, #C1121F 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 15px 40px rgba(230, 57, 70, 0.7),
        0 0 0 4px #8B0000,
        0 0 0 10px rgba(230, 57, 70, 0.2),
        inset 0 -8px 20px rgba(0, 0, 0, 0.4),
        inset 0 8px 20px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 999;
    text-align: center;
    animation: pulse-glow 3s ease-in-out infinite;
    border: 5px solid #DC143C;
}

/* Effet hover */
.badge-episodes-gratuits:hover {
    transform: scale(1.05) rotate(-3deg);
    box-shadow: 
        0 18px 50px rgba(230, 57, 70, 0.8),
        0 0 0 4px #8B0000,
        0 0 0 12px rgba(230, 57, 70, 0.25),
        inset 0 -8px 20px rgba(0, 0, 0, 0.4),
        inset 0 8px 20px rgba(255, 255, 255, 0.2);
}

/* Texte coréen "무료" (gratuit) */
.badge-episodes-gratuits .texte-coreen {
    font-size: 38px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    margin-bottom: 8px;
    letter-spacing: 2px;
}

/* Texte "ÉPISODES" */
.badge-episodes-gratuits .texte-episodes {
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 2px;
}

/* Texte "GRATUITS" */
.badge-episodes-gratuits .texte-gratuits {
    font-size: 18px;
    font-weight: 900;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Animation pulse et glow */
@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 8px 20px rgba(230, 57, 70, 0.4),
            0 0 0 8px rgba(230, 57, 70, 0.1),
            0 0 0 16px rgba(230, 57, 70, 0.05);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 
            0 8px 25px rgba(230, 57, 70, 0.5),
            0 0 0 10px rgba(230, 57, 70, 0.15),
            0 0 0 20px rgba(230, 57, 70, 0.08);
    }
}

/* Version mobile et tablette */
@media (max-width: 768px) {
    .badge-episodes-gratuits {
        width: 100px;
        height: 100px;
        bottom: 80px;
        right: 20px;
    }
    
    .badge-episodes-gratuits .nombre {
        font-size: 32px;
    }
    
    .badge-episodes-gratuits .texte-episodes {
        font-size: 10px;
    }
    
    .badge-episodes-gratuits .texte-gratuits {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .badge-episodes-gratuits {
        width: 80px;
        height: 80px;
        bottom: 60px;
        right: 15px;
    }
    
    .badge-episodes-gratuits .nombre {
        font-size: 26px;
    }
    
    .badge-episodes-gratuits .texte-episodes {
        font-size: 8px;
    }
    
    .badge-episodes-gratuits .texte-gratuits {
        font-size: 10px;
    }
}

/* =====================================================
   MODAL "ÉPISODES GRATUITS" (OPTIONNEL)
   À afficher au clic sur le badge
   ===================================================== */

.modal-episodes-gratuits {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-episodes-gratuits.active {
    display: flex;
    opacity: 1;
}

.modal-episodes-gratuits-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    text-align: center;
}

.modal-episodes-gratuits.active .modal-episodes-gratuits-content {
    transform: scale(1);
}

/* Bouton fermer modal */
.modal-episodes-gratuits-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.modal-episodes-gratuits-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Contenu modal */
.modal-episodes-gratuits h2 {
    color: #24C7EB;
    font-size: 32px;
    margin: 0 0 20px 0;
}

.modal-episodes-gratuits p {
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Boutons QR codes dans modal */
.modal-qr-codes {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

.modal-qr-code {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}

.modal-qr-code img {
    width: 120px;
    height: 120px;
}

.modal-qr-code p {
    margin-top: 10px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

/* Bouton CTA modal */
.modal-cta-button {
    display: inline-block;
    padding: 15px 40px;
    background: linear-gradient(135deg, #24C7EB 0%, #0099CC 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 700;
    font-size: 16px;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.modal-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(36, 199, 235, 0.4);
}
/* VISUEL KYOOL DANS LA MODAL */
.modal-kyool-visual {
  width: 100%;
  margin: 20px 0 24px;
  border-radius: 14px;
  overflow: hidden; /* 🔥 C'EST ÇA QUI MANQUAIT */
}

.modal-kyool-visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 14px;
}
/* ====================================================
   SECTION BD - HISTOIRE DE KYOOL
   À AJOUTER DANS styles.css (à la fin du fichier)
   ==================================================== */

/* Section BD */
.story-bd {
  padding: 60px 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.08));
}

/* Titre optionnel */
.bd-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--kyool-blue);
  text-align: center;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Grid des 4 images BD - Desktop */
.bd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
  gap: 20px;
  width: 100%;
}

/* Chaque image BD */
.bd-item {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: rgba(0,0,0,.2);
}

/* Effet hover sur desktop */
.bd-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(36,199,235,.4);
}

/* Image responsive */
.bd-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/* ====================================================
   RESPONSIVE - RÉDUCTION PROGRESSIVE
   ==================================================== */

/* Zone 1200px - 1400px : 4 colonnes mais un peu plus petit */
@media (max-width: 1400px) {
  .bd-grid {
    gap: 16px;
  }
}

/* Zone 1024px - 1200px : 4 colonnes plus compactes */
@media (max-width: 1200px) {
  .bd-grid {
    gap: 14px;
  }
  
  .bd-title {
    font-size: 28px;
    margin-bottom: 30px;
  }
}

/* Zone 900px - 1024px : Passer à 2 colonnes */
@media (max-width: 1024px) {
  .bd-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    gap: 20px;
  }
  
  .story-bd {
    padding: 50px 0;
  }
}

/* Zone 768px - 900px : 2 colonnes plus compactes */
@media (max-width: 900px) {
  .bd-grid {
    gap: 16px;
  }
  
  .bd-title {
    font-size: 24px;
    margin-bottom: 25px;
  }
}

/* Mobile < 768px : 1 colonne */
@media (max-width: 768px) {
  .bd-grid {
    grid-template-columns: 1fr; /* 1 seule colonne */
    gap: 20px;
    max-width: 500px; /* Largeur max pour ne pas être trop large */
    margin: 0 auto; /* Centrer */
  }
  
  .story-bd {
    padding: 40px 0;
  }
  
  .bd-title {
    font-size: 22px;
    margin-bottom: 20px;
  }
  
  /* Pas d'effet hover sur mobile */
  .bd-item:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
  }
}

/* Mobile très petit < 500px : Images encore plus petites */
@media (max-width: 500px) {
  .bd-grid {
    gap: 16px;
    max-width: 400px; /* Un peu plus petit */
  }
  
  .bd-title {
    font-size: 20px;
  }
}


/* ====================================================
   VARIANTE : SI VOUS NE VOULEZ PAS LE TITRE
   ==================================================== */

/* Si vous supprimez le titre, décommentez cette ligne pour ajuster l'espacement : */
/*
.story-bd {
  padding-top: 40px;
}
*/


/* ====================================================
   NOTES TECHNIQUES
   ==================================================== */

/*
1. ALIGNEMENT AUTOMATIQUE :
   - Le .wrap assure l'alignement avec le texte et les mascottes
   - grid-template-columns: repeat(4, 1fr) crée 4 colonnes égales
   - Première image alignée à gauche, dernière à droite

2. RESPONSIVE :
   - > 1024px : 4 colonnes côte à côte
   - 768px - 1024px : 2 colonnes (2 en haut, 2 en bas)
   - < 768px : 1 colonne (les unes sous les autres)

3. TAILLES :
   - Desktop : ~25% de la largeur chacune (avec gaps)
   - Tablette : ~50% de la largeur chacune
   - Mobile : 100% de la largeur, max 500px

4. FORMAT DES IMAGES :
   - 1080x1350 (portrait) → Le ratio est préservé automatiquement
   - height: auto assure que le ratio 0.8 est maintenu
*/