/* =============================================================================
   05-archives.css — TEMPLATES D'ARCHIVES
   -----------------------------------------------------------------------------
   Styles spécifiques aux archives WordPress (catégories, tags, taxonomies).
   Scope : body.archive uniquement — zéro pollution sur les pages et posts.
   100% tokens --nt-* et --nk-* — zéro valeur en dur.
   Règle d'or : un template = un fichier CSS.
============================================================================= */

/* ===========================================================================
   RESET GLOBAL ARCHIVES
=========================================================================== */

/* Breadcrumb — invisible visuellement, présent pour les crawlers */
body.archive .kadence-breadcrumbs,
body.archive .rankmath-bc-wrap,
body.archive nav.breadcrumbs {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* H1 archive — centré, taille maîtrisée */
body.archive h1.page-title,
body.archive h1.archive-title {
  font-size: clamp(32px, 4vw, 48px);
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: 0;
  line-height: 1.15;
}

/* Hero Kadence — supprimer padding bas natif */
body.archive .entry-hero.post-archive-hero-section,
body.archive .entry-hero {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* PALETTE — le hero d'archive Kadence pose un brun résiduel #2b2520 sur
   .entry-hero-container-inner (réglage Customizer). Neutralisé en anthracite
   à la source, scopé body.archive (0 !important, bat la règle Kadence). */
body.archive .entry-hero-container-inner {
  background: var(--nt-bg);
}

/* Container hero — centrer */
body.archive .entry-header.post-archive-title {
  text-align: center;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--nt-container-pad);
}

/* Description WP — visible, notre HTML nt-arc-* est injecté dedans via PHP */
/* On supprime les marges/padding natifs du conteneur Kadence */
body.archive .archive-description {
  padding: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

/* DESCRIPTION BRUTE (archives non-curatées) — aligner sur le sous-titre feutré.
   Les archives curatées injectent <div class="nt-arc-header"> dans
   .archive-description ; les ~11 autres n'ont qu'un <p> texte en enfant DIRECT.
   On le stylise comme .nt-arc-header__sub (feutré, centré, borné 720) pour
   unifier la DA V8 sans toucher au contenu ni aux liens. Le combinateur enfant
   direct « > p » N'ATTEINT JAMAIS la version curatée (où le <p> est imbriqué
   dans .nt-arc-header) : zéro régression sur les 18 archives golden. 2026-07-18. */
body.archive .archive-description > p {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.65;
  color: var(--nt-text-muted);
  max-width: 720px;
  margin: 16px auto 0;
  padding-inline: var(--nt-container-pad);
  box-sizing: border-box;
}

/* Vide sous le hero : le thème pose .content-area { margin-top:80px }. Sur les
   archives CURATÉES ce vide est occupé par les pills + le filet doré. Sur les
   BRUTES (description = simple <p>) il reste vide → bande morte. On le resserre
   UNIQUEMENT pour les brutes via :has (page dont .archive-description a un <p>
   enfant direct) : les curatées n'ont jamais de <p> direct → intactes.
   Progressive enhancement : si :has non supporté, on retombe sur 80px. */
body.archive:has(.archive-description > p) .content-area {
  margin-top: 40px;
}

/* Newsletter — masquée sur les archives */
body.archive aside.nook-p2.nook-cat {
  display: none;
}

/* Wrapper WooCommerce vide — masqué */
body.archive .woocommerce.kadence-woo-messages-none-woo-pages {
  display: none;
}

/* ===========================================================================
   SOUS-TITRE ARCHIVE
=========================================================================== */

.nt-arc-header {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--nt-container-pad);
  padding-block: 32px 0;
}

.nt-arc-header__sub {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.65;
  color: var(--nt-text-muted);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 0;
}

/* ===========================================================================
   NAVIGATION THÉMATIQUE — traitement ÉDITORIAL (ex-« pills »)
   -----------------------------------------------------------------------------
   Anti-tell IA : plus de PILULE pleine arrondie (fond + bordure + radius 999px).
   Liens en petites-caps Geist, soulignement OR qui se déploie au survol,
   OR plein persistant sur l'onglet actif. Radius 0, 0 boîte, 0 fond plein.
   Le markup PHP (classes + href) est INCHANGÉ → tous les liens conservés.
=========================================================================== */

.nt-arc-nav {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--nt-container-pad);
  padding-block: 24px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
}

.nt-arc-nav__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--nt-font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nt-text-muted);
  text-decoration: none;
  transition: color var(--nt-transition);
  white-space: nowrap;
}

/* soulignement OR = seule affordance (remplace le fond plein de la pilule) */
.nt-arc-nav__pill::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 1px;
  background: var(--nt-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--nt-transition);
}

.nt-arc-nav__pill:hover { color: var(--nt-text); }
.nt-arc-nav__pill:hover::after { transform: scaleX(1); }

.nt-arc-nav__pill--active { color: var(--nt-gold); }
.nt-arc-nav__pill--active::after { transform: scaleX(1); }

/* ===========================================================================
   PARCOURS DE LECTURE « PAR OÙ COMMENCER » — traitement ÉDITORIAL
   -----------------------------------------------------------------------------
   Anti-tell IA : plus de CARTE arrondie encadrée (bordure + radius + fond).
   Les 3 parcours de triage (fonction de conversion) sont préservés : chaque
   colonne est coiffée d'un FILET (or pour la voie recommandée, neutre sinon),
   eyebrow petites-caps or · titre SERIF · CTA « Lire le guide → ». Radius 0,
   0 boîte, 0 ombre. Markup PHP inchangé → 3 parcours + liens conservés.
=========================================================================== */

.nt-arc-start {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--nt-container-pad);
  padding-block: 40px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 300px));
  justify-content: center;
  gap: 0 40px;
}

.nt-arc-start__card {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--nt-line);
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  transition: border-color var(--nt-transition);
}

/* 0 hover-lift (doctrine, 24/07) : le retour tient déjà à la couleur titre/CTA (règles plus bas), pas au déplacement */
.nt-arc-start__card:focus-visible { outline: 2px solid var(--nt-text-strong); outline-offset: 4px; }

/* Parcours recommandé : filet OR (signale la voie principale, pas une boîte) */
.nt-arc-start__card--featured { border-top-color: var(--nt-gold); }
.nt-arc-start__card--featured:hover { border-top-color: var(--nt-gold-dark); }

.nt-arc-start__question {
  font-family: var(--nt-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nt-gold);
  margin: 0;
}

.nt-arc-start__title {
  font-family: var(--nt-font-heading);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 500;
  color: var(--nt-text-strong);
  line-height: 1.25;
  margin: 0;
  transition: color var(--nt-transition);
}

.nt-arc-start__card:hover .nt-arc-start__title { color: var(--nt-text); }

.nt-arc-start__cta {
  font-family: var(--nt-font-ui);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--nt-text-muted);
  font-weight: 500;
  margin-top: auto;
  padding-top: 4px;
  transition: color var(--nt-transition);
}

.nt-arc-start__card:hover .nt-arc-start__cta { color: var(--nt-gold); }

/* ===========================================================================
   SÉPARATEUR
=========================================================================== */

.nt-arc-divider {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--nt-container-pad);
  padding-block: 44px 8px;
  text-align: center;
}

.nt-arc-divider__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nt-gold);
}

/* Filet doré discret sous le libellé de collection — signature éditoriale,
   même langage que le filet des guides (or mat en trait, pas de boîte). */
.nt-arc-divider__line {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--nt-line-strong);
  margin: 14px auto 0;
}

/* ===========================================================================
   CARTES ARTICLES — override Kadence
=========================================================================== */

/* GRILLE PRODUITS — centrage + underfill.
   Kadence pose repeat(3, 1fr) : avec peu d'items la grille flotte à gauche
   dans un grand vide anthracite (effet « générique / cassé »). auto-fit +
   minmax borne la largeur des cartes ET centre l'ensemble : 1 item = carte
   centrée sur l'axe (jamais étirée), N items = grille centrée qui s'enroule.
   max-width + padding-inline calent la grille sur le même rail que le hero. */
body.archive ul.content-wrap.kadence-posts-list.grid-cols {
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: 44px 32px;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--nt-container-pad);
  box-sizing: border-box;
}

body.archive .entry-title {
  font-size: clamp(16px, 1.6vw, 20px) !important;
  line-height: 1.25;
  margin-bottom: 8px;
}

body.archive .entry-taxonomies,
body.archive .entry-footer {
  display: none;
}

body.archive .entry-meta .posted-on,
body.archive .entry-meta .byline {
  font-size: 12px;
  color: var(--nt-text-faint);
}

body.archive .entry-summary p {
  font-size: 13.5px;
  color: var(--nt-text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

@media (max-width: 1024px) {
  .nt-arc-start {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 820px;
    gap: 0 28px;
  }
}

/* Parcours empilés : chaque filet de tête devient un séparateur éditorial */
@media (max-width: 680px) {
  .nt-arc-start {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 0;
  }
  .nt-arc-start__card { padding: 18px 0 0; }
  .nt-arc-start__card + .nt-arc-start__card { margin-top: 22px; }
}

@media (max-width: 640px) {
  body.archive h1.page-title,
  body.archive h1.archive-title { font-size: 28px; }

  /* Nav thématique — liens éditoriaux centrés, cibles tactiles 44px, 0 pilule */
  .nt-arc-nav {
    gap: 2px 6px;
    padding-inline: 16px;
  }
  .nt-arc-nav__pill {
    padding: 10px 10px;
    min-height: 44px;
    box-sizing: border-box;
    justify-content: center;
  }
  .nt-arc-nav__pill::after { left: 10px; right: 10px; }

  /* Grille produits — mêmes gouttières/gaps sur mobile */
  body.archive ul.content-wrap.kadence-posts-list.grid-cols {
    padding-inline: 16px;
    gap: 32px 20px;
  }

  /* Parcours empilés — rail latéral + titre resserré */
  .nt-arc-start {
    max-width: 100%;
    padding-inline: 16px;
  }
  .nt-arc-start__title { font-size: 18px; }

  /* Sous-titre — padding latéral */
  .nt-arc-header {
    padding-inline: 16px;
  }
}
/* ===========================================================================
   PAGINATION — kill du « courant » or plein (défaut Kadence #c9a878 = tell legacy)
   → pastille feutrée : surface anthracite + texte or + liseré fin. Scopé body.archive,
   spécificité (0,4,1) qui bat Kadence sans !important. 2026-07-18.
=========================================================================== */
body.archive .nav-links .page-numbers.current,
body.archive .pagination .page-numbers.current {
  background: var(--nt-surface-1);
  color: var(--nt-gold);
  border: 1px solid var(--nt-gold);
}

/* États non-courants (autres numéros, prev/next) — même pastille feutrée
   que .current, hors aplat or plein Kadence. Hover = liseré or cohérent site.
   Spécificité (0,4,1) identique, sans !important. 2026-07-23. */
body.archive .nav-links .page-numbers:not(.current),
body.archive .pagination .page-numbers:not(.current) {
  background: var(--nt-surface-1);
  color: var(--nt-text-muted);
  border: 1px solid var(--nt-line);
  transition: color var(--nt-transition), border-color var(--nt-transition);
}

body.archive .nav-links .page-numbers:not(.current):hover,
body.archive .pagination .page-numbers:not(.current):hover {
  color: var(--nt-gold);
  border-color: var(--nt-gold);
}
body.archive .nav-links .page-numbers:not(.current):active,
body.archive .pagination .page-numbers:not(.current):active {
  color: var(--nt-gold-dark);
  border-color: var(--nt-gold-dark);
  background: var(--nt-gold-soft);
}
body.archive .nav-links .page-numbers:not(.current):focus-visible,
body.archive .pagination .page-numbers:not(.current):focus-visible {
  outline: 2px solid var(--nt-text-strong);
  outline-offset: 2px;
}