/* =================================
THEME GENERAL
================================= */

:root{
  --primary:#15803d;
  --primary-soft:#22c55e;
  --light-bg:#f8fafc;
  --card-radius:14px;
}

/* espace global */
main{
  animation: fadeIn .6s ease;
}

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

/* =================================
HEADER
================================= */

.navbar h1{
  letter-spacing:.5px;
}

.navbar a{
  position:relative;
  font-weight:500;
  transition:.3s;
}

.navbar a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:#22c55e;
  transition:.3s;
}

.navbar a:hover::after{
  width:100%;
}

/* =================================
SECTION PRESENTATION
================================= */

main section:first-child{
  border-radius:var(--card-radius);
  border:1px solid #e5e7eb;
  transition:.3s;
}

main section:first-child:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 35px rgba(0,0,0,.08);
}

/* image président */

main section:first-child img{
  transition:.3s;
}

main section:first-child img:hover{
  transform:scale(1.05);
  border-color:#22c55e;
}

/* =================================
EQUIPE
================================= */

section h3{
  text-align:center;
  position:relative;
}

section h3::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  margin:8px auto 0;
  background:#22c55e;
  border-radius:3px;
}

/* cartes membres */

.grid > div{
  border-radius:var(--card-radius);
  border:1px solid #e5e7eb;
  position:relative;
  overflow:hidden;
}

/* effet halo */

.grid > div::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(34,197,94,.15),transparent);
  opacity:0;
  transition:.4s;
}

.grid > div:hover::before{
  opacity:1;
}

.grid > div:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 30px rgba(0,0,0,.12);
}

/* image membre */

.grid img{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:50%;
  margin:auto;
  margin-bottom:10px;
  border:3px solid #22c55e;
}

/* =================================
BOUTON ADHESION
================================= */

#adhesionBtn{
  display:block;
  margin:40px auto;
  font-weight:600;
  letter-spacing:.5px;
  transition:.3s;
  box-shadow:0 6px 15px rgba(0,0,0,.1);
}

#adhesionBtn:hover{
  background:#166534;
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.2);
}

/* =================================
MODAL
================================= */

#adhesionModal{
  backdrop-filter:blur(6px);
}

#adhesionModal .bg-white{
  border-radius:var(--card-radius);
  animation:zoomIn .35s ease;
}

@keyframes zoomIn{
  from{
    transform:scale(.9);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

/* formulaire */

#adhesionForm input,
#adhesionForm select,
#adhesionForm textarea{
  width:100%;
  padding:10px 12px;
  margin-bottom:12px;
  border-radius:8px;
  border:1px solid #d1d5db;
  transition:.2s;
  font-size:.95rem;
}

/* focus */

#adhesionForm input:focus,
#adhesionForm select:focus,
#adhesionForm textarea:focus{
  outline:none;
  border-color:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.15);
}

/* textarea */

#adhesionForm textarea{
  min-height:90px;
  resize:none;
}

/* boutons modal */

#adhesionForm button{
  font-weight:600;
  transition:.25s;
}

#adhesionForm button[type="submit"]:hover{
  background:#166534;
}

#adhesionForm button[type="button"]:hover{
  background:#6b7280;
}

/* =================================
FOOTER
================================= */

footer{
  letter-spacing:.4px;
}

/* =================================
DARK MODE
================================= */

.dark-enabled.dark main section{
  background:#1e293b;
  border-color:#334155;
}

.dark-enabled.dark .grid > div{
  background:#1e293b;
  border-color:#334155;
}

.dark-enabled.dark input,
.dark-enabled.dark textarea,
.dark-enabled.dark select{
  background:#0f172a;
  border-color:#334155;
  color:#e5e7eb;
}

.dark-enabled.dark input::placeholder{
  color:#94a3b8;
}

/* =================================
RESPONSIVE NAVBAR MOBILE COMPLET
compatible avec responsive.js (.open)
================================= */

@media(max-width:768px){

/* bouton burger visible */

.burger{

 display:block;

 font-size:26px;

 background:none;

 border:none;

 color:white;

 cursor:pointer;

 z-index:1001;

}

/* menu mobile plein écran */

.nav-links{

 position:fixed;

 top:0;
 left:0;

 width:100%;
 height:100vh;

 background:linear-gradient(
 160deg,
 #14532d,
 #166534,
 #15803d
 );

/* organisation verticale */

 display:flex;

 flex-direction:column;

 align-items:center;

 justify-content:flex-start;

/* espace pour laisser visible le header */

 padding-top:95px;

 padding-bottom:40px;

 padding-left:20px;

 padding-right:20px;

/* espacement entre boutons */

 gap:14px;

/* animation */

 transform:translateY(-100%);

 opacity:0;

 transition:.45s ease;

/* permet scroll manuel */

 overflow-y:auto;

 -webkit-overflow-scrolling:touch;

/* passe au-dessus du site */

 z-index:999;

}

/* menu visible quand burger cliqué */

.nav-links.open{

 transform:translateY(0);

 opacity:1;

}

/* structure des items */

.nav-links li{

 width:100%;

 max-width:300px;

}

/* style boutons liens */

.nav-links a{

 display:block;

 width:100%;

 text-align:center;

 padding:12px 14px;

 font-size:1.05rem;

 font-weight:600;

 color:white;

 border-radius:12px;

 letter-spacing:.3px;

/* effet premium */

 background:rgba(255,255,255,.05);

 backdrop-filter:blur(6px);

 border:1px solid rgba(255,255,255,.08);

 transition:.25s;

}

/* hover / interaction */

.nav-links a:hover{

 background:rgba(255,255,255,.12);

 transform:translateY(-2px);

 box-shadow:0 6px 18px rgba(0,0,0,.25);

}

/* petite ligne décorative */

.nav-links a::after{

 content:"";

 display:block;

 width:26px;

 height:2px;

 margin:6px auto 0;

 background:rgba(255,255,255,.35);

 border-radius:2px;

}

/* empêche scroll page derrière menu */

body.menu-open{

 overflow:hidden;

}

/* dark mode compatible */

.dark .nav-links{

 background:linear-gradient(
 160deg,
 #022c22,
 #064e3b,
 #065f46
 );

}

}

/* =================================
FORMULAIRE PREMIUM
================================ */

#adhesionForm{

 display:flex;

 flex-direction:column;

 gap:14px;

}


/* champs */

#adhesionForm input,
#adhesionForm select,
#adhesionForm textarea{

 width:100%;

 padding:12px 14px;

 border-radius:12px;

 border:1px solid rgba(0,0,0,.08);

 background:#ffffff;

 font-size:.95rem;

 transition:.25s;

 outline:none;

 box-shadow:
 0 4px 12px rgba(0,0,0,.03);

}


/* focus élégant */

#adhesionForm input:focus,
#adhesionForm select:focus,
#adhesionForm textarea:focus{

 border-color:#16a34a;

 box-shadow:
 0 0 0 3px rgba(34,197,94,.18);

 background:white;

}


/* placeholder */

#adhesionForm input::placeholder,
#adhesionForm textarea::placeholder{

 color:#94a3b8;

}


/* textarea */

#adhesionForm textarea{

 min-height:90px;

 resize:none;

}


/* select */

#adhesionForm select{

 cursor:pointer;

}


/* zone boutons */

#adhesionForm .flex{

 display:flex;

 gap:10px;

 margin-top:10px;

}


/* bouton envoyer */

#adhesionForm button[type="submit"]{

 flex:1;

 background:

 linear-gradient(
 135deg,
 #16a34a,
 #22c55e
 );

 color:white;

 padding:11px;

 border:none;

 border-radius:12px;

 font-weight:600;

 cursor:pointer;

 transition:.25s;

}


/* hover envoyer */

#adhesionForm button[type="submit"]:hover{

 transform:translateY(-1px);

 box-shadow:
 0 10px 22px rgba(34,197,94,.35);

}


/* bouton fermer */

#closeAdhesionModal{

 flex:1;

 background:#e5e7eb;

 color:#374151;

 border:none;

 padding:11px;

 border-radius:12px;

 cursor:pointer;

 transition:.25s;

}


/* hover fermer */

#closeAdhesionModal:hover{

 background:#d1d5db;

}


/* =================================
RESPONSIVE MOBILE
================================ */

@media(max-width:480px){

#adhesionForm{

 gap:12px;

}


#adhesionForm .flex{

 flex-direction:column;

}


}


/* =================================
DARK MODE
================================ */

.dark #adhesionForm input,
.dark #adhesionForm textarea,
.dark #adhesionForm select{

 background:#020617;

 border:1px solid #334155;

 color:white;

}


.dark #closeAdhesionModal{

 background:#334155;

 color:white;

}


.dark #adhesionForm input::placeholder{

 color:#94a3b8;

}