@charset "utf-8";

/* ============================================
   RESET ET CONFIGURATION GLOBALE
   ============================================ */

* {
	margin: 0; /*top right bottom left*/
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Lexend", sans-serif;
	font-optical-sizing: auto;
	font-weight: weight;
	font-style: normal;
	font-size: 1rem;
	background-color: #d9ccc5;
	color: #000000;
	-webkit-text-size-adjust: 100%;
}

/* ============================================
   STRUCTURE GÉNÉRALE
   ============================================ */

header,
footer {
	background-color: #f5f6f4;
	width: 100%;
}

header div,
footer div {
	display: flex;
	justify-content: center;
}

header {
	padding: 0;
	position: fixed;
	z-index: 777;
	width: 100%;
	box-shadow: #000000;
}

footer {
	padding: 1em;
}

/* ============================================
   TYPOGRAPHIE
   ============================================ */

h1 {
	font-family: Times New Roman, Times, serif;
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
	font-size: clamp(1.5rem, 10vw, 3.5rem); /*TODO: responsive font*/
	margin: 2em 0em 1em 0em;
}

@media only screen and (max-width: 479px) {
	h1 {
		font-size: clamp(2.5rem);
	}
}

h2 {
	font-family: "Lexend", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size: 2rem;
	margin: 0.5em 0em 1.5em 0em;
}

h3 {
	font-family: "Lexend", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 1.7rem;
	margin: 2em 0em 1.2em 0em;
}

p {
	font-family: "Lexend", sans-serif;
	font-optical-sizing: auto;
	font-weight: weight;
	font-style: normal;
	font-size: 1.4rem;
	margin: 1.1em 0em 3em 0em;
}

em {
	color: #7a7918;
	font-style: normal;
}

/* ============================================
   LISTES
   ============================================ */

li,
details {
	font-family: "Lexend", sans-serif;
	font-optical-sizing: auto;
	font-weight: weight;
	font-style: normal;
	font-size: 1.4rem;
	margin: 0.1em 0em 0.5em 0em;
	padding: 0;
}

/* Liste non ordonée personalisée avec des icônes pour bullet point */
.liste_icone {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 2em;
	padding: 1.1em 1.1em 1.1em 1.1em;
}

/* Liste ordonée personalisée */
.li-custom li {
	list-style-type: none;
	counter-increment: numbers;
	padding-left: 1em;
}
.li-custom li::before {
	/*content: "";*/
	content: counter(numbers);
	background-color: #7a7918;
	color: whitesmoke;
	font-weight: bold;
	font-size: 0.7em;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	height: 30px;
	width: 30px;
	display: flex;
	position: relative;
	top: -5px;
	left: -15px;
}

/*
.li-custom li:nth-child(1)::before {
	content: "1";
}

.li-custom li:nth-child(2)::before {
	content: "2";
}

.li-custom li:nth-child(3)::before {
	content: "3";
}

.li-custom li:nth-child(4)::before {
	content: "4";
}
*/

/* ============================================
   ICÔNES
   ============================================ */

i {
	font-size: 24px;
	margin-right: 10px;
	color: #000000;
}

/*
.icone_anchor_1 {
	anchor-name: --graduation-cap;
}

.icone_anchor_1::before {
	font-size: 2rem;
	font-family: "Font Awesome 6 Free";
	font-weight: 900; fa-solid
	content: "\f19d"; unicode pour fa-graduation-cap
	margin-right: 2em;
	position: absolute;
	position-anchor: --graduation-cap;
	position-area: left center;
	translate: -50%;
}

.icone_anchor_2 {
	anchor-name: --university;
}

.icone_anchor_2::before {
	font-size: 2rem;
	font-family: "Font Awesome 6 Free";
	font-weight: 900; fa-solid
	content: "\f19c"; unicode pour fa-university
	margin-right: 2em;
	position: absolute;
	position-anchor: --university;
	position-area: left center;
	translate: -50%;
}

.icone_anchor_3 {
	anchor-name: --school;
}

.icone_anchor_3::before {
	font-size: 2rem;
	font-family: "Font Awesome 6 Free";
	font-weight: 900; fa-solid
	content: "\f549"; unicode pour fa-school
	margin-right: 2em;
	position: absolute;
	position-anchor: --school;
	position-area: left center;
	translate: -50%;
}

@media only screen and (max-width: 1000px) {
	.icone_anchor_1::before {
		display: none;
		content: "";
	}
	.icone_anchor_2::before {
		display: none;
	}
	.icone_anchor_3::before {
		display: none;
	}
}
*/

/* ============================================
   LIENS
   ============================================ */

a {
	color: #000000;
}

a:hover {
	text-decoration: none;
	color: #7a7918;
}

a:focus,
a.visited {
	text-decoration: none;
	color: #000000;
}

/* ============================================
   NAVIGATION ET MENU
   ============================================ */

nav ul {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 2em;
	background-color: #f5f6f4;
	box-shadow: #242424;
	text-decoration: none;
	padding: 0.4em 1.1em 0.4em 1.1em;
}

nav ul li {
	font-size: 1.1rem;
	margin: 0.1em 0em 0.1em 0em;
}

nav ul li a {
	text-decoration: none;
	display: inline-block;
	color: #000000;
	font-weight: bold;
	font-size: 1.2rem;
}

nav ul li:hover {
	text-decoration: none;
	color: #7a7918;
}

.boutonmobile {
	display: none;
	text-decoration: none;
}

/* ============================================
   NAVIGATION PAR FLÈCHES
   ============================================ */

.fleche {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 1em;
	margin-bottom: 4em;
	text-decoration: none;

	transition: transform 0.2s;
}

.fleche:hover {
	transform: translateY(5px);
}

.fleche i {
	border-radius: 50%;
	background-color: antiquewhite;
	padding: 0.4em 0.5em 0.4em 0.5em;
}

/* ============================================
   BOUTONS
   ============================================ */

.bouton {
	display: flex;
	justify-content: center;
	margin: 4em 0em 2em 0em;
}

.lien-texte-bouton,
input[type="submit"] {
	background-color: #7a7918;
	color: #f5f6f4;
	font-family: "Lexend", sans-serif;
	text-decoration: none;
	border-radius: 5em;
	border-color: #00000000;
	padding: 0.5em 1em 0.5em 1em;
	display: flex;
	justify-content: center;
}

.lien-texte-bouton:hover {
	color: #f5f6f4;
}

/* Boutons de langue */
.lang-btn {
	margin: 5px 0px 2px 5px;
	padding: 8px 12px;
	border: 2px solid #ddd;
	background: #f5f6f4;
	cursor: pointer;
	border-radius: 4px;
}

.lang-btn.active,
.lang-btn.active:hover {
	background: #7a7918;
	color: #f5f6f4;
	border-color: #7a7918;
}

.lang-btn:hover {
	background: #f5f6f4;
	color: #000000;
	border-color: #7a7918;
}

/* ============================================
   TABLEAUX
   ============================================ */

table,
th,
td {
	border-collapse: collapse;
	text-align: left;
}

th,
td {
	padding: 1em;
}

th {
	border-bottom: 2px solid;
}

td {
	border-bottom: 1px solid;
}

/* ============================================
   FORMULAIRES
   ============================================ */

input[type="text"],
[type="email"],
[type="tel"],
select,
textarea {
	width: 100%;
	padding: 1em 1em 1em 1em;
	margin: 1em 0em 1em 0em;
	border: #00000000;
	border-radius: 2.5em;
	font-family: Lexend, sans-serif;
}

/* ============================================
   EFFETS VISUELS
   ============================================ */

/* Effet Zoom In */
.zoom-in {
	transition: transform 0.2s;
}
.zoom-in:hover {
	transform: scale(0.92);
}

/* Effet Zoom Out */
.zoom-out {
	transition: transform 0.2s;
}
.zoom-out:hover {
	transform: scale(1.02);
}
.zoom-out.active {
	transform: scale(1.05);
}
.zoom-out.active:hover {
	transform: scale(1.05);
}

/* ============================================
   MOSAÏQUE ET CARTES
   ============================================ */

.mosaic {
	/*columns: 350px;*/
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}
.mosaic a {
	text-decoration: none;
}
.mosaic a:hover {
	color: #000000;
}

.mosaic-card {
	width: 350px;
	height: auto;
	border-radius: 25px;
	margin-bottom: 0.8em;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 2em;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

@media only screen and (max-width: 1000px) {
	.mosaic-card {
		width: auto;
	}
}

/* Crabe card */
.card {
	--bs-card-spacer-y: 1.5rem;
	--bs-card-spacer-x: 1.5rem;
	--bs-card-title-spacer-y: 0.5rem;
	--bs-card-title-color: ;
	--bs-card-subtitle-color: ;
	--bs-card-border-width: var(--bs-border-width);
	--bs-card-border-color: var(--bs-border-color-translucent);
	--bs-card-border-radius: 1rem;
	--bs-card-box-shadow: ;
	--bs-card-inner-border-radius: calc(1rem - var(--bs-border-width));
	--bs-card-cap-padding-y: 1.125rem;
	--bs-card-cap-padding-x: 1.5rem;
	--bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
	--bs-card-cap-color: ;
	--bs-card-height: ;
	--bs-card-color: ;
	--bs-card-bg: var(--bs-body-bg);
	--bs-card-img-overlay-padding: 1rem;
	--bs-card-group-margin: 0.75rem;
	color: var(--bs-body-color);
	display: flex;
	flex-direction: column;
	height: var(--bs-card-height);
	min-width: 0;
	position: relative;
	word-wrap: break-word;
	background-clip: initial;
	background-color: var(--bs-card-bg);
	border: var(--bs-card-border-width) solid var(--bs-card-border-color);
	border-radius: var(--bs-card-border-radius);
}

/* Crabe card classes utilitaires */
.col {
	flex: 1 0 0;
}

.h-100 {
	height: 100% !important;
}

.overflow-hidden {
	overflow: hidden !important;
}

.position-absolute {
	position: absolute !important;
}

.top-0 {
	top: 0 !important;
}

.start-0 {
	left: 0 !important;
}

.w-auto {
	width: auto !important;
}

@media (min-width: 768px) {
	.d-md-inline {
		display: inline !important;
	}

	.w-md-100 {
		width: 100% !important;
	}

	.h-md-auto {
		height: auto !important;
	}

	.flex-md-row {
		flex-direction: row !important;
	}

	.col {
		flex: 1 0 0;
		margin-bottom: 0 !important;
	}
}

@media (min-width: 992px) {
	.d-lg-inline {
		display: inline !important;
	}

	.d-lg-inline-block {
		display: inline-block !important;
	}

	.d-lg-block {
		display: block !important;
	}

	.d-lg-flex {
		display: flex !important;
	}

	.d-lg-inline-flex {
		display: inline-flex !important;
	}

	.w-lg-auto {
		width: auto !important;
	}

	.h-lg-100 {
		height: 100% !important;
	}

	.flex-lg-row {
		flex-direction: row !important;
	}

	.flex-lg-grow-0 {
		flex-grow: 0 !important;
	}

	.flex-lg-shrink-0 {
		flex-shrink: 0 !important;
	}

	.flex-lg-wrap {
		flex-wrap: wrap !important;
	}

	.flex-lg-nowrap {
		flex-wrap: nowrap !important;
	}

	.justify-content-lg-center {
		justify-content: center !important;
	}

	.justify-content-lg-between {
		justify-content: space-between !important;
	}

	.align-items-lg-center {
		align-items: center !important;
	}

	.align-content-lg-between {
		align-content: space-between !important;
	}

	.my-lg-0 {
		margin-bottom: 0 !important;
	}

	.mt-lg-0,
	.my-lg-0 {
		margin-top: 0 !important;
	}

	.mt-lg-6 {
		margin-top: 1.5rem !important;
	}

	.mb-lg-0 {
		margin-bottom: 0 !important;
	}

	.ms-lg-8 {
		margin-left: 2rem !important;
	}

	.px-lg-14 {
		padding-left: 3.5rem !important;
		padding-right: 3.5rem !important;
	}

	.py-lg-8 {
		padding-bottom: 2rem !important;
		padding-top: 2rem !important;
	}

	.py-lg-14 {
		padding-bottom: 3.5rem !important;
		padding-top: 3.5rem !important;
	}

	.py-lg-24 {
		padding-bottom: 6rem !important;
		padding-top: 6rem !important;
	}

	.pe-lg-24 {
		padding-right: 6rem !important;
	}

	.pb-lg-24 {
		padding-bottom: 6rem !important;
	}

	.row-gap-lg-3 {
		row-gap: 0.75rem !important;
	}

	.row-gap-lg-4 {
		row-gap: 1rem !important;
	}

	.column-gap-lg-6 {
		column-gap: 1.5rem !important;
	}

	.text-lg-start {
		text-align: left !important;
	}

	.col {
		flex: 1 0 0;
		margin-bottom: 2em !important;
	}
}

.d-flex-n {
	display: flex;
}

.flex-column {
	flex-direction: column !important;
}

.py-12 {
	padding-bottom: 3rem !important;
	padding-top: 3rem !important;
}

.px-8 {
	padding-left: 2rem !important;
	padding-right: 2rem !important;
}

.position-relative {
	position: relative !important;
}

/* ============================================
   GRILLE CARRÉE PERSONNALISÉE
   ============================================ */

@media (min-width: 992px) {
	.col-1-row-1 {
		grid-column: 1;
		grid-row: 1;
	}

	.col-2-row-1 {
		grid-column: 2;
		grid-row: 1;
	}

	.col-1-row-2 {
		grid-column: 1;
		grid-row: 2;
	}

	.col-2-row-2 {
		grid-column: 2;
		grid-row: 2;
	}

	.grid-sq {
		display: grid;
		grid-template-columns: 2;
		grid-template-rows: 2;
		grid-gap: 2em;
	}
}

@media (max-width: 992px) {
	.grid-sq {
		display: flex;
		flex-direction: column;
		flex-basis: 100%;
	}
}

/* ============================================
   LEFT RIGHT PERSONNALISÉ
   ============================================ */

.pad-left {
	padding-left: 2em;
}

.pad-right {
	padding-right: 2em;
}

@media (max-widht: 992px) {
	.pad-left {
		padding-left: 0;
	}
	.pad-right {
		padding-right: 0;
	}
}

.flex-end-pad {
	align-items: flex-end;
	padding-right: 2em;
}

.left p {
	text-align: right;
}

.left,
.right {
	flex-basis: 50%;
	display: flex;
	flex-direction: column;
}

@media (max-width: 992px) {
	.left,
	.right {
		flex-basis: 100%;
	}
}

/* ============================================
   INDEX
   ============================================ */

/* ============================================
   PROJETS
   ============================================ */

.legende {
	font-size: 0.9rem;
	text-decoration: italic;
	margin-top: 1em;
	margin-bottom: 1em;
	color: #555555;
}

.stack-area {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 4em;
	margin-bottom: 3em;
}

.stack-card {
	position: relative;
	transition: 0.3s ease-in-out;
	cursor: pointer;
	border-radius: 25px;
	box-sizing: border-box;
	padding: 35px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.stack-card-left {
	left: calc(5%);
	background: #f5f6f4;
}

.stack-card-right {
	right: calc(5%);
	background: #999722;
}

.stack-card-img {
	width: auto;
	height: 350px;
	background-repeat: no-repeat;
	background-size: cover;
}

.stack-card-img p {
	background-color: #f5f6f4;
}

.stack-card-txt {
	width: 80%;
	height: auto;
	z-index: 1;
}

.stack-card-left p {
	text-align: right;
}

.stack-card-right p {
	text-align: left;
}

/* Mettre une carte au premier plan */
.stack-card.active {
	z-index: 444;
}

/* ============================================
   EXPERIENCE
   ============================================ */

/* ============================================
   FORMATION
   ============================================ */

/* ============================================
   A PROPOS
   ============================================ */

.tags span {
	color: #000000;
	background-color: #f5f6f4;
	border-radius: 10px;
	line-height: 22px;
	margin: 5px 5px 0px 0px; /*TODO: fix margin top interference*/
	padding: 5px 7px 5px 7px;
	line-height: 2em;
}

.tags span:hover {
	color: #7a7918;
}

.details-content {
	padding: 0 1em;
	line-height: 2em;
}

summary {
	cursor: pointer;
}

.marker-color::marker {
	color: #7a7918;
}

/* ============================================
   CONTACT
   ============================================ */

/* ============================================
   UTILITY
   ============================================ */

.mg-top-0 {
	margin-top: 0;
}

.mg-bot-5 {
	margin-bottom: 5em;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Responsive padded container */
.container {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	margin-left: auto;
	margin-right: auto;
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	width: 100%;
}

@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.container {
		max-width: 1140px;
	}
}

@media (min-width: 1600px) {
	.container {
		max-width: 1140px;
	}
}

.row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--bs-gutter-x) * -0.5);
	margin-right: calc(var(--bs-gutter-x) * -0.5);
	margin-top: calc(var(--bs-gutter-y) * -1);
}

.row > * {
	flex-shrink: 0;
	margin-top: var(--bs-gutter-y);
	max-width: 100%;
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	width: 100%;
}

.col-12 {
	flex: 0 0 auto;
	width: 100%;
}

/* Écrans moyens et petits */
@media only screen and (max-width: 1000px) {
	/* Menu */
	.visible {
		display: block;
	}
	.invisible {
		display: none;
	}
	a.boutonmobile {
		display: block;
		background-color: #f5f6f4;
		text-align: right;
		font-weight: bold;
		font-size: 1.4rem;
	}
	nav {
		position: relative;
	} /* pour positionnner le menu ul à l'intérieur */
	/* Menu principal : masqué initialement, en position absolue (par dessus le texte qui suit), sur toute la largeur */
	nav > ul {
		display: none;
		position: absolute;
		width: 100%;
	}
	nav ul ul {
		display: block;
		position: static;
		width: 100%;
	}
	nav ul ul a {
		padding-left: 50px;
	}
	.menu {
		margin: 10% 0;
		padding-bottom: 10%;
	}
}

/* Très petits écrans */
@media only screen and (max-width: 479px) {
	/* Menu */
	.visible {
		display: block;
	}
	.boutonmobile {
		display: block;
		text-align: right;
		padding-right: 10%;
		border-bottom: 1px;
		border-bottom-color: #f5f6f4;
	}
	nav ul {
		margin: 0;
		display: none;
	}
	nav li {
		border-bottom: solid 1px;
		border-bottom-color: #f5f6f4;
	}
	nav li a {
		text-align: left;
		padding: 0% 10% 0% 10%;
	}
	.menu {
		margin: 10% 0;
		padding-bottom: 10%;
	}

	/* Misc. */
	footer {
		margin-top: 150px;
	}
}