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

@font-face {
    font-family: "hurufo";
    src: url('fonts/HurufoNumeroThin.woff') format('woff');
    src: url('fonts/HurufoNumeroThin.ttf') format('truetype');
}

@font-face {
    font-family: "geo";
    src: url('fonts/GeosansLight.ttf');
}

html{
}

body {
	margin:auto;
	padding: auto;
  	width: 100%;
    min-width:230px;
  	height: 100%;
    max-width:1250px;
  	z-index: 0;
	background-color:white;
	
}

#bandeau{
    float:left;
    position:fixed;
    width:210px;
    height:100%;
	z-index:20;
}

#navmob{
    display: none;
    
}

#mainmenu{
	width:210px;
    position:absolute;
    top:20vh;
	background-color:#FFF;
	text-align:right;
	font-family: hurufo;
	font-size:23px;
	z-index:20;
}

.logoSeul{
	display:none;
    text-align: center;
	opacity:0.45;
	margin-top:20px;
}

.logoSeulPage{
	opacity:0.45;
    text-align:center;
    margin-top:20px;
}



ul{
	padding:0;
}

#mainmenu li{
	padding: 10px;
	list-style:none;
	color:#777;
	background: linear-gradient(to left,#CCC,#FFF) no-repeat,#FFF;
	transition: background-size .3s ease-in-out;
	background-size: 0 100%;
}

#mainmenu li:hover{
	padding-right:10px;
	background-size:100% 100%;
}

/*menu slide (petits écrans)*/
#menu{
    display:none;
}

.actuelle{
	font-style:normal;
	padding: 10px;
	list-style:none;
	color:#FFF;
	background:linear-gradient(to left,#999,#BBB,#FFF) no-repeat;
}

#page{
	text-align:center;
	height:100%;
	margin-left:210px;
	min-width:230px;
}

h1{
    font-family: geo;
    font-size:30px;
    letter-spacing:20px;
    word-spacing:30px;
    color:white;
    width:90%;
    margin:auto;
}

h2{
    font-size:21px;
    text-align:left;
	margin:20px auto;
    width:98%;
}

h3{
    font-size:28px;
	text-align:center;
}

p{
    
}

a{
	font-style:normal;
	text-decoration:none;
	color:#777;
}

.listeTarif li{
	list-style: none;
}

.conCentr{
	text-align:center;
}

.contlogo{
    margin:40px auto 5px auto;
    width:100%;
    text-align: center;
    
}

.logopart{
	vertical-align:top;
    text-align: center;
}

#paragraphe{
	font-family:hurufo;
	font-size:18px;
	color:#777;
	width: 85%;
	text-align: center;
	margin: 0 auto 0 auto;
}

#sousparagraphe{
	display: inline-block;
	text-align: center;
	align-items: center;
	font-family:hurufo;
	font-size:18px;
	color:#777;
	margin-bottom: 30px;
	padding: -10px;
}

#sousparagraphe p{
	margin:20px;
}

.contact{
    display: inline-block;
    vertical-align: middle;
}

.contact p{
    display:inline-block;
}

.tarifs{ /*page natation*/
    display:flex;
    flex-wrap: wrap;
}

.tarifs .art{
    font-size: 18px;
    display:inline-block;
    margin:0 20px 20px 20px;
    flex:auto;
}

form {
  display: inline-block;
  vertical-align: middle;
  /* Uniquement centrer le formulaire sur la page */
  margin: 0 auto;
  width: 500px;
  /* Encadré pour voir les limites du formulaire */
  padding: 1em;
  border: 1px solid #CCC;

}

form div + div {
  margin-top: 1em;
}

label {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  /* Pour s'assurer que tous les champs texte ont la même police.
     Par défaut, les textarea ont une police monospace */
  font: 1em sans-serif;

  /* Pour que tous les champs texte aient la même dimension */
  width: 400px;
  box-sizing: border-box;

  /* Pour harmoniser le look & feel des bordures des champs texte */
  border: 1px solid #999;
}

input:focus, textarea:focus {
  /* Pour souligner légèrement les éléments actifs */
  border-color: #000;
}

textarea {
  /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
  vertical-align: top;

  /* Pour donner assez de place pour écrire du texte */
  height: 10em;
}

.button {
  /* Pour placer le bouton à la même position que les champs texte */
  padding-left: 90px; /* même taille que les étiquettes */
}

button {
  /* Cette marge supplémentaire représente grosso modo le même espace que celui
     entre les étiquettes et les champs texte */
  margin-left: .5em;
}

p{
    text-align:justify;
	display:inline-block;
}

.conCentr table{
	margin:10px 8% 10px 8%;
	display:inline-block;
	text-align: left;
	vertical-align: top;
}

.horete table{
	margin:10px 8% 10px 8%;
	display:inline-block;
	text-align: center;
	vertical-align: top;
	border-collapse: collapse;
}

.horete table{
	text-align: center;
}

th{
	text-decoration:underline;
	font-weight:100;
	margin:10px;
}

.horete td, .horete th{
	width: 8%;
   border: 1px solid grey;
}

.horete td{
}

.image1, .image2, .image21, .image22, .image23, .image31, .image32, .image41, .image42, .image43, .image44
, .image51, .image52, .image61, .image62, .image71, .image72, .image81, .image82, .image83, .image811, .image812
, .image821, .image822, .image831, .image832, .image841, .image842 {
  position:relative;
  width:100%;
  min-width:230px;
  margin:auto;
  padding: auto;
  text-align:center;
  background-attachment:fixed;
  background-position:center;
  background-repeat: no-repeat;
  background-size: cover;
}

.image1 {
  background-image: url("images/IMG_0096.jpg");
  min-height: 100vh;
}

.image2 {
  background-image: url("images/IMG_0824.jpg");
  min-height: 70vh;
}

.image21 {
  background-image: url("images/IMG_0651.jpg");
  min-height: 100vh;
}

.image22 {
  background-image: url("images/IMGP4752.jpg");
  min-height: 60vh;
  background-position: 50% 90%;
}

.image23 {
  background-image: url("images/IMG_0654.jpg");
  min-height: 50vh;
}

.image31 {
  background-image: url("images/nagePalmes.jpg");
  min-height: 100vh;
}

.image32 {
  background-image: url("images/nagePalmes2.jpg");
  min-height: 70vh;
}

.image41 {
  background-image: url("images/fondNat.jpg");
  min-height: 100vh;
}

.image42 {
  background-image: url("images/nage.jpg");
  min-height: 70vh;
}

.image43 {
  background-image: url("images/nage2.jpg");
  min-height: 60vh;
}

.image44 {
  background-image: url("images/IMG_44.jpg");
  min-height: 70vh;
}

.image51 {
  background-image: url("images/mention.jpg");
  min-height: 100vh;
}

.image52 {
  background-image: url("images/mentionFin.jpg");
  min-height: 60vh;
  background-position: center calc( 12vh - 40px);
}

.image61 {
  background-image: url("images/aquaCont.jpg");
  min-height: 100vh;
}

.image62 {
  background-image: url("images/contact.jpg");
  min-height: 100vh;
}

.image71 {
  background-image: url("images/IMG_0300.jpg");
  min-height: 100vh;
}

.image72 {
  background-image: url("images/IMG_0257.jpg");
  min-height: 500px;
}

.image81 {
  background-image: url("images/bienetre.jpg");
  min-height: 100vh;
}

.image82 {
  background-image: url("images/IMG_ALOE2.jpg");
  min-height: 100vh;
}

.image83 {
  background-image: url("images/IMG_ALOE3.jpg");
  min-height: 70vh;
  background-position: 9vw center;
}

.image811 {
  background-image: url("images/AloeBoissonsGd2.jpg");
  min-height: 44vw;
  background-position: center top;
  background-size: 100%;
}

.image812 {
  background-image: url("images/IMG_ALOE4.jpg");
  min-height: 50vh;
}

.image821 {
  background-image: url("images/AloeCompAliGd2.jpg");
  min-height: 42vw;
  background-position: right top;
  background-size: 100%;
}

.image822 {
  background-image: url("images/IMG_ALOE5.jpg");
  min-height: 50vh;
}

.image831 {
	background-image: url("images/AloeSportGd2.jpg");
	min-height: 44vw;
	background-position: center top;
	background-size: 100%;
}

.image832 {
  background-image: url("images/IMG_ALOE3.jpg");
  min-height: 70vh;
  background-position: center top;
}

.image841 {
  background-image: url("images/AloeSoinsGd2.jpg");
  min-height: 44vw;
  background-position: center top;
  background-size: 100%;
}

.image842 {
  background-image: url("images/IMG_ALOE6.jpg");
  min-height: 100vh;
  background-position: center center;
}

.imageText {
  float:right;
  margin:0% 0% 5% 5%;
  max-width:240px;
  min-width:100px;
}

#menuAloe{
	margin-bottom: 100px;
}

.titreMenuAloe{
	position:relative;
	display:inline-block;
	text-align: center;
	width:40%;
}

.txtMenuAloe{
	font-size: 3vw;
	font-weight: 800;
	letter-spacing: .12rem;
	line-height: 90%;
	position: absolute;
	vertical-align: middle;
	top:100%;
	left: 50%;
	padding:10px 0;
	transform: translate(-50%, -100%);
	color:#555;
	background-color: rgba(255, 255, 255, .5);
	width:100%;
}

.textAloe{
	vertical-align:middle;
	display: inline-block;
	margin: 10px;
	background: linear-gradient(rgba(255, 255, 255, .0), #EEE);
}

.textAloePt{
	vertical-align:middle;
	display: inline-block;
	margin: 10px;
	background: linear-gradient(rgba(255, 255, 255, .0), #EEE);
}

.btcommand{
	width:100px;
	margin: 0 auto;
	background-color: #8fb260;	
	color: #FFF;
}

h4{
}

.imageAloe {
	display: inline-block;
	width:50%;
	vertical-align: middle;
	margin-right: 10px;
	margin-top: 0;
	margin-bottom: -20px;
}

.imageAloeGd {
	width: 50%;
	text-align: right;
	display: inline-block;
	max-width: 260px;
	margin-right: 10px;
	vertical-align: middle;
}

.caption {
  position: absolute;
  top:50%;
  left:0;
  bottom:auto;
  right:0;
  margin:auto;
  max-width:1300px;
  color: #000;
}

.captionScroll {
  position: absolute;
  margin:auto;
  top:auto;
  left:0;
  bottom:30px;
  right:0;
  width:120px;
  max-width:1300px;
  color: #000;
}

.scroll{
	bottom:0;
    margin-top:0px;
	opacity:0.3;
    width:60px;
    text-align: center;
}
    
.caption2{ /*page mentions*/
    position:absolute;
    background:white;
    opacity:0.5;
    width:100%;
    bottom:80px;
    display:flex;
    flex-wrap: wrap;
    text-align:center;
}
    
.logolist{ /*page mentions*/
    width:40%;
    object-fit:scale-down;
    height:80px;
    display:inline-block;
    margin:auto;
    padding:10px;
    max-width:130px;
    flex:auto;
}

#bas{
	font-family:hurufo;
	background-color:#BBB;
	text-align: center;
	padding:10px 30px 0px 30px;
	resize:horizontal;
	font-size:18px;
}

#bas p {
    font-size:18px;
	color:#FFF;
    margin:0;
}

#bas .art{
    display:inline-block;
	color:#FFF;
    width:45%;
    text-align: left;
    vertical-align:top;
}

#bas .copyright{
	color:#FFF;
	font-size:18px;
}

#bas .logonom{
    background-image: url("images/logoLong.png");
    background-repeat: no-repeat;
    height:18px;
}

#part article{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:80px;
	min-height:80px;
	max-width:700px;
	text-align:left;
}


@media (min-width:1300px){
    .image1, .image2, .image21, .image22, .image23, .image31, .image32, .image42, .image43, .image51, .image52, .image61, .image62, .image71, .image72  {
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1300px;
        background-position:50%;
    }
    
    .image41{
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1380px;
        background-position:50%;
    }
    
    .image43{
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1380px;
        background-position:50% 100%;
    }
    
    .image44{
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1380px;
        background-position:50% 100%;
    }
}
    
    
@media (min-height:900px){
    //*.image1, .image2, .image21, .image22, .image23, .image31, .image32, .image41, .image42, .image43, .image44, .image51, .image52, .image61, .image62, .image71, .image72 {
        position:relative;
        background-attachment:fixed;
        background-repeat: no-repeat;
        background-size:1300px;
        background-position:40% 50%;
    }
    
    .image1{
        min-height:50vh;
        background-position:50% calc( 10vh - 370px );
    }
    
    .image2{
        min-height:50vh;
        background-position:50% 100%;
    }
    
    .image21{
        min-height:70vh;
        background-position:100% calc( 15vh - 370px );
    }
    
    .image22{
        min-height:50vh;
        background-position:50% 100%;
    }
    
    .image23{
        min-height:300px;
        background-attachment:scroll;
        background-size: 60%;
    }
    
    .image31{
        min-height:50vh;
        background-position:50% -15vh;
    }
    
    .image32{
        min-height:50vh;
        background-position:50% 100%;
    }
    
    .image41 {
        min-height:50vh;
        background-position:50% -15vh;
    }

    .image42 {
        min-height:300px;
        background-attachment:scroll;
        background-size: 60%;
    }

    .image43 {
        min-height:300px;
        background-attachment:scroll;
        background-size: 60%;
    }

    .image44 {
        min-height:50vh;
        background-position:50% 100%;
    }

    .image51 {
        min-height: 50vh;
        background-size:1300px;
        background-position:50% -160px;
    }

    .image52 {
        min-height: 50vh;
        background-size:1800px;
        background-position:50% calc( 85% + 300px);
    }

    .image61 {
        min-height: 50vh;
        background-position:50% 0%;
    }

    .image62 {
        min-height: 50vh;
        background-position:50% calc( 85% + 250px);
    }

    .image71 {
        min-height: 50vh;
        background-position:50% 0%;
    }

    .image72 {
        min-height: 50vh;
        background-position:50% calc( 85% + 150px);
    }*/
    
    .scroll{
        visibility: hidden;
    }
}


@media (max-width:959px) {
    #page{
	   margin-left:0px;
	   position:absolute;
	   text-align:center;
	   height:100%;
       width:100%;
    }
    
    #bandeau{
        display:none;
    }

    #navmob{
        background-color: #FFF;
        position: fixed;
        width: 100%;
        top:0;
        display: block;
        transition: top 0.6s;
        -webkit-transition: top 0.6s;
        box-shadow:0 -4px 8px #000;
        z-index:20;
    }
    
    #mainmenu{
        display: none;
    }
    
    .logoSeulPage{
        display:inline-block;
        position:relative;
        margin:10px;
        margin-left:10px;
    }
    
    /* Menu burger */
    #menu-burger {position:absolute; top:1em; right:2em; display:inline-block; cursor:pointer;}
    #menu-burger .bar1,
    #menu-burger .bar2,
    #menu-burger .bar3 {width:32px; height:5px; background-color:#AAA; margin:6px 0; transition:0.4s;}
    #menu-burger:hover {opacity:.75; transition:0.5s;}
    #menu-burger.clicked .bar1 {-webkit-transform:rotate(-45deg) translate(-9px, 8px); transform:rotate(-45deg) translate(-9px, 8px);}
    #menu-burger.clicked .bar2 {opacity: 0;}
    #menu-burger.clicked .bar3 {-webkit-transform:rotate(45deg) translate(-7px, -7px); transform:rotate(45deg) translate(-7.5px, -7px);}

    /* Main menu (slide) */
    #menu {
        font-family: hurufo;
        font-size: 23px;
        display:block;
        position:fixed;
        left:calc( -7% - 180px );
        top:auto;
        background:#FFF;
        padding:6em 0em 0 2em;
        width:calc( 7% + 130px );
        min-height:100%;
        box-shadow:-4px 0 8px #000;
        z-index: 5;
        }
    #menu ul li {
        list-style:none;
    }
    #menu ul .actuelle{
        display:block;
        color:#FFF;
        background: linear-gradient(to left,#999,#BBB,#FFF) no-repeat,#FFF;
        padding:10px;
        text-align:right;
    }
    #menu ul li a {
		display:block;
		color:#777;
		background: linear-gradient(to left,#CCC,#FFF) no-repeat,#FFF;
	   transition: background-size .3s ease-in-out;
		-webkit-transition: background-size .3s ease-in-out;
		background-size:0% 100%;
		padding:10px;
		text-align:right;
    }
    #menu ul li a:hover {
        background-size:100% 100%;
        transition:background-size .3s ease-in-out;
        -webkit-transition:background-size .3s ease-in-out;
    }

    #menu.visible {
        animation:.5s slideRight ease-in forwards ;
        transition-delay:0;
        -webkit-transition-delay:0;
    }
    #menu.invisible {
        animation:1s slideLeft ease-out forwards;
        transition-delay:0;
        -webkit-transition-delay:0;
    }

    /* Animations pour le menu slide */
    @keyframes slideRight {
	   from {left:-36%;}
	   to {left:-5%;}
    }
    @-webkit-keyframes slideRight {
	   from {left:-36%;}
	   to {left:-5%;}
    }
    @keyframes slideLeft {
	   from {left:-5%;}
	   to {left:-36%;}
    }
    @-webkit-keyframes slideLeft {
	   from {left:-5%;}
	   to {left:-36%;}
    }
}




@media (max-width:600px){
    
    #menu {
        left:-108%;
        width:108%;
       margin-top: -700px;
        margin-left:calc( -3% - 50px );
    }
    
    #menu ul {
        margin-top:630px;
        font-size: 5vh;
        text-align: center;
    }
    
    #menu ul li a, #menu ul .actuelle{
        text-align: center;
    }
    
    /* Animations pour le menu slide */
    @keyframes slideRight {
	   from {left:-108%;}
	   to {left:0%;}
    }
    @-webkit-keyframes slideRight {
	   from {left:-108%;}
	   to {left:0%;}
    }
    @keyframes slideLeft {
	   from {left:0%;}
	   to {left:-108%;}
    }
    @-webkit-keyframes slideLeft {
	   from {left:0%;}
	   to {left:-108%;}
    }
    
    #menu-burger{
        top:0.6em;
        right:1em
    }
    
    .logoSeulPage img{
        width:100%;
    }
    
    .logoSeulPage{
        max-width:70px;
    }

    .scroll{
        bottom:0;
        margin-top:0px;
        opacity:0.5;
        width:50px;
        text-align: center;
    }
    
    h1{
        font-family: geo;
        font-size:5vw;
        letter-spacing:3.5vw;
        word-spacing:30px;
        color:white;
        width:90%;
        margin:auto;
    }
    
    form{
        display:none;
    }
    
    #bas{
        height:auto;
        width:auto;
    }
    
    #bas .art {
        width:200px;
        margin-bottom: 30px;
    }
    
    #bas .copyright{
        font-size: 3vw;
    }

    #bas .logonom{
        background-image: url("images/Minilogo.png");
        background-repeat: no-repeat;
        height:25px;
    }
}


@media (max-height:300px){
    .scroll{
        display:none;
    }
}
	
/*@media screen and (max-aspect-ratio: 32/20){
    body {

    }
}*/