@charset "UTF-8";
@keyframes transparence {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes deplacement {
  from {
    transform: translate(150px);
  }
  to {
    transform: translate(-100px);
  }
}
@keyframes ouverture {
  from {
    max-height: 0;
  }
  to {
    max-height: 1000px;
  }
}
@keyframes Tremblement {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes deplacementtel {
  from {
    transform: translate(200px);
  }
  to {
    transform: translate(70px);
  }
}
* {
  font-family: "Josefin Sans", sans-serif;
  color: #162221;
  margin: 0;
  text-decoration: none;
}

h2 {
  font-weight: bold;
  font-size: 3em;
  margin-bottom: 7%;
  text-align: center;
}

h3 {
  font-size: 1.2em;
  text-align: center;
}

h4 {
  font-size: 1.2em;
}

nav {
  background-color: #4FA46F;
}

.logo {
  width: 100%;
  height: 100%;
}

.navlink {
  padding: 5px;
  margin-right: 220px;
  font-size: 1.4em;
}

.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: sticky;
  top: 0;
  background-color: #4FA46F;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: -13px;
  z-index: 10;
}

.nav_left {
  display: flex;
  justify-content: space-around;
  text-align: center;
  position: relative;
  left: 11%;
}

.nav_right {
  display: flex;
  justify-content: space-around;
  text-align: center;
  position: relative;
  left: 14%;
}

.nav_social {
  display: flex;
  justify-content: space-around;
  position: relative;
  left: 3%;
}

.reseaux {
  margin-right: 20px;
}

.logo_rond {
  width: 276px;
  height: 108px;
  display: block;
  position: absolute;
  left: 43%;
  top: 1%;
  background-image: url(Image/Visus_72p/logo_dans_cercle_72p.png);
}

.logo_rond:hover {
  background-image: url(Image/Visus_72p/Surbrillance_logo\ dans\ cercle_72p.png);
  z-index: 10;
}

.nav_qui:hover {
  background: url(Image/Visus_72p/Surbrillance\ Qui\ suis\ je_72p.png) no-repeat;
  background-size: contain;
}

.nav_service:hover {
  background: url(Image/Visus_72p/Surbrillance\ Services_72p.png) no-repeat;
  background-size: contain;
}

.nav_galerie:hover {
  background: url(Image/Visus_72p/Surbrillance\ Galerie_72p.png) no-repeat;
  background-size: contain;
}

.nav_contact:hover {
  background: url(Image/Visus_72p/Surbrillance\ Contact_72p.png) no-repeat;
  background-size: contain;
}

.reseaux:hover {
  filter: invert(1);
}

main {
  background: url(Image/Visus_72p/Background_72p.png);
  padding-top: 200px;
  background-color: #F8EAC4;
}

.celine {
  display: flex;
  justify-content: space-around;
  position: relative;
}

.celine_text {
  width: 30%;
  text-align: center;
  position: relative;
  margin-bottom: 5%;
  left: 6%;
}

.celine_text span {
  font-style: italic;
}

.anime_text {
  opacity: 0;
}

.animation_text div {
  animation: transparence 1500ms;
  animation-fill-mode: forwards;
}

.celine_border {
  width: 45%;
  border-radius: 5px;
  border: 2px solid #62B983;
  margin: 6% 0 0 27%;
}

#celine_img {
  position: relative;
  margin-bottom: -3px;
  bottom: -15%;
}

.celine_img {
  opacity: 0;
}

.animation_img img {
  animation: transparence 1500ms, deplacement 2000ms;
  animation-fill-mode: forwards;
}

.celine h2 {
  color: #62B983;
}

.famille {
  padding: 100px 0 100px 0;
  background-color: #62B983;
  position: relative;
  z-index: 3;
}

.animation_famille div {
  animation: ouverture 2500ms 0.4s;
  animation-fill-mode: forwards;
}

.description_famille h3 {
  position: relative;
  bottom: 50%;
  z-index: 5;
  text-align: center;
  opacity: 0;
  transition: opacity 500ms;
}

.box1 {
  height: 300px;
  display: block;
  z-index: 5;
  background-color: #E6D9B8;
  background-size: 100% 100%;
}
.box1:hover + h3 {
  opacity: 1;
}

.box {
  opacity: 1;
  transition: opacity 500ms;
}
.box:hover {
  opacity: 0.45;
}

.famille h2 {
  color: #F8EAC4;
}

.famille_conteneur {
  display: grid;
  width: 80%;
  margin-left: 10%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px 300px;
  gap: 20px;
  max-height: 0px;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.activite {
  margin-top: 10%;
  text-align: center;
}

.activite h2, h3 {
  margin-bottom: 4%;
}

.activite_particulier {
  margin-top: 5%;
  margin-bottom: 3%;
}

.activite_contenue {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
  margin: 2% 25% 2% 25%;
}
.activite_contenue:hover img {
  transform: scale(1.04);
}

.activite_contenue img {
  transition: transform 400ms;
}

.activite_contenue section {
  background-color: #62B983;
  padding: 2% 5% 2% 5%;
  border-radius: 0 10px 10px 0;
}

.activite_contenue h4 {
  margin-bottom: 3%;
  color: #F8EAC4;
}

.activite_contenue p {
  margin-top: 5%;
  margin-left: 5%;
  text-align: left;
  font-weight: 600;
  color: #F8EAC4;
}

.activite_contenue a {
  float: right;
  margin-top: 5%;
  font-weight: bold;
  color: #F8EAC4;
}

.activite_contenue strong {
  color: #F8EAC4;
}

.galerie {
  margin-top: 200px;
}

.galerie_conteneur {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 60%;
  margin-left: 20%;
  gap: 10px;
}

.galerie_conteneur img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.bg_galerie {
  display: block;
  background-color: #62B983;
  background-size: 100% 100%;
}

.bg_galerie h3 {
  position: relative;
  bottom: 50%;
  opacity: 0;
  transition: opacity 500ms;
}

.galerie_img {
  height: 300px;
  display: block;
  z-index: 5;
  opacity: 1;
  transition: opacity 500ms;
}
.galerie_img:hover {
  opacity: 0.45;
}
.galerie_img:hover + h3 {
  opacity: 1;
}

.contact {
  margin-top: 200px;
}

.contact_visit {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
.contact_visit h3 {
  text-align: initial;
  font-size: 2em;
  color: #62B983;
  font-weight: bold;
}

.contact_visit .contact_bar {
  width: 30%;
  border-radius: 5px;
  border: 1px solid #62B983;
  margin: 15% 0 15% 0;
}

.contact_text p {
  margin: 10% 0 15% 0;
}

.contact_visit img {
  width: 10%;
  margin-right: 0%;
  margin-left: 2%;
  margin-bottom: 7%;
  padding-top: 1.5%;
}

.contact_visit .contact_text {
  padding-left: 5%;
}

.contact_text h4 {
  font-weight: 600;
}

.nom, .email {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0 2% 0% 2%;
}

#nom, #email {
  height: 30px;
  font-size: 1em;
  margin: 2% 0 2% 0;
  border-radius: 5px;
  border: none;
}
#nom:focus, #email:focus {
  outline: none;
  border: 2px solid #E6D9B8;
}
#nom:not(:focus):invalid, #email:not(:focus):invalid {
  border: 2px solid red;
  animation: Tremblement 400ms;
}

.info {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 24% 0 24%;
}

.projet {
  display: flex;
  flex-direction: column;
  text-align: center;
}

#message {
  height: 200px;
  margin: 1% 25% 1% 25%;
  border-radius: 5px;
  border: none;
}
#message:focus {
  outline: none;
  border: 2px solid #E6D9B8;
}

.button {
  width: 10%;
  height: 5%;
  margin: 1% 45% 5% 45%;
  font-size: 1.5em;
  border-radius: 40px;
  border: none;
  padding-top: 5px;
}

.button:active {
  background-color: #62B983;
  color: #F8EAC4;
}

footer {
  background-color: #62B983;
  display: flex;
  justify-content: center;
  align-items: center;
}

.legal {
  text-align: center;
}

.contenue {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.contenue_text {
  width: 30%;
  text-align: left;
}

.contenue_text h2, .contenue_text h3 {
  margin: auto;
  text-align: left;
}

.contenue_text h3 {
  margin-top: 1%;
  margin-bottom: 3%;
  font-size: 1.5em;
}

.contenue_text p {
  margin-top: 2%;
  padding-left: 3%;
}

.contenue_text h4 {
  margin-top: 2%;
  margin-left: 2%;
}

.bar {
  border-left: 4px solid #62B983;
  border-radius: 5px;
}

.slider {
  width: 650px;
  height: 850px;
  margin-right: 16%;
}

.img-div {
  width: 650px;
  height: 850px;
  margin: 0 15px;
}

.retour {
  width: 5%;
  float: right;
}

.div1 {
  background: url(Image/photo/atelier_scolaire.jpg) center no-repeat;
  background-size: cover;
}

.div2 {
  background: url(Image/photo/atelier_scolaire2.jpg) center no-repeat;
  background-size: cover;
}

.div3 {
  background: url(Image/photo/atelier_scolaire.png) center no-repeat;
  background-size: cover;
}

.div4 {
  background: url(Image/photo/prevention_morsure.jpg) center no-repeat;
  background-size: cover;
}

.div5 {
  background: url(Image/photo/prevention_morsure2.jpg) center no-repeat;
  background-size: cover;
}

.div6 {
  background: url(Image/photo/pre_scolaire.jpg) center no-repeat;
  background-size: cover;
}

.div7 {
  background: url(Image/photo/pre_scolaire2.jpg) center no-repeat;
  background-size: cover;
}

.div8 {
  background: url(Image/photo/pre_scolaire.jpg) center no-repeat;
  background-size: cover;
}

.div9 {
  background: url(Image/photo/agua.jpg) center no-repeat;
  background-size: cover;
}

.div10 {
  background: url(Image/photo/agua2.jpg) center no-repeat;
  background-size: cover;
}

.div11 {
  background: url(Image/photo/lire_animal.jpg) center no-repeat;
  background-size: cover;
}

.div12 {
  background: url(Image/photo/mediation_animale.jpeg) center no-repeat;
  background-size: cover;
}

.div13 {
  background: url(Image/photo/mediation_animale2.jpg) center no-repeat;
  background-size: cover;
}

.div14 {
  background: url(Image/photo/mediation_animale3.jpg) center no-repeat;
  background-size: cover;
}

.div15 {
  background: url(Image/photo/mini_ferme.jpg) center no-repeat;
  background-size: cover;
}

.div16 {
  background: url(Image/photo/mini_ferme2.jpg) center no-repeat;
  background-size: cover;
}

.div17 {
  background: url(Image/photo/mini_ferme3.jpg) center no-repeat;
  background-size: cover;
}

.div18 {
  background: url(Image/photo/familiarisation_animal.jpg) center no-repeat;
  background-size: cover;
}

.div19 {
  background: url(Image/photo/familiarisation_animal2.jpg) center no-repeat;
  background-size: cover;
}

.div20 {
  background: url(Image/photo/lire_animal2.jpg) center no-repeat;
  background-size: cover;
}

.div21 {
  background: url(Image/photo/lire_animal3.jpg) center no-repeat;
  background-size: cover;
}

.slick-prev:before,
.slick-next:before {
  color: #62B983;
}

.morsure {
  margin-top: 7%;
}

/*Autre media*/
.logotel {
  display: none;
}

.menu {
  display: none;
}

.slidergalerie {
  display: none;
}

.sliderfamille {
  display: none;
}

@media screen and (max-width: 1444px) {
  #celine_img {
    bottom: -30%;
  }
  .logo_rond {
    display: none;
  }
  .navbar {
    display: none;
  }
  .menu {
    display: block;
  }
  .menu {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #4FA46F;
    display: flex;
    align-items: flex-end;
    flex-direction: column-reverse;
    padding: 10px;
    z-index: 9999; /* Assurez-vous que le menu burger a un z-index supérieur */
  }
  .burger {
    cursor: pointer;
    padding: 10px;
    display: flex;
    flex-direction: column;
    margin-right: 20px; /* Ajoutez une marge pour espacer du bord droit */
  }
  .bar {
    width: 30px;
    height: 3px;
    background-color: #F8EAC4;
    margin: 2px 0;
    transition: 0.4s;
  }
  .links {
    display: none;
  }
  .links a {
    color: #F8EAC4;
    font-size: 2em;
    text-align: center;
    text-decoration: none;
  }
  .links a:last-child {
    margin-right: 0;
  }
  .links.active {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4FA46F;
    flex-direction: column; /* Ajoutez cette propriété pour aligner les liens en colonne */
    justify-content: center;
  }
  .links.active a {
    text-decoration: none;
    margin: 20px 0; /* Ajoutez un espacement entre les liens */
  }
  .burger.active .bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }
  .burger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .burger.active .bar:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }
  .activite_contenue img, .activite_contenue .decouvert {
    display: none;
  }
  .visitetel {
    display: none;
  }
  .activite_contenue h4 {
    color: #162221;
  }
  .activite_contenue p {
    color: #162221;
  }
  .activite_contenue strong {
    color: #162221;
  }
  .activite_contenue section {
    border-radius: 10px;
    background-color: #F8EAC4;
    border-bottom: solid #62B983 4px;
    padding: 0;
    margin: 5% 10% 4% 10%;
  }
  .button {
    margin: 1% 35% 5% 35%;
    width: auto;
  }
  .anime_text {
    opacity: 1;
  }
  #celine_img {
    opacity: 1;
  }
}
@media screen and (max-width: 1200px) {
  .celine {
    opacity: 1;
    flex-direction: column-reverse;
    justify-content: center;
  }
  .celine_img {
    border-bottom: 3px solid #62B983;
    width: 40%;
    left: 25%;
  }
  .animation_img img {
    animation: none;
  }
  .animation_text div {
    animation: none;
  }
  .celine_text {
    width: 80%;
    text-align: center;
    position: relative;
    margin-bottom: 25%;
    margin-top: 15%;
    left: 6%;
  }
  .celine_border {
    display: none;
  }
}
@media screen and (max-width: 450px) {
  .logo {
    display: none;
  }
  .logotel {
    display: block;
  }
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }
  .celine_img {
    border-bottom: 3px solid #62B983;
    width: 60%;
  }
  .galerie_conteneur {
    display: none;
  }
  .slidergalerie {
    display: block;
    margin: auto;
    width: 350px;
    height: 650px;
  }
  .img-div {
    width: 350px;
    height: 650px;
  }
  .galerie1 {
    background: url(Image/photo/galerie.jpg) center no-repeat;
    background-size: cover;
  }
  .galerie2 {
    background: url(Image/photo/galerie2.jpg) center no-repeat;
    background-size: cover;
  }
  .galerie3 {
    background: url(Image/photo/galerie3.jpg) center no-repeat;
    background-size: cover;
  }
  .galerie4 {
    background: url(Image/photo/galerie4.jpg) center no-repeat;
    background-size: cover;
  }
  .galerie5 {
    background: url(Image/photo/galerie5.jpg) center no-repeat;
    background-size: cover;
  }
  .galerie6 {
    background: url(Image/photo/galerie6.jpg) center no-repeat;
    background-size: cover;
  }
  .galerie7 {
    background: url(Image/photo/galerie7.jpg) center no-repeat;
    background-size: cover;
  }
  .galerie8 {
    background: url(Image/photo/galerie8.jpg) center no-repeat;
    background-size: cover;
  }
  .galerie9 {
    background: url(Image/photo/galerie9.jpg) center no-repeat;
    background-size: cover;
  }
  .famille_conteneur {
    display: none;
  }
  .sliderfamille {
    display: block;
    margin: auto;
    width: 350px;
    height: 250px;
  }
  .img-fam {
    width: 350px;
    height: 250px;
    margin: 0 15px 0 15px;
  }
  .telfamille1 {
    background: url(Image/photo/famille.jpg) center no-repeat;
    background-size: cover;
  }
  .telfamille2 {
    background: url(Image/photo/famille2.jpg) center no-repeat;
    background-size: cover;
  }
  .telfamille3 {
    background: url(Image/photo/famille3.jpg) center no-repeat;
    background-size: cover;
  }
  .telfamille4 {
    background: url(Image/photo/famille4.jpg) center no-repeat;
    background-size: cover;
  }
  .telfamille5 {
    background: url(Image/photo/famille5.jpg) center no-repeat;
    background-size: cover;
  }
  .telfamille6 {
    background: url(Image/photo/famille6.jpg) center no-repeat;
    background-size: cover;
  }
}/*# sourceMappingURL=style.css.map */