.elementor-1385 .elementor-element.elementor-element-bcbbc6f{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-1385 .elementor-element.elementor-element-bcbbc6f:not(.elementor-motion-effects-element-type-background), .elementor-1385 .elementor-element.elementor-element-bcbbc6f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor0 );}:root{--page-title-display:none;}@media(max-width:767px){.elementor-1385 .elementor-element.elementor-element-bcbbc6f{--min-height:100vh;--justify-content:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1385 .elementor-element.elementor-element-255140b{padding:100px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-255140b */body.home {
  overflow: hidden !important;
}

.boussole {
  margin: auto;
  position: relative;
  width: 100%;
  min-width: 300px;
  color: #FFF7EA;
  max-width: 650px;
  font-variant: small-caps;
  text-align: center;
  line-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
}

.boussole::after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.boussole .boussole-content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.boussole-content {
  animation: rotate 60s linear infinite;
  display: grid;
  grid-template-columns: 50px 2fr 2fr 50px;
  grid-template-rows: 50px 2fr 2fr 50px;
}

.boussole-content:hover {
  animation-play-state: paused;
}

.nord { grid-column: 2 / 4; grid-row: 1; }

.ouest {
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  transform: rotate(180deg);
  grid-column: 1;
  grid-row: 2 / 4;
}

.est {
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  grid-column: 4;
  grid-row: 2 / 4;
}

.sud { grid-column: 2 / 4; grid-row: 4; }

/* Points aux extrémités */
.nord::after, .sud::before {
  display: block;
  content: '';
  background: #FFF7EA;
  width: .8rem;
  height: .8rem;
  border-radius: 100%;
  margin: -6px auto;
}

.ouest::after, .est::after {
  display: block;
  content: '';
  background: #FFF7EA;
  width: .8rem;
  height: .8rem;
  border-radius: 100%;
  margin: auto -4px;
}

/* Cercle central */
.boussole-img {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 100%;
  border: 2px solid #FFF7EA;
  z-index: -1;
}

.img-nord {
  margin: 0; display: inline-block; float: left;
  width: 50%; height: 50%;
  transform-origin: bottom right;
  transform: rotate(45deg);
}
.img-est {
  margin: 0; display: inline-block; float: left;
  width: 50%; height: 50%;
  transform-origin: bottom left;
  transform: rotate(45deg);
}
.img-ouest {
  margin: 0; display: inline-block; float: left;
  width: 50%; height: 50%;
  transform-origin: top right;
  transform: rotate(45deg);
}
.img-sud {
  margin: 0; display: inline-block; float: left;
  width: 50%; height: 50%;
  transform-origin: top left;
  transform: rotate(45deg);
  overflow: hidden;
}

/* Liens */
#hero-section a {
  color: #FFF7EA;
  text-decoration: none;
  transition: color 300ms ease-in-out;
}
a {
  color: #FFF7EA;
  text-decoration: none;
  transition: color 300ms ease-in-out;
}

#hero-section a:hover {
  color: #FFFFFF;
}
a:hover {
  color: #FFFFFF;
}

/* Logo */
#mon-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  max-height: 55vh;
  max-width: 30vw;
}

/* Animation */
@keyframes rotate {
  from { transform: rotate(-360deg); }
  to   { transform: rotate(360deg); }
}

/* ── RESPONSIVE MOBILE ── */
@media (max-width: 767px) {
  .boussole {
    font-size: 1.6rem;
    line-height: 1.6rem;
    max-width: 85vw;
    min-width: unset;
  }

  .boussole-content {
    grid-template-columns: 30px 2fr 2fr 30px;
    grid-template-rows: 30px 2fr 2fr 30px;
  }

  #mon-logo {
    max-width: 45vw;
    max-height: 35vh;
  }
}

@media (max-width: 480px) {
  .boussole {
    font-size: 1.3rem;
    line-height: 1.3rem;
    max-width: 92vw;
  }

  .boussole-content {
    grid-template-columns: 20px 2fr 2fr 20px;
    grid-template-rows: 20px 2fr 2fr 20px;
  }

  .nord::after, .sud::before,
  .ouest::after, .est::after {
    width: .5rem;
    height: .5rem;
  }

  #mon-logo {
    max-width: 55vw;
    max-height: 30vh;
  }
}/* End custom CSS */