/* ========== Typo ========== */
h1 {
  margin-bottom: 2rem;
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}
h2 {
  font-family: 'EB Garamond', serif;
  font-weight: 600;
  font-size: clamp(1rem, 5vw, 1.5rem);
}

h3 {
margin: 1rem 0 1rem 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 1rem;
}

span {
 font-weight: 800;
}
p {
margin: 1rem 0 1rem 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 1rem;
}
.text-white {
  color: white;
}

.text-black {
  color: #0e3633;
}
.text-center {
  text-align: center;
  justify-content: center;
}

.underline {
text-decoration-line: underline;
text-underline-offset: 4px;
}
a {
  color: white;
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: 1.2rem;
  text-decoration: none;
}

ul {
  list-style: none;
}


 .mentions ul {
margin-bottom: 2rem;
}

a:hover {
  color: #debf81;
  font-family: 'EB Garamond', serif;
  font-weight: 700;
  font-size: 1.2rem;
}
/* ========== RESET / BASE ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
background-color:#debf81 ;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
section {
  padding: 3rem 0;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin:0 1rem;
flex: 1;
}
.column{
display: flex;
flex-direction: column;
max-width: 50%;
padding: 0.8rem;
}

iframe {
width: 640px;
height: 360px;
max-width: 100%;
}


/* ========== HEADER & NAVIGATION ========== */
header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
}

.navbar {
  background-color: rgba(0,0,0,0.4);
  padding: 2% 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  transition: background-color 0.4s ease;
}

.navbar.scrolled {
  background-color:#693833;
  backdrop-filter: blur(2px);
}

.logo img {
  max-width: 200px;
  height: auto;
}

.nav-links {
  display: flex;
  gap: 1em 3em;
}

/* == BURGER & MOBILE MENU == */
.hamburger {
  display: none;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 1100;
}

.mobile-menu {
  display: none;
  height: 85vh;
}
/* ==================================== Page Accueil =============================================*/
/* ==SECTION Accueil == */
.accueil {
  position: relative;
  background: url('../img/accueil_compo.png') center/cover no-repeat;
  height: 100vh;
  display: flex;
  
  justify-content: center;
  align-items: flex-end;
  z-index: 1;
}
.accueil p {
padding-bottom: 3rem;
font-size: clamp(1rem, 2vw, 1.3rem);
font-weight: 400;
}
/* == SECTION Intro == */
.intro {
  position: relative;
  z-index: 2;
  margin-top: -3rem;
  background-color: #debf81;
  border-radius: 3rem 3rem 0 0;
  padding-top: 0;
}
.intro img {
height: 600px;
}


/* == SECTION Activites == */
.activites {
  background-color: #153736;
}
.image-box {
  border: 5px solid #fff;
  border-radius: 3rem;
  overflow: hidden;
margin-top: 1rem;
  max-width: 28%; 
}
.image-box img {
  display: block;
  width: 100%;
  height: auto;
}
.image-box:hover {
  border-color: #884B45;
}

/* Overlay sombre inactif */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Overlay activé quand menu ouvert */
.overlay.active {
  opacity: 1;
  pointer-events: all;
}
/* == SECTIONS Application == */
.application {
  background-color: #f0dab8;
  padding-bottom: 8rem;
}
/* == superposition == */
.superposition-container {
position: absolute;
z-index: 8;
left: 50%;
transform: translate(-50%, -50%);
background-color:  #2a2a2a;
border-radius: 10px;
width: 80%;
max-width: 1100px;
height: 130px;
padding: 0 5% 0 5%;
display: flex;
align-items: center;
 
}
.superposition-container img {
  position: absolute;
  transform: translate(-70%,-5%);
  z-index: 10;
  width: 170px;
}
.superposition-container p {
margin-left: 80px;
}

/* == SECTIONS Contact == */

.contact{
  background-color: #884b45;
  z-index: 7;
  padding-top: 8rem;
}

.contact .container{
  display: flex;
  flex-direction: column;
}

.contact-content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: top;
  margin-top: 2rem;
  
}
.formulaire {
  width: 100%;
  max-width: 600px;
}
.row-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

input[name="name"],
input[name="email"] {
  width: 48%;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.formulaire input,
.formulaire textarea {
  padding: 0.8rem;
  border: 0.2rem solid white;
  border-radius: 18px;
  margin-bottom: 20px;
}

.formulaire textarea {
 height: 330px;
}

.formulaire button {
  padding: 0.5rem 1rem;
  background-color: #333;
  color: #fff;
  border: 0.2rem solid white;
  border-radius: 15px;
  cursor: pointer;
}

.reseaux{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.reseaux-box{
  width: 200px;
  height: 350px;
  padding:0.5rem;
  background: linear-gradient(to bottom, #343434 45%, #2a2a2a 40%);
  border: 0.2rem solid white;
  border-radius: 1rem;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);

  align-items: center;
  display: flex;
  flex-direction: column;
}
/* ==footer == */
footer {
  background-color: #2a2a2a;
  padding:2rem 0;
}

.Footer-content{
  display: flex;
  justify-content: space-between;
}


.Footer-logos img {
  width: 50px;
  margin-left: 50px;
}

/* ==================================== Page Swipes =============================================*/

.bas-de-page {
  padding: 2rem 0;
  background-color: #153736;
}
.bas-de-page .container{
  display: flex;
  justify-content: space-between;
}

.bas-de-page img{
 width: 25%;
 max-width: 200pX;
}
.accueil-titre{
background: url('../img/fond.png') top/cover no-repeat;
display: flex;
justify-content: center;
padding-top: 180px;
height: 300px;
}

.beige{
background-color: #F0DAB8;
padding: 3rem 0 3rem 0;
}

.Gris{
background-color: #2A2829;
display: flex;
align-items: center;

width: 100%;
min-height: 170px;
padding: 1rem;
margin-bottom: 1.5rem;
}

.Gris p{
border: solid white;
text-align: left;
padding: 3rem 3rem;
}

.banniere-titre {
text-align: left;
justify-self: left;
background: url('../img/banniere.png') center/cover no-repeat;
padding: 1rem 8rem 1rem 4rem;
margin-bottom: 3rem;
}

.titre-fond{
background-color: #153736;
width: 400px;
max-width:100% ;
text-align: center;
padding: 0.5rem 1rem;
}

.titre-fond-center{
margin: 0 auto;
}

.clovis-overlay img{
position: absolute;
z-index: 100;
translate:450px -162px;
}

.swipes-fonctionnement{
background-color: #F7E8D1;
border: solid #153736;
border-radius: 8px;
margin: 1.5rem;
padding: 1rem;
max-height: 100%;
width: 60%;
}

.swipes-navigation {
background-color: #153736;
padding: 1rem;
margin-bottom: 1rem;
}

.swipes-validation {
background-color: #3A4F4E;
padding: 1rem;
}
/* ==================================== Page challenges =============================================*/

.F7E8D1, .FDF1DF{
padding: 1rem;
flex: 1;
}

.F7E8D1{
background-color: #F7E8D1;
}
.FDF1DF{
background-color: #FDF1DF;
}

/* ==================================== Hide & Hunt =============================================*/
.HH-fonctionnement{
background-color: #F7E8D1;
border: solid #153736;
border-radius: 8px;
padding: 1rem;
min-height: 280px;
max-height: 100%;
box-sizing: border-box;
box-shadow: 10px 10px 0 #b98c50;
}

img{
max-width: 400px;
object-fit: contain;
}
.Green{
background-color: #3A4F4E;
padding: 0 5rem 0 5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.marge{
margin: 4rem 0 3rem 1rem;
}

.icone{
position: absolute;
display: flex;
justify-self: left;
height:100px;
transform: translate(-40px, -20px);
}
.fond-gris{
background-color: #2A2829;
height: 330px;
}

.mobile {
  display: none;
}

/* ==================================== Responsive=============================================*/

@media screen and (max-width: 1024px) {
  .nav-links {
    display: none;
  }
  .hamburger {
    display: block;
  }
  .mobile-menu {
    display: flex;
    position: fixed;
    top: 80px;
    right: -45%;
    width: 45%;
    background-color: #693833;
    border-radius: 3rem 0 0 3rem;
    padding: 3rem 0 3rem 2rem;
    flex-direction: column;
    justify-content: center;
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    box-shadow: -4px 0 10px rgba(0,0,0,0.3);
  }
  .mobile-menu.open {
    right: 0;
  }
  .mobile-nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .mobile-nav-links li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    background-color: #f5e8d3;
    color: #844842;
    padding: 1rem 1.5rem;
    border-radius: 1rem 0 0 1rem;
    box-shadow: 0 8px 0 #3e1d17;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  .mobile-nav-links li a::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 1rem;
    background-color: #5e2c25;
    border-radius: 0.25rem;
  }
  .mobile-nav-links li a.highlight {
    background-color: #5e2c25;
    color: #fff;
  }
  .mobile-nav-links li a.highlight::before {
    background-color: #fff;
  }
  
  .row {
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  }
  .column, .swipes-fonctionnement{
  max-width: 100%;
  width: 100%;
  
  }
  .clovis-overlay, .pc {
    display: none;
  }
  .mobile{
    display: block;
  }
}

@media (max-width: 500px) {
  .superposition-container, .bas-de-page img{
    display: none;
  }
   .image-box {
    max-width: 80%; 
  }
  .reseaux {
    align-items: center;
    flex-direction: column;
    gap: 2rem;
  }
  .intro img {
height: 300px;
}

}