@font-face 	{ font-family: "Montserrat Variable"; src: url("/assets/fonts/montserrat-var.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; }
:root 	{ --bleuf:#0d324c; --bleuc:#005763; --beige:#e9e1cc; --color1: #005763; --bleu:#005763; --orange:#d17707; --rose:#ce067e; --blanc:#f6fffc;  --vert:#167121; --terre:#b26848;  }
body 		{ font-family: "Montserrat Variable", sans-serif; background-color:var(--bg)!important; }
button, a 	{transition-duration:0.3s; }



#hero h1 { font-weight:500!important; font-size:3rem!important; }
#hero h1 span { display: block; font-weight:300!important; font-size:2rem!important; line-height: 2.4rem!important; }
.hero h1 { font-weight:500!important; font-size:3rem!important; }
.hero h1 span { display: block; font-weight:300!important; font-size:2rem!important; line-height: 2.4rem!important; }

h2 { font-size:2.8rem!important; color:var(--color1)!important; font-weight: 700!important; }
h2 span { font-size:2rem!important; font-weight: 500!important; }

h3 { font-size:2.3rem; font-weight: 700!important; }
h3 span { font-size:1.8rem!important; font-weight: 500!important; }


.text-12 { font-size: 2rem; line-height: 1.9rem; }
.text-11 { font-size: 1.9rem; line-height: 1.9rem; }
.text-10 { font-size: 1.8rem; line-height: 1.9rem; }
.text-9 { font-size: 1.7rem; line-height: 1.9rem; }
.text-8 { font-size: 1.6rem; line-height: 1.9rem; }
.text-7 { font-size: 1.5rem; line-height: 1.9rem; }
.text-5 { font-size: 1.4rem; line-height: 1.9rem; }
.text-4 { font-size: 1.3rem; line-height: 1.8rem; }
.text-3 { font-size: 1.2rem; line-height: 1.7rem; }
.text-2 { font-size: 1.05rem; line-height: 1.55rem; }
.text-1 { font-size: 0.9rem; line-height: 1.3rem; }
.text-300 { font-weight:300; }
.text-500 { font-weight:500; }
.text-700 { font-weight:700; }
.color-1 { color:var(--color1)!important; }
.color-2 { color:var(--terre)!important; }


/* ==== ACCESSIBILITE ==== ACCESSIBILITE ==== ACCESSIBILITE ==== ACCESSIBILITE ==== ACCESSIBILITE ==== ACCESSIBILITE ===== ACCESSIBILITE ==== */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus)!important; outline-offset: 2px; }
#nav-toggle:focus-visible, #main-nav ul li a:focus-visible, footer a:focus-visible { outline: 2px solid #fff!important; }
.sr-only 	{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== NAV ===== */
#logo { height: 40px; width: auto; }
.navbar, .dropdown-menu { background-color:var(--color1); color:#fff!important;}
.navbar a { color:#fff!important;}
.navbar a:hover 	{ color:var(--orange)!important;}
.dropdown-item.active, .dropdown-item:active 	{ background-color: inherit; color:var(--color1);}
.dropdown-menu { border:none; }


/* Couleurs & base */
.main-navbar, .main-navbar .dropdown-menu{ background-color: var(--color1); color: #fff; }
.main-navbar .nav-link, .main-navbar .dropdown-item, .main-navbar a { color: #fff !important; }
.main-navbar .nav-link:hover, .main-navbar .dropdown-item:hover { color: var(--orange) !important; }
.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,.35);}
.navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

/* Dropdown : en mobile, on le rend "plein flux" (pas positionné en absolu) */
@media (max-width: 991.98px){
  .main-navbar .dropdown-menu{
    position: static;
    float: none;
    width: 100%;
    margin: .25rem 0 .75rem;
    border: 0;
    box-shadow: none;
    background: rgba(0,0,0,.15); /* léger contraste sur fond var(--color1) */
    backdrop-filter: blur(2px);
  }
  .main-navbar .dropdown-item{
    padding: .6rem 1rem;
  }
}

/* Espacements & focus visibles */
.main-navbar .nav-link { padding:.5rem .75rem; }
.main-navbar .dropdown-item:focus, .main-navbar .nav-link:focus, .main-navbar .btn:focus{ outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; background-color: inherit!important; }






/* --- Boutons --- */
	.btn-radio, form.wpcf7-form input[type=submit] { font-size: 16px; text-decoration: none; text-transform: uppercase; color: #000; cursor: pointer; border: 2px solid #000!important; padding: 0.95em 0.95em; margin-bottom:15px; max-width: 252px; border-radius:2px;
		box-shadow: 0px 5px 0px 0px #000000; position:relative; }
	.btn-radio:active,
	form.wpcf7-form input[type=submit]:active { box-shadow: 0px 0px 0px 0px; top: 5px; }
	.btn-radio.actif { background-color: var(--bleuc); box-shadow: 0px 0px 0px 0px; top: 5px; }
	.btn-radio:hover,
	form.wpcf7-form input[type=submit]:hover { background-color: var(--bleuf); color:#fff; border-color:#000;  }


	.btn { background-color: #fff!important; color:var(--color1)!important;fill:var(--color1); border-color:var(--blanc)!important; font-weight: 300!important; }
	.btn:hover { background-color: var(--color1)!important; color:var(--blanc)!important; fill:var(--blanc); border-color:var(--blanc)!important; }

	.btn-2 { background-color: var(--color1)!important; color:var(--blanc)!important; fill:var(--blanc); border-color:var(--blanc)!important; }
	.btn-2:hover { background-color: #fff!important; color:var(--color1)!important; fill:var(--color1);border-color:var(--color1)!important; }
	
	.btn-3 { background-color: var(--color1)!important; color:var(--blanc)!important; fill:var(--blanc); border-color:var(--color1)!important; }
	.btn-3:hover { background-color: #fff!important; color:var(--color1)!important; fill:var(--color1); border-color:var(--color1)!important; }	

	.btn-radio.blank:hover { background-color: var(--bleuf); color:#fff; border-color:#000; }
	.btn-radio.cta:hover { background-color: var(--bleuf); color:#fff; border-color:#000; }
	.btn-radio.close:hover { background-color: var(--orange); color:#fff; border-color:#000; }




#contactModal { }
.contact-modal .btn-close { color: #fff!important; }

.contact-modal{ border: 0; border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.contact-modal .modal-header{ background-color:var(--color1); color:#fff!important; }
.contact-modal .modal-title{ font-weight: 700;  color:#fff!important; }
.contact-modal .form-control-lg, .contact-modal .form-select-lg{ border-radius: .6rem; }
.contact-modal .form-control:focus, .contact-modal .form-select:focus{ box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }



/* ===== PAGE =====  PAGE =====  PAGE =====  PAGE =====  PAGE =====  PAGE =====  PAGE =====  PAGE =====  PAGE =====  PAGE =====  PAGE =====  PAGE =====  PAGE ===== */
#hero { background-color: var(--color1)!important; color:#fff!important; }
#hero { background-image:url('/img/hero.jpg'); background-position:top center; background-repeat:no-repeat; background-size:cover;}

.hero { background-color: var(--color1)!important; color:#fff!important; }
.hero { background-image:url('/img/bg-lac-2.jpg'); background-position:top center; background-repeat:no-repeat; background-size:cover;}


#faq h2 { font-weight: 200!important; margin-bottom:2rem!important;}
.accordion, .accordion-item, .accordion-header, .accordion-body { border: none!important;}
.accordion 			{ background-color:transparent; }
.accordion-item 	{ background-color:transparent; }
.accordion-header 	{ background-color:transparent; }
.accordion-button 			{ background-color: var(--color1)!important; color: #fff !important;; font-size:22px; font-weight: 300;}
.accordion-button.collapsed { background-color:transparent!important; color: #000!important; }
.accordion-body 	{ background-color:transparent; font-size:19px; font-weight: 300; }







/* homepage */
#checklist 					{ margin-top:-7rem; margin-bottom: 0rem;}
#checklist  .checklist { padding:20px; background-color:var(--terre); color:#fff; border-radius:5px; display: inline-block;}
#checklist  .checklist ul { margin-bottom: 0px; font-weight: 300; font-size:1.1rem; }
#checklist  .checklist ul li { margin-bottom: 5px; margin-top: 5px; }

#services .col a div { background-color: var(--color1)!important; color:#fff!important; padding: 30px 15px; transition-duration: 0.2s; }
#services .col a:hover div { background-color: var(--terre)!important; color:#fff!important; }
#services .plus { background-color: var(--color1)!important; color:#fff!important; padding: 30px 15px; transition-duration: 0.2s; border-radius:10px; }

#plus { background-image: url('/img/bg-lac.jpg'); background-position:top center; background-repeat:no-repeat; background-size:cover; color:#fff!important}
#plus ul { padding-left:30px; }

#avis h3 { color:var(--terre); font-size:4.5rem; font-weight:100!important;}
#avis p { font-size:1rem; font-weight:300;}
#avis a { color:var(--terre); } #avis a:hover { color:var(--color1); }
#avis blockquote { background-color: var(--terre); color: #fff; padding: 20px;}

#clients ul { display:flex; justify-content: center; }
#clients img { max-height:50px; width:auto; filter: grayscale(1); }

#pre-cta p { font-size:1.4rem; font-weight:300; color:var(--color1); }

#cta-final { background-image: url(/img/bg-fleuve.jpg); background-repeat: no-repeat; background-position: top center; background-size: cover; color:#fff!important;}
#cta-final h2 { color:#fff!important;}
#cta-final p { font-weight: 500;}

#home-portfolio 				{ background-color: #f6e9e4; }
.portfolio-item .title 			{ font-weight: 700;}
.portfolio-item .title span 	{ font-weight: 600;}
.portfolio-item .problem 		{ }
.portfolio-item .solution 		{ }


.card-ui		{ background-color: var(--color1); border-radius:5px; color: #fff !important;}
.card-ui-body   { padding:25px 15px; }
.card-ui-title	{ color: #fff !important; text-align:center; font-weight:300!important; font-size:1.4rem!important; margin-bottom:25px!important;}
.card-ui h3	{ color: #fff !important; text-align:center; font-weight:300!important; font-size:1.4rem!important; margin-bottom:25px!important;}
.card-ui p 		{ color: #fff !important; font-weight:300!important; font-size:1.06rem!important; line-height: 1.4rem!important; margin-bottom: 0px!important; }
.card-ui li 		{ color: #fff !important; font-weight:300!important; line-height: 1.4rem!important; margin-bottom: 0px!important; }


/* Creation de site */ 
#engagements  h2 { color:#fff!important; font-weight:300!important; font-size:1.8rem!important; }

#engagements  .checklist { padding:20px; background-color:var(--terre); color:#fff; border-radius:5px; display: inline-block;}
#engagements  .checklist ul { margin-bottom: 0px; font-weight: 300; font-size:1.1rem; }
#engagements  .checklist ul li { margin-bottom: 5px; margin-top: 5px; }
#offres { background-image: url('/img/bg-lac.jpg'); background-position:top center; background-repeat:no-repeat; background-size:cover; color:#fff!important; }
#offres .navbis { background-color:#eeeeee;}
#offres .navbis ul { background-color:#eeeeee;}
#offres ul.nav 						{ display: block; }
#offres ul.nav li 					{ display: block;}
#offres ul.nav li button 			{ display: block; color:var(--terre); font-weight: 500; text-align: left;}
#offres ul.nav li button.active 	{ background-color:var(--terre);color:#fff; }
#offres h2 { font-size: 2rem !important; }

#diagnostic-form a 			{ color: var(--color1); font-weight: 500; text-decoration: none;}
#diagnostic-form a:hover 	{ color: var(--terre); font-weight: 500; }

#portfolio-short 			{ background-color: var(--color1); color: #fff !important; }
#portfolio-short h2 		{ color: #fff !important; }
#portfolio-short a 			{ text-decoration: none; }
#portfolio-short a p 		{ color: #fff !important; transition-duration: 0.3s;}
#portfolio-short a:hover p 	{ color: var(--terre) !important; }


/* blog */
.blog-index h2 { font-size:1.4rem !important;}







/* Portfolio */ 
#case-studies h3 a 			{ color:var(--color1);}
#case-studies h3 a:hover 	{ color:var(--terre);}
#case-studies hr 			{ border: none; }

#other-projects  		{ background-color: #f6e9e4; color: #fff; }
#other-projects h2  	{ color: var(--terre)!important; font-weight: 200!important; }
#other-projects h3 a 	{ color: var(--terre)!important; font-weight: 400!important; font-size:1.2rem; fill:var(--terre); margin-top:10px; display:block; }
#other-projects h3 a:hover 	{ color: var(--color1)!important; fill:var(--color1); }
#other-projects article 	{ text-align:center; color:#000;}

.hero-portfolio 			{ position: relative;  background-size: cover; background-position: center;  background-repeat: no-repeat; min-height: 400px; }
.hero-portfolio::before 	{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); /* noir 40% */ z-index: 1; }
.hero-portfolio .container 	{ position: relative; z-index: 2; color:#fff; }
.hero-portfolio h1 { font-weight:500!important; font-size:3rem!important; }
.hero-portfolio h1 span { display: block; font-weight:300!important; font-size:2rem!important; line-height: 2.4rem!important; }


#portfolio-details .contexte h2 	{ font-size:2rem!important; font-weight: 500!important; margin-bottom:1.2rem; }
#portfolio-details .contexte ul  	{ margin-top:8px; margin-bottom:8px; font-weight: 300; font-size:1.1rem; }
#portfolio-details .contexte p 		{font-weight: 300; font-size:1.1rem; }

#portfolio-details img 	{ scale:1.3; margin-top:3rem; margin-bottom:3rem; }

#portfolio-details .intervention h2 	{ font-size:2rem!important; font-weight: 500!important; margin-bottom:1.2rem; }
#portfolio-details .intervention ul li 	{ margin-top:8px; margin-bottom:8px; font-weight: 300; font-size:1.1rem; }

#portfolio-details .resultats 		{ background-color: var(--terre); color: #fff; padding:15px; border-radius: 10px; margin-top:4rem; max-width:800px; }
#portfolio-details .resultats h2	{ color: #fff!important; font-size:2rem!important; font-weight: 500!important; margin-bottom:1.2rem; }
#portfolio-details .resultats ul li { margin-top:8px; margin-bottom:8px; font-weight: 300; font-size:1.1rem; }


#autres-projets  { background-color: #f6e9e4; color: #fff; }
#autres-projets h2  { color: var(--terre)!important; font-weight: 200!important; }

.projet-desc { text-align: center; color: var(--terre)!important; font-weight: 300!important; }
.projet-desc h3 { text-align: center; color: var(--terre)!important; font-weight: 700!important; font-size: 1.08rem!important; margin-top: 10px; }
.projet { position: relative;}
.projet-img { position: relative; overflow: hidden;}
.projet-img img { display: block; width: 100%; }
.projet-overlay { position:absolute; inset:0; background: rgba(0,0,0,0.55);
.projet-overlay h3 { font-weight: 700!important; font-size: 1.08rem!important; }

  color: #fff; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; padding: 1rem; transition: opacity 0.3s ease; opacity:0;}
.projet-img:hover .projet-overlay { background: rgba(0,0,0,0.75); opacity:1; }
@media (max-width: 767.98px) {
  .projet-overlay { display: none; }
}





/*  TYPOGRAPHY  */
.content h2{font-size:1.9rem;margin:2.5rem 0 1.25rem 0;font-weight:700;color:#1a1d22;}
.content h3{font-size:1.4rem;margin:2rem 0 1rem 0;font-weight:600;color:#1a1d22;}
.content p{margin:0 0 1rem;}
.content ul{padding-left:1.25rem;margin:0 0 1rem;}
.content li{margin-bottom:0.5rem;}

/*  TABLES  */
.table-comparatif{overflow-x:auto;margin:1.5rem 0;}
.table-comparatif table{width:100%;border-collapse:collapse;}
.table-comparatif th,.table-comparatif td{border:1px solid #d1d5db;padding:0.75rem;font-size:0.95rem;text-align:left;vertical-align:top;}
.table-comparatif th{background:#f1f5f9;font-weight:600;}
/*  CALLOUTS  */
.callout{border-left:4px solid #0ea5e9;background:#f0f9ff;padding:1rem 1.25rem;margin:1.5rem 0;border-radius:0.5rem;}
.callout.danger{border-color:#ef4444;background:#fef2f2;}
/*  FIGURES  */
figure{margin:2rem 0;text-align:center;}
figcaption{font-size:0.9rem;color:#6b7280;margin-top:0.5rem;}
img{max-width:100%;height:auto;}
/*  DETAILS / FAQ  */
details{border:1px solid #e5e7eb;border-radius:0.5rem;padding:0.75rem;margin:0 0 1rem;}
details summary{font-weight:600;cursor:pointer;}
/*  FOOTNOTES  */
.footnotes{font-size:0.85rem;border-top:1px solid #e5e7eb;padding-top:1rem;}
.footnotes li{margin-bottom:0.5rem;}



footer a { color: var(--terre); text-decoration: none;}
footer a:hover { color: #fff;}


/* Extra large devices (less than 1400px) */
@media (max-width: 1399.98px) {

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
#portfolio-details img { scale: 1;}
.intervention h2 { margin-top: 4.8rem; }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	#intro-crea { margin-top:2rem; }

}


/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {


}

/* Extra small devices (portrait phones, less than 400px) */
@media (max-width: 398.98px) {
	h2 { font-size:2.3rem!important;}
	.hero h1 { font-size: 2.3rem !important; }
}