@font-face {font-family: 'Avalanche'; src: url('../fonts/Vintage Avalanche.otf');}
@font-face {font-family: 'Roboto'; src: url('../fonts/Roboto-Regular.ttf');}

/*==================  GENERALE ==================*/
body,html {
  background-color: #f8f7fc; color: #222;
  font-family: 'Roboto',Arial;
  overflow-x: hidden;
}

.loader{
  background: 50% 50% no-repeat rgba(255, 255, 255, 1);
  position: fixed; top: 0; left: 0;
  height: 100%; width: 100%; z-index: 9999;
  transition: 1s 0s all;
}

.loader img {position: absolute;top: 40vh;left: 47.5vw; width: 5vw;}
.loader-stop {opacity: 0; animation: disparait 0.1s 1s forwards;}

@keyframes disparait {from {} to {z-index: -1000;}}

.js-loading *,
.js-loading *:before,
.js-loading *:after {animation-play-state: paused !important;}

/*==================  FONT ==================*/
h1 ,h2, h3, h4, .h2 {font-family: 'Avalanche';}
h4 {font-size: calc(10px + 0.6vw); text-align: center;}
h3 {font-size: calc(14px + 0.6vw);}
p {text-align: justify;}
a, a:hover {text-decoration: none;}

/*navbar*/
  .navbar-default {-webkit-transition:all .35s;-moz-transition:all .35s;background-color:transparent;}/*transparante*/
  .navbar-default.affix {background-color:#83d5be;}/*apparante*/
  .navbar-min {height: 40px; opacity : 0;}
  .navbar-min.affix  {opacity : 1;}
  .nav a {color: white; text-transform: uppercase;}
  #mainNav1 a:hover {background: rgb(234,51,105);}
  .nav ul {list-style: none; display: inherit; width:100%;} 
  #mainNav2 ul li {width: 25%; border-left: 2px solid #222; font-size: 0.7em; padding: 4px;}
  #mainNav2 ul li:nth-child(1) {border-left: 0px double #222;}
  #mainNav2 ul li a {color: #222;}
/*END navbar*/

/*animation loup*/
.myHeader {min-height: 100vh; overflow: hidden; position: relative; z-index: 1;}

.accueil {position: absolute; top: 20vh; width: 100%; height: 80vh; opacity: 0; animation: apparition 0.4s linear 1s forwards;}
@keyframes apparition {from {opacity: 0;} to {opacity: 1;} }

/*.myLogo {height: 80vh;}*/

#loupsvg1, #loupsvg2 {
  margin: 0;
  position: absolute;
  width: calc(150px + 10vw);
  top: 0;
  left: calc(45vw - 80px);
}

#loupsvg1 {animation: loupsvg1 5s 1s forwards;;}
@keyframes loupsvg1 { 0% {margin-top: -100px; transform: rotate(300deg);} 100% {margin-top: 0px; transform: rotate(0deg)} }

#loupsvg2 {animation: loupsvg2 5s 1s forwards;;}
@keyframes loupsvg2 { 0% {margin-bottom: -100px; transform: rotate(-300deg);} 100% { margin-top: 0px; transform: rotate(0deg)} }

#myTitre {
  position: relative;
  z-index: 20; margin-top: 150px;
  text-transform: uppercase; font-size: calc(40px + 2vw);
  display: none;
}

#myTitre h1 {font-size: calc(60px + 2vw); line-height:calc(60px + 2vw); font-weight: 600;}
#myTitre .h2 {margin: 0; font-size: calc(36px + 2vw); line-height:calc(40px + 2vw); font-weight: 600;}

#myTitre .visible {overflow:hidden; height:calc(40px + 2vw);}
#myTitre ul {
  text-align:center; list-style:none;
  animation: 8s linear 0s alternate none infinite change;
}

@keyframes change {
0%   {margin-top:0;}
16%  {margin-top:0;}
28%  {margin-top:calc(-40px - 2vw);}
44%  {margin-top:calc(-40px - 2vw);}
56%  {margin-top:calc(-80px - 4vw);}
72%  {margin-top:calc(-80px - 4vw);}
84%  {margin-top:calc(-120px - 6vw);}
100% {margin-top:calc(-120px - 6vw);}
}

/* Animation soleil et lumière */
.lumiere {width: 25vw; height: 25vw; position: absolute; top: -10vw; left: -10vw; z-index: 3000;}
.lumiere .soleil {animation: rotate 60s 0s infinite linear; width: 100%;}
@-moz-keyframes rotate {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
@-webkit-keyframes rotate {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }

.lumiere .rayon{ position: fixed; top: 0; left: 0; height: 100vh;  width: 100vw;
  -webkit-transition: all 1s; transition: all 1s; pointer-events: none; opacity: 0;
}

.survol {position: absolute;top: calc(10vw + 70px); left: 10vw;width: 100px; 
    color: #222; text-align: center;     font-family: avalanche, arial;
    transform: rotate(-45deg);    
    transform-origin: top left;
}

.lumiere .survollumiere {opacity: 0; -webkit-transition: all 1s; transition: all 1s; border: none;}
.lumiere .survolmoi {opacity: 1; -webkit-transition: all 1s; transition: all 1s;}
.lumiere:hover .survolmoi {opacity: 0;}
.lumiere:hover .survollumiere {opacity: 1;}
.lumiere:hover .rayon{ opacity: 0.8;}

#neige { /* animation des flocons de neige */
  position: absolute; top: 0; height: 200vh; width: 100%;
  pointer-events: none;
  background: url(../img/accueil/flocons.webp);
  background-size: 100vw 100vh;
  background-repeat: repeat;
  animation: neige 20s 0s infinite linear;
}

@keyframes neige {from {top: -100vh;} to {top: 0;}}

/*================== METIER ==================*/
#profil {background: #f8f7fc; position: relative; z-index: 20;}

.basecercle {position:relative; width: calc(250px + 6vw); height: calc(1.3*200px + 1.3*6vw + 70px); }
.basecercle img {height: calc(1.3*200px + 1.3*6vw); position: absolute; bottom: 0; left: 59px;}
.cercle {
  position: absolute;left: 0; width: calc(200px + 6vw); height: calc(200px + 6vw); bottom: 3rem;
  border: 2px solid #444; border-radius: 50%;
  transform: scaleY(1.3);
}
.point {transform: scaleY(0.8); font-size: 30px}
#cercle2 {transform: scaleY(1.3) rotate(180deg); margin: 20px;}
#cercle3, #cercle4 {transform: scaleY(1.3) rotate(180deg); margin: 40px 10px;}
#cercle1 .point {color: #4698B7;}
#cercle2 .point {color: #EDA0CF;}
#cercle3 .point {color: #8DCCBC;}
#cercle4 .point {color: #8f84dd;}

.basepoint {width: 120px; animation: ccircle 10s infinite linear;}
.rotate {width: 100%; height: 100%; animation: circle 10s infinite linear; transform-origin: 50% 50%;}
#cercle2 .rotate .basepoint {animation: ccircle 6s infinite linear;  }
#cercle2 .rotate {animation: circle 6s infinite linear;}
#cercle4 .rotate .basepoint {animation: ccircle 12s infinite linear;  }
#cercle4 .rotate {animation: circle 12s infinite linear;}

@keyframes circle {from {transform: rotateZ(0deg)} to {transform: rotateZ(360deg)}}
@keyframes circle {from {transform: rotateZ(0deg)} to {transform: rotateZ(360deg)}}
@keyframes ccircle {from {transform: rotateZ(360deg)} to {transform: rotateZ(0deg)}}

.metier-text span:nth-child(1) {box-shadow: inset 0 -8px 0 #4698B7;}
.metier-text span:nth-child(2) {box-shadow: inset 0 -8px 0 #EDA0CF;}
.metier-text span:nth-child(3) {box-shadow: inset 0 -8px 0 #8DCCBC;}
.metier-text span:nth-child(4) {box-shadow: inset 0 -8px 0 #8f84dd;}

.metier-text div:nth-child(1) {color: #4698B7;}
.metier-text div:nth-child(2) {color: #EDA0CF;}
.metier-text div:nth-child(3) {color: #8DCCBC;}
.metier-text div:nth-child(4) {color: #8f84dd;}

/*================== IMAGES GENERALE ==================*/
.imgSeparation {width: 100%; margin: -2px 0;}

/*================== SECTION VIE PRO ==================*/
#blog {background: #4698b7;} #blog a {width: 100%;}
#blog article {background-color: #f8f7fc; color: rgba(0,0,0,0.8); box-shadow: 4px 4px 4px rgba(0,0,0,0.8); border-radius: 20px}
#blog article:hover p {display: block; box-shadow: inset 6px 6px 6px rgba(0,0,0,0.8)}
#blog .enSavoirPlus {width: 80%; margin: 20px auto 0; padding: 10px; border-radius: 6px; text-align: center; color: #f8f7fc; animation: couleur 8s 0s infinite; transition: 0.4s 0s all;}

@keyframes couleur {0% {background-color: #8DCCBC;} 25% {background-color: #EDA0CF;} 50% {background-color: #4698B7;} 75% {background-color: #8f84dd;} 100% {background-color: #8DCCBC;}}

.fade:not(.show) {opacity: 1;}
.modal {top: 30px;}
.modal h4 {font-size: 1.1rem;}
.modal-backdrop {background-color: rgba(0, 0, 0, 0.5); pointer-events: none; justify-content: center;}
.modal li {list-style-type: disclosure-closed;}
.modal .li1::marker, .marker1 {color: #8DCCBC;}
.modal .li2::marker, .marker2 {color: #EDA0CF;}
.modal .li3::marker, .marker3 {color: #8f84dd;}
/*================== SECTION ESPACE ==================*/
#espaces {background: #f8f7fc;}
#espaces img {width:100%; max-width: 200px;}

.espaces {
  background: rgb(234,51,105);
  background: linear-gradient(90deg, rgba(234,51,105,1) 10%, rgba(237,160,207,1) 30%, rgba(143,132,221,1) 50%, rgba(70,152,183,1) 70%, rgba(141,204,188,1) 90%);
  box-shadow: 4px 4px 4px rgba(0,0,0,0.8);
}
.espaces .row {max-width: 960px;}
.espaces a {width: 100%; max-width: 120px; margin: auto;}
.espaces H4, .espaces-min H4 {padding: 30px 0; border: 6px double rgba(0,0,0,0.8); color: rgba(0,0,0,0.8); border-radius :255px 15px 225px 15px/15px 225px 15px 255px;}
.espaces a:hover h4 {border-color: white; color: white;}
.espaces-min a {width: 100%; margin: 4px;}
.espaces-min H4 {padding: 8px 0;}

.espaces div div:nth-child(1) a, .espaces div div:nth-child(3) a, .espaces div div:nth-child(4) a,
.espaces div div:nth-child(5) a, .espaces div div:nth-child(6) a {cursor: no-drop; pointer-events: none;}
/*================== SECTION FOOTER ==================*/
footer {background-color : #83d5be}

.contact a {display: block; width: 100%; font-size: 0.8rem;} .contact a i {color: #222;}
.contact a:hover { color: rgb(234,51,105);} .contact a:hover i { color: rgb(234,51,105);}
.contact p {text-align: center;}
#emploi {border: 2px dashed #f8f7fc; text-align: center;}
#emploi span {font-weight: bold;}
.footer-bande {margin-bottom: 40px; background: #f8f7fc; font-size: 0.7em;}

.myButtonCv {
  padding: 12px 20px;
  background: transparent;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  border: double 6px #007bff;
  color:  #007bff;
  transition: 0.3s 0s all linear;
}

.myButtonCv:hover {border: double 6px rgb(234,51,105); color:  rgb(234,51,105);}