/* Toumaï Maps -- shared header, footer and WhatsApp button of every
   information page, copied from the mockup the owner validated (12/10/2026).
   Icons: Font Awesome Free 6.5.1 (CC BY 4.0), inlined as SVG by site.js. */
:root {
  --navy: #1e3a8a;
  --navy-dark: #172554;
  --blue: #2563eb;
  --sky: #eff6ff;
  --yellow: #eab308;
  --green: #2e8b57;
  --green-dark: #23704a;
  --ink: #111827;
  --muted: #4b5563;
  --bg: #e2ebf8; /* soft sky blue (owner, 13/10): pure white tired the eyes */
}
/* Rubik, served from the site itself (the CSP only allows our own fonts) */
@font-face { font-family: "Rubik"; src: url("fonts/rubik-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
body { font-family: "Rubik", system-ui, sans-serif; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ico-svg { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.125em; }

/* Header */
.top { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 30; }
.top .top-in { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-weight: 600; line-height: 1.15; font-size: 17px; }
.brand .mark { width: 40px; height: 40px; border-radius: 11px; background: var(--navy); color: var(--yellow); display: grid; place-items: center; font-size: 19px; }
.brand small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.top nav { display: flex; gap: 26px; margin: 0 auto; }
.top nav a { text-decoration: none; color: var(--navy); font-weight: 500; }
.top nav a:hover { color: var(--blue); }
.pill { background: var(--green); color: #fff; text-decoration: none; font-weight: 500; padding: 10px 22px; border-radius: 999px; box-shadow: 0 6px 16px rgba(46,139,87,.35); white-space: nowrap; }
.pill:hover { background: var(--green-dark); }
@media (max-width: 960px) { .top nav { display: none; } .pill { margin-left: auto; padding: 9px 16px; } }

/* Footer */
.foot { background: #1a1a1a; color: #d1d5db; border-top: 5px solid var(--yellow); padding: 48px 0 20px; font-size: 14px; }
.foot .foot-in { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.foot .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.foot h4 { color: #fff; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; margin: 0 0 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { padding: 4px 0; }
.foot a { color: #d1d5db; text-decoration: none; }
.foot a:hover { color: #fff; }
.foot .contact a { color: #93c5fd; }
.foot .social { display: flex; gap: 10px; margin-top: 16px; }
.foot .social a { width: 36px; height: 36px; border-radius: 50%; background: #2a2a2a; display: grid; place-items: center; }
.foot .legal { border-top: 1px solid #2f2f2f; margin-top: 32px; padding-top: 16px; color: #9ca3af; font-size: 13px; }
@media (max-width: 760px) { .foot .cols { grid-template-columns: 1fr; } }

/* Floating WhatsApp button */
.wa { position: fixed; right: 18px; bottom: 18px; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 8px 20px rgba(0,0,0,.25); z-index: 40; text-decoration: none; }
@media print { .wa { display: none; } }