/*@font-face {
  font-family: "ManifontBook";
  src: url("../fonts/manifont-grotesk/manifont-grotesk_book.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "NotoSans";
  src: url("../fonts/noto/notosans-regular-webfont.woff2") format("woff2"),
      url("../fonts/noto/notosans-regular-webfont.woff") format("woff");
  font-display: swap;
}*/
@font-face {
  font-family: "Pepsi";
  src: url("../fonts/pepsi-cyr-lat/10100-webfont.woff2") format("woff2"),
      url("../fonts/pepsi-cyr-lat/10100-webfont.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Iosevka";
  src: url("../fonts/iosevka-extended/iosevka-extended-regular-webfont.woff2") format("woff2"),
      url("../fonts/iosevka-extended/iosevka-extended-regular-webfont.woff") format("woff");
  font-display: swap;
}


* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
position: relative;
font-family: "Iosevka";
margin: 0;
text-rendering: optimizeLegibility;
}
.font-granit {
  font-family: 'Pepsi';
}
.section-spectacle a {
  display: inline-block;
  color: #0000ff;
  text-decoration: #74f0ff underline 2px;
  transition: transform .5s;
  transform-origin: center;
}
.section-spectacle a:hover {
  transform: translate(5px, 5px);
}
.section-spectacle a.ext {
  position: relative;
  margin-right: 8px;
}
.section-spectacle a.ext:hover {
  transform: rotateX(180deg);
}
.section-spectacle a.ext::after {
  content: url('../images/external-link-alt.svg');
  display: inline-block;
  width: 7px;
  position: absolute;
  top: -5px;
  right: -9px;
}

p {
margin: 0;
}
ul {
list-style: none;
padding: 0;
}
.font-s {
font-size: 80%;
}
.font-xs {
font-size: 70%;
}

:root {
  --hauteur-generale: 950px;
}
.image-seule-wrapper {
  margin: 1rem 0;
}
.image-seule {
  max-width: 100%;
}


/* SECTION GÉNÉRALE */
.section-generale {
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--hauteur-generale);
  min-height: 900px;
  width: 100vw;
  background: radial-gradient(circle, #0f17edff 0%, #609bf7b6 25%, #86c8fb00 60%, #86c8fb00 100%);
}
.phone .section-generale {
  overflow: hidden;
}
.conteneur-general {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  transition: all 2s;
}
.conteneur-titre {
  position: absolute;
  height: auto;
  pointer-events: none;
  font-family: ManifontBook;
}
.conteneur {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  transform: translate(0, 5vh);
}
ellipse {
  transform-origin: center;
}

.conteneur, .titre {
  transition: opacity 2s;
}



/************/
/* GRANITES */
/************/
@keyframes suspension {
from {
  transform: translate(15px, -5px) rotate(20deg);
}
to {
  transform: translate(15px, 0px) rotate(20deg);
}
}
.granites {
  position: absolute;
  /*width: 300px;*/
  transform: translate(15px, 5px) rotate(20deg);
  /*animation: suspension 2s ease-in-out alternate infinite;*/
}
.granite {
  position: absolute;
  top: -30px;
  left: 10;
  width: 560px;
  opacity: 0;
}
.granites.derriere .granite:nth-of-type(1) {
  position: relative;
}
.granite.first {
  position: relative;
  top: 0;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.granite img {
  width: 100%;
}
.granite.anim img {
  filter: drop-shadow(10px 30px 8px rgba(0,0,0,.5));
}
.granites.non-anim .granite.first {
  opacity: 1;
}
.granite.anim {
  opacity: 1;
}

@keyframes sablier {
  to {
    transform: rotate(360deg)
  }
}
.granite .sablier {
  z-index: -1;
  position: absolute;
  width: 50px;
  transform: rotate(0);
  animation: sablier 3s infinite linear;
}

.granite picture, .granite.erreur .sablier {
  display: none;
}
.granite.erreur picture {
  display: block;
  width: 300px;
}


/* THREE.JS */
/*#canvas {
  height: 300px;
}*/

/***********/
/* ORBITES */
/***********/
.cercles-svg {
  display: flex;
  justify-content: center;
  position: relative;
  height: 800px;
  width: 800px;
}
.conteneur-moyen .cercles-svg {
  height: 1200px;
  width: 1200px;
}
/*.conteneur-grand .cercles-svg {
transform: rotateY(-45deg);
}*/
svg {
  position: absolute;
  height: 100%;
  width: auto;
  transform: translate(0, 0);
  overflow: visible;
}
.ellipse-bleue {
  transform: rotate(20deg);
}
.ellipse-rouge {
  transform: rotate(-10deg);
}


/**********/
/* TITRES */
/**********/
.titre {
position: absolute;
font-size: 25px;
text-shadow: #000 .75px .75px 1px, #fff 1.5px 1.5px 1px;
}
.titre.titre-moyen {
font-size: 16px;
}
.titre-grand, .titre-petit {
  z-index: 1;
}
.titre-grand {
color: #d0f4ff;
transform: translate(400px, calc(5vh - 145px));
}
.titre-moyen {
color: #0000ff;
transform: translate(480px, calc(5vh - 270px));
}
.titre-moyen svg {
  width: 300px;
  height: 200px;
  transform: rotate(23deg);
}
.titre-petit {
  color: #74f0ff;
  font-size: 30px;
  transform: translate(-350px, calc(5vh - 180px));
}
.titre-petit ul {
  position: absolute;
  left: -75px;
  width: 220px;
  overflow: hidden;
  height: 0;
  font-size: 20px;
  margin: 0;
  padding-top: 1rem;
  pointer-events: none;
}
.titre-petit ul li {
  padding: 4px 3px;
  line-height: 1;
  border-left: solid 20px;
  cursor: pointer;
}
.titre-petit a {
  color: inherit;
  text-decoration: inherit;
}
.titre-petit:hover ul, .vert .titre-petit ul {
  height: auto;
  pointer-events: all;
}
.titre-granite {
  display: flex;
  flex-wrap: wrap;
  transform: translateY(180px);
  font-size: 30px;
  line-height: 1.2;
}
.titre-granite * {
  text-align: center;
  width: 100%;
}

/***********/
/* FLECHES */
/***********/
.fleche-scroll {
  display: flex;
  justify-content: center;
  z-index: 1;
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 30px;
  height: 30px;
  opacity: 1;
  transform: scale(1.3);
  transition: opacity 0.3s;
}
.fleche-scroll.hide {
  opacity: 0;
}
.icono-fleches {
  position: absolute;
  bottom: 5px;
  width: 50%;
  height: 100%;
  transform: scale(0.8) rotate(90deg);
}
.icono-fleches:nth-of-type(2) {
  bottom: 0;
  transform: scale(1) rotate(90deg);
}
.icono-fleches:nth-of-type(3) {
  bottom: -5px;
  transform: scale(1.2) rotate(90deg);
}

.icono-fleches::after, .icono-fleches::before {
  content: '';
  width: 14px;
  height: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 2px;
  box-shadow: inset 0 0 0 32px #fff;
  border-radius: 2px;
  -webkit-transform-origin: right;
  transform-origin: right;
}
.icono-fleches::before {
  top: 1px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.icono-fleches::after {
  bottom: 1px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}



/*********/
/* SONDE */
/*********/
@keyframes move {
0% {
  offset-distance: 0%;
}
100% {
  offset-distance: 100%;
}
}
@keyframes clignote {
to {
  opacity: .5;
}
}

.sonde {
  position: absolute;
  left: 0;
  top: 0;
  width: 75px;
  transform: translate(0, 0);
  offset-rotate: 0deg;
  offset-path: path('m32.346 42.556c9.9016-8.093 24.112-14.003 40.405-11.877s34.668 12.285 47.113 29.597 18.961 41.775 26.174 66.365c7.2129 24.59 15.123 49.304 38.648 60.501 23.525 11.197 62.664 8.876 80.285-10.775 17.621-19.651 13.723-56.63-12.482-79.462-26.205-22.832-74.715-31.515-112.89-29.068-38.176 2.4474-66.016 16.025-85.683 18.441s-31.161-6.3307-34.112-15.842c-2.9509-9.5117 2.6415-19.788 12.543-27.881z');
  animation: move 150s 2 linear;
}
.sonde img {
  position: relative;
  max-width: 60px;
  opacity: 1;
  animation: clignote 5s alternate linear 8;
}
.phone .sonde, .phone .sonde img, body:not(.accueil) .sonde {
  animation: none;
}
.stop .sonde, .stop .sonde img {
  animation-play-state: paused;
}
.sonde p {
  text-align: center;
}


/* MENTIONS */
.mentions {
position: absolute;
left: 10px;
bottom: 5px;
}



/* SURVOL DES ORBITES */
.vert ellipse, .vert .titre-moyen, .vert .titre-grand, .rouge circle, .rouge .ellipse-bleue, .rouge .titre-petit, .rouge .titre-moyen, .bleu circle, .bleu .ellipse-rouge, .bleu .titre-petit, .bleu .titre-grand {
opacity: .2;
filter: blur(3px);
}
ellipse, circle, .titre {
transition: 1s;
}


/************/
/* PANNEAUX */
/************/
/*#panneau {
  font-family: 'NotoSans';
}*/

/*******************/
/* MEDIA QUERIES */
/*******************/

@media screen and (max-width: 1000px) {
  .titre-grand {
    transform: translate(0px, calc(5vh + 230px));
  }
  .titre-moyen {
    transform: translate(0px, calc(5vh - 435px));
  }
  .titre-moyen svg {
    transform: rotate(-9deg);
  }
  .titre-petit {
    z-index: 1;
    transform: translate(0px, calc(5vh - 330px));
  }
  .titre-petit ul {
    left: -75px;
  }
}
@media screen and (max-width: 600px) {
  .granite.first {
    width: 250px;
  }
}