.container-fluid {
	background-color: white;
}

/*------------------  HEADER  ---------------------*/


header	{
	padding: 3rem 2rem 0 2rem;
}

nav	{
	position: relative;
}

.col-header	{
	/* 
    max-width: 30%;
	position: relative;
	padding-left: .5rem; */
	flex: 0 0 33.333333333%;
	max-width: 33.333333333%;
	padding: 0 1.2rem;
}

#moi	{
	padding-bottom: .8rem;
	border-bottom: 1px solid #5dcfb0;
	
}

#col_contact	{
	position: absolute;
	right: 1.2rem;
    bottom: -15px;
    /* margin-right: 15px; */
    padding-bottom: 15px;
	/* border-bottom: 1px solid #152752; */
}

#div_contact	{
	position: absolute;
	top: 0.6rem;
	left:0;
	right:0;
	text-align: center;
	padding-top: .3rem;
	border-top: 1px solid #5dcfb0;
	border-radius: .5rem;
	z-index: 101;
}

#btn_contact	{

	font-family: 'Amatic SC', cursive;
	color: #000;
	font-weight: 900;
	text-align: center;
    word-break: break-word;
}

/* #btn_contact:hover, #btn_contact:focus	{
	font-weight: bold;
} */

a:hover, a:focus	{
	text-decoration: none;
}


#menu	{
	display: flex;
	padding-top: 1rem;
	justify-content: space-around;
}

.filtre h3 {
	/* font-weight: 900; */
	cursor: pointer;
	padding: .2rem 0;
	font-family: 'Raleway', sans-serif;
	font-variant-caps: all-small-caps;
	font-size: 1.28rem;
}

.filtre h3:hover {
	font-weight: bold;
	
}

.triangle-down {
	display: inline-block;
	position:absolute;
	content:'';
	height:.8rem;
	width:.8rem;
	background:#fff;
	left:16%;
	bottom: -.4rem;
	/* margin-left:-10px; */
	/* top:-.4rem; */
	border-top:1px solid #5dcfb0;
	border-left:1px solid #5dcfb0;
	transform: rotate(-135deg);
	box-sizing: border-box;
}


.actif	{
	font-weight: bold !important;
	color: #152752;
}

#arrow-contact	{
	position: relative;
}

.triangle-up {
	display: inline-block;
    position: absolute;
    content: '';
    height: .6rem;
    width: .6rem;
    background: #fff;
    left: 45%;
    top: -.7rem;
    /* margin-left: -10px; */
    /* top: -.4rem; */
    border-top: 1px solid #5dcfb0;
    border-left: 1px solid #5dcfb0;
    transform: rotate(45deg);
    box-sizing: border-box;
}



/*------------------  GLOBAL  ---------------------*/


body	{
	color: #152752;
}

#background {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
}

h1	{
	
	font-family: 'Raleway', sans-serif;
    font-weight: 900;
    font-style: italic;
	
	/* font-family: 'Amatic SC', cursive; */
	margin-bottom: 0px !important;
	font-size: 3.6rem;
	/* font-weight: bold; */
}

h2	{
	display: inline;
	font-size: 1.5rem;
    font-family: 'Amatic SC', cursive;
	
}

h3	{
	font-size: 1.2rem;
	padding-left: 0;
	/* font-family: 'Amatic SC', cursive; */
	font-family: 'Josefin Slab', serif;
}


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



/*------------------  ASIDE  ---------------------*/


/* aside	{
	color: Black;
	display: flex;
	flex-direction: column;
	width: 16vw;
	background-color: #152752;
	position: fixed;
    top: 0;
    right: -30%;
	min-height: 100vh;
	z-index: 2080;
	box-shadow: -1px 0 15px #1527521f;
}
 */

#top-aside	{
	margin-bottom: auto;
}

#logo	{
	display: none;
	margin: .6rem 0;
	padding-bottom: .5rem;
}

#job	{
	font-size: 1rem;
	font-family: 'lato', sans-serif;
}

#contact-mobile	{
	display: none;
}

#contact-btn	{
	display: none;
}

.line	{
	border-bottom: 1px solid white;
	margin-bottom: 1.5rem;
}

#aside-header	{
	position: relative;
}

#title	{
	position: relative;
    word-break: break-word;
    display: block;
    font-size: 2.4rem;
	font-style: italic;
    font-family: 'Raleway', sans-serif;
    padding-bottom: .5rem;
}

#triangle-aside	{
	display: inline-block;
    position: absolute;
    content: '';
    height: 1rem;
    width: 1rem;
    /* background: #152752; */
    background: #fff;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-135deg);
    box-sizing: border-box;
}


#description	{
	font-family: 'Raleway', sans-serif;
	font-size: 1rem;
	font-variant-caps: normal !important;
    padding: 3rem 3rem 1.8rem 3rem;
    background-color: white;
	color: #203464;
}

#description p {
    /* display: inline-block; */
    margin-bottom: .3rem;
}



/* Liens projets */

.project-link	{
	font-weight: 600;
	color: #5dcfb0;
}

.project-link:hover	{
	color: #46bb9b;
}

/*  */



p.desc-link	{
	margin-top: 1rem;
}

#link	{
	display: none;
	font-family: 'Raleway', sans-serif;
	font-size: 1rem;
	font-variant-caps: normal !important;
	text-align: justify;
    padding: 0 1.6rem 1rem;
    background-color: white;
	color: #203464;
}

#email	{
	text-decoration: none;
	color: black;
}

#email:hover, #email:active	{
	color: white;
}

.aside_contact	{
	width: 24vw;
}

label	{
	font-size: 1rem;
	font-family: 'Lato', sans-serif;
}




/* ----------------- CONTENU ------------------- */

#main-content	{
	position: relative;
    z-index: 1;
    background-color: #fff;
	margin-bottom: 80vh;
}

#content-zone	{
	padding-bottom: 5rem;
}

#padcont	{
	padding-top: 2rem;
}

.prow	{
	margin-bottom: 1.5rem;
}

.taf	{
	height: 100%;
	width: 100%;
}

.taf-box	{
	position: relative;
	padding: 2.8rem 1.2rem;
}

.content-wrapper {
    position: relative;
    overflow: hidden; /* Conserver l'overlay à l'intérieur */
}

.content-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Transparent par défaut */
    transition: background-color 0.3s ease-out;
    pointer-events: none; /* Pas d'interaction pour l'overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px; /* Pour éviter que le texte ne touche les bords */
}

.content-wrapper .overlay-text {
    color: white;
    opacity: 0; /* Invisible par défaut */
    transition: opacity 0.3s ease;
}

.content-wrapper:hover .overlay-text {
    opacity: 1; /* Rendre le texte visible au hover */
}



/* Couleurs d'overlay par projets */

#anjou .content-wrapper:hover .overlay {
    background-color: #008259d5;
}

#mosti .content-wrapper:hover .overlay {
    background-color: #091f5cd5;
}

#auma-web .content-wrapper:hover .overlay {
    background-color: #dc582ad5;
}

#domp .content-wrapper:hover .overlay {
    background-color: #000000d5;
}

#epoch .content-wrapper:hover .overlay {
    background-color: #000028d5;
}

#auma-pao .content-wrapper:hover .overlay {
    background-color: #c62e26d5;
}

#echinops .content-wrapper:hover .overlay {
    background-color: #607f60d5;
}

#gci .content-wrapper:hover .overlay {
    background-color: #5b3b44d5;
}

#umami .content-wrapper:hover .overlay {
    background-color: #4d56c8d5;
}

#inbat .content-wrapper:hover .overlay {
    background-color: #aa2a2ad5;
}

#bounce .content-wrapper:hover .overlay {
    background-color: #5d5688d5;
}

#perso .content-wrapper:hover .overlay {
    background-color: #ffffffb9;
/* 	background-color: #494949d5;
 */}

#overlay-test-perso	{
	color: #152752;
}



/* Stylisation du texte dans l'overlay */
.overlay-text h3 {
	font-family: 'Raleway', sans-serif;
    margin: 0;
    font-size: 2em;
    font-weight: bold;
}

.overlay-text p {
	font-family: 'Amatic SC', cursive;
    margin: 5px 0;
    font-size: 1.5em;
}

.overlay-text span {
	font-family: 'Raleway', sans-serif;
    font-size: 1.2em;
}


/* Style des titres */

h4	{
	display: inline;
	font-size: 2.2rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
	font-style: italic;
	margin-bottom: -.3rem;
	text-shadow: 0 0 3px black;
}


/* Background uni pour fond trop clair */

.lightblock:hover .titre-cont	{
	background-size: 100% 100%;
	transition: .3s ease-out;
	transition-delay: 299ms;
	/* transition-property: background-size; */
}

.showing {
	/* display: block; */
    transform: translateY(40px);
	opacity: 0;
}

.slideup {
	transition-property: transform, opacity;
	transition-duration: 0.8s;
    transform: translateY(0);
	opacity: 1;
}

.slideupnext {
	transition-property: transform, opacity;
	transition-duration: 0.8s;
	transition-delay: 0.3s;
    transform: translateY(0);
	opacity: 1;
}



footer	{
	position: fixed;
	margin: 0 -15px;
    z-index: -100;
    background-color: #201c2f;
    background-repeat: no-repeat;
    bottom: 0px;
    width: 100%;
    height: 80vh;
    color: white;
    /* padding: 1rem 0; */
/*     background-image: url(assets/footer-visite.png);
	background-size: contain; */
}

#footer-anch	{
	position: relative;
	display: flex;
	width: 100%;
    height: 100%;
}

#footer-contact	{
	position: absolute;
    display: flex;
    flex-direction: column;
    font-size: 3.2rem;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    font-style: italic;
    line-height: 4rem;
    padding-left: 32vw;
    z-index: 4;
    top: 30vh;
    width: 100%;
    background: repeating-linear-gradient( 123deg, #f8f4cb1a, #f8f4cb1a 15px, #15275200 15px, #15275200 30px);
    /* background-position: 100vh 100vw; */
    background-size: 200% 200%;
    animation: 150s linear 0s infinite normal forwards running footer-gradient;
    text-shadow: 4rem 2rem 1px #201c2f;
}

@keyframes footer-gradient {
    100% { background-position: 100% 100%;}
}

#footer-mail {
	padding-left: 4.5rem;
    padding-bottom: 3.8rem;
    line-height: 0rem;
}

#footer-tel {
	padding-bottom: 2rem;
}

#footer-end	{
	position: absolute;
    bottom: 0rem;
    left: 0;
    /* transform: translate(-50%, -50%); */
    display: flex;
    flex-direction: column;
    text-align: right;
    min-width: 100vw;
}

#copyright	{
	word-wrap: break-word;
	font-size: 1rem;
    font-family: 'Josefin Slab', serif;
	font-variant-caps: all-small-caps;
}

#thx	{
	/* position: absolute;
	bottom: 4rem;
    left: 50%;
    transform: translate(-50%, -50%); */
	font-size: 2.4rem;
    font-family: 'Amatic SC', cursive;
	/* font-variant-caps: all-small-caps; */
}

#phone-description	{
	display: none;
}



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

.modal-backdrop{
  opacity:0;
  transition:opacity .2s;
  width: 100vw;
  background-color: #fff;
}

.modal-backdrop.in{
  opacity:.8;
}

.modal-content {
	max-width: 70vw;
	margin: 0 auto;
}

.modal	{
	width: 100vw;
	padding: 0 !important;
}

.visual-s	{
	padding: 3rem 6rem;
}

/* .modal-dialog	{
	margin: 6rem auto 6rem !important;
} */

#close	{
	display:none;
	position: fixed;
    /* top: 4rem; */
    right: 27%;
    /* padding: .2rem .5rem; */
	color: #000;
	text-shadow: 0 0 3px white;
}

#close:hover, #close:active	{
	color: white;
	text-shadow: 0 0 3px #929285;
}

#close-aside	{
	display:none;
	position: absolute;
	top: 1rem;
	right: 1.6rem;
	color: #ffffffad;
	transition: .1s ease-out;
	cursor: pointer;
	padding: .3rem .6rem;
}

#close-aside:hover, #close-aside:active	{
	color: #fff;
	text-shadow: 0px 2px 7px #ff380b;
}



/*

------ Lien bounce -------
 
.subhead-type	{
	font-family: 'Roboto', sans-serif;
	font-variant: small-caps;
	font-style: italic;
	font-weight: bolder;
	font-size: .9rem;
}

.shape-btn-container-yellow	{
	background-image: url("assets/shape-btn-yellow.png");
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center;
	width: 100%;
	height: 100%;
	padding: 23% 0 12% 0;
	text-align: center;
}

.shape-btn-container-yellow span	{
	font-size: 1.2rem !important;
	color: black;
	text-decoration: none;
}

.shape-btn-container-yellow:link, .shape-btn-container-yellow:visited	{
	width: 100%;
	height: 100%;
	color: black;
	text-decoration: none;
	padding: 23% 0 12% 0;
}

.shape-btn-container-yellow:hover, .shape-btn-container-yellow:active	{
	width: 100%;
	height: 100%;
	text-decoration: none;
	padding: 22% 0 13% 0;
}
 */
 
 /*---------------------- PC NORMAL -------------------------*/

@media screen and (min-width: 1439px) and (max-width: 1800px) {
	
	.col-header	{
		flex: 0 0 33%;
		max-width: 33%;
	}
	
	#title {
		font-size: 2.2rem;
	}
}

/*---------------------- PETIT PC -------------------------*/

@media screen and (min-width: 1180px) and (max-width: 1439px) {
	
	.col-header	{
		flex: 0 0 40%;
		max-width: 40%;
	}
	
	.filtre h3 {
    font-size: 1.2rem;
	}
	
	aside	{
		width: 22vw;
	}
	
	#title {
		font-size: 2.2rem;
	}
	
	#description	{
		font-size: .9rem;
	}
	
	#logult {
		font-size: 1.4rem;
	}
	
	.taf-box	{
		padding: 1.8rem .8rem;
	}
	
	#main-content	{
		margin-bottom: 70vh;
	}
	
	h4	{
		font-size: 1.8rem;
	}
	
	.shadow-titre	{
		left: 22%;
		font-size: 1.8rem;
		animation: 200s linear 0s infinite normal forwards running gradient;
	}
	
	.titre-lg {
		font-size: 3.2rem;
		line-height: 3.2rem;
	}
	
	.shadow-titre-lg {
		font-size: 3.2rem;
		left: 20%;
	}
	
	footer	{
		height: 70vh;
	}
	
	.modal	{
		width: 78vw;
	}
	
	#footer-contact	{
		font-size: 3rem;
		top: 22vh;
	}
	
	#thx {
		padding-bottom: 1.6rem;
	}
	
}

/*---------------------- TABLETTE XL -------------------------*/

@media screen and (min-width: 836px) and (max-width: 1180px) {
	
	.col-header {
		flex: 0 0 50%;
		max-width: 50%;
		padding: 0 .5rem;
	}
	
	.filtre h3 {
		font-size: 1.2rem;
	}
	
	h1	{
		font-size:3.2rem;
	}
	
	h2	{
		font-size:1.4rem;
	}
	
	h3	{
		font-size:1.1rem;
	}
	
	h4	{
		font-size: 1.8rem;
	}
	
	.taf-box	{
		padding: 1.8rem .8rem;
	}
	
	.titre {
		bottom: .2rem;
		right: -20px;
		padding: 0 .5rem;
	}
	
	.titre-lg {
		font-size: 3.2rem;
		line-height: 3.2rem;
	}
	
	.cont-lg {
		padding-left: 3rem !important;
	}
	
	.shadow-titre	{
		left: 24%;
		left: 22%;
		font-size: 1.8rem;
		animation: 200s linear 0s infinite normal forwards running gradient;
	}
	
	.shadow-titre-lg {
		left: 14%;
		font-size: 3.2rem;
	}
	
	.bar-titre {
		bottom: 3.4rem;
	}
	
	.arrow-titre {
		bottom: -0.1rem;
		border-left: .6rem solid transparent;
		border-right: .6rem solid transparent;
		border-bottom: 1.2rem solid #fff;
	}
	
	.arrow-titre-lg {
		bottom: -0.1rem;
		border-left: .6rem solid transparent;
		border-right: .6rem solid transparent;
		border-bottom: 1.2rem solid #fff;
		left: 3rem;
	}
	
	
	
	aside	{
		/* padding: 2rem .8rem; */
		width: 24vw;
	}
	
	#title {
		font-size: 2rem;
	}
	
	#description	{
		font-size: .9rem;
	}
	
	#logult {
		font-size: 1.4rem;
	}
	
	#main-content	{
		margin-bottom: 50vh;
	}
	
	footer	{
		height: 50vh;
	}
	
	#footer-contact	{
		padding-left: 34vw;
		font-size: 2.3rem;
		top: 12vh;
		text-shadow: 3rem 1.4rem 1px #201c2f;
	}
	
	#footer-mail {
		padding-left: 4rem;
		padding-bottom: 2.4rem;
	}
	
	#thx {
		padding-bottom: 1rem;
	}
	
	.modal	{
		width: 100vw;
	}
	
	.visual-s {
		padding: 2rem 3rem;
	}
	
}

/*---------------------- TABLETTE -------------------------*/

@media screen and (max-width: 836px) {
	
	#row-taf	{
		padding: 0;
	}
	
	.col-header	{
		flex: 0 0 60%;
		max-width: 60%;
		padding-left: .5rem;
	}

	#col_contact	{
		right: .5rem;
	}
	
	h1	{
		font-size: 2.8rem;
	}
	
	h2	{
		font-size: 1.2rem;
	}
	
	h3	{
		font-size:1rem;
	}
	
	h4	{
		font-size: 1.4rem;
	}
	
	.filtre h3 {
		font-size: 1rem;
	}

	#title {
		font-size: 1.6rem;
	}

	.content-wrapper .overlay {
        background-color: rgba(0, 0, 0, 0) !important; /* Toujours transparent sur mobile */
    }

    .content-wrapper:hover .overlay {
        background-color: rgba(0, 0, 0, 0) !important; /* Empêche l'activation de la couleur au hover */
    }

    .content-wrapper:hover .overlay-text {
        opacity: 0 !important; /* Garde le texte invisible au hover */
    }
	
	.taf-box	{
		padding: 1rem .5rem;
	}

	aside	{
		width: 24vw;
	}
	
	#description	{
		font-size: .8rem;
		padding: 2rem 1rem 1rem;
	}
	
	#logult {
		font-size: 1.4rem;
		padding: 1.6rem 1rem 0;
	}
	
	#main-content	{
		margin-bottom: 50vh;
	}
	
	footer	{
		height: 40vh;
	}
	
	#footer-contact	{
		padding-left: 38vw;
		font-size: 1.5rem;
		top: 10vh;
		text-shadow: 1.2rem 1rem 1px #201c2f;
		background: repeating-linear-gradient( 123deg, #f8f4cb1a, #f8f4cb1a 8px, #15275200 8px, #15275200 16px);
		background-position: 100vh 100vw;
		background-size: 200% 200%;
	}
	
	#footer-mail {
		padding-left: 2rem;
		padding-bottom: 0rem;
	}
	
	#footer-end {
		left: 30px;
	}
	
	#footer-tel {
		padding-bottom: 1rem;
	}
	
	#thx {
		padding-bottom: .4rem;
		font-size: 1.2rem;
	}
	
	#copyright {
		font-size: 1rem;
	}
	
	.modal	{
		width: 100vw;
	}
	
	.visual-s {
		padding: 2rem 3rem;
	}
	
	#padcont {
		padding-top: 2rem;
	}
	
}


/*---------------------- PORTABLE XL -------------------------*/

/* @media screen and (min-width: 576px) and (max-width: 768px) {
	
	.col-header	{
		flex: 0 0 70%;
		max-width: 70%;
	}
	
	h1	{
		font-size: 3rem;
	}
	
	h2	{
		font-size: 1rem;
	}
	
	#title	{
		font-size: 1.2rem;
	}
	
	.taf-box	{
		padding: .5rem !important;
	}
	
	#padcont {
		padding-top: 2rem;
	}
	
	aside	{
		padding: 3rem .5rem;
		width: 24vw;
	}
	
	.modal	{
		width: 76vw;
	}
	
	.visual-s {
		padding: 1.5rem 2rem;
	}

} */


/*---------------------- PETIT PC -> PORTABLE -------------------------*/


@media screen and (min-width: 576px) and (max-width: 1439px) {
	
	body	{
		font-size: .8rem;
	}
	
	.visual-s {
		padding: 1rem 1.5rem;
	}
	
	#job	{
		font-size: .8rem;
	}
	
	.icon	{
		font-size: .6rem;
	}

	#close	{
		right: 27%;
	}
	
}



/*---------------------- PORTABLE -------------------------*/



@media only screen and (max-width: 576px) {
	
	header	{
		display: none;
	}

	#background {
		display:none;
	} 

	#content-zone	{
		padding-bottom: 0;
	}
	

	#padcont	{
		padding: 0 0 2rem;
	}

	.titre	{
		display: none;
	}

	.bar-titre	{
		display: none !important;
	}

	.block	{
		/* margin-bottom: 1.5rem; */
		padding: 0 !important;
	}
	
	.taf	{
		border-radius: 0;
		border-bottom: 1px solid white;
	}
	
	.taf-box .taf {
		opacity: 1;
	}
	
	#main-content {
		margin-bottom: 2rem;
	}
	
	.prow	{
		margin-bottom: 0;
	}
	
	#top-aside	{
		position: relative;
		width: 100vw;
		left: 0;
		top: 0;
		min-height: 10vw;
		padding: 2rem 1rem 1rem;
		border-left: 0;
		background: white;
	}
	
	#logo	{
		margin: auto;
		display: flex;
		padding: 0;
		/* justify-content: space-between; */
	}
	
	#titre-mobile	{
		/* padding-left: 1.5rem; */
		margin: auto 0;
	}
	
	h1	{
		font-size: 2.2rem;
	}
	
	#job	{
		font-size: .9rem;
		font-family: 'Raleway', sans-serif;
	}
	
	#contact	{
		display: none;
		flex-direction: column-reverse;
		font-size: .8rem;
	}
	
	#email:hover, #email:active {
		color: black;
	}
	
	#contact-mobile	{
		font-family: 'Raleway', sans-serif;
		display: none;
		flex-direction: column-reverse;
		font-size: .9rem;
	}
	
	#contact-btn	{
		display: flex;
		flex-direction: column-reverse;
		justify-content: center!important;
		padding: .3rem;
		/* border-radius: .3rem;
		box-shadow: -1px 1px 8px #00000026; */
	}
	
	.line	{
		display: none;
	}
	
	#aside-description	{
		display: none;
	}
	
	
	
	.modal	{
		width: 100vw;
		padding: 1rem 0;
		z-index: 5000;
	}
	
	.visual-s {
		padding: .8rem 1.2rem;
	}
	
	.modal-backdrop {
		width: 100vw;
		height: 100%;
	}
	
	.modal-dialog	{
		margin: 0;
	}
	
	#phone-description	{
		display: block !important;
		padding: 2rem 1rem 3rem;
	}
		
	#modal-title	{
		font-weight: 600;
		font-family: 'Montserrat', sans-serif;
		font-variant-caps: normal !important;
	}

	.soft	{
		border-radius: .1rem;
		margin: 0 .4rem .4rem 0;
		filter: none;
		display: none;
	}

	#modal-description	{
		font-family: 'lato', sans-serif;
		font-size: .9rem;
		font-variant-caps: normal !important;
		font-weight: lighter;
		margin: .6rem 0 1rem;
	}
	
	.modal-content {
		max-width: 100vw;
		margin: 2rem auto;
	}
	
	.modal-backdrop	{
		z-index: 3000;
	}

	.modal-backdrop.show	{
		opacity: .7;
	}
	
	#close	{
		position: fixed;
		display: block;
		top: 1rem;
		right: 1rem;
		width: 3rem;
		text-align: center;
		padding: .2rem 0rem;
		font-size: 1.2rem;
		background-color: #ffffff;
		border-radius: .2rem;
		border: 1px solid #0000001a;
		
	}
	
	.project-link	{
		font-weight: 500;
	}
	
	footer	{
		display: none;
	}
	
	
	
}