/* ==========================================================================
   TFN DESIGN PACK — tfn.css
   Skin sombre TFN pour le thème MoreNews (parent) + MoreMag (child).
   Chargé APRÈS le CSS du thème (priorité 99) — !important utilisé de façon
   ciblée pour battre morenews.min.css et les styles inline de la démo.
   Structure du fichier :
     01. Design tokens (:root)
     02. Base / typographie / fonds sombres forcés (2 modes)
     03. Topbar TFN (#tfn-topbar)
     04. Ticker boursier (#tfn-ticker)
     05. Header du thème (masthead / logo / promo)
     06. Navigation principale (+ neutralisation du sticky du thème)
     07. Sujets chauds (#tfn-hot-topics)
     08. Sections de la home (titres de sections, bannière, marquee, slick)
     09. Cartes d'articles (.read-single & co)
     10. Badges catégorie (.morenews-categories)
     11. Sidebar (newsletter / app / disclaimer / widgets)
     12. Footer
     13. Single post — corps d'article sur fond BLANC
     14. Divers (recherche, pagination, off-canvas, scroll-up)
     15. Responsive (1024 / 768 / 480)
     16. Accessibilité & reduced motion
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Fonds */
  --tfn-bg: #0a0a0a;
  --tfn-bg-header: rgba(10, 10, 10, 0.95);
  --tfn-card: #111111;
  --tfn-card-2: #161616;
  --tfn-border: #1f1f1f;
  --tfn-border-2: #222222;

  /* Accents */
  --tfn-red: #c1121f;
  --tfn-red-hover: #dc2626;
  --tfn-up: #22c55e;
  --tfn-down: #ef4444;

  /* Textes */
  --tfn-text: #ffffff;
  --tfn-text-2: #a3a3a3;
  --tfn-meta: #737373;

  /* Polices (chargées par le plugin via Google Fonts) */
  --tfn-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --tfn-font-title: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --tfn-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Dimensions des barres sticky */
  --tfn-topbar-h: 44px;
  --tfn-ticker-h: 36px;
  --tfn-sticky-offset: 80px; /* topbar + ticker */

  /* Marquee */
  --tfn-ticker-duration: 45s;
}


/* ==========================================================================
   02. BASE / TYPOGRAPHIE / FONDS SOMBRES FORCÉS
   Le rendu doit être correct dans les DEUX modes du thème
   (body.aft-default-mode ET body.aft-dark-mode) : on force le sombre.
   ========================================================================== */

body.wp-theme-morenews {
  background: var(--tfn-bg) !important;
  color: var(--tfn-text-2);
  font-family: var(--tfn-font-body);
  font-size: 15px;
  line-height: 1.6;
}

/* Conteneurs principaux : fond transparent sur le squelette,
   le sombre vient du body (home + archives + recherche + 404). */
body.wp-theme-morenews #page.site,
body.wp-theme-morenews #content.container-wrapper,
body.wp-theme-morenews #primary.content-area,
body.wp-theme-morenews main.site-main,
body.wp-theme-morenews .section-block-upper,
body.wp-theme-morenews .aft-archive-wrapper,
body.wp-theme-morenews .af-breadcrumbs {
  background: transparent !important;
  box-shadow: none !important;
}

/* Widgets de contenu : pas de "carte grise" du dark mode (#252525) */
body.aft-dark-mode .morenews-widget,
body.aft-default-mode .morenews-widget,
body.wp-theme-morenews .morenews-customizer,
body.wp-theme-morenews .aft-main-banner-section.morenews-customizer {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Titres : Roboto Condensed 900, uppercase, blanc, interlignage serré */
body.wp-theme-morenews h1,
body.wp-theme-morenews h2,
body.wp-theme-morenews h3,
body.wp-theme-morenews h4,
body.wp-theme-morenews h5,
body.wp-theme-morenews h6 {
  font-family: var(--tfn-font-title);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--tfn-text);
}

/* Liens par défaut sur fond sombre */
body.wp-theme-morenews a {
  transition: color .15s linear, background-color .15s linear, border-color .15s linear;
}
body.aft-dark-mode a,
body.aft-default-mode a {
  color: var(--tfn-text);
}
body.wp-theme-morenews a:hover {
  color: var(--tfn-red-hover);
}

/* Sélection de texte */
body.wp-theme-morenews ::selection {
  background: var(--tfn-red);
  color: #fff;
}

/* Champs de formulaire sur fond sombre (hors article single) */
body.wp-theme-morenews:not(.single) input[type="text"],
body.wp-theme-morenews:not(.single) input[type="email"],
body.wp-theme-morenews:not(.single) input[type="search"],
body.wp-theme-morenews:not(.single) input[type="url"],
body.wp-theme-morenews:not(.single) textarea,
body.wp-theme-morenews:not(.single) select {
  background: #0d0d0d !important;
  border: 1px solid var(--tfn-border-2) !important;
  color: var(--tfn-text) !important;
  font-family: var(--tfn-font-body);
  border-radius: 2px;
}
body.wp-theme-morenews:not(.single) input::placeholder,
body.wp-theme-morenews:not(.single) textarea::placeholder {
  color: var(--tfn-meta) !important;
  opacity: 1;
}

/* Boutons génériques → rouge TFN */
body.wp-theme-morenews input[type="submit"],
body.wp-theme-morenews button[type="submit"],
body.wp-theme-morenews a.button,
body.wp-theme-morenews .wp-block-button__link {
  background-color: var(--tfn-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2px;
  font-family: var(--tfn-font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color .15s linear;
}
body.wp-theme-morenews input[type="submit"]:hover,
body.wp-theme-morenews button[type="submit"]:hover,
body.wp-theme-morenews a.button:hover,
body.wp-theme-morenews .wp-block-button__link:hover {
  background-color: var(--tfn-red-hover) !important;
}


/* ==========================================================================
   03. TOPBAR TFN (#tfn-topbar) — injecté par le plugin en 1er enfant de body
   ========================================================================== */

#tfn-topbar {
  position: sticky;
  top: 0;
  z-index: 1002;
  height: 44px; /* = --tfn-topbar-h */
  background: var(--tfn-bg-header);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--tfn-border);
  font-family: var(--tfn-font-mono);
}

.tfn-topbar-inner {
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Pastille EN DIRECT */
.tfn-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tfn-text);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.tfn-live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--tfn-red);
  animation: tfn-blink 1.2s infinite;
}
@keyframes tfn-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* Horloge EST */
.tfn-clock {
  color: var(--tfn-meta);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
#tfn-clock-time {
  color: var(--tfn-text);
  font-weight: 700;
}

.tfn-topbar-spacer {
  flex: 1 1 auto;
}

/* Bouton ADMIN */
a.tfn-admin-btn {
  display: inline-block;
  background: var(--tfn-red);
  color: #fff !important;
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 2px;
  text-decoration: none;
}
a.tfn-admin-btn:hover,
a.tfn-admin-btn:focus {
  background: var(--tfn-red-hover);
  color: #fff !important;
}

/* Barre d'admin WordPress connectée : décaler les barres sticky */
body.admin-bar #tfn-topbar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #tfn-topbar { top: 46px; }
}


/* ==========================================================================
   04. TICKER BOURSIER (#tfn-ticker) — marquee CSS, données via AJAX
   ========================================================================== */

#tfn-ticker {
  position: sticky;
  top: 44px; /* = --tfn-topbar-h */
  z-index: 1001;
  height: 36px; /* = --tfn-ticker-h */
  background: #0d0d0d;
  border-bottom: 1px solid var(--tfn-border);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--tfn-font-mono);
}
body.admin-bar #tfn-ticker { top: 76px; }
@media screen and (max-width: 782px) {
  body.admin-bar #tfn-ticker { top: 90px; }
}

/* Piste : le JS duplique la série d'items exactement 2× — translateX(-50%)
   boucle donc sans couture. */
.tfn-ticker-track {
  display: inline-flex;
  align-items: center;
  height: 36px;
  animation: tfn-scroll var(--tfn-ticker-duration) linear infinite;
  will-change: transform;
}
@keyframes tfn-scroll {
  to { transform: translateX(-50%); }
}
#tfn-ticker:hover .tfn-ticker-track {
  animation-play-state: paused;
}

/* Un item = NOM  PRIX  ▲ x.xx% */
.tfn-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  font-size: 12px;
  line-height: 36px;
}
.tfn-tk-name {
  color: var(--tfn-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tfn-tk-price {
  color: var(--tfn-text);
  font-weight: 700;
}
.tfn-tk-chg {
  font-weight: 700;
}
.tfn-tk-chg.up   { color: var(--tfn-up); }
.tfn-tk-chg.down { color: var(--tfn-down); }


/* ==========================================================================
   05. HEADER DU THÈME
   ========================================================================== */

/* Le top-header du thème (date + réseaux sociaux) est REMPLACÉ par #tfn-topbar */
.morenews-header .top-header {
  display: none !important;
}

/* Bannière promo de la démo : masquée */
#masthead .header-promotion {
  display: none !important;
}

/* Middle header : neutraliser l'image de fond (style inline) → noir TFN */
#masthead .af-middle-header,
#masthead .af-middle-header.af-header-image.data-bg {
  background-image: none !important;
  background-color: var(--tfn-bg) !important;
  border-bottom: 1px solid var(--tfn-border);
}
[class*="header-layout-side"] .af-middle-header {
  padding: 18px 0 !important;
}

/* Logo / titre du site */
#masthead .site-branding .site-title,
#masthead .site-branding .site-title a {
  font-family: var(--tfn-font-title);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tfn-text) !important;
  font-size: 40px;
  line-height: 1;
}
#masthead .site-branding .site-title a:hover {
  color: var(--tfn-text) !important;
  opacity: 0.85;
}
#masthead .site-branding .site-description {
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tfn-meta);
}
#masthead .custom-logo {
  border-radius: 50%;
}

/* Lien "Upgrade to Pro" de la démo : masqué */
#main-navigation-bar .custom-menu-link {
  display: none !important;
}


/* ==========================================================================
   06. NAVIGATION PRINCIPALE
   ========================================================================== */

div#main-navigation-bar,
#main-navigation-bar.af-bottom-header {
  background: var(--tfn-bg) !important;
  border-bottom: 1px solid var(--tfn-border);
}

/* Conteneur en flex pour accueillir #tfn-hot-topics (déplacé par le JS
   à la fin de #main-navigation-bar .container-wrapper) */
#main-navigation-bar .container-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#main-navigation-bar .container-wrapper > .bottom-bar-flex {
  flex: 1 1 auto;
  min-width: 0;
}

/* Liens du menu : condensé, uppercase, blanc */
#main-navigation-bar .main-navigation .menu > li > a,
#main-navigation-bar .main-navigation .menu-desktop > .menu > li > a,
#main-navigation-bar .main-navigation .menu-desktop > li > a,
#main-navigation-bar #primary-menu > li > a {
  font-family: var(--tfn-font-title);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tfn-text) !important;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 9px;
  padding-right: 9px;
  white-space: nowrap;
}

/* TOUTES les rubriques sur UNE SEULE ligne (demande du 2026-08-02).
   Avec neuf entrées — Accueil, Alerte Info, Donald Trump, USA, Europe,
   Conflits, Économie, Technologie, Vidéos — les réglages d'origine (14 px,
   12 px de marge, 0.06em d'interlettrage) demandaient ~900 px et Technologie
   et Vidéos retombaient à la ligne. On interdit le retour à la ligne et on
   resserre ; les « sujets chauds » voisins savent déjà rétrécir
   (flex: 0 1 auto + min-width: 0), ils cèdent donc la place en premier. */
#main-navigation-bar .menu.main-menu.menu-desktop,
#main-navigation-bar #primary-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
#main-navigation-bar #primary-menu > li {
  flex: 0 0 auto;
}
/* Sous 1300 px, on resserre encore d'un cran plutôt que de casser la ligne. */
@media (min-width: 1025px) and (max-width: 1300px) {
  #main-navigation-bar .main-navigation .menu > li > a,
  #main-navigation-bar #primary-menu > li > a {
    font-size: 12px;
    letter-spacing: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
  #main-navigation-bar #tfn-hot-topics {
    display: none !important;
  }
}
#main-navigation-bar .main-navigation .menu > li > a:hover,
#main-navigation-bar #primary-menu > li > a:hover {
  color: var(--tfn-red-hover) !important;
}

/* Item actif : soulignement rouge */
#main-navigation-bar .main-navigation .menu > li.current-menu-item > a,
#main-navigation-bar .main-navigation .menu > li.current_page_item > a {
  color: var(--tfn-text) !important;
  box-shadow: inset 0 -2px 0 0 var(--tfn-red);
}

/* Sous-menus */
#main-navigation-bar .main-navigation .menu .sub-menu {
  background: var(--tfn-card) !important;
  border: 1px solid var(--tfn-border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}
#main-navigation-bar .main-navigation .menu .sub-menu li a {
  color: var(--tfn-text-2) !important;
  font-family: var(--tfn-font-body);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
#main-navigation-bar .main-navigation .menu .sub-menu li a:hover {
  color: var(--tfn-text) !important;
  background: var(--tfn-card-2) !important;
}

/* --- Neutralisation du sticky du thème (body.aft-sticky-header) ---------
   Le thème passe #main-navigation-bar en position:fixed (classe JS
   .aft-sticky-navigation, top:-50px + animation fadeInDown → top:0).
   On le repositionne SOUS nos deux barres sticky (44 + 36 = 80px)
   et on coupe son animation. z-index sous le ticker (1001) et le topbar (1002). */
#main-navigation-bar.aft-sticky-navigation {
  top: var(--tfn-sticky-offset) !important;
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
  background: var(--tfn-bg-header) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.admin-bar #main-navigation-bar.aft-sticky-navigation {
  top: calc(var(--tfn-sticky-offset) + 32px) !important;
  animation: none !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar #main-navigation-bar.aft-sticky-navigation {
    top: calc(var(--tfn-sticky-offset) + 46px) !important;
  }
}


/* ==========================================================================
   07. SUJETS CHAUDS (#tfn-hot-topics)
   ========================================================================== */

/* [hidden] doit gagner : le JS enlève l'attribut après déplacement dans la nav */
#tfn-hot-topics[hidden] {
  display: none !important;
}
#tfn-hot-topics {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-left: 16px;
  border-left: 1px solid var(--tfn-border);
  font-family: var(--tfn-font-mono);
  white-space: nowrap;
}
#tfn-hot-topics::-webkit-scrollbar {
  display: none;
}
.tfn-hot-label {
  color: var(--tfn-meta);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}
a.tfn-hot-tag {
  flex: 0 0 auto;
  display: inline-block;
  background: var(--tfn-card-2);
  border: 1px solid var(--tfn-border-2);
  color: var(--tfn-text) !important;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 2px;
  text-decoration: none;
}
a.tfn-hot-tag:hover,
a.tfn-hot-tag:focus {
  border-color: var(--tfn-red);
  color: var(--tfn-red-hover) !important;
}


/* ==========================================================================
   08. SECTIONS DE LA HOME
   ========================================================================== */

/* ---- Titres de sections (.widget-title) : sobres, condensés, accent rouge */
.af-title-subtitle-wrap {
  border-bottom: 1px solid var(--tfn-border);
  padding-bottom: 10px;
  margin-bottom: 24px;
}
.widget-title,
.widget-title.header-after1 {
  display: block;
  margin: 0;
}
.widget-title .heading-line {
  background: transparent !important;
  color: var(--tfn-text) !important;
  font-family: var(--tfn-font-title);
  font-weight: 900 !important;
  font-size: 26px !important;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.05;
  padding: 0 0 0 14px !important;
  border-left: 4px solid var(--tfn-red);
}
/* Lignes décoratives du thème : supprimées */
.widget-title .heading-line::before,
.widget-title .heading-line::after,
.widget-title .heading-line-before,
.widget-title .heading-line-after {
  display: none !important;
  background: transparent !important;
}

/* ---- Bannière principale (layout 5) --------------------------------- */
.aft-main-banner-section,
.aft-main-banner-section.bg-fixed {
  background: var(--tfn-bg) !important;
  background-image: none !important;
}

/* Héro : titre condensé sur l'image.
   Taille FLUIDE, pas fixe : une dépêche traduite en français est ~20 % plus
   longue que l'anglais d'origine, et un titre de 6 lignes en taille fixe
   recouvrait toute la photo. clamp() suit la largeur réelle du bloc. */
.aft-main-banner-wrapper .aft-slider-part .grid-design-texts-over-image .read-title h3,
.aft-main-banner-wrapper .aft-slider-part .grid-design-texts-over-image .read-title h3 a {
  font-family: var(--tfn-font-title);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 46px);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--tfn-text) !important;
}
/* Garde-fou : au-delà de 4 lignes on coupe proprement. L'image doit rester
   visible ; le titre entier s'affiche de toute façon sur la page de l'article. */
.aft-main-banner-wrapper .aft-slider-part .grid-design-texts-over-image .read-title h3 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Assombrir le bas de l'image du héro pour la lisibilité du titre */
.grid-design-texts-over-image .read-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.35) 55%, rgba(10, 10, 10, 0.05) 100%);
  pointer-events: none;
}
.grid-design-texts-over-image .read-details {
  z-index: 2;
}

/* ---- Bandeau "Breaking news" (marquee du thème) ---------------------- */
.banner-exclusive-posts-wrapper .exclusive-posts,
.banner-exclusive-posts-wrapper .exclusive-posts:before,
.exclusive-slides::before,
.exclusive-slides::after {
  background-color: var(--tfn-card) !important;
}
.exclusive-posts .exclusive-now,
.exclusive-now.primary-color {
  background-color: var(--tfn-red) !important;
}
.exclusive-posts .exclusive-now span {
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.aft-box-ripple .box1, .aft-box-ripple .box2,
.aft-box-ripple .box3, .aft-box-ripple .box4 {
  background-color: rgba(255, 255, 255, 0.85) !important;
}
.exclusive-posts .marquee a {
  color: var(--tfn-text) !important;
  font-family: var(--tfn-font-body);
  font-size: 13px;
}
.exclusive-posts .marquee a:hover {
  color: var(--tfn-red-hover) !important;
}
.exclusive-posts .marquee a span.circle-marq {
  background-color: var(--tfn-card-2) !important;
  border: 1px solid var(--tfn-border-2);
}

/* ---- Carrousels slick ------------------------------------------------ */
.slick-dots li button:before {
  color: var(--tfn-meta) !important;
  opacity: 0.6;
}
.slick-dots li.slick-active button:before {
  color: var(--tfn-red) !important;
  opacity: 1;
}
.slick-arrow,
.af-slick-navcontrols button,
.af-slick-navcontrols .slick-prev,
.af-slick-navcontrols .slick-next {
  background: var(--tfn-card-2) !important;
  border: 1px solid var(--tfn-border-2) !important;
  color: var(--tfn-text) !important;
}
.slick-arrow:hover,
.af-slick-navcontrols button:hover {
  background: var(--tfn-red) !important;
  border-color: var(--tfn-red) !important;
  color: #fff !important;
}

/* ---- Listes populaires / taxonomies ---------------------------------- */
body.wp-theme-morenews .aft-popular-taxonomies-lists {
  background-color: var(--tfn-card) !important;
  border: 1px solid var(--tfn-border);
}


/* ==========================================================================
   09. CARTES D'ARTICLES
   ========================================================================== */

/* Carte "boxée" (grilles) */
.read-single.color-pad {
  background: var(--tfn-card) !important;
  border: 1px solid var(--tfn-border);
  border-radius: 2px;
  overflow: hidden;
}
/* Variante liste (vignette à gauche) : pas de boîte, séparateur fin */
.list-part .read-single.color-pad,
.af-double-column.list-style .read-single.color-pad {
  background: transparent !important;
  border: none;
  border-bottom: 1px solid var(--tfn-border);
  border-radius: 0;
  padding-bottom: 16px;
}
/* Carte texte-sur-image : la boîte est l'image elle-même */
.grid-design-texts-over-image.read-single.color-pad {
  background: var(--tfn-card) !important;
  border: 1px solid var(--tfn-border);
}

.read-details,
.read-details.color-tp-pad {
  background: transparent !important;
}

/* Titres de cartes : condensé, uppercase, blanc */
.read-title h3,
.read-title h3 a {
  font-family: var(--tfn-font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--tfn-text) !important;
  word-break: normal;
  overflow-wrap: anywhere;
}
.read-title h3 {
  font-size: 20px;
}
.read-title h3 a:hover {
  color: var(--tfn-red-hover) !important;
}
/* Petites cartes de liste */
.list-part .read-title h3,
.af-double-column.list-style .read-title h3 {
  font-size: 16px;
}

/* Extrait */
.post-description {
  color: var(--tfn-text-2);
  font-family: var(--tfn-font-body);
  font-size: 14px;
  line-height: 1.6;
}

/* Méta (date, auteur) : mono, gris, petites majuscules */
.post-item-metadata,
.post-item-metadata .item-metadata,
.item-metadata.posts-date,
.item-metadata.posts-author,
.entry-meta .item-metadata {
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tfn-meta) !important;
}
.post-item-metadata .item-metadata i {
  color: var(--tfn-meta);
}
body.wp-theme-morenews .posts-author :is(a, a:visited),
.post-item-metadata a {
  color: var(--tfn-text-2) !important;
}
.post-item-metadata a:hover {
  color: var(--tfn-red-hover) !important;
}

/* Lien "Lire la suite" : mono souligné, blanc → rouge */
.aft-readmore-wrapper .aft-readmore,
a.aft-readmore {
  font-family: var(--tfn-font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tfn-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent !important;
  border: none !important;
  padding: 0;
}
.aft-readmore-wrapper .aft-readmore:hover,
a.aft-readmore:hover {
  color: var(--tfn-red-hover) !important;
}

/* Pictogramme format (play…) : pastille rouge.
   La couleur du thème est portée par le <i> interne (.af-post-format i,
   background #1665CF ou accent démo), pas par le wrapper. */
.af-post-format,
.af-post-format.em-post-format,
.af-post-format i,
.read-img .af-post-format i {
  background-color: var(--tfn-red) !important;
  color: #fff !important;
  border-color: var(--tfn-red) !important;
}

/* Numéros "trending" */
.trending-no {
  background: var(--tfn-red) !important;
  color: #fff !important;
  font-family: var(--tfn-font-mono);
  font-weight: 700;
}


/* ==========================================================================
   10. BADGES CATÉGORIE (.morenews-categories)
   Toutes les couleurs de catégories du thème → rouge TFN unique.
   ========================================================================== */

.read-categories .cat-links .morenews-categories,
a.morenews-categories,
a.morenews-categories.category-color-1,
a.morenews-categories.category-color-2,
a.morenews-categories.category-color-3,
a.morenews-categories.category-color-4,
a.morenews-categories.category-color-5,
a.morenews-categories.category-color-6,
a.morenews-categories.category-color-7 {
  background-color: var(--tfn-red) !important;
  color: #fff !important;
  font-family: var(--tfn-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 2px;
}
a.morenews-categories:hover {
  background-color: var(--tfn-red-hover) !important;
  color: #fff !important;
}
/* Version "texte seul" hors image (certaines listes) : rester rouge */
.read-categories:not(.categories-inside-image) a.morenews-categories {
  background-color: var(--tfn-red) !important;
  color: #fff !important;
}


/* ==========================================================================
   11. SIDEBAR (#secondary)
   ========================================================================== */

#secondary.sidebar-area .widget,
#secondary.sidebar-area .morenews-widget {
  background: var(--tfn-card) !important;
  border: 1px solid var(--tfn-border);
  border-radius: 2px;
  padding: 20px;
  margin-bottom: 24px;
}

/* Titres de widgets sidebar : label mono rouge, petit */
#secondary .af-title-subtitle-wrap {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 12px;
}
#secondary .widget-title .heading-line,
#secondary .widget-title,
#secondary .widget-title.widget-title-1 {
  font-family: var(--tfn-font-mono) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tfn-red) !important;
  border-left: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Listes (articles récents…) */
#secondary .widget ul li {
  border-bottom: 1px solid var(--tfn-border);
  padding: 8px 0;
}
#secondary .widget ul li a {
  color: var(--tfn-text) !important;
  font-family: var(--tfn-font-title);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  line-height: 1.2;
}
#secondary .widget ul li a:hover {
  color: var(--tfn-red-hover) !important;
}

/* ---- Newsletter Hostinger Reach -------------------------------------- */
[class*="hostinger-reach"] input[type="email"],
.hostinger-reach-subscription input[type="email"],
body.wp-theme-morenews .inner-suscribe input {
  width: 100%;
  background: #0d0d0d !important;
  border: 1px solid var(--tfn-border-2) !important;
  color: var(--tfn-text) !important;
  font-family: var(--tfn-font-body);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 2px;
  margin-bottom: 10px;
}
[class*="hostinger-reach"] input[type="email"]::placeholder {
  color: var(--tfn-meta) !important;
}
[class*="hostinger-reach"] button,
[class*="hostinger-reach"] input[type="submit"],
.hostinger-reach-subscription button {
  width: 100%;
  display: block;
  background: var(--tfn-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2px;
  font-family: var(--tfn-font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 16px;
  cursor: pointer;
}
[class*="hostinger-reach"] button:hover,
[class*="hostinger-reach"] input[type="submit"]:hover {
  background: var(--tfn-red-hover) !important;
}

/* ---- Bloc app mobile (snippet HTML personnalisé fourni dans
        INSTALLATION.md — classes .tfn-app-block / boutons stores) -------- */
.tfn-app-block .tfn-app-label {
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tfn-up);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.tfn-app-block .tfn-app-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tfn-up);
}
.tfn-app-block h3,
.tfn-app-block .tfn-app-title {
  font-family: var(--tfn-font-title);
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--tfn-text);
  line-height: 1.1;
  margin: 0 0 10px;
}
.tfn-app-block p {
  color: var(--tfn-text-2);
  font-size: 13px;
  line-height: 1.6;
}
.tfn-app-buttons {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
a.tfn-app-btn {
  flex: 1 1 50%;
  display: inline-block;
  text-align: center;
  background: transparent !important;
  border: 1px solid var(--tfn-border-2);
  color: var(--tfn-text) !important;
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 11px 8px;
  border-radius: 2px;
  text-decoration: none;
}
a.tfn-app-btn:hover {
  border-color: var(--tfn-red);
  color: var(--tfn-red-hover) !important;
}

/* ---- Bloc disclaimer (snippet HTML personnalisé) ---------------------- */
.tfn-disclaimer {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--tfn-border-2) !important;
  border-radius: 0 !important;
  padding: 4px 0 4px 16px !important;
}
.tfn-disclaimer .tfn-disclaimer-label {
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tfn-text-2);
  display: block;
  margin-bottom: 8px;
}
.tfn-disclaimer p {
  font-family: var(--tfn-font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--tfn-meta);
}
.tfn-disclaimer strong {
  color: var(--tfn-text-2);
}

/* ---- Logo : petit rond à côté du titre du site ------------------------- */
.site-branding {
  display: flex !important;
  align-items: center;
  gap: 14px;
}
.site-branding .custom-logo-link {
  flex: 0 0 auto;
  line-height: 0;
}
.site-branding img.custom-logo {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--tfn-border-2);
}

/* ---- Widget à onglets (Editor's Picks / Trending…) --------------------- */
.aft-posts-tabs-panel .nav-tabs > li > a {
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tfn-text-2) !important;
}
.aft-posts-tabs-panel .nav-tabs > li > a:hover {
  color: var(--tfn-text) !important;
}
.aft-posts-tabs-panel .nav-tabs > li > a.active {
  color: var(--tfn-text) !important;
  border-color: var(--tfn-red) !important;
}
.aft-posts-tabs-panel .nav-tabs > li > a.active::after,
.aft-posts-tabs-panel .nav-tabs > li > a.active .heading-line {
  background: var(--tfn-red) !important;
}

/* ---- Nuage de tags ---------------------------------------------------- */
.tagcloud a.tag-cloud-link,
#secondary .widget_tag_cloud .tagcloud a {
  font-size: 11px !important; /* neutralise les font-size inline en pt */
  font-family: var(--tfn-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--tfn-card-2) !important;
  border: 1px solid var(--tfn-border-2);
  color: var(--tfn-text) !important;
  padding: 5px 10px;
  border-radius: 2px;
  display: inline-block;
  margin: 0 6px 6px 0;
  line-height: 1;
}
.tagcloud a.tag-cloud-link:hover {
  border-color: var(--tfn-red);
  color: var(--tfn-red-hover) !important;
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

footer.site-footer,
footer.site-footer.data-bg,
footer.site-footer .primary-footer,
footer.site-footer .secondary-footer {
  background: var(--tfn-bg) !important;
  background-image: none !important;
}
footer.site-footer {
  border-top: 1px solid var(--tfn-border);
}

/* Widgets du footer : pas de boîte */
body.wp-theme-morenews .primary-footer .morenews-widget,
body.wp-theme-morenews footer.site-footer.data-bg .primary-footer .morenews-widget {
  background: transparent !important;
  box-shadow: none !important;
}

/* Titres de colonnes : JetBrains Mono uppercase */
footer.site-footer .widget-title,
footer.site-footer .widget-title .heading-line,
footer.site-footer .wp-block-heading {
  font-family: var(--tfn-font-mono) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tfn-text) !important;
  background: transparent !important;
  border-left: none !important;
  padding: 0 !important;
}
footer.site-footer .wp-block-heading::before,
footer.site-footer .wp-block-heading::after {
  display: none !important;
}

/* Liens : gris → blanc au survol */
footer.site-footer .primary-footer a,
footer.site-footer .widget ul li a,
footer.site-footer p {
  color: var(--tfn-text-2) !important;
  font-family: var(--tfn-font-body);
  font-size: 13px;
  line-height: 1.7;
}
footer.site-footer .primary-footer a:hover,
footer.site-footer .widget ul li a:hover {
  color: var(--tfn-text) !important;
}
footer.site-footer .widget ul li {
  border: none;
  padding: 4px 0;
}

/* Réseaux sociaux du footer */
footer .aft-small-social-menu ul li a {
  background-color: var(--tfn-card-2) !important;
  border: 1px solid var(--tfn-border-2);
  color: var(--tfn-text) !important;
}
footer .aft-small-social-menu ul li a:hover {
  background-color: var(--tfn-red) !important;
  border-color: var(--tfn-red);
  opacity: 1 !important;
}

/* Barre copyright : mono discret (uniquement le copyright, rien d'inventé) */
footer.site-footer .site-info {
  background: var(--tfn-bg) !important;
  border-top: 1px solid var(--tfn-border);
}
footer.site-footer .site-info,
footer.site-footer .site-info .col-1 {
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tfn-meta) !important;
}
footer.site-footer .site-info a {
  color: var(--tfn-text-2) !important;
}
footer.site-footer .site-info a:hover {
  color: var(--tfn-text) !important;
}


/* ==========================================================================
   13. SINGLE POST — corps d'article sur fond BLANC
   Le shell (topbar, ticker, header, nav, sidebar, footer) reste sombre.
   ========================================================================== */

body.single.wp-theme-morenews {
  background: var(--tfn-bg) !important;
}

/* La "feuille" article : blanche */
body.single .site-main article.post,
body.single .site-main .entry-content-wrap,
body.single main.site-main .entry-content-wrap {
  background: #ffffff !important;
  color: #262626;
  padding: 32px;
  border-radius: 2px;
}

/* Titre d'article : condensé, encre noire */
body.single .entry-content-wrap .entry-title,
body.single article.post .entry-title {
  font-family: var(--tfn-font-title);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.02;
  font-size: 42px;
  color: #0a0a0a !important;
}
body.single .entry-content-wrap .entry-title a {
  color: #0a0a0a !important;
}

/* Méta d'article sur fond blanc */
body.single .entry-content-wrap .post-item-metadata,
body.single .entry-content-wrap .item-metadata,
body.single .entry-content-wrap .posts-date,
body.single .entry-content-wrap .posts-author,
body.single .entry-content-wrap .posts-author a,
body.single .entry-content-wrap .cat-links + * {
  color: #737373 !important;
}

/* Corps de texte : Inter lisible */
body.single .entry-content {
  font-family: var(--tfn-font-body);
  font-size: 18px;
  line-height: 1.8;
  color: #262626 !important;
}
body.single .entry-content p,
body.single .entry-content li {
  color: #262626 !important;
}
body.single .entry-content :is(h2, h3, h4, h5, h6) {
  color: #0a0a0a !important;
  font-family: var(--tfn-font-title);
  font-weight: 900;
  text-transform: uppercase;
}

/* Liens et citations : accent rouge */
body.single .entry-content a,
body.single .entry-content a:visited {
  color: var(--tfn-red) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.single .entry-content a:hover {
  color: var(--tfn-red-hover) !important;
}
body.single .entry-content blockquote {
  border-left: 4px solid var(--tfn-red);
  background: #f5f5f5;
  padding: 16px 20px;
  margin: 24px 0;
  color: #404040 !important;
  font-style: italic;
}
body.single .entry-content blockquote p {
  color: #404040 !important;
}

/* Légendes, code */
body.single .entry-content figcaption {
  font-family: var(--tfn-font-mono);
  font-size: 12px;
  color: #737373 !important;
}
body.single .entry-content :is(code, pre) {
  background: #f5f5f5;
  color: #262626;
}

/* Zone commentaires : reste sombre, cohérente avec le shell */
body.single .comments-area,
body.aft-dark-mode .comments-area {
  background: transparent !important;
}


/* ==========================================================================
   14. DIVERS (recherche, pagination, off-canvas, scroll-up, breadcrumbs)
   ========================================================================== */

/* Icône + overlay de recherche */
#main-navigation-bar .search-icon,
#main-navigation-bar .search-icon i {
  color: var(--tfn-text) !important;
}
.af-search-form {
  background: var(--tfn-card) !important;
  border: 1px solid var(--tfn-border);
}
.af-search-form .search-field {
  background: #0d0d0d !important;
  color: var(--tfn-text) !important;
  border: 1px solid var(--tfn-border-2) !important;
}
.af-search-form .search-submit {
  background: var(--tfn-red) !important;
  color: #fff !important;
}
#af-live-search-results {
  background: var(--tfn-card) !important;
  border: 1px solid var(--tfn-border);
  color: var(--tfn-text-2);
}

/* Menu off-canvas / mobile */
#sidr,
#sidr.primary-background {
  background: var(--tfn-bg) !important;
  border-right: 1px solid var(--tfn-border);
}
#sidr a,
#sidr .sidr-class-menu-item a {
  color: var(--tfn-text) !important;
  font-family: var(--tfn-font-title);
  text-transform: uppercase;
  font-weight: 700;
}
#sidr a:hover {
  color: var(--tfn-red-hover) !important;
}
.offcanvas-menu .mbtn-top,
.offcanvas-menu .mbtn-mid,
.offcanvas-menu .mbtn-bot,
.main-navigation .ham,
.main-navigation .ham::before,
.main-navigation .ham::after {
  background-color: var(--tfn-text) !important;
}

/* Pagination */
body.wp-theme-morenews .pagination .page-numbers,
body.wp-theme-morenews .nav-links .page-numbers {
  background: var(--tfn-card-2) !important;
  border: 1px solid var(--tfn-border-2);
  color: var(--tfn-text) !important;
  font-family: var(--tfn-font-mono);
  font-size: 12px;
}
body.wp-theme-morenews .pagination .page-numbers.current,
body.wp-theme-morenews .pagination .page-numbers:hover {
  background: var(--tfn-red) !important;
  border-color: var(--tfn-red);
  color: #fff !important;
}

/* Bouton retour en haut */
#scroll-up,
#scroll-up.secondary-color {
  background: var(--tfn-red) !important;
  color: #fff !important;
  border-radius: 2px;
}
#scroll-up:hover {
  background: var(--tfn-red-hover) !important;
}

/* Fil d'Ariane / en-têtes d'archives */
body.wp-theme-morenews .af-breadcrumbs,
body.wp-theme-morenews .af-breadcrumbs a {
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tfn-meta) !important;
}
body.wp-theme-morenews .page-header .page-title {
  font-family: var(--tfn-font-title);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--tfn-text) !important;
  border-left: 4px solid var(--tfn-red);
  padding-left: 14px;
}


/* ==========================================================================
   15. RESPONSIVE — breakpoints 1024 / 768 / 480
   ========================================================================== */

/* Le héro n'a plus de taille par point de rupture : le clamp() de la règle
   de base (§ bannière principale) couvre toutes les largeurs. */

@media (max-width: 1024px) {
  /* Sujets chauds : masqués sous 1024px */
  #tfn-hot-topics {
    display: none !important;
  }

  /* Nav mobile : UNE SEULE ligne elle aussi (demande du 2026-08-02). Neuf
     rubriques ne tiennent pas dans la largeur d'un téléphone : plutôt que de
     les empiler sur trois lignes, la barre défile horizontalement d'un doigt.
     On garde le menu horizontal du thème visible car son menu off-canvas
     n'est pas alimenté sur cette configuration widgetisée. */
  #main-navigation-bar .menu.main-menu.menu-desktop,
  #main-navigation-bar #primary-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #main-navigation-bar .menu.main-menu.menu-desktop::-webkit-scrollbar,
  #main-navigation-bar #primary-menu::-webkit-scrollbar {
    display: none;
  }
  #main-navigation-bar #primary-menu > li {
    flex: 0 0 auto;
  }
  #main-navigation-bar .main-navigation .menu > li > a,
  #main-navigation-bar #primary-menu > li > a {
    padding: 8px 10px;
    white-space: nowrap;
  }
  /* Masque le déclencheur hamburger du thème (menu off-canvas vide/inactif ici) */
  #masthead .toggle-menu,
  #main-navigation-bar .toggle-menu,
  .af-bottom-header .toggle-menu {
    display: none !important;
  }
  /* Pas de sous-menus déroulants sur mobile */
  #main-navigation-bar #primary-menu .sub-menu {
    display: none !important;
  }

  #masthead .site-branding .site-title,
  #masthead .site-branding .site-title a {
    font-size: 32px;
  }

  .widget-title .heading-line {
    font-size: 22px !important;
  }
}

@media (max-width: 768px) {
  /* Topbar : garder EN DIRECT + horloge, masquer le bouton ADMIN */
  a.tfn-admin-btn {
    display: none;
  }
  .tfn-topbar-inner {
    padding: 0 14px;
    gap: 14px;
  }

  .read-title h3 {
    font-size: 18px;
  }

  body.single .site-main article.post,
  body.single .site-main .entry-content-wrap {
    padding: 20px;
  }
  body.single .entry-content-wrap .entry-title,
  body.single article.post .entry-title {
    font-size: 30px;
  }
  body.single .entry-content {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  /* Écran étroit : chaque ligne tient moins de mots, donc un même titre
     occupe PLUS de lignes. On en autorise une de plus qu'en desktop, sinon
     on couperait des titres qui passent très bien ailleurs. */
  .aft-main-banner-wrapper .aft-slider-part .grid-design-texts-over-image .read-title h3 {
    -webkit-line-clamp: 5;
  }

  .tfn-ticker-item {
    padding: 0 18px;
    font-size: 11px;
  }
  .tfn-clock {
    font-size: 11px;
  }
  .tfn-live {
    font-size: 11px;
  }

  #masthead .site-branding .site-title,
  #masthead .site-branding .site-title a {
    font-size: 26px;
  }

  .widget-title .heading-line {
    font-size: 19px !important;
  }

  #secondary.sidebar-area .widget,
  #secondary.sidebar-area .morenews-widget {
    padding: 16px;
  }
}


/* ==========================================================================
   17. INFOLETTRE (#tfn-newsletter) — bande d'inscription au-dessus du footer
   ========================================================================== */

/* Lien « Infolettre » de la topbar (côté droit, avant ADMIN) */
a.tfn-nl-link {
  display: inline-block;
  color: var(--tfn-text) !important;
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 8px 12px;
  border: 1px solid var(--tfn-border-2);
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
}
a.tfn-nl-link:hover,
a.tfn-nl-link:focus {
  border-color: var(--tfn-red);
  color: var(--tfn-red-hover) !important;
}

/* La bande */
#tfn-newsletter.tfn-newsletter {
  background: linear-gradient(180deg, #0d0d0d 0%, var(--tfn-bg) 100%);
  border-top: 1px solid var(--tfn-border);
  border-bottom: 1px solid var(--tfn-border);
  padding: 34px 20px;
}
.tfn-nl-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  flex-wrap: wrap;
}
.tfn-nl-copy {
  flex: 1 1 340px;
  min-width: 0;
}
.tfn-nl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tfn-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tfn-red);
  margin-bottom: 8px;
}
.tfn-nl-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tfn-red);
}
h2.tfn-nl-title {
  font-family: var(--tfn-font-title);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--tfn-text) !important;
  font-size: clamp(22px, 2.4vw, 32px);
  margin: 0 0 8px;
}
.tfn-nl-sub {
  color: var(--tfn-text-2);
  font-family: var(--tfn-font-body);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}

/* Formulaire : e-mail + bouton en ligne (desktop), empilé (mobile) */
.tfn-nl-form {
  flex: 1 1 380px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}
input.tfn-nl-email {
  grid-column: 1;
  width: 100%;
  background: #0d0d0d !important;
  border: 1px solid var(--tfn-border-2) !important;
  color: var(--tfn-text) !important;
  font-family: var(--tfn-font-body);
  font-size: 15px;
  padding: 13px 15px;
  border-radius: 2px;
  box-sizing: border-box;
}
input.tfn-nl-email::placeholder {
  color: var(--tfn-meta) !important;
  opacity: 1;
}
input.tfn-nl-email:focus {
  border-color: var(--tfn-red) !important;
  outline: none;
}
button.tfn-nl-btn {
  grid-column: 2;
  background: var(--tfn-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2px;
  font-family: var(--tfn-font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 13px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s linear, opacity .15s linear;
}
button.tfn-nl-btn:hover {
  background: var(--tfn-red-hover) !important;
}
button.tfn-nl-btn.is-loading {
  opacity: 0.6;
  cursor: progress;
}
button.tfn-nl-btn:disabled {
  cursor: not-allowed;
}

/* Message de retour (une ligne sous le champ, occupe toute la largeur) */
.tfn-nl-msg {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  min-height: 1em;
  font-family: var(--tfn-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.tfn-nl-msg.is-ok    { color: var(--tfn-up); }
.tfn-nl-msg.is-error { color: var(--tfn-down); }

/* Pot de miel anti-robot : retiré du flux ET des lecteurs d'écran */
.tfn-nl-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Repli screen-reader-text si le thème ne le fournit pas */
.tfn-newsletter .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 640px) {
  #tfn-newsletter.tfn-newsletter {
    padding: 26px 16px;
  }
  .tfn-nl-form {
    grid-template-columns: 1fr;
  }
  button.tfn-nl-btn {
    grid-column: 1;
    width: 100%;
  }
  a.tfn-nl-link {
    padding: 7px 9px;
    font-size: 10px;
  }
}


/* ==========================================================================
   16. ACCESSIBILITÉ & REDUCED MOTION
   ========================================================================== */

/* Focus visible : anneau rouge lisible sur fond sombre */
body.wp-theme-morenews a:focus-visible,
body.wp-theme-morenews button:focus-visible,
body.wp-theme-morenews input:focus-visible,
a.tfn-admin-btn:focus-visible,
a.tfn-hot-tag:focus-visible {
  outline: 2px solid var(--tfn-red-hover);
  outline-offset: 2px;
}

/* Le marquee est décoratif (aria-hidden côté markup) */
#tfn-ticker[aria-hidden="true"] {
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Stopper le défilement du ticker et le clignotement de la pastille live */
  .tfn-ticker-track {
    animation: none !important;
    transform: none !important;
  }
  .tfn-live-dot {
    animation: none !important;
    opacity: 1;
  }
  /* Marquee "Breaking news" du thème + transitions superflues */
  .exclusive-posts .marquee {
    animation: none !important;
  }
  #main-navigation-bar,
  #main-navigation-bar.aft-sticky-navigation {
    transition: none !important;
    animation: none !important;
  }
}