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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #000; /* fond noir si l'image ne couvre pas tout */
  overflow-x: hidden;
  overflow-y: auto;
}

/* BARRE DE NAVIGATION 1 — HORIZONTALE EN HAUT (barrenav1) */
#barrenav1 {
  position: fixed;
  top: 0;
  left: 44px;
  width: 687px;
  height: 111px;
  z-index: 60; /* ✅ CORRIGÉ : Navigation au-dessus de tout */
  pointer-events: none;
}

.navbar-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 61; /* ✅ CORRIGÉ : Fond de navigation */
}

.ecriture-buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  z-index: 65; /* ✅ CORRIGÉ : Boutons navigation au-dessus */
  pointer-events: auto;
}

.ecriture-buttons a {
  background-color: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ecriture-buttons a img {
  width: 100px;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
  display: block;
}

.ecriture-buttons a img:hover {
  transform: scale(1.05);
}

/* BARRE DE NAVIGATION 2 — VERTICALE À GAUCHE (barrenav2) */
#barrenav2 {
  position: fixed;
  top: 100px;
  left: -19px;
  width: 129px;
  height: 479px;
  z-index: 55; /* ✅ CORRIGÉ : Navigation secondaire */
  pointer-events: none;
}

.barrenav2-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 56; /* ✅ CORRIGÉ : Fond navigation secondaire */
}

.formation-buttons {
  position: absolute;
  top: 170px;
  left: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 25px;
  z-index: 57; /* ✅ CORRIGÉ : Boutons navigation secondaire */
  pointer-events: auto;
}

.formation-buttons img {
  width: 68px;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.3s ease;
  display: block;
}

.formation-buttons img:hover {
  transform: scale(1.1);
}

/* PAGE ACCUEIL */
.scene {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 5; /* ✅ CORRIGÉ : Conteneur de base */
}

.background {
  width: 100%;
  display: block;
  z-index: 1; /* ✅ CORRIGÉ : Fond de base */
}

.boutontresor-button {
  position: absolute;
  top: 10%;
  left: 52.5%;
  width: 48%;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: 20; /* ✅ CORRIGÉ : Bouton au-dessus du fond */
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.boutontresor-button:hover {
  transform: scale(1.05);
}

/* PAGE START */
.fond-start {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  z-index: 1; /* ✅ CORRIGÉ : Fond de base */
}

.startbackground {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
  display: block;
  z-index: 1; /* ✅ CORRIGÉ : Image de fond */
}

.carteimage-button {
  position: absolute;
  bottom: 0vh;
  left: 63.5vw;
  width: 29%;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: 20; /* ✅ CORRIGÉ : Bouton au-dessus du fond */
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carteimage-button:hover {
  transform: scale(1.05);
}



/* === MENU - Page 3 === */
.menu-content {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 5; /* ✅ CORRIGÉ : Conteneur de base */
}

.menu-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* ✅ CORRIGÉ : Fond de base */
}

/* === BOUTON CRÉATION === */
.creation2-button {
  position: absolute;
  top: 17.5%;
  left: 77.5%;
  width: 10px;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: 25; /* ✅ CORRIGÉ : Au-dessus du fond */
  cursor: pointer;
  transition: transform 0.3s ease;
}

.creation2-button:hover {
  transform: scale(1.05);
}

/* === BOUTON LANCEMENT === */
.lancement2-button {
  position: absolute;
  top: 45.7%;
  left: 74.5%;
  width: 90px;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: 25; /* ✅ CORRIGÉ : Au-dessus du fond */
  cursor: pointer;
  transition: transform 0.3s ease;
}

.lancement2-button:hover {
  transform: scale(1.05);
}

/* === SAC À DOS - Page 4 === */
.menu2-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 5; /* ✅ CORRIGÉ : Conteneur de base */
}

.menu2-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* ✅ CORRIGÉ : Fond de base */
}

/* === BOUTONS DOCUMENTS === */
.doc-buttons {
  position: absolute;
  top: 25%;
  left: 40%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 10px;
  z-index: 30; /* ✅ CORRIGÉ : Bien au-dessus du fond */
}

.doc-buttons img {
  width: 140px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.doc-buttons img:hover {
  transform: scale(1.05);
}

/* === BOUTONS FORMATIONS SACADOS === */
.formsacados-button {
  position: absolute;
  top: 65%;
  left: 55%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 18px;
  z-index: 30; /* ✅ CORRIGÉ : Bien au-dessus du fond */
}

.formsacados-button img {
  width: 120px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.formsacados-button img:hover {
  transform: scale(1.05);
}

/* === BOUTON PARCHEMIN === */
.parchemin-button {
  position: absolute;
  bottom: 1%;
  left: 58%;
  transform: translateX(-50%);
  z-index: 30; 
}

.parchemin-button img {
  width: 220px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.parchemin-button img:hover {
  transform: scale(1.05);
}

/* CREATION - Page 5 */
.creationfond {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  z-index: 5; /* ✅ CORRIGÉ : Conteneur de base */
}

.creation-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6; /* ✅ CORRIGÉ : Contenu au-dessus */
  width: 100%;
}

.creation-image {
  width: 100%;
  height: auto;
  display: block;
  z-index: 1; /* ✅ CORRIGÉ : Fond de base */
}

/* ✅ CORRIGÉ : Positionnement réaliste pour businessplan-button */
.businessplan-button {
  position: absolute;
  top: 9970px; 
  left: 64%; 
  width: 184px;
  height: 236px;
  display: block;
  z-index: 25; /* ✅ CORRIGÉ : Au-dessus du fond */
  cursor: pointer;
  transition: transform 0.3s ease;
}

.businessplan-button:hover {
  transform: scale(1.05);
}

/* ✅ CORRIGÉ : Positionnement réaliste pour boutonrouge-button */
.boutonrouge-button {
  position: absolute;
  top: 14360px; 
  left: 610px; 
  width: 300px;
  height: 300px;
  display: block;
  z-index: 25; /* ✅ CORRIGÉ : Au-dessus du fond */
  cursor: pointer;
  transition: transform 0.3s ease;
}

.boutonrouge-button:hover {
  transform: scale(1.05);
}

/* LANCEMENT - Page 6 */
.lancement-content {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 5; /* ✅ CORRIGÉ : Conteneur de base */
}

.lancement-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: 1; /* ✅ CORRIGÉ : Fond de base */
}

/* Première ligne de 3 boutons */
.marketing-button,
.communication-button,
.commerce-button {
  position: absolute;
  width: 280px;  /* 918px / 3 - (quelques px pour l'espacement) */
  height: 285px;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Positionnement individuel */
.marketing-button {
  left: 308px;
  top: 2560px;
}

.communication-button {
  left: 637px;
  top: 2560px;
}

.commerce-button {
  left: 977px;
  top: 2560px;
}

.marketing-button:hover {
  transform: scale(1.05);
}

.communication-button:hover {
  transform: scale(1.05);
}

.commerce-button :hover {
  transform: scale(1.05);
}

/* Bouton finance & legal */
.finance-button {
  position: absolute;
  left: 300px;
  top: 3100px;
  width: 226px;
  height: 297px;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.finance-button :hover {
  transform: scale(1.05);
}

.legal-button {
  position: absolute;
  left: 630px;
  top: 3100px;
  width: 223px;
  height: 296px;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.legal-button :hover {
  transform: scale(1.05);
}


/* Bouton rouge - CORRIGÉ */
.boutonrouge1-button {
  position: absolute;
  top: 3924px; 
  left: 590px; 
  width: 185px;
  height: 193px;
  z-index: 25; 
  cursor: pointer;
  transition: transform 0.3s ease;
}

.boutonrouge1-button:hover {
  transform: scale(1.05);
}

/* MARKETING - Page 7 */
.marketing-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 5; /* ✅ CORRIGÉ : Conteneur de base */
}

.marketing-container img.mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* ✅ CORRIGÉ : Fond de base */
}

.retour-buttons {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 70; /* ✅ CORRIGÉ : Bouton retour prioritaire */
}

.retour-buttons:hover {
  transform: scale(1.05);
}

/* Boutons au-dessus de l'image - CORRIGÉ */
.suitecomm-buttons {
  position: absolute;
  left: 1080px;
  top: 7880px;
  width: 227px;
  height: 236px;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.suitecomm-buttons :hover {
  transform: scale(1.05);
}

.flyers2-buttons {
  position: absolute;
  left: 955px;
  top: 7370px;
  width: 205px;
  height: 263px;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.flyers2-buttons :hover {
  transform: scale(1.05);
}


/* COMMUNICATION - Page 8 */
.communication-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 5; /* ✅ CORRIGÉ : Conteneur de base */
}

.communication-container img.comm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* ✅ CORRIGÉ : Fond de base */
}

.charte2-buttons {
  position: absolute;
  left: 814px;
  top: 4096px;
  width: 217px;
  height: 279px;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.charte2-buttons :hover {
  transform: scale(1.05);
}

.boutonrouge-buttons {
  position: absolute;
  left: 683px;
  top: 5206px;
  width: 175px;
  height: 183px;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.boutonrouge-buttons :hover {
  transform: scale(1.05);
}


/* COMMERCE - Page 9 - CORRIGÉ */
.commerce-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 5; /* ✅ CORRIGÉ : Conteneur de base */
}

.commerce-container img.commerce {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* ✅ CORRIGÉ : Fond de base */
}

.boutonrougeco-buttons {
  position: absolute;
  left: 1022px;
  top: 4500px;
  width: 162px;
  height: 168px;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.boutonrougeco-buttons :hover {
  transform: scale(1.05);
}
.boutonrougeco1-buttons {
  position: absolute;
  left: 700px;
  top: 7795px;
  width: 30px;
  height: auto;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.boutonrougeco1-buttons :hover {
  transform: scale(1.05);
}



/* FINANCE - Page 10 - CORRIGÉ */
.finance-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 5; /* ✅ CORRIGÉ : Conteneur de base */
}

.finance-container img.bn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* ✅ CORRIGÉ : Fond de base */
}

.boutonrougefi-buttons {
  position: absolute;
  left: 665px;
  top: 7671px;
  width: 192px;
  height: 202px;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.boutonrougefi-buttons :hover {
  transform: scale(1.05);
}



/* LEGAL - Page 11 - CORRIGÉ */
.legal-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 5; /* ✅ CORRIGÉ : Conteneur de base */
}

.legal-container img.legal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* ✅ CORRIGÉ : Fond de base */
}

.ursaff-buttons {
  position: absolute;
  left: 665px;
  top: 2393px;
  width: 265px;
  height: 154px;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.ursaff-buttons :hover {
  transform: scale(1.05);
}
.kdo-buttons {
  position: absolute;
  left: 250px;
  top: 7120px;
  width: 217px;
  height: 279px;
  display: block;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.kdo-buttons :hover {
  transform: scale(1.05);
}