/*
	Site Officiel de la société AudioVisuel WebDesign Accessible by AWA
	www.drone-awa.com | @awa => Model Identity
	Page principale du site Internet license AWA (www.drone-awa.com/license)
*/

/* Main Identity remplacer par header */
	header {
		position: relative;
		margin: 0 0 15.5em 0;				/* Hauteur complète de l'écran */
		margin: 0 0 2.5em 0;				/* Réduire l'espace pour index.html pour voir Acces Handicaps */
		font-weight: bold;
	}

/* Normal */
		@media screen and (max-width: 1280px) {
				header {
					margin: 0 0 18.5em 0;
				}
		}

/* Narrow */
		@media screen and (max-width: 980px) {
				header {
					margin: 0 0 16.5em 0;
				}
		}

/* Narrower */
		@media screen and (max-width: 840px) {
				header {
					margin: 0 0 17.5em 0;
				}
		}

/* Mobile */
		@media screen and (max-width: 736px) {
				header {
					margin: 0 0 4.5em 0;
				}
		}

/* Mobile (Portrait) */
		@media screen and (max-width: 480px) {
			header {
					margin: 0 0 4.5em 0;
				}
		}

	
	header h1 {
		color: #9B3415;											/* Couleur Marron */
		color : #FF6600;						/* Couleur Orange */
		position: relative;
		margin: 0 0 1.5em 0;
		font-weight: bold;
	}

	header p {
		color: #999;
		color: #9B3415;											/* Couleur Marron */
		color : #FF6600;
		color: #9900CC;						/* Couleur Violet */
		position: relative;
		margin: 0 0 1.5em 0;
	}



/* Header */
	#header {
		-moz-transform-origin: 50% 50%;
		-webkit-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-moz-transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		transform: rotateX(0deg);
		-moz-transition: opacity 1s ease, -moz-transform 1s ease;
		-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
		-ms-transition: opacity 1s ease, -ms-transform 1s ease;
		transition: opacity 1s ease, transform 1s ease;
		/* padding: 4.5em 3em 3em 3em ; */
		padding: 1.5em 2em 0.2em 2em ;
		/* background: #ffffff; */
		border-radius: 4px;
		cursor: default;
		max-width: 100%;
		opacity: 0.95;
		position: relative;
		text-align: center;
		width: 24em;

		/* Position du cadre par rapport au haut de la page */
		margin-top: 2em;
	}


	#header.page_accueil {
		background: #ffffff;
	}

	#header.pages {
		/* background: #ffffff; */
		background-color: transparent;
	}

		#header .sousheader h4 {
			font-size: 1.85rem !important;
		}

		/* Gestion de la page Accueil avec Fond Blanc et 3 Icones */
		#header .avatar {
			position: relative;
			display: block;
			margin-bottom: 2.5em;
		}

			#header .avatar a {
				display: block;
				margin: 0 auto;
				border-radius: 100%;
				box-shadow: 0 0 0 1.5em #ffffff;

				/* Epaisseur du trait pour le cercle et couleur */
				box-shadow: 0 0 0 0.1em #c8cccf;
				box-shadow: 0 0 0 0.1em #9B3415;					/* Couleur Marron */
				box-shadow: 0 0 0 0.1em #FF6600;					/* Couleur Orange */

				width: 6.5rem;
				height: 6.5rem;

				/* Icone sous le cercle */
				overflow: hidden;
				text-align: center;
				white-space: nowrap;

				padding-top: 0.5rem;
			}

			

			#header .avatar a:hover {
				box-shadow: 0 0 0 0.15em #ff7496;
				box-shadow: 0 0 0 0.15em #29327D;					/* Couleur Bleu */
				box-shadow: 0 0 0 0.15em #9900CC;		/* Couleur Violet */
			}

			#header .avatar img {
				width: 5.5rem;
				height: auto;
			}

			/* Gestion du trait horizontal pour le Logo */
			#header .avatar:before {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				top: 120%;

				/* Largeur du Trait */
				left: -3em;
				width: calc(100% + 6em);
				left: -0.25em;
				width: calc(100% + 0.25em);

				/* Epaisseur du Trait */
				height: 2px;
				z-index: -1;
				background: #c8cccf;
				background: #9B3415;								/* Couleur Marron */
				background: #FF6600;						/* Couleur Orange */
			}

			
		#header .avatars {
			position: relative;
			display: block;
			margin-bottom: 2.5em;
		}

			#header .avatars a {
				background-color: #fff;
				display: block;
				margin: 0 auto;
				border-radius: 100%;
				box-shadow: 0 0 0 1.5em #ffffff;

				/* Epaisseur du trait pour le cercle et couleur */
				box-shadow: 0 0 0 0.1em #c8cccf;
				box-shadow: 0 0 0 0.1em #9B3415;					/* Couleur Marron */
				box-shadow: 0 0 0 0.1em #FF6600;		/* Couleur Orange */

				width: 6.5rem;
				height: 6.5rem;

				/* Icone sous le cercle */
				overflow: hidden;
				text-align: center;
				white-space: nowrap;

				padding-top: 0.5rem;
			}

			#header .avatars a:hover {
				box-shadow: 0 0 0 0.15em #29327D;					/* Couleur Bleu */
				box-shadow: 0 0 0 0.15em #9900CC;		/* Couleur Violet */
			}

			#header .avatars img {
				width: 5.5rem !important;
				height: auto;
			}

		#header .sousfooter h3 {
			font-size: 1.75rem !important;					
		}

		#header .sousfooter b {
			font-size: 2.15rem !important;					
		}

		#header .sousfooter b.awa_raleway {
			color : #FF6600;						/* Couleur Orange */
			font-size: 2.15rem !important;
		}

		#header .sousfooter b.cyrb_script {
			color : #9900CC;						/* Couleur Violet */
			font-size: 1.75rem !important;
		}


		@media screen and (max-width: 480px) {
			#header {
				margin: 3em 0 4.5em 0;
				padding: 2.2em 2em 2.5em 2em ;
				width: 100%;
			}

				#header .avatar:before {
					left: -2em;
					width: calc(100% + 4em);
					left: -1em;
					width: calc(100% + 2em);
				}

				#header .avatars:before {
					left: -2em;
					width: calc(100% + 4em);
					left: -1em;
					width: calc(100% + 2em);
				}
		}

		body.is-preload #header {
			-moz-filter: blur(0.125rem);
			-webkit-filter: blur(0.125rem);
			-ms-filter: blur(0.125rem);
			filter: blur(0.125rem);
		}

		body.is-preload #header {
			-moz-transform: rotateX(15deg);
			-webkit-transform: rotateX(15deg);
			-ms-transform: rotateX(15deg);
			transform: rotateX(15deg);
			opacity: 0;
		}

		body.is-article-visible #header {
			-moz-transform: scale(0.95);
			-webkit-transform: scale(0.95);
			-ms-transform: scale(0.95);
			transform: scale(0.95);
			-moz-filter: blur(0.1rem);
			-webkit-filter: blur(0.1rem);
			-ms-filter: blur(0.1rem);
			filter: blur(0.1rem);
			opacity: 0;
		}

			body.is-preload #header > * {
				opacity: 0;
			}

			body.is-preload #header .content .inner {
				max-height: 0;
				padding-top: 0;
				padding-bottom: 0;
				opacity: 0;
			}






/* Footer Identity remplacer par sousfooter */
	#sousfooter {
		-moz-align-self: -moz-flex-end;
		-webkit-align-self: -webkit-flex-end;
		-ms-align-self: -ms-flex-end;
		align-self: flex-end;
		width: 100%;
		padding: 1.5em 0 0 0;
		color: rgba(255, 255, 255, 0.75);
		cursor: default;
		text-align: center;
	}

		#sousfooter .copyright {
			margin: 0;
			padding: 0;
			font-size: 0.9em;
			list-style: none;
		}

			#sousfooter .copyright li {
				display: inline-block;
				margin: 0 0 0 0.45em;
				padding: 0 0 0 0.85em;
				border-left: solid 1px rgba(255, 255, 255, 0.5);
				line-height: 1;
			}

				#sousfooter .copyright li:first-child {
					border-left: 0;
				}






/* Wrapper = Position du Cadre et Animation Rotation */
	#wrapper {
			padding-top: 4em;						/* Ecart entre la Box Centrale et le Manu Haut */
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-perspective: 1000px;
		-webkit-perspective: 1000px;
		-ms-perspective: 1000px;
		perspective: 1000px;
		position: relative;
		min-height: 100%;

		/*padding: 1.5em;*/
		z-index: 2;
	}

		#wrapper > * {
			z-index: 1;
		}

		#wrapper:before {
			content: '';
			display: block;
		}

		@media screen and (max-width: 360px) {
			#wrapper {
				padding: 0.75em;
			}
		}

		body.is-ie #wrapper {
			height: 100%;
		}






/* List */
	ol {
		list-style: decimal;
		margin: 0 0 1.5em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 1.5em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px #c8cccf;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 1.5em 0;
	}

		dl dt {
			display: block;
			margin: 0 0 0.75em 0;
		}

		dl dd {
			margin-left: 1.5em;
		}










/* Icones */
	ul.icones {
		cursor: default;
		list-style: none;
		padding-left: 0;
		margin-top: -0.675em;
	}

		ul.icones li {
			display: inline-block;
			padding: 0.675em 0.8em;
		}

			/* Fonction pour les Icones voir Identity (si img alors enlever text-indent: 3.75em; */
			/*ul.icons li a {
				text-decoration: none;
				position: relative;
				display: block;

				width: 3.75em;
				height: 3.75em;

				border-radius: 100%;
				border: solid 1px #c8cccf;

				line-height: 3.75em;
				overflow: hidden;
				text-align: center;
				text-indent: 3.75em;
				white-space: nowrap;
			}*/

			ul.icones li a {
				text-decoration: none;
				position: relative;
				display: block;

				/* Taille du cercle autour des Icones */
				width: 4.75em;
				height: 4.75em;

				border-radius: 100%;
				border: solid 1px #c8cccf;
				border: solid 1px #29327D;						/* Couleur Bleu */
				border: solid 1px #9900CC;				/* Couleur Violet */

				line-height: 4.75em;
				/* Icone sous le cercle */
				overflow: hidden;
				text-align: center;
				white-space: nowrap;

				padding-top: 0.5rem;
			}

				ul.icones li a:before {
					-moz-osx-font-smoothing: grayscale;
					-webkit-font-smoothing: antialiased;

					/*font-family: FontAwesome;*/
					font-style: normal;
					font-weight: normal;
					text-transform: none !important;
				}

				ul.icones li a:before {
					color: #ffffff;
					text-shadow: 1.25px 0px 0px #c8cccf, -1.25px 0px 0px #c8cccf, 0px 1.25px 0px #c8cccf, 0px -1.25px 0px #c8cccf;
				}

				ul.icones li a:hover:before {
					text-shadow: 1.25px 0px 0px #ff7496, -1.25px 0px 0px #ff7496, 0px 1.25px 0px #ff7496, 0px -1.25px 0px #ff7496;
				}

				ul.icones li a:before {
					position: absolute;
					top: 0;
					left: 0;
					width: inherit;
					height: inherit;
					font-size: 1.85rem;
					line-height: inherit;
					text-align: center;
					text-indent: 0;
				}

				ul.icones li a:hover {
					border-color: #ff7496;
					border-color: #9B3415;					/* Couleur Marron */
					border-color: #FF6600;				/* Couleur Orange */
				}

				ul.icones li a img {
					width: 3.7em !important;
					height: auto;
				}








/* Normal */
		@media screen and (max-width: 1280px) {
				ul.icones li a {
					padding-top: 0.15rem;
				}
		}

	

/* Narrow */
		@media screen and (max-width: 980px) {
				ul.icones li a {
					padding-top: 0.07rem;
				}
		}



/* Narrower */
		@media screen and (max-width: 840px) {
				ul.icones li a {
					padding-top: 0.04rem;
				}
		}



/* Mobile */
		@media screen and (max-width: 736px) {
				ul.icones li a {
					padding-top: 0.05rem;
				}
		}



/* Mobile (Portrait) */
		@media screen and (max-width: 480px) {
			ul.icones li {
				display: inline-block;
				padding: 0.675em 0.9em;
			}

				ul.icones li a {
					/* Taille du cercle autour des Icones */
					width: 3.75em;
					height: 3.75em;
					line-height: 3.75em;
					padding-top: 0.04rem;
				}

					ul.icones li a:before {
						font-size: 1.5rem;
					}

					ul.icones li a img {
						width: 3.3rem;
						height: auto;
					}
		}
		

		

		



/* Main Box : Boite avec les Icones */
	#main {
		-moz-flex-grow: 1;
		-webkit-flex-grow: 1;
		-ms-flex-grow: 1;
		flex-grow: 1;
		-moz-flex-shrink: 1;
		-webkit-flex-shrink: 1;
		-ms-flex-shrink: 1;
		flex-shrink: 1;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		position: relative;
		max-width: 100%;
		z-index: 3;
		margin-top: 0.8rem;
	}

		#main article {
			-moz-transform: translateY(0.25rem);
			-webkit-transform: translateY(0.25rem);
			-ms-transform: translateY(0.25rem);
			transform: translateY(0.25rem);
			-moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out;
			-webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out;
			-ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out;
			transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;
			padding: 4.5rem 2.5rem 1.5rem 2.5rem ;
			position: relative;
			width: 40rem;
			max-width: 100%;

			background-color: rgba(27, 31, 34, 0.85);			/* Couleur Sombre */
			background-color: rgba(255, 255, 255, 0.85);		/* Couleur Claire */

			border-radius: 4px;
			opacity: 0;
		}

			#main article.active {
				-moz-transform: translateY(0);
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
				opacity: 1;
			}

			#main article .close {
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				width: 4rem;
				height: 4rem;
				cursor: pointer;
				text-indent: 4rem;
				overflow: hidden;
				white-space: nowrap;
			}

				#main article .close:before {
					-moz-transition: background-color 0.2s ease-in-out;
					-webkit-transition: background-color 0.2s ease-in-out;
					-ms-transition: background-color 0.2s ease-in-out;
					transition: background-color 0.2s ease-in-out;
					content: '';
					display: block;
					position: absolute;
					top: 0.75rem;
					left: 0.75rem;
					width: 2.5rem;
					height: 2.5rem;
					border-radius: 100%;
					background-position: center;

					/*Couleur de la Croix => stroke: %23ffffff%3B*/
					background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
					background-size: 20px 20px;
					background-repeat: no-repeat;
					background-color: rgba(27, 31, 34, 0.98);			/* Couleur Sombre */
					background-color: rgba(155, 52, 21, 0.98);			/* Couleur Marron (R 155 ; V 52 ; B 21) */
					background-color: rgba(255, 102, 0, 0.98);			/* Couleur Orange (R 255 ; V 102 ; B 0) */
				}

				#main article .close:hover:before {
					background-color: rgba(255, 255, 255, 0.075);		/* Couleur Claire */
					background-color: rgba(27, 31, 34, 0.75);			/* Couleur Sombre */
					background-color: rgba(41, 50, 125, 0.75);			/* Couleur Bleu (R 41 ; V 50 ; B 125) */
					background-color: rgba(153, 0, 204, 0.85);			/* Couleur Violet (R 153 ; V 0 ; B 204) */
				}

				#main article .close:active:before {
					background-color: rgba(255, 255, 255, 0.175);		/* Couleur Claire */
					background-color: rgba(27, 31, 34, 0.175);			/* Couleur Sombre */
					background-color: rgba(239, 202, 129, 0.175);			/* Couleur Sable (R 239 ; V 202 ; B 129) */
				}

				#main article h2.major {
					color: #9B3415;	
					font-size: 2.15rem !important;									/* Couleur Marron */

					color : #FF6600;						/* Couleur Orange */
				}

				#main article h3 {
					font-size: 1.95rem !important;
				}

				#main article .image img {
					width: 100%;
					height: auto;
				}

				#main article .logo img {
					width: 15%;
					height: auto;
				}

				#main article p {
					color: #29327D;										/* Couleur Bleu */
					color: #9900CC;						/* Couleur Violet */
				}

				#main article .contour {
					padding: 1.5rem 0.8rem 0.5rem 0.8rem;
					margin-bottom: 2rem;								  /* Ecart avec bouton */
					background-color: #fff;
					box-shadow: inset 0 0 0 2px #9B3415;				/* Couleur Marron */
					box-shadow: inset 0 0 0 2px #FF6600;		/* Couleur Orange */
					box-shadow: inset 0 0 0 2px #9900CC;		/* Couleur Violet */

					color: #29327D;										/* Couleur TxT Bleu */
					color: #9900CC;						/* Couleur Violet */

					font-size: 1.15rem !important;						 

					/* border-radius: 0.25em; */
					border-bottom-left-radius: 0.75em;
					border-bottom-right-radius: 0.75em;
					border-top-left-radius: 0.75em;
					border-top-right-radius: 0.75em;											
				}








				#main article div.alignera {
					/* Align Horizontal des Contenus button et h3 */
					/* https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap */
					display:flex;
					flex-wrap: wrap;
					display: inline-block;
					/*vertical-align:middle;*/

					/* Annuler Align Horizontal pour p de description */
					/* https://openclassrooms.com/forum/sujet/annuler-un-flex */
					/*display: initial;
					flex-basis: 100%;*/
				}

				#main article input.alignera {
					/* Align Horizontal des Contenus button et h3 */
					/* https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap */
					display:flex;
					flex-wrap: wrap;

					/*display: inline-block;*/
					/*vertical-align:middle;*/

					/* Annuler Align Horizontal pour p de description */
					/* https://openclassrooms.com/forum/sujet/annuler-un-flex */
					/*display: initial;
					flex-basis: 100%;*/
					display: inline-block;
					float: left;
				}

				#main article .fielda {
					display:flex;
					flex-wrap: wrap;
					display: inline-block;
					width: 100%;
				}

				#main article .labela {
					display:flex;
					flex-wrap: wrap;
				}

				


		@media screen and (max-width: 736px) {
			#main article {
				padding: 3.5rem 2rem 0.5rem 2rem ;
			}

				#main article .close:before {
					top: 0.875rem;
					left: 0.875rem;
					width: 2.25rem;
					height: 2.25rem;
					background-size: 14px 14px;
				}
		}

		@media screen and (max-width: 480px) {
			#main {
				margin-top: 2.5rem;
			}

			#main article {
				padding: 3rem 1.5rem 0.5rem 1.5rem ;
			}
		}



















/* Main_Price Box : Boite pour les 3 Tarifs */
	#main article.pricing {
		-moz-transform: translateY(0.25rem);
		-webkit-transform: translateY(0.25rem);
		-ms-transform: translateY(0.25rem);
		transform: translateY(0.25rem);
		-moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out;
		-webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out;
		-ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out;
		transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;
		padding: 4.5rem 2.5rem 1.5rem 2.5rem ;
		position: relative;
		width: 74rem;
		max-width: 100%;

		background-color: rgba(27, 31, 34, 0.85);			/* Couleur Sombre */
		background-color: rgba(255, 255, 255, 0.85);		/* Couleur Claire */

		border-radius: 4px;
		opacity: 0;

		text-align: center;
	}

		#main article.pricing.active {
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			opacity: 1;
		}

		#main article.pricing .close {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			width: 4rem;
			height: 4rem;
			cursor: pointer;
			text-indent: 4rem;
			overflow: hidden;
			white-space: nowrap;
		}

			#main article.pricing .close:before {
				-moz-transition: background-color 0.2s ease-in-out;
				-webkit-transition: background-color 0.2s ease-in-out;
				-ms-transition: background-color 0.2s ease-in-out;
				transition: background-color 0.2s ease-in-out;
				content: '';
				display: block;
				position: absolute;
				top: 0.75rem;
				left: 0.75rem;
				width: 2.5rem;
				height: 2.5rem;
				border-radius: 100%;
				background-position: center;

				/*Couleur de la Croix => stroke: %23ffffff%3B*/
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
				background-size: 20px 20px;
				background-repeat: no-repeat;
				background-color: rgba(27, 31, 34, 0.98);			/* Couleur Sombre */
				background-color: rgba(155, 52, 21, 0.98);			/* Couleur Marron (R 155 ; V 52 ; B 21) */
				background-color: rgba(255, 102, 0, 0.98);			/* Couleur Orange (R 255 ; V 102 ; B 0) */
			}

			#main article.pricing .close:hover:before {
				background-color: rgba(255, 255, 255, 0.075);		/* Couleur Claire */
				background-color: rgba(27, 31, 34, 0.75);			/* Couleur Sombre */
				background-color: rgba(41, 50, 125, 0.75);			/* Couleur Bleu (R 41 ; V 50 ; B 125) */
				background-color: rgba(153, 0, 204, 0.85);			/* Couleur Violet (R 153 ; V 0 ; B 204) */
			}

			#main article.pricing .close:active:before {
				background-color: rgba(255, 255, 255, 0.175);		/* Couleur Claire */
				background-color: rgba(27, 31, 34, 0.175);			/* Couleur Sombre */
				background-color: rgba(239, 202, 129, 0.175);			/* Couleur Sable (R 239 ; V 202 ; B 129) */
			}

			#main article.pricing h2.major {
				color: #9B3415;	
				font-size: 2.15rem !important;									/* Couleur Marron */
				color : #FF6600;						/* Couleur Orange */
			}

			#main article.pricing h3 {
				font-size: 1.95rem !important;
			}

			#main article.pricing .image img {
				width: 100%;
				height: auto;
			}

			#main article.pricing .logo img {
				width: 15%;
				height: auto;
			}

			#main article.pricing p {
				color: #29327D;										/* Couleur Bleu */
				color: #9900CC;						/* Couleur Violet */
			}

			#main article.pricing .contour {
				padding: 1.5rem 0.8rem 0.5rem 0.8rem;
				margin-bottom: 2rem;								  /* Ecart avec bouton */
				background-color: #fff;
				box-shadow: inset 0 0 0 2px #9B3415;				/* Couleur Marron */
				box-shadow: inset 0 0 0 2px #FF6600;		/* Couleur Orange */
				box-shadow: inset 0 0 0 2px #9900CC;		/* Couleur Violet */

				color: #29327D;										/* Couleur TxT Bleu */
				color: #9900CC;						/* Couleur Violet */

				font-size: 1.15rem !important;						 

				/* border-radius: 0.25em; */
				border-bottom-left-radius: 0.75em;
				border-bottom-right-radius: 0.75em;
				border-top-left-radius: 0.75em;
				border-top-right-radius: 0.75em;											
			}


	@media screen and (max-width: 736px) {
		#main article.pricing {
			padding: 3.5rem 2rem 0.5rem 2rem ;
		}

			#main article.pricing .close:before {
				top: 0.875rem;
				left: 0.875rem;
				width: 2.25rem;
				height: 2.25rem;
				background-size: 14px 14px;
			}
	}

	@media screen and (max-width: 480px) {
		#main article.pricing {
			padding: 3rem 1.5rem 0.5rem 1.5rem ;
		}
	}








/* ::::::::::::::::::::::::::: class = TARIFS ::::::::::::::::::::::::::: */
.price-box {
	margin-top: 2rem;											
}

.price-box hr {
	margin-top: -1.1rem;
	margin-bottom: 1.1rem;											
}

.price-box {
	background: #fff;
	border: 2px solid #ECEEF0;
	text-align: center;
	padding: 30px;
	margin-bottom: 20px;
	position: relative;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;

	width: calc(64rem / 3);
}

  .price-box.base {
	border: 2px solid #09C6AB;
	border: 2px solid #29327D;

	border: 2px solid #9900CC;						/* Couleur Violet */
  }

  .price-box.base .base-text {
	top: 0;
	left: 50%;
	margin-left: -54px;
	margin-top: -2em;
	position: absolute;
	padding: 4px 20px;
	background: #09C6AB;
	background: #29327D;
	background: #9900CC;							/* Couleur Violet */
	color: #fff;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
  }

  .price-box.base .base-text:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border-top: 10px solid black;
	border-top-color: #09C6AB;
	border-top-color: #29327D;
	border-top-color: #9900CC;						/* Couleur Violet */
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
  }



  .price-box.popular {
	border: 2px solid #09C6AB;
	border: 2px solid #9B3415;
	border: 2px solid #FF6600;						/* Couleur Orange */
  }

  .price-box.popular .popular-text {
	top: 0;
	left: 50%;
	margin-left: -54px;
	margin-top: -2em;
	position: absolute;
	padding: 4px 20px;
	background: #09C6AB;
	background: #9B3415;
	background: #FF6600;							/* Couleur Orange */
	color: #fff;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
  }

  .price-box.popular .popular-text:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border-top: 10px solid black;
	border-top-color: #09C6AB;
	border-top-color: #9B3415;
	border-top-color: #FF6600;						/* Couleur Orange */
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
  }

  

  .pricing-plan {
	margin: 0 0 30px 0;
	padding: 0;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
	color: #29327D;
	color: #9900CC;						/* Couleur Violet */
  }



  .pricing-popular {
	margin: 0 0 30px 0;
	padding: 0;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
	color: #9B3415;
	color : #FF6600;						/* Couleur Orange */
  }

  

  .promo {
	font-size: 3.25rem;
	color: #9B3415;
	color : #FF6600;						/* Couleur Orange */
	font-weight: bolder;
  }

  .promo .currency {
	font-size: 1.55rem;
	top: -1.2em;
  }

  .promo small {
	font-size: 1.55rem;
  }

  /*https://developer.mozilla.org/fr/docs/Web/CSS/text-decoration*/
  .promo .barre {
	color: #000;
	font-size: 1.65rem;
	text-decoration: line-through red;
  }

  .promo .ondule {
	color: #9B3415;
	color : #FF6600;						/* Couleur Orange */
	font-size: 1.65rem;
	text-decoration: line-through wavy red;
  }



  .price {
	font-size: 50px;
	font-size: 3.25rem;
	color: #000;
  }

  .price .currency {
	font-size: 20px;
	font-size: 1.55rem;
	top: -1.2em;
  }

  .price small {
	font-size: 16px;
	font-size: 1.55rem;
  }

  .price .barre {
	color: #000;
	font-size: 1.65rem;
	text-decoration: line-through red;
  }

  .price .ondule {
	color: #9B3415;
	color : #FF6600;						/* Couleur Orange */
	font-size: 1.65rem;
	text-decoration: line-through wavy red;
  }

  .price_bold {
	font-weight: bold;
	font-size: 1.25rem;
	color: #000;
  }



  /* https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_une_liste_d_%C3%A9l%C3%A9ments_avec_HTML */
  .pricing-info {
	padding: 0;
	margin: 0 0 10px 0;

	list-style-type: circle;	/* Style Cercle */
  }

  .pricing-info li {
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	text-align: left;
	color: #000;
	font-size: 1.35rem;

	list-style-type: disc;		/* Style Cercle noir */
  }

  .pricing-info li .ondule {
	text-decoration: line-through wavy red;
  }



/* Normal */
	@media screen and (max-width: 1280px) {
		.price-box {
			width: calc(59rem / 3);
		}
	}

/* Narrow */
	@media screen and (max-width: 1170px) {
		.price-box {
			width: calc(57rem / 3);
		}

		.price_bold {
			font-weight: bold;
			font-size: 1.25rem;
			color: #000;
		}
	}

/* Narrow */
	@media screen and (max-width: 1024px) {
		.price-box {
			width: calc(53rem / 3);
		}

		.price_bold {
			font-weight: bold;
			font-size: 1.25rem;
			color: #000;
		}
	}

/* Narrow */
	@media screen and (max-width: 980px) {
		.price-box {
			width: calc(51rem / 3);
		}

		.price_bold {
			font-weight: bold;
			font-size: 1.15rem;
			color: #000;
		}
	}


/* Narrower */
	@media screen and (max-width: 840px) {
		.price-box {
			width: calc(65rem / 3);
		}

		.price_bold {
			font-weight: bold;
			font-size: 1.15rem;
			color: #000;
		}
	}		


/* Mobile */
	@media screen and (max-width: 736px) {
		.price_bold {
			font-weight: bold;
			font-size: 1.15rem;
			color: #000;
		}
	}


/* Mobile (Portrait) */
	@media screen and (max-width: 480px) {
		.price_bold {
			font-weight: bold;
			font-size: 1.05rem;
			color: #000;
		}
	}

	@media(min-width:380px) and (max-width:480px) {
		.price-box {
			width: 22rem;
		}
	}

	@media(min-width:320px) and (max-width:379px) {
		.price-box {
			width: 17rem;
		}
	}

	@media(min-width:0px) and (max-width:319px) {
		.price-box {
			width: 15rem;
		}
	}