/* =========================
   RESET & BASE
   ========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'jgsfont', monospace, sans-serif;
  line-height: 1.6;
  scroll-behavior: smooth;
  background: #f5f5f5;
}

/* =========================
   BACKGROUND BODY
   ========================= */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('clics.svg') repeat;
  background-size: 10px 10px;
  pointer-events: none;
  z-index: -1;
}

/* =========================
   LINKS
   ========================= */
a { text-decoration: none; color: inherit; }

/* =========================
   TITRES
   ========================= */
h1,h2,h3 {
  font-family: 'Bebas Neue', sans-serif;
  margin-bottom: 10px;
  line-height: 1.2;
  text-align: center;
}
h1 { font-size: 24vw; }
h2 { font-size: clamp(10rem, 5vw, 5rem); }
h3 { font-size: 4em; }

/* =========================
   PARAGRAPHES
   ========================= */
p, .intro, .tarifs-etapes ol li, #contact p {
  font-family: 'jgsfont', monospace, sans-serif;
  font-size: 1.1em;
  line-height: 1.8;
  text-align: justify;
  background: white;
}

/* =========================
   HEADER & NAV
   ========================= */
header {
  position: sticky;
  top: 0;
  background: black;
  padding: 15px 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.nav-left { display: flex; gap: 30px; }
.nav-right { display: flex; gap: 10px; }
nav a {
  font-weight: bold;
  transition: color 0.3s;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}
nav a:hover { color: #DDDD; }

/* =========================
   BURGER MENU
   ========================= */
.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}
.burger span {
  display: block;
  width: 25px;
  height: 3px;
  background: white;
  transition: all 0.3s;
}
.burger.toggle span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.burger.toggle span:nth-child(2) { opacity: 0; }
.burger.toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* =========================
   SECTION ACCUEIL
   ========================= */
   /* Background animé façon imprimerie pour #accueil */
/* Background quadri CMJN "imprimerie" */
#accueil {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  padding: 40px 20px;
  overflow: hidden;

  /* Couleurs distinctes en bandes horizontales */
  background: linear-gradient(
    90deg,
    #ff0000 25%, /* rouge */
    #ffff00 25% 50%, /* jaune */
    #0000ff 50% 75%, /* bleu */
    #000000 75% 100% /* noir */
  );
  background-size: 400% 100%;
  animation: gradientShift 15s linear infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}


#accueil::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background-color: #c1060f;
  background: url('.svg') repeat;
  background-size: 10px 10px;
  animation: moveBackground 60s linear infinite;
  z-index: 0;
}
@keyframes moveBackground {
  0% { background-position: 0 0; }
  100% { background-position: 1000px 1000px; }
}



#accueil h1 {
font-size: 30vw; line-height:1; margin:0 0 20px 0; z-index:1;
  z-index: 1;
  color: black;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border-right: 4px solid black; /* effet curseur */
  animation: typing 2s steps(30) infinite alternate;
}

@keyframes typing {
  0% { width: 0; }
  100% { width: 100%; }
}

#accueil p { font-size: 1.2em; margin-bottom: 20px; }
#accueil .btn { padding: 10px 20px; background: #0077cc; color:#fff; border-radius:5px; }

/* =========================
   TEXTE VERTICAL (non utilisé)
   ========================= */
.vertical-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 7em;
  color: black;
  pointer-events: none;
  z-index: 0;
}
.vertical-text span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
}

/* =========================
   PROJETS
   ========================= */
#projets {
  border: 4px solid #000;
  padding: 10%;
}
#projets .projets-grid {
  display: flex;
  flex-direction: column;
  gap: 50px;
  z-index: 1;
  position: relative;
}
.projet {
  border: 10px solid black;
  padding: 20px;
  text-align: left;
  transition: transform 0.3s, box-shadow 0.3s;
}
.projet:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}

/* --- Conteneur projet : texte à gauche + images à droite --- */
.projet-content {
  display: flex;
  flex-direction: row;   /* horizontal */
  align-items: flex-start; 
  gap: 30px;
}
.projet-texte {
  flex: 1; /* texte prend plus de place */
}
.projet-images {
  display: flex;
  flex-direction: row; /* images en ligne */
  flex-wrap: wrap;     /* retour à la ligne si trop */
  gap: 15px;
}
.projet-images img {
  max-width: 200px;
  height: auto;
  
}

/* Bouton "Voir le projet" en bande noire */

.btn-yellow {
  display: block;
  width: 100%;
  background: black;        /* couleur de base */
  color: white;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px 0;
  margin: 20px 0;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.3s;
}
.btn-yellow:hover {
  background: #ff0000; /* rouge */
  color: #fff;          /* texte reste blanc */
  transition: background 0.3s ease;
}

/*VIDEO*/
/* === VIDÉO DU PROJET === */
.project-video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0px auto 0;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Sur desktop : occupe toute la largeur du bloc d’images */
.projet-images .project-video {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 900px; /* augmente cette valeur */
  height: auto;
  margin: 20px auto;
}


/* Sur mobile : vidéo en dessous, largeur auto */
@media (max-width: 899px) {
  .projet-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .project-video {
    width: 100%;
    margin-top: 20px;
  }
}

/* Responsive : pile les colonnes en une seule */
@media (max-width: 900px) {
  .projet-content { grid-template-columns: 1fr; }
  .projet-images { grid-template-columns: 1fr; }
}




/* Animation du dégradé */
@keyframes flashGradient {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}


/* =========================
   A PROPOS
   ========================= */
#apropos {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 80px 40px;
  max-width: 1200px;
  margin: 40px auto;
  border: 10px solid #000;
  background: #f5f5f5;
}
#apropos .texte-apropos {
  flex: 1 1 400px;
  background: #fff;
  padding: 20px;
  border: px solid black;
}
#apropos .image-apropos {
  flex: 0 0 300px;
  max-width: 300px;
}

/* Liste formation - style bande noire */
.formation ol {
  list-style: none; /* supprime les chiffres */
  padding: 0;
  margin: 0;
}

.formation ol li {
  margin: 20px 0;
  padding: 10px 0;
  position: relative;
  font-size: 1.2em;
  line-height: 1.6;
  background: #fff; /* fond blanc */
}

.formation ol li::after {
  content: "";
  display: block;
  height: 4px;        /* hauteur de la bande noire */
  background: #000;   /* couleur noire */
  width: 100%;
  margin-top: 10px;   /* espace après le texte */
}





/* =========================
   TARIFS
   ========================= */
#tarifs {
  position: relative;
  background:#fff;
  border: 10px solid #000;
  padding: 20%;
}
.tarifs-grid { display: flex; flex-direction: column; gap: 30px; }
.tarif {
  border: 5px solid #000;
  padding: 20px;
  transition: background 0.3s;
  background: #fff; /* fond par défaut */
}

.tarif:hover {
  background: repeating-linear-gradient(
    45deg,
    #0000ff,   /* bleu imprimerie */
    #0000ff 10px,
    #fff 10px,
    #fff 20px
  );
  color: #000; /* garde le texte noir */
}

/* Tarifs - étapes style bande noire */
.tarifs-etapes ol {
  list-style: none; /* supprime les chiffres */
  padding: 0;
  margin: 0;
}

.tarifs-etapes ol li {
  margin: 20px 0;
  padding: 10px 0;
  position: relative;
  font-size: 1.2em;
  line-height: 1.6;
  background: #fff; /* fond blanc */
}

.tarifs-etapes ol li::after {
  content: "";
  display: block;
  height: 4px;        /* hauteur de la bande noire */
  background: #000;   /* couleur noire */
  width: 100%;
  margin-top: 10px;   /* espace après le texte */
}



/* =========================
   CONTACT
   ========================= */
/* Centrage du contenu */
#contact {
  position: relative;
  background: #fff; /* fond par défaut */
  border: 10px solid #000;
  padding: 80px 40px 40px 40px;
  text-align: center; /* centre le texte et les icônes */
  transition: background 0.3s ease; /* transition douce pour le hover */
}

/* Hover pour changer le fond en jaune */
#contact:hover {
  background: #FFD700; /* jaune "imprimerie" */
}

/* Styling des icônes */
#contact a img {
  width: 90px;
  height: 90px;
  margin: 0 10px;
  transition: transform 0.3s ease; /* petit effet au hover sur les icônes */
}

#contact a img:hover {
  transform: scale(1.1); /* léger zoom au survol */
}


/* =========================
   FOOTER
   ========================= */
#credits {
  text-align: center;
  padding: 20px;
 /* noir */
      /* texte blanc */
  font-size: 0.6em;
  border: none;      /* supprime toute bordure */
  margin-top: 40px;
}
/* =========================
   RESPONSIVE
   ========================= */
/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:768px) {
.projet-images img {
  max-width: 90%; /* plutôt que 100% si tu veux un petit padding autour */
  height: auto;
}






  /* Affichage du burger */
  .burger { display:flex; }
/* Menu mobile visible quand burger actif */
.nav-left.nav-active {
  display: flex;             
}

  /* Menu mobile caché par défaut */
  .nav-left {
    display: none;             /* caché par défaut */
    flex-direction: column;
    gap: 20px;
    background: black;         /* fond noir */
    position: absolute;
    top: 60px;                 /* juste en dessous du header */
    left: 0;
    width: 100%;               /* full width */
    padding: 20px;
    z-index: 1001;             /* au-dessus du header */
    transition: all 0.3s ease;
  }

  /* Menu mobile visible quand burger actif */
  .nav-left.active {
    display: flex;             
  }

  /* Sections : padding réduit sur mobile */
  #projets, #apropos, #tarifs, #contact { padding:60px 20px; }

  /* Projets : texte + images empilés et centrés */
  .projet-content {
    flex-direction: column;       /* empile texte et images */
    align-items: center;          /* centre le contenu horizontalement */
    text-align: center;           /* centre le texte */
  }

  .projet-images {
    justify-content: center;      /* centre les images */
    flex-wrap: wrap;              /* retour à la ligne si besoin */
  }

  .projet-texte {
    flex: unset;
    text-align: center;
  }

  /* Images formation */
  .formation img {
    max-width: 100px;
  }

  /* Titres h2/h3 adaptés au mobile seulement */
  h2 {
    font-size: clamp(5rem, 6vw, 3.5rem);
  }

  h3 {
    font-size: clamp(3rem, 5vw, 2.5rem);
  }

/* ↓ Smartphones */
@media (max-width: 600px) {
  p {
    font-size: 15px;      /* ex : 16px → 14px */
    line-height: 1.6;     /* garde une bonne lisibilité */
  }
}

  /* Listes étapes / formation centrées et texte plus petit */
  .tarifs-etapes ol li,
  .formation ol li {
    font-size: 1em;
    text-align: center; 
  }
}
@media (max-width: 768px) {
  .projet-images {
    display: flex;
    flex-direction: column;
    align-items: center; /* centre les images horizontalement */
    justify-content: center;
  }

  .projet-images img {
    width: 90%; /* ou 100%, selon ton rendu */
    height: auto;
    margin: 0 auto;
  }
}