/* =============================================================================
   NOOKTAILS — FOOTER V3 « LA REVUE » (DA V8 gelée) — concept 3 étages
   Source canonique versionnée : Theme Framework/css/07-footer.css
   Déployé : assets/css/07-footer.css (enqueue via inc/nooktails-chrome.php).

   CONCEPT
     ÉTAGE 1  BAND CLUB pleine largeur : titre Fraunces à gauche (+ sous-ligne
              Newsreader) · input à filet + CTA outline or à droite, alignés ;
              filet or dessous. Aucune boîte SaaS, ça respire.
     ÉTAGE 2  GROUPES DE LIENS aérés : Marque · Explorer · Informations · Boutique.
              Labels petites-caps à filet or ; liens Geist, hover or.
     ÉTAGE 3  ANCRE SIGNATURE : grand wordmark « nooktails » Fraunces pleine
              largeur, ivoire très basse opacité (~9%), letter-spacing serré ;
              dessous filet fin + micro-ligne légale.

   RÈGLES  100% tokens 00-tokens.css (fallbacks DA V8 si absents). 0 !important.
           Or RARE = filets / micro-accents, jamais d'aplat. Espace généreux.
   TYPO    Fraunces (serif titres) · Newsreader (serif corps) · Geist->Inter
           (liens/labels UI).

   BREAKPOINTS (raisonnés CSS/computed — viewport auto bloqué)
     >1000  band 2 col (lead | form) · nav 4 col (brand 1.6fr + 3×1fr)
     <=1000 band 2 col · nav : brand pleine largeur + 3 groupes 3 col
     <=820  band -> empile (titre puis form)
     <=680  nav groupes 2 col (brand pleine largeur)
     <=460  tout en 1 col · field input+bouton empilés (bouton pleine largeur)
   ============================================================================= */

/* POURTOUR KADENCE = même noir que le body/pillar (source de vérité unique).
   Le fond du footer venait du Customizer Kadence en inline (#colophon{background}) : cette règle
   aligne TOUT le wrapper Kadence sur le token DA --nt-bg (#16161A), pour ne plus dépendre du Customizer.
   Préfixe `body` = bat l'inline Kadence #colophon (spéc. (0,1,1) > (0,1,0)) SANS !important. */
body #colophon,
body .site-footer-wrap,
body .site-top-footer-wrap,
body .site-footer-row-container-inner{ background: var(--nt-bg); }

.nook-footer-wrap{
  /* ---- couleurs (mappées DA V8) ---- */
  --nf-bg:           var(--nt-bg, #F3F1EA);
  --nf-title:        var(--nt-text-strong, #211E1A);
  --nf-text:         var(--nt-text, #2A2723);
  --nf-muted:        var(--nt-text-muted, #726B5F);
  --nf-faint:        var(--nt-text-faint, #A39C8C);
  --nf-accent:       var(--nt-gold, #8C6E3F);
  --nf-accent-hover: var(--nt-gold-dark, #6E5530);
  --nf-line:         var(--nt-line, #DED8C8);
  --nf-line-strong:  var(--nt-line-strong, #C7BEA8);
  /* wordmark signature : 24/07 — était ivoire à 9% (rgb 241,241,243), quasi invisible
     sur fond désormais clair (blanc sur quasi-blanc). Encre à très basse opacité. */
  --nf-sign:         rgba(42,39,35,.06);
  /* ---- typographie (mappée tokens) ---- */
  --nf-heading:      var(--nt-font-heading, "Fraunces", Georgia, serif);
  --nf-serif:        var(--nt-font-body, "Newsreader", Georgia, serif);
  --nf-ui:           var(--nt-font-ui, 'Inter', -apple-system, "Segoe UI", sans-serif);
  --nf-link:         var(--nt-font-nav, var(--nt-font-ui, 'Inter', sans-serif)); /* Geist -> Inter */

  background: var(--nf-bg);
  border-top: 1px solid var(--nf-line);
}

.nk-foot{
  font-family: var(--nf-ui);
  color: var(--nf-text);
}

/* Bloc central (club + filet + nav) centré et gouttiéré ------------------- */
.nk-foot__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 6.5vw, 96px) 28px 0;
}

/* =============================================================================
   ÉTAGE 1 — BAND CLUB
   ============================================================================= */
.nk-foot__club{
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: end;
}

.nk-foot__eyebrow{
  display: block;
  font-family: var(--nf-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--nf-accent);
  margin: 0 0 18px;
}

.nk-foot__club-title{
  font-family: var(--nf-heading);
  font-size: clamp(29px, 3.7vw, 46px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: var(--nt-tracking-heading);
  color: var(--nf-title);
  margin: 0 0 16px;
  max-width: 15ch;
}

.nk-foot__club-sub{
  font-family: var(--nf-serif);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--nf-muted);
  margin: 0;
  max-width: 46ch;
}

/* form Brevo — input à filet + CTA outline or, alignés bas -------------------- */
.nk-foot__club-form{ padding-bottom: 4px; }
.nk-foot__club-form form{ margin: 0; }

.nk-foot__field{
  display: flex;
  align-items: flex-end;
  gap: 16px 20px;
  flex-wrap: wrap;
}

.nk-foot__club-form input[type="email"]{
  flex: 1 1 240px;
  min-width: 0;
  min-height: 48px;
  padding: 12px 2px;
  background: transparent;
  color: var(--nf-title);
  border: 0;
  border-bottom: 1px solid var(--nf-line-strong);
  border-radius: 0;
  font-family: var(--nf-ui);
  font-size: 16px; /* >=16px : évite le zoom auto iOS au focus */
  box-sizing: border-box;
  margin: 0;
  transition: border-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.nk-foot__club-form input[type="email"]::placeholder{ color: var(--nf-faint); }
.nk-foot__club-form input[type="email"]:focus{
  outline: none;
  border-bottom-color: var(--nf-accent);
}

/* CTA GOLDEN à filet : transparent, bord or, texte ivoire, hover or. 0 aplat. */
.nk-foot__club-form button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 13px 32px;
  background: transparent;
  color: var(--nf-title);
  border: 1px solid var(--nf-line-strong);
  border-radius: 6px;
  font-family: var(--nf-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--nt-transition), border-color var(--nt-transition);
}
.nk-foot__club-form button:hover{
  color: var(--nf-accent);
  border-color: var(--nf-accent);
}
.nk-foot__club-form button:active{
  color: var(--nt-gold-dark);
  border-color: var(--nt-gold-dark);
}
/* focus = encre neutre, distinct du hover (grammaire d'interaction unique, 24/07) : l'or reste réservé au hover */
.nk-foot__club-form button:focus-visible{
  outline: 2px solid var(--nf-title);
  outline-offset: 3px;
}

.nk-foot__reassure{
  font-family: var(--nf-ui);
  font-size: 12px;
  color: var(--nf-faint);
  margin: 16px 0 0;
  letter-spacing: .01em;
}

/* message post-inscription injecté par le pont JS (.nook-foot__msg) ---------- */
.nk-foot__club-form .nook-foot__msg{
  font-family: var(--nf-serif);
  font-size: 14px;
  line-height: 1.6;
  margin: 14px 0 0;
  color: var(--nf-muted);
}
.nk-foot__club-form .nook-foot__msg a{
  color: var(--nf-accent);
  text-underline-offset: 3px;
}

/* filet or — séparateur band / nav ------------------------------------------ */
.nk-foot__rule{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nf-line-strong) 14%, var(--nf-line-strong) 86%, transparent);
  margin: clamp(48px, 5.5vw, 76px) 0 clamp(44px, 5vw, 68px);
}

/* =============================================================================
   ÉTAGE 2 — GROUPES DE LIENS
   ============================================================================= */
.nk-foot__nav{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 3.6vw, 64px);
  align-items: start;
}

/* colonne Marque ------------------------------------------------------------- */
.nk-foot__brandname{
  font-family: var(--nf-heading);
  font-size: clamp(27px, 2.8vw, 34px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--nt-tracking-heading);
  color: var(--nf-title);
  margin: 0 0 18px;
}
.nk-foot__brandline{
  font-family: var(--nf-serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--nf-muted);
  margin: 0 0 22px;
  max-width: 34ch;
}
.nk-foot__contact{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-family: var(--nf-ui);
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--nf-text);
  text-decoration: none;
  border-bottom: 1px solid var(--nf-line);
  padding-bottom: 3px;
  transition: color var(--nt-transition), border-color var(--nt-transition);
}
.nk-foot__contact:hover{
  color: var(--nf-accent);
  border-bottom-color: var(--nf-accent);
}
.nk-foot__contact:active{
  color: var(--nt-gold-dark);
  border-bottom-color: var(--nt-gold-dark);
}
.nk-foot__contact:focus-visible{
  outline: 2px solid var(--nf-title);
  outline-offset: 3px;
}

/* groupes de liens ----------------------------------------------------------- */
.nk-foot__label{
  position: relative;
  font-family: var(--nf-link);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nf-muted);
  margin: 0 0 26px;
  padding-bottom: 14px;
}
/* filet or sous chaque label — signature discrète */
.nk-foot__label::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 1px;
  background: var(--nf-line-strong);
}

.nk-foot__group ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.nk-foot__group li{ margin: 0; }
.nk-foot__group li a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--nf-text);
  text-decoration: none;
  font-family: var(--nf-link);
  font-size: 15px;
  line-height: 1.4;
  transition: color var(--nt-transition), padding-left var(--nt-transition);
}
.nk-foot__group li a:hover{
  color: var(--nf-accent);
  padding-left: 4px;
}
.nk-foot__group li a:active{
  color: var(--nt-gold-dark);
  padding-left: 4px;
}
.nk-foot__group li a:focus-visible{
  outline: 2px solid var(--nf-title);
  outline-offset: 2px;
}

/* =============================================================================
   ÉTAGE 3 — ANCRE SIGNATURE (tagline éditoriale + micro-légal)
   25/07 (Phase 3, discipline de la preuve) : remplace l'ancien wordmark géant en
   filigrane (0 contenu réel, décoratif). Contrat retenu : la marque se signe par une
   phrase, pas par un logo agrandi ni un compteur de contenu ("121 guides testés" écarté
   — trop "marketing/SaaS" pour une revue éditoriale, choix du fondateur). Couleur passée
   de --nf-sign (lavis ~6% opacité, illisible pour du vrai texte) à --nf-muted (4.66:1,
   conforme WCAG AA) — un signature discrète reste un vrai contenu, pas un ornement.
   ============================================================================= */
.nk-foot__sign{
  margin-top: clamp(48px, 6vw, 88px);
  padding: 0 24px;
  text-align: center;
}
.nk-foot__wordmark{
  font-family: var(--nf-heading);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw + .7rem, 1.6rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--nf-muted);
  max-width: 34rem;
  margin: 0 auto;
}

/* micro-ligne légale --------------------------------------------------------- */
.nk-foot__legal-wrap{
  max-width: 1200px;
  margin: clamp(28px, 3.5vw, 44px) auto 0;
  padding: 0 28px;
}
.nk-foot__legal{
  border-top: 1px solid var(--nf-line);
  padding: 24px 0 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
}
.nk-foot__legal small{
  font-family: var(--nf-ui);
  font-size: 12.5px;
  color: var(--nf-muted);
  letter-spacing: .012em;
}
.nk-foot__legal a{
  color: var(--nf-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--nt-transition), border-color var(--nt-transition);
}
.nk-foot__legal a:hover{
  color: var(--nf-accent);
  border-bottom-color: var(--nf-accent);
}
.nk-foot__legal a:active{
  color: var(--nt-gold-dark);
  border-bottom-color: var(--nt-gold-dark);
}
.nk-foot__legal a:focus-visible{
  outline: 2px solid var(--nf-title);
  outline-offset: 2px;
}

/* sr-only (label opt-in) ----------------------------------------------------- */
.nook-sr{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* <=1000 : nav -> brand pleine largeur + 3 groupes en 3 col ------------------ */
@media (max-width: 1000px){
  .nk-foot__nav{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 34px;
  }
  .nk-foot__brand{ grid-column: 1 / -1; }
  .nk-foot__brandline{ max-width: 48ch; }
}

/* <=820 : band club -> empile (titre puis form) ----------------------------- */
@media (max-width: 820px){
  .nk-foot__club{
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
  }
  .nk-foot__club-title{ max-width: 20ch; }
  .nk-foot__club-form{ padding-bottom: 0; max-width: 560px; }
}

/* <=680 : groupes en 2 col (brand reste pleine largeur) ---------------------- */
@media (max-width: 680px){
  .nk-foot__nav{
    grid-template-columns: 1fr 1fr;
    gap: 40px 28px;
  }
}

/* <=460 : tout en 1 col · field empilé (bouton pleine largeur) --------------- */
@media (max-width: 460px){
  .nk-foot__inner{ padding: 48px 22px 0; }
  .nk-foot__nav{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .nk-foot__field{
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .nk-foot__club-form input[type="email"]{ flex: 1 1 auto; }
  .nk-foot__club-form button{ width: 100%; }
  .nk-foot__sign{ padding: 0 16px; }
  .nk-foot__legal-wrap{ padding: 0 22px; }
  .nk-foot__legal{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* =============================================================================
   FOOTER MOBILE DÉDIÉ (29/07, Sprint UI V3) — <768px uniquement.
   Desktop (>=768px) : entièrement inchangé (.nk-foot__nav 18 liens, brand,
   signature étage 3) — ce bloc ne fait QUE masquer/révéler, 0 règle desktop
   modifiée ci-dessus. 100% tokens --nf-* déjà définis (DA V8, aucune nouvelle
   couleur) — palette crème/brun proposée dans le brief écartée (hors charte).
   ============================================================================= */
@media (max-width: 767px){

  /* Étage 2 desktop (brand + 3 groupes 18 liens) + étage 3 (wordmark signature)
     remplacés par la nav mobile dédiée ci-dessous et le bloc légal condensé. */
  .nk-foot__nav,
  .nk-foot__sign{
    display: none;
  }

  /* Newsletter (étage 1, quand affichée) : plus d'air, conforme "respirant". */
  .nk-foot__inner{ padding-top: clamp(40px, 10vw, 56px); }
  .nk-foot__club-sub{ max-width: none; }
  .nk-foot__rule{ margin: clamp(40px, 9vw, 56px) 0; }

  /* Nav mobile dédiée : 5 groupes empilés, 48px entre groupes, 24px de marge
     latérale (portée par le padding du groupe, pas par .nk-foot__inner qui
     sert aussi la newsletter/légal). */
  .nk-foot__nav--mobile{
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 0 24px;
  }

  /* Titres de section : mêmes tokens que le desktop (cohérence typo globale),
     tracking légèrement resserré pour la lecture mobile. */
  .nk-foot__nav--mobile .nk-foot__label{
    font-size: 11px;
    letter-spacing: .18em;
    margin-bottom: 18px;
  }

  /* Liens : 16px/500, aucune capitale forcée, même hauteur de ligne partout,
     séparateur filet discret entre liens (token --nf-line, pas de noir opaque
     — rgba(0,0,0,.08) du brief serait quasi invisible sur le fond anthracite). */
  .nk-foot__nav--mobile .nk-foot__group ul{
    display: flex;
    flex-direction: column;
  }
  .nk-foot__nav--mobile .nk-foot__group li{
    border-bottom: 1px solid var(--nf-line);
  }
  .nk-foot__nav--mobile .nk-foot__group li:last-child{
    border-bottom: 0;
  }
  .nk-foot__nav--mobile .nk-foot__group li a{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    min-height: 48px;
    padding: 18px 0;
  }

  /* Copyright : réduit visuellement, ne doit pas attirer l'attention. */
  .nk-foot__legal-wrap{ margin-top: clamp(32px, 8vw, 44px); }
  .nk-foot__legal{ padding: 18px 0 28px; }
  .nk-foot__legal small{
    font-size: 11px;
    color: var(--nf-faint);
  }
}

@media (min-width: 768px){
  .nk-foot__nav--mobile{ display: none; }
}