@font-face{font-family:"Brito";src:url("/assets/fonts/Brito-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Brito";src:url("/assets/fonts/Brito-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Variables */
:root{
  --brand:#8a2d07;           /* Rouge MuCam */
  --brand-600:#752405;       /* Rouge MuCam (hover) */
  --maxw:980px;              /* largeur max du contenu */
  --padX:clamp(18px,6vw,48px);/* Gouttières latérales RESPIRANTES */
  --radius:12px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --sectionY:clamp(28px,6.5vw,64px); /* respiration verticale des sections */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Brito",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;color:#1d1d1f;background:#fff
}
a{color:inherit}
img{max-width:100%;height:auto;border-radius:10px}
figure{margin:0}
figcaption{font-size:.95rem}

/* Conteneur central avec larges gouttières */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--padX);
  padding-right:var(--padX);
}

/* Header + nav */
header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:10}
nav{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem 0;flex-wrap:wrap}
.home{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border-radius:8px;text-decoration:none;border:1px solid transparent}
.home:hover,.home:focus-visible{background:#f2f2f7}
.home img{height:22px;width:auto;display:block;border-radius:0}
.navlinks{display:flex;gap:.4rem .6rem;flex-wrap:wrap}
.navlinks a{padding:.35rem .6rem;border-radius:8px;text-decoration:none}
.navlinks a[aria-current="page"],.navlinks a:hover{background:#f2f2f7}

/* HERO (page d’accueil) */
.hero{background:url("/assets/img/frontphoto1.jpg") center/cover no-repeat;border-bottom:1px solid #eee}
.hero .wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;
  padding-top:clamp(32px,7vw,72px);
  padding-bottom:clamp(28px,6vw,60px);
  min-height:60vh
}
.hero figure img{display:none}

/* Titres + texte + boutons */
h1{font-size:clamp(1.6rem,2vw + 1.2rem,2.4rem);line-height:1.2;margin:.5rem 0}
.lead{font-size:1.05rem;color:#333;margin:.5rem 0 1rem}
.btns{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;padding:.7rem 1rem;border-radius:12px;
  font-weight:700;border:1px solid #d0d7de;background:#fff;box-shadow:var(--shadow)
}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--brand-600);border-color:var(--brand-600)}
.btn.ghost{background:#fff}

/* Sections + cartes */
.section{padding:var(--sectionY) 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.card{border:1px solid #eee;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);background:#fff}
.card h3{margin-top:.2rem}
.card figure{margin:0 0 .6rem 0}
.card .thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#f3f4f6}

/* Bloc texte + image (quai Kléber) */
.intro-split{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;align-items:start;margin:1rem 0}
.inline-figure{max-width:460px;justify-self:end}
.inline-figure img{display:block;width:100%;height:auto;border-radius:12px}

/* Carte OpenStreetMap (page Kléber) */
.map-wrap{margin-top:1rem}
#map{width:100%;height:62vh;min-height:360px;border:1px solid #eee;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.map-legend{margin:.6rem 0 0 .2rem}
.map-legend a{color:#0a84ff;text-decoration:none}
.map-legend a:hover{text-decoration:underline}

/* Footer */
footer{border-top:1px solid #eee;background:#fafafa;padding:var(--sectionY) 0;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}
small,.muted{color:#666}
ul{padding-left:1.2rem}

/* Tablettes */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .intro-split{grid-template-columns:1fr}
  .inline-figure{max-width:none;justify-self:start}
}

/* Mobiles */
@media (max-width:600px){
  .home{order:1;width:100%;justify-content:center;margin-bottom:.25rem}
  .navlinks{order:2;width:100%;justify-content:space-between;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .navlinks a{font-size:.95rem}
  .hero{background-position:center top}
  .hero .wrap{gap:1.25rem;min-height:70vh}
  .btns{flex-direction:column;align-items:stretch}
  .btn,.btn.primary{width:100%;text-align:center}
  #map{height:50vh}
}

/* Très petits écrans */
@media (max-width:380px){
  .navlinks a{font-size:.9rem}
}