/* =========================
       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;
    }

    /* =========================
       Header / Hero
    ==========================*/


    /* Desktop par défaut */
/* Desktop par défaut */
.logo-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@keyframes neonGlow {
  0%, 100% {
    box-shadow: 0 0 1px 3px #9b5cff;
  }
  50% {
    box-shadow: 0 0 12px 8px #9b5cff;
  }
}


.logo-title img {
  animation: neonGlow 2s infinite ease-in-out;
  /* supprime l'ancien box-shadow statique pour que l'animation fonctionne */
}

.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 0px 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;
}
/* 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;

    }

    /** ajustement brnad fix respo **/

@media (max-width: 600px) {

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


   
    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;
  }
  .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;
  }

  }

 /* Timeline 2 page time*/

    .timeline-section {

         display:flex; 
         flex-direction:column; 
         align-items:center;
          margin:2rem 1rem;
          text-align: center;
          line-height: 1.5;
         width:900px;
         margin: auto;
        padding-top: 20px;
         height: 700px;
            /* Effet carte néon */
        background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
           background:  linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.1)), /* voile noir 50% */
    url("timelineimg//pexels-steve-29101885.jpg") no-repeat center center;
  background-size: cover;
       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 */

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

}

      @media (max-width: 768px) {
        
        .timeline-section {

         display:flex; 
         flex-direction:column; 
         align-items:center;
          margin:2rem 1rem;
          text-align: center;
          line-height: 1.5;
          width: auto;
          height: 600px;
         padding-bottom: 20px 
          
      ;  }
     
     
      .timeline-image img{
        width: 90%;
        margin-top: 20px;
      
         }
         
      #timeline-image {
       height: 420px;
      
         }
        .timeline-track {
          width: 7%;
          margin: auto;
        }
        
        }


    .timeline-track {
         position:relative; 
         width:90%; max-width:500px;
          height:4px; background:#555; 
          margin:2rem 0; }


    .timeline-cursor {
         position:absolute;
          top:-6px; width:16px; height:16px;
           background:#e91e63; 
           border-radius:50%;
            cursor:pointer; 
            transform:translateX(-50%); 
        }

    .timeline-dates { 

        display:flex;
         justify-content:space-between; 
         position:absolute; 
         top:20px; width:100%;
          font-size:0.7rem; 
          flex-wrap:wrap; }

    .timeline-dates span {
         cursor:pointer;
       
     
         
         }
    .timeline-image { 
        margin-top:1rem; 
        max-width:90%; 
        text-align:center; 
   
    }
   .timeline-image {
  width: 500px;   /* largeur fixe */
  height: 500px;  /* hauteur fixe */
  display: flex;
    flex-direction: column; /* Met l'image et le texte en colonne */
  align-items: center;    /* Centrer horizontalement */
  gap: 10px;              /* Petit espace entre image et texte */
  align-items: center;
  justify-content: center;
  background: #000; /* optionnel : fond noir pour combler la transparence */
  border-radius: 10px; /* optionnel */
  overflow: hidden;}



.timeline-image img {
  max-width: 100%;
  max-height: auto;
  object-fit: contain; /* garde tout l’objet même en PNG */
  border-radius: 15px;

}
#timeline-caption {
  text-align: justify;
  margin-top: 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  color: #fff;
  width: 92%;


}

/** style bouton reotur timeline */
.back-btn {
  display: block;
  width: fit-content;      /* mais s’ajuste au texte */
  margin: 20px auto;  
  padding: 12px 28px;
  background: var(--card);
  color: var(--neon-cyan);
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  border: 2px solid var(--neon-cyan);
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  box-shadow: 0 0 12px var(--neon-cyan), inset 0 0 8px rgba(56, 255, 245, 0.3);
  transition: all 0.25s ease;
}

.back-btn:hover {
  background: var(--neon-cyan);
  color: var(--bg);
  box-shadow: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan);
  text-decoration: none;
  transform: scale(1.05);
}




    @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 {
  margin: 40px auto;
  padding: 24px;
  max-width: 300px;
  min-height: 30vh;


}}


/*** visuel de la page recap rimeline **/




.timeline-btn {
  display: block;
  width: 220px;
  margin: 20px auto;
  padding: 16px 0;
  border-radius: var(--radius);
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  transition: all 0.3s ease;
  color: var(--text);
}


.neon-cyan {
  color: var(--neon-cyan);
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
  animation: neonPulseCyan 2s infinite ease-in-out;
}

.neon-pink {
  color: var(--neon-pink);
  border: 2px solid var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
  animation: neonPulsePink 2s infinite ease-in-out;
}

.neon-purple {
  color: var(--neon-purple);
  border: 2px solid var(--neon-purple);
  box-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
  animation: neonPulsePurple 2s infinite ease-in-out;
}

/* Hover général */
.timeline-btn:hover {
  transform: scale(1.05);
  color: var(--bg);
  background-color: rgb(180, 255, 255);
  box-shadow: 0 0 25px currentColor, 0 0 50px currentColor;
}

/* Animations neon pulse */
@keyframes neonPulseCyan {
  0%, 100% { box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan); }
  50% { box-shadow: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan); }
}

@keyframes neonPulsePink {
  0%, 100% { box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink); }
  50% { box-shadow: 0 0 20px var(--neon-pink), 0 0 40px var(--neon-pink); }
}

@keyframes neonPulsePurple {
  0%, 100% { box-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple); }
  50% { box-shadow: 0 0 20px var(--neon-purple), 0 0 40px var(--neon-purple); }
}