/*Body*/
@import url(https://fonts.bunny.net/css?family=montserrat-alternates:700,900i|rubik:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i);

html {
  scroll-behavior: smooth;
}

body{
	font-family: 'Rubik', sans-serif;
	color: #DC005F;
	font-size: 18;
	font-weight: 400;
	background: #FFF4E8;
	margin: 3% 3% 10rem;
	border: 2px solid #DC005F;
	border-radius:0.5rem;
    overflow-x:hidden;
}

::-moz-selection{color: #DC005F; background-color: #81ecec}
::selection{color: #DC005F; background-color: #81ecec}

header {
    display: grid;
    justify-items: center;
}

header, footer, h1, h2, h3, p, ul, li, ol, a, button, figure, img, figcaption, dl, dt, dd{
	margin-block-end: 0;
	margin-block-start: 0;
	padding-inline-start: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
}

/*Site title, h1 and footer title*/
h1, .titre-footer{
	font-family: 'Clash Display', sans-serif;
	font-size: 133;
	font-weight: 900;
	line-height: 1.05;
}
h1{
	padding-top: 20vh;
	margin-block-end:-1.6rem;
}

.titre-footer{
	margin-left: 5%;
}

/*Other titles*/
h2{
	font-family: 'Clash Display', sans-serif;
	font-size: 40;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: 1;
	margin-bottom: 1em;
	/*background-color: #DC005F;
	color: #FFF4E8;*/
}
h3{
	font-family: 'Clash Display', sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 1px;
	padding: 1.5em 0 0.5em 0;

}
h3:not(.title-contact, .travaux-title, .fiche-technique-title, .tools-list-cat, .travaux-title){
	margin: 0 1rem 1rem;
	padding: 1rem;
	text-align: center;
	display: block;
	background-color: transparent;
    border: solid 1px #DC005F;
    border-radius: 0.5rem;
    -webkit-transition: 0.14s;
}
h3:not(.title-contact, .travaux-title, .fiche-technique-title, .projects h3, .tools-list-cat h3):hover, h3:not(.title-contact, .travaux-title, .fiche-technique-title, .projects h3, .tools-list-cat h3):focus{
    -webkit-transform: translate(-.25rem, -.25rem);
    transition-duration: .14s;
    transition-property: all;
    box-shadow: .25rem .25rem 0rem #DC005F;
	cursor: pointer;
}
h3:not(.travaux-title, .fiche-technique-title, .tools-list-cat h3):active{
	box-shadow: 0 0 0 #DC005F;
	transform: translateX(3px);
}

/*Texts*/
p{
	line-height: 1.6em;
	margin-bottom: 0.8em;
}
ul{
	list-style: "| ";
	padding-left: 0.6rem;
}
li{
	line-height: 1.5rem;
	margin-top:1rem;
}
a, a:link, a:visited, a:active{
	text-decoration: none;
	color: #DC005F;
}
.footer a:hover{
	text-decoration: none;
}

/*Menu*/
.full-menu{
    bottom: 2rem;
    display: flex;
    align-items: center;
    z-index: 99;
    gap: 1rem;
    font-family: 'Clash Display', sans-serif;
    position: fixed;
    background: #fff4e8cc;
    padding: 1rem 2rem;
    border: solid 2px #DC005F;
    border-radius: 100px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0.25rem 0.25rem 0rem #DC005F;
}

.full-menu a{
	color: #DC005F;
	text-decoration: none;
}

.logo a{
	display: block;
	padding:0.5rem;
	border-radius: 0.5rem;
    -webkit-transition: 0.14s;
}

.logo a:hover{
	box-shadow: .25rem .25rem 0rem #DC005F;
	transform: translate(-0.25rem, -0.25rem);
	cursor: pointer;
}
.logo a:active{
	box-shadow: 0 0 0;
    -webkit-transform: translate(0rem, 0rem);
}

.menu{
	display: inline-flex;
	gap: 1rem;
	padding: .5rem 0;
	align-items: center;
}

.menu li{
    list-style:none;
    line-height: initial;
    margin-top:0;
}

.menu li a{
    border: solid 1px #DC005F;
    padding: .5rem 1rem;
    border-radius: .5rem;
    display: inline-block;
    -webkit-transition: .14s;
}
.menu li a:hover {
    -webkit-transform: translate(-.25rem, -.25rem);
    box-shadow: .25rem .25rem 0rem #DC005F;
}
.menu li a:active{
	box-shadow: 0 0 0;
    -webkit-transform: translate(0rem, 0rem);
}

/*Figures and buttons*/
figcaption {
	font-size: 16;
	font-weight: 300;
	text-align: left;
	margin: 0.5rem;
}
button{
	font-size: 20;
	font-weight: 800;
	font-family: 'Clash Display', sans-serif;
	letter-spacing: 1px;
	display: block;
	text-transform: uppercase;
	background-color: transparent;
	color: #DC005F;
	border: solid 1px #DC005F;
    border-radius: 0.5rem;
	width: auto;
	min-width: 250px;
	height: auto;
	margin: 0 auto 1em;
	padding: 1rem;
	-webkit-transition: 0.14s;
}
button:hover, button:focus {
    -webkit-transform: translate(-.25rem, -.25rem);
    transition-duration: .14s;
    transition-property: all;
    box-shadow: .25rem .25rem 0rem #DC005F;
	cursor: pointer;
}
button:active{
	box-shadow: 0 0 0;
    -webkit-transform: translate(0rem, 0rem);
}

/*Footer*/
.titre-footer{
	margin-block-start:0.75em;
	margin-block-end:-2.9rem;
}
.footer-contacts-grid{
	border-top:  2px dashed #DC005F50;
	display: flex;
	padding: 2em 1.5em;
	margin-top: 1em;
}
.contacts{
	list-style: none;
	display: flex;
	margin-left: auto;
	margin-right: auto;
}
.contacts button{
	margin: 0 0.7rem;
	min-width: 200px;
}

.footer-credits{
	position: relative;
	text-align: center;
	font-size: 14;
	padding-bottom: 1em;
}
.footer-hover-soko, .footer-hover-nico{
	text-decoration: underline;
	cursor: pointer;
}
.footer-img-soko, .footer-img-nico{
	display:flex;
	position: absolute;
	bottom: 10;
	opacity: 1;
	transform: rotateY(-90deg);
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	-webkit-transition-property: opacity transform;
	transition-property: opacity transform;
}
.footer-img-soko, .footer-img-nico{
	right: 2vw;
}
.footer-hover-soko:hover + .footer-img-soko{
	opacity: 1;
	transform: rotateY(0deg);
}
.footer-hover-nico:hover + .footer-img-nico{
	opacity: 1;
	transform: rotateY(0deg);
}

/*MEDIA QUERIES*/

/*Large devices*/
@media screen and (max-width: 1430px){
	.footer-img-soko, .footer-img-nico{
		right: -50;
	}
}
/*Classic devices (landscape tablets, laptops)*/
@media screen and (max-width: 1200px){
	.titre-footer{
		font-size: 150;
		margin-block-end:-3rem;
	}
	.contacts button{
		min-width: 150;
	}
}
@media screen and (max-width: 1080px){
	h1{
		font-size: 120;
		margin-block-end:-1.5rem;
	}
}
@media screen and (max-width: 960px){
	h1{
		font-size: 87;
	}
	.footer-credits{
		display: none;
	}
}

/*Medium devices (landscape phones, portrait tablets)*/
@media screen and (min-width: 850px){
.short-title, .tiny-title{
	display: none!important;
}
}
@media screen and (max-width: 850px){
	.long-title, .long.active, .tiny-title, .tiny.active{
		display: none!important;
	}
	.short-title, .short.active{
		display: block!important;
	}
	.menu li a:hover {
    -webkit-transform: none;
    box-shadow: initial;
}
	h1{
		font-size: 71;
		margin-block-end:-1.5rem;
	}
	.footer-contacts-grid{
		padding: 2em 0.5em;
	}
	.contacts button{
		min-width: 75;
		margin: 0 0.5rem;
	}
	.footer-contacts-grid{
		padding:2em 0;
	}
	.contacts button{
		margin: 0 0.3rem;
	}
}

@media screen and (max-width: 768px){

	.titre-footer{
		font-size: 100;
		margin-block-end:-2.4rem;
	}
	.footer-contacts-grid{
		padding: 2em 0.7em;
	}
	.contacts button{
		font-size: 20;
		min-width: 75;
		margin: 0 0.5rem;
	}
}

/*Small devices (portrait phones)*/
@media screen and (max-width: 576px){
	body{
		margin: 5% 5% 6rem;
	}
	.short-title, .short.active{
		display: none!important;
	}
	.tiny-title, .tiny.active {
		display: block!important;
	}
	.full-menu{
		font-size: 0.9rem;
		padding:0.5rem 1rem;
		margin: 0 1rem;
    	flex-wrap: wrap;
    	justify-content: center;
	}
	.menu li a{
	    padding: 0.25rem 0.5rem;
	}
	h1{
		font-size: 47;
		margin-block-end:-0.6rem;
	}
	.titre-footer{
		font-size: 75;
		margin-block-end:-2.2rem;
	}
	.footer-contacts-grid{
		padding: 1em 0.5em;
	}
	.contacts button{
		font-size: 16;
		min-width: 75;
		margin: 0 0.5rem;
	}
}

/*Very small devices (SE)*/
@media screen and (max-width: 490px){
	.titre-footer{
		font-size: 70;
	}
	.contacts{
		display: block;
		margin: 1em auto 0;
		padding-bottom: 1em;
	}
	.contacts button{
		min-width: 250px;
		margin: 1em auto;
	}
}