/* ============================================================
   LAYOUT — annesoeapas.fr
   Header (nav hamburger mobile-first) + footer + boutons.
   Charger APRÈS base.css. Contrastes vérifiés (G6).
   ============================================================ */

/* --- Utilitaire lecteur d'écran (texte masqué visuellement, lu par SR) --- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-comfort); /* 44px confort CTA mobile */
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  /* Micro-interaction (vault animations-web-2026 Niveau 1) : lift + ombre douce au
     survol/focus. transform/opacity only (compositeur, 0 CLS). Coupé en reduced-motion. */
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms ease;
}
.btn-cta { background: var(--btn-bg); color: var(--btn-text); }
.btn-cta:hover { color: var(--btn-text); opacity: 0.92; }
.btn:hover,
.btn:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:focus-visible,
  .btn:active { transform: none; box-shadow: none; }
}
/* Bouton secondaire (outline brun) — pour actions complémentaires qui ne doivent
   pas concurrencer le CTA RDV. Brun sur blanc/pastel = ≥7:1 (texte) / ≥3:1 (bordure UI). */
.btn-outline { background: transparent; color: var(--link); border-color: var(--accent); }
.btn-outline:hover { background: var(--bg-menthe); color: var(--link-hover); }

/* ============================================================
   HEADER (mobile-first : nav repliée dans un panneau)
   ============================================================ */
.site-header {
  position: sticky;            /* reste visible au scroll, dans le flux → 0 CLS (vs fixed) */
  top: 0;
  z-index: 50;                 /* > contenu(1), < skip-link(1000) ; <dialog> menu = top-layer au-dessus */
  background: var(--bg);       /* opaque : le contenu ne transparaît pas dessous */
  border-bottom: 1px solid var(--color-peche);
}
/* [TRIAL 2026-06-08] Auto-hide mobile (nav.js ajoute .is-hidden) : libère la hauteur d'écran quand
   header sticky (haut) + sticky-CTA (bas) se cumulent. Desktop & reduced-motion : jamais replié.
   Suppression = retirer ce bloc + l'IIFE auto-hide de nav.js. */
.site-header { transition: transform 250ms ease; }
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin-right: auto; /* pousse tél + burger à droite */
}
.brand img {
  height: 44px;       /* hauteur d'affichage ; ratio width/height des attrs évite le CLS,
                         reste net (source ~240px de haut) */
  width: auto;
  display: block;
  transition: opacity 150ms ease; /* hover discret — prefers-reduced-motion global (base.css) */
}
.brand:hover img { opacity: 0.85; }
.header-tel {
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
}

/* Déclencheur : bouton TEXTE « ☰ Menu » (plus d'icône seule), zone ≥ 44px */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--target-comfort);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle-bars { font-size: 1.1em; line-height: 1; }

/* Nav desktop : cachée sur mobile (le menu mobile vit dans #m-menu) */
.nav { display: none; }
.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0;
}
.nav-list a {
  display: block;
  padding: var(--space-2);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
}
.nav-list a:hover { background: var(--bg-peche); }
.nav-list a[aria-current="page"] {
  font-weight: 700;
  color: var(--heading);
}
.nav-cta { align-self: flex-start; }

/* --- Desktop : nav en ligne, burger masqué ---
   Breakpoint à 75em (1200px) : à 64em (1024px) les 7 items + CTA + tél + logo se
   chevauchaient dans la bande ~1024–1180px. Sous 1200px on garde donc le burger propre
   (logo + tél persistant + burger) ; au-dessus tout tient confortablement sur une ligne.
   Curseur réversible à 72em si on veut l'inline plus tôt — ne PAS redescendre à 64em. */
@media (min-width: 75em) {
  .nav-toggle { display: none; }
  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: 0;
    border: 0;
    background: transparent;
  }
  /* 7 liens + 2 CTA (RDV + pré-inscription) + logo + tél sur UNE ligne.
     nowrap + paddings resserrés ; cibles ≥ 24px CSS conservées (WCAG 2.5.8). */
  .nav { gap: var(--space-2); }
  .nav-list { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 2px; }
  .nav-list a { padding: var(--space-1) var(--space-2); font-size: 0.9rem; }
  .nav-cta,
  .nav-preinscription {
    padding-inline: var(--space-2);
    font-size: 0.85rem;
    white-space: nowrap;
  }
}

/* ============================================================
   MENU MOBILE — <dialog> plein écran (showModal)
   Habillage CSS uniquement. Anim transform/opacity (compositeur, 0 CLS).
   ============================================================ */
.m-menu {
  /* dialog par défaut = display:none fermé ; ouvert via showModal() */
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: var(--space-5) var(--space-4);
  background: var(--bg);
  color: var(--text);
  border: 0;
  /* Entrée animée via @starting-style ; sortie instantanée (pas de lag display). */
  transform: translateY(0);
  opacity: 1;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 220ms ease;
}
.m-menu::backdrop {
  /* voile charbon via token (pas de valeur dure) ; pas de blur lourd (coût GPU mobile) */
  background: color-mix(in srgb, var(--color-charbon) 45%, transparent);
}
/* État de départ de l'animation d'ouverture (top-layer) */
@starting-style {
  .m-menu[open] {
    transform: translateY(1rem);
    opacity: 0;
  }
}

.m-menu-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.m-menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
}
.m-menu-list a {
  display: block;
  min-height: var(--target-comfort);
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.m-menu-list a:hover { background: var(--bg-peche); }
.m-menu-list a[aria-current="page"] {
  font-weight: 700;
  color: var(--heading);
  border-color: var(--accent);
}
.m-menu-cta { align-self: stretch; margin-top: var(--space-2); }
/* CTA secondaire pré-inscription : étiré comme le CTA principal, outline (ne le concurrence pas) */
.m-menu-preinscription { align-self: stretch; }

/* Croix « Fermer » — texte, ≥44px, contraste fort (brun sur blanc cassé) */
.m-menu-close {
  margin-top: var(--space-4);
  min-height: var(--target-comfort);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .m-menu { transition: none; }
  @starting-style {
    .m-menu[open] { transform: none; opacity: 1; }
  }
}

/* Fallback sans JS : visible sur mobile, masqué desktop (la .nav inline prend le relais) */
.nav-fallback {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) 0;
}
.nav-fallback ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0;
  margin: 0;
}
.nav-fallback a {
  display: block;
  min-height: var(--target-comfort);
  padding: var(--space-2);
  color: var(--text);
  text-decoration: none;
}
@media (min-width: 75em) {
  .nav-fallback { display: none; }
}

/* ============================================================
   FOOTER (fond brun, texte clair — 13:1)
   ============================================================ */
.site-footer {
  margin-top: var(--space-6);
  padding-block: var(--space-5);
  background: var(--color-brun);
  color: var(--text-invert);
}
.site-footer a { color: var(--text-invert); }
.site-footer h2 {
  color: var(--text-invert);
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: var(--space-1); }
/* Aère les lignes NAP collées (reset * { margin:0 }) et sépare le 2e bloc « Suivez Anne-So » du bloc légal */
.footer-nap p + p { margin-top: var(--space-1); }
.footer-col ul + h2 { margin-top: var(--space-3); }
/* Focus visible sur fond sombre : anneau clair (le brun serait invisible) */
.site-footer :focus-visible { outline-color: var(--text-invert); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.footer-brand {
  font-family: var(--font-heading);
  font-size: 1.2rem;
}
.footer-bottom {
  margin-top: var(--space-4);
  font-size: 0.9rem;
}

@media (min-width: 48em) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}