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

html, body {
 	margin:0;
 	padding: 0 1px 0 1px;
 }

a{
	text-decoration: none;
	color: #000;  
}
 body {
	 
	height: 100%;
	color: #000 ;
}

h1, h2, h3 {
	font-weight:normal;
}
h2 {
	border-bottom: 1px solid;
}
.center{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.tailleecran {
	float: left;
	height: 100%;
	min-height: 100%;
	min-height: 100vh;
	width: 0px;
}

.smallcap {
	font-variant: small-caps;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	letter-spacing: 2.3px;
}
/****************************** police décriture *********************************************/
@font-face {
  font-family: "CRAZY";
  src:	url("images/crazy_thoughts-webfont.woff"), 
	  	url("images/crazy_thoughts-webfont.woff2"),
	  	url("images/Crazy Thoughts.otf"),
	  	url("images/crazy_thoughts-webfont.ttf");
	font-display: swap;
}

/******************************************zone du dégradé blanc *******************************/
#zone3 { 
	min-width: 800px;
	width: 60%;
	height: 100%;
	position: fixed;
	right: 0;
	bottom: 0;
	background-color: rgba(255,255,255,0.90);
	z-index:-1; 
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 2%, rgba(255,255,255,0.4) 4%, rgba(255,255,255,0.55) 6%, rgba(255,255,255,0.65) 8%, rgba(255,255,255,0.75) 10%, rgba(255,255,255,0.85) 12%, rgba(255,255,255,0.9) 14%, rgba(255,255,255,0.95) 16%, rgba(255,255,255,0.97) 18%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 2%, rgba(255,255,255,0.4) 4%, rgba(255,255,255,0.55) 6%, rgba(255,255,255,0.65) 8%, rgba(255,255,255,0.75) 10%, rgba(255,255,255,0.85) 12%, rgba(255,255,255,0.9) 14%, rgba(255,255,255,0.95) 16%, rgba(255,255,255,0.97) 18%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 2%, rgba(255,255,255,0.4) 4%, rgba(255,255,255,0.55) 6%, rgba(255,255,255,0.65) 8%, rgba(255,255,255,0.75) 10%, rgba(255,255,255,0.85) 12%, rgba(255,255,255,0.9) 14%, rgba(255,255,255,0.95) 16%, rgba(255,255,255,0.97) 18%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 100%);;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
#zone1{
	width: 60%;
	height: 100%;
	min-height: 100%;	
	
	
	min-width: 800px;
	float: right;
}

/****************************************** zone de titre ************************************/

#titre, #titre2 {
	
	position: fixed;
	top: 70px;
	left: 15%;
	background: white; 
	text-align: center;
	z-index: 20;
	padding: 2px 2px 2px 2px;
	margin-left: auto;
	margin-right: auto;

}
#titre2 {
	height: 167px;
}
.titreb {
	margin: 5px;
	padding: 7px;
	border: solid 1px #EAE8E8;
	border-radius: 10px;
	
}
.titrec {
	background: url("images/croix3.png") repeat;
	padding: 5px;
}
#titre1 ,
#titremenu, .bassimple {
	display: none;
}
.titrechampagne, .titrefrezier, .titrenom, .titrechampagneac, .titrefrezierac, .titrenom2, .titrechampagne2, .titrefrezier2, .trait100 {
	z-index: 20;
}
.trait100 {
	width: 75px;
	margin-left: auto;
	margin-right: auto;
	height: 1px;
	border-bottom: solid 1px #000;
	
}

.titreblason, .titreblason2{
	display: block;
	width: 25px;
	height: auto;
	margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
}
	 	
.titrechampagne, .titrefrezier, .titrechampagne2, .titrefrezier2,  .titrechampagneac, .titrefrezierac {		
		font-variant-caps: small-caps;
		letter-spacing: 5px;
		font-size:1.375em;
}

.titrenom, .titrenom2 {
	margin-top: 5px;
	text-align: center;
	font-family: "CRAZY";
	letter-spacing: 3.3px;
	font-size: 1.688em;
	font-display: swap;
	
background: -moz-radial-gradient(center, ellipse cover, rgba(204,204,204,1) 0%, rgba(119,119,119,1) 50%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(204,204,204,1) 0%,rgba(119,119,119,1) 50%,rgba(204,204,204,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-size: 200% auto;
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: shine 15s linear infinite;
          animation: shine 15s linear infinite;
}
@-webkit-keyframes shine {
  to {
    background-position: 800% center;
  }
}
@keyframes shine {
  to {
    background-position: 800% center;
  }
}
/*******************************************lightbox ***************************************************/

.lightbox {
	display: none;
	position: fixed;
	z-index: 999999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {

	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
	border: solid 8px #FFF;
	box-shadow: 1px 1px 35px #fff;
}

.lightbox:target {

	outline: none;
	display: block;
}
.messagealerte {
	background: #E0E0E0;
	border: solid 2px #ff0000;
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10%;
	font-size: 1.25em;
	color: #ff0000;
	padding: 15px;
}
.messagevalide {
	background: #7D7D7D;
	border: solid 2px #ffffff;
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10%;
	font-size: 1.25em;
	color: #ffffff;
	padding: 15px;
}
.fondblanc {
	background: #FFFFFF;
}

/****************************************** zone global d'écriture **********************************************/
.gras {
	font-weight: 800;
}
@-webkit-keyframes fondartisan {
 0% 	{   background-position: 0% 0%; }
 25% 	{   background-position: 25% 25%; }
 50% 	{   background-position: 50% 50%; }
 75% 	{   background-position: 25% 25%; }
 100% 	{   background-position: 0% 0%; }
}
@-moz-keyframes fondartisan {
 0% 	{   background-position: 0% 0%; }
 25% 	{   background-position: 25% 25%; }
 50% 	{   background-position: 50% 50%; }
 75% 	{   background-position: 25% 25%; }
 100% 	{   background-position: 0% 0%; }
}
@-o-keyframes fondartisan {
 0% 	{   background-position: 0% 0%; }
 25% 	{   background-position: 25% 25%; }
 50% 	{   background-position: 50% 50%; }
 75% 	{   background-position: 25% 25%; }
 100% 	{   background-position: 0% 0%; }
}
@keyframes fondartisan {
 0% 	{   background-position: 0% 0%; }
 25% 	{   background-position: 25% 25%; }
 50% 	{   background-position: 50% 50%; }
 75% 	{   background-position: 25% 25%; }
 100% 	{   background-position: 0% 0%; }
}

#zone2 {
	padding-bottom: 15px;
	min-width: 600px;
	float:right;
	width: 80%;
	height: 100%;
	z-index:-1;
	background-size: 25%;
	
	
	background: url(images/fondartisan.png);
	background-position: 0% 0%;
	
  -webkit-animation-name: fondartisan;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 30s;

  -moz-animation-name: fondartisan;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 30s;

  -o-animation-name: fondartisan;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 30s;

  animation-name: fondartisan;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 30s;
		
}
.trait {
	height: 1px;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	border-bottom: solid 1px #000;
}

#chapitre, .chapitre {
	padding-top: 70px;
	font-variant: small-caps;
	text-align:center;
	font-size: 1.875em;
	color:#000;	
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	letter-spacing: 3.3px;
	font-display: swap;
}


#contenu {	
	font-size: 1em;
	padding: 0 30px 0 30px;
	margin-top: 20px;
	margin-right: auto;
    margin-left: auto;
	text-align: justify;
	line-height: 140%;
	letter-spacing: 0.7px;
}
.minititre{
	font-size: 1.25em;
	font-variant-caps: small-caps;
	letter-spacing: 2.3px;
	border-bottom:  solid 1px #000000;
	margin: 10px auto;
}
.minititre2{
	text-decoration: underline;
	font-size: 1em;
}
.lienbas {
	margin: 5px 20px 5px 20px;
	text-decoration: none;
	color: #FFFFFF;
	float: right;
	}

.lienbas a {
	color: #FFFFFF;
}
.lienbas img {
	height: 16px;
	width: auto;
}
.lien:hover, .lienbas a:hover{
	color: #FF0000;
}

.croixsup {
	width: 22px;
	height: 22px;
	background-image: url("images/croixnoir.png");
	background-repeat: no-repeat;
	cursor: pointer;
}
.croixsup:hover {
	background-image: url("images/croixrouge.png");
}
.retourgamme {
	height: 2em;
	color: #000000;
	font-variant-caps: small-caps;	
	letter-spacing: 3.3px;
	text-align: left;
	cursor: pointer;
	margin-left: -15px;
}
.retourgamme:hover{
	color: #ff0000;
}

/************************* bandeau alcool *****************/

.bandeaualcool {
	border: solid 3pt black;
	width: 99%;
	width: calc( 100% - 8px );
	min-height: 60pt;
	background: #FFFFFF;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-display: swap;
}
.republique {
	height: 80px;
	width: auto;
	margin: 5px;
	text-align: top;
}
.repdroite {
	text-align: right;
	font-size: 1em;
}
.repcenter {
	text-align: center;
	}
.rephaut {
	width: 100%;
	vertical-align: top;
}
/************************************ bas de page ************************************/
.smallcap {
	font-variant: small-caps;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	letter-spacing: 2.3px;
	font-display: swap;
}

.clear {
	clear: both;
}
.bas{
	margin-top: 30px;
	padding-bottom: 15px;
	float: right;
	width: 100%;
	min-height: 210px;
	background: rgba(0,0,0,1);
	color: #b4b4b4;
}
.paysinitialeglobale {
	text-align: right;
	padding-right: 10px;
	padding-top: 15px;
}
.paysinitiale, .paysinitiale2{
	padding: 10px;
	display: inline;
	color: #FFFFFF;
	font-size: 1.1em;
}
.paysinitiale{
	text-decoration: underline;
	text-underline-position: under;
}
.paysinitiale:hover{
	color: #FF0000;
	cursor: pointer;
	text-decoration-color: #FF0000;
}
.basplan{
	padding-left: 20px;
	float:left;
	width: 45%;
	
}
.basplan a, .basaddresse a, .bassimple a{
	text-decoration: none;
	color: #b4b4b4;
}
.basplan a:hover, .basaddresse a:hover, .bassimple a:hover{
	text-decoration: none;
	color: #FF0000;
}
.basaddresse{
	width: 45%;
	float: right;
	text-align: center;
}
.basgros{	font-weight: 500; font-variant: small-caps}
.baspetit{	font-size: 0.688em; }
.logo{
	text-align: center;
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.logoimg{
	max-height: 50px;
	width: auto;	
	margin-left: 40px;
	margin-right: 40px;
	margin-bottom: 20px;
}
.logoimg3{
	max-height: 100px;
	width: auto;	
	margin-left: 40px;
	margin-right: 40px;
	margin-bottom: 20px;
}
.margingtop10 {
	margin-top: 10px;
}
.logoimg2{
	max-height: 48px;
	width: auto;	
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 10px;
}

.logoca {
	height: 35px;
	width: auto;
}

.floatdroitp {
	width: 50%;
	float: right;
	text-align: right;
}
.floatgauchep {
	text-align: left;
	width: 50%;
	float: left;
	background: #000000;
}
.detailplan{
	display: none;
}
.floatgauchep:hover ~  .floatdroit{
	width: 100%;
}
.floatgauchep:hover {
	width: 100%;
}
.floatgauchep:hover > .detailplan {
	display: block;
	width: 100%;
}

.ligne2 {
	padding-left: 20px;
}

.traitbas {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	height: 1px;
	border-bottom: solid 1px #C5C5C5;
}
.vertical {
	width: 1px;
	min-height: 150px;
	height: 100%;
	border-left: solid 1px #c5c5c5;
	margin-left: auto;
	margin-right: auto;
}
.langue {
	width: 15px;
	position: fixed;
	top: 15px;
	right: 20px;
	z-index: 999;
}
.langue img {
	width: 30px;
	height: auto;
}
.liengauche {
	float: left;
	text-align: left;
}
.liendroit {
	float: right;
	text-align: right;
}
.liendroit, .liengauche {
	margin-top: 10px;
	display: inline;
	width: 50%;
	text-decoration: underline;
	text-underline-position: under;
}
.liendroit:hover, .liengauche:hover {
	color: #ff0000;
}
/*********************************** zone image **************************************/

.imagedroit, .imagegauche, .imagedroit2, .imagegauche2{
	margin-top: 12px;  
  	margin-right: 12px;  
  	margin-bottom: 12px;  
  	margin-left: 12px;
	border:0;
	max-width: 200px;
	height:auto;
	max-height: 200px;
	width: auto;
}

.imagegauche{
	margin-right: 25px;
}	
.imagedroit{
	margin-left: 15px;
}	

.imagegauche3{
	margin: 12px;
	margin-right: 12px;
	float: left;
}

.imagedroit, .imagegauche{	
	-moz-box-shadow: 5px 5px 3px #d1d1d1;
	-webkit-box-shadow: 5px 5px 3px #d1d1d1;
	-o-box-shadow: 5px 5px 3px #d1d1d1;
	box-shadow: 5px 5px 3px #d1d1d1;
}
.imagedroit, .imagedroit2{
	float: right;
}
.imagegauche, .imagegauche2{
	float:left;
}


/*****************fondu image ************************************************/

@keyframes animationfond1 {
 0% {   opacity:1; }
 28% {   opacity:1; }
 33% {   opacity:0; }
 95% {   opacity:0; }
 100% {   opacity:1; }
}

.fondu1, .fondu2, .fondu3, .fondu1a, .fondu2a, .fondu3a {
width: auto;
height: 100%;	
position: fixed;
z-index:-1;
bottom:0;
left:0;
display: block;margin: auto;

  animation-name: animationfond1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 30s;
}

@media (max-aspect-ratio: 12/7) {
	.fondu1, .fondu2, .fondu3,  .fondu1a, .fondu2a, .fondu3a {
		width: auto;
		height: 100%;
	}
}
@media (min-aspect-ratio: 12/7) {
	.fondu1, .fondu2, .fondu3,  .fondu1a, .fondu2a, .fondu3a {
		width: 100%;
		height: auto;
	}
}

.fondu1, .fondu1a {
  animation-delay: 20s;
}
.fondu2, .fondu2a {
  animation-delay: 10s;
}
.fondu3, .fondu3a {
  animation-delay: 0;
}
/* on selection les images en fonction de la taille d'écran */
.ecranpc {
	display:block;
}
.mobile {
	display: none;
}
/***************************************************************************************/
/************************** module par taille d'ecran *********************************/	
/****************************************************************************************/

@media screen and (max-width: 1400px) {
	#titre {
		left: 10%;	
	}
	#zone1, #zone3{
	width: 70%;
	}
}

@media screen and (max-width: 1100px) {
	#chapitre, .chapitre{
		padding-top: 100px;
	}
	
	#titre {
		display: none;
	}
	#titremenu {
		display: inline-block;
	}
	.titrechampagne, .titrefrezier {
		display: inline-block;
		margin-right: 5px;
		margin-left: 5px;
	}

	#zone1 {
		min-width: inherit;
		float: none;
		position: relative;		
		margin-left: auto;
		margin-right: auto;
		background: rgba(255,255,255,0.82);
	}
	
	#zone3{
		display: none;
	}
	#zone2 {
		min-width: 600px;
		float:none;
		width: 100%;
		height: 100%;
		z-index:-1;
	}
	#nav {
		background: #fff;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
	}
}
@media screen and (max-width: 940px) {
	#zone1{
		width: 90%;
	}
	#zone2 {
		min-width: 200px;
	}
	#contenu {	
		font-size: 1em;
		padding: 0 30px 0 30px;
	}
	.bassimple{
		display: block;
		color: #fff;
		background: #000000;
		padding: 10px;
	}
	.bas{
		display: none;
	}
	.lienbas {
		margin: 5px 5px;
	}
}
@media screen and (max-width: 800px) {
	.ecranpc {
	display:none;
}
	.mobile {
	display:block;
}
	.republique {
		height: 50px;
		width: auto;
	}	
}
@media screen and (max-width: 610px) {
	.imagedroit, .imagegauche, .imagedroit2, .imagegauche2{
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
		
}
@media screen and (max-width: 530px) {
	.titrechampagne, .titrefrezier, .titrenom{
		display: inline-block;
	}
	#titremenu {
		position: absolute;
		width: 100%; 
		top: 0;
		left: 0;
	}	
	.titrenom {
		margin-top: -40px;		
		font-size: 1.25em;		
		width: 100%;
	}
	#nav {
		min-height:  105px;
	}
	.hamburger{
		margin-right: 71px;
		color: #000000;
	}
	.langue {
		top: 45px;
		left: 5px;
		z-index: 999;
	}
	#chapitre, .chapitre{
	padding-top: 120px;
	}

}