/* SECTION TITLE */
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 2rem); /* au lieu de 0.3rem fixe */
  flex-wrap: nowrap;
  margin-top: clamp(0.75rem, 5vw, 1rem);
  padding: clamp(0.5rem, 2vw, 1rem) 0; /* ajouter du padding */
}


/* Logo : taille fluide mais contrôlée */
.logo {
  flex: 0 0 auto;                 /* n'étire pas le groupe */
  width: clamp(2rem, 18vw, 20vh); /* logo plus petit sur mobile, borne max liée au viewport height */
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

.site-name {
  font-size: 2.5rem; /* taille d'un h1 */
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
}

/* Slogan: colore la première lettre de chaque mot ciblé */
.slogan .letter {
  color: #ff0000;
  display: inline-block;
  transform: scaleX(1.4);      /* élargit la lettre */
  transform-origin: left;      /* garde l’ancrage à gauche */
  margin-right: 0.35em;       /* ajuste l’espacement si nécessaire */
  font-weight: 600;
}



/*///////////////////////////////////////////--------------------------------*/

/* =========================
   MENU NAVIGATION
   ========================= */

/* Fond du header */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bleu-ardoise-fonce);
}

/* Details menu centré */
details.nav {
  width: 100%;
  text-align: center;
  padding: clamp(0.6rem, 1.2vw, 0.9rem) 0;
}

/* Fond du menu quand ouvert */
details.nav[open] {
  background-color: var(--bleu-ardoise-fonce);
}

/* Bouton summary */
.nav summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.8rem, 1.5vw, 1rem);
  cursor: pointer;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}

.nav summary:hover {
    background: rgba(93, 173, 226, 0.15);
  border-color: rgba(93, 173, 226, 0.3);
  
}

.nav summary::-webkit-details-marker {
  display: none;
}

/* ---------- */
/* Hamburger */
.burger {
  position: relative;
  display: inline-block;
  width: 1.25rem;
  height: 0.12rem;
  background: var(--blanc-doux);
  border-radius: 2px;
}
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 0.14rem;
  background: var(--blanc-doux);
  border-radius: 2px;
}
.burger::before { top: -0.43rem; }
.burger::after  { bottom: -0.43rem; }

/* Transformation en X quand ouvert */
.nav[open] .burger {
  background: transparent;
}
.nav[open] .burger::before {
  top: 0;
  transform: rotate(45deg);
}
.nav[open] .burger::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/* ---------- */
/* Libellé menu */
.menu-label {
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  line-height: 1;
  color: var(--blanc-doux);
}

/* Liste des liens */
.nav ul {
  list-style: none;
  margin: 0.5rem 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  justify-content: center;
}

/* Liens */
.nav a {
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  color: var(--blanc-doux);
  font-weight: 550;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  line-height: 1;
  padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.8rem, 1.5vw, 1rem);
  border-radius: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0);
  transition: all 0.3s ease;
}


.nav a:hover {
  background: rgba(93, 173, 226, 0.2);
  border-color: rgba(93, 173, 226, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

details.nav[open] summary { 
  background: rgba(93, 173, 226, 0.2);
  border-color: rgba(93, 173, 226, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.12);
}

details.nav[open] a {
  color: var(--blanc-doux); /* texte blanc même ouvert */
}


 /*/// invite adhesion ///*/


@keyframes heartbeat-glow {
  0%, 100% { 
    text-decoration-color: var(--orange-clair);
    
  }
  50% { 
    text-decoration-color: #ff5100;
    
  }
}


.adhesion-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bleu-ardoise-fonce);
  padding: 1rem clamp(0.8rem, 2vw, 1.2rem);
  text-decoration-color: var(--orange-clair); /* soulignement orange */
  text-decoration-thickness: 2px;      /* optionnel : ajuster l’épaisseur */
  text-underline-offset: 3px;          /* optionnel : décale légèrement le soulignement du texte */
  text-align: center;
  color: inherit;                       /* conserve la couleur actuelle du texte */
  animation: heartbeat-glow 5.5s infinite;
}


.adhesion-text {
  font-weight: 600;
  color: var(--blanc-doux);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.4;
  letter-spacing: 0.035em;
}



.adhesion-banner:hover {
  background-color: var(--orange-clair); /* Jaune soutenu à l’interaction */
  outline: none;
}



/*///////////////////////////////////////////--------------------------------*/
/* Section Contact principale */
.contact {
  width: 100%;
  padding: clamp(32px, 8vw, 80px) 20px;
  background-color: var(--bleu-ardoise);
}

/* Conteneur principal - Flex naturel */
.contact-container {
  display: flex;
  gap: clamp(24px, 5vw, 40px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  flex-wrap: wrap; /* Passer en colonne quand l'espace manque */
  justify-content: center;
  align-items: center;
}

/* Colonne gauche - Infos */
.contact-info {
  color: var(--blanc-pur);
  flex: 1 1 400px; /* prend la moitié s’il y a de la place, 100% sinon */
}

.contact-info h2 {
  margin-bottom: clamp(12px, 3vw, 16px);
  font-size: clamp(1.4rem, 3.5vw, 1.6rem);
}

.contact-info p {
  margin-bottom: clamp(10px, 2.5vw, 12px);
  line-height: 1.6;
  font-size: clamp(0.95rem, 2.8vw, 1.05rem);
}

.contact-info ul {
  list-style: none;
  margin: clamp(12px, 3vw, 16px) 0;
}

.contact-info li {
  margin-bottom: clamp(10px, 2.5vw, 14px);
  line-height: 1.5;
  font-size: clamp(0.9rem, 2.6vw, 1rem);
}



/* Colonne droite - Formulaire */
.contact-form {
  flex: 1 1 clamp(280px, 45%, 500px);
  background-color: var(--gris-perle);
  padding: clamp(24px, 6vw, 32px);
  border-radius: 12px;
}

.contact-form h3 {
  text-align: center;
  margin-bottom: clamp(16px, 4vw, 24px);
  font-size: clamp(1.3rem, 3.8vw, 1.5rem);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: clamp(10px, 2.8vw, 12px);
  margin-bottom: clamp(12px, 3.5vw, 16px);
  border: 1px solid var(--gris-clair);
  border-radius: 8px;
  font-size: clamp(0.95rem, 2.8vw, 1rem);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--bleu-vif);
  
  
}

.contact-form button {
  width: 100%;
  padding: clamp(12px, 3vw, 14px);
  border: none;
  border-radius: 8px;
  background-color: var(--bleu-gris);
  color: var(--blanc-pur);
  font-size: clamp(1rem, 3vw, 1.05rem);
  font-weight: 600;
  cursor: pointer;
}

.contact-form button:hover {
  
  background-color: var(--bleu-ardoise-clair);
  
}


/*///////////////////////////////////////////--------------------------------*/

/* Footer global - Fond sobre, texte clair, intégré au flux */
footer {
  width: 100%;
  padding: clamp(20px, 4vw, 32px) 20px;
  background-color: var(--bleu-ardoise-fonce);
  font-size: clamp(0.8rem, 2.2vw, 0.9rem);
  text-align: center;
}

/* Conteneur centré, flexible, prêt à évoluer */
.container-footer {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 3vw, 20px);
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.container-footer p {
  margin: 0;
  color: var(--blanc-pur);
  font-weight: 400;
  line-height: 1.5;
}




/* suivez nous Rs */
/* Suivez-nous sur les réseaux sociaux */
.social-wrapper {
  text-align: center;
  margin: 20px 0;
}

.social-wrapper h4 {
  margin-bottom: 15px;
  color: var(--blanc-doux);
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--bleu-clair);
  
}

.social-icon img {
  width: clamp(1rem, 0.9639rem + 0.1342vw, 1.125rem);
  height: clamp(1rem, 0.9639rem + 0.1342vw, 1.125rem);
  object-fit: contain;
}