@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap");

:root {
	--maincolor: #fff;
	--secondcolor: #402060;
	/* #001f4f; */
	--thirdcolor: #809fff;
	--backgroundcolor: #000000;
	--backgroundcolor2: rgb(11, 17, 63);
	--greycolor: #202020;
	--mainfont: "Inter", sans-serif;
	--secondfont: "Syne", sans-serif;
}

/*-------------------  Header Page  -----------------------*/
header {
	height: 90px;
	width: 100vw;
	position: fixed;
	z-index: 1;
	display: flex;
	top: 0;
	padding-left: 3em !important;
	transition: 0.3s; /* Transition douce */
}

.header-contact {
	display: none;
	position: absolute;
	right: 7vw; /* Ajustez cette valeur en fonction de la position du menu burger */
	top: 10px; /* Ajustez en fonction de la hauteur du header */
}

.sticky .header-contact {
	display: flex;
	align-items: center;
}

.header-contact .contact-tag {
	font-size: 0.8rem; /* Réduit la taille du texte dans les boutons */
	padding: 5px 10px; /* Réduit le padding pour rendre les boutons plus petits */
	margin: 0 5px; /* Espacement entre les boutons */
	background-color: #000 !important;
}

.header-contact .contact-tag svg {
	height: 14px; /* Réduit la taille des icônes */
	width: 14px;
}

.sticky {
	background-color: #000;
	height: 60px; /* Hauteur réduite */
}

.sticky .logo {
	margin-top: 1em; /* Ajustez la marge du logo */
}
.sticky #burger-menu {
	margin: 1em 3em 0 3em;
}

.logo {
	width: 12%;
	margin-top: 2em;
	margin-left: 2.5em;
}

.logo img {
	width: 100%;
}

/*-------------------  Footer  -----------------------*/
footer {
	position: relative;
	bottom: 0;
	width: 100%;
	text-align: center;
	background-color: transparent;
	color: #e9e9e9;
	padding: 2em !important;
}

.copyright {
	color: #e9e9e9;
	text-align: center !important;
	display: block !important;
	position: relative !important;
	padding-top: 1em !important;
	padding-bottom: 1em !important;
	font-family: var(--mainfont);
	width: 100% !important;
}

.copyright a {
	color: #666 !important;
}

/*------------------------- HOME Introduction -------------------------------*/

.blocintro {
	margin-top: 0.3em !important;
	margin-bottom: 0em !important;
	padding: 2em 2em 2em 0em !important;
	display: grid;
	grid-template-columns: 30% 70%;
}

.blocintro .introtext {
	padding: 0em 0em 3em 2em;
}
.contact-tag {
	border-radius: 1em !important;
	background-color: var(--secondcolor) !important;
}
.contact-tag:hover {
	background-color: #fff !important;
}
.contact-tag:hover a {
	color: var(--greycolor) !important;
}
.contact-tag a {
	color: #fff !important;
	text-decoration: none;
}
.contact-tag svg {
	margin-right: 0.6rem !important;
	margin-bottom: 0.2em;
}

/*-------------------  LIENS   -----------------------*/
.liens li a {
	box-shadow: 0px 10px 30px rgb(88 164 176 / 30%);
	z-index: 3;
	padding: 1rem;
	padding-left: 2.5rem;
	margin-left: 1rem;
	background-color: #ffffff;
	margin-bottom: 1rem;
	display: block;
	text-decoration: none;
	color: var(--maincolor);
}

.liens li a:hover {
	box-shadow: 0px 15px 35px rgb(88 164 176 / 30%);
	padding: 1.3rem;
	padding-left: 3.2rem !important;
}

.liens li a:after {
	content: "→";
	margin-left: 2rem !important;
}

.liens li {
	list-style-type: none;
}

/*-------------------  projectbloc  -----------------------*/
.langages {
	color: #000 !important;
}
.buttonp {
	font-size: 0.7rem;
	color: #fff !important;
	transition: all 0.3s;
	position: relative;
	text-decoration: none;
	padding: 0.4em 0.3em 0.4em 0.3em;
}

.modal .buttonp {
	color: #fff !important;
	background-color: var(--secondcolor);
	padding: 0.1em;
	margin-right: 1em;
	--b: 1px; /* border thickness */
	--s: 0.45em; /* size of the corner */
	--color: var(--secondcolor);

	padding: calc(0.4em + var(--s)) calc(0.8em + var(--s));
	color: var(--color) !important;
	--_p: var(--s);
	background: conic-gradient(
			from 90deg at var(--b) var(--b),
			#0000 90deg,
			var(--color) 0
		)
		var(--_p) var(--_p) / calc(100% - var(--b) - 2 * var(--_p))
		calc(100% - var(--b) - 2 * var(--_p));
	transition: 0.3s linear, color 0s, background-color 0s;
	outline: var(--b) solid #0000;
	outline-offset: 0.6em;
	font-size: 13px;

	border: 0;

	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.modal .buttonp:hover,
.modal .buttonp:focus-visible {
	--_p: 0px;
	outline-color: var(--color);
	outline-offset: 0.05em;
}

.modal .buttonp:active {
	background: var(--color);
	color: #fff;
}

.annee {
	margin-top: 1.7rem;
}

.projets-liens {
	margin-top: 1.7rem;
}

.buttonp span {
	transition: all 0.3s;
}
.buttonp::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: rgba(255, 255, 255, 0.5);
	border-bottom-color: rgba(255, 255, 255, 0.5);
	transform: scale(0.1, 1);
}
.buttonp:hover span {
	letter-spacing: 2px;
	cursor: pointer;
}
.buttonp:hover::before {
	opacity: 1;
	transform: scale(1, 1);
	cursor: pointer;
}
.buttonp::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all 0.3s;
	background-color: rgba(255, 255, 255, 0.1);
}
.buttonp:hover::after {
	opacity: 0;
	transform: scale(0.1, 1);
}

/* carousel */
.carousel-inner {
	height: 300px; /* Fixer la hauteur du carrousel */
	overflow: hidden; /* Cacher tout débordement */
}
.carousel-item img {
	/* Ces propriétés garantissent que l'image est centrée et couvre l'espace disponible sans dépasser les dimensions du carrousel */
	max-width: 100%; /* Largeur maximale à 100% de l'élément conteneur */
	max-height: 300px; /* Hauteur maximale, ajustez selon vos besoins */
	margin: auto; /* Centrer l'image */
	display: block; /* Assure que l'image n'est pas en ligne */
}
.carousel {
	height: 100% !important;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
	/* Vous pouvez ajouter des propriétés pour améliorer la visibilité des icônes */
	filter: invert(100%); /* Exemple pour inverser les couleurs */
	font-size: 24px; /* Exemple pour ajuster la taille */
}
.carousel-inner {
	height: 300px !important;
}
#resetButton {
	display: none;
}
.modal-content {
	left: 20vw !important;
	width: 60vw !important;
	height: 100% !important;
	border: 3px solid var(--secondcolor) !important;
	border-radius: 2.2rem !important;
}
.modal-dialog {
	max-width: 100vw !important;
}
.modal-title {
	font-size: 3em !important;
	/* -webkit-text-stroke: 2px #FFF; */
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
		1px 1px 0 #fff;
	color: #000 !important;
	line-height: 110%;
	font-family: var(--secondfont) !important;
	font-style: normal;
	font-weight: 700 !important;
	letter-spacing: 0px;
	margin-top: 0.4em;
	margin-bottom: 1em;
}
.modal-header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.5rem;
	border-bottom: none !important ;
	border-top-left-radius: calc(0.6rem - 1px);
	border-top-right-radius: calc(0.6rem - 1px);
}
.modal-footer {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: center;
	justify-content: flex-end;
	padding: 0.75rem;
	border-top: none !important;
	border-bottom-right-radius: calc(0.3rem - 1px);
	border-bottom-left-radius: calc(0.3rem - 1px);
}
#techSelect {
	background-color: var(--greycolor);
	color: #fff;
	border: none;
	border-bottom: 3px solid #fff;
	padding: 0.4em;
}

.projectbloc {
	/* display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: auto; */
	background-color: var(--secondcolor);
	box-shadow: rgba(0, 0, 0, 0.35) 0px 54px 55px,
		rgba(0, 0, 0, 0.32) 0px -12px 30px, rgba(0, 0, 0, 0.22) 0px 4px 6px,
		rgba(0, 0, 0, 0.27) 0px 12px 13px, rgba(0, 0, 0, 0.19) 0px -3px 5px;
	color: #fff;
	transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	border-radius: 4% !important;
	cursor: pointer;
}
.projectbloc:hover {
	/* Existing box-shadow properties */
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
		rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
		rgba(0, 0, 0, 0.17) 0px 32px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

	/* Scale the card up to 105% */
	transform: scale(1.05);

	/* Keep the margin the same */
	margin: 0;

	/* Adding a transition effect for the transform property */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}
.projetdescription {
	font-family: var(--mainfont);
	padding: 1em 0 1em 0;
}
.modal-content {
	color: #000 !important;
}
.modal-content p,
.modal-content span {
	color: #000;
	font-size: 1.2rem;
	line-height: 1.4rem !important;
}
.modal-content .badge {
	color: #fff;
}
.projetdescription h3 {
	color: #000 !important;
	line-height: 0.8rem;
	margin: 0 !important;
}

.projectbloc h2 {
	font-size: 1.4em !important;
	margin-left: 0px !important;
	color: #fff !important;
	text-shadow: none !important;
	margin-top: 1em !important;
}
.badge-small {
	font-size: 0.5em !important;
	font-weight: 300 !important;
}
.projectbloc .titreprojet-small {
	font-size: 1em !important;
	margin-left: 0px !important;
	color: #fff !important;
	text-shadow: none !important;
	margin-top: 0.5em !important;
}

.imagebloc {
	max-width: 100%;
	padding-right: 0;
}

.imagebloc img {
	max-width: 100%;
}

.projectbutton {
	display: block;
	margin-top: 2em !important;
	color: var(--maincolor) !important;
}

.projectdate {
	font-size: 1em !important;
	line-height: 1.3em !important;
	color: #666;
}

.projectdescription {
	font-size: 1.3em !important;
	color: #333;
}
/* project button */
[type="button"],
[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
	color: inherit !important;
	background-color: transparent !important;
	text-decoration: none !important;
	border: none;
}

[type="button"]:hover {
	color: inherit !important;
	background-color: transparent !important;
	text-decoration: none !important;
}

.projectbutton button a {
	--c: #fff;
	box-shadow: 0 0 0 0.1em inset var(--c);
	--_g: linear-gradient(var(--c) 0 0) no-repeat;
	background: var(--_g) calc(var(--_p, 0%) - 100%) 0%,
		var(--_g) calc(200% - var(--_p, 0%)) 0%,
		var(--_g) calc(var(--_p, 0%) - 100%) 100%,
		var(--_g) calc(200% - var(--_p, 0%)) 100%;
	background-size: 53.5% calc(var(--_p, 0%) / 2 + 4%);
	outline-offset: 0.1em;
	transition: background-size 0.4s, background-position 0s 0.4s;
	color: #000 !important;
	font-size: 1.6em;
	font-weight: 600;
	text-decoration: none;
	border-radius: inherit !important;
	padding: 0.3em 1em 0.3em 1em;
	position: relative;
	bottom: 1em !important;
}

#openBtn:hover,
button a:hover {
	--_p: 100%;
	transition: background-position 0.4s, background-size 0s;
	color: var(--backgroundcolor2) !important;
}

/* -------------------  certificats  -----------------------*/

.certificatbloc {
	/* display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: auto; */
	background-color: var(--secondcolor);
	box-shadow: rgba(0, 0, 0, 0.35) 0px 54px 55px,
		rgba(0, 0, 0, 0.32) 0px -12px 30px, rgba(0, 0, 0, 0.22) 0px 4px 6px,
		rgba(0, 0, 0, 0.27) 0px 12px 13px, rgba(0, 0, 0, 0.19) 0px -3px 5px;
	color: #fff;
	transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	border-radius: 4% !important;
	cursor: pointer;
}

.certificatbloc:hover {
	/* Existing box-shadow properties */
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
		rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
		rgba(0, 0, 0, 0.17) 0px 32px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

	/* Scale the card up to 105% */
	transform: scale(1.05);

	/* Keep the margin the same */
	margin: 0;

	/* Adding a transition effect for the transform property */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}
.certificatbloc .h2 {
	font-size: 1.8rem !important;
}
.certificatannee {
	font-weight: 600;
}
/*-------------------  Button  -----------------------*/
[type="button"],
[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
	color: inherit !important;
	background-color: transparent !important;
	text-decoration: none !important;
	border: none;
}

[type="button"]:hover {
	color: inherit !important;
	background-color: transparent !important;
	text-decoration: none !important;
}

#openBtn,
button a {
	--c: var(--maincolor);
	box-shadow: 0 0 0 0.1em inset var(--c);
	--_g: linear-gradient(var(--c) 0 0) no-repeat;
	background: var(--_g) calc(var(--_p, 0%) - 100%) 0%,
		var(--_g) calc(200% - var(--_p, 0%)) 0%,
		var(--_g) calc(var(--_p, 0%) - 100%) 100%,
		var(--_g) calc(200% - var(--_p, 0%)) 100%;
	background-size: 53.5% calc(var(--_p, 0%) / 2 + 4%);
	outline-offset: 0.1em;
	transition: background-size 0.4s, background-position 0s 0.4s;
	color: #fff;
	font-size: 1.6em;
	font-weight: 600;
	text-decoration: none;
	border-radius: inherit !important;
	padding: 0.3em 1em 0.3em 1em;
	position: relative;
	bottom: 1em !important;
}

#openBtn:hover,
button a:hover {
	--_p: 100%;
	transition: background-position 0.4s, background-size 0s;
	color: var(--backgroundcolor2) !important;
}
/*-------------------  skills   -----------------------*/
.skills {
	text-align: center;
}
.skills h2 {
	text-align: center;
}
.skills-item {
	text-align: center;
}
/*-------------------  GENERAL   -----------------------*/

#main {
	max-width: 70vw;
	flex: 1;
	/* min-height: 100vh !important; */
	padding-top: 0em !important;
	margin: 0vh 15vw 0 15vw !important;
	padding-top: 15vh !important;
	position: relative !important;
}

body,
html {
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;

	-webkit-font-smoothing: antialiased;
}

html {
	height: 100vh;
	-webkit-font-smoothing: antialiased;
	background-color: rgba(0, 0, 0, 1) !important;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)),
		url("./../images/soulage.jpeg");

	background-repeat: no-repeat;
	background-size: cover !important;
	background-attachment: fixed; /* Le fond reste fixe lors du défilement de la page */
}

body {
	margin-top: 60px;
	font: 1em/1.5em var(--mainfont);
	font-style: normal;
	font-weight: 400;
	color: var(--maincolor) !important;
	word-wrap: break-word;
	background-color: transparent !important;
	/* enhance Safari image rendering */
	image-rendering: optimizeQuality;
	display: flex; /* Utilise flexbox pour le layout */
	flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.5em;
	margin: 0 0 0.4em;

	font-style: normal;
	font-weight: 300;
	word-wrap: normal;
}

h1 {
	font-size: 8em !important;
	text-shadow: -1px -1px 0 var(--thirdcolor), 1px -1px 0 #ffffffee,
		-1px 1px 0 #fff, 1px 1px 0 #fff;
	color: #000 !important;
	font-family: var(--secondfont) !important;
	writing-mode: vertical-rl;
	text-orientation: sideways;
	position: fixed;
	margin-left: inherit !important;
	right: -0.2em;
	top: 1em;
	bottom: 0em;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	margin-top: 0px;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-bottom: 1em;
}

h2 {
	font-size: 3em !important;
	/* -webkit-text-stroke: 2px #FFF; */
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
		1px 1px 0 #fff;
	color: #000 !important;
	line-height: 110%;
	font-family: var(--secondfont) !important;
	font-style: normal;
	font-weight: 700 !important;
	letter-spacing: 0px;
	margin-left: -2em;
	margin-top: 1.7em;
	margin-bottom: 1.7em;
}

h2 strong {
	text-shadow: none;
	color: #fff;
	font-weight: 700 !important;
}

h3 {
	font-size: 1.6em !important;
	color: #fff !important;
	line-height: 110%;
	font-family: var(--mainfont);
	font-style: normal;
	font-weight: 400 !important;
	letter-spacing: 0px;
}

p {
	font-family: var(--mainfont) !important;
	color: var(--maincolor);
	font-weight: 200;
	word-wrap: break-word;
	font-kerning: normal;
	font-size: 1.6em;
	line-height: 1.6 !important;
}

a {
	color: var(--maincolor) !important;
}

p a {
	color: var(--maincolor) !important;
}

/* ------------------------------------------------------- EXPERIENCE / EDUCATION ------------------------------------------ */
.experiencecontainer {
	display: grid;
	grid-template-columns: 20% 80%;
	gap: 1em;
	margin-bottom: 2em;
}

.experiencedate {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-right: 2em;
}

.experiencedate h2 {
	text-align: right;
	font-size: 2em !important;
	vertical-align: top;
	padding-right: 0.8em;
	border-right: 1px solid #fff;
	margin-top: 0 !important;
}

.experiencecontenu p {
	font-size: 1.1em !important;
}

.certificatescontainer {
	display: grid;
	grid-template-columns: 20% 80%;
	grid-template-rows: auto;
	gap: 1em;
	font-size: 1.3em;
	margin-bottom: 1em;
}

.certificatesdate {
	text-align: right;
}

/* --------------------------------- SUIVANT / PRECEDENT------------------------------------ */
.article-navigation {
	display: flex;
	justify-content: space-between;
	padding: 20px 0;
}

.nav-card {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.nav-card a {
	text-decoration: none;
	color: #333 !important;
}

.nav-arrow {
	font-size: 20px;
	margin-right: 10px;
	color: var(--secondcolor) !important;
}

/* Style pour la carte de droite */
.nav-card:last-child .nav-arrow {
	margin-left: 10px;
	margin-right: 0;
}

/* -------------------------------------------- CARDS ARTICLES ---------------------------------------------- */
.article-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 20px;
}

.article-card {
	background-color: white;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin: 10px;
	overflow: hidden;
	width: 300px; /* Adjust as needed */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.article-image {
	width: 100%;
	height: auto;
	display: block;
}

.article-content {
	padding: 15px;
}

.article-title {
	margin-top: 0;
	color: #333;
	font-size: 1.4em !important;
	margin-left: 0px !important;
	text-shadow: none !important;
	margin-top: 1em !important;
}

.article-description {
	color: #555;
	font-size: 0.9em;
}

.read-more {
	display: inline-block;
	font-size: 0.8em;
	margin-top: 10px;
	color: #333;
	text-decoration: none;
}

.read-more:hover {
	text-decoration: underline;
}

/* ------------------------------- SINGLE POST ----------------------------- */
.single-post-container {
	padding: 10px;
}

.post-content {
	background-color: #fff; /* Fond blanc pour le contenu */
	padding: 20px;
	border-radius: 10px;
	max-width: 90vw;
	margin: auto; /* Centrer le contenu */
}

.post-title {
	color: #333;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Ou une autre police de votre choix */
	font-size: 2em !important; /* Taille du titre */
	text-shadow: none;
	writing-mode: horizontal-tb;
	position: relative;
	right: 0em;
	top: 0em;
	bottom: 0em;
	margin-bottom: 1em !important;
	padding-bottom: 0px !important;
	padding-left: 0px !important;
}
.post-date {
	color: var(--secondcolor) !important;
	font-size: 1em !important;
}
.single-post-container h2 {
	font-size: 1em !important;
	text-shadow: none !important;
	margin-left: 0 !important;
}

.post-description p {
	color: #333 !important;
	line-height: 1.6 !important; /* Espacement des lignes pour une meilleure lisibilité */
	font-size: 1em;
}

.post-description p a {
	color: var(--secondcolor) !important;
	text-decoration: underline !important;
}

/* tags */
.bg-article {
	background-color: var(--secondcolor) !important;
	color: #fff !important;
	font-weight: 300 !important;
}
.tagsarticles {
	margin-bottom: 1em !important;
}
/* extraits de code */
pre {
	background-color: #f4f4f4;
	border: 1px solid #ddd;
	border-left: 3px solid var(--secondcolor);
	color: #666;
	page-break-inside: avoid;
	font-family: monospace;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1em 1.5em;
	display: block;
	word-wrap: break-word;
}
.django-ckeditor-widget {
	width: 100% !important;
	background-color: #402060;
}
/* -------------------------------------------------- FORM --------------------------------------- */

form {
	max-width: 400px;
	margin: 0 auto;
	padding: 20px;
}

label {
	display: block;
	margin-bottom: 10px;
	color: var(--maincolor);
}

input,
textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--maincolor);
	border-radius: 5px;
	background-color: black;
	color: white;
	margin-bottom: 20px;
}

input[type="submit"] {
	--c: var(--maincolor);
	border-radius: 0px !important;
	border: none;
	margin-top: 1em;
	box-shadow: 0 0 0 0.1em inset var(--c);
	--_g: linear-gradient(var(--c) 0 0) no-repeat;
	background: var(--_g) calc(var(--_p, 0%) - 100%) 0%,
		var(--_g) calc(200% - var(--_p, 0%)) 0%,
		var(--_g) calc(var(--_p, 0%) - 100%) 100%,
		var(--_g) calc(200% - var(--_p, 0%)) 100%;
	background-size: 53.5% calc(var(--_p, 0%) / 2 + 4%);
	outline-offset: 0.1em;
	transition: background-size 0.4s, background-position 0s 0.4s;
	color: #fff;
	font-size: 1.6em;
	font-weight: 600;
	text-decoration: none;
	border-radius: inherit !important;
	padding: 0.3em 1em 0.3em 1em;
	position: relative;
	bottom: 1em !important;
	cursor: pointer;
}

input[type="submit"]:hover {
	--_p: 100%;
	transition: background-position 0.4s, background-size 0s;
	color: var(--backgroundcolor2) !important;
}

/* -------------------------------------------------- FORM --------------------------------------- */
video {
	max-height: 50vw !important;
}

.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 999;
}

.popup-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 20px;
	border-radius: 5px;
}

#openBtn {
	font-size: 1.4em !important;
	cursor: pointer;
}

.close-btn {
	position: fixed;
	top: 0em;
	right: -3em;
	width: 2em;
	height: 2em;
	border: none;
	background: transparent;
	font-size: 3em;
	cursor: pointer;
}

.close-btn::before {
	content: "X";
	color: var(--maincolor);
}

/* --------------------------------------------------------BREADCRUMB FIL D'ARIANE ------------------------------- */

.breadcrumb {
	padding: 0 0.5em 0 0.5em;
	list-style: none;
}

.breadcrumb a {
	text-decoration: none;
	padding: 0 0.5em 0 0.5em;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

.breadcrumb span {
	padding: 0 0.5em 0 0.5em;

	color: #6c757d;
}