/***** Font - Line-height - REM (Règles)
Font-size   : 62.5% -> 12px = 1.2rem
Line-height : font-size: 16px; line-height: 1.5; = 16*1.5 = 24 pour le line-height
 *****/
html { font-size: 62.5%;}

/***** variable *****/
:root {
  --fontBody: "Barlow";
  --colorBody: #111111;
  --colorLink: #e03636;
  --colorLinkHover: #e03636;
  --colorBlue: #233b92;
  --colorRed: #e03636;
  --colorBeige: #f8f4f0;
  --colorTitle: #233b92;
  --marginBloc: 100px auto;  
  --scrollbar: #f8f4f0;   
  --scrollbarThumb: #e03636;   
}

@media (max-width:1200px) {
    :root {
          --marginBloc: 80px auto;
        }
    }

@media (max-width:1000px) {
    :root {
          --marginBloc: 60px auto;
        }
    }

@media (max-width:800px) {
        :root {
          --marginBloc: 40px auto;
        }
    }

@media (max-width:500px) {
        :root {
          --marginBloc: 30px auto;
        }
    }

/***** fonts size *****/

.font_size-80       { font-size: clamp(5rem, 4.1102rem + 3.8898vw, 8rem); }
.font_size-60       { font-size: clamp(3.5rem, 2.7585rem + 3.2415vw, 6rem); }
.font_size-50       { font-size: clamp(3rem, 2.4068rem + 2.5932vw, 5rem); }
.font_size-40       { font-size: clamp(2.2rem, 1.6661rem + 2.3339vw, 4rem); }
.font_size-35       { font-size: clamp(2rem, 1.7301rem + 1.1799vw, 3.5rem); }
.font_size-30       { font-size: clamp(1.8rem, 1.4441rem + 1.5559vw, 3rem); }
.font_size-25       { font-size: clamp(1.6rem, 1.3331rem + 1.1669vw, 2.5rem); }
.font_size-22       { font-size: clamp(1.5rem, 1.374rem + 0.5506vw, 2.2rem); }
.font_size-20       { font-size: clamp(1.5rem, 1.3517rem + 0.6483vw, 2rem); }
.font_size-18       { font-size: clamp(1.4rem, 1.2814rem + 0.5186vw, 1.8rem); }
.font_size-16       { font-size: clamp(1.4rem, 1.3407rem + 0.2593vw, 1.5rem); }
.font_size-14       { font-size: clamp(1.3rem, 1.2703rem + 0.1297vw, 1.4rem); }
.font_size-13       { font-size: clamp(1.2rem, 1.1703rem + 0.1297vw, 1.3rem); }
.font_size-12       { font-size: 12px;}
.font_size-11       { font-size: 11px;}

/***** reset *****/

body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding:0; margin:0; border:0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none;}
article, aside, dialog ,figcaption, figure, footer, header, hgroup, main, nav, section { display: block;}  
input, textarea						{ -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-appearance: none; -o-appearance: none; border-radius: 0;}
*          							  { outline: none; position: relative;}
strong, b							    { font-weight: 600;}
h1, h2, h3, h4, h5, h6    { font-weight: normal;}
ul									      { list-style-type: none;}
body								      { font-family:  var(--fontBody); line-height: 1.8; font-weight: normal; font-size: clamp(1.4rem, 1.3407rem + 0.2593vw, 1.5rem); letter-spacing: 0.8px; color: var(--colorBody); background: #ffffff; font-weight: 400;}
body.active_overflow      { height: 100vh; overflow: hidden;}
a						        			{ text-decoration: none; color: var(--colorBodyLink); }
img								      	{ border: none;}

#wrapper 							  { min-width: 320px; overflow: hidden; }
#wrapper *							{ box-sizing: border-box;}
#footer 							  {  z-index: 15;}

.bold                               { font-weight: 600;}
.regular                            { font-weight: 400;}
p.icone                             { display: flex; grid-gap: 0 15px; align-items: center;}
.mobile                             { display: none;} 

*, ::before, ::after                { box-sizing: border-box; margin: 0; padding: 0;}

.ul_list                { margin-top: 15px; margin-bottom: 20px;}
.ul_list li             { position: relative; padding-left: 20px; line-height: 25px; margin-bottom: 12px;}
.ul_list li:before      { width: 6px; height: 10px; position: absolute; left: 0; top: 6px; background: url("../images/li-bullet.svg") 0 0 / contain no-repeat; content: "";}
.ul_list li:last-child  { margin-bottom: 0;}

.link 								{ height: 60px; line-height: 60px; display: inline-block; color: #ffffff; padding: 0 30px; background: linear-gradient(to top, var(--colorRed) 0% 50%, var(--colorBlue) 50% 100%); background-size: 100% 200%; background-position: 0 100%; cursor: pointer; border-radius: 10px; font-size: 13px; font-weight: 600; text-transform: uppercase;}

@media (min-width:1201px) {
.link:hover 						{ background-position: 0 0; color: #fff;}
}

/***** scollbar *****/
::-webkit-scrollbar 				  { width: 6px; height: 6px; background-color: var(--scrollbar);}
::-webkit-scrollbar-thumb			{ background-color: var(--scrollbarThumb);}

/***** transition *****/
@media (min-width:1201px) {
.link, .slick-arrow, :before, :after, a, a span, .sub, label 	{ transition: all 300ms ease-in-out;}
}


/***** Link a *****/
.bloc_texte p a, .bloc_grid p a, .hide p a, .bloc-team .item a, .ul_list li a { color: var(--colorBlue); border-bottom: 1px solid var(--colorBlue); }

@media (min-width:1201px) {
.bloc_texte p a:hover, .bloc_grid p a:hover, .hide p a:hover, .bloc-team .item a:hover, .ul_list li a:hover 	{ color: var(--colorRed); border-color: var(--colorRed); }
}


/***** hide  *****/

.hide                      { display: none;}
.read_more,
.read_less                 { cursor: pointer; color: var(--colorLinkHover);}
.hide_readMore             { margin-top: 25px; position: relative; background: var(--colorBody); color: #ffffff; padding: 50px; border-radius: 5px;}
.hide_readMore p           { margin-top: 15px;}
.hide_readMore a           { color: #ffffff;}
.hide_readMore :last-child { margin-bottom: 0;}

/***** menu *****/

header            	{ width: 100%; position: fixed; left: 0; top: 0; z-index: 850; text-align: center; transition: all 400ms ease-in-out;}
header .wrapper  	  { width: 90vw; max-width: 1600px; margin: 0 auto;}

header .logo                { position: absolute; left: 50%; transform: translateX(-50%);  z-index: 200;}
header .logo img            { width: 221px; height: auto; top: -30px; transition: all 400ms ease-in-out;}
header .logo.sticky img     { width: 221px; height: auto; opacity: 0; top: 10px;}

header .header_nav .menu                           { margin-top: 50px; transition: all 400ms ease-in-out; } 
header .header_nav .menu:before                    { content: ''; left:-50vw; width: 200vw; height: 100%; position: absolute; top: 0; z-index: -1; background: #ffffff00;} 
body#page header .header_nav .menu:before          { content: ''; left:-50vw; width: 200vw; height: 100%; position: absolute; top: 0; z-index: -1; background: #ffffff;}         
header .header_nav .menu>li                        { display: inline-block; margin-right: 50px; text-transform: uppercase; letter-spacing: 1.5px;  height: 70px; line-height: 70px;}
header .header_nav .menu>li:nth-child(3)           { margin-right: calc(50px + 221px);}
header .header_nav .menu>li:nth-child(4)           { margin-left: 25px;}
header .header_nav .menu>li:last-child             { margin-right: 0;}
header .header_nav .menu>li a                      { color: var(--colorBlue); font-weight: 600;}
header .header_nav .menu>li.active>a               { color: var(--colorRed);}

#index header .header_nav .menu>li>a               { color: #ffffff;}

header .header_nav .menu .sub                      { position: absolute; top: 0; left: 50px; transform: translateX(-50%);  display: block; visibility: hidden; overflow: hidden; opacity: 0; }

header .mobile { display: none;}

/***** sticky *****/
 body.sticky header .header_nav .menu                         { margin-top: 0;} 
 body.sticky header .header_nav .menu:before                  { background: #ffffff;}
 body.sticky header .logo img                                 { opacity: 0;}
 body.sticky header .logo.sticky img                          { opacity: 1;}
 body#index.sticky header .header_nav .menu li a              { color: var(--colorBlue);}
 body#index.sticky header .header_nav .menu li.active>a       { color: var(--colorRed);}

@media (min-width:1201px) {

    header .header_nav .menu li:hover a           { color: var(--colorLinkHover);}    
    header .header_nav .menu>li:hover .sub        { opacity: 1; visibility: visible; z-index: 999;}

    header .header_nav .menu .sub                 { width: max-content; text-align: left; position: absolute; top: 50px; display: block; background: #ffffff; padding: 20px; border-radius: 5px; opacity: 0; visibility: hidden; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2); }
    header .header_nav .menu .sub li              { display: block; margin-right: 0;}
    header .header_nav .menu .sub li a            { padding: 8px 40px 8px 0; background: url("../images/li-bullet.svg") 95% 46% no-repeat; text-transform: initial; display: block; line-height: 20px; color: var(--colorBody);}
    header .header_nav .menu .sub li a:hover      { color: var(--colorLinkHover); background: url("../images/li-bullet.svg") 100% 46% no-repeat;}
    header .header_nav .menu .sub li.active a     { color: var(--colorLinkHover);}
    
}

@media (max-width:1200px) {

header                          { height: 70px; background: #ffffff;}
header .header_nav-top          { display: none; } 

header .logo                    { left: 0; transform: inherit; height: 70px;}
header .logo img                { opacity: 0; height: 0;}
header .logo.sticky img         { opacity: 1;}

.menu_mobile						        { width:60px; height:60px; display:inline-block; vertical-align:middle; cursor:pointer; position:relative; z-index:60; transition:height 400ms ease-in-out;  position: absolute; right: 0; top: 5px;}
.menu_mobile div					      { width:40px; height:2px; background:#233b92; position:absolute; right:50%; top:50%; margin:-1px -20px 0 0;}
.menu_mobile div:before				  { width:100%; height:2px; background:#233b92; position:absolute; right:0; top:9px; content:"";}
.menu_mobile div:after				  { width:100%; height:2px; background:#233b92; position:absolute; right:0; top:-9px; content:"";}
.menu_mobile.active div				  { height:0;}
.menu_mobile.active div:before  { top:0; transform:rotate(45deg);  width: 100%; }
.menu_mobile.active div:after		{ top:0; transform:rotate(-45deg); }
header .header_nav 	  				  { width:100%; height:100vh; background:var(--colorBeige); position:fixed; right:0; top:0; left: -120%; overflow-y:scroll; display: flex; flex-direction: column; padding: 140px 0 0; z-index:50; transition:left 400ms ease-in-out 400ms; border-top: 70px solid #ffffff;}
header .header_nav::-webkit-scrollbar		{ display:none;}

header .header_nav .menu  					{ width:100%; max-width: 450px; margin: 0 auto; width: 90vw; text-align:left; padding:0; transition:opacity 400ms ease-in-out 0ms; opacity:0;}
header .header_nav .menu li 				{ width:100%; display:block; margin:0; background: none; padding: 0; height: 50px;}
header .header_nav .menu>li>a				{ line-height:50px; height:auto;}
header .header_nav .menu li i.active:after	{ opacity:1;}
header .header_nav .menu li i				        { width: 50px; background-color: #ffffff; height: 41px; display: block; margin-top: -60px; position: absolute; right: 0; z-index: 5; border-radius: 5px;}
header .header_nav .menu li i::after        { content: ""; display: block; position: absolute;  transform-origin: center; transition: all ease 400ms; width: 100%; height: 100%; background: url(../images/arrow_select.svg) no-repeat center;}
header .header_nav .menu li a	              { background: none;}
header .header_nav .menu li i.active::after { transform: rotate(180deg);}
#index header .header_nav .menu>li>a        { color: var(--colorBlue);}
#index header .header_nav .menu>li.active>a,
header .header_nav .menu li.active>a        { color: var(--colorRed);}
header .header_nav .menu li.eshop           { color: #ffffff; background: #bfa477;}
header .header_nav .menu li.eshop a         { color: #ffffff;}
header .header_nav .menu li.eshop:before    { top: 15px; background: url(../images/icone-shop-header-white.svg) left center no-repeat;}

.link-phone.mobile        { cursor: pointer; transition: all 300ms ease-in-out; width: 40px; height: 40px; display: inline-block; background: url(../images/icone-phone-header.svg) center center no-repeat; top: 15px; right: 20px; }

header .header_nav .menu>li:nth-child(4) { margin-left: inherit;}

body#page header .header_nav .menu:before { content: none;}
body.sticky header .header_nav .menu:before { content: none;}

/* sous-menu simple */
header .header_nav .menu .sub 				  { width: 100%; position: relative; left: auto; top: auto; margin: 0; opacity: 1; display: block; visibility: visible; z-index: 150; transform: inherit; background: #ffffff; padding: 10px 20px; border-radius: 5px;}
header .header_nav .menu .sub li  			{ width: 100%; height: 40px; line-height: 40px; text-transform: none;}


header .header_nav .mobile                 { display: block; opacity:0;}
header .header_nav ul.mobile               { max-width: 450px; margin: 0 auto; width: 90vw; text-align:left;} 
header .header_nav ul.mobile li            { display: block; margin: 10px 0;}

header .header_nav.active					    { left:0; }
header .header_nav.active .link		    { opacity:1; transition-delay:1200ms;}
header .header_nav.active .menu_top		{ opacity:1; transition-delay:1000ms; background: none;}
header .header_nav.active .menu			  { opacity:1; transition-delay:800ms;}
header .header_nav.active .mobile     { opacity:1; transition-delay:800ms;}

header .mobile              { display: flex; position: absolute; right: 70px; top: 10px; gap: 5px;}
header .mobile a            { display: block; width: 50px; height: 50px; border-radius: 50%;  background-color: var(--colorRed);}

.header .mobile a.estimation:after { width: 18px; height: 100%; position: absolute; left: 16px; top: 0; background: url(../images/icone-calculatrice-white.svg) 50% / contain no-repeat; content: ""; }
.header .mobile a.gsm:after { width: 18px; height: 100%; position: absolute; left: 16px; top: 0; background: url(../images/icone-telephone-white.svg) 50% / contain no-repeat; content: ""; }

}

@media (max-width:800px) {
header .logo.sticky img { height: 30px; width: auto; top: 20px;}  
}

@media (max-width:600px) {
    body header,
    body.sticky header                  { background: #ffffff;  padding-bottom: 0; height: 60px;}
    header .logo.sticky img             { top: 15px;}  
    .menu_mobile 					              { top: 0; }
    .menu_mobile div					          { background:#233b92; }
    .menu_mobile div:before				      { background:#233b92; }
    .menu_mobile div:after				      { background:#233b92; }
    .menu_mobile                        { margin-top: 0;}
    header .logo                        { width: 120px;}
    header .header_nav                  { border-top: 60px solid #ffffff; padding-top: 40px;}
    header .mobile                      { right: 60px;}
    header .mobile a                    { width: 40px; height: 40px;}
    .header .mobile a.estimation:after  { left: 11px;}
    .header .mobile a.gsm:after         { left: 10px;}
}

/***** bloc cta *****/
.bloc-cta         { width: 90vw; max-width: 1200px; margin: 50px auto; background: var(--colorBeige); border-radius: 10px; padding: 40px; color: var(--colorBlue); text-align: center; font-weight: 500;}
.bloc-cta a       { color: var(--colorRed);}

@media (max-width:800px) {
.bloc-cta         { padding: 20px;}  
}

/***** bloc faq *****/
.bloc-faq         { background: var(--colorBeige); border-radius:0; padding-top: 80px; padding-bottom: 100px; width: 100vw; }
.bloc-faq:before  { content: ''; position: absolute; background: url(../images/logo-forme-footer.svg) 0 0 no-repeat; width: 638px; height: 310px; top: -295px; right: 5vw; z-index: -1;}

@media (max-width:800px) {
.bloc-faq:before { content: none;}  
.bloc-faq { padding-top: 40px; padding-bottom: 40px;}
}

/***** show hide *****/
.show_hide                      { width: 90vw; max-width: 1200px; margin: 0 auto; }
.show_hide.no_marge             { margin: 0;}
.show_hide h3                   { color: var(--colorBlue); font-weight: 500; margin-bottom: 30px;}
.show_hide h3 i                 { color: var(--colorRed); font-size: 13px; font-style: normal; display: block; margin-bottom: -10px; font-weight: 700;}
.show_hide .item                { border: none; overflow: hidden; border-radius: 10px; background: #ffffff; margin-bottom: 10px; padding:20px 30px;}
.show_hide .titre               { cursor: pointer; margin: 0; font-weight: 500; transition: all 300ms ease-in-out; color: var(--colorBlue); padding-right: 40px;}
.show_hide .hide                { margin: 0; padding: 30px 0 20px 0; background: #fff; display: none;}
.show_hide .hide :last-child    { margin-bottom: 0;}






/* custom titre plus */
.show_hide .titre_plus:after          		{ width: 20px; height: 2px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: var(--colorRed); content: "";}
.show_hide .titre_plus:before          		{ width: 2px; height: 20px; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); background: var(--colorRed); content: "";}
.show_hide .titre_plus.active:before   		{ opacity: 0;}

/***** footer *****/
footer                { background: #0c1943; color: #ffffff; }
.footer               { width: 90vw; max-width: 1200px; margin: 0 auto; padding: 100px 0 0 0;}

.footer .rs               { position: absolute; top: 100px; right: 0; display: flex;}
.footer .rs a             { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 50%; margin-right: 10px;}
.footer .rs a:last-child  { background: none; margin-right: 0;} 

.footer .bloc_grid                    { display: grid; grid-template-columns: 40% auto; grid-gap: 0 80px; margin: 10px 0 60px 0; align-items: start;}
.footer .bloc_grid p						      { margin: 15px 0 0 0;}
.footer .bloc_grid p a					      { color: #fff; display: inline-block; border-bottom: transparent;}
.footer .bloc_grid .icon 					    { padding-left: 30px; position: relative;}
.footer .bloc_grid .icon:after 			  { width: 18px; height: 100%; position: absolute; left: 0; top: 0; content: "";}
.footer .bloc_grid .address:after 		{ background: url(../images/icone-map.svg) 0 50% no-repeat;}
.footer .bloc_grid .tel a:after 			{ background: url(../images/icone-telephone.svg) 0 50% no-repeat;}
.footer .bloc_grid .email a:after 		{ background: url(../images/icone-mail.svg) 0 50% no-repeat;}

.footer .bloc_grid ul                { max-width: 340px;}
.footer .bloc_grid ul li             { position: relative; padding-left: 20px; line-height: 25px; margin-bottom: 12px;}
.footer .bloc_grid ul li:before      { width: 6px; height: 10px; position: absolute; left: 0; top: 8px; background: url("../images/li-bullet.svg") 0 0 / contain no-repeat; content: "";}
.footer .bloc_grid ul li:last-child  { margin-bottom: 0;}

.footer_bottom                      { font-size: 10px; margin: 0 auto; width: 100%; max-width: 1200px; }
.footer_bottom li 						      { display: inline-block; line-height: 60px;margin-right: 25px; letter-spacing: 0.8px;}
.footer_bottom li a 					      { color: #ffffff;}
.footer_bottom li:after					    { width: 1px; height: 8px; content: ""; position: absolute; right: -13px; top: 26px; background: #ffffff;}
.footer_bottom li:last-child:after  { display: none;}

.toponweb         { display: block; z-index: 85; position: absolute; right: 0; bottom: 0; transition: bottom 300ms ease-in-out;}
.toponweb span    { width: auto; height: 60px; display: block; padding: 20px; }
.toponweb img     { width: 76px; height: auto; display: block; margin: 0 auto; filter: invert(1); transition: all 300ms ease-in-out;}

@media (max-width:1000px) {
.footer .bloc_grid                         { grid-template-columns: 1fr 1fr;} 
}

@media (max-width:800px) {
.footer                                 { padding: 40px 0 0 0;}  
.footer .rs                             { top: 40px;}
.footer .bloc_grid                      { grid-template-columns: 1fr;}
.footer .bloc_grid .item:nth-child(2)   { display: none;}
.footer_bottom li                       { display: block; line-height: 20px;}
.footer_bottom li:after	                { content: none;}  
}

@media (max-width:600px) {
.footer>div img { max-width: 150px; height: auto;}  
.footer .bloc_grid { margin-top: 40px;}  
}