/* =========================
       Thème & variables
    ==========================*/
    :root{
      --bg:#0a0a12;
      --bg-soft:#111125;
      --grid:#2b2b52;
      --neon-pink:#ff3da5;
      --neon-cyan:#38fff5;
      --neon-purple:#9b5cff;
      --text:#f7f7ff;
      --muted:#b8b8d9;
      --card:#141432;
      --shadow: 0 10px 24px rgba(0,0,0,.45);
      --radius:16px;
      --gap: clamp(16px, 3vw, 28px);
    }


    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      /**margin:0;**/
      color:var(--text);
      font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background: radial-gradient(1200px 600px at 50% 120%, rgba(155,92,255,.15), transparent 60%) var(--bg);
      overflow-x: hidden;
      line-height:1;
    
    }

    a{color:var(--neon-cyan);text-decoration:none}
    a:hover{text-decoration:underline}

    /* Effet scanlines subtil + grain VHS */
    .scanlines:before,.scanlines:after{
      content:"";
      position:fixed;inset:0;pointer-events:none;z-index:1;
    }
    .scanlines:before{
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.04) 0px,
        rgba(255,255,255,.04) 1px,
        transparent 2px,
        transparent 3px
      );
      mix-blend-mode: overlay;
    }
    .scanlines:after{
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 40 40'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .2 0'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      opacity:.12;
      mix-blend-mode: soft-light;
    }

    .scanlines h3 {
      font-family : "Rubik", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size: 1.2rem;
      text-align: center;
      padding:  0px 8px 00px 8px;
      margin-bottom: 0;
           line-height: 1.5;
      color: var(--neon-cyan);  
      width: 110vh;     
      margin: auto; 
           
    }

   @media (max-width: 600px) {
   
    .scanlines h3 {
     width: auto;     
      margin: auto; 
      font-size: 0.9rem;
 }
 }

      
    
    /* =========================
       Header / Hero
    ==========================*/
/* Desktop par défaut */
.logo-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.logo-title img {
  box-shadow: 0px 0px 10px 3px #9b5cff;
}


.logo {
  max-width: 80px;
  height: auto;
  border-radius: 10px;
}

/* Mobile : logo au-dessus du titre */
@media (max-width: 768px) {
  .logo-title {
    flex-direction: column;   /* empile logo et titre */
    text-align: center;       /* centre le texte */
  }

  .logo {
    max-width: 120px;         /* un peu plus grand sur mobile */
    margin-bottom: 0.5rem;
  }
}
    
    header{
      position:relative;
     padding-top: clamp(20px, 5vw, 50px);
      text-align:center;
      overflow:hidden;
      margin-bottom: 5px;
    }
    /* Grille néon au sol (tron vibes) */
    header:after{
      content:"";
      position:absolute; left:50%; transform:translateX(-50%);
      bottom:-20vh; width:160vw; height:130vh; z-index:0; pointer-events:none;
      background:
        linear-gradient(to bottom, transparent 0 35%, rgba(56,255,245,.08)),
        repeating-linear-gradient(#0000, #0000 18px, rgba(56,255,245,.15) 19px),
        repeating-linear-gradient(90deg, #0000, #0000 18px, rgba(255,61,165,.15) 19px);
      filter: drop-shadow(0 0 18px rgba(56,255,245,.6));
      transform-origin: top;
      transform: perspective(800px) rotateX(70deg) translateX(-50%);
      border-top:1px solid rgba(56,255,245,.35);
    }

    .brand{
      position:relative; 
      z-index:2;
      display:inline-block; 
      padding:18px 22px;
       border-radius:12px;
      background: linear-gradient(120deg, rgba(255,61,165,.15), rgba(56,255,245,.15));
      box-shadow:inset 0 0 30px rgba(155,92,255,.25), var(--shadow);
      backdrop-filter: blur(6px);
       min-width: 700px; /* largeur minimale */
 

    }


    h1{
      margin: 0 0 12px;
      font-family:"Press Start 2P", system-ui, monospace;
      font-size: clamp(22px, 3.6vw, 40px);
      letter-spacing:1px;
      color:var(--text);
      text-shadow:
        0 0 8px rgba(255,61,165,.8),
        0 0 18px rgba(56,255,245,.6);
    }
    
   #punchline {
    font-size:1.5rem;
     font-weight:bold;
     text-align:center;
      margin:20px auto;
     max-width: 70vh;
       font-size: clamp(14px, 1.6vw, 18px);
       color:var(--muted);
       height: 40px;

    }

    h2 {
       text-align: center;
        line-height: 1.5; /* ajoute cette ligne pour espacer les lignes */
    }

    
    

    /* Boutons */
    .cta{
      margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
    }
    .btn {
    --glow: drop-shadow(0 0 8px rgba(255,61,165,.8)) drop-shadow(0 0 12px rgba(56,255,245,.7));
    display: inline-block; 
    padding: 12px 18px; 
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow);
    filter: var(--glow);
    color: white;       /* couleur du texte */
    font-size: 16px;    /* taille du texte, ajuste si besoin */
    text-align: center;
    cursor: pointer;
}
.btn:hover {
    transform: translateY(-3px);
}
.btn.secondary {
    filter: none;
    border-color: rgba(255,255,255,.1);
    opacity: .9;
}

nav.cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;       /* permet aux boutons de passer à la ligne si écran petit */
  justify-content: center;
  gap: 12px;
}

nav.cta a.btn {
  flex: 1 1 150px;       /* chaque bouton prend au minimum 150px, mais peut grandir */
  max-width: 200px;      /* limite la largeur pour que ce soit pas trop large */
  text-align: center;
}


    /* =========================
       Contenu principal
    ==========================*/
    main{padding: 5px min(5vw, 28px) 80px;
       position:relative; z-index:2}

    .section{
      margin: clamp(28px, 5vw, 5px) auto;
      max-width: 1100px;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:2px  solid rgba(86, 238, 238, 0.48);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: clip;
      padding-top: 0;
    }
    .section header{
      padding: 28px 24px 0; text-align:left;
    }
    .section h2{
      font-family:"Press Start 2P", system-ui, monospace;
      font-size: clamp(14px, 2.5vw, 24px);
      margin:0 0 8px;
      color: var(--neon-cyan);
      text-shadow: 0 0 10px rgba(56,255,245,.7);
    }
    .section p.desc{
      
      color:var(--muted);
      padding : 5px 5px 10px 0px;
      margin:auto;
      max-width: 75ch;
      text-align: center;
    }

    /* Grille cartes */
    .cards{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--gap); padding: 0 var(--gap) var(--gap);
    }
    .card{
      background: var(--card);
      border:1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding:16px;
      position:relative;
      box-shadow: var(--shadow);
    }
    article.card.polaroid img {
    
  width: 100%;         /* l’image prend toute la largeur de son conteneur */
  height: 80%;        /* optionnel si tu veux remplir aussi la hauteur */
 

}

    article.card.polaroid {
box-shadow: 0px 0px 15px 2px #9b5cff;

    }

article.card.polaroid a {
  display: flex;           /* active le flex pour centrer le contenu */
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement */
  overflow: hidden;        /* empêche le débordement de l’image */
}

article.card.polaroid a img {
  max-width: 100%;   /* l’image ne dépasse pas la largeur du lien */
  max-height: 100%;  /* l’image ne dépasse pas la hauteur du lien */
  display: block;    /* supprime l’espace blanc sous l’image */
  object-fit: cover; /* garde les proportions en remplissant le conteneur */
}


article.card.polaroid a {
  transition: transform 0.3s ease, filter 0.3s ease;
}

article.card.polaroid a:hover {
  transform: scale(1.1) rotate(-3deg);
  filter: hue-rotate(45deg) saturate(150%);
}

@keyframes glitch90 {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px, 2px) skew(0.5deg); }
  40%  { transform: translate(-5px, -2px) skew(-0.5deg); }
  60%  { transform: translate(2px, 2px) skew(0.5deg); }
  80%  { transform: translate(5px, -1px) skew(-0.5deg); }
  100% { transform: translate(0); }
}

article.card.polaroid a {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

article.card.polaroid a img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: cover;
  transition: filter 0.3s ease;
}

article.card.polaroid a:hover {
  animation: glitch90 0.4s infinite;
  box-shadow: 
    0 0 8px var(--neon-pink),
    0 0 16px var(--neon-cyan),
    0 0 24px var(--neon-purple);
}

article.card.polaroid a:hover img {
  filter: contrast(140%) saturate(160%) hue-rotate(15deg);
}

.card h3{
      margin:8px 0 6px; font-size:18px;
      color:#fff; letter-spacing:.3px;
    }
    .badge{
      display:inline-block; 
      font-size:12px; 
      color:#0b0b16; 
      font-weight:700;
      background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
      padding:6px 10px; border-radius:999px;
      box-shadow: 0 0 12px rgba(255,61,165,.6);
    }

    /* “Polaroids” */
    .polaroid{
      background:#fff; 
      color:#111; 
      padding:8px 8px 16px; 
      border-radius:10px;
      transform: rotate(var(--rot, -2deg));
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
    }
    .polaroid img{
      width:100%;
       height:180px; 
       object-fit:cover; 
       border-radius:6px;
      display:block;
      filter: saturate(1.1) contrast(1.05);
    }
    .polaroid .caption{
      margin-top:8px;
       font-size:12px; 
       text-align:center; 
       color:#333;
      font-weight:600;
    }

    .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1200px; /* optionnel, pour centrer la galerie */
  margin: 0 auto;
}

.item img {
  width: 100%;
  display: block;
  border-radius: 10px;
  transition: transform 0.3s;
}

.item img:hover {
  transform: scale(1.05); /* léger zoom au survol */
}

    /* Timeline */
.timeline {
  position: relative;
  padding: 0 var(--gap) var(--gap);
  max-height: 40vh;      /* Hauteur maximale avant scroll interne */
  overflow-y: auto;        /* Scroll vertical si contenu dépasse */

 
}

.timeline p, .playlist p {

text-align: center;
line-height: 1.2;

}


/* Optionnel : scrollbar stylée */
.timeline::-webkit-scrollbar {
  width: 6px;
}

.timeline::-webkit-scrollbar-thumb {
  background-color: rgba(155, 92, 255, 0.7);
  border-radius: 3px;
}
 
    .event{
      margin-left: calc(var(--gap) + 24px);
      padding:14px 16px; background:var(--card);
      border:1px solid rgba(255,255,255,.08); border-radius:12px;
      box-shadow:var(--shadow);
      position:relative;
      margin-top: 20px;
    }
    .event:before{
      content:""; 
      position:absolute; 
      left:-20px; top:16px; 
      width:12px; height:12px;
       border-radius:50%;
      background: var(--neon-purple); 
      box-shadow:0 0 12px rgba(155,92,255,.8);
    }
    .event time{display:block; font-weight:700; color:var(--neon-purple); margin-bottom:6px}

    .play-btn {
  margin-left: 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--neon-cyan);
  transition: transform 0.2s;
}

.play-btn:hover {
  transform: scale(1.2);
  color: var(--neon-pink);
}
.play-btn, .pause-btn {
  margin-left: 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--neon-cyan);
  transition: transform 0.2s, color 0.2s;
}

.play-btn:hover, .pause-btn:hover {
  transform: scale(1.2);
  color: var(--neon-pink);
}








    /* Playlist & audio */
    .playlist{
      display:grid;
       grid-template-columns:1fr; 
       gap:12px;
        padding:0 var(--gap) var(--gap);
        
    }

    .playlist {
  position: relative;
  padding: 0 var(--gap) var(--gap);
  max-height: 40vh;      /* Hauteur maximale avant scroll interne */
  overflow-y: auto;        /* Scroll vertical si contenu dépasse */

  
}

    .playlist::-webkit-scrollbar {
  width: 6px;
}
.playlist::-webkit-scrollbar-thumb {
  background-color: rgba(155, 92, 255, 0.7);
  border-radius: 3px;
}
 

    .tape{
      display:flex; 
      align-items:center;
       gap:14px;
        background:var(--card);
      border:1px solid rgba(255,255,255,.08);
       border-radius:14px;
        padding:12px 14px;
         box-shadow:var(--shadow);
    }
    .tape .icon{
       width: 56px;
    height: 56px;
    border-radius: 8px;
    /* Remplacement des dégradés CSS par une image JPG */
    background-image: url('pictures/k7.jpg');
    background-size: cover;      /* pour que l'image remplisse toute la zone */
    background-position: center; /* centre l'image */
    background-repeat: no-repeat;
    
    position: relative;
    }
    .tape .icon:after{
      content:""; 
      position:absolute;
       inset:auto 6px 6px auto;
        font: 700 10px/1 "Rubik";
         color:#fff;
          background:#111;
           padding:2px 4px;
            border-radius:4px; opacity:.7
    }
    audio{width:100%}


 
    

    /* Galerie responsive */
    .gallery{
      display:grid; 
      gap:14px;
       padding:0 var(--gap) var(--gap);
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      
    }

    /* Livre d’or */
    .guestbook{
     
      margin: auto;
      display:grid; 
      gap:12px; 
      padding:0 var(--gap) var(--gap);
      
    }


 
    .guestbook input,.guestbook textarea{
      width:100%; 
      padding:12px 14px;
       border-radius:10px; 
       border:1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.04); color:var(--text);
    }
    .guestbook textarea{min-height:120px; resize:vertical}
   
    .submit{
      justify-self:center; cursor:pointer;
    }

    
    /* Footer type CRT */
    footer{
      text-align:center;
       padding:40px 16px 80px; 
       color:var(--muted);
      background:
        radial-gradient(600px 140px at 50% 0, rgba(56,255,245,.08), transparent 60%),
        linear-gradient(180deg, transparent, rgba(0,0,0,.4));
      border-top:1px solid rgba(255,255,255,.08);
    }
    .ia-note {
  font-size: 0.75rem; /* plus petit que le texte normal */
  color: rgba(255,255,255,.2);
  margin-top: 8px;

}
    .marquee{
      overflow:hidden; 
      white-space:nowrap; 
      border-top:1px dashed rgba(255,255,255,.2);
       border-bottom:1px dashed rgba(255,255,255,.2);
      padding:10px 0; 
      margin:16px 0 0;
    }
    .marquee span{
      display:inline-block; 
      padding-left:100%; 
      animation: roll 18s linear infinite;
      font-family:"Press Start 2P";
      color:var(--neon-pink);
       text-shadow:0 0 10px rgba(255,61,165,.7);
      letter-spacing:1px;

    }
/** marquee TOP site en construction a supprimer à terme **/

 .marquee2{
      overflow:hidden; 
      white-space:nowrap; 
      border-top:1px dashed rgba(255,255,255,.2);
       border-bottom:1px dashed rgba(255,255,255,.2);
      padding:10px 0; 
      margin:16px 0 0;
    }
    .marquee2 span{
      font-size: 10px;
      display:inline-block; 
      padding-left:100%; 
      animation: roll 18s linear infinite;
      font-family:"Press Start 2P";
      color:var(--neon-cyan);
       text-shadow:0 0 10px cy;
      letter-spacing:1px;

    }
/**quizz**/

/* =========================
   Quiz & interactions
==========================*/

.quiz-container .scoreboard{
  margin: 40px auto;
  padding: 24px;
  max-width: 800px;
  min-height: 30vh;

  /* Effet carte néon */
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  box-shadow: 
    0 10px 30px rgba(0,0,0,.5),
    inset 0 0 20px rgba(56,255,245,.15);
  /* Centrage du contenu */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Pour l’effet un peu 3D / rétro */
  transform: perspective(1000px) rotateX(2deg);
}


 /**mise en page des namesinput **/

.player-select .nameInputs{
    background-color: #00ff80;
    height: 20px;
}

.nameInputs {
  margin-bottom: 30px;
}
.nameInputs input {
  width: 100%;
  max-width: 280px;
  margin: 18px auto;
  display: block;
  padding: 14px 20px;
  
  font-size: 1.2rem;
  font-family: "Press Start 2P", monospace;
  text-align: center;
  letter-spacing: 1px;
  color: var(--neon-cyan);
  
  background: rgba(20, 20, 50, 0.85);
  border: 3px solid var(--neon-pink);
  border-radius: 14px;
  
  box-shadow: 
    0 0 8px rgba(255,61,165,.8),
    0 0 14px rgba(56,255,245,.7),
    inset 0 0 10px rgba(0,0,0,.5);
  
  transition: all 0.25s ease;
}

.nameInputs input::placeholder {
  color: var(--muted);
  opacity: 0.7;
  font-size: 0.9rem;
}

.nameInputs input:focus {
  outline: none;
  border-color: var(--neon-cyan);
  color: var(--neon-pink);
  background: rgba(30, 30, 70, 0.95);
  
  box-shadow: 
    0 0 10px var(--neon-cyan),
    0 0 20px var(--neon-pink),
    0 0 40px var(--neon-purple);
  transform: scale(1.05);
}



#quiz-container h2 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(30px, 2.5vw, 24px);
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(56,255,245,.7);
  margin-bottom: 1px;
}
#quiz-container span {

  font-family: "Press Start 2P", monospace;
  font-size: clamp(15px, 2.5vw, 24px);
  color: rgba(255,61,165,.8);
  
  margin-bottom: 50px;
  margin-top: 50px;
}


#quiz-container p.question {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 20px;
}

#answers button {
  width: 100%;
  background: linear-gradient(180deg, rgba(56,255,245,.08), rgba(255,61,165,.08));
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  padding: 12px;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.2s, background 0.2s, color 0.2s;
  margin-bottom: 12px;
  font-family: "Rubik", sans-serif;
}

#answers button:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255,61,165,.15), rgba(56,255,245,.15));
  color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(255,61,165,.6), 0 0 12px rgba(56,255,245,.6);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@keyframes flash-red {
  0%, 100% { background: rgba(255,61,61,.2); }
  50% { background: rgba(255,61,61,.5); }
}

#answers button.wrong {
  animation: shake 0.4s ease, flash-red 0.4s linear;
}

#answers button.wrong {
  animation: shake 0.4s ease;
}
/** css pasgfe score start **/
#quiz-game.end-screen {
  text-align: center;
  padding: 40px 30px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 2px solid var(--neon-pink);
  box-shadow: 
    0 0 12px var(--neon-pink),
    0 0 25px var(--neon-cyan),
    inset 0 0 20px rgba(0,0,0,.6);
  
  animation: flicker 2s infinite alternate;
}

#quiz-game.end-screen h2 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(18px, 3vw, 32px);
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-pink);
  margin-bottom: 20px;
}

#quiz-game.end-screen h3 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(14px, 2.5vw, 24px);
  color: var(--neon-pink);
  text-shadow: 0 0 12px var(--neon-pink), 0 0 22px var(--neon-purple);
  margin-top: 20px;
}

#quiz-game.end-screen ul {
  list-style: none;
  padding: 0;
  margin: 20px auto;
  max-width: 300px;
}

#quiz-game.end-screen ul li {
  background: rgba(20,20,50,.9);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 10px;
  margin: 6px 0;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  text-shadow: 0 0 6px rgba(56,255,245,.6);
  box-shadow: inset 0 0 10px rgba(56,255,245,.2);
}

/* Effet CRT qui scintille */
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.6; }
}
/** css pasgfe score end **/

/**  css buton replay  start**/
*
.end-screen .replay-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 26px;
  
  font-family: "Press Start 2P", monospace;
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--neon-cyan);
  text-decoration: none;
  
  border: 2px solid var(--neon-cyan);
  border-radius: 12px;
  background: rgba(20,20,50,0.8);
  cursor: pointer;
  
  box-shadow: 
    0 0 8px var(--neon-cyan),
    0 0 16px var(--neon-pink);
  
  transition: all 0.25s ease;
}

.end-screen .replay-btn:hover {
  color: var(--neon-pink);
  border-color: var(--neon-pink);
  box-shadow: 
    0 0 12px var(--neon-pink),
    0 0 24px var(--neon-cyan),
    inset 0 0 10px rgba(0,0,0,.5);
  transform: scale(1.08);
}

/**  css buton replay  end**/


#sound-counter {
  margin-top: 15px;
  font-weight: 700;
  color: var(--neon-purple);
  text-shadow: 0 0 6px rgba(155,92,255,.7);
}

#current-player {
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--neon-pink);
  text-shadow: 0 0 8px rgba(255,61,165,.8);
}

#answers button.correct {
  background: linear-gradient(180deg, rgba(0,255,128,.2), rgba(0,255,128,.1));
  border-color: rgba(0,255,128,.6);
  color: #00ff80;
  box-shadow: 0 0 12px rgba(0,255,128,.8);
}

#answers button.wrong {
  background: linear-gradient(180deg, rgba(255,61,61,.2), rgba(255,61,61,.1));
  border-color: rgba(255,61,61,.6);
  color: #ff3d3d;
  box-shadow: 0 0 12px rgba(255,61,61,.8);
}

/** test fin de quizz**/

.quiz-3d-frame {
  background: linear-gradient(135deg, #ff66cc, #6600ff);
  border: 4px solid #fff;
  border-radius: 15px;
  padding: 20px;
  width: 600px;
  margin: 40px auto;
  box-shadow: 10px 10px 0 #ffcc00, -10px -10px 0 #00ccff;
  transform: perspective(600px) rotateX(2deg) rotateY(-2deg);
  font-family: 'Comic Sans MS', cursive, sans-serif;
  color: #fff;
}

.end-screen {
  text-align: center;
}

.replay-btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 18px;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  background: #ffcc00;
  color: #6600ff;
  border: 3px solid #fff;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.3s;
}

.replay-btn:hover {
  transform: scale(1.1);
  background: #fff;
}

/**style de la page 90stv start **/

/* Section vidéos années 90 */
#videos-90 {
  padding: 20px 20px;
  background: radial-gradient(1200px 600px at 50% 120%, rgba(155,92,255,.15), transparent 60%) var(--bg);
  margin: auto;
}


#videos-90 .section-title {
  text-align: center;
  padding-top: 10px;
  margin-bottom: 40px;
  color: #00ffff; /* couleur texte principale de ton CSS */
 font-family:"Press Start 2P", system-ui, monospace;;
font-size: 1.5rem;
   text-shadow: 
    -1px -1px 0 #ff00ff,  
     1px -1px 0 #ff00ff,
    -1px  1px 0 #ff00ff,
     1px  1px 0 #ff00ff;
     
}

/* Grille vidéos */
.grid-videos {
  display: flex;             /* remplace display: grid */
  flex-wrap: wrap;           /* permet plusieurs lignes si besoin */
  justify-content: center;   /* centre les vidéos horizontalement */
  gap: 20px;                 /* espace entre les vidéos */
}

/* Carte vidéo */
.video-card {
  border: 3px solid #ff00ff; /* style rétro */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 5px 5px 0px #00ffff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.video-card:hover {
  transform: scale(1.05);
  box-shadow: 8px 8px 0px #00ffff;
}

.video-card iframe {
  width: 100%;
  height: 200px;
  border: none;
  
}

.video-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* recadre l'image pour remplir le carré */
  display: block;
}
/** **/
.video-card {
  position: relative; /* nécessaire pour positionner le logo au centre */
  width: 300px;
  height: 300px;
  overflow: hidden;
  margin: 10px;
  display: inline-block;
  border: 3px solid #ff00ff;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #00ffff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.video-card img {
  width: 100%;
  height: auto; /* ne prend plus toute la hauteur, sinon le texte est coupé */
  display: block;
}

.video-card:hover {
  transform: scale(1.05);
  box-shadow: 8px 8px 0px #00ffff;
}

/* Logo YouTube centré */
.video-card .youtube-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;   /* taille du logo */
  height: 60px;
  opacity: 0.8;  /* légèrement transparent */
  pointer-events: none; /* pour que le clic passe sur le lien */
}

/**  **/
.video-card {
  width: 300px;
  overflow: visible; /* autorise le texte à s'afficher */
  margin: 10px;
  border: 3px solid #ff00ff;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #00ffff;
  display: inline-block;
  text-align: center; /* centre le texte sous la vidéo */
}

.video-card iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* ajuste la vidéo pour remplir le carré */
}
.video-caption {
  margin-top: 5px;
  color: white;
  font-size: 0.7rem;

 
  font-family: "Press Start 2P", monospace;
}
@media (max-width: 600px) {
 
.video-caption {

    font-size: 0.6rem;
;
 
   }
  }

/** style page game start */


/** css video-card 2 **/


/** **/
.video-card2 {
  position: relative; /* nécessaire pour positionner le logo au centre */
  height:450px;
  margin: 10px;
  display: inline-block;
  transition: transform 0.3s, box-shadow 0.3s;
  width: 800px;
  overflow: visible; /* autorise le texte à s'afficher */
  margin: 10px;
  border: 3px solid #ff00ff;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #00ffff;
   text-align: center; /* centre le texte sous la vidéo */
  font-size:0.8rem;
  color: #9494e2;
  font-weight: 200;
   font-family:"Press Start 2P", system-ui, monospace;
   line-height:3;
}



.video-card2:hover {
  transform: scale(1.05);
  box-shadow: 8px 8px 0px #00ffff;
}

@media (max-width: 768px) {
.video-card2 {

  font-size:0.6rem;
   height:220px;
     width: 800px;

}
}

/***/


.memory-game {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--gap);
  width: min(90vw, 500px);
  margin: 0 auto; /* centre horizontalement la grille */
}

.memory-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 1 / 1; /* toujours carré */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.memory-card:hover{
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--neon-cyan);
}
.memory-card img {
  width: 70%;
  height: 70%;
  display: none;
}
.memory-card.show img{display:block;}

.message {
  margin-top: var(--gap);
  font-size: 1.2rem;
  color: var(--neon-purple);
  text-align:center;
}

@media (max-width: 600px) {
  .memory-game {
    grid-template-columns: repeat(4, 1fr);
  }
}
.restart-btn {
  padding: 0.6rem 1.2rem;
  font-size: 1.1rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: var(--neon-purple);
  color: white;
  box-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-cyan);
  transition: transform 0.2s;
}
.restart-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px var(--neon-cyan), 0 0 30px var(--neon-purple);
}



/** style page game end */

/* Styles du popup */
.popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: #111;
  color: #fff;
  padding: 20px;
  max-width: 350px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 0 20px cyan;
  font-family: "Rubik", sans-serif;
  animation: popin 0.5s ease;
  position: relative;
}

.popup-close {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 28px;
  cursor: pointer;
  color: #fff;
}

.popup-btn-quiz {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background: cyan;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
}

@keyframes popin {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
/**style de la page 90stv end **/


    @keyframes roll{to{transform:translateX(-100%)}}

    /* Accessibilité petites largeurs */
    @media (max-width:600px)
    {
      .tape{flex-direction:column; 
        align-items:stretch}

        
      .polaroid img {height:140px} 
      
      

      .card {
        
        width: 20vh;
        margin: auto;
        
            
      }


  nav.cta {
    display: grid;
    grid-template-columns: repeat(2, 2fr); /* 2 colonnes */
    gap: 12px;
  }

  nav.cta a.btn {
    flex: unset;       /* on enlève le flex */
    max-width: unset;  /* sinon ça limite */
    text-align: center;
  }

  #quiz-container span {

  font-family: "Press Start 2P", monospace;
  font-size: clamp(12px, 2.5vw, 24px);
  color: rgba(255,61,165,.8);
  margin-bottom: 5px;
  margin-top: 5px;
}

#quiz-container h2 {

  font-size: clamp(15px, 2.5vw, 24px);
  margin-bottom: 5px;
  
}

/** responsive des card de l'index pour affichage 2 photos horizontales**/
   .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  /* Taille des cards-polaroid */
  .card.polaroid {
    width: 100%;        /* Chaque card prend la largeur d'une colonne */
    max-width: 140px;   /* Limite la taille maximale */
    margin: 0 auto;     /* Centre la card */
    padding: 5px;       /* Ajuste l'espace intérieur */
  }

  /* Images à l’intérieur */
  .card.polaroid img {
    width: 100%;        /* Remplit la card */
    max-width: 120px;   /* Ne dépasse jamais 120px */
    height: auto;       /* Conserve les proportions */
    display: block;
    margin: 0 auto;     /* Centre horizontalement */
    object-fit: contain; /* Évite la déformation */
  }
   .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  /* Taille des cards-polaroid */
  .card.polaroid {
    width: 100%;
    max-width: 140px;
    margin: 0 auto;
    padding: 5px;
  }

  /* Images à l’intérieur */
  .card.polaroid img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* Légendes centrées */
  .card.polaroid .caption {
    text-align: center;
    font-size: 0.9rem;
  }
  
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  /* Cards polaroid */
  .card.polaroid {
    width: 100%;        /* prend toute la largeur de sa colonne */
    max-width: 140px;   /* limite la taille max */
    margin: 0 auto;     /* centre horizontalement */
    padding: 5px;
  }

  /* Images à l’intérieur */
  .card.polaroid img {
    width: 100%;        /* remplit la card */
    height: auto;       /* conserve les proportions */
    object-fit: contain; 
    display: block;
    margin: 0 auto;
  }

  /* Caption centré */
  .card.polaroid .caption {
    text-align: center;
    font-size: 0.9rem;
  }

    .playlist {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 var(--gap);
  }

  .tape {
    display: flex;
    flex-direction: row;       /* logo à gauche, infos à droite */
    align-items: flex-start;   /* logo aligné en haut */
    gap: 12px;
    padding: 10px;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: var(--shadow);
  }

  .tape .icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-image: url('pictures/k7.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;            /* empêche le logo de rétrécir */
    margin-top: 2px;           /* ajuste la position verticale */
  }

  .tape > div:not(.icon) {
    display: flex;
    flex-direction: column;    /* date au-dessus du titre */
    justify-content: flex-start;
  }

  .tape .badge {
    display: inline-block;       /* s'ajuste au texte */
  width: auto;                 /* pas de largeur forcée */
  padding: 2px 6px; 
 background: linear-gradient(135deg, #ff00ff, rgba(56,255,245,.7));
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1;
  align-self: flex-start;  
  color: white;
  margin: 5px;


    color: black;
  }

  .tape h3 {
    margin: 0;
    font-size: 0.95rem;
  }

  .tape audio {
    margin-top: 4px;
    width: 100%;
  }

  /** ajustement brnad fix respo **/

      .brand{
     
        min-width: 350px; /* largeur minimale */
  max-width: 350px; /* largeur maximale */
  text-align: center;
    }
}