:root {
  /* Brand Colors */
  --color-primary: #0B2F46;
  --color-primary-dark: #071F2E;
  --color-accent: #D9822B;
  --color-accent-hover: #E8953E;
  --color-secondary: #2D6A4F;

  /* UI Backgrounds */
  --color-bg-main: #F4F6F9;
  --color-bg-surface: #FFFFFF;

  /* Typography */
  --color-text-main: #2B303A;
  --color-text-muted: #5C6470;
  --color-text-on-primary: #FFFFFF;
  
  /* UI Elements & Controls */
  --icon-color: #0B2F46;
  --logo-filter: none;
  --overlay-bg: rgba(0, 0, 0, 0.4);
}


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

html {
    scroll-behavior: smooth;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--dark-color);
    background-color: var(--light-bg);
}

body {
    line-height: 1.6;
    padding-top: 80px; /* Espace pour le menu fixe */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
/*header*/
/*.navbar {
    background-color: var(--color-bg-surface);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    flex-wrap: nowrap;
    z-index: 1000;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
   
}

.logo-block img{
    height: 60px;
    width: 100%;
   
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color:#D9822B;
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
}

.nav-links a:hover, .nav-links a.active{
    color: #E8953E;
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 5px;
}

.menu-btn{
    display: none;
    width: 34px;
    cursor: pointer;
    overflow: visible;
}

.menu-btn .bar{
    display: block !important;
    flex-basis: 100%;
    height: 4px;
    background-color:#0B2F46;
    margin: 3px;
}*/

/* --- Base Reset & Layout --- */
.navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    background-color: var(--color-bg-surface);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    flex-wrap: nowrap;
    z-index: 1000;
}

.navbar .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between; /* Pushes Logo to Left, Nav/Button to Right */
    align-items: center;            /* Perfectly centers them vertically */
}

.logo-block img {
    height: 50px; /* Adjust based on your logo design */
    display: block;
}

/* --- Desktop Navigation (Default View) --- */
.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px; /* Clean spacing between links */
}

.nav-links a {
   text-decoration: none;
    color:#D9822B;
    font-weight: 600;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, padding-bottom 0.3s ease;
  border-bottom: 2px solid transparent; /* Prevents visual layout shifting */
  padding-bottom: 5px;
    /*transition: var(--transition);*/
}

.parent{
  position: relative;
}

/* Style du conteneur du sous-menu */
.subLink {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  top: 100%; /* Se place juste en dessous du lien Gouvernance */
  left: 50%;
  transform: translateX(-50%); /* Centre le sous-menu par rapport à Gouvernance */
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 140px;
  
  /* Masqué par défaut */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}

/* Style des liens à l'intérieur du sous-menu */
.subLink li a {
  display: block;
  padding: 8px 20px;
  color: #D9822B; /* Couleur plus discrète par défaut */
  font-size: 0.95rem;
  text-align: left;
}


/* AFFICHAGE AU SURVOL : Rendre le menu visible quand la souris est sur le bloc */
.parent:hover .subLink {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  margin-top: 5px; /* Petit effet de glissement léger vers le bas */
}

/*button*/
#backToTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed position stays in place */
  bottom: 20px; /* Distance from bottom */
  right: 20px; /* Distance from right */
  z-index: 99; /* Ensures it stays on top of other content */
  border: none; 
  outline: none; 
  background-color: var(--color-secondary); /* Uses your secondary variable */
  color: white; 
  cursor: pointer; 
  padding: 15px; 
  border-radius: 50%; /* Makes it a circle */
  font-size: 18px; 
  width: 50px;
  height: 50px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s, background-color 0.3s;
}

#backToTop:hover {
  background-color: #D9822B; /*orange slightly on hover */
}



/* Hide hamburger button on desktop screens */
.menu-btn {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.menu-btn .bar {
    width: 25px;
    height: 3px;
    background-color: #333333;
    transition: all 0.3s ease;
}

.nav-links a:hover, .nav-links a.active{
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 5px;
}
.language{
    width: 60px;
    padding: 4px;
    text-align: center;
    background-color: #F4F6F9;
}
.language a{
    text-decoration: none;
    color: #D9822B;
    font-weight: 700;
}

.language:hover, .language a:hover{
    color: #FFFFFF;
    background-color: #D9822B;
}

 /*nav{
    position: sticky;
    display: flex;
    justify-content: space-around;
    top: 0;

           padding-top: 8px;
            padding-bottom: 10px;
            padding-left: 30px;
            padding-right: 30px;
        }

        nav a{
            text-decoration: none;
            color: #D9822B;
            margin-right:20px;
            font-size: 25px;
        }
        nav img{
            margin-right: 45%;
        }
         p{
            font-size: 25px;
        }

        /*home*/
     .home{
         background-image: url(images/magnific__change-la-couleur-des-tshirt-de-cette-image-en-ora__25462.jpeg);
        background-repeat: no-repeat;
        z-index: 1;
        background-size: cover;
        word-wrap: break-word;
        box-sizing: border-box;
        object-fit: cover;
        display: flex;
        }
        
        .board{
            text-align: justify;
             background:linear-gradient(to right, rgba(0, 0, 0, 0.60) 30%,rgba(0, 0, 0, 0.1) 100%) ; 
             z-index: 2;
             width: 100%;
             min-width: 100px;
             color: #FFFFFF;
            padding: 50px;
             position: relative;
            
        }
        .board p{
            font-size: 24px;
            text-align: justify;
        }
        .board a{
            text-decoration: none;
            color: #F4F6F9;
            font-size: 15px;
            
        }
.join-btn {
  display: inline-flex;
  align-items: center;
  
  
  text-decoration: none;
  background-color: #D9822B; /* Uses your website's secondary color */
  color: #ffffff;
  padding: 10px 22px;
  font-size: 25px;
  font-weight: 600;
  border-radius: 30px; 
  gap: 10px;
  margin-right: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.join-btn:hover {
  background-color: #0B2F46; /* Darkens slightly on hover */
  transform: translateY(-2px); /* Subtle lift effect */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.join-btn:active {
  transform: translateY(0); /* Pushes down slightly when clicked */
}

.join1-btn {
  display: inline-flex;
  align-items: center;
  
  text-decoration: none;
  background: transparent; /* Uses your website's secondary color */
  color: #ffffff;
  padding: 10px 22px;
  font-size: 25px;
  font-weight: 600;
  border-radius: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  transition: all 0.3s ease;
}

.join1-btn:hover {
  background-color: #D9822B; /* Darkens slightly on hover */
  transform: translateY(-2px); /* Subtle lift effect */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.join1-btn:active {
  transform: translateY(0); /* Pushes down slightly when clicked */
}
/*animation on the presentation page*/    
/* 1. Define the animation rules */
@keyframes floatUpFadeIn {
  0% {
    opacity: 0;
    transform: translateY(40px); /* Starts 40px lower down */
  }
  100% {
    opacity: 1;
    transform: translateY(0);    /* Ends at its normal position */
  }
}

/* 2. Apply the animation to your home text container */
.floating-entrance {
  animation: floatUpFadeIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  
  /* Explanation of the parameters:
     - 1.2s: The animation takes 1.2 seconds to complete
     - cubic-bezier: Makes the movement feel smooth and organic (starts fast, slows down at the end)
     - forwards: Keeps the text visible at its final position instead of resetting to invisible
  */
}

        /* Remove the animation from the parent container and apply it to children instead */
.board h1,
.board p {
  opacity: 0; /* Keeps them hidden until the animation begins */
  animation: floatUpFadeIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Heading starts immediately */
.board h1 {
  animation-delay: 0.2s;
}

/* Paragraph waits a brief moment to create a staggered sequence */
.board p {
  animation-delay: 0.5s;
}

        
        .btn{
            background-color: #D9822B;
            padding: 15px;
            border: 0px;
            border-radius: 10px;
            align-items: center;
           margin-left: 45%;
        }
       
  /*mission*/
  .entete-mission{
    background-color: #F4F6F9;
    padding: 20px;
    border-radius: 20px;
    margin: 35px;
  }
  .mission{
    margin: 14px;
  }
   p{
            font-size: 25px;
        }
        nav{
            padding-top: 8px;
            padding-bottom: 10px;
            padding-left: 30px;
            padding-right: 30px;
        }
        nav a{
            text-decoration: none;
            color: #D9822B;
            margin-right:20px;
            font-size: 25px;
        }
        nav img{
            margin-right: 45%;
        }
        .about{
            background-color: #FFFFFF;
            color: #2B303A;
            padding: 30px; 
        }

/* Reset margins */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Ensure the container behaves as a slider track */
.container-miss {
  display: flex;
}


/* Container takes full screen */
.animation-1 ,.animation-2 ,.animation-3 ,.animation-4 ,.animation-5  {
  position: relative;
  width: 100%;
  height: 70vh; /* Full viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000; /* Dark background placeholder */
  border-radius: 20px;
  transition: transform 2s ease;
}

/*transformation*/
.animation-1:hover ,.animation-2:hover ,.animation-3:hover ,.animation-4:hover ,.animation-5:hover{
    transform:translateY(-8px) ;
}

/* Image covers the whole screen safely without stretching */
.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* Stays at the bottom layer */
}

/* The text overlay wrapper */
.overlay-content, .overlay-content1,.overlay-content2,.overlay-content3,.overlay-content4 {
  position: relative;
  z-index: 2; /* Sits directly on top of the image */
  text-align: center;
  color: #ffffff;
  font-family: sans-serif;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-top: 10px;
  background: rgba(0, 0, 0, 0.4); /* Optional: dark tint so text is easy to read */
  border-radius: 8px;
  
  /* Transition effect for JavaScript to trigger */
  transition: opacity 0.8s ease-in-out, transform 0.0s ease-in-out;
}
/* State when hidden */
.overlay-content.hidden ,.overlay-content1.hidden,.overlay-content2.hidden,.overlay-content3.hidden,.overlay-content4.hidden {
  opacity: 0;
  transform: translateY(40px); /* Slight slide down effect */
}

/* State when JavaScript activates it */
.overlay-content.visible, .overlay-content1.visible,.overlay-content2.visible,.overlay-content3.visible,.overlay-content4.visible {
  opacity: 1;
  transform: translateY(0);
}
        .container-miss{
            margin: 40px 20px 20px 20px;
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px;
        }
.container-miss img{
     width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    
}

.container-miss .image-logo{
    margin: 20px;
     border-radius: 100%;
            height: 60px;
            width: 60px;
            margin-left: 11%;
}
        .mission-grid{
            display: grid;
           grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }
        .mission-grid:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.228);
}
.mission{
    padding-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

/* Hide bulky text by default */
.more-text {
  display: none;
}

/* Style the text link to look completely like plain clickable text */
.toggle-text-link {
 color: #D9822B;
 font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  margin-left: 5px;
  display: inline;
  
  /* --- CRITICAL FIXES FOR CLICKABILITY --- */
  cursor: pointer !important;       /* Forces the pointer hand icon */
  position: relative;               /* Brings it out of flat rendering layer */
  z-index: 10;                      /* Places it on top of overlapping sections */
  user-select: none;     
}

/* Subtle hover feedback */
.toggle-text-link:hover {
  color: #2D6A4F;
}

      /*  .mission{
            font-size: 20px;
            display: inline-block;
            border-left: 8px solid rgb(21, 21, 88) ;
            background-color:  #2D6A4F;
            color: #2B303A;
            padding: 18px;
            border-radius: 10px;
            opacity: 0.7px;
        }
        .mission img{
            border-radius: 100%;
            height: 45px;
            width: 45px;
            margin-left: 40%;

        }
        .mission h3{
            color: #0B2F46;
            text-align: center;
        }
        .mission a{
            color: #D9822B;
            text-decoration: none;
        }*/
/*formulaire*/
/*
.form-contact{
   background-color: transparent;
   width: 500px;
   padding: 30px;
   color: #FFFFFF;
   border-radius: 20px;
   backdrop-filter: blur(15px);
   border: 2px solid rgba(255, 255, 255, 0.2);
   margin-right :30px;
}


.form-contact #btn{
   width: 100%;
   padding: 10px;
    margin: auto;
    outline: none;
    background-color: #FFFFFF;
    color: #D9822B;
    border: 2px solid transparent;
    cursor: pointer;
    transform: 0.5s;
border-radius: 20px;
}
.form-adhesion{
   background-color: transparent;
   width: 500px;
   padding: 30px;
   color: #FFFFFF;
   border-radius: 20px;
    backdrop-filter: blur(20px);
   border: 2px solid rgba(255, 255, 255, 0.2);
}/*
.form{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 130vh;
    background-image: url(images/close-up-people-working-as-team.jpg);
    background-position: center;
    background-size: cover;
    object-fit: cover;
    background-repeat: no-repeat;
}
.input-box{
    width: 100%;
    position: relative;
    margin-bottom: 15px;
}
.input-box input{
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    font-size: 15px;
    outline: none;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding-right: 40px;
    color: #FFFFFF;
}
.input-box input::placeholder{
    color: #FFFFFF;
}
textarea{
    width: 100%;
    background: transparent;
    border-radius: 15px;
    color: #FFFFFF;
    padding: 10px;
    outline: none;
    border: 2px solid rgba(255, 255, 255, 0.2)
}
.input-box span{
    position: absolute;
    right: 20px;
    top: 52%;
    transform: translateY(-15%);
}
.form-adhesion #btn{
   width: 100%;
   padding: 10px;
    margin: auto;
    outline: none;
    background-color: #FFFFFF;
    color: #D9822B;
    border: 2px solid transparent;
    cursor: pointer;
    transform: 0.5s;
border-radius: 20px;
}
form #btn:hover{
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.2)
    
}*/
        /*composition*/
         h1{
            color: #0B2F46;
            text-align: center;
        }
        .compo p{
text-align: center;
font-size: 20px;
        }
        .grid-mem{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px;
        }
        .membre{
            display: inline-block;
            background-color:#FFFFFF;
            font-size: 20px;
            color:#2B303A;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
           
        }
.adhesion-page{
    --ink:#242f28;          /* couleur du texte principal (vert très foncé) */
    --paper: #F4F6F9;        /* fond général de la page (beige clair) */
    --paper-2:#ffffff;      /* variante de fond un peu plus foncée (non utilisée partout) */
    --forest:#1d5fae;       /* couleur "marque" principale (vert forêt) — boutons, accents */
    --forest-dark:#123a6b;  /* vert forêt plus foncé — titres, hover des boutons */
    --ochre:#e2792b;        /* couleur d'accent (orange/ocre) — petits détails, liens actifs */
    --ochre-light:#f4a868;  /* variante claire de l'ocre (non utilisée partout) */
          /* couleur des bordures/séparateurs discrets */
    --white:#ffffff;        /* blanc cassé — fond des cartes et du formulaire */
  }
  .adhesion-page{
    background-color: #F4F6F9;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;font-weight:600;
    margin:0;
    color:var(--forest-dark);
  }
        .eyebrow{
    font-family:'IBM Plex Mono', monospace;  /* police à chasse fixe, look "étiquette" */
    font-size :0.88rem;
    letter-spacing:0.12em; /* espace les lettres */text-transform:uppercase;
    color:var(--ochre);
    display:flex;align-items:center;gap:0.6rem;
  }
/* Petit trait horizontal avant le texte de l'eyebrow (ex: "— PORQUOI ADHÉRER") */
.eyebrow::before{
    content:"";
    width:20px;
    height:3px;
    background:var(--ochre);
}
/* Conteneur central : centre le contenu et limite sa largeur max (1080px) */
  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 1.5rem;
  }
  
  /* =====================================================
     HERO — grand bloc d'introduction en haut de page
     ===================================================== */
.adhesion-page header.ero{
    position:relative;         /* nécessaire pour positionner le SVG en fond (#network) */
    overflow:hidden;           /* coupe le SVG s'il dépasse du bloc */
    padding:5.5rem 0 4.5rem; border-bottom:2px solid var(--line);
}
/* Le texte du ero doit passer AU-DESSUS du SVG (z-index:2) */
  .ero-inner{
    position:relative;
    z-index:2;
    max-width:640px;
  }
  .ero h1{
    font-size:clamp(2.3rem, 5vw, 3.4rem);  /* taille fluide : jamais plus petite que 2.3rem, jamais plus grande que 3.4rem */
    line-height:1.08;
    margin-top:1rem;
    letter-spacing:-0.01em;
  }
  /* Le mot mis en emphase dans le titre (balise <em>) prend la couleur ocre */
  .ero h1 em{
    font-style:italic;
    color:var(--ochre);
  }
  .ero p.lead{
    margin-top:1.3rem;
    font-size:1.08rem;
    max-width:520px;
    text-align: justify;
    color:#40483f;
  }
  .btn{
    display:inline-flex;align-items:center;
    gap:0.5rem;padding:0.85rem 1.6rem;border-radius:2px;
    font-size:0.92rem;font-weight:500;text-decoration:none;cursor:pointer;
    border:1px solid transparent;transition:transform .15s ease, background .15s ease;  /* anime le hover en douceur */
  }
  .btn-primary{ background:var(--forest); color:var(--white); }                          /* bouton plein (action principale) */
  .btn-primary:hover{ background:var(--forest-dark); transform:translateY(-1px); }        /* s'assombrit et remonte légèrement au survol */
  .btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }        /* bouton "contour" (action secondaire) */
  .btn-ghost:hover{ border-color:var(--ochre); color:var(--ochre); }

  /* Le SVG "réseau" animé qui sert de fond décoratif au hero */
  #network{
    position:absolute; inset:0;   /* raccourci pour top:0; right:0; bottom:0; left:0 */
    width:100%; height:100%;
    opacity:0.55;             /* semi-transparent pour ne pas nuire à la lisibilité du texte */
    pointer-events:none;      /* empêche le SVG de "voler" les clics de souris */
  }
  /* Rangée des 3 statistiques sous les boutons (ex: "3 types de membres") */
  .stat-row{
    display:flex;gap:2.4rem;margin-top:3rem;
    font-family:'IBM Plex Mono', monospace;   /* look "chiffre/données" */
  }
  .stat b{
    display:block;font-size:1.5rem;color:var(--forest-dark);
  }
  .stat span{
    font-size:0.72rem;
    text-transform:uppercase;letter-spacing:0.08em; color:#6b7268;
  }
   /* =====================================================
     STYLE COMMUN À TOUTES LES SECTIONS
     (Raisons, Membres, Adhésion partagent ces règles de base)
     ===================================================== */
  .adhesion-page section {  
    padding:2.5rem 0;
    border-bottom:1px solid var(--line);   /* ligne fine qui sépare chaque section */
  }
  /* Le bloc "en-tête" de chaque section : eyebrow + titre h2 */
  .adhesion-page section .head{
    max-width:600px;
    margin-bottom:2.8rem;
  }
  .adhesion-page section .head h2{
    font-size:clamp(1.7rem, 3vw, 2.2rem);
    margin-top:0.8rem;
  }
  /* =====================================================
     SECTION "RAISONS D'ADHÉRER" — grille de 4 cartes
     ===================================================== */
  .reasons{
    display:grid;grid-template-columns:repeat(2,1fr);   /* 2 colonnes égales (passe à 1 colonne en mobile, voir media query) */
    gap: 20px; border-radius: 8px;                              /* astuce : 1px + fond "--line" = fines lignes de séparation entre cartes */
      margin: 20px;
    }
  .reason{
    background:#ffffff;   /* chaque carte a son propre fond, ce qui laisse apparaître les lignes de 1px du grid */
    padding:2rem;
    transition: transform 0.2s ease; /* Prépare une animation fluide lors du survol */
  }
  .reason:hover{transform: translateY(-5px); }
  .reason .num{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem;color:var(--ochre);
  }
  .reason h3{ font-size:1.15rem;margin-top:0.6rem;}
  .reason p{margin-top:0.6rem; font-size:0.94rem;color:#4b5249;}
   /* =====================================================
     SECTION "TYPES DE MEMBRES" — 3 cartes côte à côte
     ===================================================== */
  .members{
    display:grid; grid-template-columns:repeat(3,1fr);   /* 3 colonnes égales (passe à 1 colonne en mobile) */
    gap:1.4rem;
  }
  .member-card{
    background:var(--white); box-shadow: 0 0 25px rgba(46, 139, 87, 0.8);
    padding:2rem 1.7rem; border-radius: 8px;
    position:relative; display:flex; flex-direction:column;   /* empile titre/texte/liste/bouton verticalement */
    min-height:100%;         /* les 3 cartes gardent la même hauteur même si le texte diffère */
  }
/* Carte mise en avant (ici "Membre adhérent") : bordure verte au lieu de grise */
  .member-card.highlight{ border-radius: 8px;box-shadow: 0 0 25px rgba(46, 139, 87, 0.8);}
  .member-tag{
    font-family:'IBM Plex Mono', monospace;font-size:0.68rem;
    letter-spacing:0.08em;text-transform:uppercase;
    color:var(--ochre); margin-bottom:0.9rem;
  }
  .member-card h3{ font-size:1.4rem;}
.member-card .desc{
    font-size:0.92rem; color:#4b5249; margin-top:0.7rem;   /* pousse la liste et le bouton vers le bas, même si la description est courte */
  }
  .member-card ul{
    list-style:none;   /* enlève les puces par défaut, remplacées par ::before ci-dessous */
    padding:0; margin:1.3rem 0 0;font-size:0.87rem;
  }
  .member-card ul li{
    padding:0.45rem 0; border-top:1px solid #2e7d32;   /* fine ligne au-dessus de chaque avantage listé */
    display:flex;gap:0.6rem;
  }
  /* Remplace la puce de liste par un tiret ocre ("—") devant chaque avantage */
  .member-card ul li::before{content:"—";color:var(--ochre); flex-shrink:0;}
  /* Bouton "Choisir ce statut" en bas de chaque carte membre (JS le relie au formulaire) */
  .member-card .pick{
    margin-top: auto;
    text-align:center;padding:0.7rem;font-size:0.85rem;
    border:2px solid #ffb74d;background:transparent;
    color:var(--forest-dark);font-weight:500; cursor:pointer;
  }
/* Sur la carte mise en avant, le bouton est plein (vert) au lieu d'être en contour */
  .member-card.highlight .pick{ background:var(--forest); color:var(--white); border-color:var(--forest);}
  /*--- sur la carte "statut fermé  */
  .member-card.closed{
    background: var(--paper); opacity:0.85; /*legerement estompée pour bien la distinguer des statuts ouverts*/
  }
  .member-card.closed.member-tag{color: #8a8f94;}
  .member-card .closed-note{
   margin-top: auto; padding: 0.7rem; text-align: center;
   font-size: 0.78rem; color:#6b7268; background: #F4F6F9; border:1px dashed var(--line); 
  }

  .stats-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  max-width: 1000px;
  margin: 40px auto;
  font-family: sans-serif;
  text-align: center;
}

.stat-box {
  flex: 1;
  padding: 10px;
}

.stat-number, .stat-suffix {
  font-size: 2.5rem;
  font-weight: bold;
  color: #0B2F46; /* Bleu foncé de votre charte */
  display: inline-block;
}

.stat-label {
  font-size: 0.8rem;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
}
  /* =====================================================
     RESPONSIVE — règles appliquées uniquement sur petits écrans
     (téléphones/tablettes, largeur ≤ 820px)
     ===================================================== */
  @media (max-width:820px){
    .reasons{grid-template-columns:1fr;}      /* les grilles à 2/3 colonnes deviennent 1 seule colonne */
    .members{grid-template-columns:1fr;}
    .form-shell{grid-template-columns:1fr;}
    .navbinks{display:none;}                  /* cache le menu du haut sur mobile (pas de version "burger" ici) */
    .row2{grid-template-columns:1fr;}
  }

  /* Respecte les utilisateurs qui ont désactivé les animations dans leur
     système (accessibilité) : coupe le défilement doux et toutes les transitions */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation:none !important; transition:none !important;}
  }
        .members .icon{
            color: #D9822B;
            font-size: 25px;
            background-color: #f8c99b;
            height: 45px;
            width: 50px;
            border-radius: 20%;
            text-align: center;
            margin: auto;
            
        }

        .members .icon:hover{
            color: #FFFFFF;
            background-color: #D9822B;
            font-size: 30px;
        }
        .grid-mem .membre:hover{
            border-bottom: 5px solid #D9822B ;
            border-top: 5px solid #0d3a55;
        }

        .member-container .btn a{
            color: #FFFFFF;
            font-size: 18px;
            text-decoration: none;
        }
        .adhere{
            background-color: #F4F6F9;
            padding-bottom: 10px;
            padding-top: 60px;
            padding-left: 20px;
            padding-right: 20px;
        }
        .eligi{
            background-color: #FFFFFF;
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 5px;
            padding-top: 5px;
            border-radius: 10px;
            margin: 25px;
            border-left: 6px solid #2D6A4F;
            font-size: 20px;
        }
        .cotis{
             background-color:  #FFFFFF;
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 5px;
            padding-top: 5px;
            border-radius: 10px;
            margin: 25px;
            border-left: 6px solid #d37c25;
            font-size: 20px;
        }
        .perte{
             background-color:  #FFFFFF;
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 5px;
            padding-top: 5px;
            border-radius: 10px;
            margin: 25px;
            border-left: 6px solid #081f2e;
            font-size: 20px;
        }
        /*download rules and regulations*/
        .download-btn {
  display: inline-flex;
  align-items: center;
  
  gap: 10px; /* Spaces the emoji/icon from the text */
  text-decoration: none;
  background-color: var(--color-secondary, #222); /* Uses your website's secondary color */
  color: #ffffff;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.download-btn:hover {
  background-color: #0B2F46; /* Darkens slightly on hover */
  transform: translateY(-2px); /* Subtle lift effect */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.download-btn:active {
  transform: translateY(0); /* Pushes down slightly when clicked */
}

        /*organisation*/
         h1, h2{
            color:  #0B2F46;
            text-align: center;
        }
        p{
            font-size: 15px;
        }
        .img-organ{
        display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            margin: 20px;
            gap: 20px;
        
        }

        .img-organ img{
            width: 100%;
            margin: 0 auto;
            border-radius: 15px;
            transition: transform 0.2s ease;
        }
        .img-organ img:hover{
            transform: translateY(-5px);
        }
        .organ-item{
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 97%;
            margin: 20px;
        }
        .organ-mem{
            background-color:  #F4F6F9;
            border-radius: 20px;
            padding: 15px;
            display: flex;
            gap: 20px;
        }
        .organ{
            background-color:#FFFFFF;
            color:#2B303A;
            padding-top: 60px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
        }
        .organ-logo {
    background:  #0B2F46;
    color: #FFFFFF;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 25px;
    font-weight: 800;
    height: 50px;
    margin-top: 20px;
    margin-left: 8px;
}
.organ-detail h3 {
    color: #0B2F46;
    margin-bottom: 5px;
}

.organ-detail h4 {
    color:#D9822B;
    margin-bottom: 10px;
}
/* ============================================================
   ORGANIGRAMME DÉTAILLÉ DU BUREAU EXÉCUTIF
   Arbre hiérarchique en pur CSS (aucune image) : le Directeur
   Exécutif en haut, puis ses 4 collaborateurs directs, avec le
   Secrétaire Général Adjoint rattaché sous la Secrétaire Générale.
============================================================ */

:root{
    --blue:         #12537b;   /* bleu principal : titres, liens, éléments structurants */
    --blue-dark:   #16305e;   /* bleu très foncé : couleur du texte courant (remplace le noir pur) */
    --blue-pale:   #eaf0fb;   /* bleu très clair : fond des encarts et de l'en-tête */
    --orange:      #D9822B;   /* orange : accents, numéros d'articles, bouton "voir plus" */
    --green:       #2D6A4F;   /* vert : étiquettes secondaires (alinéas, organes) */
    --white:       #ffffff;   /* blanc : fond des cartes de contenu */
    --bg:          #f5f7fb;   /* fond général de la page, blanc légèrement bleuté */
    --hair:        #2D6A4F;   /* couleur des fines bordures / séparateurs */
    --text-dim:    #4b5a72;   /* texte secondaire, un peu plus clair que le bleu foncé */
  }
/* Conteneur qui permet de faire défiler l'organigramme horizontalement
   sur petit écran, plutôt que d'écraser les cases illisibles */
.be-orgchart-wrap{
  overflow-x: auto;
  margin: 8px 0 24px 36px;
  padding-bottom: 12px;
}

/* L'arbre lui-même : une liste imbriquée, sans puces, centrée */
.be-tree, .be-tree ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.be-tree{
  text-align: center;
  white-space: nowrap;
  min-width: 640px;
}
.be-tree ul{
  display: flex;
  padding-top: 28px;
}
.be-tree li{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  padding: 28px 10px 0;
}

/* Trait vertical descendant depuis le parent vers chaque groupe d'enfants */
.be-tree ul::before{
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 0;
  height: 28px;
  border-left: 2px solid var(--hair);
}
/* Trait horizontal + vertical au-dessus de CHAQUE enfant */
.be-tree li::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 50%;
  height: 28px;
  border-top: 2px solid var(--hair);
}
.be-tree li::after{
  content: '';
  position: absolute;
  top: 0; left: 50%; right: 0;
  height: 28px;
  border-top: 2px solid var(--hair);
  border-left: 2px solid var(--hair);
}
.be-tree li:first-child::before{ border-top: none; }
.be-tree li:last-child::after{ border-left: none; }
.be-tree > li{ padding-top: 0; }
.be-tree > li::before, .be-tree > li::after{ display: none; }

/* La case elle-même (un poste du Bureau Exécutif) */
.be-node{
  display: inline-block;
  background: var(--white);
  border: 2px solid var(--hair);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 168px;
  max-width: 190px;
  white-space: normal;
  text-align: left;
  box-shadow: 0 1px 2px rgba(22,48,94,0.06);
}
.be-node h4{
  font-family: 'Spectral', serif;
  font-weight: 600;
  font-size: 0.82rem;
  margin: 0 0 4px;
  color: var(--blue-dark);
}
.be-node p{
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-dim);
}
.be-node.c-blue{   border-color: var(--blue); }
.be-node.c-orange{ border-color: var(--orange); }
.be-node.c-green{  border-color: var(--green); }
.be-node.be-top{
  background: var(--blue-pale);
  min-width: 210px;
  padding: 14px 18px;
}
.be-node.be-top h4{ font-size: 0.92rem; }

/* ============================================================
   ORGANIGRAMME DÉTAILLÉ DU BUREAU EXÉCUTIF
   Arbre hiérarchique en pur CSS (avec flèches directionnelles)
============================================================ */

/* Conteneur qui permet de faire défiler l'organigramme horizontalement */
.be-orgchart-wrap {
  overflow-x: auto;
  margin: 8px 0 24px 36px;
  padding-bottom: 12px;
}

/* L'arbre lui-même : une liste imbriquée, sans puces, centrée */
.be-tree, .be-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.be-tree {
  text-align: center;
  white-space: nowrap;
  min-width: 640px;
}
.be-tree ul {
  display: flex;
  padding-top: 28px;
}
.be-tree li {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  padding: 28px 10px 0;
}

/* Trait vertical descendant depuis le parent vers chaque groupe d'enfants */
.be-tree ul::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 0;
  height: 20px; /* Réduit pour laisser de la place à la flèche */
  border-left: 2px solid var(--hair);
}

/* Trait horizontal au-dessus de CHAQUE enfant */
.be-tree li::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 50%;
  height: 20px;
  border-top: 2px solid var(--hair);
}
.be-tree li::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; right: 0;
  height: 20px;
  border-top: 2px solid var(--hair);
  border-left: 2px solid var(--hair);
}
.be-tree li:first-child::before { border-top: none; }
.be-tree li:last-child::after { border-left: none; }

.be-tree > li { padding-top: 0; }
.be-tree > li::before, .be-tree > li::after { display: none; }

/* ------------------------------------------------------------
   AJOUT DE LA FLÈCHE DIRECTIONNELLE (Pointe de flèche sous le trait)
------------------------------------------------------------ */
.be-tree li > .be-node {
  position: relative;
}

.be-tree ul li > .be-node::before {
  content: '';
  position: absolute;
  top: -9px; /* Positionnement au-dessus de la carte */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--hair); /* Flèche pointant vers le bas */
}

/* La carte racine (Directeur Exécutif) n'a pas de flèche au-dessus */
.be-tree > li > .be-node::before {
  display: none;
}

/* ------------------------------------------------------------
   STYLE DES CARTES (NODES)
------------------------------------------------------------ */
.be-node {
  display: inline-block;
  background: var(--white);
  border: 2px solid var(--hair);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 168px;
  max-width: 190px;
  white-space: normal;
  text-align: left;
  box-shadow: 0 1px 2px rgba(22,48,94,0.06);
}
.be-node h4 {
  font-family: 'Spectral', serif;
  font-weight: 600;
  font-size: 0.82rem;
  margin: 0 0 4px;
  color: var(--blue-dark);
}
.be-node p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-dim);
}
.be-node.c-blue {   border-color: var(--blue); }
.be-node.c-orange { border-color: var(--orange); }
.be-node.c-green {  border-color: var(--green); }
.be-node.be-top {
  background: var(--blue-pale);
  min-width: 210px;
  padding: 14px 18px;
}


/* ============================================================
   VERSION MOBILE : sous 680px, l'arbre devient une liste
   empilée verticalement (plus de traits, plus de défilement).
============================================================ */
@media (max-width: 680px){
  .be-orgchart-wrap{
    overflow-x: visible;
    margin-left: 0;
  }
  .be-tree{
    min-width: 0;
    white-space: normal;
    text-align: left;
  }
  .be-tree, .be-tree ul{
    display: block;
  }
  .be-tree li{
    display: block;
    padding: 0;
    margin: 0 0 12px;
  }
  .be-tree ul::before,
  .be-tree li::before,
  .be-tree li::after{
    display: none;
  }
  .be-node{
    display: block;
    width: 100%;
    max-width: none;
  }
  .be-tree ul{
    padding: 4px 0 4px 18px;
    margin: 8px 0 0 10px;
    border-left: 2px dashed var(--hair);
  }
}
/*finances*/
.finances{
    background-image: url(images/mathieu-stern-1zO4O3Z0UJA-unsplash.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        object-fit: cover;
        padding-top: 60px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
}
 .imageFinance{
        display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            margin: 20px;
            gap: 20px;
        }
.imageFinance img{
            width: 100%;
            margin: 0 auto;
            border-radius: 15px;
            transition: transform 0.2s ease;
        }
.imageFinance img:hover{
    transform: translateY(-5px);
}
.grid-finance{
    display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px;
}
.hero-finances{
     display: inline-block;
            background-color:#FFFFFF;
            font-size: 20px;
            color:#2B303A;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
}
.resources{
    text-align: center;
}
.resource-content{
    background-color: #ffffff;
    font-size: 18px;
    padding: 20px;
    margin: 20px;
    border-radius: 20px;
}/*
.pateImg{
        display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            margin: 20px;
            gap: 20px;
        }
.pateImg img{
            width: 100%;
            margin: 0 auto;
            border-radius: 15px;
            transition: transform 0.2s ease;
        }
.pateImg img:hover{
    transform: translateY(-5px);
}*/
.discipline{
    background-color: #F4F6F9;
    padding-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}
.hero-disci{
    display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px;
}
.disci-image{
     display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px;
}
.disci-image img{
    width: 100%;
    margin: 0 auto;
    border-radius: 15px;
    transition: transform 0.2s ease;
}
.disci-image img:hover{
    transform: translateY(-5px);
}
.disci .icon{
   max-width: 45px;
    height: 45px;
    background: #0B2F46;
    color:#FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 22px;
    margin: 0 auto;
}
.disci{
      display: inline-block;
            background-color:#FFFFFF;
            font-size: 20px;
            color:#2B303A;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
}
/*membres*/
.members-info{
    display: grid;
            grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
            gap: 20px;
            margin: 35px;;
}
.member-block{
    padding-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}
.image-grid{
            display: inline-block;
            background-color:#F4F6F9;
            font-size: 20px;
            color:#2B303A;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            border-top: 5px solid #2D6A4F;
            height: 380px;
            transition: transform 0.2s ease;
}
.image-grid:hover{
    color: #D9822B;
    transform: translateY(-5px);
}
.image-grid img{
   width: 100%;
   height: 175px;

}
/*contact*/
.contact{
    position: relative;
    min-height: 100vh;
    padding: 50px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url(images/alexas_fotos-YdRtHjOmcfI-unsplash.jpg);
    background-size: cover;
}

.contact .content{
    max-width: 800px;
    text-align: center;
}
.contact .contact-content h2{
    font-size: 36px;
    font-weight: 500;
    color: #D9822B;
}
.contact .contact-content p{
    color: #FFFFFF;
    text-align: center;
}
.container-contact{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}
.container-contact .contactInfo{
    width: 50%;
    display: flex;
    flex-direction: column;
}
.container-contact .contactInfo .box{
    position: relative;
    padding: 20px 0;
    display: flex;
}
.container-contact .contactInfo .box .icon{
    min-width: 60px;
    height: 60px;
    background: #FFFFFF;
    color: #D9822B;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 22px;
}
.container-contact .contactInfo .box .text{
    display: flex;
    margin-left: 20px;
    font-size: 16px;
    color: #FFFFFF;
    flex-direction: column;
    font-weight: 300;
}
.container-contact .contactInfo .box .text h3{
    font-weight: 500;
    color: #D9822B;
}
.contactForm{
    width: 40%;
    padding: 40px;
    background-color: #FFFFFF;
}
.contactForm h2{
    font-size: 30px;
    color: #D9822B;
    font-weight: 500;
}
.contactForm .inputBox{
    position: relative;
    width: 100%;
    margin-top: 10px;
}
.contactForm .inputBox input, .contactForm .inputBox textarea{
    width: 100%;
    padding: 5px 0;
    font-size: 16px;
    margin: 10px 0;
    border: none;
    border-bottom: 2px solid #333333;
    outline:none;
    resize: none;
}
.contactForm .inputBox span{
    position: absolute;
    left: 0;
     padding: 5px 0;
    font-size: 16px;
    margin: 10px 0;
    pointer-events: none;
    transition: 0.5s;
    color: #666;

}
.contactForm .inputBox input:focus ~ span,
.contactForm .inputBox input:valid ~ span,
.contactForm .inputBox textarea:focus ~ span,
.contactForm .inputBox textarea:valid ~ span{
    color: #D9822B;
    font-size: 12px;
    transform: translateY(-20px);
}
.contactForm .inputBox [type="submit"]{
    width: 100px;
    background-color: #D9822B;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 18px;
}
 /*footer*/
 .footer-content{
            display: flex;
            flex-wrap: nowrap;
            padding: 20px;
        }
.footer-content h3{
    color: #D9822B;
}
footer .footer-content .foot-info h3::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    background-color: #2D6A4F;
    height: 2px;
    width: 40px;
}
.foot-info p{
    width: 190px;
    padding: 7px;
    margin: auto;
}
.foot-list{
    padding: 0;
}
.foot-info{
    width: 35%;
}
.foot-list li{
    list-style-type: none;
    text-align: center;
    padding: 7px;
    position: relative;
}
.foot-list a{
    text-decoration: none;
    color: #FFFFFF;
}
.foot-info a{
    color: #FFFFFF;
}
.foot-info span li{
    display: inline-block;
    text-align: center;
    list-style-type: none;
    width: 40px;
    height: 40px;
    background-color: #0d3a55;
    padding: 5px;
    margin-right: 10px;
    border-radius: 4px;
    cursor: pointer;
}
.foot-info span li:hover{
    background: #D9822B;
}
.foot-info span li .fa{
    color: #FFFFFF;
    font-size: 20px;
}

.foot-info li{
color: #FFFFFF;
text-decoration: none;
text-align: center;
}
.foot-list a:hover{
border-bottom: 2px solid #D9822B;
padding-bottom: 5px;
}
        footer{
            padding: 30px;
            background-color:#0B2F46;
            color: white;
            text-align: center;
        }  

/* --- Mobile Architecture (Break Point) --- */ 
        @media (max-width: 768px) {
          
    body { padding-top: 100px; }
    /* Show the hamburger menu button on the right */
    .menu-btn {
        display: flex;
    }

    /* Convert desktop menu into a mobile dropdown absolute layer */
    .navbar nav {
        position: absolute;
        top: 100%; /* Placed exactly below the header */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        
        /* Hide by default using standard performance properties */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }

    /* Vertical stack alignment for mobile viewport links */
    .nav-links {
        flex-direction: column;
        padding: 20px;
        gap: 15px;
    }

    /* Active State Class triggered via JavaScript */
    .navbar nav.is-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .hero h2 { font-size: 2rem; }
    .organ-item { flex-direction: column; gap: 10px; }

    .navbar .container {
        flex-direction: row;
        gap: 15px;
    }
    .about h1 { font-size: 2rem; }
    .organ-mem { flex-direction: column; gap: 10px; }
    .nav-links.active{
        display: flex;
    }
    .contact{
        padding: 50px;
    }
    .container-contact{
        flex-direction: column;
    }
    .container-contact .contactInfo{
        margin-bottom: 40px;
    }
    .container-contact .contactInfo, .contactForm{
        width: 100%;
    }
    footer{
        padding: 40px;
    }
    footer .footer-content{
        flex-direction: column;
    }
    footer .footer-content .foot-info{
        width: 100%;
    }


}