/* Saint-Hilaire Ville Lecture - 2026 */
:root{
  --encre:#2b2b2b;
  --papier:#fdfaf6;
  --ocre:#b86b3c;
  --brun:#7c4a2f;
  --beige:#f5f1eb;
  --gris:#6b6b6b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,Arial,sans-serif;
  background:var(--papier);
  color:var(--encre);
  line-height:1.6;
  font-size:17px;
}
h1,h2,h3{font-family:'Merriweather',serif;color:var(--brun);line-height:1.2}
h1{font-size:2.4rem;margin-bottom:.5rem}
h2{font-size:1.8rem;margin:2rem 0 1rem}
h3{font-size:1.3rem;margin:1.5rem 0 .5rem}
a{color:var(--ocre);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* HEADER */
.site-header{
  background:#fff;
  border-bottom:3px solid var(--beige);
  position:sticky;top:0;z-index:100;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1100px;margin:auto}
.brand{display:flex;align-items:center;gap:12px;color:var(--brun)}
.brand img{height:48px;width:auto}
.brand-text strong{display:block;font-family:'Merriweather',serif;font-size:1.1rem;line-height:1}
.brand-text span{font-size:.85rem;color:var(--gris)}
.main-nav{display:flex;gap:24px}
.main-nav a{font-weight:500;color:var(--encre);padding:8px 0;position:relative}
.main-nav a.active,.main-nav a:hover{color:var(--ocre)}
.main-nav a.active::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--ocre)}
.burger{display:none;background:none;border:none;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--brun);margin:5px 0;transition:.3s}

/* HERO */
.hero-section{
  background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url('img/batiment.jpg') center/cover;
  min-height:320px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  margin:0 -20px 2rem;border-radius:0 0 12px 12px;
}
.hero-text{color:#fff;font-size:2.8rem;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.hero-subtitle{font-size:1.2rem;opacity:.95;margin-top:.5rem}

/* SECTIONS */
.info-section,.contact-section,.help-section{
  background:#fff;padding:2rem;margin:2rem 0;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)
}
.info-section{background:#fff}
.help-section{background:var(--beige);border-left:4px solid var(--ocre)}
.acronym-bold22{font-weight:600;color:var(--brun);font-size:1.1rem}

/* CHIFFRES */
.chiffres-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;text-align:center}
.chiffres-grid div{background:var(--beige);padding:1rem;border-radius:8px}
.chiffres-grid strong{font-size:1.6rem;color:var(--brun);display:block}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.contact-card{background:var(--beige);padding:1.5rem;border-radius:10px}
.contact-card h3{margin-top:0}
.contact-info p{margin:.4rem 0}
.contact-info i{color:var(--ocre);width:20px}

/* FOOTER */
.footer{
  background:var(--brun);color:#fff;text-align:center;padding:2rem 1rem;margin-top:3rem
}
.footer img{height:40px;opacity:.9;margin-bottom:.5rem}
.footer p{font-size:.9rem;opacity:.8}

/* COOKIES */
.cookie-banner{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid #ddd;padding:1rem 1.5rem;border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.15);max-width:90%;z-index:200;display:flex;gap:1rem;align-items:center
}
.cookie-banner p{font-size:.9rem;margin:0}
.cookie-buttons button{border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-weight:500}
#acceptCookies{background:var(--ocre);color:#fff}
#refuseCookies{background:#eee;color:var(--encre)}

/* RESPONSIVE */
@media(max-width:800px){
  .main-nav{position:fixed;top:72px;right:-100%;flex-direction:column;background:#fff;width:240px;height:calc(100vh - 72px);padding:2rem;box-shadow:-4px 0 12px rgba(0,0,0,.1);transition:.3s}
  .main-nav.open{right:0}
  .burger{display:block}
  h1{font-size:2rem}
  .hero-text{font-size:2rem}
}
.small{font-size:.85rem;color:var(--blanchedalmond)}

/* TEAM / TROMBINOSCOPE */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 220px));
  justify-content: center;
  gap: 2.5rem;
  margin-top: 2rem;
}
.team-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  text-align: center;
  transition: transform 0.3s ease;
  border: 1px solid var(--beige);
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.team-img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: var(--beige);
  border-bottom: 2px solid var(--beige);
}
.team-info {
  padding: 1.2rem 1rem;
}
.team-info h4 {
  font-family: 'Merriweather', serif;
  color: var(--brun);
  margin-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.3;
}
.team-info p {
  font-size: 0.85rem;
  color: var(--gris);
  margin: 0;
}
.role-badge {
  display: inline-block;
  background: var(--beige);
  color: var(--ocre);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}