/* FONTS
========================================================================== */

@font-face {font-family:'robotomedium';src: url('../fonts/roboto-medium-webfont.woff2') format('woff2'),url('../fonts/roboto-medium-webfont.woff') format('woff');font-weight:normal;font-style:normal}
@font-face {font-family:'robotoregular';src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),url('../fonts/roboto-regular-webfont.woff') format('woff');font-weight:normal;font-style:normal}
@font-face {font-family:'robotothin';src: url('../fonts/roboto-thin-webfont.woff2') format('woff2'),url('../fonts/roboto-thin-webfont.woff') format('woff');font-weight:normal;font-style:normal}
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/roboto-v51-latin-800.woff2') format('woff2'), 
       url('../fonts/roboto-v51-latin-800.ttf') format('truetype'); 
}


/* WARNING 
========================================================================== */
.browsehappy{margin:0.2em 0;background:#ccc;color:#1a1a1a;padding:0.2em 0}
.browsehappy a{text-decoration:underline;cursor:pointer;color:#db0525}


/* BASE
========================================================================== */
html,body{font-size:62.5%;height:100%;background:#fff}
body{font-size:1.6rem;color:#111;font-family:'robotoregular', sans-serif}
a{text-decoration:none;cursor:pointer;color:inherit}
a:hover,a:active,a:focus{outline:0;outline:none;text-decoration:none}
::selection{background:rgb(34,34,34);color:#fff;text-shadow:none}
::-moz-selection{background:rgb(34,34,34);color:#fff;text-shadow:none}
a[href^=tel],a[href^=sms]{color:inherit;cursor:default;text-decoration:none}
img[data-sizes="auto"]{display:block;width:100%;height:auto}
.lazyload{opacity:0}
.lazyloading{opacity:1;transition:opacity 0.3s}
img.lazyload:not([src]){visibility:hidden}
img{text-align:center;font-family:'robotoregular';font-size:1.3rem;line-height:15px}
hr{display:block;width:100%;height:1px;background:#fff;border:none;border-top:3px dotted #bbb;margin:15px 0}
strong{font-weight:normal;font-family:'robotomedium'}
.ripple{background-position:center center;background-repeat:no-repeat;background-image:url('../img/svg/ripple.svg');background-size:40px 40px}


main{padding:8px 0}
.wrapper{display:block;width:100%;max-width:1420px;margin:0 auto;overflow:hidden}
.wrapperBox{display:block;width:100%;max-width:1410px;padding:0 8px 0 8px;margin:0 auto;overflow:hidden}

/* HEADER 
========================================================================== */
.wrapperHeader{padding:10px}
.langlist{display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end}
.langlist li.logo{flex:1 0 auto;padding:0 8px}
.langlist li.logo img{display:block;height:60px;width:auto}
.langlist li.lang{flex:0 0 auto;padding:8px 0;color:#999}
.langlist li.lang:last-child;{padding-right:0}
.langlist li.lang a{display:inline-block;font-family:'robotomedium', sans-serif;text-transform:uppercase}
.langlist li.lang a:hover,.langlist li a.active{color:#222}




/* MAIN 
========================================================================== */
h1{display:block;padding:20px 0 0 0;text-align:center;font-size:calc(3rem + 3vw);line-height:1.25em;font-family:'robotothin', sans-serif;color:#b30b00;}
p.centrage{display:block;padding:10px 0 20px 0;line-height:1.125em;text-align:center}
p.centrage.ruru{font-size:1.7rem;line-height:1.125em;}
h2{display:block;padding:30px;text-transform:uppercase;text-align:center;font-size:calc(1.5rem + 2vw);line-height:1.25em;font-family:'robotomedium', sans-serif;color:#111}
h2.sansCap{text-transform:none;font-family:'robotoregular';}
h2 strong{font-weight:normal;color:#b30b00}
h3{display:block;padding:0 30px 0 30px;text-align:center;font-size:2.2rem;line-height:1.25em;text-transform:uppercase;font-family:'robotomedium', sans-serif;color:#111}
h3.h3simple{text-transform:none;font-family:'robotoregular';padding-bottom:20px}
h4{display:block;padding:0 30px 0 30px;text-align:center;font-size:2rem;line-height:1.1em;font-family:'robotomedium', sans-serif;color:#111}
.box{display:flex;flex-flow:row wrap;align-items:center;justify-content:center;}
.box > li{position:relative;flex:0 0 25%;height:200px;border:solid 8px #fff;padding:20px 10px;text-align:center;background:#ffaf14;color:#b30b00;font-size:1.8rem;font-family:'robotomedium', sans-serif;}
.box li.maxi{flex:1 1 75%;}
.box li.h300{height:250px;}
.box li.inred{background:#b30b00;color:#ffaf14;}
.box li h3{display:block;padding-bottom:10px;text-transform:uppercase;letter-spacing:0.15em;color:#b30b00}
.box li.inred h3{color:#ffaf14}
.box li.high{line-height:1.8}
.box li span{display:block;font-size:3.0rem;letter-spacing:0.15em}
.box li div{position:absolute;width:100%;padding:10px;top:50%;left:50%;transform:translate(-50%, -50%);}
.box li div.lastdiv{text-align:left;width:calc(100% - 60px);padding:20px 30px}
.box li div.lastdiv h3{display:block;padding:0 0 10px 0;margin-left:-16px; text-transform:uppercase;letter-spacing:0.15em;}
.box li i{display:block;font-style:normal;padding-top:10px;font-size:1.4rem}
.lili{list-style-position:outside;list-style-type:disc}
.lili li{padding:0 0 10px 0}
.lili li:last-child{padding:0}
p.maintxt{display:block;text-align:center;padding:80px 40px;color:#101010;font-size:2.0rem;line-height:1.2em}
p.maintxtBas{display:block;text-align:center;padding:20px 40px 80px 40px;color:#101010;font-size:2.0rem;line-height:1.2em}

.grilleFull{padding:16px}
.grilleAffiche{padding:16px;max-width:800px;margin:0 auto}
.grille{display:flex;flex-flow:row nowrap;justify-content:center}
	.pay2x,.porIn{flex:0 0 50%;padding:16px}
	.pay3x,.por3x{flex:0 0 33.333333%;padding:16px}
	.payPor2x{flex:0 0 50%;padding:0}
	.pay2xHover{flex:0 0 50%;padding:16px;position:relative;overflow:hidden}
	.pay2xHover img,.por2Pay2 img{position:absolute;top:0;left:0;height:100%;border:16px solid #fff}
	.por2Pay2{flex:0 0 33.333333%;padding:16px;position:relative;overflow:hidden}
	.por2Pay2In{flex:0 0 33.333333%;padding:0}
.grilleIn{display:flex;flex-flow:row wrap;justify-content:center}
		.pay2In{flex:0 0 100%;padding:16px}
.brokers{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}
.brokers li{flex:0 0 280px;padding:16px}
.brokers li img{display:block;width:100%;max-width:250px;margin:0 auto}
.brokers li img.rectifi{max-width:180px;}
.legalfooter{color:#a0a0a0;text-align:center;width:100%;max-width:690px;margin:0 auto;padding:60px 20px;font-size:1.5rem;line-height:19px}
.legalfooter a{text-decoration:none}
.legalfooter a:hover{color:#000}
.picto{display:inline-block;width:16px;margin-bottom:2px;vertical-align:center}
h2 a{text-decoration:underline}
h2.sansmaj{text-transform:initial}

.pay2xHover.onvideo{background:#fff;padding:0}
.titrevideo{position:absolute;top:16px;left:16px;display:block;width:calc(100% - 32px);text-align:center;padding:0 0 16px 0;font-size:3.2rem;color:#b30b00;text-transform:uppercase;font-family:'robotomedium';}
video{position:relative;display:block;width:100%;height:100%;object-fit:cover}

.contCta{color:#b30b00}

.newtext{padding:16px 16px 32px 16px;line-height:1.35em}
.newtext h3{display:block;padding-bottom:10px;font-size:2.8rem;line-height:1;text-transform:uppercase;letter-spacing:0.15em;color:#b30b00}
.newtext p{display:block;font-size:1.8rem;text-align:center;padding-bottom:32px}
	ul.listeProperty{display:flex;flex-flow:row wrap;gap:0 16px;width:100%;max-width:300px;margin:0 auto;justify-content:center;align-items:center}
	ul.listeProperty li{flex:0 1 calc(50% - 16px);font-size:1.8rem;font-family:'robotomedium'}
	ul.listeProperty li:nth-child(odd){text-align:right}
	ul.listeProperty li.sgrey{color:#aaa999}
	ul.listeProperty li.sbold{font-size:2rem;line-height:1.1em;font-family: 'Roboto';font-weight:800;color:#111}

.return{position:fixed;width:60px;right:10px;bottom:10px}
.return a{display:block}
.return img{display:block;width:60px;height:auto}

.signa{padding:16px 0}
.signa img{display:block;width:100%;max-width:380px}

/* MEDIA QUERIES
========================================================================== */
/* min 1600px */
@media screen and (min-width:100em){
h1{font-size:8.0rem}
h2{font-size:4.2rem}
}

/* max 960px */
@media screen and (max-width:60em){
.box > li{flex:0 0 50%;height:200px;padding:20px 10px}
.box li.maxi{flex:1 1 50%;}
.box li.h300{height:280px;}
.box li div.lastdiv{width:calc(100% - 40px);padding:20px}
.por2Pay2In,.pay2xHover{flex:0 0 100%}
.grille{flex-flow:row wrap}
.pay3x{flex:0 0 50%;padding:16px}
.pay3x.lastPay3x,.payPor2x{flex:1 0 100%}
.pay2xHover img,.por2Pay2 img{position:relative;border:none}
.por2Pay2{flex:0 0 50%;padding:16px;position:relative;overflow:hidden}
.grilleIn{flex-flow:row nowrap}
.pay2In{flex:0 0 50%;padding:16px}
.brokers li{flex:0 0 50%;padding:16px 32px}
.sansbr br{display:none}
}

@media screen and (max-width:37em){
p.introp{padding:0 30px 20px 30px;font-size:1.5rem;line-height:1.133em;text-align:center}
.box{display:block;flex-flow:none;align-items:center;justify-content:center;}
.box > li{position:relative;flex:none;height:auto;border:solid 5px #fff;padding:20px;}
.box li.maxi{flex:none}
.box li.h300{height:auto}
.box li.high{line-height:inherit;}
.box li div{position:relative;padding:10px;top:initial;left:initial;transform:none;}
.box li div.lastdiv{text-align:left;width:initial;padding:10px}
.por3x.deusPor3x{padding:8px 0}
.grilleFull,.pay2xHover{padding:8px}
.pay3x,.pay2x,.pay2In{flex:0 0 100%;padding:8px}
.payPor2x{flex:0 0 100%;padding:0}
.porIn{flex:0 0 50%;padding:8px}
.por2Pay2.lastPor2Pay2,.por3x.lastPor3x{padding:8px 8px 8px 0}
.grilleIn{display:flex;flex-flow:row wrap;justify-content:center}
.pro3x{flex-flow:row nowrap}
.por3x{flex:1 1 auto}
.por3x.primPor3x,.por2Pay2{padding:8px 0 8px 8px}
p.maintxt,p.maintxtBas{display:block;text-align:center;padding:60px 40px;color:#101010;font-size:1.8rem;line-height:1.2em}
.brokers li{flex:0 0 100%;padding:16px}
video{border:8px solid #fff}
.signa{padding:0}
.signa img{max-width:280px;margin:0 auto}
}