@charset "UTF-8";
/* CSS Document */


/* ------------------- FONTS ------------------- */

@font-face {
  font-family: 'over_pixelregular';
  src: url('fonts/over_pixel-webfont.woff2') format('woff2'),
       url('fonts/over_pixel-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
    font-family: 'the_x-filesregular';
    src: url('fonts/the_x-files-webfont.woff2') format('woff2'),
         url('fonts/the_x-files-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'perfect_dos_vga_437_winRg';
    src: url('fonts/perfect_dos_vga_437_win-webfont.woff2') format('woff2'),
         url('fonts/perfect_dos_vga_437_win-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



/* ------------------- RESET GLOBAL ------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  overflow-x: hidden; /* bloque le scroll horizontal */
}

html {
  scroll-behavior: smooth;
}


body {
  font-family: "Courier New", monospace;
  background: #fff;
  color: #000;
  line-height: 1.4;
}


/* ------------------- HERO (bannière d’accueil) ------------------- */
.hero {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background: url("img/jack.gif") center/cover no-repeat;
  background-color: #000; /* évite le flash gris avant le gif */
  animation: hueShift 6s infinite linear;
  border-bottom: 10px double red;
}

@keyframes hueShift {
  from { filter: hue-rotate(0deg) contrast(200%) saturate(250%); }
  to   { filter: hue-rotate(360deg) contrast(200%) saturate(250%); }
}

.hero h1 {
  font-size: 5rem;
  text-transform: uppercase;
  background: rgb(255 255 0 / 80%);
  color: red; /* couleur de base */
  padding: 1rem 2rem;
  border: 8px groove blue;
  box-shadow: 8px 8px 0 lime, -8px -8px 0 magenta;
  font-family: "over_pixelregular", "Comic Sans MS", Impact, sans-serif;
  display: inline-block;
  letter-spacing: 0.2rem;
  white-space: pre; /* garde les espaces et crochets */
}

.hero h1 span {
  display: inline-block;
  color: red; /* départ */
  transition: color 0.3s ease;
}

.hero h1 span.active {
  color: lime; /* couleur finale */
}

/* ------------------- MENU UGLY 90s ------------------- */
.menu-ugly {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  background: #111;
  border-top: 6px solid cyan;
  border-bottom: 6px solid magenta;
  position: relative;
}

.btn-ugly {
  display: inline-block;
  background: red;
  color: yellow;
  font-family: "Comic Sans MS", Impact, sans-serif;
  font-size: 1.7rem;
  padding: 1rem 2rem;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  border: 8px double blue;
  outline: 6px groove lime;
  box-shadow: 8px 8px 0px magenta, -6px -6px 0px cyan;
  transition: all 0.2s ease;
}

.btn-ugly:hover {
  background: yellow;
  color: red;
  border: 8px dashed magenta;
  outline: 6px ridge black;
  transform: scale(1.1) rotate(-3deg);
}

/* petites étoiles flashy autour du menu */
.menu-ugly::before,
.menu-ugly::after {
  content: "★";
  font-size: 3rem;
  color: lime;
  margin: 0 1rem;
  animation: blink 0.6s infinite alternate;
}

.menu-ugly::after {
  color: magenta;
  animation-delay: 0.3s;
}

@keyframes blink {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0.2; transform: scale(1.5); }
}

	
/* ------------------- SECTION INTRO ------------------- */
	
#intro h1 {
  text-align: center;            /* centrage horizontal */
  font-size: 4rem;               /* même taille que Inspiration */
  background: yellow;            /* même fond */
  color: red;                    /* mais texte en rouge */
  padding: 1rem;
  border-bottom: 5px solid #000; /* pour garder la cohérence brutaliste */
  font-family: "Courier New", monospace;
}
	
	/* SECTION INTRO */
#intro {
  background: #add8e6; /* bleu clair derrière */
  border-bottom: 5px solid black;
  padding: 0; /* pas de padding pour que le H1 colle bien */
}


/* Disposition en 2 colonnes */
.intro-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  max-width: 1400px;
  margin: 2rem auto;
  padding: 2rem;
}

/* Photo à gauche */
.intro-photo img {
  max-width: 300px;
  border: 6px solid magenta;
  box-shadow: 8px 8px 0 cyan;
  display: block;
}

/* Texte à droite */
.intro-text {
  flex: 1;
  text-align: left;
  font-family: "Courier New", monospace;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #000;
	font-weight: 600;
}

	
#typewriter {
    font-family: "Courier New", monospace;
    font-size: 2.5rem;
    background: black;
    color: #03ffff;
    padding: 1rem;
    border: 4px solid #ff00ff;
    display: inline-block;
    white-space: nowrap;
	margin-bottom: 1rem;
}

span.signature {
    font-size: 2rem;
    color: #ff00ff;
}

/* Curseur multicolore clignotant */
.cursor {
  display: inline-block;
  width: 1ch;
  font-weight: bold;
  animation: blinkColors 1.2s infinite; /* ralentit par 2 */
}

@keyframes blinkColors {
  0%   { color: lime; opacity: 1; }
  25%  { color: cyan; opacity: 1; }
  50%  { color: magenta; opacity: 0; }
  75%  { color: yellow; opacity: 1; }
  100% { color: red; opacity: 0; }
}

	.photo-icons {
  display: flex;
  justify-content: center;
		gap: 1.05rem;
    margin-top: 1.5rem;
}

.photo-icons img {
  width: auto;
  height: 47px;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.photo-icons img:hover {
  transform: scale(1.2) rotate(-10deg);
  filter: hue-rotate(90deg) contrast(200%);
}

	
	
/* ------------------- SECTION CREATION ------------------- */
	
.creation-title {
  font-size: 4rem!important;
  background: none!important;
  padding: 0.5rem 1rem;
  display: inline-block;
  margin-bottom: 1rem;
  border: none!important;
}

/* Bordure animée façon GIF */
@keyframes border-shift {
  0% { border-image: linear-gradient(90deg, red, blue, lime, magenta) 1; }
  25% { border-image: linear-gradient(90deg, yellow, magenta, cyan, lime) 1; }
  50% { border-image: linear-gradient(90deg, blue, red, yellow, green) 1; }
  75% { border-image: linear-gradient(90deg, magenta, cyan, red, lime) 1; }
  100% { border-image: linear-gradient(90deg, red, blue, lime, magenta) 1; }
}

/* Lettres saccadées comme un GIF */
.creation-title span {
  display: inline-block;
  animation: letter-gif 1s steps(1) infinite;
}

/* Palette flashy rétro */
@keyframes letter-gif {
  0%   { color: red; transform: scale(1); }
  25%  { color: lime; transform: scale(1.2); }
  50%  { color: cyan; transform: scale(1); }
  75%  { color: magenta; transform: scale(1.2); }
  100% { color: yellow; transform: scale(1); }
}

/* Décalage de chaque lettre */
.creation-title span:nth-child(1) { animation-delay: 0s; }
.creation-title span:nth-child(2) { animation-delay: 0.1s; }
.creation-title span:nth-child(3) { animation-delay: 0.2s; }
.creation-title span:nth-child(4) { animation-delay: 0.3s; }
.creation-title span:nth-child(5) { animation-delay: 0.4s; }
.creation-title span:nth-child(6) { animation-delay: 0.5s; }
.creation-title span:nth-child(7) { animation-delay: 0.6s; }
.creation-title span:nth-child(8) { animation-delay: 0.7s; }
.creation-title span:nth-child(9) { animation-delay: 0.8s; }

	


/* ------------------- TITRES AVEC FLÈCHES ------------------- */
.title {
  position: relative;
  display: inline-block;
  background: yellow;
  color: black;
  padding: 0.5rem 1rem;
  border: 4px solid blue;
  font-size: 3rem;
  font-family: "Courier New", monospace;
}

.title::before,
.title::after {
  content: url("img/arrowright.gif");
  vertical-align: middle;
  margin: 0 10px;
  display: inline-block;
  position: relative;
  top: 6px; /* ajuste verticalement */
}

.title::after {
  transform: scaleX(-1); /* retourne la flèche de droite */
}
	
/* ------------------- CREATIONS ------------------- */
	
#creation {

	background: #111 url("img/starfield2.gif") repeat ;
	animation: moveStars 60s linear infinite;
  color: #fff;
  padding: 3rem 2rem;
  border-top: 6px solid magenta;
}

.creation-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1100px;
  margin: auto;
}

.creation-text {
  flex: 1;
  font-family: "Courier New", monospace;
}

.creation-title {
  font-size: 3rem;
  background: yellow;
  color: black;
  padding: 0.5rem 1rem;
  border: 4px solid blue;
  display: inline-block;
  margin-bottom: 1rem;
}

.creation-gallery {
  flex: 1;
  position: relative;
  overflow: hidden;
  max-width: 550px;
  border: none!important;
  flex-shrink: 0;
  border: none;
}

.gallery-track {
  display: flex;
	 gap: 15px; 
	 transform: translateX(calc(-100% * var(--gallery-index) - var(--gallery-index) * 15px));
    /* Rajoute cette ligne si elle n'y est pas */
    transition: transform 0.5s ease-in-out;
}

.gallery-track img {
  flex-shrink: 0;
  display: block;
	 object-fit: cover;
    width: 100%;
    height: 100%;
  z-index: 1;
  /* effet pixel par défaut */
  image-rendering: pixelated;
  filter: contrast(200%) brightness(120%) saturate(150%);
  transition: all 0.4s ease;
	  border: 5px solid cyan!important;
}

.gallery-track img:hover {
  image-rendering: auto; /* revient à la netteté normale */
  filter: none;
}
.creation-gallery button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;         /* pas de fond rouge */
  border: none;             /* pas de bordure */
  padding: 0;
  cursor: pointer;
  z-index: 10;              /* au-dessus des images */
}

.creation-gallery button img {
  width: 50px;              /* taille de ton gif */
  height: auto;
}

/* bouton gauche */
.gallery-prev { left: 10px; }
	.gallery-prev img {
  transform: scaleX(-1);
}


/* bouton droit (on retourne l'image) */
.gallery-next { right: 10px; }
.gallery-next img {
  transform: scaleX(1);
}


.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
	
	/* Style réservé à la photo principale */
.photo-main {
  max-width: 300px;
  border: 6px solid magenta;
  box-shadow: 8px 8px 0 cyan;
  display: block;
  margin-bottom: 1rem;
}


/* ------------------- GALERIE ------------------- */
#galerie {
  padding: 0;
  margin: 0;
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
}

#galerie h2 {
  text-align: center;
  font-size: 4rem;
  background: yellow;
  border-bottom: 5px solid #000;
  padding: 1rem;
}

.galerie {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  width: 100%;
}

.galerie img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 2px solid #000;
  filter: saturate(250%) contrast(180%) brightness(110%);
  transition: filter 0.25s ease, transform 0.25s ease;
}

.galerie img:hover {
  transform: scale(1.2) rotate(-6deg);
  z-index: 5;
  filter: hue-rotate(45deg) saturate(400%) contrast(200%) invert(10%);
  border: 5px dashed red;
}
	

/* ------------------- GUESTBOOK ------------------- */
#guestbook {
  background: #000 url("img/starfield.gif") repeat;
  animation: moveStars 60s linear infinite;
  background-size: auto;
  color: #fff;
  padding: 2rem;
  border-top: 6px solid magenta;
  text-align: center;
}

@keyframes moveStars {
  from { background-position: 0 0; }
  to   { background-position: 1000px 1000px; }
}

#guestbook h2 {
  font-size: 3rem;
  background: yellow;
  color: black;
  padding: 0.5rem 1rem;
  display: inline-block;
  border: 4px solid blue;
}

.guestbook {
background: #00aaff;
  color: black;
  padding: 1rem;
  margin: 2rem auto;
  max-width: 800px;
  height: 400px;              /* hauteur fixe du cadre */
  overflow-y: scroll;         /* active le scroll vertical */
  text-align: left;
  border: 3px inset #fff;
  font-family: "Comic Sans MS", sans-serif;
  scrollbar-color: magenta yellow; /* couleurs kitsch du scroll (Firefox) */
  scrollbar-width: thin;
}

	
	
/* Pour Chrome/Safari/Edge : scrollbar rétro fluo */
.guestbook::-webkit-scrollbar {
  width: 12px;
}
.guestbook::-webkit-scrollbar-track {
  background: yellow;
}
.guestbook::-webkit-scrollbar-thumb {
  background: magenta;
  border: 2px solid black;
}
	
	

.guestbook p {
  padding: 0rem 0rem 1.5rem 0rem;
}

#sign-in {
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  background: silver;
  border: 3px outset #ccc;
  font-family: monospace;
  cursor: pointer;
}

#sign-in2 {
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  background: silver;
  border: 3px outset #ccc;
  font-family: monospace;
  cursor: pointer;
}

/* ------------------- FENÊTRE WINDOWS 95 ------------------- */
.win95 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #c0c0c0;
  border: 3px solid #000;
  width: 300px;
  font-family: "MS Sans Serif", sans-serif;
  box-shadow: 6px 6px 0 #333;
  z-index: 9999;
  display: none; /* masquée par défaut */
}

.win95.active {
  display: block;
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  20%  { transform: translate(calc(-50% - 10px), -50%) rotate(-2deg); }
  40%  { transform: translate(calc(-50% + 10px), -50%) rotate(2deg); }
  60%  { transform: translate(calc(-50% - 6px), -50%) rotate(-1deg); }
  80%  { transform: translate(calc(-50% + 6px), -50%) rotate(1deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

.win95 .title-bar {
  background: navy;
  color: #fff;
  padding: 4px;
  font-weight: bold;
  font-size: 14px;
}

.win95 .content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  font-size: 14px;
  color: black;
}

.win95 .actions {
  text-align: center;
  padding: 10px;
}

.win95 .actions button {
  padding: 5px 20px;
  border: 2px outset #fff;
  background: #c0c0c0;
  cursor: pointer;
}
	



/* ------------------- QUIZ ------------------- */
#quiz {
  text-align: center;
  padding: 2rem;
  background: #ffff00;
  color: yellow;
}

/* Style pour le titre du quizz */
.quiz-title {
  background: #ff0;                  /* jaune pétant */
  color: #000;                       /* noir franc */
  display: inline-block;
  padding: 0.5rem 1.5rem;
  font-family: "Courier New", monospace;
  font-size: 3.5rem;
  text-transform: uppercase;

  /* plusieurs ombres décalées pour l’effet relief brutaliste */
  text-shadow: 
 2px 2px 0 magenta,
  4px 4px 0 cyan,
  6px 6px 0 lime,
  8px 8px 0 red,
  10px 10px 0 orange,
  12px 12px 0 blue,
  14px 14px 0 yellow,
  16px 16px 0 purple,
  18px 18px 0 deeppink;
  margin: 1rem auto;
}


/* Style pour la description du quizz */
.quiz-desc {
  margin-top: 1rem;
  font-size: 1.2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  background: #00ff00;
  color: #000;
  padding: 1rem;
  border: 8px dashed magenta;
  font-family: "Courier New", monospace;
  line-height: 1.5;
	margin-bottom: 2.3rem;
}	
	
.quiz-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide {
  margin: 0 1rem;
  position: relative; /* nécessaire pour overlay feedback */
  display: inline-block;
}

/* Image avec tremblotte */
.slide img {
  max-width: 600px;
  border: 5px solid magenta;
  margin-bottom: 2rem;
  display: block;
  animation: subtleShake 2s infinite ease-in-out; /* discret */
  transition: animation 0.3s ease-in-out;
  z-index: 1;
}

.slide img:hover {
  animation: intenseShake 0.3s infinite; /* mode turbo au survol */
}

/* Tremblotte légère */
@keyframes subtleShake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1px, -1px); }
  50%  { transform: translate(-1px, 1px); }
  75%  { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* Tremblotte forte */
@keyframes intenseShake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-3px, 2px) rotate(-1deg); }
  40%  { transform: translate(3px, -2px) rotate(1deg); }
  60%  { transform: translate(-2px, 3px) rotate(1deg); }
  80%  { transform: translate(2px, -3px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Feedback (bonne ou mauvaise réponse) */
#feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: lime;
  text-shadow: 2px 2px 4px black;
  background: rgba(0,0,0,0.6);
  padding: 0.5rem 1rem;
  border: 3px solid #fff;
  display: none;
  animation: pop 0.5s ease;
  z-index: 10;
}
	
	#feedback.correct {
  color: lime;
  border: 3px solid lime;
}

#feedback.wrong {
  color: red;
  border: 3px solid red;
}
	

/* Boutons réponses */
.buttons button {
  margin: 0.5rem;
  padding: 1rem 2rem;
  background: red;
  color: white;
  border: 3px solid black;
  font-weight: bold;
}

/* Navigation flèches */
.nav {
  background: none;
  border: none;
  cursor: pointer;
}

.nav img {
  width: 80px;
  height: auto;
  transform: scaleX(-1);
}

.nav img.flipped {
  transform: scaleX(1);
}

/* Score final */
#score {
  margin-top: 2rem;
  font-size: 2rem;
  font-weight: bold;
  color: black;
}

/* Le "ou" qui tremblotte/floute */
.ou {
  color: black;
  font-family: "Courier New", monospace;
  font-size: 3rem;
  font-weight: bold;
  animation: shakeText 0.2s infinite;
  display: inline-block;
}

@keyframes shakeText {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1px, -1px); }
  50%  { transform: translate(-1px, 1px); }
  75%  { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* ------------------- QUIZ ------------------- */
	
	  footer {
      background: #000;
      color: #fff;
      padding: 2rem;
      text-align: center;
      border-top: 5px solid #ff3ac0;
          
    }
	
/* ------------------- PLAYER ------------------- */
	
	#webamp-container {
  width: 600px;
  height: 400px;
  display: block;
  margin-left: 0;
  margin-right: 0;
}
	/* ------------------- RANDOM IMG ------------------- */
	
	
.random-image {
    position: fixed;
    width: 200px;
    height: auto;
    z-index: 9999;
    display: none;
	margin: -9px;
  }

  /* Animations */
  @keyframes slideInLeft  { from { left: -220px; } to { left: 0; } }
  @keyframes slideOutLeft { from { left: 0; } to { left: -220px; } }

  @keyframes slideInRight  { from { right: -220px; } to { right: 0; } }
  @keyframes slideOutRight { from { right: 0; } to { right: -220px; } }

  @keyframes slideInTop  { from { top: -220px; } to { top: 0; } }
  @keyframes slideOutTop { from { top: 0; } to { top: -220px; } }

  @keyframes slideInBottom  { from { bottom: -220px; } to { bottom: 0; } }
  @keyframes slideOutBottom { from { bottom: 0; } to { bottom: -220px; } }
	
	
	/* ------------------- SCROLL ------------------- */
	
/* Scrollbar globale */
::-webkit-scrollbar {
  width: 28px;   /* bien épaisse */
  height: 28px;
  background: #c0c0c0; /* gris clair classique */
}

/* Rail */
::-webkit-scrollbar-track {
  background: #c0c0c0;
  border: 2px solid #808080;
  box-shadow: inset 2px 2px #fff, inset -2px -2px #404040;
}

/* Pouce (thumb) */
::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  border: 2px solid #808080;
  box-shadow: inset 2px 2px #fff, inset -2px -2px #404040;
}

/* Boutons flèches haut/bas */
::-webkit-scrollbar-button:single-button {
  background: #c0c0c0;
  border: 2px solid #808080;
  height: 28px;
  display: block;
  box-shadow: inset 2px 2px #fff, inset -2px -2px #404040;
}

/* Flèche haut */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><polygon points='0,8 4,0 8,8' fill='black'/></svg>");
}

/* Flèche bas */
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><polygon points='0,0 4,8 8,0' fill='black'/></svg>");
	
	::-webkit-scrollbar-button:single-button {
  background: red !important;
}
	
	}


	/* ------------------- CONTACT ------------------- */
	
	#contact h1 {
    text-align: center;
    font-size: 4rem;
    background: yellow;
    color: red;
    padding: 1rem;
    border-bottom: 5px solid #000;
    font-family: "Courier New", monospace;
}
	
	#contact {
  background: #FFF;
  color: #000;
  padding: 50px;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
}

.contact-container {
  display: flex;
  gap: 40px;
  margin-top: 20px;
}

.contact-form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-form label {
  margin-top: 15px;
}

.contact-form input,
.contact-form textarea {
  background: #ffff00; /* jaune pétant */
  color: #000;
  font-size: 16px;
  font-family: "Courier New", monospace;
  padding: 10px;
  margin-top: 5px;
  outline: none;

  /* triple cadre brutaliste */
  border: 4px solid #ff00ff; /* magenta */
  box-shadow:
    4px 4px 0 #00ff00,     /* vert flashy décalé */
    -4px -4px 0 #0000ff,   /* bleu électrique opposé */
    8px 8px 0 #ff0000;     /* rouge sang, encore plus loin */
}
	
	/* État hover : couleurs changées */
.contact-form input:hover,
.contact-form textarea:hover {
  background: #00ffff; /* cyan pétant */
  border: 4px solid #00ff00; /* vert fluo */
  box-shadow:
    4px 4px 0 #ff00ff,   /* magenta */
    -4px -4px 0 #ff8800, /* orange criard */
    8px 8px 0 #000000;   /* noir profond */
}

.contact-form textarea {
  resize: none;
  height: 120px;
}

.contact-fake-map {
  flex: 1;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-placeholder {
  color: #0f0;
  font-size: 20px;
	width: 100%;
  height: 100%;
}

.map-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* ou "contain" si tu veux garder les proportions sans couper */
  display: block;
}

	#boutoncontact {
  width: 250px;
  display: block; /* optionnel, pour forcer la largeur même si inline-block */
		    margin: auto;
    margin-top: 2rem;
}
	
.error2 {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 300px;
  height: 150px;           /* ✅ hauteur figée */
  background: #fff;
  border: 3px solid #0000ff;
  box-shadow: 5px 5px 0 #000;
  font-family: "Courier New", monospace;
  z-index: 9999;
  display: flex;           /* ✅ pour gérer header/body/footer */
  flex-direction: column;
  overflow: hidden;        /* ✅ rien ne déborde */
}

.error2-header {
  background: #0000ff;
  color: #fff;
  font-weight: bold;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.error2-header .close {
  background: red;
  color: #fff;
  border: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.error2-body {
  flex: 1;                 /* ✅ occupe tout l’espace restant */
  padding: 10px;
  color: #000;
  text-align: center;
  overflow: hidden;        /* ✅ coupe si texte trop long */
}

.error2-footer {
  flex: 0 0 30px;          /* ✅ fixe la zone bouton */
  text-align: center;
  padding: 5px;
}
	
.error2-footer button {
  background: #c0c0c0;
  border: 2px solid #808080;
  padding: 5px 15px;
  cursor: pointer;
}


	/* ------------------- ERROR ------------------- */

body.error-404 {
  margin: 0;
  padding: 0;
  background: #0000aa; /* fond bleu BSOD */
  overflow: hidden;
  font-family: "Courier New", monospace;
  color: #fff;
}

canvas#binary-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.error-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(0,0,0,0.6);
  padding: 20px 40px;
  border: 3px solid #fff;
  box-shadow: 5px 5px 0 #000;
  animation: floaty 4s ease-in-out infinite;
}

.error-message h1 {
  font-size: 4rem;
  margin: 0 0 10px;
  font-family: "Courier New", monospace;
}

.error-message p {
  font-size: 1.2rem;
}

/* Animation flottement */
@keyframes floaty {
  0%   { transform: translate(-50%, -50%) translateY(0); }
  50%  { transform: translate(-50%, -50%) translateY(-8px); }
  100% { transform: translate(-50%, -50%) translateY(0); }
}

/* Animation tremblement */
@keyframes shake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  20% { transform: translate(calc(-50% + 2px), calc(-50% + 2px)) rotate(-1deg); }
  40% { transform: translate(calc(-50% - 2px), calc(-50% - 2px)) rotate(1deg); }
  60% { transform: translate(calc(-50% + 2px), calc(-50% - 2px)) rotate(-1deg); }
  80% { transform: translate(calc(-50% - 2px), calc(-50% + 2px)) rotate(1deg); }
}

.error-message:hover {
  animation: shake 0.3s infinite;
}


/* ------------------- CGU ETC------------------- */

body.cgu {
  margin: 0;
  padding: 0;
  background: #000;
  color: #0ff;
  font-family: "Comic Sans MS", "Courier New", monospace;
  text-align: center;
}


body.cgu .folders-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 8 colonnes */
  justify-items: center;
  align-items: center;

  width: 80%;       /* occupe toute la largeur */
  max-width: none;   /* supprime la limite */
  margin: 0 auto;    /* garde un centrage si besoin */
}


body.cgu header {
  padding: 20px;
  border-bottom: 8px double magenta;
  background: #000;
  animation: borderFlash 3s linear infinite;
}

@keyframes borderFlash {
  0%   { border-color: magenta; }
  25%  { border-color: cyan; }
  50%  { border-color: lime; }
  75%  { border-color: yellow; }
  100% { border-color: magenta; }
}



body.cgu header {
  position: relative;
  height: 400px;         /* hauteur du bloc */
  overflow: hidden;      /* masque le débordement */
  background: #000;
  display: flex;
  justify-content: center;
}

body.cgu header img {
  position: absolute;
  top: -100%;              /* démarre au-dessus du bloc */
  animation: scrollDown 4s steps(8, end) infinite;
}

/* Animation brutale façon loop */
@keyframes scrollDown {
  0% {
    top: -100%;            /* complètement au-dessus */
  }
  100% {
    top: 100%;             /* descend et sort par le bas */
  }
}




body.cgu h1 {
  font-family: 'the_x-filesregular', "Comic Sans MS", Impact, sans-serif;
  font-size: 4rem;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  padding: 1rem 2rem;
  margin: 2rem 0;
  
  animation: glitchyBlink 1s infinite steps(2, jump-none);
}

/* Animation glitch */
@keyframes glitchyBlink {
  0%   { color: #ff00ff; text-shadow: 2px 0 cyan, -2px 0 lime; }
  20%  { color: #00ffff; text-shadow: -2px -2px magenta, 2px 2px yellow; }
  40%  { color: #ffff00; text-shadow: 2px 2px red, -2px -2px cyan; }
  60%  { color: #ff0000; text-shadow: -3px 1px lime, 3px -1px blue; }
  80%  { color: #00ff00; text-shadow: 2px -2px magenta, -2px 2px yellow; }
  100% { color: #fff; text-shadow: none; }
}

body.cgu section {
  max-width: 1200px;
  margin: auto;
  padding: 2rem;
  background: none;
}

body.cgu p {
font-size: 1rem;
    text-align: justify;
    line-height: normal;
    color: #03ff00;
	    font-family: monospace, monospace;
}

body.cgu .folder {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

body.cgu .folder img {
  width: 120px; /* taille dossier */
  height: auto;
  image-rendering: pixelated;
  transition: transform 0.2s ease-in-out;
}

.matrixementvotre
{background: url("img/truthpattern.gif") repeat;
  background-size: auto;     }   
	
/* Effet global */
body.cgu .folder:hover img {
  animation: shake 0.4s infinite;
  filter: hue-rotate(45deg) saturate(400%) contrast(200%) invert(10%);
  border: 8px dashed blue;        /* <-- dashed au lieu de double */

}

/* Effet spécial pour le dossier #cgu */
body.cgu #cgu2:hover img, body.cgu #cgu3:hover img  {
  animation: shake 0.4s infinite;
  filter: hue-rotate(180deg) saturate(600%) contrast(250%);
  border: 8px dashed orange;      /* <-- ici aussi */

}
/* Effet spécial pour le dossier #cgu */
body.cgu #cgu5:hover img, body.cgu #cgu5:hover img  {
  animation: shake 0.4s infinite;
  filter: hue-rotate(180deg) saturate(600%) contrast(250%);
  border: 8px dashed orange;      /* <-- ici aussi */

}

/* Effet spécial pour le dossier #cgu */
body.cgu #cgu4:hover img, body.cgu #cgu4:hover img  {
  animation: shake 0.4s infinite;
  filter: hue-rotate(180deg) saturate(600%) contrast(250%);
  border: 8px dashed orange;      /* <-- ici aussi */

}

/* Effet spécial pour le dossier #cgu */
body.cgu #cgu6:hover img, body.cgu #cgu6:hover img  {
  animation: shake 0.4s infinite;
  filter: hue-rotate(180deg) saturate(600%) contrast(250%);
  border: 8px dashed orange;      /* <-- ici aussi */

}

/* Effet spécial pour le dossier #cgu */
body.cgu #cgu7:hover img, body.cgu #cgu7:hover img  {
  animation: shake 0.4s infinite;
  filter: hue-rotate(180deg) saturate(600%) contrast(250%);
  border: 8px dashed orange;      /* <-- ici aussi */

}

/* Effet spécial pour le dossier #cgu */
body.cgu #cgu8:hover img, body.cgu #cgu8:hover img  {
  animation: shake 0.4s infinite;
  filter: hue-rotate(180deg) saturate(600%) contrast(250%);
  border: 8px dashed orange;      /* <-- ici aussi */

}


body.cgu .folder p {
  margin-top: 1rem;
  font-family: "over_pixelregular", "Comic Sans MS", Impact, sans-serif;
  font-size: 1.5rem;
  color: #ff3ac0;
  text-transform: uppercase;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

.links-footer {
  display: flex;
  justify-content: center;
  gap: 2rem; /* espace entre les liens */
  margin-top: 1rem;
}

.links-footer a {
  font-family: "Comic Sans MS", cursive;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* espace entre icône et texte */
  padding-bottom: 3px;
  transition: all 0.2s ease;
	 border-bottom: 2px dashed black; /* effet rétro */
}

.links-footer a img {
  width: 14px;   /* taille de ton icône */
  height: 14px;
}

.links-footer a:hover {
  color: magenta; /* couleur au survol */
  border-bottom: 2px dashed cyan; /* effet rétro */
}


/* ------------------- MODAL ------------------- */

/* Container modale */
.modal-container {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
      background: rgb(0 0 0 / 90%);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}


/* Affichage quand ciblée */
.modal-container:target {
  display: flex;
}

/* Contenu de la modale */
.modal-inner {
  background: #000;                  /* fond noir pur */
  color: #00ff00;                    /* vert CRT */
  font-family: "Courier New", monospace;
  font-size: 1rem;
  border: 2px solid #00ff00;
  padding: 2rem;
  max-height: 80vh;
  overflow-y: auto;                  /* scroll si texte long */
  text-align: left;
	
}


/* Bouton fermer */
.modal-inner {
  position: relative; /* nécessaire pour positionner le bouton dedans */
}

.modal-close {
  position: absolute;
  top: 10px;     /* marge depuis le haut */
  right: 10px;   /* marge depuis la droite */

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

  width: 32px;
  height: 32px;

  background: #000;
  color: #00ff00;
  border: 3px double #00ff00;

  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 1rem;

  cursor: pointer;
  text-decoration: none;
}
.modal-close:hover {
  background: #00ff00;
  color: #000;
}


/* Petit effet "clignotement terminal" */
@keyframes crt-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.modal-inner h1, 
.modal-inner p {
  animation: crt-blink 1.2s infinite;
}

p.greentitle {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Scrollbar custom brutalist */
.modal-inner::-webkit-scrollbar {
  width: 40px; /* largeur */
}

.modal-inner::-webkit-scrollbar-track {
  background: #000;                 /* fond noir */
  border-left: 3px solid #00ff00;   /* bordure verte */
}

.modal-inner::-webkit-scrollbar-thumb {
  background: #000;                 /* pouce noir */
  border: 3px solid #00ff00;        /* encadré vert */
}

.modal-inner::-webkit-scrollbar-thumb:hover {
  background: #111;                 /* gris/noir léger au hover */
  border-color: #33ff33;            /* vert plus clair au hover */
}

/* Firefox */
.modal-inner {
  scrollbar-width: thin;
  scrollbar-color: #00ff00 #000; /* curseur vert sur fond noir */
}

.modal-content {
  background: #000;           /* fond noir */
  color: #0f0;               /* texte vert matrix */
  font-family: "Courier New", monospace;
  padding: 1.5rem;
  border: 4px solid lime;
  max-width: 800px;          /* largeur max de la boîte */
  max-height: 80vh;          /* limite en hauteur */
  overflow-y: auto;          /* scroll vertical si ça dépasse */
  white-space: pre-wrap;     /* conserve les retours mais autorise le retour ligne */
  word-wrap: break-word;     /* coupe si un mot est trop long */
}

.classified-window {
  background: rgb(0 0 0 / 70%);
  border: 3px double limegreen;
  max-width: 920px;
  margin: 2rem auto;
  font-family: monospace, "Courier New" ;
  padding: 1.6rem 1rem 1rem 1rem;
  font-size: 1.2rem;
  color: limegreen;
}

/* Texte typewriter */
.anim-typewriter {
  border-right: 2px solid limegreen;   /* curseur */
  white-space: nowrap;                 /* empêche retour à la ligne */
  overflow: hidden;                    /* masque le texte avant l’animation */
  display: inline-block;
  width: 0;                            /* point de départ */
  animation: typewriter 5s steps(44) 1s 1 normal both,
             blinkCursor 600ms steps(44) infinite normal;
}

/* Animation lettre par lettre */
@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

/* Curseur clignotant */
@keyframes blinkCursor {
  from { border-right-color: limegreen; }
  to   { border-right-color: transparent; }
}


/* ------------------- ERROR DISK ------------------- */


/* --- Effet Écran Bleu --- */
.disk-error-body {
    background-color: #0000AA; /* Bleu DOS/BIOS */
    color: #FFFFFF; /* Blanc */
    
    /* MODIFICATION : Utilisation de la police déclarée */
    font-family: 'perfect_dos_vga_437_winRg';
    
    font-size: 22px; /* Taille ajustée pour la lisibilité et l'effet pixelisé */
    line-height: 1.4; 
    
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden; 
    cursor: default;
}

.disk-error-screen {
    max-width: 80%;
    text-align: left;
    position: relative; 
}

/* --- Barre de Titre (Disk Write Error) --- */
.disk-error-box {
    text-align: center;
    margin-bottom: 20px;
}

.disk-error-title {
    background-color: #FFFFFF; 
    color: #0000AA; 
    display: inline-block;
    padding: 2px 10px;
    font-size: 22px; /* Assorti au body */
    font-weight: normal; 
    margin: 0;
    letter-spacing: 2px;
    border: 1px solid #FFFFFF; 
}

/* --- Messages et Invite --- */
.disk-error-message {
    line-height: 1.8;
    margin-top: 50px;
    white-space: pre; 
    text-align: left;
}

.disk-error-prompt {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { color: inherit; }
    50% { color: transparent; }
}