@charset "UTF-8";
/* CSS Document */


/*///////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                             //
//  PAGE PRODUIT                                                                               //
//                                                                                             //
///////////////////////////////////////////////////////////////////////////////////////////////*/

/*-------------------------------------------------------------------------------+
+ Introduction au produit                                                        +
+-------------------------------------------------------------------------------*/

#chapo {
	background-color: #fff;
	background-position:center top;
}

#chapo h4.genTitle {
	color:#2c2c2c;
}

.variante #chapo h4.genTitle {
	border-left: 1px solid #54565b;
	color:#54565b;
	text-shadow: 0px 0px 0px transparent;
}

#chapo .bt-noir{
	background-color:#000;
}

#chapo #intro-produit p, #chapo #intro-produit .bouton_nw {
	position: absolute;
}

#chapo #intro-produit p, #chapo #intro-produit p a {
    color: #000;
}
	
#chapo #intro-produit p {
    font-size: 1.5em;
    text-shadow: 0px 1px 1px #fff;
}

.bouton_nw.bt-blanc {
    background-color: #fff;
    color: #343333;
}

.variante .carrousel-exemples-GMP {
	display:none;
}

.variante .avantages-produit h1 span {
    display: inline;
}

.variante .avantages-produit .liste-avantages .avantage .titre .picto {
    left: -45px;
}

.variante .avantages-produit h1:after {
    content: "▼";
    display: block;
    color: #8bbc06;
    margin: 5px auto 45px auto;
    background:transparent;
}

.variante .demande ul li:first-child:after {
	content : ""
}

#chapo #intro-produit .bouton_nw {
    background:#434748;
}

@media screen and (max-width: 767px) { /* Mobile */

	#chapo {
		background-image: url(../img/visuels/produits/assurances/assurance-securite/vsl-chapo-M.png);
		padding-top: 0;
	}
	
	.variante #chapo {
		background:#8bbc06;
	}

	#chapo #intro-produit .conteneur {
   	 	height: 275px;
	}
	
	.variante #chapo #intro-produit .conteneur {
   	 	height: 435px;
	}
	
	.connecte #chapo #intro-produit .conteneur {
   	 	height: 250px;
	}
	
	#chapo #intro-produit p {
		top: 230px;
    	left: 20px;
	}
		
	#chapo .debord {
		display: none;
	}	
	
	#chapo #intro-produit a#garanties {
		display: block;
	    text-indent: -5000px;
	    top: 214px;
	    left: 50%;
	    margin-left: -80px;
	    width: 156px;
	    height: 47px;
	    position: relative;
	}
	
	.connecte #chapo #intro-produit a#garanties {
		display: block;
	    text-indent: -5000px;
	    top: 189px;
    	left: 50%;
    	margin-left: -80px;
   		width: 156px;
   		height: 47px;
	    position: relative;
	}
	
	#chapo #intro-produit p {
		top: 35px;
    	left: 50%;
    	margin-left: -122px;
    	font-size: 0.7em;
	}
	
	.bouton_nw.bt-M .bt .picto + .libelle {
	    padding-left: 2px;
	}
	
	.bouton_nw.bt-M .bt {
	    padding: 11px 11px 12px 10px;
	}
	
	.variante #chapo #intro-produit h1 {
		text-indent:0!important;
		font-size:2em;
		position:relative;
		font-weight:normal;
		text-align:center;
		margin:30px 0 0;
		color:#fff;
	}
	
	.variante #chapo #intro-produit h2 {
		text-indent:0!important;
		font-size:1.6em;
		position:relative;
		font-weight:normal;
		text-align:center;
		margin-top:5px;
		color:#fff;
	}
	
	.variante .carrousel .exemple {
		text-align:center;
		margin-top:20px
	}
	
	.variante .carrousel .exemple img {
		display:inline;
	}
	
	.variante .carrousel-exemples-GMP {
		display:block;
	}
	
	.variante .miseEnAvant {
	    display: block;
	    width: 320px;
	    height: 211px;
	    background: url(../img/visuels/produits/assurances/assurance-securite/variante/demande-M.png);
	    position: absolute;
	    top: 200px;
	    left: 50%;
	    margin-left: -160px;
	    background-size: 100% 100%;
	}
	
	.cas-3-etapes-titre  {
		display:none;
	}
	
}

@media screen and (min-width: 768px) { /* Tablette + Bureau */

	#chapo .debord {
		margin: -20px 0 0 0;
	}
	
	.cas-3-etapes-titre li {
		width:33%;
		text-align:center;
		font-size:1.2em;
	}
	
	.cas-3-etapes-titre li p {
		text-align:center;
	}
	
	.cas-3-etapes-titre li:first-child {
		width:66%;
	}
	
	.variante .demande ul li .picto {
	    font-size: 4.5em;
	}

}

@media screen and (min-width: 768px) and (max-width: 1220px) { /* Tablette */

	#chapo #intro-produit .conteneur {
	    height: 300px;
	}
	
	.connecte #chapo #intro-produit .conteneur {
	    height: 270px;
	}
	
	#chapo {
		background-image: url(../img/visuels/produits/assurances/assurance-securite/vsl-chapo-T.png);
		background-position: center top;
 	}
 	
	.variante #chapo {
		background-image: url(../img/visuels/produits/assurances/assurance-securite/variante/vsl-chapo-T.png);
		background-position: center top;
	}
	
	.variante #chapo h4.genTitle {
		border-left: 1px solid #fff;
		color:#fff;
		text-shadow: 0px 0px 5px #666;
	}

	#chapo #intro-produit .bouton_nw {
	    top: 260px;
	    left: 50%;
	    margin-left: -320px;
	}

	#chapo #intro-produit p {
		top: 325px;
		left: 50%;
    	margin-left: -320px;
    	width: calc(100% - 355px);
	}
			
	#chapo #intro-produit p a {
		display: inline-block;
	}	
	
	#chapo #intro-produit a#garanties {
		display: block;
	    text-indent: -5000px;
	    top: 198px;
	    left: 50%;
	    margin-left: 107px;
	    width: 168px;
	    height: 50px;
	    position: relative;
	}
	
	.connecte #chapo #intro-produit a#garanties {
		display: block;
	    text-indent: -5000px;
	    top: 168px;
	    left: 50%;
	    margin-left: 106px;
	    width: 168px;
	    height: 50px;
	    position: relative;
	}
	
	#chapo #intro-produit a#garanties {
		display: block;
	    text-indent: -5000px;
	    top: 198px;
	    left: 50%;
	    margin-left: 107px;
	    width: 168px;
	    height: 50px;
	    position: relative;
	}
	
	#chapo #intro-produit p {
		top: 175px;
    	left: 50%;
   	 	margin-left: -299px;
    	font-size: 1.16em;
	}
	
	.bouton_nw.bt-M {
    	font-size: 1.35em;
	}
	
	.demande ul.cas-3-etapes li{
		width:calc((100% /3) - 41px);
	}
	
	.variante .miseEnAvant {
		display:block;
		width:213px;
		height:298px;
		background:url(../img/visuels/produits/assurances/assurance-securite/variante/demande.png);
		position:absolute;
		top:0;
		left:50%;
		margin-left:-300px;
		background-size:100% 100%;
	}
	
}

@media screen and (min-width: 1221px) { /* Bureau */

	#chapo {
		background-image: url(../img/visuels/produits/assurances/assurance-securite/vsl-chapo-D.png);
		background-position: center top;
	}
	
	.variante #chapo {
		background-image: url(../img/visuels/produits/assurances/assurance-securite/variante/vsl-chapo-D.png);
		background-position: center top;
	}

	#chapo #intro-produit .conteneur {
	    height: 275px;
	}
	
	.variante #chapo #intro-produit .conteneur {
	    height: 300px;
	}
	
	.connecte #chapo #intro-produit .conteneur {
	    height: 245px;
	}
	
	.variante .connecte #chapo #intro-produit .conteneur {
	    height: 270px;
	}
	
	#chapo #intro-produit a#garanties {
		display: block;
	    text-indent: -5000px;
	    top: 169px;
	    left: 50%;
	    margin-left: 282px;
	    width: 225px;
	    height: 59px;
	    position: relative;
	}
	
	.connecte #chapo #intro-produit a#garanties {
		display: block;
	    text-indent: -5000px;
	    top: 138px;
	    left: 50%;
	    margin-left: 281px;
	    width: 225px;
	    height: 59px;
	    position: relative;
	}
	
	#chapo #intro-produit p {
		top: 170px;
	    left: 50%;
	    margin-left: -492px;
	}
	
	.bouton_nw.bt-M {
    	font-size: 1.9em;
	}
	
	.variante .miseEnAvant {
		display:block;
		width:266px;
		height:372px;
		background:url(../img/visuels/produits/assurances/assurance-securite/variante/demande.png);
		position:absolute;
		top:-50px;
		right:0;
	}
	
	
	.variante .avantages-produit .liste-avantages .avantage .titre h2 {
	    font-size: 2.0em;
	    margin-left:35px;
	}
	
}

/* Ancre garantie nomade (2) **********************************************/

#chapo #intro-produit p, #chapo #intro-produit .bouton_nw {
	position: absolute;
}

.connecte #chapo #intro-produit #ancre-2.bouton_nw{
	color:#434748;
    text-decoration: underline;
}

@media screen and (max-width: 767px) { /* Mobile */

	#chapo #intro-produit #ancre-2.bouton_nw {
	    top: 242px;
	    padding: 13px 0;
	    left: 40%;
	    margin-left: -80px;
	    width: 227px;
    	background-color: transparent;
    	font-size: 1em;
	}
	
	.connecte #chapo #intro-produit #ancre-2.bouton_nw {
	    top: 218px;
	}
	
	
}

@media screen and (min-width: 768px) and (max-width: 1220px) { /* Tablette */
	
	#chapo #intro-produit #ancre-2.bouton_nw {
	    top: 243px;
    	padding: 9px 0;
    	left: 50%;
    	margin-left: 56px;
    	width: 229px;
    	background-color: transparent;
    	font-size: 1em;
	}
	
	.connecte #chapo #intro-produit #ancre-2.bouton_nw{
		top: 213px;
	}
}

@media screen and (min-width: 1221px) { /* Bureau */

	#chapo #intro-produit #ancre-2.bouton_nw {
		top: 202px;
	    padding: 19px 0;
	    left: 66%;
	    margin-left: 127px;
	    width: 304px;
	    background-color: transparent;
	    font-size: 1.1em;
	}
	
	.connecte #chapo #intro-produit #ancre-2.bouton_nw{
		top: 174px;
	}
}
/*-------------------------------------------------------------------------------+
+ Avantages produit                                                              +
+-------------------------------------------------------------------------------*/

.variante .liste-avantages .avantage {
    width: calc(100%);
    padding: 0px 0px 0px 30px;
    margin:20px 0;
    border-bottom:1px solid #e7e7e7
}

.variante .liste-avantages .avantage:last-child  {
	border-bottom:0;	
}

.variante .liste-avantages {
	clear:both;
	overflow:hidden;
}






.avantages-produit .mentions {
	text-align: left;
	font-size: 1.2em;
}

@media screen and (max-width: 767px) { /* Mobile */

	.avantages-produit h1 {
		padding: 40px 0 10px;
	}
	
	.variante .liste-avantages .avantage {
	    width: auto;
	    padding: 0px 10px 0px 10px;
	    margin:20px 0;
	    border-bottom:1px solid #e7e7e7
	}
	


}

@media screen and (min-width: 768px) and (max-width: 1220px) { /* Tablette */

	.variante .liste-avantages .avantage {
	    padding: 0px 0px 0px 0px;
	    font-size:0.9em;
	}
	
.variante .liste-avantages .avantage .titre{
	width:31%;
	float:left;
	margin-right:2%;
} 

.variante .liste-avantages .avantage .solution {
	width:66%;
	float:left;
	margin-right:0%;
} 

.variante .liste-avantages .avantage p.desc,
.variante .liste-avantages .avantage p.sol {
		float:left;
		width:48%;
		margin-right:2%;
}


}



 
@media screen and (min-width: 1221px) { /* Bureau */

	.avantages-produit h1 {
		font-size: 3em;
	}

	.avantages-produit .intro {
		padding: 0 70px;
	}
	
	.avantages-produit .mentions {
		padding: 0 0px 30px 0px;
	}
	
	.variante .avantages-produit .conteneur {
    	margin: 20px auto -40px auto;
	}
	
.variante .liste-avantages .avantage .titre{
	width:31%;
	float:left;
	margin-right:2%;
} 

.variante .liste-avantages .avantage .solution {
	width:66%;
	float:left;
	margin-right:0%;
} 
.variante .liste-avantages .avantage p.desc,
.variante .liste-avantages .avantage p.sol {
		float:left;
		width:48%;
		margin-right:2%;
}

}


/* Adhésion assurance **********************************************/
.adhesion-assurance .solo {
  background-color: #8bbc06;
  color: #fff;
}

.adhesion-assurance .description {
  background-color: #fff;
}

.adhesion-assurance .solo h3 {
  border-bottom: 1px solid #fff;
}

.adhesion-assurance .solo {
  text-align: center;
}

.adhesion-assurance .solo p strong {
  display: block;
}


@media screen and (min-width: 768px) { /* Tablette + Bureau */

  .adhesion-assurance {
    position: relative;
    width: 740px;
    margin: 30px auto 50px auto;
    overflow: hidden;
  }

  .adhesion-assurance div {
    float: left;
    height: 140px;
    padding: 20px;
  }

  .adhesion-assurance .solo {
    width: 260px;
  }
  
  .adhesion-assurance .solo.w100 {
  	padding:20px;
    width: 100%;
    box-sizing: border-box;
    height: auto;
  }
  
  .adhesion-assurance .solo.w100 p{
  	font-size:1.6em;
  }

  .adhesion-assurance .description {
    width: 400px;
  }

  .adhesion-assurance h3 {
    margin-bottom: 15px;
    padding: 0 45px 10px 45px;
    font-size: 2em;
  }

  .adhesion-assurance .solo p strong span {
    font-size: 2.3em;
    line-height: 1.7em;
  }

  .adhesion-assurance .description p {
    font-size: 1.4em;
  }
}


@media screen and (max-width: 767px) { /* Mobile */

  .adhesion-assurance {
    position: relative;
    width: 240px;
    margin: 20px auto 40px auto;
  }

  .adhesion-assurance div {
    padding: 15px;
  }

  .adhesion-assurance h3 {
    margin-bottom: 10px;
    padding: 0 25px 10px 25px;
    font-size: 1.1em;
  }

  .adhesion-assurance .solo p {
    font-size: 1.3em;
  }

  .adhesion-assurance .solo p strong span {
    font-size: 1em;
  }

  .adhesion-assurance .description {
    padding-top: 35px;
  }

  .adhesion-assurance .description p {
    font-size: 1em;
    text-align: center;
  }
}



/* Tarifs formules ***********************************************/

.avantages-produit .tarifs-formules {
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.avantages-produit .tarifs-formules div {
	text-align: center;
}

.avantages-produit .tarifs-formules div h3 {
	display: inline-block;
	margin: 0 auto;
}

.avantages-produit .tarifs-formules .solo {
	color: #8bbc06;
}

.avantages-produit .tarifs-formules .solo h3 {
	border-bottom: 1px solid #8bbc06;
}

.avantages-produit .tarifs-formules .famille {
	background-color: #8bbc06;
	color: #fff;
}

.avantages-produit .tarifs-formules .famille h3 {
	border-bottom: 1px solid #fff;
}

.avantages-produit .tarifs-formules div h3 span {
	font-weight: normal;
}

.avantages-produit .tarifs-formules .solo p strong {
	display: block;
}

.avantages-produit .tarifs-formules .solo p strong span sup {
	font-size: 0.6em;
}

.avantages-produit .tarifs-formules .famille p {
	font-weight: bold;
}

.avantages-produit .tarifs-formules .famille p span, .avantages-produit .tarifs-formules .famille p strong {
	display: block;
}

.avantages-produit .tarifs-formules .famille p span em {
	font-style: normal;
}

.avantages-produit .tarifs-formules .famille p strong em {
	font-style: normal;
	text-transform: uppercase;
}

.avantages-produit .tarifs-formules .ou {
	display: block;
	background-color: #fff;
	border: 1px solid #8bbc06;
	text-align: center;
}

@media screen and (max-width: 767px) { /* Mobile */

	.avantages-produit .tarifs-formules {
		position: relative;
		width: 240px;
		margin: 20px auto 40px auto;
	}

	.avantages-produit .tarifs-formules div {
		padding: 15px;
	}

	.avantages-produit .tarifs-formules .famille {
		padding-top: 35px;
	}

	.avantages-produit .tarifs-formules div h3 {
		margin-bottom: 10px;
		padding: 0 25px 10px 25px;
		font-size: 1.4em;
	}

	.avantages-produit .tarifs-formules .solo p {
		font-size: 1.4em;
	}

	.avantages-produit .tarifs-formules .solo p strong span {
		font-size: 2.21em;
	}

	.avantages-produit .tarifs-formules .solo p strong span sup {
		margin-left: -3px;
	}

	.avantages-produit .tarifs-formules .famille p {
		font-size: 1.2em;
	}

	.avantages-produit .tarifs-formules .famille p span em {
		font-size: 1.4em;
	}

	.avantages-produit .tarifs-formules .famille p span em sup {
		margin-left: -3px;
	}

	.avantages-produit .tarifs-formules .famille p strong {
		padding-top: 5px;
		font-size: 1.16em;
	}

	.avantages-produit .tarifs-formules .ou {
		position: relative;
		left: calc((100% / 2) - 16px);
		bottom: -16px;
		width: 30px;
		margin-top: -16px;
		height: 30px;
		font-size: 1.4em;
		line-height: 30px;
		border-radius: 16px;
	}

}

@media screen and (min-width: 768px) { /* Tablette + Bureau */

	.avantages-produit .tarifs-formules {
		position: relative;
		width: 740px;
		margin: 30px auto 50px auto;
		overflow: hidden;
	}

	.avantages-produit .tarifs-formules div {
		float: left;
		height: 140px;
		padding: 20px;
	}

	.avantages-produit .tarifs-formules .solo {
		width: 260px;
	}

	.avantages-produit .tarifs-formules .famille {
		width: 400px;
	}

	.avantages-produit .tarifs-formules div h3 {
		margin-bottom: 15px;
		padding: 0 45px 10px 45px;
		font-size: 2.3em;
	}

	.avantages-produit .tarifs-formules .solo p {
		font-size: 2.3em;
	}

	.avantages-produit .tarifs-formules .solo p strong span {
		font-size: 2.17em;
	}

	.avantages-produit .tarifs-formules .solo p strong span sup {
		margin-left: -6px;
	}

	.avantages-produit .tarifs-formules .famille p {
		font-size: 1.8em;
	}

	.avantages-produit .tarifs-formules .famille p span em {
		font-size: 1.5em;
	}

	.avantages-produit .tarifs-formules .famille p span em sup {
		margin-left: -3px;
	}

	.avantages-produit .tarifs-formules .famille p strong {
		padding-top: 5px;
		font-size: 1.2em;
	}

	.avantages-produit .tarifs-formules .ou {
		position: absolute;
		top: 80px;
		left: 279px;
		width: 40px;
		height: 40px;
		font-size: 2.3em;
		line-height: 40px;
		border-radius: 21px;
	}

}


/* Liste des avantages *******************************************/

.avantages-produit .liste-avantages li p .detail {
	position: relative;
	background: #ebebeb;
	display: block;
	padding: 10px 20px 10px 55px;
	border-radius: 10px;
}

.avantages-produit .liste-avantages li p .detail strong {
	color: #8bbc06;
	font-weight: bold;
}

.avantages-produit .liste-avantages li .detail:before {
	content: "\e93c";
    position: absolute;
    display: inline-block;
    font-family: 'petits-pictos';
    font-size: 0.8em;
    left: 15px;
    top: 15px;
    padding: 0 7px;
    border-radius: 50%;
    border: solid 1px #54565b;
}

.avantages-produit .liste-avantages .nouveau {
	position: absolute;
	border: solid 2px #ff47e3;
    color: #ff47e3;
    text-transform: uppercase; 
    font-weight: bold;
    transform: rotate(-15deg);
    line-height: 16px;
    background: #fff;
}
	
.avantages-produit .liste-avantages.focus  {
	background: #f3f8e6;
	overflow: visible;
}

.variante .avantages-produit .liste-avantages.focus  {
	background: #f3f8e6;
	overflow: hidden;
}
	
.avantages-produit .liste-avantages.focus .detail  {
	background: #fff;
}
	
@media screen and (max-width: 1220px) { /* Mobile + Tablette */
	
	.avantages-produit .liste-avantages .nouveau {
		top: -15px;
		padding: 1px 8px;
	    font-size: 12px;
	}
	
}

@media screen and (max-width: 767px) { /* Mobile */
	
	.avantages-produit .liste-avantages.focus {
		margin-top: 30px;
	}
	
	.variante .avantages-produit .liste-avantages.focus {
		margin-top: 10px;
	}
	
	.avantages-produit .liste-avantages li p .detail {
		margin: 10px 0 20px 0;
	}

}

@media screen and (min-width: 768px) { /* Tablette + Bureau */
		
	.avantages-produit .liste-avantages li p .detail {
		margin: 5px 0 20px 0;
	}
	
.avantages-produit .liste-avantages.focus .avantage {
	float: none;
	width: calc(100% - 150px);
}

	
}

@media screen and (min-width: 768px) and (max-width: 1220px) { /* Tablette */
	
	.avantages-produit .liste-avantages.focus .avantage  {
		width: auto;
	}
	
}

@media screen and (min-width: 1221px) { /* Bureau */

	.avantages-produit .liste-avantages {
		padding-top: 20px;
	}
	
	.avantages-produit .liste-avantages .nouveau {
		top: -50px;
	    padding: 3px 10px;
	    font-size: 20px;
	}
	
	.variante .avantages-produit .liste-avantages.focus .avantage  {
		width: calc(100%);
	}
		
}



/*-------------------------------------------------------------------------------+
+ Exemples                                                                       +
+-------------------------------------------------------------------------------*/

.exemples {
	background: #ebebeb;
}

.exemples .carrousel-exemples .exemple {
	position: relative;
}

.exemples .carrousel-exemples .exemple .nouveau {
	position: absolute;
	border: solid 2px #ff47e3;
    color: #ff47e3;
    text-transform: uppercase; 
    font-weight: bold;
    transform: rotate(-15deg);
    line-height: 16px;
    background: #fff;
}

@media screen and (max-width: 767px) { /* Mobile */

	.exemples .carrousel-exemples .exemple {
		min-height: 390px;
	}	
	
	.exemples .carrousel-exemples .exemple .nouveau {
		top: 15px;
		left: 10px;
		padding: 1px 8px;
	    font-size: 12px;
	}
		
}

@media screen and (min-width: 768px) { /* Tablette + Bureau */

	.exemples .carrousel-exemples .exemple {
		min-height: 493px;
	}	

	.exemples .carrousel-exemples .exemple .nouveau {
		top: 20px;
		left: 10px;
	    padding: 3px 10px;
	    font-size: 20px;
	}
		
}



/*-------------------------------------------------------------------------------+
+ Chiffres-cles (le saviez-vous ?)                                               +
+-------------------------------------------------------------------------------*/

.chiffres-cles {
	background-color: #7e7e7d;
	margin-top: 30px;
}

.chiffres-cles h2 {
	background-color: #fff;
	padding: 20px 0;
	text-align: center;
	line-height: 1.3em;
}

.chiffres-cles h2 span {
	font-weight: normal;
}

.chiffres-cles h2:after {
	content: "";
    display: block;
    background-color: #8bbc06;
    margin: 25px auto;
    width: 20px;
    height: 3px;
}

.chiffres-cles .debord {
    background: url(../img/divers/debord-blanc-L.png) no-repeat center center;
    display: block;
    width: 218px;
    height: 20px;
    margin: 0 auto;
}

@media screen and (max-width: 767px) { /* Mobile */

	.chiffres-cles {
	    padding-bottom: 30px;
	}

	.chiffres-cles h2 {
		padding: 10px 0;
	    font-size: 2.4em;
	}
	
	.chiffres-cles .debord {
		margin-bottom: 20px;
	}
}

@media screen and (min-width: 768px) { /* Tablette + Bureau */

	.chiffres-cles {
	    padding-bottom: 60px;
	}

	.chiffres-cles h2 {
	    padding: 20px 0 10px 0;
	}
	
	.chiffres-cles .debord {
		margin-bottom: 50px;
	}

	.chiffres-cles .intro {
		text-align: center;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1220px) { /* Tablette */

	.chiffres-cles h2 {
	    font-size: 2.6em;
	}

}

@media screen and (min-width: 1221px) { /* Bureau */

	.chiffres-cles h2 {
	    font-size: 3em;
	}

}


/* Liste des chiffres-cles *********************************************/

.chiffres-cles .carrousel div {
	position: relative;
	text-align: center;
}

.chiffres-cles .carrousel div p {
	color: #fff;
	font-size: 1.5em;
	line-height: 1.6em;	
}

.chiffres-cles .carrousel div p strong {
	color: #fff;
}

.chiffres-cles .carrousel div .precision {
	display: block;
	font-size: 0.85em;
}

.chiffres-cles .carrousel div .info {
	display: block;
	height: 145px;	
	margin-bottom: 15px;
	color: #fff;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	line-height: 155px;
}

.chiffres-cles .carrousel div .info-un {
	background: url(../img/visuels/produits/assurances/assurance-securite/info-1.png) no-repeat center center;
}

.chiffres-cles .carrousel div .info-deux {
	background: url(../img/visuels/produits/assurances/assurance-securite/info-2.png) no-repeat center center;
}

.chiffres-cles .carrousel div .info-trois {
	background: url(../img/visuels/produits/assurances/assurance-securite/info-3.png) no-repeat center center;
	padding-top: 40px;
	height: 105px;
}

@media screen and (max-width: 767px) { /* Mobile */

	.chiffres-cles .carrousel div {
		width: 300px;
		min-height: 330px;
		margin: 0 auto;
		padding: 10px;
	}
	
	.chiffres-cles .carrousel div .info {
		font-size: 3.5em;
	}

	.chiffres-cles .carrousel div p {
		padding: 0 20px;
	}
	
}

@media screen and (min-width: 768px) { /* Tablette + Bureau */

	.chiffres-cles .carrousel  {
		overflow: hidden;
	}
	
	.chiffres-cles .carrousel div {
		float: left;
		text-align: center;
	}
		
	.chiffres-cles .carrousel div p {
		font-size: 1.5em;
	}
	
	.chiffres-cles .carrousel div .info {
		font-size: 3em;
	}
		
}

@media screen and (min-width: 768px) and (max-width: 1220px) { /* Tablette */

	.chiffres-cles .carrousel div {
		width: calc((100% / 3) - 41px);
		padding: 30px 20px 0 20px;
	}

}

@media screen and (min-width: 1221px) { /* Bureau */

 	.chiffres-cles .carrousel {
 		width: 1180px;
 		margin: 0 auto;
 	}
 			
	.chiffres-cles .carrousel div {
		width: calc((100% / 3) - 80px);
		padding: 30px 40px 0 40px;
	}
 	
 	.chiffres-cles .carrousel div p span {
 		display: block;
 	}

}



/*-------------------------------------------------------------------------------+
+ Contact telephone                                                              +
+-------------------------------------------------------------------------------*/

.contact-telephone .conteneur {
	position: relative;
	background: #fff;
	margin: 0 auto;
    -moz-box-shadow: 0 0 8px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.2);
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
	
.contact-telephone .numero {
	font-size: 1.5em;
}

.contact-telephone .numero strong {
	display: block;
	margin-bottom: 10px;
	font-size: 2em;
	color: #e31c79;	
}

.contact-telephone .titre h3 {	
	display: block;	
	color: #54565b;
}

.contact-telephone .picto {
	position: absolute;
	background: #fff;
	color: #8bbc06;
	border-radius: 50%;
	border-style: solid;
	border-color: #8bbc06;	
}

@media screen and (max-width: 767px) { /* Mobile */
	
	 .contact-telephone .conteneur {
    	max-width: 750px;
    	padding: 10px;
    	margin: 10px;
	 }  

	.contact-telephone {	
		border-radius: 0;
	}
	
	.contact-telephone .titre {
		text-align: center;
		position: relative;
		padding-top: 20px;
	}
	
	.contact-telephone .titre h3 {
		display: block;
		width: 100%;
		vertical-align: middle;
		font-size: 2em;
		margin-bottom: 10px;
	}
	
	.contact-telephone .titre h3 span {
		display: block;
		font-weight: normal;
		font-size: 0.75em;
		margin-top: 10px;
	}
	
	.contact-telephone p {
		font-size: 1.5em;
	}
	
	.contact-telephone .titre .picto {
		position: absolute;
		top: -30px;
		display: block;
		padding: 8px;
		font-size: 2.5em;	
		border-width: 1px;
		left: 50%;
		-ms-transform: translate(-50%,0);
		-webkit-transform: translate(-50%,0);
		transform: translate(-50%,0);
	}
	
	.contact-telephone .numero {
		text-align: center;
		margin-top: 15px;
	}

}

@media screen and (min-width: 768px) { /* Tablette + Bureau */

	.contact-telephone .conteneur {	
		border-radius:90px;	
		margin: 0 auto;
	}	
	
	.contact-telephone p {
		font-size: 1.3em;
		margin: 10px 0 10px 0;
	}

	.contact-telephone .picto {
		position: absolute;
		display: inline-block;
		top: 50%;
		-ms-transform: translate(0,-50%);
		-webkit-transform: translate(0,-50%);
		transform: translate(0,-50%);
	    padding: 10px;
	    margin-left: -110px;
	    border-width: 2.8px;
	    font-size: 4.5em;	
	}
	
	.contact-telephone .numero {
		position: absolute;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1220px) { /* Tablette */

	.contact-telephone .conteneur {	
		max-width: 378px;
		padding: 20px 250px 20px 120px;	
	}
	
	.contact-telephone .titre h3 {	
		font-size: 2.2em;
	}
	
	.contact-telephone .picto {
	    margin-left: -90px;	
	}
		
	.contact-telephone .numero {
		top: 40px;
		right: 30px;
	}
}

@media screen and (min-width: 1221px) { /* Bureau */

	.contact-telephone .conteneur {	
    	width: 440px;
    	padding: 20px 320px 20px 150px;
	}
	
	.contact-telephone .titre h3 {	
		font-size: 2.5em;
	}
	
	.contact-telephone .picto {
	    margin-left: -110px;	
	}
	
	.contact-telephone .numero {
		top: 40px;
		right: 80px;
	}
	
}



/*-------------------------------------------------------------------------------+
+ Demande en ligne                                                               +
+-------------------------------------------------------------------------------*/

.demande .intro {
	padding: 15px 25px;
   	margin: 0 auto;
   	color: #fff;
	border: 3px solid #8bbc06;
   	overflow: hidden;
}

.demande .intro h3 {
	color: #8bbc06;
}

@media screen and (max-width: 767px) { /* Mobile */

	.demande {
	    padding-bottom: 50px;
	}
	
	.demande .intro {
		margin: 10px;
	}
	
	.demande .intro h3 {
		font-size: 2.2em;
		margin-bottom: 10px;
	}
		
	.demande .intro p {
		font-size: 1.2em;
	}
					
}

@media screen and (min-width: 768px) { /* Tablette + Bureau */

	.demande {
	    margin-bottom: 80px;
	}

	.demande .intro h3 {
		float: left;
		width: 300px;
		margin-right: 10px;
		font-size: 3em;
		line-height: 1.3em;
	}
	
	.demande .intro h3 span {
		display: block;
	}	
		
	.demande .intro p {
		font-size: 1.4em;
	}
	
	.variante .demande ul li {
	    float: left;
	    text-align: left;
	}
	

	
	.variante .demande ul li strong,
	.variante .demande ul li div {
	   display:block;
	   float:left;
	    
	}
	
	.variante .demande ul li strong {
	   width:100px;
	    
	}
	
	.variante .demande ul li div {
	   width:calc(100% - 110px);

	    
	}
	
	
	
}

@media screen and (min-width: 768px) and (max-width: 1220px) { /* Tablette */

	.demande .intro {
		width: 700px;	
	}

	.demande .intro h3 {
		line-height: 1.4em;
	}
		
	.demande .intro p {
		line-height: 1.7em;
	}
	
}

@media screen and (min-width: 1221px) { /* Bureau */
		
	.demande .intro {
		width: 900px;	
	}

	.demande .intro h3 {
		line-height: 1.3em;
	}
		
	.demande .intro p {
		line-height: 1.8em;
	}

}



/*-------------------------------------------------------------------------------+
+ Rebonds                                                                        +
+-------------------------------------------------------------------------------*/

.rebonds {
	background: #ebebeb;
}

.rebonds article .bouton_nw.bt-vert.bt-filet,.avantages-produit .bt-vert,.demande .bt-vert,
#zone-faq #faq article .bt-vert 
{
	background-color:inherit;
	border:none;
	display:block;
	left: auto;
	-ms-transform: translate(0%,0);
	-webkit-transform: translate(0%,0);
	transform: translate(0%,0);
	text-align: center;
}

.rebonds article .bouton_nw.bt-S.bt-filet .bt,#zone-faq #faq article .bouton_nw.bt-S.bt-filet .bt{
	background-color:rgba(255,255,255,0.15);
	border:#8bbc06 1px solid;
	display: inline-block;
}

.avantages-produit .bouton_nw.bt-M .bt,.demande .bouton_nw.bt-M .bt{
	background-color:#8bbc06;
	display: inline-block;
}



/*-------------------------------------------------------------------------------+
+ Mentions Legales																 +
--------------------------------------------------------------------------------*/

#mentions-legales {
	background: #ebebeb;
}

/*-------------------------------------------------------------------------------+
+ page email															 +
--------------------------------------------------------------------------------*/
.email .protection-moyens-paiement, .email .assurance-internet, .assurance-papiers-cles{
	overflow: hidden;
}
.email .protection-moyens-paiement .conteneur, .email .assurance-internet .conteneur,
.email .assurance-vol-maroquinerie .conteneur, .email .assurance-telephone .conteneur, .assurance-papiers-cles .bloc{
	-webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
}

.email strong.texte-vert,.email .protection-moyens-paiement h2, .email .assurance-internet h2,
.email .assurance-vol-maroquinerie h2, .email .assurance-telephone h2, .assurance-papiers-cles h2,
.email .protection-moyens-paiement h2, .email .assurance-internet h2{
	color:#8bbc06;
}

.email .protection-moyens-paiement .conteneur, .email .assurance-internet .conteneur{
	background-color:#efefef;
}

.email .assurance-vol-maroquinerie .conteneur{
	background-color:#b8b8b8;
}

.email .assurance-telephone .conteneur, .assurance-papiers-cles .bloc{
	background-color:#8bbc06;
}

.email .protection-moyens-paiement h2, .email .assurance-internet h2,
.email .assurance-vol-maroquinerie h2, .email .assurance-telephone h2, .assurance-papiers-cles h2,
.email .petit{
	text-align:center;
}

.email .assurance-vol-maroquinerie h2{
	text-align:left;
}

.email .protection-moyens-paiement h2, .email .assurance-internet h2,
.email .assurance-vol-maroquinerie h2, .email .assurance-telephone h2, .assurance-papiers-cles h2{
	font-size:2em;
	margin:0 auto;
	padding:30px 0;
	text-transform: uppercase;
}

.email .assurance-vol-maroquinerie h2, .email .assurance-telephone h2, .assurance-papiers-cles h2,
.email .texte-blanc{
	color:#fff;
}

.email .petit h3{
	font-size: 1.3em;
	margin: 0 auto 10px;
    text-transform: uppercase;
}

.email .grand p, .email .moyen p, .email .assurance-papiers-cles p.description {
    font-size: 1.4em;
    line-height: 1.6em;
    text-align: center;
}

.email .img img{
	max-width:100%;
}

.email .petit .titre{
	background:#fff;
	-webkit-border-radius: 60px;
	border-radius: 60px;
    box-sizing: border-box;
	color:#8bbc06;
	height:76px;
	font-size:1.5em;
	margin: 0 auto 5px;
	padding: 20px 0;
	text-align:center;
	width:76px;
}

.email .superposition.petit {
    height: 175px;
    margin: 20px auto 10px;
    position: relative;
    width: 210px;
}

.email .superposition.petit .texte{
	margin: 40px 0 0;
    max-width: 220px;
    z-index: 1;
    position: absolute;
}

.email .superposition .img{
	position: absolute;
    top: 0;
    left: 62px;
    z-index: 0;
}

.email .remonte{
	margin-top:-30px !important;
}

.email .assurance-telephone .nouveau {
	position: absolute;
    border: solid 3px #ff47e3;
    color: #ff47e3;
    text-transform: uppercase;
    font-weight: bold;
    transform: rotate(-15deg);
    line-height: 16px;
    padding: 6px 10px;
    background: #fff;
    font-size: 2.3em;
    top: -14px;
    left: 45px;
}

.email .avantages-produit.nouveau {
	margin: 40px auto;
}

.email .avantages-produit.nouveau .mentions{
	text-align:center;
}

.email .desktop{
	display:none;
}

@media screen and (max-width: 767px) { /* Mobile */
	
	.email #chapo {
		background-image: url(../img/visuels/produits/assurances/assurance-securite/email/vsl-chapo-M.png);
		padding-top: 0;
	}
	
	.email #chapo h4.genTitle{
		border-left: 1px solid #fff;
		color:#fff;
		text-shadow: 0px 0px 6px #000;
	}
	
	.email #chapo #intro-produit .center{
		display: block;
	    height: 60px;
		margin: 0 auto;
	    max-width: 247px;
	    position: relative;
	}
	
	.email #chapo #intro-produit .bouton_nw{
	    padding: 1px 11px;
	    top: 208px;
	    right: 0;
	    left: inherit;
	    width: 135px;
	}
	
	.connecte .email #chapo #intro-produit .bouton_nw{
	    top: 183px;
	}
	/*page*/
	.email .protection-moyens-paiement, .email .assurance-internet ,
	.email .assurance-vol-maroquinerie, .email .assurance-telephone, .assurance-papiers-cles .bloc{
		margin:0 10px 32px;
	}
	.email .protection-moyens-paiement .conteneur, .email .assurance-internet .conteneur,
	.email .assurance-vol-maroquinerie .conteneur, .email .assurance-telephone .conteneur, .assurance-papiers-cles .bloc{
		padding:10px;
	}
	
	.email .grand p, .email .moyen p, .email .assurance-papiers-cles p.description {
	    font-size: 1.4em;
	    line-height: 1.6em;
	    text-align: center;
	    max-width:400px;
	    margin-left:auto;
	    margin-right:auto;
	}
	
	.email .protection-moyens-paiement .petit.flex:first-child, .email .assurance-papiers-cles .flex{
		display: flex;
	    align-items: center;
	    justify-content: center;
	    margin: 15px auto;
	}
	
	.email .assurance-telephone .conteneur{
		padding-bottom:216px;
		position:relative;
	}
	
	.email .assurance-telephone .img{
		position:absolute;
		bottom:-2px;
		left: 0;
    	right: 0;
	}
	
	.email .assurance-telephone .petit{
		max-width: 200px;
	    margin: 0 auto 20px;
	}
	
	.email .p-top{
		padding-top:130px;
	}
	
	.email .p-top-grand{
		padding-top:200px;
	}
	
	.email .assurance-vol-maroquinerie .petit.flex-end{
		position:absolute;
		top:276px;
		left: 0;
    	right: 0;
	}
	
	.email .assurance-vol-maroquinerie .conditions, .email .assurance-papiers-cles .p-top-grand .conditions{
		max-width: 150px;
    	margin: 0 auto;
	}
	
	.email .assurance-papiers-cles .bloc{
		position:relative;
	}
	
	.email .assurance-papiers-cles .float_right,.email .assurance-papiers-cles .float_left,
	.email .assurance-internet .petit, .email .assurance-internet .img
	{
		position:absolute;
		top: 90px;
		width:40%
	}
	
	.email .assurance-papiers-cles .float_right img,.email .assurance-papiers-cles .float_left img{
		max-height:107px;
		max-width:100%;
		height:auto;
	}
	
	.email .assurance-papiers-cles .float_left, .email .assurance-internet .petit{
		left: 3%;
	}
	
	.email .assurance-papiers-cles .float_right, .email .assurance-internet .img{
		right: 3%;
	}
	
	.email .assurance-internet .img,.email .assurance-papiers-cles .float_left,
	.email .assurance-papiers-cles .bloc+.bloc .img, .email .remonte,
	.email .assurance-vol-maroquinerie h2, .email .assurance-telephone .img{
		text-align:center;
	}
	
	.email .assurance-internet .img img,.email .assurance-papiers-cles .bloc+.bloc .img img{
		max-height: 99px;	
	}
	
	.email .assurance-vol-maroquinerie .img img{
		max-height: 200px;
	}
	
	.email .assurance-vol-maroquinerie h2{
		height:43px;
	}
	
	.email .assurance-papiers-cles .bloc+.bloc .float_left{
		position:absolute;
		top: 190px;
		width:100%;
	}
	
	.email .assurance-papiers-cles .bloc+.bloc .img{
		position:absolute;
		top: 90px;
		width:90%;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1220px) { /* Tablette */
 	.email #chapo {
		background-image: url(../img/visuels/produits/assurances/assurance-securite/email/vsl-chapo-T.png);
		background-position: center top;
	}
	
	.email #chapo #intro-produit .center{
		display: block;
	    height: 60px;
		margin: 0 auto;
	    max-width: 578px;
	    position: relative;
	}
	
	.email #chapo #intro-produit .bouton_nw{
	    padding: 1px 30px 0;
	    top: 199px;
	    right: 0;
	    width: 157px;
	    left: inherit;
	}
	
	.connecte .email #chapo #intro-produit .bouton_nw{
	    top: 169px;
	}
	
	.email .protection-moyens-paiement, .email .assurance-internet ,
	.email .assurance-vol-maroquinerie, .email .assurance-telephone, .email .assurance-papiers-cles .bloc{
		margin:0 auto 36px;
	}
	
	.email .protection-moyens-paiement .conteneur, .email .assurance-internet .conteneur,
	.email .assurance-vol-maroquinerie .conteneur, .email .assurance-telephone .conteneur, .email .assurance-papiers-cles .bloc{
		box-sizing: border-box;
		padding:10px;
		width:740px;
	}
	
	.email .protection-moyens-paiement .conteneur, .email .assurance-internet .conteneur,
	.email .assurance-vol-maroquinerie .conteneur, .email .assurance-telephone .conteneur{
		box-sizing: border-box;
		padding:0 10px;
		width:740px;
	}
	
	.email .assurance-papiers-cles .conteneur{
		display: flex;
	    justify-content: space-between;
	    width:740px;
	}
	
	.email .protection-moyens-paiement .img img{
		max-width:100px;
	}
	
	.email .protection-moyens-paiement .superposition.petit {
	    height: 175px;
	    margin: 20px auto 10px;
	    position: relative;
	    width: 23%;
	}
	
	.email .assurance-telephone .img img, .email .assurance-vol-maroquinerie .img img  {
		max-width: 150px;
	}
	
	.email .assurance-papiers-cles .img img  {
		max-width: 210px;
	}
	
	.email .assurance-telephone .petit {
	    width: 130px;
	    margin: 0 20px;
	}
	
	.email .assurance-telephone .grand {
	    width: 200px;
	    margin: 0 20px;
	}
	
}

@media screen and (min-width: 1221px) { /* Bureau */

	.email #chapo {
		background-image: url(../img/visuels/produits/assurances/assurance-securite/email/vsl-chapo-D.png);
		background-position: center top;
	}
	
	.email #chapo #intro-produit .center{
		margin: 0 auto;
	    max-width: 1114px;
	    position: relative;
	    display: block;
	    height: 60px;
	}
	
	.email #chapo #intro-produit .bouton_nw{
	    padding: 1px 33px;
	    top: 169px;
	    right: 0;
	    left: inherit;
	    width: 220px;
	}
	
	.email .protection-moyens-paiement .conteneur, .email .assurance-internet .conteneur,
	.email .assurance-vol-maroquinerie .conteneur, .email .assurance-telephone .conteneur{
		box-sizing: border-box;
		padding:0 10px;
		width:1120px;
	}
	
	.email .assurance-papiers-cles .conteneur{
		display: flex;
	    justify-content: space-between;
	    width:1120px;
	}
	
	.email .protection-moyens-paiement .flex+.flex{
		    justify-content: flex-start;
	}
	
	.email .protection-moyens-paiement .superposition.petit {
	    width: 154px;
	}
	
	.email .protection-moyens-paiement .petit.flex {
	    width: 330px;
	}
	
	.email .protection-moyens-paiement .moyen{
		width:319px;
	}
	
	.email .assurance-telephone .petit {
	    width: 218px;
	}
	
	.email .assurance-telephone .grand {
	    width: 393px;
	}
	
}

@media screen and (min-width: 768px) { /* Tablette + Bureau */
	.email .protection-moyens-paiement, .email .assurance-internet, .assurance-papiers-cles {
	    overflow: visible;
	}

	.email .img img {
	    max-width: inherit;
	}
	
	.email .protection-moyens-paiement, .email .assurance-internet ,
	.email .assurance-vol-maroquinerie, .email .assurance-telephone, .email .assurance-papiers-cles{
		margin:0 auto 36px;
	}
	
	.email .assurance-papiers-cles h2{
		padding-top:10px;
	}
	
	.email .assurance-papiers-cles .bloc{
		box-sizing: border-box;
		margin:0;
		padding:10px;
		width: 48%;
	}
	
	.email .assurance-papiers-cles .float_right{
		float:right;
		margin-left: 10px;
	}
	
	.email .assurance-papiers-cles .float_left{
		float:left;
		margin-right: 10px;
	}
	
	.email .assurance-telephone .nouveau {
		position: absolute;
	    border: solid 3px #ff47e3;
	    color: #ff47e3;
	    text-transform: uppercase;
	    font-weight: bold;
	    transform: rotate(-15deg);
	    line-height: 16px;
	    padding: 6px 10px;
	    background: #fff;
	    font-size: 2.3em;
	    top: 0;
	    left: 130px;
	}
	
	.email .flex{
		align-items: center;
		display:flex;
		justify-content: center;
	}
	
	.email .flex.end{
		align-items: flex-end;
		display:flex;
		justify-content: center;
	}
	
	.email .assurance-internet .flex.end{
		align-items: center;
		display:flex;
		justify-content: center;
	}
	
	.email .flex.end .img{
		margin-bottom:-2px;
	}
	
	.email .petit .texte{
		margin: 0 20px;
		max-width:120px;
	}
	
	.email .petit{
		width:30%;
	}
	
	.email .grand{
		width:54%;
	}
	
	.email .moyen{
		width:29%;
	}	
	
	.email .superposition.petit{
		height: 175px;
		margin: 20px auto 10px;
		position:relative;
		width:14%;
	}
	
	.email .superposition .img{
		position: absolute;
	    top: 0;
	    left: 25px;
	    z-index: 0;
	}
	
	.email .superposition.petit .texte{
		margin: 40px 20px 0;
	    max-width: 120px;
	    z-index: 1;
	    position: absolute;
	}
		
	.email .assurance-vol-maroquinerie .img,.email .assurance-vol-maroquinerie .grand,.email .assurance-vol-maroquinerie .petit {
		margin: 0 20px 20px;
	}
	
	.email .assurance-vol-maroquinerie .petit{
		width:150px;
	}
	
	.email .assurance-internet p{
		text-align:center !important;
	}
	
	.email .assurance-internet .petit{
		margin: 0 20px;
		width:115px;
	}
	
	.email  .assurance-internet .flex.end .img {
	    margin-bottom: -10px;
	}
	
	.email .avantages-produit.nouveau {
		margin: 100px auto;
	}
	
	.email .grand p,.email .moyen p, .email .assurance-papiers-cles p.description{
		font-size: 1.5em;
		line-height: 2.1em;
		text-align:left;
	}
	
	.email .mobile{
		display:none;
	}
	
	.email .desktop{
		display:contents;
	}
}