@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-image: url('../photos/Leffet_Marie_Font01.png');
     }

     .titreh2Encadre
     {
         border: 2px solid ;
         border-image: linear-gradient(to right, #0066FF, #FF32d6)1 0 1 0;
     }
.img-fluid{
  object-fit: cover;
}

.MiniPresentationPhoto{
    width: 200px;
    height: auto;
    border-radius: 1rem;
    object-fit: cover;
}


/* Nav Bar*/
.nav-item{
font-weight: bold ;
}
.navbar {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.navbar-brand img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.nav-link {
  color: #6c757d;
  transition: color 0.3s ease;
}
.nav-link:hover {
  color :  #FF32d6;
}

.navbar .nav-item {
  padding: 0.5em 1em;
}


.hero-image {
  box-shadow: 6px 5px 1px 0px rgba(83, 10, 96, 0.75);
  border: #000000 2px solid;
  border-radius: 8px;
}

.hero-section {
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .hero-image {
    margin: 20px 15px;
    max-width: calc(100% - 30px);
  }
}

/*Titre-MEnu*/

.LeffetMarie_Titre {
height: 200px;
}
.LeffetMarie_Titre_section{
text-align: center;
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

h1 {
  font-family: "Dancing Script", cursive;
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;

}

h2 {
    font-family: "Dancing Script", cursive;
font-size: clamp(20px, 30px, 100px);
  font-weight: 700;
}

.leffettext{
  background: linear-gradient(to right, #0d6e61 0%, #e416f7 100%);
  background-clip: text; /* Version standard */
  -webkit-background-clip: text; /* Version webkit */
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback */
}



.section-card {
  margin-top: 7%;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 20px;
}

.img-card {
  border-radius: 50%; 
  width: 70px; 
  height: 70px;
  margin: 25px ;
}

.card {
  height: 450px ;
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border: #000000 1px solid;
  text-align: center ;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  transition: all 0.3s ease;
  overflow: hidden;

}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(31, 38, 135, 0.3);
}

.card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
  to bottom right,
  rgba(63, 212, 232, 0.3),
  rgba(255, 1, 77, 0)
);
transform: translateX(-100%) rotate(45deg);
pointer-events: none;
transition: transform 0.6s ease;
}

.card:hover::before {
transform: translateX(100%) rotate(45deg);
}

.card-title {
  font-weight: bold;
  color: #3d3d3d;
  font-size: 28px;
  margin-bottom: 10px;
}
.card-text {
  font-weight: bold;
  margin-top: 20px;
  width: 280px;
}

.card-button {
  width: 270px;
  text-decoration: none;
  border: 1px solid black;
  border-radius: 7px;
  color: black;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: ease 0.3s;
}
.card-button:hover {
  transform: translate3d(-10px, -10px, -10px);
  transition: ease 0.3s ;
}
/* les card 1, 2, 3, 4 */
.card-button1 {
  margin-top: 25px;
  background: linear-gradient(45deg, #f3e963, #6ce6ad);
}
.card-button2 {
  margin-top: 50px;
  background: linear-gradient(45deg,  #6ce6ad, #07d5dc);
}
.card-button3 {
  margin-top: 50px;
  background: linear-gradient(45deg,  #6be2bc,#089ab0 );
}
.card-button4{
  margin-top: 25px;
  background: linear-gradient(45deg,  #3dd1a2,#92e7e5 );
}



/* Galerie d'image sur page de présentation */

  .imagesBasIndex {
    display: flex;
    gap: 5px; 
    flex-wrap: wrap;
    justify-content: center;
  }

  .imagesBasIndex img {
    max-height: 300px;
    overflow: hidden;
    width: auto;
    object-fit: cover;
    margin-bottom: 1rem;
    border-radius: 8px;
    transition: transform 0.3s ease;
    box-shadow:6px 5px 1px 0px rgba(83, 10, 96, 0.75);
    border: #000000 2px solid;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.imagesBasIndex img.animate-in {
  opacity: 1;
  transform: scale(1);
}

  .imagesBasIndex > img:hover {
  box-shadow: 0 0 20px #f34538;
  }

/* parallax */
.parallax {
background-image: url('../photos/parallax.jpg');
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}

.parallax h2 {
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
font-size: 3rem;
}


.PhotoLeffetMarie

{
height: 300px ;
width: 320px ;
padding: 8px ;
border-radius: 50%;
background:linear-gradient(135deg, red, blue 50%,transparent 50%) ;
background-size: 250% ;
background-position: 100% 100% ;
transition: background 0.5s ;
}
.PhotoLeffetMarie:hover{
background-position: 0% 0% ;
}

.Presentation {
  padding: 40px 0;
  margin-top: 40px;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  text-align: center;
  color: #333;
}


.presentation-image {
  max-width: 450px;
  width: 100%;
  border-radius: 8px;
  box-shadow: 6px 5px 1px 0px rgba(83, 10, 96, 0.75);
  border: #000000 2px solid;
}

.presentation-text {
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: justify;
}

@media (max-width: 768px) {
  .presentation-image {
    margin-bottom: 2rem;
  }
}


.glass{
  /* From https://css.glass */
  background: rgba(126, 92, 206, 0.05);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border: 1px solid rgba(255, 255, 255, 0.29);
  }

  .presentation-image {
  max-width: 450px;
  width: 100%;
  border-radius: 8px;
  box-shadow: 6px 5px 1px 0px rgba(83, 10, 96, 0.75);
  border: #000000 2px solid;
}

@media (max-width: 768px) {
  .presentation-image {
    max-width: 100%;
    margin-bottom: 2rem;
  }
}

/* Bas de page */

.footer{
padding: 40px 0;
margin-top: 40px;
font-family: "Roboto", serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
background-repeat: no-repeat;
background-position: center;
background-color: black;
}
.footer h3 {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 20px;
color: #ffffff;
}
.footer-link {
display: flex;
align-items: center;
margin-bottom: 15px;
color: ivory;
font-weight: bold;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-link:hover {
color: #0ed9e0;
}
.footer-icon {
font-size: 1.5rem;
margin-right: 10px;
width: 30px;
text-align: center;
}

.social-links a {
color: #ffffff;
font-size: 24px;
margin: 0 10px;
transition: all 0.3s ease;
}
.social-links00 a {
color: #0d0d0d;
font-size: 20px;
margin: 0 10px;
transition: all 0.3s ease;
}

.basfooter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}

.MenuBasDePage {
background-color: #ffffff;
border-radius: 8px;
transition: transform 0.3s ease;
width: 200px;
}
.MenuBasDePage:hover,.btn-primary:hover {
  background: #b440b8;
  background-image: -webkit-linear-gradient(top, #b440b8, #eb1212);
  background-image: -moz-linear-gradient(top, #b440b8, #eb1212);
  background-image: -ms-linear-gradient(top, #b440b8, #eb1212);
  background-image: -o-linear-gradient(top, #b440b8, #eb1212);
  background-image: linear-gradient(to bottom, #b440b8, #eb1212);
  text-decoration: none;
}

.MenuBasDePage a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #333;
margin-bottom: 5px;
}

.MenuBasDePage > a > p{
  margin: auto;
  font-weight: bold;
}

.MenuBasDePage > a > p:hover{
color: ivory;
}




/*Les boutons */
.cadreTitre {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Georgia;
  color: #ffffff;
  font-size: 23px;
  background: #064169;
  padding: 7px 20px 10px 20px;
  text-decoration: none;
}

.cadreTitre:hover {
  background: #b440b8;
  background-image: -webkit-linear-gradient(top, #b440b8, #eb1212);
  background-image: -moz-linear-gradient(top, #b440b8, #eb1212);
  background-image: -ms-linear-gradient(top, #b440b8, #eb1212);
  background-image: -o-linear-gradient(top, #b440b8, #eb1212);
  background-image: linear-gradient(to bottom, #b440b8, #eb1212);
  text-decoration: none;
}

/* Tablettes */
@media (max-width: 991px) {
  .row.align-items-center {
    flex-direction: column;
  }
  
  .row.align-items-center .col-md-7,
  .row.align-items-center .col-md-5 {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .hero-image {
    margin-top: 30px;
    max-width: 400px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  h1 {
    font-size: clamp(2rem, 6vw, 4rem);
  }
}