/* =========================
   Variables & comportements globaux
   ========================= */
:root{
  --drawer-w: 360px;              /* largeur du panneau sur ordi */
  --desktop-breakpoint: 1024px;   /* indicatif (non utilisable dans @media) */
  --credit-h: 44px;               /* hauteur du bandeau bas */
  --anchor-offset: 35px;          /* hauteur du header pour le scroll (peut être MAJ en JS) */
}

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

/* Toutes les cibles d’ancre prennent une marge en haut lors du scroll */
[id]{ scroll-margin-top: var(--anchor-offset); }

/* Évite que le contenu soit caché derrière le bandeau crédit */
body{ padding-bottom: var(--credit-h); }

/* =========================
   Header (visible en permanence via sticky)
   ========================= */
#site-header{
  position: sticky;
  top: 0;
  z-index: 60;             /* au-dessus du contenu, sous un drawer éventuel */
  background: #002F6C;     /* fond du header */
  color: #fff;
  width: 100%;
  padding: 20px;           /* cohérent avec l’offset par défaut */
  text-align: center;
}
#site-header .logo img{ max-width: 150px; }

/* =========================
   Bandeau crédit — fixé en bas
   ========================= */
#credit-banner{
  position: fixed;
  left: 0;
  right: 0;                /* prend toute la largeur sur mobile/tablette */
  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; }

/* Sur ordi : ne pas passer sous un drawer permanent */
@media (min-width: 1024px){
  #credit-banner{ right: var(--drawer-w); }
}

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

/* =========================
   Reset & bases typographiques
   ========================= */
*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family: Arial, sans-serif;
  line-height: 1.8;
  color: #333;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  align-items: center;
}

a{ color:#002F6C; }
a:hover{ text-decoration: underline; color:#E53935; }

/* =========================
   Navigation principale (hors drawer)
   ========================= */
nav{ text-align:center; width:100%; }
nav ul{
  list-style:none;
  padding:0;
  display:flex;
  justify-content:center;
}
nav ul li{ display:inline; margin:0 15px; }
nav ul li a{
  color:#fff;
  text-decoration:none;
  font-size:18px;
}
nav ul li a:hover{ text-decoration:underline; color:#E53935; }

/* =========================
   Sections / contenu
   ========================= */
.section{
  padding: 50px;
  margin: 30px auto;
  background: #fff;
  border-radius: 8px;
  max-width: 800px;
  text-align: left;
  width: 90%;
}
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-color:#eeeeee;
  padding:20px;
  margin:25px 0;
  border-radius:5px;
}

/* =========================
   Map
   ========================= */
#map,
.leaflet-container {
  z-index: 1;           /* plus bas que le footer et le crédit */
}

/* =========================
   Footer
   ========================= */
footer{
  text-align:center;
  padding:15px;
  background:#002F6C;
  color:#fff;
  width:100%;
  margin-top:30px;
  z-index: 150;
}

/* =========================
   Blog
   ========================= */
#blog{
  padding:50px;
  background-color:#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
   ========================= */
/* Petits écrans <= 768px : marges/espaces réduits */
@media (max-width: 768px){
  body{ padding: 0 8px; }          /* gouttières globales */

  #site-header{ padding: 8px 12px; }

  nav ul{ flex-direction: column; }
  nav ul li{ display:block; margin:6px 0; }

  .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; }
}

/* Très petits écrans <= 480px : encore plus serré */
@media (max-width: 480px){
  body{ padding: 0 6px; }
  .section{ margin:6px auto; padding:16px; }
  #blog{ padding:16px 12px; }
  .blog-post{ margin:10px auto; padding:14px; }
}