@charset "UTF-8";

#pan-article .secure-list .picture {
	padding-left: 190px;
	margin-bottom: 60px; }
	#pan-article .secure-list .picture img:first-child {
		width: 100px;
		margin-left: -190px;
		margin-right: 0px; }
	#pan-article .secure-list .picture h3 {
		font-size: 20px;
		margin-bottom: 10px; }
	#pan-article .secure-list .picture span {
		font: normal 60px "avenir_lt_35", calibri, Helvetica, Arial, sans-serif;
		color: #bbb;
		position: absolute;
		left: 140px;
		top: -10px; }
	#pan-article .secure-list .picture p {
		margin-top: 0px;
		border-left: 1px dotted #bbb;
		padding: 0 0 10px 25px; }

#pan-article .pan-secure {
	position: relative;
	width: 100%; }
	#pan-article .pan-secure *,
	#pan-article .pan-secure *:before,
	#pan-article .pan-secure *:after {
		box-sizing: border-box; }
	#pan-article .pan-secure h2 {
		margin-bottom: 20px; }
	#pan-article .pan-secure .layout {
		width: 100%; }
		#pan-article .pan-secure .layout > div {
			float: left; }
	#pan-article .pan-secure .card, #pan-article .pan-secure .cardside, #pan-article .pan-secure .cardside img {
		width: 350px;
		height: 220px; }
	#pan-article .pan-secure .card-secure {
		width: 350px;
		height: 220px;
		position: relative; }
		#pan-article .pan-secure .card-secure > .card-lens {
			z-index: 1;
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
							transform: translate(-50%, -50%);
			border: 3px solid red;
			border-radius: 50%;
			transition-property: all;
			transition-duration: 0.2s;
			box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.2);
			opacity: 1;
			width: 80px;
			height: 80px; }
			#pan-article .pan-secure .card-secure > .card-lens:hover {
				width: 200px;
				height: 200px; }
			#pan-article .pan-secure .card-secure > .card-lens.close {
				opacity: 0;
				width: 0;
				height: 0; }
	#pan-article .pan-secure .card {
		position: absolute;
		width: inherit;
		height: inherit;
		border: none;
		border-radius: 15px; }
		#pan-article .pan-secure .card > .cardside {
			position: absolute;
			width: inherit;
			height: inherit;
			line-height: 220px;
			padding: 0;
			border-radius: 15px;
			-webkit-transform: scale(0.9999);
					-ms-transform: scale(0.9999);
							transform: scale(0.9999);
			-webkit-backface-visibility: hidden;
							backface-visibility: hidden;
			transition-property: all;
			transition-duration: 0.3s; }
			#pan-article .pan-secure .card > .cardside > img {
				border-radius: 15px; }
			#pan-article .pan-secure .card > .cardside.front {
				-webkit-transform: perspective(800px) rotateY(0deg);
								transform: perspective(800px) rotateY(0deg); }
			#pan-article .pan-secure .card > .cardside.back {
				-webkit-transform: perspective(800px) rotateY(180deg);
								transform: perspective(800px) rotateY(180deg); }
	#pan-article .pan-secure.normal .cardside.normal {
		opacity: 1; }
	#pan-article .pan-secure.normal .cardside.uv {
		opacity: 0; }
	#pan-article .pan-secure.normal .card-lens {
		border-color: #335; }
	#pan-article .pan-secure.uv .cardside.uv {
		opacity: 1; }
		#pan-article .pan-secure.uv .cardside.uv:before {
			content: "";
			z-index: 1;
			position: absolute;
			top: 5px;
			left: 5px;
			-webkit-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
							transform: translate(-50%, -50%);
			border: 3px solid #fff;
			border-radius: 50%;
			transition-property: all;
			transition-duration: 0.2s;
			opacity: 1;
			width: 43px;
			height: 43px;
			background: #fff url("../images/secure_uv.png") 50% 50% no-repeat; }
	#pan-article .pan-secure.uv .cardside.normal {
		opacity: 0; }
	#pan-article .pan-secure.uv .card-lens {
		border-color: #fff; }
	#pan-article .pan-secure.back .cardside.front {
		-webkit-transform: perspective(800px) rotateY(180deg);
						transform: perspective(800px) rotateY(180deg); }
	#pan-article .pan-secure.back .cardside.back {
		-webkit-transform: perspective(800px) rotateY(360deg);
						transform: perspective(800px) rotateY(360deg); }
	#pan-article .pan-secure.front .cardside.back {
		-webkit-transform: perspective(800px) rotateY(180deg);
						transform: perspective(800px) rotateY(180deg); }
	#pan-article .pan-secure.front .cardside.front {
		-webkit-transform: perspective(800px) rotateY(0deg);
						transform: perspective(800px) rotateY(0deg); }
	#pan-article .pan-secure .info {
		position: relative;
		cursor: default;
		width: 100%;
		height: 60px; }
		#pan-article .pan-secure .info > div {
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
							transform: translate(-50%, -50%);
			transition-property: opacity;
			transition-duration: 0.5s;
			padding: 10px 0 10px 40px; }
			#pan-article .pan-secure .info > div.advice {
				opacity: 1;
				white-space: nowrap;
				background: #fff url("../images/secure_click.png") 0 50% no-repeat; }
		#pan-article .pan-secure .info p {
			margin: 0;
			line-height: 1.25em; }
	#pan-article .pan-secure .levels {
		cursor: default;
		margin: 30px 0 0 20px; }
		#pan-article .pan-secure .levels p {
			float: left;
			margin: 0 0 10px 0;
			line-height: 1.1em; }
			#pan-article .pan-secure .levels p.bt span {
				display: inline-block;
				border-radius: 24px; }
			#pan-article .pan-secure .levels p.bt > span {
				border: 2px solid #888;
				margin: 3px 30px 0 0; }
				#pan-article .pan-secure .levels p.bt > span > span {
					border: 1px solid #fff; }
					#pan-article .pan-secure .levels p.bt > span > span > span {
						border: 1px solid #888;
						text-transform: uppercase;
						padding: 4px 10px 2px 28px;
						width: 110px; }
		#pan-article .pan-secure .levels .lev1 p {
			color: #a48c2a; }
			#pan-article .pan-secure .levels .lev1 p.bt > span > span > span {
				background: transparent url("../images/secure_levels.png") 5px 2% no-repeat; }
		#pan-article .pan-secure .levels .lev2 p {
			color: #c9802b; }
			#pan-article .pan-secure .levels .lev2 p.bt > span > span > span {
				background: transparent url("../images/secure_levels.png") 5px 50% no-repeat; }
		#pan-article .pan-secure .levels .lev3 p {
			color: #ba2813; }
			#pan-article .pan-secure .levels .lev3 p.bt > span > span > span {
				background: transparent url("../images/secure_levels.png") 5px 98% no-repeat; }
	#pan-article .pan-secure .levels > div {
		opacity: 1;
		transition-property: opacity;
		transition-duration: 0.5s; }
	#pan-article .pan-secure.secure-100 .levels > div, #pan-article .pan-secure.secure-010 .levels > div, #pan-article .pan-secure.secure-001 .levels > div, #pan-article .pan-secure.secure-110 .levels > div {
		opacity: 0.3; }
	#pan-article .pan-secure.secure-100 .levels > div.lev1 {
		opacity: 1; }
	#pan-article .pan-secure.secure-010 .levels > div.lev2 {
		opacity: 1; }
	#pan-article .pan-secure.secure-001 .levels > div.lev3 {
		opacity: 1; }
	#pan-article .pan-secure.secure-110 .levels > div.lev1,
	#pan-article .pan-secure.secure-110 .levels > div.lev2 {
		opacity: 1; }
	#pan-article .pan-secure ul.options-secure {
		margin: 0;
		padding-left: 25px;
		cursor: pointer; }
		#pan-article .pan-secure ul.options-secure li {
			width: 270px;
			background: transparent url("../images/secure_lock.png") 100% 0 no-repeat;
			padding: 4px 0;
			border-bottom: 1px dotted #bbb;
			list-style: none; }
			#pan-article .pan-secure ul.options-secure li.first {
				border-top: 1px dotted #bbb; }
			#pan-article .pan-secure ul.options-secure li.on, #pan-article .pan-secure ul.options-secure li:hover {
				font-weight: bold;
				color: #335; }
			#pan-article .pan-secure ul.options-secure li:hover {
				color: #F1121D;
				opacity: 1 !important; }
			#pan-article .pan-secure ul.options-secure li.secure-100 {
				background-position: 100% 0; }
			#pan-article .pan-secure ul.options-secure li.secure-010 {
				background-position: 100% -25px; }
			#pan-article .pan-secure ul.options-secure li.secure-001 {
				background-position: 100% -50px; }
			#pan-article .pan-secure ul.options-secure li.secure-110 {
				background-position: 100% -75px; }
		#pan-article .pan-secure ul.options-secure:hover li:not(.on) {
			opacity: .5; }

#pan-article .pan-normes h2 {
	margin: 2em 0 0.5em 0; }

#pan-article .pan-normes .picture {
	padding-left: 90px; }
	#pan-article .pan-normes .picture img:first-child {
		padding-top: 10px;
		width: auto;
		margin-left: -90px;
		margin-right: 0px; }

#pan-article .pan-ref h2 {
	margin: 2em 0 0.5em 0; }

#pan-article .pan-ref div {
	float: left;
	width: 40%;
	margin-right: 30px; }
	#pan-article .pan-ref div h3 {
		display: inline-block;
		font-size: 20px;
		margin: 5px 0 0 45px;
		background: transparent none; }
		#pan-article .pan-ref div h3:after {
			content: ' :'; }
	#pan-article .pan-ref div.france {
		border-right: 1px solid #bbb;
		background: transparent url("../images/ico_france.png") 0 0 no-repeat; }
	#pan-article .pan-ref div.world {
		background: transparent url("../images/ico_world.png") 0 0 no-repeat; }
	#pan-article .pan-ref div a {
		color: #637077; }
	#pan-article .pan-ref div ul {
		padding-left: 20px; }

#pan-article .pan-caracteristiques h2 {
	margin: 2em 0 0.5em 0; }