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

    /* 1. Réinitialisation globale */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
	color: #1b1b1b;
	font-family: 'Anaheim', sans-serif;
	font-size: 1.05em;
	line-height: 1.2em;
	letter-spacing: 0.06em;
	word-spacing: 0.06em;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Garde le footer en bas */
    }

    /* 2. Le conteneur calibré à 1100px */
.wrapper {
	background-color: #fff;
	border-radius: 30px;
	box-shadow: 0px 0px 20px #737373;
    width: 100%;
    max-width: 1100px; /* Limite la largeur à 1100px */
    margin: 20px auto;    /* Centre la page horizontalement */
    padding: 0 15px;   /* Marge de sécurité pour les mobiles */
    display: flex;
    flex-direction: column;
    flex: 0;           /* Occupe tout l'espace vertical libre */
    }
	   /* 3. En-tête (Header) */
header {
      background-color: #fff;
      padding: 25px 25px 0px 25px;
	  text-align:center;
	  margin-top:3px; /* repousser le top pour que l'arrondi du wrapper soit bien net */
    }

    /* 4. Zone des 2 colonnes */
.main-content {
      display: flex;
      flex: 1;           /* Force cette zone à s'étirer verticalement */
    }

    /* Colonne Principale (Gauche) */
left {
      flex: 2;           /* Occupe xx de l'espace */
	  min-width: 0;
      background-color: #fff;
      padding: 0px 25px 0px 25px;
	  text-align:left;
      }

left img {
	  max-width:100%;
	  display:block;
	  border:none;
	  margin:10px 0px 10px 0px;
}

    /* Colonne (Droite) */
right {
	 flex: 3;           /* Occupe xx de l'espace */
	 min-width: 0;/* empeche la colonne de gradir suivant la taille de l image */
	 padding: 0px 25px 0px 25px;
	 border-left:solid 1px #889fdf;
	 text-align:left;
	 background-color:#fff;
    }
right img {
	 max-width:100%;
	 display:block;
	 border:none;
	 margin:10px 0px 10px 0px;
	}
	
	/* 5. Pied de page (Footer) */
footer {
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 25px;
    margin-bottom: 20px;
   }


	
/*Classes de couleur de fond*/
.bleu {background-color:#a5acbf;}
.beige {background-color:#e1d5bf;}
.vert {background-color:#b2c4ba;}
.orange {background-color:#f9ebde;}
.mauve {background-color:#9d8db4;}
.gris {background-color:#707070;}

/*Classes de couleur de texte*/
.txtbleu {color:#889fdf;}
.txtbeige {color:#efe4a7;}
.txtvert {color:#dcf9e9;}
.txtorange {color:#f4a460;}
.txtmauve {color:#9d8db4;}
.txtrouge {color: #aa3d3d;}

/*Classes d'alignement de texte*/
.center {text-align: center;}
.fag {text-align: left;}

/*Classes de structure de texte*/
h1grand {
	font-size: 3.5em;
	line-height:1em;
}
h1 {
	font-size: 2.5em;
	line-height:1em;
	text-align: left;
	margin-bottom:10px;
}
h2, h3 {
	font-size: 1.7em;
	line-height:1.3em;
}
h3 {
	color: #aa3d3d;
}
h4 {
	font-size: 1.4em;
	line-height:1em;
	margin:10px 0px 10px 0px;
}
p {	color: #1b1b1b;
	font-size: 1.05em;
	line-height: 1.3em;
	letter-spacing: 0.06em;
	word-spacing: 0.06em;
}
.menu {	
	font-weight: normal;
	font-size: 1.08em;
}
address {
	font-style: italic;
	padding-top:10px;
	padding-bottom:20px;
}

/*Classes de separations*/
.border, .borderbleu {
	border-bottom:solid 1px #aa3d3d;
	width:100%;
	margin-bottom: 8px;
	clear: both;
}
.borderbleu {
	border-bottom:solid 2px #889fdf;
}
hr {
	border:dashed 1px #889fdf;
	margin: 10px 0px 10px 0px;
	clear: both;
}




/*Classes de Liens*/


a.header:link, a.header:visited, a.header:hover, a.header:active {
	text-decoration : none;
	color: #3d5b66;
	font-size: 1.05em;
	line-height:1.8em;
	text-align: center;
	border-bottom : 1px dashed #889fdf;
	clear:both;
	transition-property:color;
	transition-duration:2s;
	transition-timing-function:ease;

}
a.header:hover {
	color: #000;
	text-decoration : none;
	border-top : 2px solid #889fdf;
	border-bottom : 2px solid #889fdf;
}
a.headermoins:link, a.headermoins:visited, a.headermoins:hover, a.headermoins:active {
	text-decoration : none;
	color: #2a393f;
	font-size: 1.15em;
	line-height:1.8em;
	text-align: left;
	border-bottom : 1px solid #aa3d3d;
	clear:both;
	transition-property:color;
	transition-duration:1s;
	transition-timing-function:ease;
}
a.headermoins:hover {
	color: #aa3d3d;
	border-bottom : 1px dashed;
}
a.headerplus:link, a.headerplus:visited, a.headerplus:hover, a.headerplus:active {
	text-align: center;
	text-decoration:none;
	color: #fff;
	background-color: #a5acbf;
	font-size: 1.05em;
	font-weight:bold;
	line-height:1.2em;
	text-align: center;
	margin:auto;
	clear:both;
	width:300px;
	padding:6px 10px 6px 10px;
	display:block;
	border-radius: 35px;
	margin-bottom:-10px;
	transition-property:background, width, color;
	transition-duration:2s;
	transition-timing-function:ease;
}
a.headerplus:hover {
	color: #000;
	text-decoration : none;
	background-color: #889fdf;
	width:280px;
}
a.suite:link, a.suite:visited, a.suite:hover, a.suite:active {
	position:relative;
	color:#fff;
	background-color: #738ebc;
	text-decoration: none;
	border-bottom: none;
	float: right;
	padding: 2px 25px 5px 25px;
	margin-top: -45px;
	font-weight: bold;
	-moz-border-radius: 20px 20px;
	-webkit-border-radius: 20px 20px;
	border-radius: 20px 20px;
}
a.suite:hover {
	background-color: #ffcc5f;
	text-decoration: none;
	border-bottom: none;
}
/* ----- DEFINITION DE L'INFOBULLE POUR REGLE DU JEU ----- */
a.bulle {
	position: relative;
	text-decoration : none;
	color: #000;
	border-bottom : 1px dashed #aa3d3d;
	clear:both;
	transition-property:color;
	transition-duration:0.5s;
	transition-timing-function:ease;
	font-weight:bold;
}
a.bulle:hover {
	background: none;
	z-index: 50;
}
a.bulle span {
	display: none;
}
a.bulle:hover span {
	display: block;
	position: absolute;
	top: -10px;
	left: 20px;
	text-align: left;
	font-size: 1em;
	font-weight: normal;
	width: 400px;
	background:#738ebc;
	color:#fff;
	padding: 10px;
}
#seance h4 {
	color: #889fdf; }
#seance p {
	color: #000; }
#seance {
	background-color:#ccc;
	color:#000; 
	font-size: 1em;
	width:auto;
	padding: 5px;
	}

/*Fin Classes de Liens*/

/*VIGNETTES DE GALERIES*/


#vign_galeries {
	text-align: center;
	margin : 0px 8px 8px 0px;
	width: 175px;
	height: 190px;
	background-color:#ececec;
	border-radius: 10px;
	float:left;
}

.mon_image {
  display: block;
  margin-left: auto;
  margin-right: auto;
	}



#vign_trombin, #vign_trombin_grande {
	height: 380px;
	width: 310px;
	padding: 10px 3px 5px 3px;
}
	
#vign_trombin_grande {
	padding:-10px;
	height:370px; 
	width:100%;
	background-color:#f4f4f4;
	border:1px solid #ccc;
}	

#vign_trombin_grande img {
	border:solid 1px #ccc;
	margin: 10px 20px 150px 20px;
	float:left;
	height:180px;
}
#vign_trombin, #vign_trombin_grande {
	height: 380px;
	width: 310px;
	padding: 10px 3px 5px 3px;
}
	
#vign_trombin_grande {
	padding:-10px;
	height:370px; 
	width:100%;
	background-color:#f4f4f4;
	border:1px solid #ccc;
}	

#vign_trombin_grande img {
	border:solid 1px #ccc;
	margin: 10px 20px 150px 20px;
	float:left;
	height:180px;
}






















    /* 6. Passage sur une seule colonne pour les mobiles */
    @media (max-width: 768px) {
      .main-content {
        flex-direction: column;
      }
    }