/***** top page *****/
.top_page 							{ position: relative; min-height: 390px;}
.top_page.no_contact				{ min-height: inherit;}
.top_page .titre 					{ color: #2e2e2e; margin-bottom: 0;}
.top_page .titre_main               { margin-bottom: 10px;}
.top_page .texte 					{ padding:0 460px 0 0;}

.top_page .contact                  { background: #171717; text-align: center; border-radius: 10px; width: 370px; position: absolute; right: 0; top: 40px; padding: 60px 40px 65px;}
.top_page .contact .sous_titre      { color: #fff; font-size: 20px; line-height: 30px; margin-bottom: 20px;}
.top_page .contact .titre           { color: #e53939;}
.top_page .contact .link            { justify-content: center; min-width: 220px; margin-top: 10px;}
@media (max-width:1200px) { 
.top_page .texte                    { padding-right: 420px;}
}
@media (max-width:1000px) { 
.top_page                           { min-height: 0;}
.top_page .texte					{ padding: 0;}
.top_page .contact                  { display: none;}
}
@media (max-width:700px) { .top_page .titre_main               { font-size: 20px; margin-bottom: 10px;}
.top_page .texte                    { padding-bottom: 10px;}
.top_page .chapo 					{ margin: 0; font-size: 12px; line-height: 26px;}
}


/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; padding-bottom: 40px;}
.breadcrumb a                       { color: #000;}
.breadcrumb a.active                { color: #e53939;}
.breadcrumb li 						{ display: inline-block; font-size: 12px; line-height: 20px; margin-right: 30px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 9px; position: absolute; right: -16px; top: 5px; background: #2388c3; content: "";}
.breadcrumb li:last-child:after 	{ display: none;}

@media (min-width:1201px) {
.breadcrumb a:hover                 { color: #e53939;}
}
@media (max-width:1200px) { 
.breadcrumb							{ display: none;}
}


/***** page content *****/
.page 								{ position: relative; padding-bottom: 35px; padding-top: 215px;}
.page p								{ margin-bottom: 15px;}
.page .ul_list a, 
.page p a							{ border-bottom: 1px solid #000; padding-bottom: 2px;}

@media (min-width:1201px) {
.page .ul_list a:hover,
.page p a:hover						{ border-color: #e53939; color: #e53939;}
}
@media (max-width:1200px) {
.page 								{ padding-bottom: 20px;}
}
@media (max-width:700px) {
.page 								{ padding-top: 160px;}
}
@media (max-width:700px) { .page 								{ padding-bottom: 10px;}
.page p								{ margin-bottom: 10px;}
.page .ul_list						{ margin-bottom: 10px;}
}


/***** infos *****/
.infos                              { padding: 40px 60px; background: #f5f5f5; border-radius: 10px; margin: 100px 0;}
.infos ul                           { margin-bottom: 15px;}
.infos ul a                         { border-bottom: 1px solid #555;}
.infos li                           { display: grid; grid-template-columns: 370px auto; padding: 10px 0; border-bottom: 1px solid #c4c4c4;}
.infos p:last-of-type               { margin: 0}
@media (max-width:1000px) {
.infos                              { margin: 80px 0; padding: 30px 40px 50px;}
}
@media (max-width:700px) {
.infos                              { margin: 50px 0;}
.infos li                           { grid-template-columns: 1fr; padding: 5px 0;}
}
@media (max-width:700px) { .infos                              { padding: 30px 20px 40px;}
.infos li                           { grid-template-columns: 1fr; padding: 5px 0;}
}

.infos-alerte                        { padding: 30px 80px 60px; background: #f5f5f5; border-radius: 10px;}
.infos-alerte li                     { margin-bottom: 40px;}
@media (max-width:1000px) {
.infos-alerte                        { padding: 30px 40px 50px;}
}
@media (max-width:800px) {
.infos-alerte                        { padding: 30px 40px 50px 20px;}
}

/***** bloc texte *****/
.bloc_texte							{ margin: 80px auto; position: relative;}
.bloc_texte :last-child				{ margin-bottom: 0;}
.bloc_texte img,
.bloc_texte video					{ width: 100%; height: auto; display: block;}

@media (max-width:1200px) { 
.bloc_texte							{ margin: 60px auto;}
}
@media (max-width:1000px) { 
.bloc_texte							{ margin: 50px auto;}
}
@media (max-width:700px) { .bloc_texte							{ margin: 30px 0;}
}


/***** services *****/
.services                           { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-bottom: 65px;}
.services img                       { display: block; margin: 0 auto 25px; }
.services .link                     { display: block; text-align: center;}
@media (max-width:1000px) { 
.services                           { display: none;}
}

/***** services *****/
.grid_duo                           { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin: 100px auto; }
.grid_duo img                       { display: block; width: 100%; height: auto; border-radius: 15px;}
@media (max-width:1000px) { 
.grid_duo                           {  grid-template-columns: repeat(1, 1fr); gap: 20px;}
}




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



#faq .grid                          { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0; margin: 80px auto;}
#faq .grid .cadre                   { padding: 43px 50px 42px; position:relative; background: #f5f5f5; color: #000; border-radius: 15px;}
#faq .grid .cadre li                { margin-bottom: 20px;}
#faq .grid .cadre li a              { padding-left: 30px; background: url("../images/dwnld_black.svg") 0 50% no-repeat; border-bottom: transparent;}
#faq .grid .right                   { padding-left: 80px; }
#faq .grid .right p                 { padding-bottom: 10px; }
#faq .grid .right .link             { margin-bottom: 25px; margin-top: -10px; margin-right: 5px;}
 
@media (max-width:900px) { 
#faq .grid                          { grid-template-columns: 1fr; grid-gap: 35px;}
#faq .grid .right                   { padding-left: 0; }
#faq .grid .cadre                   { grid-area: 2; padding: 33px 20px;}
#faq .grid .right                   { grid-area: 1;}
}


.cadre                             { padding: 43px 50px 42px; position:relative; background: #f5f5f5; color: #000; border-radius: 15px;}


#liens .list_lien                   { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 30px;}
#liens .list_lien .item             { position: relative; box-shadow: 0 0 40px 0 rgba(0,0,0,0.08); padding: 10px; border-radius: 5px; transition: all 300ms ease-in-out;}
#liens .list_lien .item .row        { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; display: grid; align-content: center; align-items: center; text-align: center; background-color: #fff; padding: 10px; border-radius: 5px; opacity: 0; font-size: 12px; line-height: 20px; transition: all 300ms ease-in-out;}
#liens .list_lien .item img         { display: block; width: 100%; height: auto;}

@media (min-width:1201px) { 
#liens .list_lien .item:hover       { box-shadow: 0 0 60px 0 rgba(0,0,0,0.14); }
#liens .list_lien .item:hover .row  { opacity: 1;}
}
@media (max-width: 1200px){
#liens .list_lien                   { grid-template-columns: repeat(6, 1fr); grid-gap: 20px;}
#liens .list_lien .item             { box-shadow: 0 0 30px 0 rgba(0,0,0,0.05);}
}
@media (max-width: 1100px){
#liens .list_lien                   { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1000px){
#liens .list_lien                   { grid-template-columns: repeat(4, 1fr); grid-gap: 15px;}
#liens .list_lien .item             { box-shadow: 0 0 20px 0 rgba(0,0,0,0.03);}
}
@media (max-width: 700px){
#liens .list_lien                   { grid-template-columns: repeat(3, 1fr);}
#liens .list_lien .item             { box-shadow: 0 0 10px 0 rgba(0,0,0,0.03);}
}


/***** page plan *****/
#plan .top_page:before 				{ bottom: 0;}
#plan .top_page .texte				{ padding-bottom: 100px;}
#plan .top_page .sous_titre			{ margin: 0;}
#plan .page							{ padding-bottom: 0;}

@media (max-width: 1400px){
#plan .top_page .texte				{ padding-bottom: 80px;}
}
@media (max-width: 1200px){
#plan .top_page .texte				{ padding-bottom: 60px;}
}
@media (max-width: 700px){
#plan .top_page .texte				{ padding-bottom: 35px;}
}







/***** actualites *****/
#blog .blog 							{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px 40px; margin: -20px auto;}
#blog .blog .item 						{ position: relative;}
#blog .blog .item a 					{ display: block; text-align: center;}
#blog .blog .item .photo 				{ position: relative; overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px;}
#blog .blog .item .photo img 			{ display: block; width: 100%; height: auto; transition: filter 400ms ease-in-out;}
#blog .blog .item .photo .date 			{ width: 105px; height: 35px; text-align: center; font-size: 13px; line-height: 35px; font-weight: 400; border-radius: 5px; background: #fff; position: absolute; right: 20px; top: 20px; text-transform: uppercase; letter-spacing: 0.8px; z-index: 10;}
#blog .blog .item .titre 				{ padding: 10px 30px 15px 30px; font-weight: 500; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: #000; color: #fff; display: grid; align-items: center; min-height: 80px; line-height: 24px; transition: color 400ms ease-in-out;}

@media (min-width:1201px) {
#blog .blog .item a:hover .photo img	{ filter: brightness(0.65);}
#blog .blog .item a:hover .titre 		{ color: #e53939;}
}
@media (max-width:1200px) {
#blog .blog 							{ grid-template-columns: 1fr 1fr; grid-gap: 20px;}
#blog .blog .item .photo 				{ border-top-left-radius: 8px; border-top-right-radius: 8px;}
#blog .blog .item .photo .date 			{ right: 15px; top: 15px;}
#blog .blog .item .titre 				{ border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
}
@media (max-width:1000px) {
#blog .blog 							{ margin: 0 auto;}
#blog .blog .item .photo .promo 		{ transform: scale(0.85); transform-origin: left top; left: 15px; top: 15px;}
}
@media (max-width:700px) {
#blog .top_page .chapo 					{ display: none;}
#blog .blog 							{ grid-template-columns: 1fr;}
#blog .blog .item .photo 				{ border-top-left-radius: 5px; border-top-right-radius: 5px;}
#blog .blog .item .photo .promo 		{ transform: scale(0.70);}
#blog .blog .item .photo .date 			{ width: 90px; height: 29px; font-size: 11px; line-height: 29px;}
#blog .blog .item .titre 				{ padding: 15px 25px; min-height: inherit; font-size: 14px; line-height: 20px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
}


#blog .article .top_page 				{ padding-bottom: 0;}
#blog .article .titre_main				{ margin-bottom: 30px; font-size: 30px; line-height: 40px;}
#blog .article .photo img				{ border-radius: 15px; margin: 40px auto 50px auto; max-width: 650px;}
#blog .article .content  				{ margin: 50px 0;}
#blog .article .content h1,
#blog .article .content h2,
#blog .article .content h3,
#blog .article .content h4,
#blog .article .content h5,
#blog .article .content h6 				{ font: 500 20px/30px "Poppins"; position: relative; color: #e53939; margin: 40px 0 15px 0;}
#blog .article .content ul				{ margin-bottom: 15px;}
#blog .article .content ul li			{ padding: 5px 0 5px 20px; position: relative;}
#blog .article .content ul li:before	{ position: absolute; left: 0; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: #e53939; content: "";}
#blog .article .content :last-child 	{ margin-bottom: 0;}

@media (max-width:1200px) {
#blog .article .bloc_short				{ max-width: 800px;}
#blog .article .titre_main				{ font-size: 20px; line-height: 28px; margin-bottom: 25px;}
#blog .article .photo img				{ margin: 40px 0; border-radius: 10px;}
#blog .article .content  				{ margin: 40px 0;}
}
@media (max-width:1000px) {
#blog .article .photo img				{ margin: 30px 0;}
#blog .article .content  				{ margin: 30px 0;}
}
@media (max-width:700px) {
#blog .article .top_page .chapo 		{ display: block;}
#blog .article .bloc_texte				{ margin-top: 35px;}
#blog .article .titre_main				{ font-size: 16px; line-height: 22px; margin-bottom: 20px;}
#blog .article .photo img				{ margin: 25px 0; border-radius: 5px;}
#blog .article .content  				{ margin: 25px 0;}
#blog .article .content h1,
#blog .article .content h2,
#blog .article .content h3,
#blog .article .content h4,
#blog .article .content h5,
#blog .article .content h6 				{ font-size: 18px; line-height: 26px; margin: 20px 0 10px 0;}
#blog .article .content ul				{ margin-bottom: 10px;}
#blog .article .content ul li			{ padding-left: 18px;}
#blog .article .content ul li:before	{ top: 15px; width: 5px; height: 5px;}
}