/***** top_page *****/
.top_page                           { padding: 120px 0 0;}
.top_page .wrapper                  { background: var(--white); border-radius: 30px; padding: 40px 40px 95px; box-shadow: 0 0 80px 0 rgba(25, 215, 227, 0.2);}
.top_page .content                  { max-width: 1200px; margin: 0 auto;}
.top_page .produit                  { width: max-content; max-width: 100%; min-width: 260px; margin: 0 auto 40px; padding: 0 90px; position: relative; display: grid; align-items: center; justify-content: center; min-height: 260px;}
.top_page .produit .img             { position: relative; z-index: 1; display: block; margin: 0 auto; max-width: 100%;}
.top_page .produit::after           { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; margin: auto; border-radius: 50%; background: var(--main-color-light); width: 260px; height: 260px;}
.top_page .produit .icone           { position: absolute; top: 30px; right: 0;}
.top_page .texte                    { text-align: center;}
.top_page .chapo                    { max-width: 860px; margin: 0 auto;}
.top_page .cta                      { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 50px; margin: 50px auto 0;}

@media (max-width:1200px) { 
.top_page                           { padding: 150px 0 0;}
} 
@media (max-width:1000px) { 
.top_page .cta                      { grid-template-columns: 1fr;}
.top_page .wrapper                  { padding: 40px;}
.top_page .produit                  { padding: 0;}
.top_page .produit .icone           { top: 0;}
} 
@media (max-width:700px)            {
.top_page .wrapper                  { padding: 40px 20px; border-radius: 10px;}
.top_page .produit .icone           { top: -20px; right: 0;}
.top_page .cta                      { gap: 10px;}
}



/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; padding: 0 0 5px;}
.breadcrumb a                       { color: var(--black);}
.breadcrumb a.active                { color: var(--main-color);}
.breadcrumb li 						{ display: inline-block; font-size: 12px; line-height: 30px; letter-spacing: 0.8px; margin-right: 30px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 9px; position: absolute; right: -16px; top: 11px; background: var(--black); content: "";}
.breadcrumb li:last-child:after 	{ display: none;}

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

/***** page content *****/
.page_content 						{ position: relative;}
.page_content .ul_list a, 
.page_content p a					{ border-bottom: 1px solid transparent; color: var(--main-color); padding-bottom: 2px;}

@media (min-width:1201px) {
.page_content .ul_list a:hover, 
.page_content p a:hover				{ border-color: var(--main-color);}
}
@media (max-width:1000px) {
.page_content 						{ padding-bottom: 0;}
}


/***** bloc_texte *****/
.bloc_texte                         { margin: 80px 0;}
.bloc_texte p                       { margin-bottom: 15px;}
.bloc_texte :last-child             { margin-bottom: 0;}
.sep                                { height: 1px; margin: 0; display: block; width: 100%; background: var(--greylight);}

@media (max-width:700px) {
.bloc_texte                         { margin: 60px 0;}
}



/***** blocquote *****/
.blocquote                          { position: relative; background: var(--main-color-light); text-align: center; font: italic 400 20px/30px var(--font-main); letter-spacing: 0.5px; padding:45px 40px; margin: 80px 0; border-radius: 10px;}
.blocquote .titre                   { position: absolute; left: 30px; top: -20px; background: var(--greydark); padding: 8px 20px; text-transform: uppercase; color: var(--white); border-radius: 5px; letter-spacing: 1px;}

@media (max-width:1000px) {
.blocquote                          { margin: 70px 0 50px;}
}
@media (max-width:700px) {
.blocquote                          { border-radius: 10px; padding: 30px 20px; font-size: 16px;}
}


/***** marque *****/
.marque                             { display: grid; grid-template-columns: 150px 1fr; gap: 60px; align-items: center;}
.marque .logo                       { width: 150px; height: 150px; border-radius: 10px; background-color: var(--main-color-light); display: grid; align-items: center; justify-content: center; padding: 20px;}
.marque .logo img                   { max-width: 100%;}

@media (max-width:1000px) {
.marque 						    { gap: 40px;}
}
@media (max-width:700px) {
.marque                             { grid-template-columns: 1fr; gap: 20px;}
.marque .logo                       { width: 100%;}
}