/* Palette : beige clair, vert olive doux, terracotta */
:root{
  --bg:#FDF8F3;
  --accent:#6B8E23;
  --accent-dark:#5E7A1B;
  --warm:#C86B4A;
  --muted:#7E6E63;
  --card:#FFFFFF;
  --max-width:1100px;
  --radius:12px;
  --shadow: 0 6px 18px rgba(31,30,25,0.06);
  --glass: rgba(255,255,255,0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:#2b2b2b;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Entête du site */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom:1px solid rgba(0,0,0,0.03);
  z-index:1000;
}

.header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:14px 0;}

/* Contenu du site entre l'entête et le pied de page */ 
.container{
	width:90%;
	max-width:var(--max-width);
	margin:0 auto;}

/* Pied de page */
.site-footer{
	padding:22px 0;
	margin-top:40px;
	border-top:1px solid rgba(0,0,0,0.03);
	background:transparent}

.footer-inner{display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:14px}

.logo{font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:0.4px; font-size:20px; color:var(--accent-dark)}
.logo span{color:var(--warm)}
.logo small{font-weight:600; font-size:11px; margin-left:6px; color:var(--muted)}

.main-nav a{margin-left:18px; text-decoration:none; color:#333; font-weight:600; padding:8px 10px; border-radius:8px}
.main-nav a:hover, .main-nav a.active{background:var(--glass); color:var(--accent-dark)}

/* Hero */
.hero{padding:80px 0 10px 0}
.hero-inner{display:flex;gap:30px;align-items:center;}
.hero-text{flex:1;}
.hero-text h1{font-family:'Poppins',sans-serif; font-size:34px; margin:0 0 12px; color:var(--accent-dark)}
.lead{margin:0 0 18px; color:var(--muted)}

.cta{display:inline-block; background:var(--accent); color:#fff; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:600}
.cta:hover{transform:translateY(-2px); transition:transform .18s ease}

/* Photo placeholders */
.photo-placeholder{width:120px;height:120px;border-radius:12px;background:linear-gradient(180deg,#fff,#f2efe9);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,0.04)}
.photo-placeholder.large{width:320px;height:220px;border-radius:16px; font-size:18px ;display:flex}

/* About & values */
.about{padding:15px 0 15px 0}
.values{display:flex; gap:18px; margin-top:16px; flex-wrap:wrap}
.value{background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow); flex:1; min-width:220px}

/* Team */
.team{padding:15px 0}
.team-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; margin-top:18px}
.member{text-align:center; background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow)}
.member .photo-placeholder{width:120px;height:120px;margin:0 auto 12px;border-radius:10px}
.member .role {margin-top: -20px; margin-bottom: 0px;}


/* Program */
.program{padding:15px 0}
.program-columns{display:flex; gap:18px; margin-top:12px; flex-wrap:wrap}
.program-item{background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow); flex:1; min-width:220px}

/* Actualités */
.news-list{padding:40px 0}
.news-item{background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow); margin-bottom:14px}
.news-item h2{margin:0 0 6px}
.news-item time{display:block; color:var(--muted); font-size:13px; margin-bottom:8px}
.read-more{display:inline-block; margin-top:8px; text-decoration:none; color:var(--accent-dark); font-weight:600}

/* Contact */
.contact-page{padding:40px 0}
.contact-grid{display:grid; gap:30px}
.contact-form{background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow)}
.contact-form label{display:block; margin-top:10px; font-weight:600; font-size:14px}
.contact-form input, .contact-form textarea{width:100%; padding:10px; margin-top:6px; border-radius:8px; border:1px solid rgba(0,0,0,0.06)}
.contact-form button{margin-top:12px; padding:12px; background:var(--accent); color:#fff; border:none; border-radius:10px; font-weight:700}


/* Affichage sur petit écran */
@media (max-width:900px){
.hero-inner{flex-direction:column}
.hero{padding:130px 0 0 0}	
.news-list{padding:120px 0 0 0}
.contact-page{padding:120px 0 0 0}
.responsive-table,
.responsive-table tr,
.responsive-table td {
    display: block;
    width: 100% !important;
    text-align: left !important;
  /* Ajoute un espace entre les deux lignes */
  .responsive-table td {
    margin-bottom: 10px;
  }
}
}

/* Pesentation des membres de l'équipe */
.presentation_membre {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  padding: 20px;
  z-index: 1000;
}

/* Visible quand cible via #id */
.presentation_membre:target {
  display: flex;
}

/* Contenu de la fenêtre */
.presentation_membre-fenetre {
  background: #fff;
  padding: 25px;
  max-width: 600px;
  border-radius: 10px;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

/* Fond sombre derrière la popup */
  .popup {
    padding-top: 85px;
	display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
  }

  /* Contenu de la popup (l'image) */
  .popup img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    background: #fff;
  }

  /* Bouton fermer */
  .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 35px;
    color: white;
    cursor: pointer;
  }
  
.add-calendar {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--warm);
  color: white;
  border-radius: 6px;
  font-size: 0.9rem;
}
/* --- TABLEAU RESPONSIVE --- */
.responsive-table {

}

/* Style normal (desktop) */
.responsive-table td {
  vertical-align: middle;
  padding: 6px 0;
}