/***** top page *****/
.top_page 							{ position: relative; padding-top: 170px; padding-bottom: 60px; background-color: var(--mainColor1); }
.top_page:before 					{ position: absolute; width: 100%; height: 30px; bottom: -30px; left: 0; background: url(../images/pattern.svg); transform: rotate(180deg); background-size: 30px 30px; visibility: visible; transition: none; content: ""; }}
.top_page .content 					{ padding: clamp(20px, 8vw, 60px) 0;}
.top_page .titre_main				{ color: #fff; margin-bottom: 10px;}
.top_page .sous_titre 				{ color: #fff; font-size: 22px; line-height: 30px;}
.top_page .chapo 					{ margin: 20px 0 0 0; color: #fff}
.top_page .chapo span				{ margin: 15px 0 0 0; display: block;}
.top_page p 						{ margin: 15px 0 0 0;}

@media (max-width:1200px) {
.top_page .texte 					{ padding: 60px 0;}
}
@media (max-width:1000px) { 
.top_page .texte 					{ padding: 50px 0;}
}
@media (max-width:700px) { 
.top_page 							{ padding-top: 100px; padding-bottom: 30px; margin-bottom: 60px;}
.top_page .texte 					{ padding: 40px 0;}
}




/***** breadcrumb *****/
.breadcrumb							{ margin:40px 0; line-height: 0; position: relative;}
.breadcrumb li 						{ display: inline-block; font-size: 12px; line-height: 20px; margin-right: 30px; letter-spacing: 0.6px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 10px; position: absolute; right: -16px; top: 6px; background: #fff; content: "";}
.breadcrumb li:last-child:after 	{ display: none;}
.breadcrumb li a.active 			{ color: var(--mainColor1);}
.breadcrumb li a			        { color: #fff}

@media (min-width:1201px) {
.breadcrumb a:hover                 { color: var(--mainColor1);}
								
}

@media (max-width:1200px) { 
.breadcrumb							{ margin:0 0 40px 0;}
.bloc_txt_img .container .img:before{ display:none;}

}
@media (max-width:700px) { 
.breadcrumb							{ display: none;}
}



/***** text : simple *****/
.txt_simple 											{ position: relative; text-align: center; margin: var(--marginTB);}
.txt_simple.align_left									{ text-align: left;}
.txt_simple svg											{ width: 60px; height: auto; display: block; margin: 0 auto 15px auto;}
.txt_simple p               							{ margin-bottom: 15px;}
.txt_simple .link										{ margin-top: 10px;}
.txt_simple .multi_links								{ display: grid; grid-template-columns: 1fr 1fr; max-width: 300px; grid-gap: 10px; margin: 25px 0 0 0;}
.txt_simple .multi_links .link							{ margin: 0; text-align: center; padding: 0;}

/* custom highlight */
.txt_simple .txt_highlight    							{ padding-bottom: 15px;}
.txt_simple .txt_highlight svg  						{ bottom: 0; left: 0; right: 0; margin: 0 auto;}
.txt_simple .txt_highlight svg path						{ fill: var(--mainColor1);}





.slogan .wrapper_small                                  { background-color: var(--mainColor1); padding:  clamp(15px, 1vw, 30px) clamp(25px, 2vw, 60px) clamp(25px, 2vw, 60px) clamp(25px, 2vw, 60px); }
.slogan .titre                                          { color: #fff; text-transform: none; font-size: clamp(16px, 2vw, 22px); line-height: 190%; letter-spacing: 0.6px; }
.slogan .titre a                                        { color: #fff; border-bottom: 1px solid #ffffff55;}
.slogan .icon                                           { width: 110px; height: 90px; margin: 0 auto 25px; }
.slogan .icon img                                       { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1);}

/*
.slogan .wrapper_small:before		                    { position: absolute; width: 30px; height: 100%; bottom: 0; left: 0; background: url(../images/pattern.svg); transform: rotate(180deg); background-size: 30px 30px; visibility: visible; transition: none; content: ""; }
.slogan .wrapper_small:after		                    { position: absolute; width: 30px; height: 100%; bottom: 0; right: 0; background: url(../images/pattern.svg); transform: rotate(180deg); background-size: 30px 30px; visibility: visible; transition: none; content: ""; }
*/


@media (max-width:700px) {
.slogan .icon                                           { width: 80px; height: 70px; margin: 0 auto 15px; }
}





.grid_trio                                              { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; align-items: center; margin: var(--marginTB);}
.grid_trio img                                          { display: block; width: 100%; height: auto;}

@media (max-width:1000px) {
.grid_trio                                              { grid-template-columns: 1fr 1fr; }
}
@media (max-width:700px) {
.grid_trio                                              { grid-template-columns: 1fr; gap: 10px; }
}