/*
 * LOGUETOWN — Direction artistique « comics » (septembre 2026).
 * Reprend le langage du haut de l'accueil (css/accueil-react.css) sur tout le site :
 * lettrage BD (Bangers) pour les titres, cartouche tramé pour les mots mis en valeur,
 * encadrés de narration pour les petites étiquettes, encre + ombres dures sur les
 * boutons et les cartes. Chargée EN DERNIER par includes/header-universel.php ;
 * les pages gardent leur structure, seule la « peau » change.
 * Désactivable pour comparer : ajouter ?da=classic à l'URL.
 *
 * Portée : tout le contenu, sauf le menu du site (nav), le pied de page (.lt-site-footer, hors
 * bande d'appel) et le haut de l'accueil (.ltx-hero, déjà stylé). Toutes les pages n'ont pas
 * de <main> (annonce.php, espace membre) et les hauts de page sont des <header> : d'où le
 * filtre :not(:is(nav, .lt26-nav__overlay, .lt-site-footer, .ltx-hero) *).
 * Les familles de classes sont ciblées par motif (…-btn--primary, …-kicker, …-card…).
 * Préfixe :is(html, #lt-cx#lt-cx) : spécificité de deux identifiants (aucun élément ne porte
 * cet id) pour passer devant les règles « html body #titre { … !important } » des pages.
 */

@font-face {
  font-family: "Bangers";
  src: url("/fonts/bangers-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Jetons (clair par défaut, sombre en surcharge) ---------- */
:root {
  --cx-gold: #dcc394;
  --cx-ink: #17212a;
  --cx-line: #17202a;              /* encre des contours sur fond doré */
  --cx-pop: #17202a;               /* ombre dure des éléments dorés */
  --cx-title-shadow: #dcc394;      /* ombre décalée des titres */
  --cx-card-line: rgba(23, 32, 42, .82);
  --cx-card-pop: #17202a;
  --cx-soft-line: rgba(23, 32, 42, .55);
  --cx-dots: rgba(23, 32, 42, .1);
}
[data-theme="dark"] {
  --cx-line: #05090d;
  --cx-pop: #f3f0e9;
  --cx-title-shadow: #8c6c36;
  --cx-card-line: rgba(220, 195, 148, .5);
  --cx-card-pop: rgba(220, 195, 148, .38);
  --cx-soft-line: rgba(220, 195, 148, .45);
  --cx-dots: rgba(220, 195, 148, .12);
}

/* ---------- Titres : lettrage BD ---------- */
:is(html, #lt-cx#lt-cx) body h1:not(:is(nav, .lt26-nav__overlay, .lt-site-footer, .ltx-hero) *) {
  font-family: Bangers, "Poppins", Inter, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
  letter-spacing: .015em !important;
  line-height: 1.02 !important;
  text-transform: none !important;
  text-shadow: .055em .055em 0 var(--cx-title-shadow);
}
:is(html, #lt-cx#lt-cx) body :is(h2:not(:is(nav, .lt26-nav__overlay, .lt-site-footer, .ltx-hero) *), .lt-site-footer__cta h2) {
  font-family: Bangers, "Poppins", Inter, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
  letter-spacing: .02em !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

/* Mot mis en valeur dans un grand titre : cartouche doré tramé, penché */
:is(html, #lt-cx#lt-cx) body h1:not(:is(nav, .lt26-nav__overlay, .lt-site-footer, .ltx-hero) *) em {
  display: inline-block;
  margin: .06em .04em 0 !important;
  padding: .06em .22em .02em !important;
  color: var(--cx-ink) !important;
  -webkit-text-fill-color: var(--cx-ink) !important;
  font-style: normal !important;
  text-shadow: none !important;
  background: radial-gradient(circle, rgba(23, 33, 42, .2) 1px, transparent 1.5px) 0 0 / 6px 6px, var(--cx-gold) !important;
  border: 3px solid var(--cx-line) !important;
  border-radius: 3px !important;
  box-shadow: 5px 5px 0 var(--cx-pop) !important;
  transform: rotate(-2deg);
  animation: cx-pop 480ms cubic-bezier(.2, .9, .3, 1.35) 150ms both;
}
@keyframes cx-pop {
  from { opacity: 0; transform: rotate(-2deg) scale(.55); }
  to { opacity: 1; transform: rotate(-2deg) scale(1); }
}
/* Dans les titres de section : gros soulignement doré (un surlignage traverserait les capitales BD) */
:is(html, #lt-cx#lt-cx) body :is(h2:not(:is(nav, .lt26-nav__overlay, .lt-site-footer, .ltx-hero) *), .lt-site-footer__cta h2) em {
  font-style: normal !important;
  background: none !important;
  text-decoration: underline !important;
  text-decoration-color: #dcc394 !important;
  text-decoration-thickness: .14em !important;
  text-underline-offset: .12em !important;
  text-decoration-skip-ink: none;
}

/* ---------- Petites étiquettes (kicker / eyebrow) : encadré de narration ---------- */
:is(html, #lt-cx#lt-cx) body :is([class*="-kicker"]:not([class*="kicker__"]), [class*="-eyebrow"]:not([class*="eyebrow__"]), [class*="__eyebrow"], .dsr-section-label):not(:is(nav, .lt26-nav__overlay, .lt-site-footer, .ltx-hero) *),
:is(html, #lt-cx#lt-cx) body .lt-site-footer__cta .lt-site-footer__eyebrow {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100%;
  padding: 4px 10px !important;
  color: var(--cx-ink) !important;
  -webkit-text-fill-color: var(--cx-ink) !important;
  background: var(--cx-gold) !important;
  border: 2px solid var(--cx-line) !important;
  border-radius: 2px !important;
  box-shadow: 3px 3px 0 var(--cx-pop) !important;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  transform: rotate(-1deg);
}

/* ---------- Boutons : encre + ombre dure qui s'enfonce au clic (pied de page compris) ---------- */
:is(html, #lt-cx#lt-cx) body :is([class*="btn--primary"], [class*="btn-primary"], [class*="btn--accent"], [class*="btn--gold"], [class*="btn--champ"], [class*="btn-acq"], [class*="btn--premium"], [class*="__button--primary"]):not(:is(nav, .lt26-nav__overlay, .ltx-hero) *) {
  border: 2.5px solid var(--cx-line) !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0 var(--cx-pop) !important;
  font-weight: 700 !important;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 180ms ease !important;
}
:is(html, #lt-cx#lt-cx) body :is([class*="btn--ghost"], [class*="btn-ghost"], [class*="btn--secondary"], [class*="btn-secondary"], [class*="btn--outline"]):not(:is(nav, .lt26-nav__overlay, .ltx-hero) *) {
  border: 2px solid var(--cx-soft-line) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--cx-card-pop) !important;
  font-weight: 700 !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
:is(html, #lt-cx#lt-cx) body :is([class*="btn--primary"], [class*="btn-primary"], [class*="btn--accent"], [class*="btn--gold"], [class*="btn--champ"], [class*="btn-acq"], [class*="btn--premium"], [class*="__button--primary"], [class*="btn--ghost"], [class*="btn-ghost"], [class*="btn--secondary"], [class*="btn-secondary"], [class*="btn--outline"]):not(:is(nav, .lt26-nav__overlay, .ltx-hero) *):active {
  transform: translate(3px, 3px) !important;
  box-shadow: 1px 1px 0 var(--cx-pop) !important;
}

/* ---------- Cartes : trait d'encre, ombre dure ---------- */
:is(html, #lt-cx#lt-cx) body :is(.lt-card, .listing-card-acheter, .lt26-fcard, .faq-item, .ltx-card__media, .ltx-search__panel, .ltx-cta__frame, [class$="-card"], [class*="-card "], [class$="__card"], [class*="__card "]):not(:is(nav, .lt26-nav__overlay, .lt-site-footer, .ltx-hero) *) {
  border: 2px solid var(--cx-card-line) !important;
  border-radius: 6px !important;
  box-shadow: 4px 4px 0 var(--cx-card-pop) !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

/* ---------- Prix : chiffres en lettrage BD ---------- */
:is(html, #lt-cx#lt-cx) body :is([class$="-price"], [class*="-price "], [class$="__price"], [class*="__price "], [class*="price-value"], [class*="price__value"], [class*="price-amount"]):not(:is(nav, .lt26-nav__overlay, .lt-site-footer) *) {
  font-family: Bangers, "Poppins", Inter, system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .03em !important;
}

/* ---------- Puces de filtre : contour encré, état actif doré ---------- */
:is(html, #lt-cx#lt-cx) body :is([class$="-chip"], [class*="-chip "], .lt-chip):not(:is(nav, .lt26-nav__overlay, .lt-site-footer) *) {
  border: 1.5px solid var(--cx-soft-line) !important;
  border-radius: 4px !important;
}
:is(html, #lt-cx#lt-cx) body :is([class$="-chip"], [class*="-chip "], .lt-chip):not(:is(nav, .lt26-nav__overlay, .lt-site-footer) *):is(.is-active, .active, .is-on, .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], :has(input:checked)) {
  color: var(--cx-ink) !important;
  background: var(--cx-gold) !important;
  border-color: var(--cx-line) !important;
  box-shadow: 2px 2px 0 var(--cx-pop) !important;
}

/* ---------- Pastilles (catégorie, statut) : contour encré ---------- */
:is(html, #lt-cx#lt-cx) body :is([class$="-badge"], [class*="-badge "], [class$="__badge"]):not(:is(nav, .lt26-nav__overlay, .lt-site-footer) *) {
  border: 1.5px solid var(--cx-line) !important;
  box-shadow: 2px 2px 0 var(--cx-card-pop) !important;
}

/* ---------- Champs : focus en ombre dure dorée ---------- */
:is(html, #lt-cx#lt-cx) body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):not(:is(nav, .lt26-nav__overlay, .lt-site-footer) *):focus-visible {
  box-shadow: 3px 3px 0 var(--cx-gold) !important;
}

/* ---------- Bande d'appel du pied de page : trame de points ---------- */
:is(html, #lt-cx#lt-cx) body .lt-site-footer__cta {
  background-image: radial-gradient(circle, var(--cx-dots) 1.3px, transparent 1.8px) !important;
  background-size: 12px 12px !important;
}

/* ---------- Survols (souris seulement) ---------- */
@media (hover: hover) {
  :is(html, #lt-cx#lt-cx) body :is([class*="btn--primary"], [class*="btn-primary"], [class*="btn--accent"], [class*="btn--gold"], [class*="btn--champ"], [class*="btn-acq"], [class*="btn--premium"], [class*="__button--primary"]):not(:is(nav, .lt26-nav__overlay, .ltx-hero) *):hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--cx-pop) !important;
  }
  :is(html, #lt-cx#lt-cx) body :is(.lt-card, .listing-card-acheter, .lt26-fcard, [class$="-card"], [class*="-card "], [class$="__card"], [class*="__card "]):not(:is(nav, .lt26-nav__overlay, .lt-site-footer, .ltx-hero) *):is(a, :has(> a)):hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--cx-card-pop) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(html, #lt-cx#lt-cx) body h1 em { animation: none !important; }
}