@charset "UTF-8";

* {
     box-sizing: border-box;
}

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}td:not([align]),th:not([align]){text-align:left}

html,body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	height:100%;
}

a {
	color: inherit;
	text-decoration:none;
}

/* VARIABLE */ 

:root{
	--orange:#ea5906;
	--bleu1:#42b1db;
	--bleu2:#2d7f9c;
	--bleuf:#2a2f3f;
	--gris1:#cfd0d0;
	--grisc:#e8e8e8;
}

/*------------------------------------------------------  HEADER  ---------------------------------------------------------*/

.header, .header-2 {
	display: none;
}


/*------------------------------------------------------  MENU ORDI  ---------------------------------------------------------*/

.menu-ordi {
	display: none;
}

/*------------------------------------------------------  MENU TEL  ---------------------------------------------------------*/


.menu-m{
	display: block;
}

/*------------------------------------------------------  BODY  ---------------------------------------------------------*/

.body {
	width: 100%;
	background-color: var(--grisc);
	float: left;
	margin-bottom: 0px;
	margin-top: 0px;
}
.body h2 {
	font-size: 5vw;
	line-height: 6.5vw;
	font-weight: 600;
	text-align: center;
	letter-spacing: 5px;
	color: var(--bleuf);
	margin-top: 5%; 
	padding-top: 20px;
}
.trait-1, .trait-2 {
	width: 94%;
	height: 1px;
	background: var(--bleuf);
	float: left;
	margin-left: 3%;
	margin-top: 15px;
}
.body h3 {
	font-size: 2.8vw;
	line-height: 5vw;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0px;
	color: var(--bleuf);
	margin-top: 0%; 
}
.trait-2 {
	margin-top: 0px;
	margin-bottom: 10px;
}

/*----------------------------------------------------  GALERIE  ---------------------------------------------------------*/

.galerie {
	width: 94%;
	float: left;
	margin-top: 2%;
	margin-left: 3%;
	margin-bottom: 5%;
}
.cadre-1, .cadre-1a {
	width: 28%;
	/*background-color: #f00;*/
	margin-left: 4%;
	margin-top: 2%;
	float: left;
}
.cadre-2, .cadre-2a {
	width: 20%;
	/*background-color: #f00;*/
	margin-left: 4%;
	margin-top: 2%;
	float: left;
}
.cadre-1a, .cadre-2a {
	margin-left: 4%;
}
.cadre-1 img, .cadre-1a img  {
	width: 100%;
}
.cadre-2 img, .cadre-2a img  {
	width: 100%;
}
.lb {
	display: none;
	position: fixed!important;
	z-index: 999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #2a2f3fee;
	text-align:center;
}

.lb img {
	max-width: 90%;
	max-height: 80%;
	margin-top: 5%;
	border: solid 1px #fff;
}

.lb:target {
	outline: none;
	display: block;
}

a.lb:hover {cursor:default;}
img:hover {cursor:pointer;}





/* -------------------------------------------------------------------------  + 500px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 500px) {
/*------------------------------------------------------  HEADER  ---------------------------------------------------------*/

.header {
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	float: left;
}
.fond {
	width: 100%;
	position: relative;
	float: left;
}

.fond img {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.barre {
	width: 100%;
	height: 17px;
	background-color: #53BFD9; /* bleu clair */
	float: left;
	margin-top: 0.8%;
}

/*------------------------------------------------------  MENU ORDI 1  ---------------------------------------------------------*/

.menu-1 {						/* barre principale */
	width:50%;
	background-color: #fff;
	margin-top: 3%;
	margin-left: 3%;
	float: left;
	position: absolute;
}


/*------------------------------------------------------  MENU TEL  ---------------------------------------------------------*/

.menu-m {
	display: none;
}

/*------------------------------------------------------  BODY  ---------------------------------------------------------*/

.body {
	width: 100%;
	float: left;
	margin-bottom: 0px;
}
.body h2 {
	letter-spacing: 10px;
}
.trait-1, .trait-2 {
	margin-top: 40px;
}
.body h3 {
	font-size: 2.5vw;
	line-height: 5vw;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0px;
	color: var(--bleuf);
	margin-top: 0%; 
}
.trait-2 {
	margin-top: 0px;
}


/*----------------------------------------------------  GALERIE  ---------------------------------------------------------*/

.galerie {
	width: 94%;
	height: 100%;
	float: left;
	margin-top: 2%;
	margin-left: 3%;
	margin-bottom: 5%;
}
.cadre-1, .cadre-1a {
	width: 18%;
	/*background-color: #f00;*/
	margin-left: 2.5%;
	margin-top: 2%;
	float: left;
}
.cadre-2, .cadre-2a {
	width: 14.55%;
	/*background-color: #f00;*/
	margin-left: 2.5%;
	margin-top: 2%;
	float: left;
}
.cadre-1a, .cadre-2a {
	margin-left: 0%;
}
.cadre-1 img, .cadre-1a img  {
	width: 100%;
}
.cadre-2 img, .cadre-2a img  {
	width: 100%;
}
.lb {
	display: none;
	position: fixed!important;
	z-index: 999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #2a2f3fee;
    text-align:center;
}

.lb img {
	max-width: 90%;
	max-height: 80%;
	margin-top: 5%;
}

.lb:target {
	outline: none;
	display: block;
}

a.lb:hover {cursor:default;}
img:hover {cursor:pointer;}


}


/* -------------------------------------------------------------------------  + 700px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 700px) {
}

/* -----------------------------------------------------------------------------  + 800px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 800px) {
}

/* -------------------------------------------------------------------------  + 900px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 900px) {
}


/* -------------------------------------------------------------------------  + 1100px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 1100px) {
}


/* -------------------------------------------------------------------------  + 1200px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 1200px) {		
}


/* -------------------------------------------------------------------------  + 1350px  -------------------------------------------------------------------------------  */

@media screen and (min-width: 1350px) {
}