/***** top page *****/
.top_page 							{ position: relative; background: #0abfe2; padding: 45px 0 55px; color: #fff; border-radius: 20px;}
.top_page .titre_main span          { color: #231f20;}
@media (min-width:1201px) { 
.top_page .devis:hover              { color: #fff;}
.top_page .devis:hover::after       { filter: brightness(0) invert(1);}
}
@media (max-width:1400px) {
.top_page .wrapper                  { padding: 0 50px; width: 100%;}
}
@media (max-width:1200px) {
.top_page                           { padding: 40px 0; border-radius: 15px;}
.top_page .wrapper                  { padding: 0 40px;}
}
@media (max-width:1000px) {
.top_page                           { padding: 30px 0; border-radius: 10px;}
.top_page .wrapper                  { padding: 0 5vw;}
}
@media (max-width:700px) { 
.breadcrumb 						{ display: none}
.top_page                           { padding: 25px 0; border-radius: 8px;}
.top_page .wrapper                  { padding: 0 7.5vw;}
}


.deco                               { position: relative; margin: 20px 0 40px;}
.deco span                          { position: absolute; width: 20px; height: 20px; background-color: #231f20; border-radius: 50%; right: 50px;}
.deco span:before                   { content: ""; position: absolute; width: 100%; height: 100%; background-color: #12bed4; border-radius: 50%; left: -25px;}
.deco span:after                    { content: ""; position: absolute; width: 100%; height: 100%; background-color: #12bed4; border-radius: 50%; right: -25px;}

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



/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; margin-bottom: 30px; text-align: left;}
.breadcrumb a                       { color: #fff;}
.breadcrumb a.active                { color: #fff;}
.breadcrumb li 						{ display: inline-block; font-size: 14px; line-height: 20px; margin-right: 30px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 10px; position: absolute; right: -15px; top: 5px; background: #000; content: "";}
.breadcrumb li:last-child:after 	{ display: none;}

@media (min-width:1201px) {
.breadcrumb li a:hover				{ color:#231f20;}
}
@media (max-width:1000px) { 
.breadcrumb							{ display: none;}
}


.etats                              { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin: 80px 0;}
.link-etats                         { background-image: linear-gradient(to top, #231f20 0% 50%, #12bed4 50% 100%);}
.link.link-etats                    { height: 60px; line-height: 58px; border-radius: 35px;}
.link-etats span                    { position: relative; padding-left: 55px; background: url(../images/download.svg) no-repeat center left; display: block;}

@media (max-width:1200px) {
.link-etats                         { padding:0 20px; }
.link-etats span                    { padding-left:30px; }
}
@media (max-width:1000px) {
.etats                              { max-width: 300px; grid-template-columns: 1fr; margin: 40px auto;}
}
@media (max-width:700px) {
.etats                              { gap: 10px;}
.link.link-etats                    { height: 50px; line-height: 48px; font-size: 11px;}
}


/***** page content *****/
.page 								{ position: relative; padding-top: 170px;}
.page p a,
.page .ul_list li a                 { color: #12bed4; border-bottom: 1px solid transparent;}
@media (min-width:1201px) {
.link-etats:hover span              { background-image: url(../images/download_white.svg);}
.page p a:hover,
.page .ul_list li a:hover           { border-bottom: 1px solid #12bed4;}
}
@media (max-width:1200px) {
.page 								{ padding: 80px 0 0;}
}
@media (max-width:700px) {
.page 								{ padding-top: 100px;}
.page .ul_list						{ margin-bottom: 10px;}
}



/***** 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: 40px auto;}
}
@media (max-width:700px) { 
.bloc_texte							{ margin: 30px 0;}
}


/***** services *****/
.services                           { display: grid; grid-template-columns: repeat(3, 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;}
}





#about .equipe .grid_equipe         { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 80px;}
#about .equipe .grid_equipe .sous_titre span { display: block; font-size: 20px; line-height: 30px; font-weight: 500; color: #222; }
#about .equipe .grid_equipe .link   { display: block; width: 100%; margin-top: 30px;}

@media (max-width:1200px) { 
    
}
@media (max-width:1000px) { 
#about .equipe .grid_equipe         { grid-template-columns: 1fr; grid-gap: 50px;}
}
@media (max-width:700px) { 
    
}


#services .bloc_grid                { grid-template-columns: 380px 1fr; align-items: start; }
@media (max-width:1000px) { 
#services .bloc_grid                { grid-template-columns: 1fr;}
}



#honoraires table                    { border-collapse: collapse; padding: 10px; border: 1px solid #eee;}
#honoraires table tbody              { overflow-x: scroll; width: 500px; }
#honoraires table td                 { border-collapse: collapse; padding: 10px 30px; border: 1px solid #eee;}
@media (max-width:700px) { 
#honoraires table                    { width: 650px; }
}

#docs .list                          { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 30px;}
#docs .list .item                    { width: 100%; height: 100%; background-color: #fff; box-shadow: 0px 0px 20px 2px rgba(0, 131, 149, 0.1); border-radius: 15px; padding: 30px; text-align: center}
#docs .list .item p                  { font-size: 17px; color: #231f20; transition: all 300ms ease-in-out;}
#docs .list .item img                { width: 35px; height: auto; margin: 0 auto 25px;  }

@media (min-width:1201px) { 
#docs .list .item:hover              { background-color: #231f20; box-shadow: 0px 0px 20px 2px rgba(0, 131, 149, 0);}
#docs .list .item:hover p            { color: #fff;}
#docs .list .item img                { width: 35px; height: auto; margin: 0 auto 25px;  }
}
@media (max-width:1200px) { 
#docs .list                          { grid-template-columns: 1fr 1fr 1fr; grid-gap: 25px;}
#docs .list .item p                  { font-size: 16px;}
}
@media (max-width:1000px) { 
#docs .list                          { grid-gap: 20px;}
#docs .list .item                    { box-shadow: 0px 0px 20px 2px rgba(0, 131, 149, 0.08); border-radius: 10px; padding: 20px 5vw; }
#docs .list .item p                  { font-size: 15px;}
}
@media (max-width:850px) { 
#docs .list                          { grid-template-columns: 1fr 1fr; }
}
@media (max-width:600px) { 
#docs .list                          { grid-template-columns: 1fr; }
}
@media (max-width:700px) { 
#docs .list                          { grid-gap: 20px;}
#docs .list .item                    {  border-radius: 5px; padding: 20px 7.5vw; }
#docs .list .item p                  { font-size: 14px;}
#docs .list .item img                { width: 25px; margin-bottom: 10px;}
}




/***** actualites *****/
#blog .blog 							{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 60px 40px; margin: -20px auto;}
#blog .blog .item 						{ position: relative; box-shadow: 0px 0px 20px 2px rgba(0, 131, 149, 0.1);}
#blog .blog .item a 					{ display: block; text-align: center;}
#blog .blog .item .photo 				{ position: relative; overflow: hidden; border-top-left-radius: 12px; border-top-right-radius: 12px;}
#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: 700; border-radius: 25em; background: #fff; position: absolute; right: 20px; top: 20px; text-transform: uppercase; letter-spacing: 0.8px; z-index: 10;}

#blog .blog .item .titre 				{ padding: 15px 30px 20px 30px; font-weight: 500; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; background-color: #fff; color: #231f20; display: grid; align-items: center; min-height: 90px; line-height: 24px; transition: background-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       		{ box-shadow: 0px 0px 20px 2px rgba(0, 131, 149, 0);}
#blog .blog .item a:hover .titre 		{ background-color: #231f20; color: #fff;}
}
@media (max-width:1200px) {
#blog .blog 							{ grid-template-columns: 1fr 1fr; grid-gap: 20px;}
#blog .blog .item .photo 				{ border-top-left-radius: 10px; border-top-right-radius: 10px;}
#blog .blog .item .photo .date 			{ right: 15px; top: 15px;}
#blog .blog .item .titre 				{ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
}
@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 .photo img				{ border-radius: 15px; margin: 40px auto 50px auto; max-width: 850px;}
#blog .article .contenu  				{ margin: 50px 0;}
#blog .article .contenu h2              { font: 500 18px/30px "Montserrat"; margin: 60px auto; }
#blog .article .contenu h1,
#blog .article .contenu h3,
#blog .article .contenu h4,
#blog .article .contenu h5,
#blog .article .contenu h6 				{ font: 400 26px/36px "Montserrat"; position: relative; color: #053435; margin-bottom: 15px; margin-top: 30px;}
#blog .article .contenu ul				{ margin-bottom: 15px;}
#blog .article .contenu ul li			{ padding: 5px 0 5px 20px; position: relative;}
#blog .article .contenu ul li:before	{ position: absolute; left: 0; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: #ffb600; content: "";}
#blog .article .contenu :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 .contenu  				{ margin: 40px 0;}
}
@media (max-width:1000px) {
#blog .article .photo img				{ margin: 30px 0;}
#blog .article .contenu  				{ margin: 30px 0;}
}
@media (max-width:700px) {
#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 .contenu  				{ margin: 25px 0;}
#blog .article .contenu h1,
#blog .article .contenu h2,
#blog .article .contenu h3,
#blog .article .contenu h4,
#blog .article .contenu h5,
#blog .article .contenu h6 				{ font-size: 18px; line-height: 26px; margin: 20px 0 10px 0;}
#blog .article .contenu ul				{ margin-bottom: 10px;}
#blog .article .contenu ul li			{ padding-left: 18px;}
#blog .article .contenu ul li:before	{ top: 15px; width: 5px; height: 5px;}
}