@charset "utf-8";
/* ------ RESET ------ */
html {font-size:1em;} body{font-size:1em;margin:0; padding:0;}
h1, h2, h3, h4, h5, h6 {margin:1em 0 .5em 0;line-height:1.2;font-weight:normal;font-style:normal;clear:both;} h1 {font-size:1.75em;} h2 {font-size:1.5em;} h3 {font-size:1.25em;} h4 {font-size:1em;}
a {text-decoration:none;font-weight:normal;outline:none;} a img {border:none;} img {border:none;} ul, ol {margin:0;padding:0;}
strong {font-weight:bold;} form, fieldset {margin:0;padding:0;border:none;}
input, button, select {vertical-align:middle;} table {width:100%;margin:0;border-collapse:collapse;border-spacing:0;} table td, table th {padding:0;vertical-align:top;}
h1, h2, h3, h4, h5, div, p, ul, article, aside, dialog, figure, figcaption, footer, header, hgroup, menu, nav, section  {display:block; margin:0; padding:0;}
time {display:inline; margin:0; padding:0;}
input[type=checkbox]{border:0;outline:none;}
input,textarea{border-radius:0;-webkit-appearance: none;-webkit-border-radius:0px;@include border-radius(0);
background-color: white;
background-image:none;
border: 1px solid black;
padding:2.5px;}
/* ------ /RESET ------ */
body{
	font-family:Arial,sans-serif;
	color:#0B3861;
}
a{
	color:#58ACFA;
}
a:hover{
	text-decoration:underline;
}
input, textarea{
	font-family:Arial, sans-serif;
	font-size:0.8em;
}
h1, h2, h3, h4{
	font-weight:normal;
	font-family:Arial,sans-serif;
	text-align: center
}
h1, h2, h3{
	text-transform:uppercase;
	letter-spacing:0.1em;
}

h1 span, h2 span, h3 span{
	font-weight:bold;
}
h1{
	font-size:2.5em;
}
h2{
	font-size:2em;
	margin-bottom:1.5em;
}
h3{
	font-size:1.5em;
	margin-bottom:1.25em;
}
h4{
	font-size:1.3em;
	margin-top:1em;
	text-transform:uppercase;
}
.justify{
	text-align:justify;
}
section{
	display:block;
	padding:60px 0;
	text-align: center
}
body section:nth-child(even){
	background-color:white;
}
body section:nth-child(odd){
	background-color:#0B3861;
	color:white;
}

ul{
	padding:0 0 0 15px;
	margin:10px 0;
	list-style-type: square
}
ul>li{
	margin-bottom:5px;
}
ul li ul{
	list-style-type:disc
}
input[type=text], input[type=email]{height:1.5em;}

#retour {
	display:none;
	background-color: rgba(255, 255, 255, 0.5);
	text-align: center;
	padding: 20px;
	font-size: 80px;
	font-family: Arial,sans-serif;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 60px;
}
#retour span::before{
	content:'\2303';
	color:#58ACFA;
	cursor:pointer;
}
footer{
	padding:10px 10px 100px 10px;
	text-align:center;
	color:black
}
footer #mentions-legales{
	margin-top:20px;
}
footer>span{
	display:block
}
footer>a{
	color:#0B3861
}
footer p.margin{
	margin:10px 0;
}
@media all and (min-width: 700px){
	footer{
		padding:30px 30px 100px 30px
	}
	footer>span{
		display:inline
	}
}
header {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap: 30px;
	position: fixed;
	background-color: white;
	left: 0;
	right: 0;
	top: 0;
	border-bottom:1px solid #0B3861
}
header nav#nav-desktop {
	display: none;
	flex-basis:830px;
	align-self: center;
}
header nav#nav-desktop ul{
	text-align:right;
}
header nav#nav-mobile {
	display: none;
	flex-basis:100%;
	text-align:center;
}
header figure{
	max-width: 70vw;
	padding:10px 0 10px 10px;
	display:flex;
	flex-flow:row wrap;
	justify-content: flex-start;
	gap:10px;
	align-items:center;
}
header figure img{
	max-height:70px
}
header figure figcaption{
	font-size: 1.5em;
	text-transform: uppercase;
	color: #0B3861;
	font-weight: 600;
	flex-basis:140px;
	text-align:left;
}
header #menu{
	width:30px;
	padding:10px 10px 0 0;
}
header #menu-bouton{
	display:inline-block;
	height:30px;
	width:30px;
	display:flex;
	flex-flow:row wrap;
	gap:1px;
	align-items: center;
}
header #menu-bouton span {
	flex-basis: 100%;
	display: inline-block;
	height: 3px;
	border-radius: 5px;
	background-color: #58ACFA;
}
header #menu-bouton:hover{
	cursor:pointer
}
header #menu-bouton:hover span{
	background-color: #376d9f;
}
header nav ul{
	list-style-type: none;
	font-size:1.2em;
	margin:0;
	text-align:center
}
header nav ul li{
	margin-bottom:20px;
}
header nav ul li a {
	color: #0B3861;
	padding: 2.5px 5px;
	text-transform: uppercase;
	cursor:pointer;
}
header nav ul li a:hover, header nav ul li a.selected{
	border-bottom: 2.5px solid #B40404;
	color: #B40404;
	text-decoration: none;
}

@media all and (min-width: 1240px){
	header{
		flex-flow:row nowrap;
	}
	header #menu{
		display:none;
	}
	header nav#nav-desktop {
		display: block;
		text-align: center;
		
	}
	header nav ul li {
		display: inline-block;
		margin: 0 10px 10px 10px;
	}
}
@media all and (min-width: 1340px){
	header{
		padding:30px
	}
	header nav#nav-desktop {
		flex-basis:65vw
	}
	header nav ul li {
		display: inline-block;
		margin: 0 15px 15px 15px;
	}
}
@media all and (min-width: 1600px){
	header{
		padding:30px
	}
	header nav#nav-desktop {
		font-size: 1.2em;
	}
	header nav#nav-desktop {
		flex-basis:unset
	}
	header figure figcaption {
		font-size: 1.7em;
	}
	header figure img {
		height: 100px;
		margin-right: 15px;
		vertical-align: middle;
	}
}
section div.conteneur{
	padding:10px
}

/* INTRO */
section#cabinet-expertise-comptable{
	padding-top:180px;
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-size: auto 100%;
	background: linear-gradient(to right, #0B3861 60%, transparent), url("/scripts/batiment.jpg");
	background: linear-gradient(to right, #0B3861 60%, transparent), -webkit-image-set(
		url("/scripts/batiment.avif"),
		url("/scripts/batiment.webp"),
		url("/scripts/batiment.jpg")
	);
	background: linear-gradient(to right, #0B3861 60%, transparent), image-set(
		url("/scripts/batiment.avif") 1x type("image/avif"),
		url("/scripts/batiment.webp") 1x type("image/webp"),
		url("/scripts/batiment.jpg") 1x type("image/jpeg")
	);
}
section#cabinet-expertise-comptable div.accroche {
	margin-top: 30px;
	font-size: 1.5em;
	text-transform: uppercase;
}
section#cabinet-expertise-comptable div.bureaux {
	margin-top: 30px;
}
section#cabinet-expertise-comptable div.bureaux div {
	margin-bottom: 20px;
}
@media all and (min-width: 1240px){
	section#cabinet-expertise-comptable div.background_color{
		display:flex;
		justify-content: flex-start;
		margin-left:8%;
	}
	section#cabinet-expertise-comptable div.conteneur{
		max-width:50vw;
		text-align:left;
	}
	section#cabinet-expertise-comptable div.conteneur h1{
		text-align:left;
		max-width:320px
	}
	section#cabinet-expertise-comptable div.accroche {
		margin:60px 0 120px 0;
	}
}
/* SPÉCIALITÉS */
section#specialites div.pole h3 span {
	color: #B40404;
	font-size: 1.6em;
}
section#specialites div.droite{
	display:flex;
	flex-flow:row wrap;
	gap:15px 30px;
	justify-content: space-evenly;
	align-items: flex-start;
}
.pole{
	padding-bottom:30px;
	flex-basis:400px;
}
@media all and (min-width: 1120px){
	section#specialites{
		padding:0
	}
	section#specialites>div{
		display:grid;
		grid-template-columns: 35% 60%;
		gap:30px;
		padding:0;
	}
	section#specialites div.gauche{
		background-color:#E0F2F7;
		padding:60px 0 30px 0;
	}
	section#specialites div.gauche>div{
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		margin:0 30px 0 30px;
	}
	section#specialites div.gauche h2{
		text-align: left;
		max-width:260px
	}
	section#specialites div.droite{
		padding:60px 30px
	}
}
@media all and (min-width:1570px){
	section#specialites>div{
		grid-template-columns: 25% 70%;
	}
	section#specialites div.gauche{
		padding:60px 30px 30px 120px;
	}
}
/* PRESTATIONS */
.prestations-txt{
	max-width:700px;
	margin:0 auto;
}
.prestations-txt p{
	margin-bottom:20px;
}
/* NOTRE VISION */
section#notre-vision{
	padding:0;
	background-color:#E0F2F7;
}
section#notre-vision div.conteneur {
	padding: 0;
}
section#notre-vision div.gauche {
	padding:50px 10px 0px 10px;
	display:flex;
	flex-flow:row wrap;
	align-items:center;
	justify-content: space-evenly;
}
section#notre-vision div.droite{
	background-color:white;
	padding:30px 10px;
}
.notre-vision-txt{
	max-width:700px;
	margin:0 auto
}
@media all and (min-width: 1240px){
	section#notre-vision .conteneur{
		display:grid;
		grid-template-columns: 48% 52%;
		align-items:center
	}
	section#notre-vision div.gauche {
		justify-content:flex-end;
		padding-right:60px;
	}
	section#notre-vision div.droite {
		display:flex;
		justify-content:flex-start;
		padding:60px;
	}
	section#notre-vision div.gauche h2{
		max-width:140px;
	}
	.notre-vision-txt{
		margin:0;
		max-width:500px;
	}
}
/* ACTUALITÉS */
section#actualites .liste p{
	margin:0 auto;
}
section#actualites .liste p{
	margin-bottom:15px;
}
section#actualites .liste p a{
	color:white;
}
section#actualites .liste p a:hover{
	color:#58ACFA;
}
section#actualites2 a{
	color:#0e6cc8
}
/* CONTACT */
section#contact {
	background-size: cover;
	background-image: url("/scripts/test-fond.jpg");
	background-image: -webkit-image-set(
		url("/scripts/test-fond.avif"),
		url("/scripts/test-fond.webp"),
		url("/scripts/test-fond.jpg")
	);
	background-image: image-set(
		url("/scripts/test-fond.avif") 1x type("image/avif"),
		url("/scripts/test-fond.webp") 1x type("image/webp"),
		url("/scripts/test-fond.jpg") 1x type("image/jpeg")
	);
	
}
section#contact figure {
	margin-bottom:30px;
}
section#contact figure img {
	height: 100px;
}
section#contact div.droite > div{
	margin:0 auto;
	max-width:700px;
}
section#contact div.droite h4 {
	margin:30px 0 10px 0;
}
section#contact div.droite p{
	margin-bottom: 10px;
}
section#contact div.droite > div.hors_horaires_ouverture,section#contact div.droite > div.telephone{
	margin-top:30px;
	margin-bottom:20px;
}
section#contact div.droite form{
	margin:0 auto;
	max-width:700px;
}
section#contact div.droite input, section#contact div.droite textarea{
	width:99%;
	margin-bottom:5px;
}
section#contact div.droite textarea{
	height:140px;
}
section#contact form div.submit{
	text-align:right;
}
section#contact form div.submit input {
	width:unset;
	color: whitesmoke;
	background-color: #58ACFA;
	padding: 5px 7.5px;
	cursor: pointer;
	border: 1px solid #58ACFA;
}
#contact .formulaire-mentions-legales{
	margin:0 auto;
	max-width: 700px;
	padding:10px 0;
	font-size:0.9em;
}
@media all and (min-width:1240px){
	section#contact {
		padding:0
	}
	section#contact div.conteneur {
		display: grid;
		grid-template-columns: 30% 60%;
		gap:30px;
		padding:0;
	}
	section#contact div.conteneur>div{
		text-align:left;
	}
	section#contact div.conteneur>div.gauche{
		display:flex;
		justify-content: flex-end;
		margin-right:10%;
		background-color: rgba(0, 0, 0, 0.2);
		padding:60px 30px
	}
	
	section#contact div.conteneur>div.gauche>div{
		max-width:250px;
	}
	section#contact div.conteneur>div figure{
		display:none
	}
	section#contact div.conteneur h2,section#contact div.conteneur h3,section#contact div.conteneur h4{
		text-align:left;
		max-width:330px;
	}
	section#contact div.droite{
		padding:60px 30px
	}
	section#contact div.droite > div{
		margin:0;
	}
}
@media all and (min-width:1240px){
	section#contact form{
		padding-top:30px;
		display:grid;
		grid-template-columns: 1fr 1fr;
		gap:15px;
	}
	section#contact form div.submit{
		grid-row: 2 / 3;
  		grid-column: 1 / 3;
	}
	section#contact form div.inputs{
		display:flex;
		flex-flow:row wrap;
		justify-items: center;
	}
	section#contact form div.inputs>*{
		flex-basis:100%;
		margin:0;
	}
	#contact .formulaire-mentions-legales {
		padding: 30px 0;
	}
	
}


/* L'ÉQUIPE */
section#l-equipe{
	background-color:#E0F2F7;
	color:#0B3861;
}
section#l-equipe h2{
	color:#0B3861;
	margin-bottom:60px;
}
section#l-equipe > div.conteneur{
	max-width:1000px;
	margin:0 auto;
	text-align:center;
}

section#l-equipe > div.conteneur figure{
	display:inline-block;
	margin:0 30px 60px 30px;
	width:150px;
}

section#l-equipe > div.conteneur figure img{
	display:block;
	margin-bottom:10px;
	border:1px solid #0B3861;
}

section#l-equipe > div.conteneur figure figcaption{
	margin-bottom:5px;
}

section#l-equipe > div.conteneur figure figcaption.identite, section#l-equipe > div.conteneur figure figcaption.poste{
	text-transform:uppercase;
}
section#l-equipe > div.conteneur figure figcaption.poste{
	color:#B40404;
	font-size:90%;
	padding-bottom:10px;
	border-bottom:1px solid #0B3861;
	margin-bottom:10px;
}

section#l-equipe > div.conteneur figure figcaption.tel{
	font-size:80%;
}

section#l-equipe > div.conteneur figure figcaption.email{
	font-size:75%;
}