/*
Theme Name:   Neve Child - CultureNoushi BBC Style
Theme URI:    https://culturenoushi.com
Description:  Thème enfant Neve - Design BBC pour CultureNoushi
Author:       CultureNoushi
Template:     neve
Version:      4.0.0
Text Domain:  neve-child
*/

/* ============================================================
   VARIABLES BBC - NOIR & BLANC UNIQUEMENT
   ============================================================ */
:root {
  --cn-black:  #1a1a1a;
  --cn-dark:   #222222;
  --cn-accent: #ffffff;
  --cn-white:  #ffffff;
  --cn-grey:   #f5f5f5;
  --cn-border: #e0e0e0;
  --cn-text:   #555555;
  --cn-font:   'Source Sans 3','Helvetica Neue',Arial,sans-serif;
  --cn-serif:  'Source Serif 4',Georgia,serif;
}

/* BASE */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--cn-font) !important; background: var(--cn-grey) !important; }
a { color: var(--cn-black); text-decoration: none; }
a:hover { color: #444; }
img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   HEADER
   ============================================================ */
#header-grid,
.hfg_header.site-header {
  box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
  border-bottom: 3px solid var(--cn-white) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

#header-grid [data-row-id],
#header-grid [class*="row-inner"] {
  background: var(--cn-black) !important;
}

#header-grid {
  --bgcolor: #1a1a1a !important;
  --color: #ffffff !important;
}

/* Logo */
.hfg_header .site-logo img,
.hfg_header .custom-logo { max-height: 52px !important; width: auto !important; }
.hfg_header .site-logo h1,
.hfg_header .site-logo p { color: var(--cn-white) !important; }

/* Menu items */
#header-grid .nav-ul > li > .wrap > a,
#header-grid .nav-ul > li > a {
  color: var(--cn-white) !important;
  font-size: 0.87rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  transition: color 0.2s, border-color 0.2s !important;
  border-bottom: 3px solid transparent !important;
  padding-bottom: 17px !important;
  padding-top: 17px !important;
}

#header-grid .nav-ul > li > .wrap:hover > a,
#header-grid .nav-ul > li.nv-active > .wrap > a {
  color: #cccccc !important;
  border-bottom-color: var(--cn-white) !important;
}

/* Sous-menus */
#header-grid .nav-ul .sub-menu {
  background: var(--cn-dark) !important;
  border-top: 2px solid var(--cn-white) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important;
}
#header-grid .nav-ul .sub-menu .wrap > a {
  color: var(--cn-white) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
}
#header-grid .nav-ul .sub-menu .wrap:hover > a {
  color: var(--cn-black) !important;
  background: var(--cn-white) !important;
}

/* Hamburger mobile */
#header-grid .navbar-toggle {
  color: var(--cn-white) !important;
  --primarybtnbg: transparent !important;
  --primarybtncolor: #fff !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
}

/* ============================================================
   BADGE CATÉGORIE
   ============================================================ */
.cn-cat-label {
  display: inline-block !important;
  background: var(--cn-black) !important;
  color: var(--cn-white) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 2px 8px !important;
  margin-bottom: 6px !important;
  text-decoration: none !important;
}
.cn-cat-label:hover {
  background: #444 !important;
  text-decoration: none !important;
  color: var(--cn-white) !important;
}

/* ============================================================
   GRILLE D'ARTICLES
   ============================================================ */
body:not(.nv-blog-default) .posts-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 3px !important;
  background: var(--cn-border) !important;
  padding: 3px !important;
  margin: 0 !important;
  flex-wrap: unset !important;
}

body:not(.nv-blog-default) .posts-wrapper > article {
  background: var(--cn-white) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

.layout-grid .nv-post-thumbnail-wrap.img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.layout-grid .nv-post-thumbnail-wrap.img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.layout-grid:hover .nv-post-thumbnail-wrap.img-wrap img { transform: scale(1.04); }

.layout-grid .article-content-col { background: var(--cn-white) !important; }
.layout-grid .article-content-col .content { padding: 12px 14px 16px !important; }

/* Titre */
.posts-wrapper .blog-entry-title.entry-title {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}
.posts-wrapper .blog-entry-title.entry-title a { color: var(--cn-black) !important; text-decoration: none !important; }
.posts-wrapper .blog-entry-title.entry-title a:hover { color: #444 !important; text-decoration: underline !important; }

/* Meta */
.posts-wrapper .nv-meta-list { font-size: 0.78rem !important; color: var(--cn-text) !important; margin-bottom: 6px !important; }
.posts-wrapper .nv-meta-list li,
.posts-wrapper .nv-meta-list span { color: var(--cn-text) !important; font-size: 0.78rem !important; }

/* Extrait */
.posts-wrapper .entry-summary { font-size: 0.88rem !important; color: var(--cn-text) !important; line-height: 1.5 !important; }

/* Featured post */
.nv-ft-post { background: var(--cn-white); margin-bottom: 3px !important; }
.nv-ft-post .nv-post-thumbnail-wrap { min-height: 380px !important; }
.nv-ft-post .blog-entry-title { font-size: 1.7rem !important; font-weight: 800 !important; line-height: 1.2 !important; }
.nv-ft-post .blog-entry-title a { color: var(--cn-black) !important; }
.nv-ft-post .non-grid-content { padding: 20px 24px !important; }

/* ============================================================
   ARCHIVE LAYOUT
   ============================================================ */
.archive-container > .row { display: flex !important; gap: 20px !important; align-items: flex-start !important; flex-wrap: nowrap !important; }
.archive-container .nv-index-posts.blog.col { flex: 1 !important; min-width: 0 !important; }
.archive-container .nv-sidebar-wrap { width: 300px !important; max-width: 300px !important; flex-shrink: 0 !important; padding: 0 0 0 20px !important; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.nv-sidebar-wrap .widget { background: var(--cn-white); margin-bottom: 4px !important; padding-bottom: 16px !important; }
.nv-sidebar-wrap .widget-title,
.nv-sidebar-wrap .widgettitle {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--cn-white) !important;
  background: var(--cn-black) !important;
  padding: 9px 14px !important;
  margin: 0 0 14px !important;
  border-left: 4px solid var(--cn-white) !important;
}
.nv-sidebar-wrap .widget li { padding: 8px 14px; border-bottom: 1px solid var(--cn-border); font-size: 0.88rem; margin-top: 0 !important; }
.nv-sidebar-wrap .widget li a { color: var(--cn-black); font-weight: 600; }
.nv-sidebar-wrap .widget li a:hover { color: #444; text-decoration: underline; }

/* ============================================================
   ARTICLE SINGLE
   ============================================================ */
.single .nv-content-wrap { max-width: 860px; margin: 0 auto; padding: 30px 20px; }
.single .entry-header .title.entry-title { font-size: 1.9rem !important; font-weight: 800 !important; line-height: 1.2 !important; color: var(--cn-black) !important; }
.single .nv-meta-list {
  border-left: 3px solid var(--cn-black);
  padding-left: 10px;
  font-size: 0.85rem !important;
  color: var(--cn-text) !important;
  margin-bottom: 24px !important;
}
.single .nv-post-thumbnail-wrap img { width: 100%; max-height: 460px; object-fit: cover; }
.single .entry-content,
.nv-content-wrap .entry-content { font-family: var(--cn-serif) !important; font-size: 1.07rem; line-height: 1.85; }
.single .entry-content p { margin-bottom: 1.4em; }
.single .entry-content h2 {
  font-family: var(--cn-font) !important;
  font-size: 1.45rem;
  font-weight: 800;
  border-bottom: 2px solid var(--cn-black);
  padding-bottom: 8px;
  margin: 2em 0 0.8em;
}
.single .entry-content h3 { font-family: var(--cn-font) !important; font-size: 1.2rem; font-weight: 700; margin: 1.5em 0 0.6em; }
.single .entry-content blockquote {
  border-left: 4px solid var(--cn-black);
  border-width: 0 0 0 4px;
  padding: 12px 0 12px 20px;
  background: var(--cn-grey);
  font-style: italic;
}
.single .entry-content a:not([class]) { color: var(--cn-black); text-decoration: underline; }

/* ============================================================
   PAGINATION
   ============================================================ */
ul.page-numbers { justify-content: center !important; gap: 3px !important; }
ul.page-numbers a,
ul.page-numbers span,
ul.page-numbers input[type=submit] {
  background: var(--cn-white) !important;
  border: 1px solid var(--cn-border) !important;
  border-radius: 0 !important;
  color: var(--cn-black) !important;
  font-weight: 600 !important;
  width: 38px;
  padding: 8px 0 !important;
  text-align: center;
  transition: all 0.2s !important;
}
ul.page-numbers .current { background: var(--cn-black) !important; color: var(--cn-white) !important; border-color: var(--cn-black) !important; }
ul.page-numbers a:hover { background: var(--cn-black) !important; color: var(--cn-white) !important; border-color: var(--cn-black) !important; opacity: 1 !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top: 4px solid var(--cn-white) !important; }
.site-footer [data-row-id],
.site-footer .footer--row-inner,
.site-footer [class*="row-inner"] {
  background: var(--cn-dark) !important;
  --bgcolor: #222222 !important;
  --color: #cccccc !important;
}
.site-footer .footer--row:last-child [class*="row-inner"],
.site-footer [data-row-id="bottom"] { background: #111 !important; --bgcolor: #111111 !important; }
.site-footer .widget-title,
.site-footer .widgettitle {
  color: var(--cn-white) !important;
  border-left: 3px solid var(--cn-white) !important;
  padding-left: 10px !important;
  background: transparent !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}
.site-footer a { color: #bbb !important; }
.site-footer a:hover { color: var(--cn-white) !important; opacity: 1 !important; }
.site-footer p { color: #888; font-size: 0.8rem; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.neve-breadcrumbs-wrapper {
  background: var(--cn-grey) !important;
  border-bottom: 1px solid var(--cn-border) !important;
  padding: 8px 20px !important;
  font-size: 0.82rem !important;
}
.neve-breadcrumbs-wrapper a { color: var(--cn-text) !important; }
.neve-breadcrumbs-wrapper a:hover { color: var(--cn-black) !important; }

/* ============================================================
   TAGS
   ============================================================ */
.nv-tags-list a {
  background: var(--cn-black) !important;
  color: var(--cn-white) !important;
  border-radius: 0 !important;
  font-size: 0.72rem !important;
  padding: 6px 10px !important;
  margin: 0 5px 5px 0 !important;
}
.nv-tags-list a:hover { background: #444 !important; }

/* Fix sticky-header-placeholder de Neve
   Neve génère un div avec height inline pour compenser le header sticky
   On le force à la vraie hauteur du header (~70px) */
.sticky-header-placeholder {
  height: 0 !important;
  display: none !important;
}

/* ============================================================
   COULEURS PAR CATÉGORIE - Badges
   ============================================================ */

/* Actualités → Rouge */
.cat-links a[href*="actualites"],
.cn-cat-label[href*="actualites"],
.cat-links a[href*="actu"],
.cn-cat-label[href*="actu"] {
  background: #cc0000 !important;
  color: #fff !important;
}

/* Chroniques → Bleu foncé */
.cat-links a[href*="chroniques"],
.cn-cat-label[href*="chroniques"] {
  background: #1a3a6b !important;
  color: #fff !important;
}

/* Critiques → Violet */
.cat-links a[href*="critiques"],
.cn-cat-label[href*="critiques"] {
  background: #6b1a6b !important;
  color: #fff !important;
}

/* Interviews / Portraits → Vert foncé */
.cat-links a[href*="interviews"],
.cn-cat-label[href*="interviews"],
.cat-links a[href*="portraits"],
.cn-cat-label[href*="portraits"] {
  background: #1a6b3a !important;
  color: #fff !important;
}

/* Édito → Gris ardoise */
.cat-links a[href*="edito"],
.cn-cat-label[href*="edito"] {
  background: #3a3a4a !important;
  color: #fff !important;
}

/* Boutique → Orange foncé */
.cat-links a[href*="boutique"],
.cn-cat-label[href*="boutique"] {
  background: #b84800 !important;
  color: #fff !important;
}

/* Vidéos → Bleu BBC */
.cat-links a[href*="videos"],
.cn-cat-label[href*="videos"] {
  background: #003e74 !important;
  color: #fff !important;
}

/* ============================================================
   RESPONSIVE - DESKTOP & TABLET
   ============================================================ */
@media (max-width: 1024px) {
  body:not(.nv-blog-default) .posts-wrapper { grid-template-columns: repeat(2, 1fr) !important; }
  .archive-container .nv-sidebar-wrap { width: 260px !important; }
}

/* ============================================================
   RESPONSIVE MOBILE - Layout style linfodrome
   ============================================================ */
@media (max-width: 768px) {

  /* Grille → 1 colonne pleine largeur */
  body:not(.nv-blog-default) .posts-wrapper {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    background: var(--cn-white) !important;
    padding: 0 !important;
  }

  /* Chaque article = carte pleine largeur */
  body:not(.nv-blog-default) .posts-wrapper > article {
    border-bottom: 1px solid var(--cn-border) !important;
    margin-bottom: 0 !important;
  }

  /* Image pleine largeur */
  .layout-grid .nv-post-thumbnail-wrap.img-wrap {
    aspect-ratio: 16 / 9;
    position: relative;
  }

  /* Date + auteur EN OVERLAY sur l'image (style linfodrome) */
  .layout-grid .nv-post-thumbnail-wrap.img-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    pointer-events: none;
  }

  .layout-grid .nv-meta-list {
    position: absolute !important;
    bottom: 8px !important;
    left: 10px !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    z-index: 2;
    margin: 0 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  }

  .layout-grid .nv-meta-list li,
  .layout-grid .nv-meta-list span {
    color: #fff !important;
  }

  /* Positionner l'article-content-col relativement */
  .layout-grid .article-content-col {
    position: relative;
  }

  /* Contenu texte sous l'image */
  .layout-grid .article-content-col .content {
    padding: 10px 14px 14px !important;
  }

  /* Badge catégorie bien visible */
  .cn-cat-label {
    font-size: 0.72rem !important;
    padding: 3px 10px !important;
    margin-bottom: 8px !important;
  }

  /* Titre plus grand sur mobile */
  .posts-wrapper .blog-entry-title.entry-title {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  /* Masquer l'extrait sur mobile pour gagner de la place */
  .posts-wrapper .entry-summary {
    display: none !important;
  }

  /* Sidebar sous les articles */
  .archive-container > .row { flex-direction: column !important; flex-wrap: wrap !important; }
  .archive-container .nv-sidebar-wrap { width: 100% !important; max-width: 100% !important; padding: 0 !important; }

  /* Articles single */
  .single .entry-header .title.entry-title { font-size: 1.4rem !important; }
  .nv-ft-post .nv-post-thumbnail-wrap { min-height: 220px !important; }
  .nv-ft-post .blog-entry-title { font-size: 1.2rem !important; }

  /* Ticker "À la une" simplifié */
  .cn-breaking-bar span:last-child { font-size: 0.78rem; }
}

@media (max-width: 480px) {
  .single .entry-header .title.entry-title { font-size: 1.2rem !important; }
  .posts-wrapper .blog-entry-title.entry-title { font-size: 1rem !important; }
}

a:focus, button:focus { outline: 3px solid var(--cn-black); outline-offset: 2px; }