body {
	margin: 0;
	background-color: #FEFEFC;
}

/* MENU :-) */
.container {
	background-color: black;
	display: flex;
	height:4vh;
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: black;
	}

.menu {
margin: 8px 10px 0 10px;
	background-color:black;
	color: #FEFEFC;
	font-family:helvetica; 
	text-align:right;
	}

.menuvide {

	background-color: black;
	flex: 1 1 5%;
	}

.nom {
 margin: 8px 10px 0 10px;
 color: #FEFEFC;
 font-family:helvetica; 
 text-align:left;
	}

.acceuil {
  position: relative;
  z-index: 1;
}

/* MOSAIQUE 1 :-) */

.mosaic-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: black;
  padding: 0px 15px 50px 15px;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}

.mosaic-top {
  display: flex;
  gap: 5px;
  flex: 1;
  min-height: 0; 
}

.col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}

.col-left   { flex: 1; }
.col-center { flex: 2; }
.col-right  { flex: 1; }

.cell {
  background: black;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  position: relative; /* ← ajoute ça */
}

.overlay-text {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: black;
  font-family: helvetica;
  font-size: 15px;
  z-index: 10;
  pointer-events: auto; /* ← était "none", ça bloquait le clic */
  text-decoration: none;
}

.overlay-text:hover {
  text-decoration: underline;
  color: black;
}

.cell-tall { flex: 2; }

.mosaic-bottom {
  display: flex;
  gap: 5px;
  height: 200px;
  flex-shrink: 0;
  margin-right: calc(25% + 3px);
}

.col-right {
width: 100%;
height: 135.5%;
}

.cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* MOSAIQUE 2 :-) */
.mosaic2 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: black;
  padding:15px;
  width: 100%;
  height: 95vh;
  box-sizing: border-box;
}

.mosaic2-top {
  display: flex;
  gap: 5px;
  flex: 1;
  min-height: 0; /* ← important */
}

.mosaic2-bottom {
  display: flex;
  gap: 5px;
  flex: 1;
  min-height: 0; /* ← important */
}

.cell2 {
  flex: 1;
  overflow: hidden;
  background: white;
  position: relative;
  min-height: 0; /* ← important */
}

.cell2 img,
.cell2 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* TABLEAU :-) */
.tableau {
background-color:#FEFEFC;
	display: flex;
	height:160vh;
	border-radius: 4px;
}

.liste{
	flex:1 1 120%;
}

.projets {
	background-color: #FEFEFC;
	margin: 40px 0px 0px 0px;
}

.projet {
margin: 5px 0px 0 200px;
	background-color: #FEFEFC;
	display: flex;
	height: 10vh;

}

.style {
	flex: 1 1 50%;
	text-align: left;
	background-color: #FEFEFC;
	font-family:helvetica;	
}

.date {
	background-color:#FEFEFC;
	color: black;
	font-family:helvetica;
	text-align: left;
	}
	

.image {
  width: 100%;
   margin: 0 0px 5px 0;
  text-align: right;
}

.logo-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
   margin: 0 0 5px 0;

}

.logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

}

/* FOOTER :-) */

.footer {
  width: 100%;
  background-color: black;
  display: flex;
  flex-direction: column;
  height: 40vh;
  box-sizing: border-box;
  padding: 10px 0 0 0;
  overflow: hidden;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 0 0 0 10px;
  gap: 40px;
}

.footer-link {
  color: #FEFEFC;
  font-family: helvetica;
  font-size: 15px;
}

.footer-copyright {
  color: #FEFEFC;
  font-family: helvetica;
  font-size: 15px;
  margin-left: auto;
  margin-right: 15px;
}

.footer-bottom {
  display: flex;
  align-items: flex-end;
  margin: auto 0 0 0;
  width: 100%;
}

.footer-big-text {
  font-family: helvetica;
  font-weight: 900;
  color: #FEFEFC;
  white-space: nowrap;
  line-height: 0.85;
  font-size: 10vw;
  margin: 0;
  padding: 0 0 0 10px;
}

.footer a {
  color: #FEFEFC;
  text-decoration: none;
}

.footer a:visited {
  color: #FEFEFC;
}

.footer a:hover {
  text-decoration: underline;
  color: #FEFEFC;
}


	
/* petits trucs :-) */

hr {
	border: none;
	overflow:hidden;
	border-top: 1px solid black;
	background-color: black;
	padding: 0;
	margin: 0;
	}


.menu a{
  color: #FEFEFC;
  text-decoration: none;
  font-family: helvetica;
  }
  
a:hover {
  text-decoration: underline;
  color:#FEFEFC;
}

.projet a{
transition: color 0.2s ease;
  color: black;
  text-decoration: none;
  font-family: helvetica;
  }

.projet a:hover {
  text-decoration: none;
  color:#898989;
}

.cell a{
  color: black;
  text-decoration: none;
  font-family: helvetica;
  }

.cell a:hover {
  text-decoration: underline;
  color:black;
}

.footer a {
  color: #FEFEFC;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
  color: #FEFEFC;
}

.scramble {
    cursor: pointer;
    user-select: none;
    /* mix-blend-mode: difference; */
  }
  
html {
  scroll-behavior: smooth;
}

.sticky {
  position: sticky;
  top: 4vh; /* ← adapte à la hauteur de ton menu */
}

.scroll-wrapper {
  position: relative;
}

.acceuil {
  position: sticky;
  top: 4vh;
  z-index: 1;
}

.mosaic2 {
  position: sticky;
  top: 4vh;
  z-index: 2;
}