/* =========================
   Variables & comportements globaux
   ========================= */
:root{
  /* Layout */
  --drawer-w: 360px;
  --desktop-breakpoint: 1024px;
  --credit-h: 44px;

  /* Header (valeur mise à jour par ton JS via --header-h) */
  --header-h: 64px;                 /* fallback */
  --anchor-offset: var(--header-h); /* ancres & scroll-padding */

  /* Thème menu */
  --menu-accent:#002F6C;
  --menu-ink:#111;
  --menu-muted:#667085;
  --menu-bg-hover:#f3f7ff;
  --menu-bg-active:#eaf2ff;
  --menu-radius:10px;
  --menu-gap:.25rem;
  --menu-pad-y:.55rem;
  --menu-pad-x:.9rem;
}

*{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
}
[id]{ scroll-margin-top: var(--anchor-offset); }

/* Corps de page */
body{
  margin:0;
  padding-top: var(--header-h);     /* démarre sous le header */
  padding-bottom: var(--credit-h);  /* évite que le contenu passe sous le crédit */
  font-family: Arial, sans-serif;
  line-height: 1.8;
  color: #333;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Liens généraux */
a{ color:#002F6C; }
a:hover{ text-decoration: underline; color:#E53935; }

/* =========================
   Header fixe (pleine largeur)
   ========================= */
#site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;                       /* sous le drawer */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding:.75rem 1rem;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
  color:#111;
}
.logo img{ display:block; height:40px; width:auto; }
.site-title{ margin:0; text-align:center; font-size:clamp(1.1rem, 2.5vw, 1.6rem); }
.hamburger{
  display:inline-flex; flex-direction:column; gap:4px;
  border:0; background:transparent; padding:8px; cursor:pointer; color:#111;
}
.hamburger span{ display:block; width:28px; height:3px; background:currentColor; border-radius:2px; }
.hamburger:focus-visible{ outline:2px solid; outline-offset:2px; }

/* =========================
   Bandeau crédit — fixé en bas
   ========================= */
#credit-banner{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--credit-h);
  display: flex; align-items: center; justify-content: center;
  background:#002F6C; color:#fff;
  text-align:center;
  padding: 0 1rem;
  font-size:.95rem;
  z-index: 200;
}
#credit-banner a{ color:#fff; text-decoration:underline; }

/* Décaler le crédit à droite du drawer sur desktop */
@media (min-width: 1024px){
  #credit-banner{ right: var(--drawer-w); }
}

/* =========================
   Drawer (menu latéral)
   ========================= */
#nav-drawer{
  position: fixed; top:0; right:0;
  width:min(92vw, var(--drawer-w));
  height: calc(100vh - var(--credit-h)); /* exclut le crédit bas */
  background:#fff; color:#111;
  box-shadow:-18px 0 36px rgba(0,0,0,.12);
  transform:translateX(100%);
  transition:transform .25s ease;
  display:flex; flex-direction:column;
  overflow:hidden;                      /* le scroll est dans ul */
  z-index: 400;                         /* AU-DESSUS du header */
}
/* Tête du drawer fixe à l’intérieur */
#nav-drawer .drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem;
  border-bottom:1px solid #eef2f7;
  background:#fff;
  position: sticky; top: 0; z-index: 5;
}
#close-drawer{ border:0; background:transparent; font-size:1.25rem; cursor:pointer; padding:.5rem; }

/* Liste scrollable + items compacts */
#nav-drawer ul{
  list-style:none; margin:0; padding:.5rem;      /* respiration interne */
  display:flex; flex-direction:column; gap:var(--menu-gap);
  flex:1; overflow-y:auto; -webkit-overflow-scrolling: touch;
}
/* Items élégants (enhanced) */
#nav-drawer li{ margin:0; border:0; }
#nav-drawer li > a{
  display:flex; align-items:center; gap:.65rem;
  padding:var(--menu-pad-y) var(--menu-pad-x);
  border-radius:var(--menu-radius);
  color:var(--menu-ink); text-decoration:none; line-height:1.25;
  transition:background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
#nav-drawer li > a::before{
  content:""; width:.5rem; height:.5rem; border-radius:999px;
  background:var(--menu-accent); opacity:.18; flex:0 0 auto;
  transition:opacity .18s ease, transform .12s ease, background .18s ease;
}
#nav-drawer li > a:hover,
#nav-drawer li > a:focus-visible{
  background:var(--menu-bg-hover); color:#001b3f; outline:none;
  box-shadow:0 0 0 2px rgba(0,47,108,.12) inset;
}
#nav-drawer li > a:hover::before,
#nav-drawer li > a:focus-visible::before{ opacity:.9; transform:scale(1.15); }
#nav-drawer li > a[aria-current="true"],
#nav-drawer li > a.is-active{
  background:var(--menu-bg-active); color:var(--menu-accent); font-weight:600;
}
#nav-drawer li > a[aria-current="true"]::before,
#nav-drawer li > a.is-active::before{ opacity:1; background:var(--menu-accent); }

/* Effet tap mobile */
#nav-drawer a.tapped{ animation: tapFlash .25s ease; }
@keyframes tapFlash{ 0%{ background:#eaf2ff; } 100%{ background:transparent; } }

/* Drawer ouvert en mobile/tablette */
body[data-drawer-open="true"] #nav-drawer{ transform:none; }

/* Backdrop (recouvre aussi le header) */
#drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:390;
}
body[data-drawer-open="true"] #drawer-backdrop{ opacity:1; pointer-events:auto; }

/* Desktop : drawer toujours visible + contenu décalé */
@media (min-width: 1024px){
  #nav-drawer{
    width: var(--drawer-w);
    transform:none !important; box-shadow:none; border-left:1px solid #e5e7eb;
  }
  #drawer-backdrop{ display:none !important; }
  body{ padding-right: var(--drawer-w); }     /* évite recouvrement du contenu */
  #hamburger, #close-drawer{ display:none !important; }
}

/* Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  #nav-drawer, #drawer-backdrop{ transition:none; }
}

/* =========================
   Sections / contenu
   ========================= */
.section{
  padding: 50px;
  margin: 30px auto;
  background: #fff;
  border-radius: 8px;
  max-width: 800px;
  width: 90%;
  text-align:left;
}
h1{ font-size:2.2em; margin-bottom:25px; color:#002F6C; }
h2{ font-size:1.9em; margin:25px 0 20px; }
h3{ font-size:1.6em; margin:20px 0 15px; }
p{ margin-bottom:20px; }
ul, ol{ padding-left:45px; margin-bottom:20px; }
li{ margin-bottom:8px; }

.job{ background:#eee; padding:20px; margin:25px 0; border-radius:5px; }

/* =========================
   Map
   ========================= */
#map, .leaflet-container{ z-index: 1; }

/* =========================
   Footer (clair)
   ========================= */
footer{
  text-align:center;
  padding:15px;
  width:100%;
  margin-top:30px;
  z-index: 150;
  background:#fff;
  color:#111;
  border-top:1px solid #e5e7eb;
}
footer a{ color:#002F6C; text-decoration:underline; }
footer a:hover{ color:#E53935; }

/* =========================
   Blog
   ========================= */
#blog{ padding:50px; background:#f9f9f9; text-align:left; }
#blog h1{ font-size:2.2em; color:#333; margin-bottom:25px; }
.blog-post{
  background:#fff; border-radius:10px; padding:25px; margin:25px auto; max-width:700px;
  box-shadow:0 4px 10px rgba(0,0,0,.1); transition: transform .3s ease, box-shadow .3s ease;
}
.blog-post:hover{ transform: translateY(-5px); box-shadow:0 6px 12px rgba(0,0,0,.15); }
.blog-post h2{ font-size:1.9em; color:#222; margin-bottom:20px; line-height:1.5; padding-top:15px; }
.blog-post .date{ font-size:1em; color:#777; margin-bottom:20px; }
.blog-post p{ font-size:1.2em; color:#444; line-height:1.6; margin-bottom:20px; }
.blog-post a{ display:inline-block; font-size:1.1em; text-decoration:none; color:#0073e6; font-weight:bold; margin-top:15px; }
.blog-post a:hover{ text-decoration:underline; }

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px){
  body{ padding: 0 8px; padding-top: var(--header-h); padding-bottom: var(--credit-h); }
  #site-header{ padding: 8px 12px; }
  .section{ width:100%; margin:8px auto; padding:20px; }
  #blog{ padding:24px 16px; }
  .blog-post{ margin:12px auto; padding:16px; }
  ul, ol{ padding-left:22px; }
  footer{ padding:10px 12px; font-size:14px; }
}
@media (max-width: 480px){
  body{ padding: 0 6px; padding-top: var(--header-h); padding-bottom: var(--credit-h); }
  .section{ margin:6px auto; padding:16px; }
  #blog{ padding:16px 12px; }
  .blog-post{ margin:10px auto; padding:14px; }
}