/* ════════════════════════════════════════════════════════════
   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{width:30px;height:30px;flex-shrink:0}
.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}
@media(max-width:600px){
  .sh-tagline{display:none}
  .sh-link{padding:5px 8px;font-size:.75rem}
  .sh-name{font-size:.88rem}
}
@media(max-width:400px){
  .sh-nav .sh-link:nth-child(n+3){display:none}
}

/* ── 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-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}
}