/*@import url('https://fonts.googleapis.com/css?family=Questrial');*/


/* =Reset  */


/* FONTELLO */
@import 'fonts/symbols/font.css';




@font-face {
    font-family: 'Faune';
    src:   url('fonts/faune/eot/Faune-Display_Black.eot');
    src:   url('fonts/faune/eot/Faune-Display_Black.eot?#iefix') format('embedded-opentype'),
           url('fonts/faune/woff/Faune-Display_Black.woff') format('woff'),
           url('fonts/faune/woff2/Faune-Display_Black.woff2') format('woff2'),
           url('fonts/faune/ttf/Faune-Display_Black.ttf') format('truetype'),
           url('fonts/faune/svg/Faune-Display_Black.svg#svgFontName') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Faune';
    src:    url('fonts/faune/eot/Faune-Display_Bold_Italic.eot');
    src:    url('fonts/faune/eot/Faune-Display_Bold_Italic.eot?#iefix') format('embedded-opentype'),
            url('fonts/faune/woff/Faune-Display_Bold_Italic.woff') format('woff'),
            url('fonts/faune/woff2/Faune-Display_Bold_Italic.woff2') format('woff2'),
            url('fonts/faune/ttf/Faune-Display_Bold_Italic.ttf') format('truetype'),
            url('fonts/faune/svg/Faune-Display_Bold_Italic.svg#svgFontName') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Faune';
    src:    url('fonts/faune/eot/Faune-Display_Thin.eot');
    src:    url('fonts/faune/eot/Faune-Display_Thin.eot?#iefix') format('embedded-opentype'),
            url('fonts/faune/woff/Faune-Display_Thin.woff') format('woff'),
            url('fonts/faune/woff2/Faune-Display_Thin.woff2') format('woff2'),
            url('fonts/faune/ttf/Faune-Display_Thin.ttf') format('truetype'),
            url('fonts/faune/svg/Faune-Display_Thin.svg#svgFontName') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Faune';
    src:    url('fonts/faune/eot/Faune-Text_Bold.eot');
    src:    url('fonts/faune/eot/Faune-Text_Bold.eot?#iefix') format('embedded-opentype'),
            url('fonts/faune/woff/Faune-Text_Bold.woff') format('woff'),
            url('fonts/faune/woff2/Faune-Text_Bold.woff2') format('woff2'),
            url('fonts/faune/ttf/Faune-Text_Bold.ttf') format('truetype'),
            url('fonts/faune/svg/Faune-Text_Bold.svg#svgFontName') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Faune';
    src:    url('fonts/faune/eot/Faune-Text_Italic.eot');
    src:    url('fonts/faune/eot/Faune-Text_Italic.eot?#iefix') format('embedded-opentype'),
            url('fonts/faune/woff/Faune-Text_Italic.woff') format('woff'),
            url('fonts/faune/woff2/Faune-Text_Italic.woff2') format('woff2'),
            url('fonts/faune/ttf/Faune-Text_Italic.ttf') format('truetype'),
            url('fonts/faune/svg/Faune-Text_Italic.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Faune';
    src:    url('fonts/faune/eot/Faune-Text_Regular.eot');
    src:    url('fonts/faune/eot/Faune-Text_Regular.eot?#iefix') format('embedded-opentype'),
            url('fonts/faune/woff/Faune-Text_Regular.woff') format('woff'),
            url('fonts/faune/woff2/Faune-Text_Regular.woff2') format('woff2'),
            url('fonts/faune/ttf/Faune-Text_Regular.ttf') format('truetype'),
            url('fonts/faune/svg/Faune-Text_Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}


html, body{width: 100%;height: 100%;margin:0;}
body{width: 100%;overflow-x: hidden;background: #EFEFEF;position: fixed;overflow: hidden;}
p{font-family: 'EB Garamond', serif;margin:0px 0 15px;font-size: 20px;line-height: 140%;margin-bottom: 30px;-webkit-font-smoothing:antialiased;}
p{font-family: 'Faune';font-size:19px;line-height: 135%;}
h1, h2, h3, h4{font-family: 'Faune';font-weight: black;/*font-style: italic;*/font-size:28px;text-align: left;}
a{color:#000;}
h1{font-size: 22px; line-height: 32px}
h2{font-size: 28px; line-height: 120%}
h3{font-size: 22px; line-height: 120%}
h4{font-size: 20px; line-height: 120%;    margin: 40px 0 8px;}

p.annot{
    font-style: normal;
    /*letter-spacing: 0.05em;*/
    font-size: 18px;
    font-style: italic;
    text-align: left;
}
p.t2{font-size:14px;line-height: 125%;margin-bottom:5px;}
p.date{font-size:14px;font-style: italic;}

.texte p{line-height: 135%}
span.chap{    font-weight: normal;
    font-size: 14px;
    display: block;
    position: absolute;
   
    width: 100%;
    text-align: center;}

    span.chap{
      font-weight: normal;
    font-size: 13px;
    display: block;
    position: absolute;
    color:#333;
     top: -30px;
        /* width: 100%; */
    text-align: center;
    border: 1px dotted #666;
    width: 23px;
    height: 23px;
    border-radius: 30px;
    line-height: 22px;
    margin-left: 283px;
    color:#EFEFEF;
    border:none;
    background: #000;
    }
/*span.chap::after {content: " /";}*/

/* home */
body.home{overflow: auto;position: inherit;}
.home header .container{width: 600px; margin:auto;top: 50%;position: relative;}
#page{width: 600px; margin:auto;padding-left: 180px}
header{height: 100%;}
header #title{margin-top:0;transform:translate(0, -90px);user-select:none;}
header h1{font-size: 70px; line-height: 120%; position: absolute;}
.home .next{top: auto;}
.home section .next{margin-left: 65px;}

.home p.acordeon,.home  .acordeon p,.home  div.acordeon{
text-align: justify;
    }

.home .photos_header{
    left: 50%;
    position: absolute;
    z-index: 100;
    top:100px;
}
.home .photos_header img{
    position: absolute;
    width: 400px;
    height: auto;
    opacity: 0;
    transition:opacity 2s;
}
.home .photos_header img.masque{
    opacity: 0;
    transition:opacity 2s;
    }
.home .photos_header img.visible{
    opacity: 1;
    transition:opacity 2s;
}

section{padding-top:100px;margin:0 0 300px;}
#mentions-remerciements p{font-size: 14px;margin-bottom: 7px;line-height: 135%;}
#itinerances{min-height: 500px;padding: 0; margin: 0; text-align: center;}
.centreH{top: 50%;position: relative;transform: translateY(-50%);width:100%;}

header h1 span{height: 20px;padding-top:30px;opacity: 0;}
/*header h1 span.t2{opacity: 0;transition:opacity 2.5s;transition-delay: 2.5s;}*/


.start header h1 span {
    opacity: 1;
    overflow: hidden;
    /*background: #F99999;*/
    top: 0;
    margin-top: 0;
    /*line-height: 90px;*/
    display: block;
    float: left;
    transform:translate(0,55px);
    -webkit-animation: 3s linear 0s infinite alternate vague;
   animation: 3s linear 0s infinite alternate vague;
   background:#EFEFEF;
}

header h1.title {
        opacity: 0;
    font-size: 70px;
    line-height: 120%;
    height: 100px;
    display: block;
    /*background: #999;*/
    padding: 0;
  }
.start header h1.title {
    opacity: 1;
    transition:opacity 1s;
}


/*
@-webkit-keyframes vague { from { height:55px; } to { height:65px; }  }
@keyframes vague { from { height:55px; } to { height:65px; }  }*/
@-webkit-keyframes vague { from { transform:translate(0,55px); } to { transform:translate(0,65px) }  }
@keyframes vague { from { transform:translate(0,55px); } to { transform:translate(0,65px) }  }

#en-attendant-la-mer{position: absolute;top:0;}


#sommaire{position: absolute; top:100%; /*margin-top:-80px*/; width:270px;text-align: right;left: 50%;margin-left: -515px}
#sommaire h3{font-size: 15px;text-align: right; overflow: hidden; height: 12px; transition:height 0.5s ease; font-weight: normal;margin:0;}
#sommaire #bt4 h3{font-size:22px;height: 18px;font-weight: bold;}
#sommaire #bt0 h3 {font-size: 28px;height: 23px;font-weight: bold;}
#sommaire #bt0{margin-bottom: 36px;}
#sommaire a {height: 28px; text-decoration: none;display: block;}
#sommaire a#bt4{height: 30px;padding:5px 0 14px;}

#sommaire a:hover h3{height: 20px}
#sommaire a#bt4:hover h3{height: 30px}
#sommaire a.actif h3{height: 20px}
#sommaire a#bt4.actif h3{height: 30px}

a.lienItin{color: #000;text-decoration:none;text-align:center;display:inline-block;width:250px;}
a.lienItin *{display:inline-block;}
.lienItin h2{margin-bottom: 5px;margin-top: 0px;}
.lienItin h3{margin-top: 5px;font-size: 16px;font-weight: 400}
a.lienItin .nav{transition:transform 0.5s ease;}
a.lienItin:hover .nav{transform:scale(0.9);}
/*.start header {
    transition:all 2s;transition-delay: 8s;
    transform: scale(0.5);
    transform-origin: top left;
}
.start header h1{
    transition:all 2s;transition-delay: 8s;
    margin:0;
}
.start .container{
    transition:all 2s;transition-delay: 8s;
    margin:15px 5px;
}*/
/*.masque h4{transition: all 1s; line-height: 0;
    margin-bottom: 0;
    margin-top: 8px;}
.masque p{    line-height: 2px;
    transition: all 1s;
    margin: 0;
    text-align: justify;
    margin-bottom: 3px;}*/
/*.masque {transform:scale(0.5)}*/

.btclose{
    position: absolute;
    right: 20px;
    top: 15px;
    width: 27px;
    height: 27px;
    cursor: pointer;
    display: block;
}
.btclose .line{
    width: 25px;
    height: 1px;
    background: #000;
    display: block;
    transform-origin:center;
    position: absolute;
    margin-top: 14px;


}
.btclose .line1{
    transform:rotate(45deg);
}
.btclose .line2{
    transform:rotate(-45deg);
}
#modeemploi.on {
    display: block;
}

#modeemploi {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #EFEFEF;
    transition:opacity 1s 1s; 
    display: none;
  }

#modeemploi .content{
    opacity: 1;
    transition:opacity 1s; 
}

#modeemploi .content{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 540px;
    background: #fff;
    padding: 0 40px 20px;
    transform: translate(-50%, -50%);
}
#modeemploi.disapear .content{
  opacity: 0;
}
#modeemploi.disapear{
  opacity: 0;
}
/*#modeemploi.off{
  display: none;
}*/

/* parcours */
#parcours{;overflow: visible;position: absolute;width: 100%;opacity:0;transition:opacity 1s}
#parcours.init{opacity: 1}
#parcours.move{transition:transform 2s}
#parcours.rotation{transition:transform 0.2s linear;}
#parcours.hidden{opacity:0;}


/*div.pages{width: 100%;height: 100%;word-wrap: break-word;margin: 0px;overflow: scroll;scroll-behavior: "smooth";    overflow-x: hidden;}*/
/*div.texte{text-align: justify;width: 600px;margin: 50px auto;position: absolute;left: 50%;margin-left: -300px;scroll-behavior: "smooth"}*/

div.pages {width: 100%;height: 100%; word-wrap: break-word; margin: 0px;overflow: visible; padding:0; opacity: 0;transition:opacity 1s;transition-delay: 1.5s}
div.pages:first-child {}
.content{height: auto; max-height:100%; top:50%; left:50%; position: absolute; margin-left: -300px;user-select:none;}
.pages .content>h2{text-align: left;width: 600px;margin: 0px auto 25px;overflow: auto;line-height: 32px;overflow: visible;text-align: center;}
.pages.init{opacity: 1}

div.texte {text-align: justify;width: 600px;margin: 0px auto 0px ;height:auto;max-height:400px;overflow: auto;;user-select:none;padding-right: 10px}
div.images {text-align: justify;width: 720px;margin: 0px auto 0px ;height:500px;overflow: visible;}
div.images img{width: 720px; height: auto;position: absolute;opacity: 0}
div.images img.visible{opacity: 1}

sup{line-height: 0}


span.note{text-decoration: underline;cursor: pointer;}
#noteWindow{display: none; width: 200px; padding: 15px 15px 15px; background: #FFF; position: fixed; font-family: 'Faune';font-size:16px;line-height: 135%;}
#noteWindow.visible{display: block;}

.bulle {
    font-size: 13px;
    border-bottom: 1px solid #333;
    margin-top: -67px;
    /* margin-left: 10px; */
    padding-right: 20px;
    padding-bottom: 2px;
    /* margin-right: 5px; */
    font-style: normal;
}

/*.next{font-size: 30px;text-align: center;cursor: pointer;display: inline-block;margin-left:290px;}*/
.next {
    font-size: 30px;
    text-align: center;
    cursor: pointer;
    margin: 30px auto 0px;
    width: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    user-select:none;

}
.next span{transform:scale(0.8);transition:transform 0.3s ease;    
    /*background: #000;*/

    border-radius: 20px;
    /*color: #FFF;*/
        border: 1px solid;
}
.next:hover span{transform:scale(1.2);transition:transform 0.3s ease;}

/*#photos{position: absolute;z-index:left: 50%;}
#photos .photo{width: 500px; height: auto;position: absolute;outline: none;cursor: pointer;}
.itineraire2 #photos .photo{width: 700px;}
.itineraire1 #photos .photo{width: 300px;}
#photos img{width: 50%; height: auto;position: absolute;}
*/

.contentPhoto{position: absolute;z-index:left: 50%;}
.contentPhoto .photo{position: absolute;outline: none;cursor: pointer;}
.contentPhoto .photo.is-zooming{transition:left 1s, top 1s;}
.contentPhoto .photo{cursor: zoom-in;}
.modePhoto .contentPhoto .photo{cursor: zoom-out;}
.modePhoto .content{cursor: zoom-in;}
.contentPhoto .photo.is-pointer-down:not(.down-for-zoom){cursor: grab;}
.contentPhoto .photo.photo.is-pointer-down.is-dragging{cursor: grabbing;}
.contentPhoto .img{width: 250px; display: block; position: absolute;}
.contentPhoto .imgHD{width: 100%;height: 100%;position: absolute;top: 0;background-size: contain;background-repeat: no-repeat;background-position: top left;}
.modePhoto .contentPhoto .imgHD{display: block;}
.texte .contentPhoto .imgHD{display: none;}
.contentPhoto .img.large {width: 350px;}
.contentPhoto .img.medium {width: 250px;}
.contentPhoto .img.small {width: 150px;}


.contentPhoto img{width: 100%; height: auto;
transition-property:opacity;
  transition-duration: 1s;
  transition-delay:1s;}

.contentPhoto .alignH.img.large {height: 233px;width: 620px}
.contentPhoto .alignH.img.medium {height: 166px;width: 620px}
.contentPhoto .alignH.img.small {height: 100px;width: 620px}

.contentPhoto .alignH.lx2.small {width: 310px}
.contentPhoto .alignH.lx3.small {width: 465px}
.contentPhoto .alignH.lx4.small {width: 620px}
.contentPhoto .alignH.lx5.small {width: 775px}
.contentPhoto .alignH.lx6.small {width: 930px}
.contentPhoto .alignH.lx7.small {width: 1085px}

.contentPhoto .alignH.lx2.medium {width: 510px}
.contentPhoto .alignH.lx3.medium {width: 765px}
.contentPhoto .alignH.lx4.medium {width: 1020px}
.contentPhoto .alignH.lx5.medium {width: 1275px}

.contentPhoto .alignH.lx2.large {width: 710px}
.contentPhoto .alignH.lx3.large {width: 1065px}


.contentPhoto .alignH img{width:auto;;height: 100%;display:inline-block;}
.contentPhoto .img img{display: none;}
.pages.init{display: none;}
.pages.actif{display:block;}
.pages.inactif{display:block;}
.pages.actif + .contentPhoto .img img{display:inline-block;}
.pages.inactif + .contentPhoto .img img{display:inline-block;}


/* Mode Photo/Texte */
.modePhoto .contentPhoto .img{transform:scale(2.5)}
.modePhoto .content{transform:scale(0.4); cursor: zoom-in;}
.content{transition:transform 1s, margin 0.6s;}
.contentPhoto .img{transition:transform 1s;}
/*#photos img.is-pointer-down{transition:transform 0s;}*/

.nav{width: 150px;height: 150px; transform:scale(0.7);margin-top:-30px;    margin-left: -7px;}
#nav{width: 150px;height: 150px;border-radius: 80px;background: transparent;transform:scale(0.7);transition:transform 0.5s ease;margin-left:7px;}
nav{position: fixed;top: 10px; right: 20px;width: 180px;text-align: center;}
nav#home{position: fixed;top: 10px; left: 20px;width: 180px;text-align: center;}



nav a{text-decoration: none; overflow: hidden; height:29px; padding:5px 10px; transition:height 1s ease; display: inline-block;}

nav.masquer a{height: 15px; transition:height 1s ease 4s;}
nav a:hover{height: 29px; transition:height 1s ease;}

nav h1{text-align: center;
        margin-bottom: 5px;
    margin-top: 0px;
    font-size: 18px;user-select:none;}


nav h2{text-align: center;
        margin-bottom: 5px;
    margin-top: 0px;
    line-height: 100%;
    font-size: 20px;
}
nav h3{text-align: center;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 100%;
}
.txtSoustitre.masquer{transition:height 1s ease 3.5s; height:0px; }
.txtSoustitre{overflow: hidden; height: 40px; transition:height 1s ease 0.5s}
/*.masquer{opacity: 0;transition:opacity 3s ease 4s;}
*/
/*#nav:hover{transform:scale(1);transition:transform 1s ease;}*/
#nav>span, .nav>span{position: absolute;display: block;width: 2px;height: 2px;padding:10px; border-radius:5px;background: transparent;transform-origin: center;}
/*#nav>span span{transition:transform 0.1s ease}*/
#nav.rotation>span.actif {transform:scale(1.5);/*width: 2px;height: 2px;padding:4px; */}
#nav>span span, .nav>span span{width: 100%;height: 100%; display:block; background: #000;border-radius:5px;}
#nav>span.inactif span {background: #F00;}
#nav>span{user-select:none;}
#nav .fenetre{width: 10px;height: 8px;border:1px solid #333;position: absolute;opacity: 0}
#nav.rotation .fenetre{opacity: 1;transition:transform 0.2s linear;}
#nav>span{cursor: none;}
#nav:hover{transform:scale(1);}
#nav>span.actif span{transform:scale(2);}
#nav>span:hover span{transform:scale(3)}
#nav:hover + aside{transform:translateY(25px);}
nav aside{transition:transform 0.5s ease;}
/* version mobile */
/*#parcours{width: 100%;}
div.pages{width: 100%;height: auto;word-wrap: break-word;margin: 0px;overflow: visible;}
div.texte{text-align: justify;width: 600px;margin: 50px auto;}
.next{display: none;}*/
.fancybox-button, .fancybox-button:link, .fancybox-button:visited, .fancybox-button:focus, .fancybox-button:hover{
    color: #000;
     background: rgba(0,0,0,0);
}
.fancybox-bg{
    background: #EFEFEF;
}

.fancybox-is-open .fancybox-bg{
    opacity: 1;
    background: #EFEFEF;
}


/* mode acordeon */
.modePhoto .content p.acordeon, .modePhoto .content .acordeon p, .modePhoto .content div.acordeon{
     cursor: zoom-in;
    }
p.acordeon, .acordeon p, div.acordeon{
    line-height: 5px;
    transition:all 0.6s ease-out;
    cursor: pointer;
    user-select: none;
    margin: 0;
    padding:3px 0;
}
/*div.acordeon {padding:5px 0;}*/
div.acordeon p{padding:0;}

p{ 
    /*transition:all 0.75s;*/
    line-height: 120%;
    margin:15px 0;
}

p.acordeon.open, .acordeon.open p, div.acordeon.open{
    line-height: 120%;
    cursor: pointer;
    user-select: none;
    padding:20px 0;
}
/*div.acordeon.open{padding:20px 0;}*/
div.acordeon.open p{margin:15px 0;padding:0;}


/*.texte p:first-child{line-height: 135%}*/
div.texte{overflow: visible;}

/* Scrollbar 

/* width */
/*::-webkit-scrollbar {
    width: 10px;

}*/

/* Track */
/*::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border:1px solid #333;
    border-radius: 10px;
}*/

/* Handle */
/*::-webkit-scrollbar-thumb {
    background: #000; 
    border:0.6px solid;
    border-radius: 10px;
}*/