/* ════════════════════════════════════════════════════════════
   HEADER & FOOTER PARTAGÉS — OnSeBaigne
   Inclure dans toutes les pages
   ════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────── */
.sh-hdr{
  background:#0077b6;
  color:#fff;
  position:sticky;top:0;z-index:500;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.sh-inner{
  max-width:1200px;margin:0 auto;
  padding:10px 18px;
  display:flex;align-items:center;gap:14px;
}
.sh-brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:#fff;flex-shrink:0;
}
.sh-logo-img{
  width:24px;height:32px;flex-shrink:0;
  filter:brightness(0) invert(1);
  display:block;
}
.sh-name{font-size:.95rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.sh-tagline{font-size:.6rem;opacity:.7;letter-spacing:.02em;margin-top:1px}
.sh-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.sh-link{
  color:rgba(255,255,255,.82);font-size:.8rem;font-weight:500;
  text-decoration:none;padding:6px 11px;border-radius:7px;
  transition:.15s;white-space:nowrap;
}
.sh-link:hover{color:#fff;background:rgba(255,255,255,.14)}
.sh-active{color:#fff;background:rgba(255,255,255,.18);font-weight:700}

/* Burger button — mobile uniquement */
.sh-burger{
  display:none;
  margin-left:auto;
  background:rgba(255,255,255,.15);border:none;
  border-radius:8px;padding:7px 9px;cursor:pointer;
  color:#fff;transition:.15s;flex-shrink:0;
  align-items:center;
}
.sh-burger:hover{background:rgba(255,255,255,.28)}
.sh-burger svg{display:block;width:20px;height:20px;stroke:#fff;stroke-width:2.2;fill:none}

/* Mobile nav overlay */
.sh-mobile-nav{
  display:none;
  position:fixed;inset:0;z-index:9000;
}
.sh-mobile-nav.open{display:block}
.sh-mob-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
}
.sh-mob-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(280px,85vw);
  background:#0077b6;
  display:flex;flex-direction:column;
  padding:0;
  box-shadow:-4px 0 24px rgba(0,0,0,.25);
  animation:sh-slideIn .22s ease;
}
@keyframes sh-slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.sh-mob-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.15);
}
.sh-mob-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.sh-mob-brand img{width:20px;height:26px;filter:brightness(0) invert(1)}
.sh-mob-brand span{font-size:.95rem;font-weight:800}
.sh-mob-close{
  background:rgba(255,255,255,.15);border:none;border-radius:8px;
  padding:6px 10px;cursor:pointer;color:#fff;font-size:1.2rem;line-height:1;
}
.sh-mob-links{
  padding:12px 10px;display:flex;flex-direction:column;gap:2px;flex:1;
}
.sh-mob-link{
  display:flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;
  font-size:.95rem;font-weight:600;
  padding:13px 14px;border-radius:10px;
  transition:.15s;
}
.sh-mob-link:hover{background:rgba(255,255,255,.2)}
.sh-mob-link.sh-mob-active{background:rgba(255,255,255,.22)}
.sh-mob-lang{
  padding:16px 18px;border-top:1px solid rgba(255,255,255,.15);
}

@media(max-width:700px){
  .sh-tagline{display:none}
  .sh-nav{display:none}               /* masquer nav desktop sur mobile */
  .sh-lang-desktop{display:none}      /* lang switcher desktop caché → remplacé par celui du menu burger */
  .sh-burger{display:flex}            /* afficher burger sur mobile */
}

/* ── Footer ──────────────────────────────────────────────── */
.sf-footer{
  background:#0a1f3d;
  color:rgba(255,255,255,.65);
  margin-top:0;
}
.sf-inner{
  max-width:1200px;margin:0 auto;
  padding:36px 20px 28px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:32px;
}
.sf-brand{
  display:flex;align-items:center;gap:8px;
  color:#fff;font-size:.95rem;font-weight:700;
  margin-bottom:10px;
}
.sf-logo-img{
  width:18px;height:23px;flex-shrink:0;
  filter:brightness(0) invert(1);
  opacity:.8;
}
.sf-desc{font-size:.78rem;line-height:1.65;color:rgba(255,255,255,.55);margin-bottom:8px}
.sf-hosted{font-size:.72rem;color:rgba(255,255,255,.4)}
.sf-hosted a{color:rgba(255,255,255,.6);text-decoration:none}
.sf-hosted a:hover{color:#fff}
.sf-col-title{
  font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:rgba(255,255,255,.35);
  margin-bottom:12px;
}
.sf-link{
  display:block;font-size:.78rem;color:rgba(255,255,255,.6);
  text-decoration:none;padding:3px 0;transition:.12s;line-height:1.4;
}
.sf-link:hover{color:#fff;padding-left:4px}
.sf-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:14px 20px;
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.73rem;color:rgba(255,255,255,.4);
}
.sf-bottom a{color:rgba(255,255,255,.55);text-decoration:none;transition:.12s}
.sf-bottom a:hover{color:#fff}
.sf-sep{opacity:.3}
@media(max-width:700px){
  .sf-inner{grid-template-columns:1fr 1fr;gap:24px;padding:28px 16px 20px}
  .sf-col:first-child{grid-column:1/-1}
  .sf-bottom{justify-content:center;padding:12px 16px}
}
@media(max-width:420px){
  .sf-inner{grid-template-columns:1fr;gap:20px}
}