/*
 * Sympa — chrome.css
 *
 * Habillage du site : barre de navigation (header) et pied de page (footer).
 * tokens.css, global.css et components.css doivent être chargés avant.
 */


/* ── Lien d'évitement (accessibilité) ────────────────────────────────
 * Permet aux personnes naviguant au clavier de sauter directement au
 * contenu. Invisible tant qu'il n'a pas le focus.
 */
.s-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.s-skip-link:focus {
  left: var(--sympa-space-2);
  top: var(--sympa-space-2);
  z-index: 100;
  padding: var(--sympa-space-2) var(--sympa-space-4);
  background: var(--sympa-ink-900);
  color: var(--sympa-surface);
  border-radius: var(--sympa-radius-md);
  font: 500 14px/20px var(--sympa-font-sans);
}


/* ── Barre de navigation ─────────────────────────────────────────────
 * Collante en haut, hauteur 64px. La bordure basse n'apparaît qu'au
 * défilement (classe .is-scrolled ajoutée par nav.js après 10px).
 */
.s-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sympa-paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--sympa-dur-md) var(--sympa-ease-out);
}
.s-nav.is-scrolled {
  border-bottom-color: var(--sympa-ink-100);
}

.s-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sympa-space-6);
  height: 64px;
  max-width: var(--sympa-container-max);
  margin: 0 auto;
  padding: 0 var(--sympa-gutter-desktop);
  position: relative;  /* reste au-dessus du tiroir mobile (voir .s-nav__drawer) */
  z-index: 2;
}

/* Marque : logo + nom du site */
.s-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sympa-space-2);
  flex-shrink: 0;
  text-decoration: none;
}
.s-nav__brand img {
  width: 24px;
  height: 24px;
}
.s-nav__brand-name {
  font: 700 19px/22px var(--sympa-font-sans);
  letter-spacing: -0.01em;
  color: var(--sympa-ink-900);
}

/* Liens centraux */
.s-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.s-nav__links a {
  font: 500 14px/20px var(--sympa-font-sans);
  color: var(--sympa-ink-500);
  text-decoration: none;
  transition: color var(--sympa-dur-sm) var(--sympa-ease-out);
}
.s-nav__links a:hover,
.s-nav__links .current-menu-item > a {
  color: var(--sympa-ink-900);
}


/* ── Navigation mobile : bouton hamburger + tiroir ───────────────────
 * Sous 768px, les liens centraux et le CTA cèdent la place à un bouton
 * hamburger qui ouvre un tiroir plein écran. Hamburger et tiroir sont
 * masqués au-dessus de 768px (voir le média en fin de section).
 */

/* Bouton hamburger — trois barres qui se muent en croix à l'ouverture. */
.s-nav__toggle {
  display: none;            /* affiché en mobile uniquement (voir média) */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--sympa-radius-md);
  cursor: pointer;
}
.s-nav__toggle:hover { background: var(--sympa-brand-50); }

.s-nav__toggle-bar {
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--sympa-ink-900);
  transform-origin: center;
  transition: transform var(--sympa-dur-md) var(--sympa-ease-out),
              opacity   var(--sympa-dur-sm) var(--sympa-ease-out);
}
.s-nav__toggle.is-open .s-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.s-nav__toggle.is-open .s-nav__toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.s-nav__toggle.is-open .s-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Tiroir plein écran. Fermé, visibility:hidden le rend invisible ET le
 * retire du focus clavier. Ouvert : la classe .is-open (posée par nav.js).
 */
.s-nav__drawer {
  display: none;            /* activé en mobile uniquement (voir média) */
  position: fixed;
  inset: 0;
  z-index: 1;               /* sous .s-nav__inner, qui reste cliquable */
  flex-direction: column;
  padding-top: 64px;        /* dégage la barre de navigation */
  background: var(--sympa-paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity    var(--sympa-dur-md) var(--sympa-ease-out),
              visibility var(--sympa-dur-md) var(--sympa-ease-out);
}
.s-nav__drawer.is-open {
  opacity: 1;
  visibility: visible;
}

/* Liste des liens du tiroir */
.s-nav__drawer-menu {
  list-style: none;
  margin: 0;
  padding: var(--sympa-space-6) var(--sympa-space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sympa-space-1);
}
.s-nav__drawer-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sympa-space-4) var(--sympa-space-1);
  font: 600 22px/28px var(--sympa-font-sans);
  color: var(--sympa-ink-900);
  text-decoration: none;
  border-bottom: 1px solid var(--sympa-line-soft);
  opacity: 0;               /* révélé à l'ouverture (voir .is-open plus bas) */
  transform: translateY(8px);
  transition: opacity   var(--sympa-dur-md) var(--sympa-ease-out),
              transform var(--sympa-dur-md) var(--sympa-ease-out);
}
.s-nav__drawer-menu a::after {
  content: "→";
  font-weight: 400;
  color: var(--sympa-ink-400);
}
.s-nav__drawer-menu a:active { color: var(--sympa-brand-600); }

/* CTA + signature, en bas du tiroir */
.s-nav__drawer-cta {
  padding: var(--sympa-space-8) var(--sympa-space-5) var(--sympa-space-6);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity   var(--sympa-dur-md) var(--sympa-ease-out) 220ms,
              transform var(--sympa-dur-md) var(--sympa-ease-out) 220ms;
}
.s-nav__drawer-cta .s-btn { width: 100%; }
.s-nav__drawer-foot {
  margin: auto 0 0;
  padding: var(--sympa-space-5) var(--sympa-space-5) var(--sympa-space-8);
  font: 500 13px/18px var(--sympa-font-sans);
  letter-spacing: 0.04em;
  color: var(--sympa-ink-400);
}

/* Apparition en cascade des items et du CTA quand le tiroir s'ouvre. */
.s-nav__drawer.is-open .s-nav__drawer-menu a,
.s-nav__drawer.is-open .s-nav__drawer-cta {
  opacity: 1;
  transform: translateY(0);
}
.s-nav__drawer.is-open .s-nav__drawer-menu li:nth-child(1) a { transition-delay: 60ms; }
.s-nav__drawer.is-open .s-nav__drawer-menu li:nth-child(2) a { transition-delay: 100ms; }
.s-nav__drawer.is-open .s-nav__drawer-menu li:nth-child(3) a { transition-delay: 140ms; }
.s-nav__drawer.is-open .s-nav__drawer-menu li:nth-child(4) a { transition-delay: 180ms; }

/* Page figée derrière le tiroir ouvert (pas de défilement parasite). */
body.s-nav-open { overflow: hidden; }


/* ── Responsive : bascule desktop / mobile ───────────────────────────
 * Sous 768px : les liens et le CTA disparaissent, le hamburger et le
 * tiroir prennent le relais.
 */
@media (max-width: 768px) {
  .s-nav__nav,
  .s-nav__cta { display: none; }
  .s-nav__toggle { display: flex; }
  .s-nav__drawer { display: flex; }
}


/* ── Pied de page ────────────────────────────────────────────────────
 * Fond papier, bordure haute fine. Grille de 4 colonnes, puis une
 * ligne basse copyright + liens légaux.
 */
.s-footer {
  background: var(--sympa-paper);
  border-top: 1px solid var(--sympa-line-soft);
  padding: var(--sympa-space-16) 0 var(--sympa-space-8);
}

.s-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: var(--sympa-space-8);
  padding-bottom: var(--sympa-space-12);
  border-bottom: 1px solid var(--sympa-line-soft);
}

/* Colonne 1 — marque + accroche */
.s-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sympa-space-2);
  text-decoration: none;
  margin-bottom: var(--sympa-space-3);
}
.s-footer__brand img { width: 24px; height: 24px; }
.s-footer__brand-name {
  font: 700 18px/22px var(--sympa-font-sans);
  letter-spacing: -0.01em;
  color: var(--sympa-ink-900);
}
.s-footer__tagline {
  font: 400 14px/20px var(--sympa-font-sans);
  color: var(--sympa-ink-500);
  max-width: 240px;
}

/* Colonnes 2 & 3 — listes de liens */
.s-footer__col h4 {
  font: 600 13px/18px var(--sympa-font-sans);
  letter-spacing: 0.01em;
  color: var(--sympa-ink-900);
  margin-bottom: var(--sympa-space-3);
}
.s-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sympa-space-2);
}
.s-footer__col ul a {
  font: 400 14px/20px var(--sympa-font-sans);
  color: var(--sympa-ink-500);
  text-decoration: none;
  transition: color var(--sympa-dur-sm) var(--sympa-ease-out);
}
.s-footer__col ul a:hover { color: var(--sympa-brand-600); }

/* Colonne 4 — newsletter */
.s-footer__newsletter-text { margin-bottom: var(--sympa-space-3); }
.s-footer__form {
  display: flex;
  gap: var(--sympa-space-2);
  flex-wrap: wrap;
}
.s-footer__form .s-input { flex: 1 1 160px; min-width: 0; }

/* Champ piège anti-robots — hors écran, ni vu ni focalisable par un humain. */
.s-footer__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
}

/* Message de réponse sous le formulaire (succès ou erreur).
   Couleurs choisies pour rester lisibles sur le fond papier. */
.s-footer__form-msg {
  flex: 1 1 100%;
  margin: 0;
  font: 400 13px/18px var(--sympa-font-sans);
}
.s-footer__form-msg.is-success { color: var(--sympa-mint-ink); }
.s-footer__form-msg.is-error   { color: var(--sympa-danger-600); }

/* Bas de page — copyright + liens légaux */
.s-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sympa-space-4);
  padding-top: var(--sympa-space-6);
  font: 400 12px/18px var(--sympa-font-sans);
  letter-spacing: 0.02em;
  color: var(--sympa-ink-400);
}
.s-footer__legal a { color: inherit; text-decoration: none; }
.s-footer__legal a:hover { color: var(--sympa-brand-600); }
.s-footer__legal-links { display: flex; gap: var(--sympa-space-4); }

/* Responsive footer */
@media (max-width: 768px) {
  .s-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sympa-space-8) var(--sympa-space-6);
  }
  .s-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sympa-space-2);
  }
}
@media (max-width: 480px) {
  .s-footer__grid { grid-template-columns: 1fr; }
}