@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Sofia+Sans+Extra+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap');
*{
	margin:0;
	padding:0;
	font-family:"Open Sans",Calibri,sans-serif;
	font-size:15px;
	line-height:1.7;
}
div#page{
	overflow:hidden;
}
h1,h2,h3,
.fauxh1,.fauxh2,.fauxh3,
div#tabs ul li a{
	font-family: "Sofia Sans Extra Condensed",Calibri,sans-serif;
	font-weight:600;
}
h1,.fauxh1{
	font-size:2rem;
}
h2,.fauxh2,div#tabs ul li a{
	font-size:1.8rem;
}
h3,.fauxh3{
	font-size:1.3rem;
}
p,
.faux-p{
	font-size:1rem;
}
p,
.faux-p,
.gros-p,
.big-p{
	margin:10px 0 15px 0;
	font-weight:400;
	text-transform:none;
	font-family:"Open Sans",Calibri,sans-serif;
}
.gros-p,.gros-p b,.gros-p strong{
	font-size:1.5rem;
	font-family:"Open Sans",Calibri,sans-serif;
}
.big-p,.big-p b,.big-p strong{
	font-family:"Open Sans",Calibri,sans-serif;
	font-size:2rem;
}
.bigbig-p{
	font-family:"Open Sans",Calibri,sans-serif;
	font-size:2.6rem;
}
b,strong{
	font-weight:600;
}
span{
	display:block;
}
a{
	text-decoration:none;
	color:#;
}
ul{
	list-style-type:none;
}
.center{
	text-align:center;
	margin:0 auto;
}


/* /// COULEURS /// */
.noir{
	color:#000000;
}
.bg-noir{
	background-color:#000000;
}
.border-noir{
	border:4px solid #000000;
}

.blanc{
	color:#ffffff;
}
.bg-blanc{
	background-color:#ffffff;
}
.border-blanc{
	border:4px solid #ffffff;
}

.bleu{
	color:#2F5B8A;
}
.bg-bleu{
	background-color:#2F5B8A;
}

.bleubis{
	color:#529DEE;
}
.bg-bleubis{
	background-color:#529DEE;
}

.jaune{
	color:#FFED00;
}
.bg-jaune{
	background-color:#FFED00;
}

.jaunebis{
	color:#ffdb0f;
}
.bg-jaunebis{
	background-color:#ffdb0f;
}

.orange{
	color:#ff8e62;
}
.bg-orange{
	background-color:#ff8e62;
}

.orangebis{
	color:#ff9d6b;
}
.bg-orangebis{
	background-color:#ff9d6b;
}

.vert{
	color:#5fe9aa;
}
.bg-vert{
	background-color:#5fe9aa;
}

.vertbis{
	color:#8fe2ab;
}
.bg-vertbis{
	background-color:#8fe2ab;
}





.bg-noir,.bg-noir a,.bg-noir p,.bg-noir span,.bg-noir b,.bg-noir strong,.bg-noir h1,.bg-noir h2,.bg-noir h3,
.bg-bleu,.bg-bleu a,.bg-bleu p,.bg-bleu span,.bg-bleu b,.bg-bleu strong,.bg-bleu h1,.bg-bleu h2,.bg-bleu h3,
.bg-bleubis,.bg-bleubis a,.bg-bleubis p,.bg-bleubis span,.bg-bleubis b,.bg-bleubis strong,.bg-bleubis h1,.bg-bleubis h2,.bg-bleubis h3,
.bg-vert,.bg-vert a,.bg-vert p,.bg-vert span,.bg-vert b,.bg-vert strong,.bg-vert h1,.bg-vert h2,.bg-vert h3,
.bg-vertbis,.bg-vertbis a,.bg-vertbis p,.bg-vertbis span,.bg-vertbis b,.bg-vertbis strong,.bg-vertbis h1,.bg-vertbis h2,.bg-vertbis h3,
.bg-orange,.bg-orange a,.bg-orange p,.bg-orange span,.bg-orange b,.bg-orange strong,.bg-orange h1,.bg-orange h2,.bg-orange h3,
.bg-orangebis,.bg-orangebis a,.bg-orangebis p,.bg-orangebis span,.bg-orangebis b,.bg-orangebis strong,.bg-orangebis h1,.bg-orangebis h2,.bg-orangebis h3{
	color:#ffffff;
}


/* /// WIDTH FLEX & CO /// */
.flexblock{
	display:flex;
}
.flexreverse{
	flex-direction:row-reverse;
}
.items-center{
	align-items:center;
}
.items-end{
	align-items:flex-end;
}
.items-start{
	align-items:flex-start;
}
.justif-center{
	justify-content:center;
}
.justif-evenly{
	justify-content:space-evenly;
}
.wrap{
	flex-wrap:wrap;
}
.midwidth{
	width:46%;
}
.un-tiers{
	width:29%;
}
.deux-tiers{
	width:73%;
}
.un-quart{
	width:21%;
}
.trois-quart{
	width:71%;
}
.midwidth,
.un-tiers,
.deux-tiers,
.un-quart,
.trois-quart{
	margin:20px 2%;
}
.capsule{
	max-width:1200px;
	margin:0 auto;
}
.capsule600{
	max-width:600px;
	margin:0 auto;
}
.capsule1000{
	max-width:1000px;
	margin:0 auto;
}
section.all,
header,footer{
	display:block;
	width:80%;
	padding:30px 10%;
	margin:30px auto;
}


/* BOUTONS */
a.bta,
button.bta{
	padding: 8px 20px;
	border-radius: 50px;
	transition: 0.4s;
	text-transform: uppercase;
	font-weight: 500;
	display:block;
	width:fit-content;
	border:none;
}
a.bta-center,
button.bta-center{
	margin:20px auto;
}
a.bta:hover,
button.bta:hover{
	cursor:pointer;
	transition:0.4s;
	background-color:#2f5b8a;
}





/* IMAGES */
img{
	width:100%;
	height:auto;
}
#img-fullscreen-top-home,
.img-bg{
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
#img-fullscreen-top-home{
	height:100vh;
	margin-top:-80px;
	position:relative;
}
.img-bg{
	height:250px;
}
.img-bg.img-bg-auto{
	height:auto;
}

/* HEADER */
header#header{
	height:80px;
	padding:0;
	margin:0 auto;
	position:relative;
	z-index:3;
}



li#logo-header img{
	width:120px;
}


/* main menu */
html {
    scroll-behavior: smooth;
}

#main-menu {
    position: relative;
    width: 100%;
    transition: all 0.3s ease;
}

/* quand il devient fixe */
#main-menu.fixed {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.95); /* couleur fond du menu fixé */
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#main-menu #menu-resa{
	display:none;
}
#main-menu.fixed #logo-header{
	display:none;
}
#main-menu.fixed #menu-resa{
	display:block;
}
#main-menu.fixed #menu-resa a{
	background-color:#ff8e62;
}



nav#main-menu ul li{
	
}
nav#main-menu ul li a{
	color:#ffffff;
	text-transform:uppercase;
	background-color:rgba(47,91,138,0.7);
	padding:5px 20px;
	border-radius:50px;
	transition:0.4s;
}
nav#main-menu ul li a:hover{
	transition:0.4s;
	background-color:rgba(47,91,138,0.9);
}
nav#main-menu ul li#logo-header a{
	background-color:transparent;
}



/* full img */
aside.on-img-top{
	position:absolute;
	bottom:10vh;
	text-align:center;
	left:41vw;
	z-index:3;
}



img.vague-title{
	width:75px;
	height:auto;
}


/* WORD ON IMG */
section.with-word-on-img{
	position:relative;
}
span.word-on-img{
	position: absolute;
	left: 10%;
	bottom: 15px;
	font-size: 2rem;
	font-family: "Sofia Sans Extra Condensed",Calibri,sans-serif;
	font-weight: 600;
	color: #fff;
}


/* SERVICES */
article.service,
article.bloc-techno,
div.capsule600.cadre-faq.deux-tiers{
	-webkit-box-shadow: 2px 2px 10px 2px #BDBAB4; 
	box-shadow: 2px 2px 10px 2px #BDBAB4;
	padding:20px;
	background-color:#ffffff;
}
article.service{
	text-align:center;
}
img.picto-color{
	max-width:200px;
}
article.service h3{
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	margin-top: 20px;
}
figure.picto-service img{
	height:80px;
	width:auto;
	margin:10px auto;
}

/* METHODE */
article.bloc-techno-right{
	margin-top:150px;
}
section.img-bg-methodo,
section.img-bg-faq{
	height:600px;
	margin-top:-400px;
	position:relative;
	z-index:-1;
}
span.num-methodo{
	display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 50px;
  margin: 0 15px 0 -45px;
}
figure.img-methodo{
	height:600px !important;
}
/* tabs */
.scroll-accordion {
  
}

.acc-item {
  overflow: hidden;
  transition: 0.3s;
  border-bottom:1px solid #f1f1f1;
}

.acc-title {
  padding:16px 0 10px 0;
  margin: 0;
  cursor: default;
  font-size:1.5rem;
}

.acc-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.5s ease, padding 0.3s ease;
}

/* quand actif */
.acc-item.active .acc-content {
  padding: 16px;
  max-height: 300px; /* assez grand pour ton contenu */
}




/* VOS PROJETS */
.carousel {
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;

  /* Cacher la scrollbar */
  scrollbar-width: none;
}
.carousel-track:-webkit-scrollbar { display: none; }

/* 4 visibles */
.carousel-track article {
  flex: 0 0 calc(25% - 15px);
  padding: 20px;
}

/* Boutons */
.carousel-controls {
  margin-top: 12px;
  display: flex;
  justify-content: right;
}

.carousel-controls button {
  width: 45px;
  height: 40px;
  border-radius: 6px;
  border: none;
  font-size: 30px;
  cursor: pointer;
  background: white;
	color:#529DEE;
}

/* survol */
article.project,
article.service{
	position:relative;
}

/* Le texte qui apparaît au hover */
article.project aside,
article.service aside {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    background: rgba(47,91,138,0.9);
    color: #fff;
    padding: 15px;

    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s ease;
    margin: 0;
}
article.service aside{
	background: rgba(255,255,255,0.98);
	color:#1d1d1b;
	height:80%;
}


article.project aside p,
article.project aside b,
article.project aside a,
article.project aside strong,
article.project aside span{
	color:#ffffff;
}

/* Apparition au survol */
article.project:hover aside,
article.service:hover aside{
    opacity: 1;
    transform: translateY(0);
}

article.project h3{
	font-size: 1.8rem;
	color: #fff;
	font-weight: 600;
	margin-bottom:0;
}
article.project aside p{
	margin:5px 0;
}

article.project a.plus{
	font-style:italic;
	transition:0.4s;
}
article.project a.plus:hover{
	cursor:pointer;
	transition:0.4s;
	margin-left:5px;
}



/* MERCIS CLIENTS */
aside.titre-mercis span.fauxh2{
	margin-top:20px;
}
figure.logo-client img{
	height:50px;
	width:auto;
	margin:0 15px;
}


/* ABOUT */
aside.coord-about a{
	margin-right:7px;
}



/* FAQ */
.accordion-item,
.accordion-itembis{
  border-top: 1px solid #e5e7eb;
  padding: 1rem 0;
}
.accordion-item:first-child,
.accordion-itembis:first-child{
	border-top:none;
	margin-top:20px;
}

.accordion-item label,
.accordion-itembis label {
  display: block;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding-right: 1.5rem;
}

.accordion-item label:after{
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  color: #529DEE;
  transition: transform 0.2s ease;
}

input[type="radio"] {
  display: none;
}

/* Texte de réponse */
.content {
  max-height: 0;
  overflow: hidden;
  color: #4b5563;
  line-height: 1.6;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

/* Quand la question est ouverte */
.faq input[type="radio"]:checked + label:after {
  content: "−";
}

input[type="radio"]:checked ~ .content {
  max-height: 200px; /* ajustable selon la taille du texte */
  opacity: 1;
  margin-top: 0.5rem;
  animation: fadeIn 0.3s ease;
  overflow:auto;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Effet de survol */
.accordion-item label:hover {
  color: #529DEE;
}


/* POPUP */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.6);
    z-index: 9999;
}

.modal.active {
    display: flex;
}

.modal-content {
    background:#2f5b8a;
    padding: 1.5rem;
    max-width: 900px;
    width: 70%;
    position: relative;
    animation: fadeIn .25s ease;
	height: 500px;
	overflow: auto;
	color:#ffffff;
}

.close-btn {
    position: absolute;
    top: .5rem;
    right: .8rem;
    font-size: 1.8rem;
    background: none;
    border: none;
    cursor: pointer;
	color:#ffffff;
}

@keyframes fadeIn {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}




/* ----- BTA RESERVATION ----- */
/* Fenêtre glissante */
.slide-window {
position: fixed;
top: 0;
right: -440px; /* hors écran au départ */
width: 400px;
max-width: 90%;
height: 100%;
background:rgba(47,91,138,0.95);
box-shadow: -5px 0 20px rgba(0,0,0,0.2);
transition: right 0.3s ease;
display: flex;
flex-direction: column;
padding: 1rem;
z-index: 10;
color:#ffffff;
overflow:auto;
}

.slide-window.active {
right: 0; /* glisse vers l'écran */
}


.slide-window .close {
border:transparent !important;
background: transparent;
font-size: 1.5rem;
cursor: pointer;
position: absolute;
  right: 15px;
  color: #fff;
}

/* Contenu */
.slide-window .content {
margin-top: 1rem;
flex: 1;
overflow-y: auto;
}

/* Formulaire de contact */
.slide-window form {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.slide-window input,
.slide-window textarea {
padding: 0.6rem;
width: 90%;
}
.slide-window button.submit-btn {
background: #007bff;
color: white;
border: none;
padding: 0.6rem;
border-radius: 6px;
cursor: pointer;
}


/* tabs devis contact */
div#tabs ul{
	display:flex;
}
div#tabs ul li:first-child{
	margin-right:6%;
}
div#tabs ul li a{
	color:#ffffff;
	opacity:0.85;
	font-weight:400;
}
div#tabs ul li.ui-tabs-active.ui-state-active{
	border-bottom:2px solid #ff8e62;
}
div#tabs ul li.ui-tabs-active.ui-state-active a{
	opacity:1;
	font-weight:600;
}



/* FORMULAIRES */
form.wpcf7-form fieldset{
	display:none;
}

form.wpcf7-form p{
	margin:0;
}
form.wpcf7-form input{
	margin-top:-15px;
}
form.wpcf7-form textarea{
	height:160px;
}

form.wpcf7-form input.wpcf7-form-control.wpcf7-submit{
	margin:20px auto;
	padding: 8px 20px;
  border-radius: 50px;
  transition: 0.4s;
  text-transform: uppercase;
  font-weight: 500;
  display: block;
  width: fit-content;
  border: none;
  background-color: #ff8e62;
  color:#ffffff;
  transition:0.4s;
}
form.wpcf7-form input.wpcf7-form-control.wpcf7-submit:hover{
	cursor:pointer;
	background-color:#1d1d1b;
}


/* --- FOOTER --- */
figure#logo-footer{
	width:150px;
	margin:20px auto 0 auto;
}
aside.pictos-footer a{
	margin:0 3px;
}
aside.pictos-footer a img{
	width:25px;
}


/* menu legal footer */
nav.menu-footer{
	text-align:center;
}
nav.menu-footer ul li a{
	color:#c4c4c4;
	font-size:0.8rem;
	text-align:center;
}




/*animation element sliding left*/
.animation-element.slide-left {
  opacity: 0;
  transition: all 500ms linear;
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.slide-right {
  opacity: 0;
  transition: all 500ms linear;
  transform: translate3d(100px, 0, 0);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.slide-up {
  opacity: 0;
  transition: all 500ms linear;
  transform: translate3d(0, 100px, 0);
}

.animation-element.slide-up.in-view {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}


nav#mobile-menu{
	display:none;
}

.nodesk{
	display:none;
}
/* ////////////////////////////////////// RESPONSIVE /////////////////////////////////////// */
@media screen and (max-width: 700px){
	.nomobile{
		display:none !important;
	}
	.nodesk{
	display:block;
	}
	.flexblock,
	.midwidth,
	.un-tiers,
	.deux-tiers,
	.un-quart,
	.trois-quart{
		display:block;
		width:96%;
		margin:20px 2%;
	}
	h1, h2, h3, .fauxh1, .fauxh2, .fauxh3{
		line-height:1.3;
	}
	
	/* menu */
	nav#mobile-menu{
		display:block;
	}
	#burger-toggle{
    display: none;
	}
	input##burger-toggle{
		display:none;
	}

	#mobile-menu {
		pointer-events: none; /* NE BLOQUE PLUS LE TOUCH OU LE SCROLL */
	}

	#burger-toggle:checked ~ #mobile-menu {
		pointer-events: auto; /* réactivé seulement quand ouvert */
	}
	#mobile-menu {
		overflow-y: auto;     /* permet de scroller dans le menu */
		height: 100vh;
	}



	.burger {
		display: none;
		cursor: pointer;
		width: 30px;
		height: 25px;
		flex-direction: column;
		justify-content: space-between;
		z-index: 999;
		position: fixed;
		top: 20px;
		right: 20px;
		background-color:#2f5b8a;
		padding: 50px 50px 25px 25px;
		margin: -54px -54px 0 0;
		border-radius: 50px;
		-webkit-box-shadow: 3px 3px 15px 5px #D1D1D1;
		box-shadow: 3px 3px 15px 5px #D1D1D1;
	}

	.burger span {
		display: block;
		height: 3px;
		background: #ffffff;
		border-radius: 2px;
		transition: 0.3s;
	}

	/* Afficher le burger en mobile */
		.burger {
			display: flex;
		}

	/* ----- Animation burger ----- */
	#burger-toggle:checked + .burger span:nth-child(1) {
		transform: translateY(10px) rotate(45deg);
	}
	#burger-toggle:checked + .burger span:nth-child(2) {
		opacity: 0;
	}
	#burger-toggle:checked + .burger span:nth-child(3) {
		transform: translateY(-10px) rotate(-45deg);
	}

	/* ----- Menu mobile ----- */

	#mobile-menu {
		display:block;
		position: fixed;
		z-index:10;
		top: 0;
		right: -100%;
		width: 70%;
		height: 100%;
		background:rgba(255,255,255,0.95);
		padding-top: 80px;
		transition: 0.4s ease;
		box-shadow: -3px 0px 10px rgba(0,0,0,0.2);
	}

	.mobile-nav {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.mobile-nav li {
		margin: 3px 0;
		padding-left:15%;
	}

	.mobile-nav a {
		color: #000;
		text-decoration: none;
		font-size: 1.3rem;
	}
	nav#mobile-menu ul{
		padding:20px;
		margin-top:80px;
	}
	nav#mobile-menu ul li{
		margin:10px 0;
	}
	nav#mobile-menu ul li a{
		color:#1d1d1b;
		font-size:1.25rem;
	}
	nav#mobile-menu ul li.has-submenu ul li:last-child{
		background-color:transparent;
	}
	nav#mobile-menu ul li.has-submenu a{
		color:#1d1d1b;
	}

	/* Ouvrir le menu quand le burger est cliqué */
	#burger-toggle:checked ~ #mobile-menu {
		right: 0;
	}
	
	
	/* logo */
	figure#logo-mobile-header{
		position: absolute;
		z-index: 8;
		top: 10px;
		left: 35vw;
		width:100px;
	}

	
	/* HOME */
	#img-fullscreen-top-home {
		height: 50vh;
		margin-top:0;
	}
	aside.on-img-top{
		bottom: -5vh;
		left: 5vw;
	}
	img.picto-color{
		width:90px;
	}
	article.service, article.bloc-techno, div.capsule600.cadre-faq.deux-tiers{
		padding:20px 4%;
		width:88%
	}
	article.service h3{
		font-size:1.3rem;
	}
	figure.img-bg.img-bg-auto.img-methodo{
		height: 200px !important;
		width: 140%;
		margin-left: -20%;
	}
	section.img-bg-methodo{
		height: 1350px;
		margin-top: -1350px;
	}
	.carousel-track article {
		flex: 0 0 calc(75% - 35px);
		height:200px;
	}
	
	aside.titre-mercis{
		width:90% !important;
	}
	aside.titre-mercis,
	figure.logo-client{
		width:46%;
	}
	figure.logo-client{
		margin:15px 0;
		text-align:center;
	}
	figure.logo-client img {
		height: 40px;
		width: auto;
	}
	div.clear{
		clear:left;
		clear:right;
		clear:both;
	}
	
	aside.coord-about a img{
		width:35px;
		margin:20px 5px;
	}
	
	div.cadre-faq{
		padding: 20px 6% !important;
		width: 84%;
	}
	
	aside.pictos-footer{
		text-align:center;
	}
	
	.slide-window .close{
		left:15px;
		right:auto;
		font-size:2rem;
	}
	
	aside.coord-about a{
		margin-right:0;
	}
	


	
}