@charset "UTF-8";
/* ---- ALASKA BETA (normal) ---- */
@font-face {
    font-family: 'alaska_beta';
    src: url('fonts/alaskabeta-light-webfont.woff2') format('woff2'),
         url('fonts/alaskabeta-light-webfont.woff') format('woff');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'alaska_beta';
    src: url('fonts/alaskabeta-regular-webfont.woff2') format('woff2'),
         url('fonts/alaskabeta-regular-webfont.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'alaska_beta';
    src: url('fonts/alaskabeta-bold-webfont.woff2') format('woff2'),
         url('fonts/alaskabeta-bold-webfont.woff') format('woff');
    font-weight: 700; /* Bold */
    font-style: normal;
}

/* ---- ALASKA BETA EXPANDED ---- */
@font-face {
    font-family: 'alaska_beta_expanded';
    src: url('fonts/alaskabeta-expandedlight-webfont.woff2') format('woff2'),
         url('fonts/alaskabeta-expandedlight-webfont.woff') format('woff');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'alaska_beta_expanded';
    src: url('fonts/alaskabeta-expandedregular-webfont.woff2') format('woff2'),
         url('fonts/alaskabeta-expandedregular-webfont.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'alaska_beta_expanded';
    src: url('fonts/alaskabeta-expandedbold-webfont.woff2') format('woff2'),
         url('fonts/alaskabeta-expandedbold-webfont.woff') format('woff');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: 'alaska_beta_expanded';
    src: url('fonts/alaskabeta-expandedblack-webfont.woff2') format('woff2'),
         url('fonts/alaskabeta-expandedblack-webfont.woff') format('woff');
    font-weight: 900; /* Black */
    font-style: normal;
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

/* CSS Document */

html {
  scroll-behavior: smooth;
}

body {
      margin: 0;
      padding: 0;
	background-color: black;
	font-family: 'alaska_beta';
	font-weight: 400;
	color: white;
    }

html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}







nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	margin: auto;
	padding: 10px 0px
	
}

/* --- STRUCTURE GLOBALE DE LA NAV --- */
.navbar {
  width: 100%;
  background: transparent;
  padding: 0; /* supprime tout padding par défaut Bootstrap */
  border: none;
}

/* Contenu interne centré à 90 % */
.nav_content {
  width: 90%;
  margin: 0 auto; /* centre horizontalement */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0; /* uniquement un peu d’espace vertical */
}

/* Empêche Bootstrap de forcer un padding interne sur container-fluid */
.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.nav_page {
  display: flex;
  justify-content: flex-end; /* aligne les liens à droite si tu veux */
  align-items: center;
  gap: 40px; /* <-- espace horizontal entre les liens */
  margin: 0;
  padding: 0;
  list-style: none; /* <-- enlève les puces */
}

/* Supprime aussi le style par défaut sur les <li> */
.nav_page li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Liens desktop */
.nav_page .liens_nav {
  text-decoration: none;
  color: white;
  font-family: 'alaska_beta_expanded';
  font-weight: 700;
  letter-spacing: 1px;
  transition: opacity 0.2s ease-in-out;
}

.nav_page .liens_nav:hover {
  opacity: 0.7;
}

/* === NAV LINKS === */
.liens_nav {
  color: white;
  text-decoration: none;
  font-family: "Alaska_beta_expanded", sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  transition: 0.3s;
}

.liens_nav:hover {
  opacity: 0.7;
}

/* === BURGER === */
.custom-toggler {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1100;
}

.toggler-bar {
  width: 25px;
  height: 3px;
  background-color: white;
  transition: all 0.3s ease;
}

.custom-toggler.open .toggler-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.custom-toggler.open .toggler-bar:nth-child(2) {
  opacity: 0;
}
.custom-toggler.open .toggler-bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* === MENU MOBILE (offcanvas) === */
.offcanvas {
  background-color: black !important;
  width: 100% !important;
  height: 100% !important;
  border: none;
  border-radius: 0;
  z-index: 1050;
  opacity: 0.98;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
  .nav_page {
    display: none !important; /* cache le menu desktop */
  }
}

/* --- Cache totalement le menu mobile en version desktop --- */
@media (min-width: 992px) {
  .offcanvas {
    display: none !important;
  }
}















h1 {
	font-family: 'alaska_beta';
}
p {
	font-size: 18px;
}










.glass-link{
  display: inline-block;        /* pour appliquer padding & arrondis */
  padding: 12px 28px;
  border-radius: 18px;
  position: relative;
  text-decoration: none;        /* enlever le soulignement */
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;             /* coupe les coins carrés des reflets */
  color: #fff;                  /* texte par défaut blanc */
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1),
              box-shadow 0.4s cubic-bezier(.25,.8,.25,1);
}

/* survol : agrandissement + ombre plus forte */
.glass-link:hover {
  transform: scale(1.05); /* grossit légèrement */
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.glass-link::before{
  content:"";
  position:absolute; inset:1px;
  border-radius: inherit;       /* reprend le même arrondi que le parent */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06));
  mix-blend-mode: screen;
  pointer-events:none;
}

.glass-link::after{
  content:"";
  position:absolute;
  left:6%; right:6%; top:6%;
  height:40%;
  border-radius: inherit;       /* même arrondi que le parent */
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.08));
  filter: blur(2px);
  opacity:0.9;
  pointer-events:none;
  transition: transform 0.6s ease; /* effet smooth */
}

.glass-link:hover::after {
  transform: scaleX(1.05) scaleY(1.1) translateY(-0.5px);
}

.glass-content{
  position:relative;
  z-index:2;
  font: 600 18px/1.3 Inter, -apple-system, system-ui, sans-serif;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.center { display:flex; justify-content: center; margin: 30px 0px;}
.right { float:right; }
.left { float:left; }


.logo_footer {
	margin: auto;
	display: block;
	width: 250px;
}

.download_CV {
	text-decoration: none;
	color: white;
}

.contacts_footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 180px;
	margin: auto;
}

.footer_content {
	margin: 100px 0px 0px;
}

.bg_footer {
	width: 150%;
	display: block;
  margin: -100px 0px 0px;
  position: relative;
	z-index: -1;
  left: 50%;
  transform: translateX(-50%);
}

   video {
      width: 100%;   /* prend toute la largeur */
    }

.scroll-down {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.18); /* contour blanc style Apple */
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1),
              box-shadow 0.4s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  overflow: hidden;
  z-index: 10;
  animation: float 2s ease-in-out infinite; /* fait flotter le bouton doucement */
}

/* Reflets internes */
.scroll-down::before {
  content:"";
  position:absolute; inset:1px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06));
  mix-blend-mode: screen;
  pointer-events:none;
}

.scroll-down::after {
  content:"";
  position:absolute;
  left:10%; right:10%; top:10%;
  height:40%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.08));
  filter: blur(2px);
  opacity:0.9;
  pointer-events:none;
  transition: transform 0.6s ease;
}

/* Animation liquid glass au hover + léger agrandissement */
.scroll-down:hover {
  transform: translateX(-50%) scale(1.1); /* gonfle légèrement */
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.scroll-down:hover::after {
  transform: scaleX(1.1) scaleY(1.2) translateY(-2px);
}

.scroll-down:hover img {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* La flèche reste au-dessus */
.scroll-down img {
  width: 30px;
  height: auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
  opacity: 0.7;
}

.projet {
  position: relative;   /* nécessaire pour contenir l’overlay */
  width: 100%;
  height: 400px;        /* hauteur fixe */
  overflow: hidden;     /* crop de l’image */
  margin-bottom: 40px;
}

.minia_projet {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* l’image remplit le cadre en gardant son ratio */
  object-position: center; /* centre le recadrage */
  display: block;
  transition: transform 0.6s ease; /* animation fluide */
}

/* Overlay caché par défaut */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8); /* fond noir semi-transparent */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* invisible au départ */
  transition: opacity 0.4s ease;
}

.overlay h2 {
  font-family: 'alaska_beta_expanded';
  font-size: 40px;
  font-weight: 700;
  text-align: center;
	 /* effet zoom smooth */
  opacity: 0;
  transform: scale(0.9);          /* légèrement réduit au repos */
  transition: all 0.4s ease; 
	color: transparent; /* rendu du texte transparent */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.8),
    rgba(255,255,255,0.6)
  ); /* gradient pour effet "verre" */
  -webkit-background-clip: text; /* Chrome/Safari */
  background-clip: text; /* Firefox/modern browsers */
  text-shadow: 0 2px 10px rgba(255,255,255,0.3); /* brillance / léger relief */
	
}

/* Quand on survole l’image → overlay apparaît */
.projet:hover .overlay {
  opacity: 1;
}

/* Zoom au survol */
.projet:hover .minia_projet {
  transform: scale(1.05); /* zoom léger (5%) */
}

.projet:hover .overlay h2 {
  opacity: 1; 
  transform: scale(1);  /* zoom jusqu’à la taille normale */
}

.cta_about_me {
  display: inline-block;
  margin: 80px auto;               /* espace autour */
  padding: 15px 30px;              /* taille du bouton */
  background-color: white;         /* fond blanc par défaut */
  color: black;                    /* texte noir */
  border-radius: 50px;             /* bords arrondis */
  text-decoration: none;           /* enlève le soulignement */
  font-size: 17px;
  border: 2px solid transparent;   /* pour la transition de la bordure */
  transition: all 0.3s ease;       /* animation fluide */
  text-align: center;
}

/* Centrage horizontal (si tu veux vraiment qu’il soit au centre d’une section) */
.cta_about_me {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Effet hover */
.cta_about_me:hover {
  background-color: black;         /* fond noir */
  color: white;                    /* texte blanc */
  border: 2px solid white;         /* contour blanc */
}










.banniere_CPNE {
  width: 300%;
  display: block;
  margin: 0;
  position: relative;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
}

.infos_pages_work {
	width: 90%;
	margin: auto;
}

.titre_page_CPNE {
	font-size: 40px;
	text-align: center;
	margin-top: -340px;
}

.date_projet {
	font-size: 25px;
	text-align: center;
	margin-bottom: 200px;
}

.sous_titre {
	text-align: center;
	font-size: 20px;
	margin-bottom: 40px;
}

.texte_projet {
	width: 80%;
	padding: 20px;
	border: solid 1px white;
	border-radius: 10px;
	margin: 0px auto 50px;
}

.affiches_CPNE {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	width: 90%;
	margin: 40px auto 50px;
}

.post_insta_x_Mockup_CPNE {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 0px auto 30px;
}

.post_insta_CPNE {
	width: 90%;
}

.mockup_post_insta_CPNE {
	width: 100%;
}

.mockup_Epanel_CPNE {
	width: 300%;
	display: block;
  margin: 0px 0px 50px;
  position: relative;
  left: 00%;
  transform: translateX(-57.5%);
}

.other_project {
	font-weight: 700;
	margin: 0px 0px 40px;
}












.main_sugar {
	margin-top: 250px;
}

.visual_identity_sugar {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.palette_couleur_sugar {
	width: 90%;
	margin: auto;
	display: block;
}

.logo_sugar {
	width: 200px;
	margin: auto;
	display: block;
}

.icones_sugar_mobile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	margin-bottom: 80px;
}

.lignes_icones_sugar_mobile {
	padding-top: 30px;
	border-top: solid 1px white;
	width: 70%;
	margin: auto;
	display: block;
}

.mock_up_site_sugar {
	margin-bottom: 70px;
	width: 110%;
	position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.video_sensibilisation_sugar {
	margin-bottom: 50px;
}

.mock_up_reel_sugar {
	width: 70%;
	display: block;
	margin: -30px auto 50px;
	position: relative;
	z-index: -10;
}











.main_TCS {
	margin-top: 250px;
}

.film_TCS {
	margin-bottom: 50px;
}

.awards {
	display: flex;
	flex-direction: column;
	gap: 50px;
	margin-top: 30px;
	margin-bottom: 50px;
}

.prize_text {
	gap: 20px;
}

.TCS_prize {
	width: 170px;
}

.description_prize {
	width: 300px;
	margin: auto;
}

.photo_TCS {
	width: 100%;
}

.photos_TCS {
	display: flex;
	flex-direction: column;
	gap: 0px;
	margin-bottom: 50px;
}











.container_about {
	width: 95%;
	margin: auto;
}

.about_noah {
	width: 750px;
	position: relative;
  left: 50%;
  transform: translateX(-50%);
	margin-top: -30px;
	z-index: -9;
}

.image_noah {
	width: 850px;
	margin: -180px auto;
	display: block;
	position: relative;
  left: 50%;
  transform: translateX(-50%);
	z-index: -1;
	pointer-events: none;
}

.box_info_about {
	font-size: 20px;
	padding: 10px 20px;
	border: solid 1px white;
	border-radius: 10px;
}

.infos_noah {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: -480px;
	margin-bottom: 50px;
}

.infos_noah .box_info_about:nth-of-type(1) {
   width: 175px;
	margin-right: 150px;
}

.infos_noah .box_info_about:nth-of-type(2) {
   width: 210px;
	margin-left: 100px;
}

.infos_noah .box_info_about:nth-of-type(3) {
   width: 210px;
	margin-left: 100px;
}

.infos_noah .box_info_about:nth-of-type(4) {
   width: 160px;
	margin-right: 120px;
	
}

.infos_noah .box_info_about:nth-of-type(5) {
   width: 170px;
	margin-left: 100px;
}

.infos_noah .box_info_about:nth-of-type(6) {
   width: 180px;
	margin-right: 90px;
}
	
.infos_noah .box_info_about:nth-of-type(7) {
   width: 185px;
	margin-right: 70px;
}
	
.infos_noah .box_info_about:nth-of-type(8) {
   width: 150px;
	margin-left: 140px;
}
	
.infos_noah .box_info_about:nth-of-type(9) {
   width: 170px;
	margin-right: 0px;
}

.sous_titre_about {
	font-family: 'alaska_beta_expanded';
	font-weight: 700;
	font-size: 22px;
	color: black;
	background-color: white;
	border-radius: 5px;
	padding: 3px 20px;
	display: inline-block;
	position: relative;
  left: 37%;
  transform: translateX(-50%);
}

.box_experience_about {
	padding: 30px 20px 10px 20px;
	border: solid 1px white;
	border-radius: 10px;
	width: 330px;
	margin: -30px auto 50px;
}

.box_education_about {
	padding: 30px 20px 10px 20px;
	border: solid 1px white;
	border-radius: 10px;
	width: 330px;
	margin: -30px auto 80px;
}

.annee_about {
	width: 80px;
}

.text_annee_about {
	width: 210px;
}

/* Liens dans la section "About me" (expériences, etc.) */
.text_annee_about a {
   color: white;
  position: relative;  /* important pour que le lien soit au-dessus */
  z-index: 1;
  cursor: pointer;     /* change le curseur au survol */
}

/* Effet au survol */
.text_annee_about a:hover {
  opacity: 0.7; /* léger effet de hover */
}


.sous_titre_contact_about {
	font-family: 'alaska_beta_expanded';
	font-weight: 700;
	font-size: 22px;
	color: black;
	background-color: white;
	border-radius: 5px;
	padding: 3px 10px;
	margin-bottom: 30px;
	display: inline-block;
	position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.liens_contact {
	color: white;
	display: block;
	width: 180px;
}

.infos_contact {
	display: flex;
	justify-content: space-between;
	width: 250px;
	margin: auto;
}














@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
	.bg_footer {
	width: 800px;
	display: block;
  margin: -170px 0px 0px;
  position: relative;
	z-index: -1;
  left: 50%;
  transform: translateX(-50%);
}
	
	
	
	
	
	
	
	
	.overlay h2 {
  font-size: 5rem;
	
}
	
	.cta_about_me {
 font-size: 20px;
}
	
	
	
	
	
	
	
	
	
	
	
	.banniere_CPNE {
	width: 100%;
}
	
	.infos_pages_work {
	width: 90%;
	margin: auto;
}
	
	.titre_page_CPNE {
	font-size: 80px;
	text-align: left;
	margin-top: -500px;
}

.date_projet {
	font-size: 25px;
	text-align: left;
	margin-bottom: 250px;
}
	
	.texte_projet {
	width: 750px;
	padding: 20px;
	border: solid 1px white;
	border-radius: 10px;
}
	
	.affiches_CPNE {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 1300px;
}
	
	.post_insta_x_Mockup_CPNE {
	flex-direction: row;
	width: 900px;
}
	
	.post_insta_CPNE {
	width: 400px;
}
	
	.mockup_post_insta_CPNE {
	width: 1300px;
}
	
	.mockup_Epanel_CPNE {
	width: 1300px;
	margin: 0px 0px 100px;
		  left: 50%;
  transform: translateX(-50%);
}
	
	.other_project {
	text-align: center;
	font-size: 2rem;
	margin: 0px 0px 100px;
}
	
	
	
	
	
	
	
	
	
	
	
	.main_sugar {
	margin-top: 350px;
}
	
	#work_sugar {
		margin-bottom: 110px;
	}
	
	.visual_identity_sugar {
	display: flex;
	flex-direction: row;
		align-items: center;
		justify-content: space-between;
	gap: 0px;
		width: 1000px;
		margin: auto;
}

.palette_couleur_sugar {
	width: 600px;
	margin: 0px;
	display: block;
}

.logo_sugar {
	width: 200px;
	margin: 0px;
	display: block;
}
	
	.grille_icone_sugar {
		margin: 50px 0px;
	}
	
	.mock_up_site_sugar {
		width: 1000px;
	}
	
	.video_sensibilisation_sugar {
		width: 1000px;
		margin: auto;
		display: block;
		margin-bottom: 50px;
	}
	
	.mock_up_reel_sugar {
		width: 300px;
		display: block;
		margin: auto;
		margin-bottom: 50px;
	}
	
	
	
	
	
	
	
	
	
	
	.main_TCS {
	margin-top: 350px;
}
	
	#work_TCS {
		margin-bottom: 110px;
	}
	
	.film_TCS {
		width: 1000px;
		margin: auto;
		display: block;
		margin-bottom: 50px;
	}
	
	.prize_text {
		justify-content: space-between;
		width: 650px;
		margin: auto;
		display: block;
	}
	
	.description_prize {
	width: 400px;
	margin: 0px;
}
	
	.photo_TCS {
		width: 300px;
		
	}
	
	.photos_TCS {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		width: 1000px;
		margin: auto;
		margin-bottom: 50px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	.container_about {
	width: 1200px;
	margin: auto;
}

.about_noah {
	width: 1450px;
	position: fixed;
  left: 50%;
  transform: translateX(-50%);
	margin-top: -70px;
	z-index: -9;
}

.image_noah {
	width: 1400px;
	margin: 0px auto;
	display: block;
	position: fixed;
	  left: 50%;
  transform: translateX(-50%);
	z-index: -1;
	 pointer-events: none;
}

.box_info_about {
	font-size: 20px;
	padding: 10px 20px;
	border: solid 1px white;
}

.infos_noah {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	margin-top: 350px;
	margin-bottom: 50px;
}

.infos_noah .box_info_about:nth-of-type(1) {
   width: 175px;
	margin-right: 150px;
}

.infos_noah .box_info_about:nth-of-type(2) {
   width: 210px;
	margin-left: 100px;
}
	
.infos_noah .box_info_about:nth-of-type(3) {
   width: 215px;
	margin-left: 20px;
}

.infos_noah .box_info_about:nth-of-type(4) {
   width: 215px;
	margin-right: 0px;
	margin-top: 70px;
	
}

.infos_noah .box_info_about:nth-of-type(5) {
   width: 170px;
	margin-left: 120px;
	margin-top: 0px;
}

.infos_noah .box_info_about:nth-of-type(6) {
   width: 180px;
	margin-right: 70px;
	margin-top: 30px;
}
	
.infos_noah .box_info_about:nth-of-type(7) {
   width: 185px;
	margin-left: 70px;
	margin-top: 0px;
}
	
.infos_noah .box_info_about:nth-of-type(8) {
   width: 150px;
	margin-left: 170px;
}
	
.infos_noah .box_info_about:nth-of-type(9) {
   width: 275px;
	margin-right: 0px;
	margin-top: 90px;
}

.sous_titre_about {
	font-family: 'alaska_beta_expanded';
	font-weight: 700;
	font-size: 22px;
	color: black;
	background-color: white;
	padding: 3px 10px;
	display: inline-block;
	position: relative;
  left: 37%;
  transform: translateX(-50%);
}

.box_experience_about {
	padding: 30px 20px 10px 20px;
	border: solid 1px white;
	width: 430px;
	margin: -30px auto 150px;
}

.box_education_about {
	padding: 30px 20px 10px 20px;
	border: solid 1px white;
	width: 430px;
	margin: -30px auto 80px;
}

.annee_about {
	width: 80px;
}

.text_annee_about {
	width: 310px;
	position: relative;
  z-index: 0; /* ça le place dans le stacking context normal */
}

.sous_titre_contact_about {
	font-family: 'alaska_beta_expanded';
	font-weight: 700;
	font-size: 22px;
	color: black;
	background-color: white;
	padding: 3px 10px;
	margin-top: 300px;
	margin-bottom: 30px;
	display: inline-block;
	position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.liens_contact {
	color: white;
	display: block;
	width: 180px;
}

.infos_contact {
	display: flex;
	justify-content: space-between;
	width: 250px;
	margin: auto;
}
	
	.l_and_r_side_about {
		display: flex;
		width: 100%;
		flex-direction: row-reverse;
		justify-content: space-between;
		position: relative;
		z-index: -10;
	}
	
	.left_side_about {
		margin-top: 700px;
	}
	
.image_noah {
  transition: opacity 0.6s ease-out; /* animation fluide */
}

}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}