/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {

    /* Base neutre */
    --dark: #0B0B0B;       /* texte principal, éléments sombres */
    --dark1: #1d1d1d;       /* texte principal, éléments sombres */
    --dark2: #383838;      /* sections sombres secondaires */
    --light: #FFFFFF;      /* fond clair, textes sur sombre */
    --muted: #555;         /* texte secondaire / discret */
    --muted2: #f8f8f8;         /* texte secondaire / discret */
    --muted3: #f3f3f3; 
  
    /* Couleurs fonctionnelles */
    --accent: #ffe600;     /* actions, hover, boutons, liens */
    --success: #4CAF50;    /* validation / succès */
    --success2: #007a04;    /* validation / succès */
    --focus: #005fcc;       /* focus visible et accessible */
  
    /* Bordures ou ombres peuvent réutiliser ces couleurs si besoin */
    --border: #e0e0e0;



}

/* Appliquer un focus visible accessible à tous les éléments interactifs */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus);   /* couleur du focus */
  outline-offset: 2px;               /* décale légèrement l’outline pour ne pas coller à l’élément */
}

/* Optionnel : transition douce pour le focus */
button,
a,
input,
textarea,
select {
  transition: outline 0.15s ease-in-out;
}


/* Base */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  color: #0B0B0B;  
}

body, html {
  width: 100%;
}
/* important pour pousser le footer en bas */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

footer {
  margin-top: auto;
}



/* Titres globaux */
h1 {
  font-size: clamp(1.25rem, 1rem + 2.8vw, 3.2rem);
  line-height: 1.2;
  margin: 0;
}

h2 {
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  line-height: 1.3;
  margin: 0 0 clamp(0.9rem, 2vw, 1.25rem) 0;
}

h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);   /* 18.4px → 24px → 24px */
  line-height: 1.35;
  margin: 0 0 clamp(0.6rem, 1.2vw, 0.9rem);
}


h4 {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);  /* 16.8px → 20px → 20px */
  line-height: 1.4;
  margin: 0 0 clamp(0.5rem, 1vw, 0.7rem);
}

h5 {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);  /* 16.8px → 20px → 20px */
  line-height: 1.4;
  margin: 0 0 clamp(0.5rem, 1vw, 0.7rem);
}

p {
  margin: 0;
  font-size: clamp(0.8rem, 0.8rem + 0.3vw, 1rem);  
}

p, li, dd, summary {
  line-height: 1.6;
  font-weight: 550;
}

h1 { font-weight: 850; }
h2 { font-weight: 550; }
h3 { font-weight: 500; }
h4 { font-weight: 500; }
h5 { font-weight: 500; }



/* ==============================
   Listes de base : UL et OL
   ============================== */

ul, ol {
  margin: 0 0 1em 1.5em; /* marge autour des listes H D B G*/
  list-style-type: disc;      /* puces classiques */
  padding: 0;        
}

/* items de premier niveau */
ul > li, ol > li {
  margin: 0.5em 0;         /* espace entre les items principaux */
  line-height: 1.5;        /* lisibilité */
}

/* ==============================
   Sous-listes (niveau 2)
   ============================== */
   ul ul, ol ol {
    margin-left: 1.5em;      /* indentation supplémentaire */
    list-style-type: circle; /* puces secondaires */
  }
  
  ul ul > li, ol ol > li {
    margin: 0.3em 0;          /* moins d’espace que le premier niveau */
  }

/* ==============================
   Sous-sous-listes (niveau 3+)
   ============================== */
   ul ul ul, ol ol ol {
    margin-left: 1.5em;       /* nouvelle indentation */
    list-style-type: square;  /* puces tierces différentes */
  }
  
  ul ul ul > li, ol ol ol > li {
    margin: 0.2em 0;          /* encore un peu moins d’espace */
  }



  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  


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

/* 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;
}



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

/* HEADER */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--light);
  border-bottom: 1px solid var(--border);
}


/* Nav + centrage */
.nav {
   width: 100%;
   text-align: center;
   margin-bottom: clamp(0.75rem, 1vw, 1rem); 
  }

/* Bouton (summary) */
.nav summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  
  border-radius: 0.4rem;
  
  cursor: pointer;
  transition: background-color .2s;
}
.nav summary:hover { background: #F9F9F8; }
.nav summary::-webkit-details-marker { display: none; }

/* Libellé à côté du hamburger */
.menu-label {
  font-weight: 600;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  line-height: 1;
  color: #0B0B0B;
}

/* Icône hamburger (3 barres) */
.burger {
  position: relative;
  display: inline-block;
  width: 1.5rem;
  height: 0.14rem;              /* barre du milieu */
  background: #0B0B0B;
  border-radius: 2px;
  transition: transform .25s ease, background-color .25s ease;
}
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 0.14rem;
  background: #0B0B0B;
  border-radius: 2px;
  transition: transform .25s ease, top .25s ease, bottom .25s ease, opacity .2s;
}
.burger::before { top: -0.43rem; }
.burger::after  { bottom: -0.43rem; }

/* Effet “X” à l’ouverture */
.nav[open] .burger { background: transparent; }
.nav[open] .burger::before {
  top: 0;
  transform: rotate(45deg);
}
.nav[open] .burger::after {
  bottom: 0;
  transform: rotate(-45deg);
}

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

/* Liens */
.nav a {
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  color: #0B0B0B;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  line-height: 1;
  padding: 0.35rem 0.7rem;
  border-radius: 0.35rem;
  transition: background-color .25s, color .25s;
}
.nav a:hover { 
  background: var(--accent);
 }
    
/*///////////////////////////////////////////--------------------------------*/
    /* HERO */
    .hero {
      padding-top: clamp(2rem, 0.5570rem + 5.3691vw, 7rem);
    }
    
    .container-hero {
      width: 90%;
      max-width: clamp(40rem, 95vw, 120rem);
      margin: 0 auto;
      text-align: center;
    }
    

    .hero .btn {
      display: inline-block;
      padding: clamp(0.7rem, 2vw, 1rem) clamp(1.2rem, 3.5vw, 2rem);
      margin-top: 3rem;
      background: var(--accent);
      color: var(--dark2);
      text-decoration: none;
      font-weight: 700;
      font-size: clamp(1rem, 2vw, 1.2rem);
      border-radius: 0.5rem;
    
      /* Bordure transparente pour réserver l'espace */
      border: 1px solid transparent;
    
      /* Transitions */
      transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      will-change: transform;
    }
    
    .hero .btn:hover {
      background: var(--dark2);
      color: var(--accent);
    
      /* Border-color seulement, largeur déjà réservée */
      border-color: var(--accent);
    
      transform: translateY(-1px);
    }
    
    .hero .btn:focus-visible {
      outline: 0.18rem solid #0B0B0B;
      outline-offset: 0.12rem;
    }
    

    .hero, .quote{
      background-color: var(--dark2);
      color: var(--light);
    }


/*///////////////////////////////////////////--------------------------------*/
/*border: 1px solid red;*/
    /* QUOTE */
    .quote {
      text-align: center;
      padding-top: clamp(2rem, 0.5570rem + 5.3691vw, 7rem);
      padding-bottom: clamp(2rem, 0.5570rem + 5.3691vw, 7rem);

    }

    .quote h2 {
      font-size: clamp(1rem, 0.4228rem + 2.1477vw, 3rem);
      letter-spacing: clamp(0.12rem, 0.0681rem + 0.1933vw, 0.3rem);
      line-height: 1.6;
    }
   

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


.hero-dossier {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  padding-block: clamp(2rem, 0.5570rem + 5.3691vw, 7rem); /* haut bas, inline G & D*/  
}

.couverture {
  overflow: hidden;
  display: flex;           /* active flex sur le conteneur */
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement */
}

.couverture img {
  max-width: 350px;
  height: auto;
  display: block;
  border: 1px solid rgb(224, 224, 224);
}

.appel-association {
  min-width: 100px;
  width: 95%;
  max-width: 600px;
  
  /* Pour que le texte se replie naturellement */
  word-wrap: break-word;    /* ancien nom, compatible */
  overflow-wrap: break-word; /* standard moderne */
  hyphens: auto;            /* optionnel : ajoute des traits d’union si nécessaire */
  text-align: justify;
}


/* Popup overlay */
.popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup:target {
  display: flex;
}

/* Conteneur relatif pour positionner la croix */
.popup-inner {
  position: relative;
  
}

.popup-inner img {
  max-width: 95vw;   /* 80% de la largeur de la fenêtre */
  max-height: 95vh;  /* 80% de la hauteur de la fenêtre */
  
  display: block;
}


/* Croix */
.popup-inner .close {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgb(255, 255, 255);
  color: black;
  font-size: 1.5rem;
border-bottom: 1px solid red;
  padding: 0.2em 0.5em;
  text-decoration: none;
}








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

/* FAQ RECO */
.reco {
  width: 100%;
  background: var(--muted2);
  color: var(--dark); 
  padding-top: clamp(2rem, 0.5570rem + 5.3691vw, 7rem);
  padding-bottom: clamp(2rem, 0.5570rem + 5.3691vw, 7rem);
  justify-content: center; /* centre les items sur la ligne */
}


.container {
  flex-wrap: wrap;
  width: 95%;
  max-width: 1600px;
  margin-inline: auto;               /* centre la boîte */
}


.reco details {
  background: var(--light);
  border: 1px solid var(--border);
  margin: 0 0 1rem 0;

}

.reco summary {
  padding: 1rem 1.5rem;
  
  line-height: 1.35;
  
  cursor: pointer;
}

.reco summary:hover {
  background: var(--accent);
}

/* Contenu déplié : espace en bas uniquement quand ouvert */
.reco .details-content {
  padding-bottom: 1rem;
  padding-left: 1.5rem;
}

details[open] summary {
  background-color: #fff; /* ou la même que .details-content */
  color: #666;            /* texte discret */
  font-size: 0.95rem;     /* un peu plus petit */
  font-weight: 400;
  padding: 0.5rem 1rem 0.25rem;
  border-bottom: 1px solid #eee; /* légère séparation, optionnel */
}

details .details-content p {
  margin-bottom: 1.2em;   /* espace entre paragraphes dans ce bloc uniquement */
}



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







/* Section de partage icones- Pleine largeur, sobre, fluide */
.share-section {
  width: 100%;
  padding: clamp(32px, 6vw, 60px) 20px;
  text-align: center;
  background-color: var(--muted2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.share-section h2 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  margin-bottom: clamp(16px, 4vw, 24px);
}

.share-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}


.share-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.25rem, 1.0336rem + 0.8054vw, 2rem);
  height: clamp(1.25rem, 1.0336rem + 0.8054vw, 2rem);
  border-radius: 6px;
  background-color: var(--light); /* fond blanc */
  text-decoration: none;
}

.share-links a img {
  width: clamp(1rem, 0.9639rem + 0.1342vw, 1.125rem);
  height: clamp(1rem, 0.9639rem + 0.1342vw, 1.125rem);

  filter: brightness(0); /* icône noire */
  opacity: 0.65;

}

.share-links a:hover {
  background-color: var(--accent);    /* fond jaune au survol */
  transform: translateY(-2px); /* léger déplacement vers le haut */
  transition: background-color 0.3s ease, transform 0.3s ease; /* transition fluide */
}






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

/* 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(--light);
  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(--light);
  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(--border);
  border-radius: 8px;
  font-size: clamp(0.95rem, 2.8vw, 1rem);
  transition: border 0.3s ease;
}

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

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

.contact-form button:hover {
  
  background-color: var(--success2);
  
}


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

/* Footer global - Fond sobre, texte clair, intégré au flux */
footer {
  width: 100%;
  padding: clamp(20px, 4vw, 32px) 20px;
  background-color: var(--dark1);
  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(--light);
  font-weight: 400;
  line-height: 1.5;
}


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

.hero-media {
  
  width: 100%;
  margin: 0 auto;
  background-color: #122129;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 2vw, 1rem) 0; /* padding minimal */
}

.hero-media img {
  display: block;
  width: 80%; /* facile à modifier : 60%, 70%, 80%, 90%, 100% */
  height: auto; /* hauteur naturelle, pas de contrainte */
  object-fit: contain;
}









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


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

.fleche-haut {
  position: sticky;
  top: 50vh;
  display: block;
  margin: 1px 0 0 auto;
  width: max-content;

  text-decoration: none;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeIn 0.6s ease-out 1.4s forwards;
  z-index: 1000;

  padding: 8px 12px;
  background: var(--accent);
  color: var(--dark);
  border-radius: 8px 0 0 8px;
}

/* Effet au survol (desktop) */
.fleche-haut:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background: var(--accent-dark, var(--accent)); /* si tu as une variante foncée */
  border: 2px solid rgb(255, 174, 0);
}





.bouton-fermer {
  /* … ton style existant … */
  position: sticky;
  top: 60vh;
  display: block;
  margin: 1px 0 0 auto;
  width: max-content;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeIn 0.6s ease-out 1.4s forwards;
  z-index: 1000;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--dark);
  border-radius: 8px 0 0 8px;
  border: none;

  /* Transition douce pour tous les effets */
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
}

/* Effet au survol (desktop) */
.bouton-fermer:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background: var(--accent-dark, var(--accent)); /* si tu as une variante foncée */
  border: 2px solid rgb(255, 174, 0);
}

/* Effet au clic (pression) */
.bouton-fermer:active {
  transform: translateY(-6px) scale(0.98);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Optionnel : curseur pour indiquer que c’est cliquable */
.bouton-fermer:hover,
.bouton-fermer:focus {
  cursor: pointer;
}
/*///////////////////////////////////////////--------------------------------*/
/*///////////////////////////////////////////--------------------------------*/

/* CSS minimal pour la page 404 */
.P404 {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centre verticalement */
  align-items: center;      /* centre horizontalement */
  height: 100vh;            /* pleine hauteur de l'écran */
  text-align: center;       /* texte centré */
  gap: 3rem;              /* espace égal entre les éléments */
}

.P404 a {
  text-decoration: none;    /* supprime le soulignement */
  color: inherit;           /* conserve la couleur existante */
}


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

/* 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(--light);
}

.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;
  transition: background-color 0.3s ease, transform 0.3s ease;

  background-color: var(--accent);
  
}

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

.social-icon:hover,
.social-icon:focus-visible {
  background-color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}