@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

*::-webkit-scrollbar {
	height: 11px;
	width: 11px;
  }
  *::-webkit-scrollbar-track {
	border-radius: 11px;
	background-color: #1C1C1C;
  }

  *::-webkit-scrollbar-track:hover {
	background-color: #1C1C1C;
  }

  *::-webkit-scrollbar-track:active {
	background-color: #1C1C1C;
  }

  *::-webkit-scrollbar-thumb {
	border-radius: 12px;
	background-color: #FFFFFF;
  }

  *::-webkit-scrollbar-thumb:hover {
	background-color: #A3A3A3;
  }

  *::-webkit-scrollbar-thumb:active {
	background-color: #FFFFFF;
  }

body {
	font-family: 'Inria Serif', serif;
	font-style: normal;
	width: 100%;
	height: 100%;
	margin: 0;
	font: 400 15px/2.5 "Inria Serif", serif;
	color: #d7d7d7;
	background: #1c1c1c;
}


/* haut de page */
#home-background {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 1000px;
	max-height: 100%;
	position: relative;
	padding: 5px;
	box-shadow: 1px -135px 100px 59px #1C1C1C inset;
}

.nav-links {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	font-weight: bold;
}

.navigation-link {
	font-family: 'Inria Serif', serif;
	text-decoration: none;
	font-size: 0.65em;
	color: white;
	text-shadow: 0px 0px 8px #000;
}

.navigation-link:hover {
	color: #cecece;
}

nav a,
nav a:after,
nav a:before {
	transition: all .5s;
}

nav.stroke a {
	position: relative;
}

nav.stroke a:after {
	position: absolute;
	bottom: 2px;
	left: -5px;
	right: 0;
	margin: auto;
	width: 0%;
	content: '.';
	color: transparent;
	background: #aaa;
	height: 2px;
}

nav.stroke a:hover:after {
	width: 110%;
}

.caption {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	top: 35vh;
	color: #000;
	z-index: 5;
}

.caption span.titre,
.caption span.sous_titre {
	transition: all 0.3s linear;
	background-color: #111;
	color: #d7d7d7;
	padding: 18px;
	font-size: 1em;
	letter-spacing: 10px;
	box-shadow: black 0px 20px 20px;
	pointer-events: painted;
}

.caption span.sous_titre {
	font-size: 0.8em;
	box-shadow: black 0px 20px 20px;
}

.caption span.titre:hover,
.caption span.sous_titre:hover {
	color: #619090;
	cursor: default;
}

.contact-button {
	-webkit-animation: slide-in-left 1s linear both;
	animation: slide-in-left 1s linear both;
}

.social-links {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 1px;
	font-size: 1.3em;
	-webkit-animation: slide-in-right 1s linear both;
	animation: slide-in-right 1s linear both;
	width: 2%;
}

.social-links a:link,
.about-social-links a:link,
.contact-icon a:link,
.social-links a:active,
.about-social-links a:active,
.contact-icon a:active,
.social-links a:hover,
.about-social-links a:hover,
.contact-icon a:hover,
.social-links a:visited,
.about-social-links a:visited,
.contact-icon a:visited {
	color: white;
}

.social-links a:hover,
.about-social-links a:hover {
	color: #cecece;
	transform: scale(1.5);
	transition: ease-in-out 0.3s;
}

.about-social-links {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 30px;
}

.call-to-action {
	padding: 0.5em 1.5em;
	border: none;
	border-radius: 5px;
	letter-spacing: 1px;
	font-weight: bold;
	text-transform: uppercase;
	color: #1c1c1c;
	transition: all 1000ms;
	font-size: 1.2em;
	position: relative;
	overflow: hidden;
	outline: 2px solid #1c1c1c;
	background: rgba(255, 255, 255, 0.06);
}

.call-link {
	font-family: 'Inria Serif', serif;
	text-decoration: none;
	color: #1c1c1c;
	font-weight: light;
	transition: all 1000ms;
}

.call-link:hover {
	color: white;
}

.call-to-action:hover {
	color: #ffffff;
	transform: scale(1.1);
	outline: 2px solid #1c1c1c;
	box-shadow: 4px 5px 17px -4px #1c1c1c;
}

.call-to-action::before {
	content: "";
	position: absolute;
	left: -50px;
	top: 0;
	width: 0;
	height: 100%;
	background-color: #1c1c1c;
	transform: skewX(45deg);
	z-index: -1;
	transition: width 1000ms;
}

.call-to-action:hover::before {
	width: 250%;
}


.caption-text {
	margin-bottom: 40px;
}

/*? animation étoiles */
.stars,
.stars2,
.stars3 {
	position: absolute;
	height: 1px;
	width: 1px;
	background-color: #fff;
	border-radius: 100%;
	box-shadow: -42vw -4vh 0px 0px #fff, 25vw -41vh 0px 0px #fff, -20vw 49vh 0px 1px #fff, 5vw 40vh 1px 1px #fff, 29vw 19vh 1px 0px #fff, -44vw -13vh 0px 0px #fff, 46vw 41vh 0px 1px #fff, -3vw -45vh 0px 1px #fff, 47vw 35vh 1px 0px #fff, 12vw -8vh 1px 0px #fff, -34vw 48vh 1px 1px #fff, 32vw 26vh 1px 1px #fff, 32vw -41vh 1px 1px #fff, 0vw 37vh 1px 1px #fff, 34vw -26vh 1px 0px #fff, -14vw -49vh 1px 0px #fff, -12vw 45vh 0px 1px #fff, -44vw -33vh 0px 1px #fff, -13vw 41vh 0px 0px #fff, -36vw -11vh 0px 1px #fff, -23vw -24vh 1px 0px #fff, -38vw -27vh 0px 1px #fff, 16vw -19vh 0px 0px #fff, 28vw 33vh 1px 0px #fff, -49vw -4vh 0px 0px #fff, 16vw 32vh 0px 1px #fff, 36vw -18vh 1px 0px #fff, -25vw -30vh 1px 0px #fff, -23vw 24vh 0px 1px #fff, -2vw -35vh 1px 1px #fff, -25vw 9vh 0px 0px #fff, -15vw -34vh 0px 0px #fff, -8vw -19vh 1px 0px #fff, -20vw -20vh 1px 1px #fff, 42vw 50vh 0px 1px #fff, -32vw 10vh 1px 0px #fff, -23vw -17vh 0px 0px #fff, 44vw 15vh 1px 0px #fff, -40vw 33vh 1px 1px #fff, -43vw 8vh 0px 0px #fff, -48vw -15vh 1px 1px #fff, -24vw 17vh 0px 0px #fff, -31vw 50vh 1px 0px #fff, 36vw -38vh 0px 1px #fff, -7vw 48vh 0px 0px #fff, 15vw -32vh 0px 0px #fff, 29vw -41vh 0px 0px #fff, 2vw 37vh 1px 0px #fff, 7vw -40vh 1px 1px #fff, 15vw 18vh 0px 0px #fff, 25vw -13vh 1px 1px #fff, -46vw -12vh 1px 1px #fff, -18vw 22vh 0px 0px #fff, 23vw -9vh 1px 0px #fff, 50vw 12vh 0px 1px #fff, 45vw 2vh 0px 0px #fff, 14vw -48vh 1px 0px #fff, 23vw 43vh 0px 1px #fff, -40vw 16vh 1px 1px #fff, 20vw -31vh 0px 1px #fff, -17vw 44vh 1px 1px #fff, 18vw -45vh 0px 0px #fff, 33vw -6vh 0px 0px #fff, 0vw 7vh 0px 1px #fff, -10vw -18vh 0px 1px #fff, -19vw 5vh 1px 0px #fff, 1vw 42vh 0px 0px #fff, 22vw 48vh 0px 1px #fff, 39vw -8vh 1px 1px #fff, -6vw -42vh 1px 0px #fff, -47vw 34vh 0px 0px #fff, -46vw 19vh 0px 1px #fff, -12vw -32vh 0px 0px #fff, -45vw -38vh 0px 1px #fff, -28vw 18vh 1px 0px #fff, -38vw -46vh 1px 1px #fff, 49vw -6vh 1px 1px #fff, -28vw 18vh 1px 1px #fff, 10vw -24vh 0px 1px #fff, -5vw -11vh 1px 1px #fff, 33vw -8vh 1px 0px #fff, -16vw 17vh 0px 0px #fff, 18vw 27vh 0px 1px #fff, -8vw -10vh 1px 1px #fff;
	z-index: 1;
	box-shadow: 24vw 9vh 1px 0px #fff, 12vw -24vh 0px 1px #fff, -45vw -22vh 0px 0px #fff, -37vw -40vh 0px 1px #fff, 29vw 19vh 0px 1px #fff, 4vw -8vh 0px 1px #fff, -5vw 21vh 1px 1px #fff, -27vw 26vh 1px 1px #fff, -47vw -3vh 1px 1px #fff, -28vw -30vh 0px 1px #fff, -43vw -27vh 0px 1px #fff, 4vw 22vh 1px 1px #fff, 36vw 23vh 0px 0px #fff, -21vw 24vh 1px 1px #fff, -16vw 2vh 1px 0px #fff, -16vw -6vh 0px 0px #fff, 5vw 26vh 0px 0px #fff, -34vw 41vh 0px 0px #fff, 1vw 42vh 1px 1px #fff, 11vw -13vh 1px 1px #fff, 48vw -8vh 1px 0px #fff, 22vw -15vh 0px 0px #fff, 45vw 49vh 0px 0px #fff, 43vw -27vh 1px 1px #fff, 20vw -2vh 0px 0px #fff, 8vw 22vh 0px 1px #fff, 39vw 48vh 1px 1px #fff, -21vw -11vh 0px 1px #fff, -40vw 45vh 0px 1px #fff, 11vw -30vh 1px 0px #fff, 26vw 30vh 1px 0px #fff, 45vw -29vh 0px 1px #fff, -2vw 18vh 0px 0px #fff, -29vw -45vh 1px 0px #fff, -7vw -27vh 1px 1px #fff, 42vw 24vh 0px 0px #fff, 45vw -48vh 1px 0px #fff, -36vw -18vh 0px 0px #fff, -44vw 13vh 0px 1px #fff, 36vw 16vh 0px 1px #fff, 40vw 24vh 0px 0px #fff, 18vw 11vh 0px 0px #fff, -15vw -23vh 1px 0px #fff, -24vw 48vh 0px 1px #fff, 27vw -45vh 1px 0px #fff, -2vw -24vh 0px 1px #fff, -15vw -28vh 0px 0px #fff, -43vw 13vh 1px 0px #fff, 7vw 27vh 1px 0px #fff, 47vw 5vh 0px 0px #fff, -45vw 15vh 1px 1px #fff, -5vw -28vh 0px 1px #fff, 38vw 25vh 1px 1px #fff, -39vw -1vh 1px 0px #fff, 5vw 0vh 1px 0px #fff, 49vw 13vh 0px 0px #fff, 48vw 10vh 0px 1px #fff, 19vw -28vh 0px 0px #fff, 4vw 7vh 0px 0px #fff, 21vw 21vh 1px 1px #fff, -15vw -15vh 0px 1px #fff, -6vw -42vh 1px 0px #fff, -15vw 48vh 1px 1px #fff, -23vw 25vh 1px 1px #fff, -48vw 25vh 0px 1px #fff, -31vw -19vh 0px 1px #fff, 4vw 37vh 1px 1px #fff, -43vw 28vh 0px 0px #fff, 3vw -25vh 0px 1px #fff, -39vw 14vh 0px 1px #fff, -40vw 31vh 0px 1px #fff, 35vw -36vh 1px 1px #fff, 16vw 49vh 0px 0px #fff, 6vw 39vh 0px 0px #fff, 3vw -35vh 0px 1px #fff, -44vw -2vh 1px 0px #fff, -6vw 21vh 1px 0px #fff, 48vw 9vh 1px 1px #fff, -43vw 30vh 1px 1px #fff, 29vw -12vh 1px 1px #fff, -48vw 13vh 1px 0px #fff, -42vw 32vh 1px 1px #fff, 34vw 15vh 1px 1px #fff, 29vw -37vh 1px 1px #fff, 28vw 2vh 0px 0px #fff;
	-webkit-animation: zoom 16s alternate infinite;
	animation: zoom 16s alternate infinite;
}

.stars {
	top: 0%;
	left: 0%;
}

.stars2 {
	top: 0%;
	left: 50%;
}

.stars3 {
	top: 0%;
	left: 100%;
}

/* ? */


section h1 {
	font-family: 'Inria Serif', serif;
	text-transform: uppercase;
	letter-spacing: 5px;
	text-align: center;
	margin: 0;
	line-height: 1em;
}

.about-all-cards {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.about-card {
	border-radius: 30px;
	background: #3E3E3E;
	width: 70%;
	max-width: 300px;
	height: 350px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	box-shadow: 0px 5px 1px #2e2e2e75;
}

.about-card:hover {
	transition: all .5s;
	background: #2e2e2e;
}

.about-card-text {
	color: #b9b9b9;
	text-align: justify;
	font-family: Inria Serif;
	font-size: 1em;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.about-card h2 {
	color: #FFF;
	text-align: center;
	font-family: Inria Serif;
	font-size: 1.5em;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	letter-spacing: 5px;
}

.separator-images {
	width: 100%;
}

.separator-box {
	display: flex;
}

#experiences {
	background: #3e3e3e;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: auto;
}

.bloc1,
.bloc2,
.bloc3 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.bloc2 {
	flex-direction: column;
}

.experiences-svg img {
	width: 100%;
	max-height: 400px;
}

.experiences-svg {
	display: flex;
	justify-content: center;

}

.bloc2 .experiences-text {
	text-align: right;
}


.experiences-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80%;
}

.experiences-text h3,
.experiences-text h4 {
	width: 100%;
	font-size: 1.5em;
	margin: 10px;
	font-family: Inria Serif;
	font-style: normal;
	line-height: 1.2em;
}

.experiences-text h3 {
	font-size: 1.8em;
	color: #619090;
	font-weight: bolder;
}

.experiences-text h4 {
	font-weight: normal;
}

.experiences-legend {
	max-width: 500px;
	margin: 0 0 15px 0;
	font-weight: lighter;
	font-style: italic;
	color: #c4c4c4;
	line-height: 1.2em;
}

.slider {
	background: #1c1c1c;
	height: 100px;
	margin: 50px 0 50px 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.slider::before,
.slider::after {
	background: linear-gradient(to right, #1c1c1c 0%, rgba(255, 255, 255, 0) 100%);
	content: "";
	height: 100px;
	position: absolute;
	width: 200px;
	z-index: 2;
}

.slider::after {
	right: 0;
	top: 0;
	transform: rotateZ(180deg);
}

.slider::before {
	left: 0;
	top: 0;
}

.slider .slide-track {
	animation: scroll 40s linear infinite;
	display: flex;
	width: calc(250px * 14);
}

.slider .slide {
	height: 100px;
	width: 100px;
}

article {
	--img-scale: 1.001;
	--title-color: black;
	position: relative;
	border-radius: 5px;
	box-shadow: none;
	background: #DEDEDE;
	transform-origin: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

figcaption {
	z-index: 5000;
	font-size: 1.5em;
	color: #1c1c1c;
	position: absolute;
	top: 0;
	left: 5px;
	line-height: normal;
	text-shadow: 0px 3px 15px #000;
	font-family: Inria Serif;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

figcaption.white-legend {
	color: white;
}

article h2 {
	margin: 0 0 0 0;
	font-size: 1.9rem;
	font-family: Arial, Helvetica, sans-serif;
	line-height: normal;
	font-weight: bold;
	letter-spacing: 0.06em;
	color: var(--title-color);
	transition: color 0.3s ease-out;
}

figure {
	margin: 0;
	padding: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

article img {
	max-width: 100%;
	transform-origin: center;
	transform: scale(var(--img-scale));
	transition: transform 0.4s ease-in-out;
}

.card-body {
	padding: 24px;
}

.card-body p {
	color: black;
	line-height: normal;
}


article:has(:hover, :focus) {
	--img-scale: 1.1;
	--title-color: #619090;
	--link-icon-translate: 0;
	--link-icon-opacity: 1;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}


#portfolio {
	background: #3e3e3e;
	display: grid;
	max-width: 100%;
	margin-inline: auto;
	padding-inline: 5%;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
}



@media screen and (max-width: 960px) {
	article {
		container: card/inline-size;
	}

	.card-body p {
		display: none;
	}
}

@container card (min-width: 380px) {
	.project-card {
		display: grid;
		grid-template-columns: 100px 1fr;
		gap: 16px;
	}

	.article-body {
		padding-left: 0;
	}

	figure {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	figure img {
		height: 100%;
		aspect-ratio: 1;
		object-fit: cover;
	}
}

.sr-only:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

button {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: 0;
	vertical-align: middle;
	text-decoration: none;
	background: transparent;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
}

button.learn-more {
	width: 12rem;
	height: auto;
}

button.learn-more .circle {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: relative;
	display: block;
	margin: 0;
	width: 3rem;
	height: 3rem;
	background: #619090;
	border-radius: 1.625rem;
}

button.learn-more .circle .icon {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #fff;
}

button.learn-more .circle .icon.arrow {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	left: 0.625rem;
	width: 1.125rem;
	height: 0.125rem;
	background: none;
}

button.learn-more .circle .icon.arrow::before {
	position: absolute;
	content: "";
	top: -0.29rem;
	right: 0.0625rem;
	width: 0.625rem;
	height: 0.625rem;
	border-top: 0.125rem solid #fff;
	border-right: 0.125rem solid #fff;
	transform: rotate(45deg);
}

button.learn-more .button-text {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.75rem 0;
	margin: 0 0 0 1.85rem;
	color: #619090;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	text-transform: uppercase;
}

button:hover .circle {
	width: 100%;
}

button:hover .circle .icon.arrow {
	background: #fff;
	transform: translate(1rem, 0);
}

button:hover .button-text {
	color: #fff;
}

.cta-portfolio {
	background-color: #3e3e3e;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 30px 0 0;
}

.call-to-action.portfolio-section {
	justify-content: center;
}

#contact {
	width: 100%;
}

.contact {
	margin: 32px auto 128px auto;
	width: 80%;
	max-width: 370px;
	background-color: #3e3e3e;
	border-radius: 15px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact:hover {
	background-color: #2e2e2e;
	transition: all .5s;
}

.contact h3 {
	text-transform: uppercase;
	font-size: 1.8em;
	margin: 0;
	line-height: normal;
}

.contact h3.title {
	color: white;
	font-size: 2em;
}

.contact h3:hover {
	color: #619090;
	transition: ease-in-out 0.3s;
}

.contact h3.title:hover {
	color: white;
	font-size: 2em;
}

.right-icon-img.contact-section {
	width: 150px;
	margin: 5%;
	border-radius: 50%;
}

.contact-icon {
	display: flex;
	font-size: 2em;
	margin: 32px 0 0;
	gap: 48px;
}

.contact-icon a:hover {
	color: #cecece;
	transform: scale(1.5);
	transition: ease-in-out 0.3s;
}

footer {
	text-align: center;
}

/* ?définition des animations */
.animate-right,
.animate-left {
	opacity: 0;
}

.animated-div-left {
	opacity: 0;
	animation: slide-in-left 1s ease-out forwards;
}

.animated-div-right {
	opacity: 0;
	animation: slide-in-right 1s ease-out forwards;
}

.title-link {
	text-decoration: none;
}

.title-link i {
	font-size: 0.6em;
}

.title-link h2 {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* back to top button */
#back-to-top {
    display: inline-block;
    background-color: #619090;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s,
      opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
  }
  #back-to-top::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 1.5em;
    line-height: 50px;
    color: #fff;
  }
  #back-to-top:hover {
    cursor: pointer;
    background-color: #2e2e2e;
  }
  #back-to-top:active {
    background-color: #555;
  }
  #back-to-top.show {
    opacity: 1;
    visibility: visible;
  }


/* ?paramètrages des animations */
@keyframes zoom {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.5);
	}
}

@-webkit-keyframes zoom {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.5);
	}
}

@-webkit-keyframes slide-in-left {
	0% {
		-webkit-transform: translateX(-1000px);
		transform: translateX(-1000px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slide-in-left {
	0% {
		-webkit-transform: translateX(-1000px);
		transform: translateX(-1000px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

@-webkit-keyframes slide-in-right {
	0% {
		-webkit-transform: translateX(1000px);
		transform: translateX(1000px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slide-in-right {
	0% {
		-webkit-transform: translateX(1000px);
		transform: translateX(1000px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(calc(-250px * 7));
	}
}

/* ! modif mobile */
@media (max-width: 700px) {
	.right-icon {
		display: none;
	}

	.social-links {
		display: none;
	}
}

/* ? tablette */
@media (min-width: 426px) {
	.nav-links {
		align-items: flex-start;
		justify-content: flex-start;
		gap: 1em;
		font-size: 1em;
	}

	nav {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.right-icon-img {
		display: flex;
		align-items: center;
		width: 40px;
		border-radius: 50%;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	}

	#home-background {
		padding: 15px 50px 5px 50px;
		box-shadow: 1px -135px 243px 59px #1C1C1C inset;
	}

	.caption span.titre,
	.caption span.sous_titre {
		padding: 23px;
	}

	.caption span.titre {
		font-size: 2em;
	}

	.caption span.sous_titre {
		font-size: 1.5em;
	}

	.slider .slide {
		width: 150px;
	}

}


/* ? tablette large */
@media (min-width: 700px) {
	.caption {
		display: flex;
		justify-content: space-between;
		width: 95%;
		margin: auto;
	}

	.caption span.titre {
		font-size: 3.3em;
	}

	.caption span.sous_titre {
		font-size: 2.8em;
	}

	.caption span.titre,
	.caption span.sous_titre {
		padding: 32px;
	}

	.social-links {
		display: flex;
		flex-direction: column;
		font-size: 1.3em;
	}

	.about a {
		width: 0;
	}

	.call-to-action {
		font-size: 1.8em;
	}

	.about-all-cards {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 5vh;
	}

	.bloc1,
	.bloc2,
	.bloc3 {
		flex-direction: row;
		gap: 1em;
	}

	.bloc2 {
		flex-direction: row-reverse;
	}

	.experiences-text {
		padding: 1em;
	}

	.slider .slide {
		width: 250px;
	}

}

/* ? pc */
@media (min-width: 1023px) {
	.nav-links {
		font-size: 2em;
	}
}

/* ? ajustements */
@media (min-width: 375px) {
	.navigation-link {
		font-size: 0.75em;
		text-align: center;
	}
}

@media (min-width: 2000px) {
.about-card-text {
	font-size: 1.2em;
}

.about-card h2 {
	font-size: 1.5em;
	margin: 0;
}

.experiences-legend {
	font-size: 1.4em;
}

#portfolio p {
	font-size: 1.2em;
}

}