/* GENERAL MECASPIN *************************************************************************************************/

* {
  box-sizing: border-box;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

/* variables */
:root{
	--light-grey: #F1F1F1;
	--msp-black: #222;
	--msp-white: #fff;
	--msp-red: #e40e20;
	--msp-beige: #F9F9F9;
	--msp-radius: 0;
	--msp-grey-base: #CCCCCC;
	--msp-fp-bg-grey: #F5F5F5;
}

html {
font-size: 100%;
}

body {
	font-weight: 400;
	background-color: var(--msp-beige);
}

body:not(.single-blog) .et_pb_section{
	background-color: var(--msp-beige);
}

body:has(.msp-card--blog, .ms_societe) .et_pb_section{
	background-color: var(--msp-white);
}

.et-db #et-boc .et-l li b,
.et-db #et-boc .et-l li strong {
  display: contents;
}

#page-container .et_pb_row,
.single footer.et-l .msp-footer .et_pb_row {
	width: 90%;
}

#page-container .et_pb_row:has(.msp-liste),
.single footer.et-l .msp-footer .et_pb_row:has(.msp-liste) {
	padding-top: 0.75rem;
}

.single footer.et-l .msp-footer .et_pb_row:has(.msp-liste) .et_pb_module:has(.msp-liste){
	margin-bottom: 4.187rem;
}

.back{
	display: block;
}

.regular{
	font-weight: 400 !important;
}

.bold{
	font-weight: 700 !important;
}

.black{
	font-weight: 900 !important;
}

.upper{
	text-transform: uppercase;
}

.retour-ligne{
	display: block;
}

.et-db.single #page-container #et-boc .et-l .et_pb_section .et_pb_row .et_pb_module:has(h2){
	margin: 0;
}

@media (max-width: 980px) {
	.et-db #et-boc .et-l .et_pb_row {
	width: 90%;
	}
	.et-db #page-container #et-boc .et-l .section-cta.old .et_pb_row{
		width: 100%;
	}
	.et-db #et-boc .et-l .et_pb_fullwidth_section>.et_pb_module:not(.et_pb_post_content):not(.et_pb_fullwidth_post_content) .et_pb_row{
		padding: 20px 0 !important;
	}
}

/* paragraph */
.et-db #page-container #et-boc p{
	line-height: 1.437em;
}

/* sur-titre */
.et-db #page-container #et-boc .sur-titre{
	font-size: 1.5rem;
	line-height: 1.33em;
	color: var(--msp-grey-base);
}

/* ul li */
body.et-db #et-boc .et-l .section_entete_fp ul,
body.et-db #et-boc .et-l .et_pb_section ul.base,
body.et-db #et-boc .et-l .et_pb_section ul.msp-index__list {
    padding-left: 0;
    padding-top: 1rem;
}

body.et-db #et-boc .et-l .section_entete_fp ul li,
body.et-db #et-boc .et-l .et_pb_section ul.base li,
body.et-db #et-boc .et-l .et_pb_section ul.msp-index__list li{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.5rem;
    padding-left: 0;
}

body.et-db #et-boc .et-l .section_entete_fp ul li::before,
body.et-db #et-boc .et-l .et_pb_section ul.base li::before,
body.et-db #et-boc .et-l .et_pb_section ul.msp-index__list li::before {
    content: "";
    font-family: inherit;
    color: inherit;
    width: 6px;
    height: 6px;
    background-color: var(--msp-red);
    position: relative;
    display: block;
}

body.et-db #et-boc .et-l .section_entete_fp ul li{
	font-size: 1.25rem;
	font-weight: 500;
}

/* bg-* */
.et-db #page-container #et-boc .bg-grey{
  background-color: var(--light-grey) !important;
}

.et-db #page-container #et-boc .bg-creme{
  background-color: var(--msp-beige) !important;
}

.et-db #page-container #et-boc .bg-dark{
	background-color: var(--msp-black) !important;
}

.et-db #page-container #et-boc .bg-fp{
	background-color: var(--msp-fp-bg-grey) !important;
}

.et-db #page-container #et-boc .bg-red{
	background-color: var(--msp-red) !important;
}

/* banner hero, section, bg-*, couleurs de titres et textes */
.et-db #page-container .et_pb_section:is(.ms_hero_lite, .ms_hero, :has(.download_section), .bg-dark, .bg-red) :is(h1, h2, h3, h4, p, a, span, li){
    color: var(--msp-white);
}


/* h1 */
h1, #page-container h1 {
	font-size: 2.5rem;
	line-height: 1.25;
	font-weight: bold;
}
h1 span, #page-container h1 span  {
	display: block;
}

.et-db:is(.single-machine, .single-equipements) #page-container #et-boc h1{
  font-weight: 500 !important;
  line-height: 1.3;
  width: fit-content;
  letter-spacing: 0.01em;
  text-transform: inherit !important;
  /*display: inline-block !important;*/
  font-size: 1.7rem !important;
}

body #page-container .et_pb_section.ms_hero_lite h1{
    font-size: 3rem;
    line-height: 1.21em;
}

@media (max-width: 767px) {
	h1, #page-container h1, body #page-container .et_pb_section.ms_hero_lite h1  {
	font-size: 2.4rem;
	}
	body #page-container .et_pb_section.ms_hero_lite:has(.ms_hero-blog) #ms_hero-wrapper .et_pb_text_inner h1 span{
		font-size: 2.8rem;
	}
}
@media (max-width: 700px) {
	h1, #page-container h1, body #page-container .et_pb_section.ms_hero_lite h1  {
	font-size: 2.3rem;
	}
	body #page-container .et_pb_section.ms_hero_lite:has(.ms_hero-blog) #ms_hero-wrapper .et_pb_text_inner h1 span{
		font-size: 2rem;
	}
}
@media (max-width: 650px) {
	h1, #page-container h1, body #page-container .et_pb_section.ms_hero_lite h1  {
	font-size: 2.2rem;
	}
	body #page-container .et_pb_section.ms_hero_lite:has(.ms_hero-blog) #ms_hero-wrapper .et_pb_text_inner h1 span{
		font-size: 1.9rem;
	}
}
@media (max-width: 550px) {
	h1, #page-container h1, body #page-container .et_pb_section.ms_hero_lite h1  {
	font-size: 2.1rem;
	}
	body #page-container .et_pb_section.ms_hero_lite:has(.ms_hero-blog) #ms_hero-wrapper .et_pb_text_inner h1 span{
		font-size: 1.8rem;
	}
}
@media (max-width: 525px) {
	h1, #page-container h1, body #page-container .et_pb_section.ms_hero_lite h1  {
	font-size: 2rem;
	}
	body #page-container .et_pb_section.ms_hero_lite:has(.ms_hero-blog) #ms_hero-wrapper .et_pb_text_inner h1 span{
		font-size: 1.7rem;
	}
}
@media (max-width: 490px) {
	h1, #page-container h1, body #page-container .et_pb_section.ms_hero_lite h1, .single-machine h1  {
	font-size: 1.9rem;
	}
	body #page-container .et_pb_section.ms_hero_lite:has(.ms_hero-blog) #ms_hero-wrapper .et_pb_text_inner h1 span{
		font-size: 1.6rem;
	}
}

/* h1 banner home */
.home #page-container .ms_hero h1 {
	font-size: 3.8rem;
	line-height: 1.2em;
	font-weight: 700;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}
.home #page-container .ms_hero h1 span {
	font-size: 2.6rem;
	display: inline-block;
	letter-spacing: 0;
}
.home #page-container .ms_hero h1 span.after {
	display: block;
}
.home #page-container .ms_hero h1 span.after::after {
	content: " ";
	display: block;
	height: 3px;
	width: 36%;
	background-color: var(--msp-red);
	margin-top: 4px;
	margin-bottom: 25px;
}
.home #page-container .ms_hero h1 span.alt {
	display: block;
	font-weight: 700;
	letter-spacing: 0.025em;
	margin-top: 12px;
	line-height: 1.1em;
	font-size: 0.74em;
}

@media (max-width: 1366px) {
	.home #page-container .ms_hero h1 {
		font-size: 3.3rem;
	}
	.home #page-container .ms_hero h1 span {
		font-size: 2.3rem;
	}
}
@media (max-width: 1200px) {
	.home #page-container .ms_hero h1 {
		font-size: 3rem;
	}
	.home #page-container .ms_hero h1 span {
		font-size: 2.1rem;
	}
}
@media (max-width: 1024px) {
	.home #page-container .ms_hero h1 {
		font-size: 2.6rem;
	}
	.home #page-container .ms_hero h1 span {
		font-size: 1.8rem;
	}
}
@media (max-width: 768px) {
	.home #page-container .ms_hero h1 {
		font-size: 2.4rem;
	}
	.home #page-container .ms_hero h1 span {
		font-size: 1.7rem;
	}
}
@media (max-width: 490px) {
	.home #page-container .ms_hero h1 span.after::after {
		margin-left: auto;
		margin-right: auto;
	}

	.et-db #page-container .ms_hero .et_pb_text_0::after {
		margin: auto;
	}
}

/* titre banner hero */

#page-container .ms_hero h1, #page-container .ms_hero h2, #page-container .ms_hero h3, #page-container .ms_hero h4 {
	color: var(--msp-white);
	font-weight: 700;
	font-size: 2.5rem;
  line-height: 2.6rem;
}
#page-container .ms_hero h1 span {
	font-weight: 300;
}

@media  (max-width: 1200px) {
	#page-container .ms_hero h1, #page-container .ms_hero h2, #page-container .ms_hero h3, #page-container .ms_hero h4 {
		font-size: 2.3rem;
	}
}
@media (max-width: 860px) {
	#page-container .ms_hero h1, #page-container .ms_hero h2, #page-container .ms_hero h3, #page-container .ms_hero h4 {
		font-size: 1.95rem;
	}
}
@media (max-width: 767px) {
	#page-container .ms_hero h1, #page-container .ms_hero h2, #page-container .ms_hero h3, #page-container .ms_hero h4 {
		font-size: 2.3rem;
	}
}
@media (max-width: 700px) {
	#page-container .ms_hero h1, #page-container .ms_hero h2, #page-container .ms_hero h3, #page-container .ms_hero h4 {
		font-size: 2.1rem;
	}
}
@media (max-width: 650px) {
	#page-container .ms_hero h1, #page-container .ms_hero h2, #page-container .ms_hero h3, #page-container .ms_hero h4 {
		font-size: 2rem;
	}
}
@media (max-width: 550px) {
	#page-container .ms_hero h1, #page-container .ms_hero h2, #page-container .ms_hero h3, #page-container .ms_hero h4 {
		font-size: 2rem;
	}
}
@media (max-width: 525px) {
	#page-container .ms_hero h1, #page-container .ms_hero h2, #page-container .ms_hero h3, #page-container .ms_hero h4 {
		font-size: 1.9rem;
	}
}
@media (max-width: 490px) {
	#page-container .ms_hero h1, #page-container .ms_hero h2, #page-container .ms_hero h3, #page-container .ms_hero h4 {
		font-size: 1.8rem;
	}

	#page-container .ms_hero.ms_conseil h1{
		line-height: 1em;
	}
}

@media(max-width: 375px){
	    #page-container .ms_hero h1, #page-container .ms_hero h2,
		#page-container .ms_hero h3, #page-container .ms_hero h4{
			font-size: 1.6rem;
			line-height: 1.4em;
    }
}


/* h2 */
h2, #page-container h2,
.single #page-container #et-boc .et-l h2 {
  font-weight: 500 !important;
  line-height: 1.3;
  width: fit-content;
  letter-spacing: 0.01em;
  text-transform: inherit !important;
  display: inline-block !important;
  margin-bottom: 1.18rem;
  margin-top: 0 !important;
  font-size: 1.7rem!important;
}

h2 span, #page-container h2 span,
.single #page-container #et-boc .et-l h2 span {
	font-weight: 900;
}

#page-container h2 strong {
	font-weight: 900;
}

.single.et-db #page-container #et-boc .section_entete_fp h2{
  font-size: 2rem !important;
  color: var(--msp-red);
  line-height: 1.25;
  font-weight: bold !important;
  margin-bottom: 1.18rem;
  margin-top: 0 !important;
}

.et-db #page-container .et_pb_section:not(.section_entete_fp) h2.underline:after,
.single #page-container .et_pb_section:not(.section_entete_fp) h2:after {
	content: "";
	position: relative;
	display: block;
	width: 100%;
	margin: 0.75rem 0 0;
	border-bottom: 1px solid #707070;
	left: 0;
	font-weight: bold;
	max-width: 236px;
}

.et-db #page-container .et_pb_section:not(.section_entete_fp) h2.underline:after{
	margin: 0.687rem 0 0;
}

.single #page-container #et-boc .et-l .et_pb_section:not(.section_entete_fp) h2:not(:has(span)){
	font-weight: bold;
}

/* h3 */
h3, #page-container h3 {
font-size: 1.35rem;
line-height: 1.4;
font-weight: 600;
letter-spacing: 0.01em;
}

h3 span, #page-container h3 span {
font-weight: 400;
}

#page-container h3:has(+ p) {
  padding-bottom: 15px;
}
p + h3 {
  padding-top: 5px;
}

.single-equipements.et-db #page-container #et-boc .tab-fp h3{
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.3em;
}

h3.sous-titre, #page-container h3.sous-titre {
	font-size: 1.9rem;
}

h4, #page-container h4 {
font-size: 1.3rem;
line-height: 1.25;
font-weight: 600;
letter-spacing: 0.01em;
}

@media  (max-width: 768px) {
	h2, #page-container h2, h3.sous-titre, #page-container h3.sous-titre,
	#page-container .banner-image h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
	}

	#page-container h2:after {
		display: none;
	}
	#page-container h2.no-tab {
		display: none !important;
	}

	#page-container h2{
		text-align: left;
	}
}

@media(max-width: 500px) {
	h2, #page-container h2,
	.single #page-container #et-boc .et-l h2 {
		font-size: 1.6rem !important;
	}

	h3, #page-container h3,
	.single #page-container #et-boc .et-l h3,
	.single-equipements.et-db #page-container #et-boc .tab-fp h3 {
		font-size: 1.35rem !important;
	}

	#page-container .ms_home-product-title h2 {
		font-size: 1.6rem !important;
	}

	#page-container .row-h2-custom h3{
		font-size: 1.3rem;
	}
}
@media(max-width: 400px) {
	h2, #page-container h2,
	.single #page-container #et-boc .et-l h2 {
		font-size: 1.4rem !important;
	}
}

/* page titres rouge */
#page-container .ms_page-hn-rouge h2 {
	color: var(--msp-red);
	font-size: 1.8rem;
	font-weight: 500;
}
#page-container .ms_page-hn-rouge h3 {
	font-size: 1.5rem;
	font-weight: 500;
}

/* titres centrés */
#page-container h2.c-center,
#page-container .title-center h2 {
	font-size: 2.3rem;
	display: flex !important;
	flex-direction: column;
	position: relative;
	justify-content: center;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	line-height: 1.5;
}

#page-container h2.c-center span,
#page-container .title-center h2 span {
	display: flex;
	width: fit-content;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	padding: 0 25px;
	margin-bottom: 3px;
	text-align: center;
	font-size: 0.95em;
}
#page-container h2.c-center span:first-child,
#page-container .title-center h2 span:first-child {
  background-color: var(--msp-white);
	color: var(--msp-red);
	font-weight: 400;
}

#page-container h2.c-center:before,
#page-container .title-center h2:before {
	content: "";
	position: relative;
	top: 28px;
	width: 80%;
	border-bottom: 3px solid var(--msp-red);
	z-index: -1;
	margin-left: auto;
	margin-right: auto;

}
#page-container h2.c-center:not(h2.c-center.classique):after,
#page-container .title-center h2:not(.title-center.classique h2):after {
	display: none;
}
#page-container h2.c-center.classique:before,
#page-container .title-center.classique h2:before {
	display: none;
}


@media  (max-width: 767px) {
	#page-container h2.c-center:not(h2.c-center.classique),
	#page-container .title-center h2:not(.title-center.classique h2) {
		display: none;
	}
}

#page-container h2.c-center.classique:after,
#page-container .title-center.classique h2:after {
	content: "";
  position: absolute;
  display: block;
  width: calc(100% - 60%);
  margin: 0px auto;
  border-bottom: 4px solid var(--msp-red);
  left: 30%;
	bottom: -10px;
}

#page-container h3.c-center,
#page-container .title-center h3  {
	font-size:1.9rem;
	text-align: center;
}
#page-container h4.c-center,
#page-container .title-center h4  {
	font-weight:1.6rem;
	text-align: center;
}

#page-container h3.c-center, #page-container h4.c-center,
#page-container .title-center h3, #page-container .title-center h4  {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	position: relative;
	margin-bottom: 30px;
}

#page-container h3.c-center:after, #page-container h4.c-center:after,
#page-container .title-center h3:after, #page-container .title-center h4:after {
	content: "";
  position: absolute;
  display: block;
  width: calc(100% - 40%);
  margin: 10px auto;
  border-bottom: 2px solid var(--msp-black);
  left: 20%;
}

#page-container .title-center.classique h3 {
	font-size: 1.9rem;
  line-height: 1.4;
  text-transform: inherit;
  font-weight: 500;
  max-width: 768px;
}
#page-container .title-center.classique h3:after {
	display: none;
}



/***** titres custom *****/

/* section avec h2-custom */
#page-container .section-h2-custom {
	padding-top: 19px;
}

#page-container .section-h2-custom .et_pb_row {
	padding: 10px 0;
}

@media(max-width: 768px) {
	#page-container .section-h2-custom  h2 {
		flex-direction: column;
	}
}

/* row h2 custom */
#page-container .row-h2-custom {
	position: initial;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
	padding: 0;
	margin-top: 0;
}
#page-container .row-h2-custom::before {
  width: 50%;
  content: " ";
  position: absolute;
	top: 32px;
  left: 9px;
  border-bottom: 165px solid #dedede;
  clip-path: polygon(100% 0%, 90% 100%, 0% 100%, 0% 0%);
}
#page-container .row-h2-custom::after {
    width: 50%;
    content: " ";
    position: absolute;
    top: 19px;
    left: 0px;
    border-bottom: 165px solid var(--msp-white);
    clip-path: polygon(100% 0%, 90% 100%, 0% 100%, 0% 0%);
		visibility: visible;
}
#page-container .row-h2-custom.dark::after {
    border-bottom: 165px solid #f5f5f5;
}
#page-container .row-h2-custom .et_pb_column {
	height: 100%;
  display: flex;
  align-items: center;
}
#page-container .row-h2-custom .et_pb_column:first-child {
	width: 44%;
	height: 165px;
}
#page-container .row-h2-custom h2 {
	color: var(--msp-red);
	text-align: left !important;
	display: block;
	margin: 0;
	padding-bottom: 10px;
  font-weight: 600;
}
#page-container .row-h2-custom h2::after {
	margin: 7px 0;
	border-bottom: 3px solid var(--msp-red);
}

#page-container .row-h2-custom h2 span {
	color: var(--msp-red);
}

#page-container .row-h2-custom h3 {
	font-size: 1.4rem;
  text-transform: initial;
  line-height: 1.25;
  font-weight: 400;
	display: block;
}

@media (max-width: 1400px) {
	#page-container .row-h2-custom:not(:has(.client-logo-carousel-container))::before,
	#page-container .row-h2-custom:not(:has(.client-logo-carousel-container))::after {
		width: 60%;
	}
	#page-container .row-h2-custom .et_pb_column:first-child {
		width: 55%;
	}
}

@media (max-width: 1280px) {
	#page-container .row-h2-custom:not(:has(.client-logo-carousel-container))::before,
	#page-container .row-h2-custom:not(:has(.client-logo-carousel-container))::after {
		width: 70%;
	}
	#page-container .row-h2-custom .et_pb_column:first-child {
		width: 65%;
	}
}

@media (max-width: 1024px) {
	#page-container .row-h2-custom:not(:has(.client-logo-carousel-container))::before,
	#page-container .row-h2-custom:not(:has(.client-logo-carousel-container))::after {
		width: 80%;
	}
	#page-container .row-h2-custom .et_pb_column:first-child {
		width: 75%;
	}
}

@media (max-width: 972px) {
	#page-container .row-h2-custom::before,
	#page-container .row-h2-custom::after {
		width: 95%;
	}
	#page-container .row-h2-custom .et_pb_column:first-child {
		width: 90%;
	}
}


@media (max-width: 550px) {

	#page-container .row-h2-custom h2 {
	font-size: 1.6rem;
	}

	#page-container .row-h2-custom:not(:has(.client-logo-carousel-container))::before,
	#page-container .row-h2-custom:not(:has(.client-logo-carousel-container))::after {
		width: 94%;
	}
}

@media (max-width: 980px) {
	#page-container .row-h2-custom h3 {
		width: 90%;
	}
}
@media (max-width: 400px) {
	#page-container .row-h2-custom h2 {
		font-size: 1.8rem;
		flex-direction: column;
	}
}

/** specifique nouvelle section carousel client avec row-h2-custom **/
#page-container .row-h2-custom:has(.client-logo-carousel-container){
	gap: 4rem;
}

#page-container .row-h2-custom .et_pb_column:has(.client-logo-carousel-container){
	max-width: 45%;
}

@media(max-width: 980px){
	.et-db #et-boc .et-l .section_client-carousel .et_pb_row {
		flex-direction: column;
    	gap: 2rem;
	}
	.et-db #page-container #et-boc .et-l .section_client-carousel .et_pb_column:has(.client-logo-carousel-container){
		max-width: inherit;
	}

	#page-container .row-h2-custom .et_pb_column:not(:has(.client-logo-carousel-container)) .et_pb_module{
		z-index: 10;
	}

	#page-container .row-h2-custom:has(.client-logo-carousel-container)::before{
		top: 13%;
	}

	#page-container .row-h2-custom:has(.client-logo-carousel-container)::after{
		top: 10%;
	}
}


/** custom avec logos clients **/
@media  (min-width: 1025px) {
	#page-container .row-h2-custom.logo-client::before,
	#page-container .row-h2-custom.logo-client::after {
	    width: 50%;
	}
	#page-container .row-h2-custom.logo-client .et_pb_column:last-child {
		height: auto;
	  display: block;
	}
}
@media  (max-width: 1024px) {
	#page-container .row-h2-custom.logo-client {
			flex-direction: column;
			align-items: initial;
			justify-content: center;
	}
	#page-container .row-h2-custom.logo-client .et_pb_column:first-child,
	#page-container .row-h2-custom.logo-client .et_pb_column:last-child {
	  	width: 100%;
			align-items: center;
	}
	#page-container .row-h2-custom.logo-client .et_pb_column:last-child {
	  display: none;
	}
	#page-container .row-h2-custom.logo-client .et_pb_column:first-child {
	  	margin-bottom: 0px;
	}
}
@media  (max-width: 768px) {
	#page-container .row-h2-custom.logo-client {
			margin-bottom: 10px;
	}
	#page-container .row-h2-custom.logo-client .et_pb_column:first-child {
	  	margin-bottom: 20px;
	}
}
@media  (max-width: 500px) {
	#page-container .row-h2-custom.logo-client {
			margin-bottom: 0;
	}
}

/**
 * Boutons — Mecaspin
 *
 * Système de boutons unifié piloté par variables CSS.
 * Un seul bloc « moteur » applique la mise en forme ; toutes les variantes
 * (taille, couleur, icône, contexte) ne font que redéfinir des variables.
 * Les couleurs des pseudo-éléments suivent `currentColor` : plus aucune
 * règle de couleur à dupliquer pour ::before / ::after.
 *
 * Classes disponibles
 *   Base      : .btn  (ou .et_pb_button posé par Divi)
 *   Tailles   : .btn-small  .btn-big
 *   Couleurs  : .btn-rouge  .btn-noir  .btn-blanc  .btn-tr-noir  .btn-tr-blanc
 *   Contact   : .btn-call  .btn-contact
 *   Icônes    : .btn-rdv  .btn-telechargement  .btn-phone  .btn-enveloppe  .btn-devis
 *   Icône seule (masque la flèche) : .btn-icone  .btn-icone-small
 *   Contexte  : .bg-dark sur un parent
 *
 * Dépendances : --msp-red, --msp-black, --msp-white, --msp-radius (variables globales)
 *
 */


/* =========================================================================
   VALEURS PAR DÉFAUT
   Spécificité volontairement faible (1 classe) : toute variante déclarée
   plus bas avec 2 classes les écrase sans `!important`.
   ========================================================================= */

.btn,
.et_pb_button,
.nf-form-content input[type="submit"],
.gform-theme .gform-footer input[type="submit"] {

	--msp-btn-height: 41px;        /* hauteur unique de tous les boutons */
	--msp-btn-font-size: 1.125rem;
	--msp-btn-padding-x: 1.1em;
	--msp-btn-gap: 0.4em;          /* espace texte <-> icône / flèche */
	--msp-btn-border-width: 2px;
	--msp-btn-transition: 0.25s ease;

	/* --- Couleurs : état normal --- */
	--msp-btn-color: var(--msp-red);
	--msp-btn-bg: transparent;
	--msp-btn-border: var(--msp-red);

	/* --- Couleurs : survol --- */
	--msp-btn-color-hover: var(--msp-black);
	--msp-btn-bg-hover: transparent;
	--msp-btn-border-hover: var(--msp-black);

	/* --- Contenus générés (police ETmodules) ---
	   `none` = le pseudo-élément n'est pas généré du tout. */
	--msp-btn-icon: none;          /* icône à gauche */
	--msp-btn-icon-size: 1em;
	--msp-btn-arrow: "E";          /* flèche à droite */
}


/* =========================================================================
   Structure
   ========================================================================= */

body #page-container :is(a.btn, a.et_pb_button),
body #page-container :is(a.btn, a.et_pb_button):hover,
body #page-container #et-boc :is(a.btn, a.et_pb_button),
body #page-container #et-boc :is(a.btn, a.et_pb_button):hover {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--msp-btn-gap);
	width: fit-content;
	height: var(--msp-btn-height);
	padding: 1px var(--msp-btn-padding-x) 0;
	border-width: var(--msp-btn-border-width);
	border-style: solid;
	border-radius: var(--msp-radius);
	font-size: var(--msp-btn-font-size);
	font-weight: 500;
	line-height: 1 !important;
	letter-spacing: 0.0175em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color var(--msp-btn-transition),
		background-color var(--msp-btn-transition),
		border-color var(--msp-btn-transition);
}


/* =========================================================================
   Couleurs
   ========================================================================= */

body #page-container :is(a.btn, a.et_pb_button),
body #page-container #et-boc :is(a.btn, a.et_pb_button) {
	color: var(--msp-btn-color);
	background-color: var(--msp-btn-bg);
	border-color: var(--msp-btn-border);
}

body #page-container :is(a.btn, a.et_pb_button):hover,
body #page-container #et-boc :is(a.btn, a.et_pb_button):hover {
	color: var(--msp-btn-color-hover) !important;
	background-color: var(--msp-btn-bg-hover) !important;
	border-color: var(--msp-btn-border-hover) !important;
}

body #page-container :is(a.btn, a.et_pb_button):focus-visible,
body #page-container #et-boc :is(a.btn, a.et_pb_button):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}


/* =========================================================================
   Icône (::before) et flèche (::after)
   Le survol est ciblé aussi : Divi y modifie margin, opacity et position.
   ========================================================================= */

body #page-container :is(a.btn, a.et_pb_button)::before,
body #page-container :is(a.btn, a.et_pb_button)::after,
body #page-container :is(a.btn, a.et_pb_button):hover::before,
body #page-container :is(a.btn, a.et_pb_button):hover::after,
body #page-container #et-boc :is(a.btn, a.et_pb_button)::before,
body #page-container #et-boc :is(a.btn, a.et_pb_button)::after,
body #page-container #et-boc :is(a.btn, a.et_pb_button):hover::before,
body #page-container #et-boc :is(a.btn, a.et_pb_button):hover::after {
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	opacity: 1;
  top: 1px;
	color: inherit;
	background: none;
	font-family: "ETmodules";
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-transform: none;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body #page-container :is(a.btn, a.et_pb_button)::before,
body #page-container #et-boc :is(a.btn, a.et_pb_button)::before {
	content: var(--msp-btn-icon);
	font-size: var(--msp-btn-icon-size);
}

body #page-container :is(a.btn, a.et_pb_button)::after,
body #page-container #et-boc :is(a.btn, a.et_pb_button)::after {
	content: var(--msp-btn-arrow);
	font-size: 1em;
}


/* =========================================================================
   TAILLES
   La hauteur reste à 41px ; seuls le corps de texte et les marges internes
   changent. Décommenter --msp-btn-height pour déroger au gabarit.
   ========================================================================= */

.btn.btn-small,
.et_pb_button.btn-small {
	--msp-btn-font-size: 1rem;
	/* --msp-btn-height: 34px; */
}

.btn.btn-big,
.et_pb_button.btn-big {
	--msp-btn-font-size: 1.3rem;
	/* --msp-btn-height: 52px; */
}


/* =========================================================================
   ICÔNES
   ========================================================================= */

.btn-rdv            { --msp-btn-icon: "\e023"; }
.btn-telechargement { --msp-btn-icon: "\e004"; }
.btn-phone          { --msp-btn-icon: "\e090"; }
.btn-enveloppe      { --msp-btn-icon: "\e010"; }
.btn-devis          { --msp-btn-icon: "\77";   }

.btn.btn-icone,
.et_pb_button.btn-icone {
	--msp-btn-arrow: none;
	--msp-btn-icon-size: 1.1em;
	--msp-btn-gap: 0.7em;
}

.btn.btn-icone-small,
.et_pb_button.btn-icone-small {
	--msp-btn-arrow: none;
	--msp-btn-icon-size: 1.35em;
	--msp-btn-gap: 0.55em;
}


/* =========================================================================
   BOUTONS DE CONTACT
   ========================================================================= */

.btn.btn-call,
.et_pb_button.btn-call {
	--msp-btn-icon: "\e090";
	--msp-btn-arrow: none;
	--msp-btn-color: var(--msp-white);
	--msp-btn-bg: var(--msp-red);
	--msp-btn-border: var(--msp-red);
	--msp-btn-color-hover: var(--msp-white);
	--msp-btn-bg-hover: var(--msp-black);
	--msp-btn-border-hover: var(--msp-black);
}

.btn.btn-contact,
.et_pb_button.btn-contact {
	--msp-btn-icon: "\e010";
	--msp-btn-arrow: none;
	--msp-btn-color: var(--msp-black);
	--msp-btn-bg: transparent;
	--msp-btn-border: var(--msp-black);
	--msp-btn-color-hover: var(--msp-white);
	--msp-btn-bg-hover: var(--msp-red);
	--msp-btn-border-hover: var(--msp-red);
}


/* =========================================================================
   8. VARIANTES DE COULEUR
   ========================================================================= */

/* --- Transparent noir --- */
.btn.btn-tr-noir,
.et_pb_button.btn-tr-noir {
	--msp-btn-color: var(--msp-black);
	--msp-btn-bg: transparent;
	--msp-btn-border: var(--msp-black);
	--msp-btn-color-hover: var(--msp-red);
	--msp-btn-bg-hover: transparent;
	--msp-btn-border-hover: var(--msp-red);
}

/* --- Transparent blanc --- */
.btn.btn-tr-blanc,
.et_pb_button.btn-tr-blanc {
	--msp-btn-color: var(--msp-white);
	--msp-btn-bg: transparent;
	--msp-btn-border: var(--msp-white);
	--msp-btn-color-hover: var(--msp-red);
	--msp-btn-bg-hover: transparent;
	--msp-btn-border-hover: var(--msp-red);
}

/* --- Blanc plein --- */
.btn.btn-blanc,
.et_pb_button.btn-blanc {
	--msp-btn-color: var(--msp-black);
	--msp-btn-bg: var(--msp-white);
	--msp-btn-border: var(--msp-white);
	--msp-btn-color-hover: var(--msp-white);
	--msp-btn-bg-hover: var(--msp-black);
	--msp-btn-border-hover: var(--msp-black);
}

/* --- Rouge plein --- */
.btn.btn-rouge,
.et_pb_button.btn-rouge {
	--msp-btn-color: var(--msp-white);
	--msp-btn-bg: var(--msp-red);
	--msp-btn-border: var(--msp-red);
	--msp-btn-color-hover: var(--msp-white);
	--msp-btn-bg-hover: var(--msp-black);
	--msp-btn-border-hover: var(--msp-black);
}

/* --- Noir plein --- */
.btn.btn-noir,
.et_pb_button.btn-noir {
	--msp-btn-color: var(--msp-white);
	--msp-btn-bg: var(--msp-black);
	--msp-btn-border: var(--msp-black);
	--msp-btn-color-hover: var(--msp-white);
	--msp-btn-bg-hover: var(--msp-red);
	--msp-btn-border-hover: var(--msp-red);
}


/* =========================================================================
   CONTEXTE FOND SOMBRE
   ========================================================================= */

.bg-dark :is(.btn, .et_pb_button).btn-rouge {
	--msp-btn-color-hover: var(--msp-black);
	--msp-btn-bg-hover: var(--msp-white);
	--msp-btn-border-hover: var(--msp-white);
}

.bg-dark :is(.btn, .et_pb_button).btn-noir {
	--msp-btn-color-hover: var(--msp-red);
	--msp-btn-bg-hover: var(--msp-white);
	--msp-btn-border-hover: var(--msp-white);
}


/* =========================================================================
   BOUTONS DE FORMULAIRE — Divi, Ninja Forms, Gravity Forms
   ========================================================================= */

body #page-container #et-boc .et_pb_button[type="submit"],
body #page-container #et-boc .nf-form-content input[type="submit"],
body #page-container #et-boc .gform-theme .gform-footer input[type="submit"],
body #page-container #et-boc .et_pb_button[type="submit"]:hover,
body #page-container #et-boc .nf-form-content input[type="submit"]:hover,
body #page-container #et-boc .gform-theme .gform-footer input[type="submit"]:hover {
	--msp-btn-color: var(--msp-white);
	--msp-btn-bg: var(--msp-black);
	--msp-btn-border: var(--msp-black);
	--msp-btn-color-hover: var(--msp-white);
	--msp-btn-bg-hover: var(--msp-red);
	--msp-btn-border-hover: var(--msp-red);

	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--msp-btn-gap);
	width: fit-content;
	height: var(--msp-btn-height);
	padding: 0 var(--msp-btn-padding-x);
	border-width: var(--msp-btn-border-width);
	border-style: solid;
	border-radius: var(--msp-radius);
	font-size: var(--msp-btn-font-size);
	font-weight: 500;
	line-height: 1 !important;
	letter-spacing: 0.0175em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		color var(--msp-btn-transition),
		background-color var(--msp-btn-transition),
		border-color var(--msp-btn-transition);
}

body #page-container #et-boc .et_pb_button[type="submit"],
body #page-container #et-boc .nf-form-content input[type="submit"],
body #page-container #et-boc .gform-theme .gform-footer input[type="submit"] {
	color: var(--msp-btn-color) !important;
	background-color: var(--msp-btn-bg) !important;
	border-color: var(--msp-btn-border) !important;
}

body #page-container #et-boc .et_pb_button[type="submit"]:hover,
body #page-container #et-boc .nf-form-content input[type="submit"]:hover,
body #page-container #et-boc .gform-theme .gform-footer input[type="submit"]:hover {
	color: var(--msp-btn-color-hover) !important;
	background-color: var(--msp-btn-bg-hover) !important;
	border-color: var(--msp-btn-border-hover) !important;
}

body #page-container #et-boc .et_pb_button[type="submit"]::after,
body #page-container #et-boc .et_pb_button[type="submit"]:hover::after {
	position: static;
	display: inline-block;
	margin: 0;
	opacity: 1;
	color: inherit;
	content: var(--msp-btn-arrow);
	font-family: "ETmodules";
	font-size: 1em;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
}


/* =========================================================================
   RESPONSIVE
   Adapter une variante = redéfinir une variable, rien d'autre.
   ========================================================================= */

@media (max-width: 425px) {

	.btn,
	.et_pb_button,
	.nf-form-content input[type="submit"],
	.gform-theme .gform-footer input[type="submit"] {
		--msp-btn-font-size: 1rem;
		--msp-btn-padding-x: 1.1em;
	}

	.btn.btn-big,
	.et_pb_button.btn-big {
		--msp-btn-font-size: 1.15rem;
		--msp-btn-padding-x: 1.1em;
	}
}

@media (max-width: 320px) {

	.btn,
	.et_pb_button,
	.nf-form-content input[type="submit"],
	.gform-theme .gform-footer input[type="submit"] {
		--msp-btn-padding-x: 0.9em;
		--msp-btn-gap: 0.3em;
	}
}

/* =============================================================================
   MSP — BREADCRUMB
   ============================================================================= */
#page-container #section-breadcrumbs {
  /* Couleur du texte */
  --msp-breadcrumb-color: var(--msp-black, #222);

  /* Couleur des séparateurs */
  --msp-breadcrumb-accent: var(--msp-red, #e40e20);

  /* Décalage vertical */
  --msp-breadcrumb-offset: auto;

  /* Espacement de part et d'autre des séparateurs. */
  --msp-breadcrumb-gap: 0.55rem;

  /* Taille de l'icône maison. */
  --msp-breadcrumb-icon-size: 0.875rem;

  position: absolute;
  top: var(--msp-breadcrumb-offset);
  inset-inline: 0;
  z-index: 2;
  width: 100%;
  padding: 0;
  background-color: transparent;
}

.single:not(.single-pack) #page-container .et_pb_section .et_pb_row:has(#section-breadcrumbs){
	padding: 0;
}

.single.single-pack #page-container .et_pb_section .et_pb_module:has(#section-breadcrumbs){
	z-index: 10;
}

.single:not(.single-pack) #page-container #section-breadcrumbs{
	position: relative;
}

.single.single-pack #page-container #section-breadcrumbs{
	top: 2.187rem;
	--msp-breadcrumb-color: #fff;
}

#page-container #section-breadcrumbs .et_pb_row {
  padding-block: 0.75rem;
}

.single:not(.single-pack) #page-container #section-breadcrumbs .et_pb_row{
	width: 100%;
}

/* Le header doit rester au-dessus du breadcrumb en superposition. */
#page-container:has(#section-breadcrumbs) header .et_builder_inner_content {
  z-index: 3;
}

/* Décalage sous le header quand le breadcrumb chevauche un hero */
#page-container:has(.ms_hero_lite) #section-breadcrumbs,
#page-container:has(.banner-hero) #section-breadcrumbs {
  --msp-breadcrumb-offset: 135px;
}

#page-container #section-breadcrumbs .msp-breadcrumb {
  color: var(--msp-breadcrumb-color);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

#page-container #section-breadcrumbs .msp-breadcrumb > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#page-container #section-breadcrumbs .msp-breadcrumb a {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

#page-container #section-breadcrumbs .msp-breadcrumb a:hover,
#page-container #section-breadcrumbs .msp-breadcrumb a:focus-visible {
  text-decoration: underline;
}

#page-container #section-breadcrumbs .breadcrumb_last {
  font-weight: 700;
}

#page-container #section-breadcrumbs .msp-breadcrumb > span > span:first-child > a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  font-size: 0;
  line-height: 0;
}

#page-container #section-breadcrumbs .msp-breadcrumb > span > span:first-child > a::before {
  content: "\e074";
  font-family: "ETmodules";
  font-size: var(--msp-breadcrumb-icon-size);
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Le soulignement au survol n'a pas de sens sur un glyphe. */
#page-container #section-breadcrumbs .msp-breadcrumb > span > span:first-child > a:hover,
#page-container #section-breadcrumbs .msp-breadcrumb > span > span:first-child > a:focus-visible {
  text-decoration: none;
  opacity: 0.7;
}

/* Bascule clair / sombre */
#page-container #section-breadcrumbs:has(+ .ms_spinAssist),
#page-container #section-breadcrumbs:has(+ #main-content .ms_spinAssist),
#page-container #section-breadcrumbs:has(+ .banner_demande-essai),
#page-container #section-breadcrumbs:has(+ #main-content .banner_demande-essai),
#page-container #section-breadcrumbs:has(+ .section-gamme-produits),
#page-container #section-breadcrumbs:has(+ #main-content .section-gamme-produits),
#page-container #section-breadcrumbs:has(+ .ms_hero_lite),
#page-container #section-breadcrumbs:has(+ #main-content .ms_hero_lite),
#page-container .ms_hero_lite #section-breadcrumbs,
#page-container #section-breadcrumbs.msp-breadcrumb--light {
  --msp-breadcrumb-color: var(--msp-white, #fff);
}

#page-container #section-breadcrumbs:has(+ .ms_spinAssist) .msp-breadcrumb > span,
#page-container #section-breadcrumbs:has(+ #main-content .ms_spinAssist) .msp-breadcrumb > span{
	justify-content: end;
}

/* Séparateurs */
#page-container #section-breadcrumbs .msp-breadcrumb-separator {
  display: inline-block;
  margin-inline: var(--msp-breadcrumb-gap);
  color: var(--msp-breadcrumb-accent);
  font-weight: 700;
}

@media (max-width: 980px) {
  #page-container #section-breadcrumbs {
    display: none;
  }
}