@charset "utf-8";

/* ---------------------- */
/* &  SUMMARY             */
/* ---------------------- */

/*
	1 - Declarations
	2 - Styles généraux
	3 - Structure
	4 - Reusable elements
	5 - Elements Spécifiques
	6 - Helpers
	7 - Media queries
*/

/* ------------------------------ */
/* &  1 -  DECLARATIONS           */
/* ------------------------------ */

@font-face {
	font-family: 'Handlee';
	src: url('handlee-v20-latin-regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-primary: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Trebuchet MS",sans-serif;
	--font-secondary: Handlee;
	--color-primary: #224568;
	--color-primary-light: color-mix(in oklab, var(--color-primary) 78%, white);
	--color-primary-dark: color-mix(in oklab, var(--color-primary) 85%, black);
	--color-secondary: #F5F1EB;
}

/* ------------------------------ */
/* &  2 -  STYLES GENERAUX        */
/* ------------------------------ */

h1, h2, h3 {
	font-family: var(--font-secondary), cursive;
	text-align: center;
	line-height: normal;
	font-weight: normal;
}

h2 { font-size: 3.8rem; margin: 4.5rem 0 2.5rem; }
h3 { font-size: 3rem; letter-spacing: 0.03rem; }

strong, .bold { font-weight: bold; }
address { font-style: normal;}

form {margin:2em 0 3em;}
p { margin-top: 0; }
img { max-width: 100%; height: auto; width: 100%;}
label {display:block; font-size:1.4rem; margin:0.3em 0;}
fieldset {border:0; padding:0; margin:1em 0;}
input, textarea {display:block; box-sizing:border-box; border: 1px solid #BBBBBB; border-radius: 4px; box-shadow: 0 0 5px #BBBBBB; margin-right: 6px; padding:10px 14px; font:100% "Open Sans", Arial, Helvetica, sans-serif;}
input[type=text], input[type=email], textarea {width:100%;}
input:focus, textarea:focus {border:1px solid #333;}
input:focus:required:valid, textarea:focus:required:valid {border:1px solid green;}
button, .btn {display: inline-flex; align-self: center; padding: 13px 30px; font-family: var(--font-primary), sans-serif; background-color: var(--color-primary); font-size: 1.6rem; color: white; border: 0; border-radius: 10px; text-transform: none; text-decoration: none; transition: background-color 0.35s;}
button:hover, .btn:hover, button:focus, .btn:focus { background-color: var(--color-primary-dark); }
a:focus-visible { outline: 0; box-shadow: 0 0 0 0.2rem #2e2e31, 0 0 0 0.4rem #fff; }
button:focus-visible, .btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 0.2rem #2e2e31, inset 0 0 0 0.4rem #fff;}

dt, dd, p, ul, ol {
	&:last-child { margin-bottom: 0; }
	&:first-child { margin-top: 0;}
}

/* ------------------------------ */
/* &  3 -  STRUCTURE              */
/* ------------------------------ */

html, body, form, fieldset {margin:0; padding:0;}
html {display: flex; flex-direction: column; min-height: 100%; font-size:62.5%;}
body {flex: 1; display: flex; flex-direction: column; font-size:1.6rem; line-height: 1.7; font-family: var(--font-primary),sans-serif; color: #13072E; }
main { flex: 1; background-color: var(--color-secondary) }


/* ------------------------------ */
/* &  4 -  REUSABLE ELEMENTS      */
/* ------------------------------ */

.visuallyHidden {position:absolute; width:1px; height:0; left:0; margin:0; padding:0 !important; overflow:hidden !important; background:none !important; border:none !important; color:transparent !important;}

.section-primary { padding: 20px 12px 85px; }
.section-secondary { padding: 45px 12px 105px; position: relative; background: var(--color-primary-light); color: white; }
.section-secondary a { color: white; }
.section-secondary .btn { background-color: var(--color-primary-dark); }
.section-secondary {
	button:hover, .btn:hover, button:focus, .btn:focus {
		background-color: color-mix(in oklab, var(--color-primary-dark) 85%, black);
	}
}

.col-2 {
	display: grid; grid-template-columns: 1fr; gap: 3.5em 7%; margin: 0; padding: 0;

	@media screen and (min-width: 640px) {
		grid-template-columns: 1fr 1fr
	}
}

.container-inside { max-width: 1300px;  margin: 0 auto;}
.container-inside-md { max-width: 1100px; }
.container-inside-sm { max-width: 790px; }

.info {margin:2em 0; padding:12px 38px 14px 17px; background:#D9EDF7; border:1px solid #BCE8F1; border-radius:4px; color:#3A87AD;}
.info.succes {background-color: #DAEDD2; border-color: #CAE0B7; color:#385238;}
.info.error {background-color: #F2DEDE; border-color: #EED3D7; color: #B94A48;}
.info .heading {font-size: 1.6rem; font-weight: bold; margin: 0 0.2em 0.1em 0; padding: 0;}

.tag-container { display: flex; justify-content: center; gap: 12px; }
.tag { display: inline-block; padding: 2px 12px; margin: 0; border-radius: 8px; background-color: var(--color-primary-light); color: white;}

.style { font-family: var(--font-secondary), cursive; font-style: italic; color: var(--color-primary); font-size: 2rem; }

.formUnit {margin: 2em 0;}


/* ------------------------------ */
/* &  5 -  ELEMENTS SPECIFIQUES   */
/* ------------------------------ */

header {
	position: relative; min-height: 550px; background: url('images/header.webp') no-repeat center center; background-size: cover;

	@media screen and (min-width: 1050px) {
		padding: 0 12px;
	}

	.logo { display: block; width: 130px; height: 75px; }
}
.header-01 { background-image: url("images/cat-01.webp"); }
.header-02 { background-image: url("images/cat-02.webp"); }
.header-03 { background-image: url("images/cat-03.webp"); }
.brand { margin: 0 auto 0 0; padding: 0; }
nav, .nav-menu { display: flex; gap: 20px 38px;}
nav {
	position: relative; padding: 0 12px; font-size: 1.7rem;

	@media screen and (max-width: 1049px) {
		flex-wrap: wrap; gap: 0 12px;  background: white;
	}

	@media screen and (min-width: 1050px) {
		top: 30px; border-radius: 18px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.20);
	}

	@media screen and (max-width: 640px) {
		font-size: 1.5rem;
	}
}

.nav-menu {
	flex-wrap: wrap;
	justify-content: flex-end;

	@media screen and (max-width: 1049px) {
		flex-basis: 100%;
		order: 2;
		gap: 0 4%;
		justify-content: center;
	}

	@media screen and (max-width: 640px) {
		gap: 0 4px;
	}
}

@media screen and (max-width: 640px) {
	nav {
		padding-left: 0;

		.btn {
			text-transform: uppercase;
			font-size: 11px;
			letter-spacing: 1px;
			padding: 12px 15px;
		}

		.logo {
			width: auto;
			height: 60px;
		}
	}
}

.nav-item {
	position:relative; display: flex; align-items: center; padding: 0 10px; gap: 8px; font-family: var(--font-secondary), cursive; text-decoration: none; text-transform: uppercase; color: #333;
	@media screen and (max-width: 1049px) {
		min-height: 65px;
	}
	@media screen and (min-width: 1050px) {
		min-height: 75px;
	}
}
.nav-item::after { content: ""; position:absolute; left: 0; right: 0; bottom: 0; border-top: 5px solid transparent; border-radius: 3px 3px 0 0; transition: border-color 0.25s; }
.nav-item.active { color: var(--color-primary); }
.nav-item.active::after { border-color: var(--color-primary); }
.nav-item:hover, .nav-item:focus { color: var(--color-primary-light); }
.nav-item:hover::after, .nav-item:focus::after { border-color: var(--color-primary-light); }

.footer {
	padding: 105px 12px 45px;

	@media screen and (max-width: 639px) {
		text-align: center;

		.card-media {
			display: flex; flex-direction: column; align-items: center;
		}
	}
}
.footer .logo { width: 210px; height: 121px; }
.footer-col-2 {
	 margin: 0; padding: 0;

	@media screen and (min-width: 1050px) {
		display: grid;  grid-template-columns: 1fr 1fr;  gap: 3.5em 7%;
	}

	@media screen and (max-width: 1049px) {
		display: flex; flex-direction: column; align-items: center; gap: 3.5em;
	}
}

.footer-content {
	display: flex; flex-direction: column; align-items: center;
}

.wave { position: absolute; top: -1px; left: 0; right: 0; width: 100%; height: 25px; fill: var(--color-secondary);}
.wave-inverse {transform: rotate(180deg); top: auto; bottom: -1px;}

.categories { display: flex; gap: 80px 40px; flex-wrap: wrap; padding: 0; margin: 0; }
.categories-item { flex: 1 1 350px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.categories-img { height: 170px; object-fit: cover; }
.categories-header { position: relative; align-self: stretch; padding: 0 30px; }
.categories-header .tag-container { position: absolute; bottom: 150px; left: 43px; }
.categories-heading { margin: 0 0 2.4rem; padding: 0; }
.categories-body { flex: 1; padding: 0 20px; }
.categories-footer { padding: 10px 20px 20px; }

.card-media { display: flex; gap: 24px; }
.card-media-lg {
	gap: 24px 5%; font-size: 1.8rem;

	@media screen and (max-width: 980px) {
		flex-direction: column;
		align-items: center;
	}
}
.card-media-img { flex-shrink: 0; }
.card-media-img-lg { object-fit: cover; width: 410px; height: 300px; margin-top: 1.2rem;}
.card-media-img svg { width: 55px; height: auto; max-height: 64px; display: block; margin-top: 4px; }
.card-media-inner { flex: 1; }
.card-media-inner-center {  align-self: center; }
.card-media-heading { margin-top: 0; margin-bottom: 0.6em; text-align: left; }

.illu-heading { display: block; margin: 0 auto 70px; }
.section-primary .illu-heading { fill: rgba(0, 0, 0,0.2); }
.section-secondary .illu-heading { fill: rgba(255,255,255,0.2); }

.photo-shadows { border-radius: 15px; box-shadow: 0 0 0 7px white, 0 0 9px 7px rgba(0, 0, 0, 0.25); }

.map { box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25); border-radius: 8px; transition: transform 0.35s;}
.map {
	&:hover, &:focus {
		transform: scale(1.025);
	}
}


/* ----------------------- */
/* &  6 - HELPERS          */
/* ----------------------- */

.mt-8 { margin-top: 0.8rem; }
.mt-24 { margin-top: 2.4rem; }
.mt-48 { margin-top: 4.8rem; }
.mb-48 { margin-bottom: 4.8rem; }
.mb-0 { margin-bottom: 0 }

.gap-60 { gap: 36px 60px; }

.text-lg { font-size: 1.8rem; }

@media screen and (min-width: 640px) {
	.only-mobile {
		display: none;
	}
}

@media screen and (max-width: 639px) {
	.only-desktop {
		display: none;
	}
}


/* ----------------------- */
/* &  7 - MEDIA QUERIES    */
/* ----------------------- */
@media screen and (max-width: 980px) {
	form button, form .btn {display: block; width: 100%; text-align: center; }
}

@media screen and (min-width: 980px) {
	input[type=text], input[type=email] {width:32rem;}
	textarea {width:80%;}
}