/***** top page *****/
.top_page 										{ position: relative; padding-top: 220px;}
.top_page .content                              { position: relative;}
.top_page .titre_main							{ margin-bottom: 10px; font-size: 80px; line-height: 90px; font-weight: 200; letter-spacing: 15px;}
.top_page .sous_titre 							{ color: var(--mainColor2); font-size: 22px; line-height: 28px;}
.top_page .decalage 							{ position: relative; margin: 60px 0 0 auto; max-width: 80%; }
/*.top_page .decalage:after                       { content: ""; width: 100%; height: 100%; background-color: var(--mainColor1); display: block; position: absolute; top: 0; bottom: 0; right: calc(100% + 60px); z-index: -1; }*/

@media (max-width:1200px) {
.top_page .titre_main							{ font-size: 70px; line-height: 80px; }
}
@media (max-width:1000px) { 
.top_page .titre_main							{ font-size: 60px; line-height: 70px; }
}
@media (max-width:700px) { 
.top_page 										{ padding-top: 180px;}
.top_page .titre_main							{ font-size: 30px; line-height: 40px; letter-spacing: 10px;}
.top_page .sous_titre 							{ font-size: 18px; line-height: 26px;}
.top_page .decalage 							{ margin: 40px auto 0; max-width: 100%; }
}




/***** breadcrumb *****/
.breadcrumb										{ line-height: 0; position: relative; margin: 0 0 30px 0;}
.breadcrumb li 									{ display: inline-block; font-size: 12px; line-height: 20px; margin-right: 30px; letter-spacing: 0.6px; position: relative;}
.breadcrumb li a 								{ color: var(--mainColor3);}
.breadcrumb li:after							{ width: 1px; height: 9px; position: absolute; right: -18px; top: 5px; background: var(--mainColor3); content: "";}
.breadcrumb li:last-child:after 				{ display: none;}
.breadcrumb li a :last-of-type					{ color: var(--mainColor2);}

@media (min-width:1201px) {
.breadcrumb a:hover                 			{ color: var(--mainColor2);}
}
@media (max-width:700px) { 
.breadcrumb										{ display: none;}
}




/* custom highlight */
.txt_highlight:after                            { content: ""; width: 50%; height: 100%; background-color: var(--mainColor1); display: block; position: absolute; top: 0; bottom: 0; right: 0; z-index: -1; }
.txt_highlight .content>*		            	{ color: var(--mainColor2); }
.txt_highlight .content			            	{ padding: clamp(20px, 4vw, 50px) var(--paddingTB); }
@media (max-width:700px) { 
.txt_highlight .content			            	{ padding: var(--paddingTB); }
}






.bloc_txt_img.custom      						{ padding: 0; grid-template-columns: 30% 1fr; margin: clamp(50px, 7vw, 100px);}
@media (max-width:700px) { 
.bloc_txt_img.custom      						{ margin: inherit;}
}





/***** grid bloc *****/
.grid_bloc	 								{ position: relative; margin: var(--maginTB);}
.grid_bloc:before							{ width: auto; height: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--bgColorLight); visibility: hidden; transition: none; z-index: -1; content: "";}
.grid_bloc .container						{ display: grid; grid-gap: clamp(10px, 5vw, 20px); margin-top: clamp(15px, 3vw, 25px);}

@media (max-width:1200px) {
.grid_bloc:before							{ left: 0; right: 0; top: 0; bottom: 0; border-radius: 0;}
}




/* custom colums */
.grid_bloc.col_2,
.grid_bloc.col_3,
.grid_bloc.col_4            				{ margin-top: clamp(30px, 4vw, 60px); }
.grid_bloc.col_2 .container					{ grid-template-columns: repeat(2, 1fr);}
.grid_bloc.col_3 .container					{ grid-template-columns: repeat(3, 1fr);}
.grid_bloc.col_4 .container					{ grid-template-columns: repeat(4, 1fr);}
.grid_bloc .container img    				{ display: block; width: 100%; height: auto;}

@media (max-width:1200px) {
.grid_bloc.col_4 .container					{ grid-template-columns: 1fr 1fr;}
}
@media (max-width:1000px) {
.grid_bloc.col_3 .container					{ grid-template-columns: 1fr;}
}
@media (max-width:700px) {
.grid_bloc.col_2 .container,	
.grid_bloc.col_3 .container,					
.grid_bloc.col_4 .container					{ grid-template-columns: 1fr;}
}




.card_item_v1								{ border-radius: var(--imgRadius); background-color: #fff; border: 1px solid #c7c7c7; position: relative;}
.card_item_v1 .wrap							{ padding: 70px;}
.card_item_v1 .price						{ padding: 0 35px; text-align: right; line-height: 50px; height: 50px; font-size: 18px; font-weight: 500; letter-spacing: 5px; background-color: var(--mainColor1)}
.card_item_v1 p								{ margin-bottom: 20px;}

@media (max-width:1200px) {
.card_item_v1								{ box-shadow: none;}
.card_item_v1 .wrap							{ padding: 40px;}
.card_item_v1 .sous_titre 					{ font-size: 20px;}
}
@media (max-width:700px) {
.card_item_v1 .wrap							{ padding:30px 20px;}
.card_item_v1 .sous_titre 					{ font-size: 16px; line-height: 22px;}
}





#tarifs .grid_bloc                          { margin: clamp(40px, 5vw, 100px) auto; }
#tarifs .txt_simple                         { margin: clamp(40px, 5vw, 100px) auto; }
#tarifs .grid_bloc .item li                 { font-size: 18px ; }
#tarifs .grid_bloc .item li b               { background-color: var(--mainColor1); padding: 6px 15px; }
@media (max-width:1000px) {
#tarifs .grid_bloc.col_2 .container         { grid-template-columns: 1fr;}
#tarifs .grid_bloc .item li                 { font-size: 16px; }
}
@media (max-width:700px) {
#tarifs .grid_bloc .item li                 { font-size: 14px; }
}





#horaires .grid_horaires .item              { display: grid; grid-template-columns: 1fr 80%; gap: 30px; border-bottom: 1px solid #D5D5D5; padding: 20px 0; }
#horaires .grid_horaires .item .jour        { font-size: 20px; line-height: 32px; font-weight: 500; text-transform: uppercase; letter-spacing: 5px;}
#horaires .grid_horaires .item .heures      { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
#horaires .grid_horaires .item .heures .cours  { background-color: var(--mainColor1); padding: 25px; text-align: center; }
#horaires .grid_horaires .item .heures .quand   { font-weight: 400; font-size: 17px; letter-spacing: 2px; }
#horaires .grid_horaires .item .heures .quoi   { font-weight: 500; font-size: 18px; text-transform: uppercase; letter-spacing: 1.2px; }

@media (max-width:1000px) {
#horaires .grid_horaires .item              { grid-template-columns: 25% 1fr; gap: 20px; }
#horaires .grid_horaires .item .heures      { grid-template-columns: 1fr 1fr; }
}
@media (max-width:700px) {
#horaires .grid_horaires .item .jour        { font-size: 19px;}
#horaires .grid_horaires .item              { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
#horaires .grid_horaires .item .heures .cours  { background-color: var(--mainColor1); padding: 20px 15px; text-align: center; }
#horaires .grid_horaires .item .heures .quand   { font-size: 15px; }
#horaires .grid_horaires .item .heures .quoi   { font-size: 16px; }
}
@media (max-width:400px) {
#horaires .grid_horaires .item .heures      { grid-template-columns: 1fr; }
}