/* ======================================================
   SIAV — STYLES (Clean + organisé)
   ====================================================== */

/* ======================================================
   1) VARIABLES
   ====================================================== */
:root{
  --bg:#F6F8FC;
  --surface:#FFFFFF;
  --text:#0F172A;
  --muted:#243244;
  --border:#E2E8F0;

  --accent:#0EA5A4;
  --accent-2:#0B7C7B;

  --shadow: 0 14px 40px rgba(15,23,42,.10);
  --shadow-soft: 0 8px 22px rgba(15,23,42,.08);

  --radius: 16px;
  --radius-lg: 20px;

  --max: 1140px;
  --hero-max: 1440px;

  --focus:#0B5FFF;

  /* Accessibilité : piloté par JS */
  --text-scale: 1;
}

/* ======================================================
   2) BASE
   ====================================================== */
*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  font-size:17px;
}

body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(14,165,164,.13), transparent 60%),
    radial-gradient(900px 420px at 90% 10%, rgba(15,23,42,.10), transparent 62%),
    var(--bg);
  line-height:1.7;
  text-rendering: optimizeLegibility;
  font-size: calc(16px * var(--text-scale));
}

img{max-width:100%; display:block}
a{color:inherit}
p{margin:0 0 1rem}
p, li{max-width:75ch}

h1,h2,h3{
  font-family:"Manrope", "Inter", system-ui, sans-serif;
  margin:0 0 .75rem;
  line-height:1.15;
}
h1{font-size:clamp(2.2rem, 3vw, 3rem)}
h2{font-size:clamp(1.55rem, 2.2vw, 2.2rem)}
h3{font-size:1.1rem}

.lead{color:var(--muted); font-size:1.06rem}
.help{color:var(--muted)}

/* Liens lisibles (hors boutons) */
a:where(:not(.btn)){
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a:where(:not(.btn)):hover{ text-decoration-thickness: 3px; }

/* ======================================================
   3) ACCESSIBILITÉ (focus / skip-link)
   ====================================================== */
.skip-link{position:absolute; left:-999px}
.skip-link:focus{
  left:16px; top:16px;
  background:var(--surface);
  padding:.75rem 1rem;
  border-radius:14px;
  border:3px solid var(--focus);
  z-index:9999;
}
:focus-visible{
  outline:4px solid var(--focus);
  outline-offset:4px;
  border-radius:12px;
}

/* ======================================================
   4) LAYOUT
   ====================================================== */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
}
.section{padding:72px 0}
.section.compact{padding:56px 0}

/* ======================================================
   5) UTILITAIRES IMAGES
   ====================================================== */
.img-cover{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.img-contain{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

.media-frame{
  overflow:hidden;
  border-radius:var(--radius-lg);
}

/* ======================================================
   6) HEADER + BRAND
   ====================================================== */
.header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
}
.header .container{
  max-width: 100%;
  margin: 0;
  padding-left: 0px;
  padding-right: 12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  margin-right: 0;
  margin-left: 25px;
}
.brand-mark{
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--accent), #1D4ED8);
}
.brand-logo{
  height:44px;
  width:auto;
  display:block;
}
.brand strong{display:block; font-weight:900}
.brand span{display:block; color:var(--muted); font-size:.95rem}

/* ======================================================
   7) NAV + BURGER
   ====================================================== */
.nav{display:flex; align-items:center}

.nav-links{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.nav a{
  text-decoration:none;
  padding:.6rem .9rem;
  border-radius:999px;
  border:1px solid transparent;
  min-height:48px;
  display:inline-flex;
  align-items:center;
}
.nav a:hover{
  background:rgba(15,23,42,.05);
  border-color:var(--border);
}
.nav a[aria-current="page"]{
  background:rgba(14,165,164,.15);
  border-color:rgba(14,165,164,.35);
}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  width:48px;
  height:48px;
  padding:0;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  margin:4px 0;
  border-radius:99px;
}

body.menu-open{overflow:hidden}

/* ======================================================
   8) BOUTONS
   ====================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.9rem 1.2rem;
  border-radius:999px;
  font-weight:800;
  border:1px solid transparent;
  text-decoration:none;
  transition:.15s ease;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-secondary{background:#fff; border-color:var(--border)}
.btn-secondary:hover{box-shadow:var(--shadow-soft)}

/* ======================================================
   9) HERO
   ====================================================== */
.hero{padding:44px 0}

.hero .container.hero-grid{
  max-width:var(--hero-max);
  padding:0 18px;
}

.hero-grid{
  display:grid;
  gap:16px;
  grid-template-columns:1.1fr .9fr;
  align-items:stretch;
}
.hero-copy{padding:28px}

.kicker{
  display:inline-block;
  padding:.45rem .8rem;
  border-radius:999px;
  background:rgba(14,165,164,.12);
  border:1px solid rgba(14,165,164,.3);
  font-weight:900;
  font-size:.9rem;
  margin-bottom:12px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.hero-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  color:var(--muted);
  font-size:.95rem;
}

.chip{
  padding:.4rem .7rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
}

/* Wrapper image hero */
.hero-media{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  height:100%;
}

/* Par défaut: cover */
.hero-media img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
}

/* ======================================================
   10) CARTES & GRILLES
   ====================================================== */
.card{
  background:rgba(255,255,255,.95);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.card.pad{padding:26px}
.card.hover:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.grid-2{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}
.grid-3{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}

.badge{
  display:inline-block;
  padding:.4rem .7rem;
  border-radius:999px;
  border:1px solid var(--border);
  font-weight:800;
  font-size:.9rem;
}
.badge.accent{
  background:rgba(14,165,164,.15);
  border-color:rgba(14,165,164,.35);
}

/* ======================================================
   11) STATS
   ====================================================== */
.stats{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(4,1fr);
}
.stat{padding:18px}
.stat strong{font-size:1.35rem; display:block}
.stat span{color:var(--muted)}

/* ======================================================
   12) INTERVENTIONS (media)
   ====================================================== */
.service-card{overflow:hidden}
.service-media{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  margin-bottom:14px;
}
.service-media img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

/* ======================================================
   13) ACTUALITÉS
   ====================================================== */
.news-list{display:grid; gap:14px}

.news-meta{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:.95rem;
  color:var(--muted);
  margin-bottom:6px;
}

.news-date{
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  border:1px solid var(--border);
  font-weight:800;
}

.news-tag{
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(14,165,164,.12);
  border:1px solid rgba(14,165,164,.25);
  font-weight:700;
}

.news-item h3{margin-top:6px}

/* ======================================================
   14) DOCUMENTS (PDF)
   ====================================================== */
.docs{display:grid; gap:14px}

.doc-item{display:flex; gap:14px}

.doc-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(14,165,164,.12);
  border:1px solid rgba(14,165,164,.25);
  display:grid;
  place-items:center;
  font-weight:900;
  color:var(--accent-2);
}

.doc-link{
  text-decoration:none;
  color:inherit;
  display:block;
}
.doc-link:hover{
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.doc-link:focus-visible{
  outline:4px solid var(--focus);
  outline-offset:4px;
}

/* ======================================================
   15) PARTENAIRES
   ====================================================== */
.partners{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(4,1fr);
}
.partner{
  height:90px;
  border-radius:14px;
  border:1px dashed var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:var(--muted);
}

.partners-marquee{overflow:hidden}

.marquee{
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  padding:14px 10px;
  outline:none;
}
.marquee:hover .marquee-track,
.marquee:focus .marquee-track,
.marquee:focus-visible .marquee-track{
  animation-play-state: paused;
}

.marquee-track{
  display:flex;
  align-items:center;
  gap:26px;
  width:max-content;
  animation: marqueeScroll 26s linear infinite;
}

.partner-logo{
  height:48px;
  width:auto;
  object-fit:contain;
  filter:none;
  opacity:1;
}

@keyframes marqueeScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ======================================================
   16) CONTACT
   ====================================================== */
.contact-card .contact-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:center;
  margin-top:12px;
}
.contact-card .contact-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ======================================================
   17) LISTES “cards” (ancienne classe)
   ====================================================== */
.list{
  margin:0;
  padding-left:1.2rem;
  color:var(--muted);
}
.list li{margin:.6rem 0}

/* ======================================================
   18) HORAIRES
   ====================================================== */
.hours{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.hours-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:.75rem .9rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
}
.hours-row span{color:var(--muted); font-weight:700}

/* ======================================================
   19) COMMUNES
   ====================================================== */
.field label{
  display:block;
  font-weight:800;
  margin:0 0 6px;
}

.field input{
  width:100%;
  min-height:48px;
  padding:.85rem 1rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  font:inherit;
  color:var(--text);
}
.field input:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

.communes-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.communes-meta{
  padding:.55rem .9rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  font-weight:800;
  color:var(--muted);
  white-space:nowrap;
}

.communes-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.communes-list li{
  min-height:48px;
  display:flex;
  align-items:center;
  padding:.85rem 1rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  font-weight:800;
  color:var(--text);
}

.hl{
  background: rgba(14,165,164,.18);
  padding:0 .15em;
  border-radius:6px;
}

/* ======================================================
   20) FOOTER
   ====================================================== */
.site-footer{
  background:
    radial-gradient(900px 300px at 0% 0%, rgba(14,165,164,.08), transparent 60%),
    #F8FAFC;
  border-top: 1px solid var(--border);
  margin-top: 80px;
  font-size: .95rem;
}

.site-footer__top{padding: 56px 0 48px}

.site-footer__grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}

.site-footer__brand{max-width: 420px}
.site-footer__brandLink{display: inline-block}

.site-footer__logo{
  width: 130px;
  height: auto;
  margin-bottom: 12px;
}

.site-footer__brandTitle{
  margin: 8px 0 6px;
  line-height: 1.4;
}
.site-footer__brandTitle strong{
  font-weight: 900;
  font-size: 1.05rem;
}
.site-footer__desc{
  color: var(--muted);
  line-height: 1.55;
}

.site-footer__title{
  font-weight: 900;
  font-size: .95rem;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.site-footer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.site-footer__list a{
  text-decoration: none;
  color: inherit;
}
.site-footer__list a:hover{ text-decoration: underline; }

.site-footer__social{ margin-top: 12px; }

.site-footer__socialLink{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  opacity: .9;
}
.site-footer__socialLink:hover{
  opacity: 1;
  text-decoration: underline;
}
.site-footer__socialLink svg{ color: #3b5998; }
.site-footer__socialText{
  font-weight: 600;
  font-size: 14px;
}

.site-footer__bottom{
  border-top: 1px solid var(--border);
  background: #fff;
}
.site-footer__bottomInner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  gap: 12px;
  flex-wrap: wrap;
}
.site-footer__bottomLinks a{
  text-decoration: none;
  color: inherit;
}
.site-footer__bottomLinks a:hover{ text-decoration: underline; }

/* ======================================================
   21) BARRE ACCESSIBILITÉ FLOTTANTE
   ====================================================== */
.a11y-toolbar{
  position:fixed;
  bottom:16px;
  right:16px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  background:rgba(255,255,255,.95);
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.a11y-toolbar .a11y-label{
  font-weight:800;
  font-size:.9rem;
  margin-right:6px;
}

.a11y-toolbar button{
  min-width:42px;
  min-height:42px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.a11y-toolbar button:hover{background:rgba(0,0,0,.05)}
.a11y-toolbar button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

@media (max-width:600px){
  .a11y-toolbar .a11y-label{display:none}
}

/* ======================================================
   22) MODE CONTRASTE + RÉDUCTION MOUVEMENT
   ====================================================== */
html.a11y-contrast body{ background:#FFFFFF !important; }

html.a11y-contrast body,
html.a11y-contrast p,
html.a11y-contrast .lead,
html.a11y-contrast .help{
  color:#0B1220 !important;
}

html.a11y-contrast .card,
html.a11y-contrast .chip,
html.a11y-contrast .news-date,
html.a11y-contrast .doc-item,
html.a11y-contrast .partner,
html.a11y-contrast .header,
html.a11y-contrast .footer{
  background:#fff !important;
  border-color:#94A3B8 !important;
}

html.a11y-reduce-motion *{
  scroll-behavior: auto !important;
  transition: none !important;
  animation: none !important;
}

/* ======================================================
   23) PAGES INSTITUTIONNELLES (legal/privacy/cookies/accessibility)
   -> même rendu que legal.php
   ====================================================== */
.siav-page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 42px 18px 70px;
}

.page-header{
  padding: 34px 0 24px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 28px;
}

.page-header h1{
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.page-header .subtitle{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(0,0,0,0.68);
  max-width: 78ch;
}

.siav-page section{
  padding: 22px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.siav-page section:last-child{ border-bottom: none; }

.siav-page h2{
  margin: 0 0 12px;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.siav-page p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(0,0,0,0.82);
  max-width: 85ch;
}

.siav-page strong{ font-weight: 700; }

.siav-page ul{
  margin: 10px 0 14px;
  padding-left: 18px;
  max-width: 85ch;
}
.siav-page li{
  margin: 7px 0;
  line-height: 1.65;
  color: rgba(0,0,0,0.82);
}

.siav-page h2::before{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 10px;
  transform: translateY(-1px);
  background: var(--accent, #0f766e);
}

.siav-page a:focus,
.siav-page button:focus{
  outline: 3px solid rgba(15,118,110,0.35);
  outline-offset: 3px;
}

/* ======================================================
   24) HERO IMAGE (contain + zoom lightbox)
   ====================================================== */
.hero-media--contain{
  background: #fff;
}

.hero-media__btn{
  all: unset;
  display:block;
  width:100%;
  height:100%;
  cursor: zoom-in;
}

.hero-media__img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}
.lightbox.is-open{ display: block; }

.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.70);
}

.lightbox__dialog{
  position: relative;
  max-width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.lightbox__img{
  width: 100%;
  height: auto;
  max-height: calc(100vh - 110px);
  object-fit: contain;
  background: #fff;
  display:block;
}

.lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.lightbox__close:hover{ background: rgba(0,0,0,.05); }

/* ======================================================
   25) RESPONSIVE (burger + grilles + footer)
   ====================================================== */
@media (max-width: 980px){
  .nav-toggle{display:inline-flex}

  .nav-links{
    position:absolute;
    right:18px;
    top:calc(76px + 10px);
    width:min(340px, calc(100vw - 36px));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:14px;
    background:rgba(255,255,255,.98);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow);
    z-index:100;
  }
  .nav-links.is-open{display:flex}

  .nav-links a{
    width:100%;
    justify-content:flex-start;
    border-radius:14px;
    padding:.8rem .95rem;
  }
  .nav-links .btn{
    width:100%;
    justify-content:center;
  }

  .hero-grid,
  .grid-2,
  .grid-3,
  .stats,
  .partners{
    grid-template-columns:1fr;
  }

  .hero-media img{min-height:260px}
  .hero-media__img{min-height:260px}

  .contact-card .contact-grid{grid-template-columns:1fr}
  .contact-card .contact-actions{justify-content:flex-start}

  .communes-list{grid-template-columns: repeat(2, 1fr)}
  .service-media img{height:220px}

  .site-footer__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px){
  html{font-size:16.5px}
  .communes-list{grid-template-columns:1fr}
}

@media (max-width: 560px){
  .site-footer__grid{ grid-template-columns: 1fr; }
  .site-footer__bottomInner{
    flex-direction: column;
    text-align: center;
  }
}

/* ======================================================
   26) PREFERS REDUCED MOTION (OS)
   ====================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
  .card.hover:hover{transform:none}
  .marquee-track{ animation:none; }
}