* {
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

  --transition-0: all 0s;
  --transition-2: all .25s;

  -webkit-transition: var(--transition-2);
  -moz-transition: var(--transition-2);
  transition: var(--transition-2);
}

*::-webkit-scrollbar {
  display: none;
}

html {
  height: auto;
	margin: 0 auto;
	width: 100%;
}

body {
  --bk-color: #C0D0F0;
  --bk-page-color: #F8F4F0;
  --bk-header-color: #243454;
  --title-color: #243454;
  --tx-color: #323232;
  --tx-grey-color: #606060;

  --max-width: 1600px;

    display:block;
    text-align: center;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: 100;
    line-height: 1.4em;
    color: var(--tx-color);
    background-color: var(--bk-color);
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding: 0;
    max-width: var(--max-width);
    position: relative;

    -webkit-hyphens: auto; /* c�sure propre */
    -moz-hyphens: auto; /* c�sure propre */
    hyphens: auto;
    word-wrap: break-word; /* passage � la ligne forc� */
    -webkit-overflow-scrolling: touch;
}

a, a:active {
	text-decoration: none;
	color: #A0B0D0;
}

a:hover, a:focus {
	color: #FFF;
}

.color_tel {
	color: #FFF;
}


.bordeaux_clair {
	color: #A0B0D0;
}

.bordeaux {
	color: #243454; /*#CC0070*/;
}

img {
	display: inline;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/*** headers ***/
#header {
	float: none;
	display: inline-block;
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#inner {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    min-height: 52px;
    background: #243454;
    padding: 0;

    margin: 0 auto;

    border-bottom: 2px solid #CCC;

    padding-bottom: 16px;
}

#menubutton, .nojs #menubutton {
		position: fixed;
		display: inline-block;
		text-align: center;
		width: 32px;
		height: 32px;
		padding: 0px;
		font-variant: small-caps;
		margin: 0 0 7px 0;
		right: 10px;
		top: 10px;
		border-radius: 6px;
		background: #FFF;
		border: 1px solid #243454;
	display: none;
}

#nav, #nav-bar {
	display: inline-block;
	float: right;
	width: 90%;
	max-width: 620px; /* largeur du menu */
	padding: 0;
	text-align: center;
	margin: 5px auto 0 auto;

	position: absolute;
	right: 3%;
	bottom: 0; /* positionne par rapport � top, sinon la nav-bar remonte */
	z-index: 11;
}

#nav-bar { /* ligne au dessus du menu */
	border-top: 1px solid #FFF;
	margin: 0 auto;

	bottom: 40px;
}

#nav ul {
	display: block;
	list-style: none;
	width: 100%;
	margin: 6px auto;
	padding : 0;
}

#nav li {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    width: 19%; /* largeur des �l�ments de menu : d�pend du nombre d'�lements */
    border-radius: 6px;
}

#nav li a {
    display: inline-block;
    text-align: center;
    padding: 0;
    width: 100%;
    color: #FFF;
    font-size: 0.9em;
}

#nav li a.cur:before, #nav li a.cur:after {
    font-family: Webdings;
    color: #A0B0D0;
}

#nav li a.cur:before {
    content: '\f034\f020';
}

#nav li a.cur:after {
    content: '\f020\f033';
}

#nav li:hover a {
    color: #A0B0D0;
    font-size: 1.1em;
    width: 120%;
    margin-left: -10%;
}

#nav li li {
	display: inline-block;
	width: 100%;
	color: black;
	line-height: 30px;
}

#nav li li:last-of-type {
}

#nav li:hover li a {
    color: #243454;
    font-size: 0.9em;
    width: 100%;
    margin-left: 0;
    line-height: 30px;
}

#nav li li a:hover {
    color: #A0B0D0;
    font-size: 1.1em;
    width: 120%;
    margin-left: -10%;
}

#nav li div.c {
	position: absolute;
	width: 25%; /* width > 19% */
	opacity: 0;
	left: -200em;
	margin-left: -3%; /* margin-left = diff on width / 2 */
}

#nav li ul {
	position: relative;
	width: 100%;
	margin-top: 8px;
	border: 1px solid black;
	border-radius: 6px;
	background: white;
	color: white;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
}

#nav li:hover div.c {
	opacity: 1;
	left: auto;
}

.logo {
	display: inline-block;
	float: left;
	width: 380px;
	max-width: 90%;
	margin: 2em 1% 0 1%;
	padding-bottom: 5px;
	border: 0px solid #0A8;
	opacity: 1;
	position: relative;
  transition: none;
}

.logo2 {
	opacity: 0;
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: -100px;
	margin: 2px auto 0;
  max-width: 250px;
  top: -2px;
}

h1 {
	display: inline-block;
	font-variant: small-caps;
	font-size: 1em;
	line-height: 1.5em;

	margin: 2em 0 0 0;

	padding: 0 0 2em 0;

	color: #A0B0D0;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none;
	text-align: center;

  position: relative;
  max-width: 620px;
}

h1 p {
	margin: 0;
	padding: 0;
	font-weight: 400;
}

h1 .main {
	color: #FFF;
	font-size: 1.4em;
	letter-spacing: 0px;
	margin-bottom: 0.0em;
}

h1 .ville {
    font-size: 1.2em;
    color: #D0E0FF;
    margin-bottom: 1em;
}

/*************** SHRINK **************/
#header.shrink {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  margin-top: 0;
  background: transparent;
  border-bottom: 0;
}

.shrink .logo {
  opacity: 0;
  position: absolute;
  top: -400px;
  left: 0;
}

.shrink h1 {
  display: none;
}

.shrink .logo2 {
  opacity: 1;
  left: 0;
}

/*** content ***/
#content {
	position: relative;
	background-color: var(--bk-page-color);
	padding-top: 250px;
	margin-top: 0;
}

.layout_content {
	text-align: center;
	display: block;
	margin: 0 auto;
	border: 0px solid #A08;
	padding: 3em 1%;
	border-bottom: 2px solid #CCC;
	font-size: 0.9em;
	color: var(--tx-color);
}

h2, .titrehome {
	display: block;
	max-width: 540px;
	letter-spacing: 1px;
	font-size: 1.2em;
	line-height: 1.65em;
	font-weight: 400;
	font-style: italic;
	margin: 0 auto 2em auto;
	padding: 0 5% 1em 5%;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none;
	border: 0px solid #08A;
	color: #4E6AB2;
}

h2 span {
	display: inline-block;
}

h2 {
    color: #FFF;
    background-color: #3C4C7C;
    border-radius: 20px;
    padding-top: 1em;
}

.titrehome span.gt {
    font-size: 1.4em;
    font-style: normal;
    border-bottom: 1px dotted #4E6AB2;
}

h3 {
	font-size: 1.1em;
	font-weight: normal;
	color: #4E6AB2;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	hyphens: none;
	text-align: left;
	width: 95%;
	padding: 0 0 0 5%;
	margin-bottom: 1em;
}

h3:before {
    font-size: 0.85em;
    font-family: Webdings;
    color: black;
    content: '\f034\f020';
}


h3:first-of-type {
	margin-top: 3em;
}

h3.pres {
    text-align: justify;
    padding: 0;
    width: 100%;
    font-size: 1em;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

h3.pres:before {
    content: '';
}


h3.pres:first-of-type {
	margin-top: 0;
}


.illus-800, .illus-400, .illus-300, .illus-200 {
    width: 100%;
    max-width: 800px;
    margin: 2em auto 3em auto;
    border: none;
}

.illus-400 {
    max-width: 400px;
}

.illus-300 {
    max-width: 300px;
}

.illus-200 {
    max-width: 200px;
}


.col_1 {
  display: inline-block;
	border: 0px solid #08A;

  max-width: 520px;
  width: 95%;
  margin: 0 auto;

	text-align: justify;
	line-height: 1.75em;
	vertical-align: top;
}

.col_1 .title {
	display: inline-block;
	width: auto;

	padding: 0 3em 0.2em 1em;
	margin: 2em 0 1.5em 1em;
	border-bottom: 2px solid #4E6AB2;

	text-align: left;
	color: var(--tx-color);
	font-variant: small-caps;
	font-weight: 400;
	font-size: 1.125em;
}

.col_1 ul {
	border: 0px solid #08A;
	margin: 0 auto;
	padding: 0.5em 0 0.5em 1em;
}

.col_1 p, .col_1 ul {
	font-size: 0.975em;
	text-align: justify;
}


.col_1 li {
	padding: 0.5em 0;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.col_1 .keyword, strong {
  font-weight: 700;
}

.col_1 br {
	display: inline-block;
	margin-bottom: 2em;
}

/*** footer ***/
.layout_footer {
	text-align: center;
	float: none;
	background: #243454;
	color: #FFF;
	display: block;
	border: 0px solid #A08;
	padding: 1em 0;
	border-top: 1px solid #666;
}

.layout_footer .col_1 {
	width: 96%;
	max-width: 45%;
	margin: 0 1%;
	text-align: center;
	line-height: 1.4em;
}

.layout_footer .col_1 br {
	display: inline;
	margin-bottom: 0em;
}


/******************      pages d'erreur     ************/
.page-error {
    width: 95%;
    padding: 1em 2.5% 3em 2.5%;
    font-size: 1.3em;
    line-height: 1.55em;
    color: #999;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}

.page-error .errnum {
    font-size: 2.3em;
    font-weight: bold;
    color: #4E6AB2;
    line-height: 1.3em;
    font-variant: small-caps;
}

.page-error .errnum span {
    font-size: 1.8em;
}

.page-error .errtxt {
    font-size: 1.2em;
    font-weight: normal;
    color: #4E6AB2;
    line-height: 1.2em;
}


.page-error a {
    color: #4E6AB2;
    font-weight: bold;
}

.page-error a:hover {
    color: #A0B0D0;
}

.ins {
    display: inline-block;
}




.flx {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;

  width: 100%;
  padding: 0 3%;
}

.flx > div {
  display: flex;
  flex-direction: column;
}

.col_1 {
  flex-basis: 40%;
}


/***************************
****************************

	RESPONSIVE

****************************
****************************
*/
@media screen and (min-width: 1025px)
{
  h1 {
    width: 95%;
    float: right;
    right: 3%;
  }
}

@media screen and (min-width: 1200px)
{
  .flx {
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
  }
}

@media screen and (min-width: 1601px)
{
  #content {
    margin: 10px auto;
  }
}

@media screen and (max-width: 767px)
{
	.layout_content, .layout_footer {
		margin-left: 0;
		margin-right: 0;
	}

	#header, #inner {
		margin-left: 0;
		margin-right: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	#content {
	    padding-top: 410px;
	}

  #content.shrink {
	    padding-top: 254px;
	}

	.logo {
		float: none;
		max-width: 95%;
		margin: 0 auto;
	}

	h1 {
		margin: 0 auto;
		width: 95%;
	}

	h1 .main {
		margin-bottom: 1.2em;
	}

	.layout_content {
	    font-size: 0.95em;
	}

	.layout_footer {
		margin-bottom: 0;
	}

	.col_1 {
    margin: 0 3% 2em 3%;
    width: 94%;
		text-align: center;
	}

	.layout_footer .col_1 {
		max-width: 45%;
		margin: 0 1%;
	}

	.col_1 .title {
		width: auto;
		padding: 0 1.5em 0.2em 1.5em;
		margin: 2em auto 1.5em auto;
	}

	.col_1 br {
		margin-bottom: 1.5em;
	}

	.col_1 p, .col_1 ul {
		font-size: 1em;
	}

	#menubutton {
		display: inline-block;
	}

	.shrink #menubutton {
	    top: 10px;
	    right: 10px;
	}

	#menubutton .icon-bar { /* les troits traits du bouton de menu */
		background-color: #243454;
		display: block;
		width: 75%;
		margin: 0 auto 3px auto;
		height: 4px;
		border-radius: 2px;
	}

	#menubutton .icon-bar.a {
		margin-top: 7px;
	}

	#menubutton .icon-bar.b {
	}

	#menubutton:hover .icon-bar {
	    background-color: #A0B0D0;
	}

	#nav {
	    display: none;
	    position: fixed;
	    top: 10px;
	    bottom: auto;
	    right: 53px;
	    margin-right: 0;
	    width: 80%;
	    max-width: 400px;
	    border-radius: 6px;
	    background: #FFF;
	    border: 1px solid #243454;
	    font-size: 1.1em;
	}

	#nav-bar {
	    display: none;
	}

	#nav.act, .nojs #nav {
	    display: inline-block;
	}

	.shrink #nav.act {
	    top: 58px;
	    right: 10px;
	}

	#nav li a {
	    color: #243454;
	}

	.nojs #nav {
	    position: relative;
	    width: 90%;
	    right: auto;
	    bottom: auto;
	    max-width: 100%;
	    margin: 0 auto;
	    border: none;
	    border-radius: 0;
	    border-top: 1px solid #FFF;
	    padding: 2px 5%;
	    background: none;
	}

	.nojs #nav li a {
	    color: #FFF;
	}

	#nav li {
	    width: 100%;
	    padding: 10px 0 0 0;
	    min-height: 32px;
	}

	#nav li:hover a {
	    color: #A0B0D0;
	    width: 100%;
	    margin-left: auto;
	}

	#nav li div.c {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		margin-left: 0;
		opacity: 1;
	}

	#nav li:hover div.c {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		margin-left: 0;
	}

	#nav li ul {
		background: none;
		border: none;
		box-shadow: none;
	}

	#nav li li {
		color: #A0B0D0;
	}

	.nojs h1 p {
	    display: none;
	}

	.nojs h1 .main {
	    display: inline-block;
	}
}

@media screen and (max-width: 639px)
{
	.layout_content {
	    font-size: 1em;
	}

	.layout_footer .col_1 {
	    max-width: 80%;

	    margin-top: 1em;
	    margin-bottom: 1em;
	}

	h3 {
		padding: 0 5% 0 0;
		margin-bottom: 0;
	}

	.illus-800, .illus-400, .illus-300 {
	    width: 98%;
	}

	h2 {
	    font-size: 1em;
	}

  h3.pres {
    margin-bottom: 1em;
  }

}

.transp {
	display: none;
}

@media screen and (max-width: 399px)
{
  .transp {
  	z-index: 11;
  	display: none;
  	position: fixed;
  	top: 50%;
  	left: 5px;
  	height: auto;
  	width: 52px;
  }

  .bouton.a, .bouton.b {
  	display: inline-block;
  	position: absolute;
  	width: 48px;
  	height: 48px;
  	top: -53px;
  	border: 1px solid black;
  	background: rgba(0,0,0, 0.2);
  }

  .bouton.b {
	   top: 5px;
  }

  .bouton:hover {
	   background: rgba(255,255,255, 1);
  }

  h2 {
  	max-width: 100%;
  	border-radius: 6px;
  	width: 90%;
  	padding-left: 5%;
  	padding-right: 5%;
  	font-size: 0.95em;
  	font-weight: 400;
  }
}

@media screen and (max-width: 320px)
{
  .titrehome span.gt {
    font-size: 1.2em;
  }
}

/********************************************/
/********************************************/
/********************************************/
/********************************************/
/********************************************/
/**  ICI TEMPORAIRE AVANT OUVERTURE  **/
/********************************************/
/********************************************/
/********************************************/
/********************************************/
/********************************************/
body {
  --max-width: 100vw;
  --max-height: 100vh;
  --couleur-1: hsl(230 90% 18% / 1);
    background-color: var(--couleur-1);
    margin: 0 auto;
    padding: 0;
    max-width: var(--max-width);
    max-height: var(--max-height);
    max-width: 100%;
}

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  /* height: min(500px, 100%); */
  transform: translate(-50%, -50%);
  display: grid;
  gap: 3em;
}

.logo.ouverture-prochaine {
  display: grid;
  position: relative;
  width: auto;
  max-width: 100%;
  margin: auto;
  padding: 0 0 4em;
  gap: 1.5em;
}

.logo.ouverture-prochaine img {
  display: block;
  width: min(100%, 300px);
  margin: auto;
}

.slogan, .petit {
  font-size: 1.3em;
  font-family: sans-serif;
  line-height: 1.4em;

  color: hsl(220 40% 85% / 1);
  width: min(95%, 800px);
  margin: auto;
}

.petit {
  font-size: 1.0em;
  line-height: 1.25em;
}

.petit.ouv {
  font-size: 1.65em;
  color: hsl(190 95% 90% / 1);
  font-weight: 500;
  letter-spacing: 1px;
}

.tres.petit {
  font-size: 0.85em;
}

.emphase {
  font-size: 1.325em;
}

@media screen and (max-width: 800px)
{
  .logo.ouverture-prochaine {
    padding: 0 0 1em;
  }

  .logo.ouverture-prochaine img {
    width: min(100%, 270px);
  }

  @media screen and (orientation: landscape)
  {
    .container {
      gap: 0;
    }

    .logo.ouverture-prochaine {
      padding: 0em 0;
      gap: 0;
      display: flex;
    }

    .logo.ouverture-prochaine img {
      width: min(100%, 240px);
    }

    .slogan, .petit {
      font-size: 1.1em;
      line-height: 1.3em;
    }

    .petit {
      font-size: 0.925em;
      line-height: 1.20em;
    }

    .petit.ouv {
      font-size: 1.40em;
    }

    .tres.petit {
      font-size: 0.80em;
    }
  }

  @media screen and (max-width: 360px)
  {
    .logo.ouverture-prochaine {
      padding: 0;
      gap: 0;
    }

    .logo.ouverture-prochaine img {
      width: min(100%, 210px);
    }

    .petit.ouv {
      font-size: 1.5em;
    }

    @media screen and (max-width: 360px)
    {
      .slogan {
        font-size: 1.1em;
      }

    }

  }

}