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

html {
	font-family:Arial, Helvetica, sans-serif;
	font-size:62.5%;
}

body { 
	background:#fff;
	font-size:1.4rem;
	line-height:1.7rem;
	color:#414141;
	width:100%;
	height:100%;
}

/*-- ALLIANZ NEO LIGHT --*/
@font-face {
	font-family:'AllianzNeo Light';
	src: url('../fonts/AllianzNeoLight/AllianzNeoW01-Light.eot?#iefix') format("embedded-opentype"),
	url('../fonts/AllianzNeoLight/AllianzNeoW01-Light.svg#AllianzNeoLight') format("svg"),
	url('../fonts/AllianzNeoLight/AllianzNeoW01-Light.woff2') format("woff2"),
	url('../fonts/AllianzNeoLight/AllianzNeoW01-Light.woff') format("woff"),
	url('../fonts/AllianzNeoLight/AllianzNeoW01-Light.ttf') format("truetype");
	font-style:normal;
	font-weight:normal;
}

/*-- ALLIANZ NEO REGULAR --*/
@font-face {
	font-family:'AllianzNeo Regular';
	src: url('../fonts/AllianzNeoRegular/AllianzNeoW02-Regular.eot?#iefix') format("embedded-opentype"),
	url('../fonts/AllianzNeoRegular/AllianzNeoW02-Regular.svg#AllianzNeoRegular') format("svg"),
	url('../fonts/AllianzNeoRegular/AllianzNeoW02-Regular.woff2') format("woff2"),
	url('../fonts/AllianzNeoRegular/AllianzNeoW02-Regular.woff') format("woff"),
	url('../fonts/AllianzNeoRegular/AllianzNeoW02-Regular.ttf') format("truetype");
	font-style:normal;
	font-weight:normal;
}

/*-- ALLIANZ NEO BOLD --*/
@font-face {
	font-family:'AllianzNeo Bold';
	src: url('../fonts/AllianzNeoBold/AllianzNeoW01-Bold.eot?#iefix') format("embedded-opentype"),
	url('../fonts/AllianzNeoBold/AllianzNeoW01-Bold.svg#AllianzNeoBold') format("svg"),
	url('../fonts/AllianzNeoBold/AllianzNeoW01-Bold.woff2') format("woff2"),
	url('../fonts/AllianzNeoBold/AllianzNeoW01-Bold.woff') format("woff"),
	url('../fonts/AllianzNeoBold/AllianzNeoW01-Bold.ttf') format("truetype");
	font-style:normal;
	font-weight:normal;
}

/*-- ALLIANZ NEO CONDENSED LIGHT --*/
@font-face {
	font-family:'AllianzNeo CondLight';
	src: url('../fonts/AllianzNeoCondLight/AllianzNeoW01-CondLight.eot?#iefix') format("embedded-opentype"),
	url('../fonts/AllianzNeoCondLight/AllianzNeoW01-CondLight.svg#AllianzNeoCondLight') format("svg"),
	url('../fonts/AllianzNeoCondLight/AllianzNeoW01-CondLight.woff2') format("woff2"),
	url('../fonts/AllianzNeoCondLight/AllianzNeoW01-CondLight.woff') format("woff"),
	url('../fonts/AllianzNeoCondLight/AllianzNeoW01-CondLight.ttf') format("truetype");
	font-style:normal;
	font-weight:normal;
}

/*-- ALLIANZ NEO CONDENSED BOLD --*/
@font-face {
	font-family:'AllianzNeo CondBold';
	src: url('../fonts/AllianzNeoCondBold/AllianzNeoW01-CondensedBold.eot?#iefix') format("embedded-opentype"),
	url('../fonts/AllianzNeoCondBold/AllianzNeoW01-CondensedBold.svg#AllianzNeoCondBold') format("svg"),
	url('../fonts/AllianzNeoCondBold/AllianzNeoW01-CondensedBold.woff2') format("woff2"),
	url('../fonts/AllianzNeoCondBold/AllianzNeoW01-CondensedBold.woff') format("woff"),
	url('../fonts/AllianzNeoCondBold/AllianzNeoW01-CondensedBold.ttf') format("truetype");
	font-style:normal;
	font-weight:normal;
}

.headerContent, 
.sectionContent {
	width:100%;
	overflow:hidden;
	padding:0 20px;
	box-sizing:border-box;
	margin:0 auto;
}

a {
	color:#55acee;
}

.button {
	display:flex;
	align-items:center;
	font-family:'AllianzNeo Bold';
	font-size:1.4rem;
	line-height:1.8rem;
	color:#fff;
	text-transform:uppercase;
	text-align:center;
	background:#007ab3;
	border-radius:5px;
	padding:0 37px; 
	min-height:50px;
}

.buttonLarge {
	font-family:'AllianzNeo Light';
	font-size:1.8rem;
	line-height:2rem;
	text-transform:none;
	min-height:69px;
	box-sizing:border-box;
	margin:4px;
}

.strong {
	font-family:'AllianzNeo Bold';
}

.upper {
	text-transform:uppercase;
}

.nowrap {
	white-space:nowrap;
}

/*-- FOR MEDIUM DEVICES --*/
@media screen and (min-width:768px) {}

/*-- FOR LARGE DEVICES --*/
@media screen and (min-width:990px) {}

/*-- FOR XLARGE DEVICES --*/
@media screen and (min-width:1100px) {}


/*---------------------------------
HEADER
-----------------------------------*/
header {
	height:60px;
}

.headerContent a {
	display:block;
}

.headerContent {
	padding-top:13px;
	padding-bottom:12px;
}

.band {
	position:relative;
	background:url(../images/visuels/visuel-mobile.jpg) center center no-repeat;
	background-size:cover;
	height:440px;
	margin:0 -20px;
}

.band > div {
	position:absolute;
	top:0;
	right:0;
	left:0;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	align-items:center;
	width:75%;
	height:100%;
	margin:0 auto;
}

.band h1 {
	color:#fff;
}

.band h1 span {
	display:block;
	font-size:2rem;
	line-height:2.7rem;
}

.band .sticker {
    font-family:'AllianzNeo Regular';
	font-size:2rem;
	line-height:2.3rem;
    color:#fff;
	background:#f86200;
    border-radius:50%;
    text-align:center;
    width:115px;
    height:115px;
    padding:20px;
    margin:20px 0;
    box-sizing:border-box;
}

/*-- FOR MEDIUM DEVICES --*/
@media screen and (min-width:375px) {
	.band > div {
		width:74%;
	}
	
	p {
		width:70%;
	}
}

/*-- FOR MEDIUM DEVICES --*/
@media screen and (min-width:425px) {
	.band > div {
		width:74%;
	}
}

/*-- FOR MEDIUM DEVICES --*/
@media screen and (min-width:768px) {
	header {
		width:85%;
		margin:0 auto;
	}
	
	.band {
		background:url(../images/visuels/visuel.jpg) center center no-repeat;
		background-size:cover;
	}
	
	.band > div {
		width:95%; 
	}
		
	.band .sticker {
        font-size:2.5rem;
	    line-height:2.9rem;
        width:145px;
		height:145px;
        padding:25px 20px;
		margin:30px 0;
	}
}

/*-- FOR LARGE DEVICES --*/ 
@media screen and (min-width:990px) {}

/*-- FOR XLARGE DEVICES --*/ 
@media screen and (min-width:1100px) {
	.band h1 {
		width:75%;
	}
}

/*-- FOR XLARGE DEVICES --*/ 
@media screen and (min-width:1500px) {
	.band {
		height:540px; 
	}
}
	

/*---------------------------------
COMMON
-----------------------------------*/
.content {
	width:100%;
	margin:35px auto;
	box-sizing:border-box;
}
	
h1,
h2,
h3 {
	font-family:'AllianzNeo Regular';
	font-weight:normal;
	font-size:4.8rem;
	line-height:5.6rem;
	color:#003781; 
	text-align:center;
}
	
h2 {
	margin-bottom:35px;
}
	
h3 {
    font-family:'AllianzNeo Bold';
    font-size:3.2rem;
    line-height:3.7rem;
} 

p {
	font-family:'AllianzNeo Light';
	font-size:1.8rem;
	line-height:2.4rem;
	color:#414141;
	text-align:center;
	width:96%;
	margin:0 auto;
}

p a {
	color:#414141;
	text-decoration:underline;
}

/*-- FOR MEDIUM DEVICES --*/
@media screen and (min-width:768px) {
	p {
		width:90%;
	}
}

/*-- FOR LARGE DEVICES --*/ 
@media screen and (min-width:990px) {
	.content {
		width:95%;
		margin:60px auto;
	}

	p {
		width:70%;
	}
}

/*-- FOR XLARGE DEVICES --*/ 
@media screen and (min-width:1100px) {
	p {
		width:49%;
	}
}

/*-- FOR XLARGE DEVICES --*/ 
@media screen and (min-width:1500px) {
	p {
		width:37%;
	}
}

	
/*---------------------------------
HOME
-----------------------------------*/

	
/*---------------------------------
RESULTS
-----------------------------------*/
.result-percent {
	background:url(../images/visuels/illu-cyber.png) center center no-repeat;
	font-family:'AllianzNeo Regular';
    font-size:2rem;
    line-height:2.6rem;
	color:#fff;
	text-align:center;
	width:222px;
	height:286px;
	padding:76px 95px 0 20px;
	margin:0 auto 40px auto;
	box-sizing:border-box;
}

.result-percent.result-01 {
	padding-top:28px;
}

.result-percent span {
	font-family:'AllianzNeo Bold';
    font-size:4.8rem;
    line-height:6rem;
}

.result-percent span span {
    font-size:3rem;
    line-height:4rem;
}

.result-text h3 {
	font-family:'AllianzNeo Regular';
	font-size:1.6rem;
    line-height:2.1rem;
	color:#414141;
	text-align:left;
	margin:0 44px 10px 0;
}

.result-text .progress-bar {
	margin-bottom:18px;
}

.result-text .progress-bar .bar {
	width:100%;
	height:22px;
  	background:#ffffff;
	border-radius:11px;
	overflow:hidden;
}

.result-text .progress-bar .bar > div {
	border-radius:11px;
    height:100%;
    background:linear-gradient(90deg, rgba(2,55,129,1) 0%, rgba(9,9,121,1) 20%, rgba(244,37,90,1) 100%);
}

.result-text .progress-bar .bar25 {
	width:25%;
}

.result-text .progress-bar .bar50 {
	width:50%;
}

.result-text .progress-bar .bar75 {
	width:75%;
}

.result-text .progress-bar .bar-100 { 
	width:100%;
}

.result-text h4,
.result-text p {
	font-family:'AllianzNeo Regular';
    font-size:1.2rem;
    line-height:1.6rem;
	font-weight:normal;
	text-align:left;
}

.result-text h4 {
	position:relative;
    padding-bottom:18px;
	cursor:pointer;
}

.result-text h4:before { 
	content:url(../images/visuels/icon-info.png);
	width:19px;
	height:19px;
	vertical-align:middle;
	padding-right:5px;
}

.result-text h4:after {
	display:inline-block;
	content:'';
	border-left: 7px solid transparent;
  	border-right: 7px solid transparent;
  	border-top: 10px solid #122B54;
	vertical-align:middle;
	margin-left:5px;
	transition: transform 0.25s ease-in-out;
}

.result-text h4.open:after {
	transform: rotate(180deg);
	vertical-align:-1px;
}

.result-text .toggle-content {
	display:none;
    width:90% !important;
	padding-bottom:18px;
	margin:0;
}

.result p {
    font-size:2.4rem;
	line-height:3.7rem;
	margin-top:25px;
	margin-bottom:40px; 
}

.result-notice {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	margin-bottom:50px;
}

.result-notice p {
	font-family:'AllianzNeo Regular';
    font-size:1.6rem;
    line-height:3.7rem;
	width:auto;
	margin:0; 
}

.result-notice img {
	width:100%;
	height:auto;
}

.warning-list { 
	background:#fff7f2;
	padding:25px 10px 0 10px;
	margin:0 -20px;
}

.warning-list h3 { 
	font-family:'Trebuchet MS', Arial, Helvetica, 'sans-serif';;
    font-size:2.5rem;
	line-height:2.9rem;
	color:#414141; 
	margin-bottom:20px;
}

.warning-list > div {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	max-width:996px;
	margin:0 auto;
}

.warning-list > div div {
	padding:0 10px 25px 10px;
}

.warning-list img {
	display:block;
	margin:0 auto 13px auto;
}

.warning-list p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.6rem;
	line-height:2rem;
	width:auto;
}
	
.bloc {
	display:flex;
	flex-direction:column;
	align-items:center;
}

.bloc div {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:280px;
	height:252px;
	background:url(../images/visuels/visuel-bloc-01.jpg) center center no-repeat;
}

.bloc div + div {
	background:url(../images/visuels/visuel-bloc-02.jpg) center center no-repeat;
	margin-top:20px;
}

.bloc h3 {
	font-family:'AllianzNeo Bold';
    font-size:3.2rem;
	line-height:3.7rem;
	color:#fff;
	width:90%;
}

.bloc p {
	font-family:'AllianzNeo Bold';
    font-size:1.8rem;
	line-height:2.4rem;
	color:#fff;
	width:90%;
	padding:15px 0;
}

.footer {
	margin:30px 20px 0 20px;
}

.footer p {
	text-align:left; 
	width:100%;
}

.footer .result-rgpd p {
	margin:0 0 30px 0;
}

.footer .result-rgpd p,
.footer .credits {
	font-size:1.4rem;
	line-height:2.7rem;
}

.footer .result-rgpd p a {
	font-family:'AllianzNeo Bold';
	color:#000;
}

.footer .credits {
	width:100%;
}

/*-- FOR MEDIUM DEVICES --*/
@media screen and (min-width:768px) {
	.result-text {
		width:92%;
		margin:0 auto;
	}
	
	.result-text h3 {
		width:28%; 
	}

	.result-text .progress-bar {
		display:flex;
	}
	
	.result-text .progress-bar .bar {
		width:70%;
	}
	
	.result-notice {
		margin-left:calc(27% + 38px);
	}
	
	.warning-list > div {
		flex-direction:row;
	}
	
	.bloc {
		flex-direction:row;
		justify-content:center;
	}
	
	.bloc div {
		width:441px;
		height:350px;
		margin:0 20px;
	}	
	
	.bloc div + div {
		margin-top:0;
	}
	
	.bloc h3 {
		width:80%;
	}

	.bloc p {
		width:80%;
		padding:30px 0;
	}
}

/*-- FOR LARGE DEVICES --*/ 
@media screen and (min-width:990px) {
	.result-toggle {
		display:flex;
		flex-direction:row-reverse;
		max-width:890px;
		margin:0 auto;
	}
	
	.result-text {
		width:75%;
	}
	
	.result-text h3 {
		margin-bottom:0;
	}
	
	.result-text .progress-bar {
		width:90%;
	}
	
	.result p { 
		width:88%;
	}
	
	.result-notice {
		width:90%;
		max-width:401px;
		margin-left:calc(27% + 19px);
	}
	
	.bloc div {
		margin:0 50px;
	}
	
	.footer {
		margin:60px 50px 0 50px;
	}
	
	.footer .result-rgpd p {
		width:100%;
	}
}

/*-- FOR XLARGE DEVICES --*/ 
@media screen and (min-width:1100px) {
	.result p {
		width:62%;
	}
	
	.footer {
		padding:0 50px;
		margin:60px auto 0 auto;
		width:auto;
		max-width:984px;
	}
}

/*-- FOR XLARGE DEVICES --*/ 
@media screen and (min-width:1500px) { 
	.result p {
		width:47%;
	}
}