/* ============================================================
   Paris Navette — Blog Archive Custom Styles v1.3.0
   Thème : most · Classes HTML réelles confirmées
   Design : Cormorant Garamond · Montserrat · #1C1C1C · #C9A84C
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600&display=swap');

/* ── CUSTOM HEADER (blog/archive) — reproduit le header Elementor homepage ── */

/* Masquer le header natif du thème sur blog/archive */
body.blog .main-header,
body.archive .main-header {
  display: none !important;
}

/* Wrapper custom header */
.pn-custom-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background-color: #1C1C1C !important;
  padding: 18px 0 !important;
  position: relative !important;
  z-index: 9999 !important;
  width: 100% !important;
}

.pn-custom-header__inner {
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 0 30px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Logo texte "PARIS / NAVETTE" */
.pn-custom-header__logo {
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.pn-logo-paris {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #F5F0E8 !important;
  letter-spacing: 2px !important;
  display: block !important;
  line-height: 1.1 !important;
}

.pn-logo-navette {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 4px !important;
  color: #C9A84C !important;
  display: block !important;
  margin-top: 3px !important;
}

/* Navigation */
.pnn-nav {
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnn-nav a {
  color: #F5F0E8 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.pnn-nav a:hover {
  color: #C9A84C !important;
}

/* CTA "Réserver" doré */
.pnn-nav a.nc {
  background: #C9A84C !important;
  color: #1C1C1C !important;
  padding: 10px 20px !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
}

.pnn-nav a.nc:hover {
  background: #b59040 !important;
  color: #1C1C1C !important;
}

/* Drapeaux FR / EN */
.nf {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 6px !important;
}

.nf img {
  width: 22px !important;
  height: 14px !important;
  object-fit: cover !important;
  border-radius: 1px !important;
  display: block !important;
  opacity: 0.85 !important;
  transition: opacity 0.2s !important;
}

.nf img:hover {
  opacity: 1 !important;
}

/* Bouton hamburger mobile (masqué par défaut) */
.pn-nav-toggle {
  display: none !important;
  flex-direction: column !important;
  gap: 5px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
}

.pn-nav-toggle span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: #F5F0E8 !important;
  transition: 0.2s !important;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .pn-nav-toggle {
    display: flex !important;
  }

  .pnn-nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #1C1C1C !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 30px !important;
    gap: 18px !important;
    z-index: 9998 !important;
  }

  .pnn-nav.pnn-nav--open {
    display: flex !important;
  }

  .pn-custom-header__inner {
    padding: 0 20px !important;
    position: relative !important;
  }

  .nf {
    margin-left: 0 !important;
  }
}

:root {
  --pn-anthracite: #1C1C1C;
  --pn-or:         #C9A84C;
  --pn-or-dark:    #a8882e;
  --pn-bg:         #F0F2F5;
  --pn-font-title: 'Cormorant Garamond', Georgia, serif;
  --pn-font-ui:    'Montserrat', 'Helvetica Neue', sans-serif;
}

/* ── 1. Page background ─────────────────────────────────────── */
body.blog,
body.archive {
  background-color: var(--pn-bg) !important;
}

/* ── 2. Masquer "Latest Stories" ────────────────────────────── */
header.ms-sp--header,
h1.ms-sp--title {
  display: none !important;
}

/* ── 3. Masquer "Non classé" ────────────────────────────────── */
.post-category__list,
.post-categories {
  display: none !important;
}

/* ── 4. Masquer images featured ─────────────────────────────── */
a.post-thumbnail {
  display: none !important;
}

/* ── 5. Masquer "1 min read" / "2 min read" ─────────────────── */
.ms-p--ttr,
.post-meta__reading-time,
.post-meta--reading-time,
[class*="reading-time"] {
  display: none !important;
}

/* ── 6. Masquer sidebar ─────────────────────────────────────── */
.sidebar,
aside,
.widget-area,
#secondary,
.ms-sp--sidebar {
  display: none !important;
}

/* Forcer le conteneur principal à 100% quand sidebar masquée */
.ms-main,
.ms-main > .container,
.ms-main > .container > .row,
.ms-posts--default {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── 7. Masquer bouton scroll-to-top noir ───────────────────── */
.ms-sp--back-to-top,
.ms-back-to-top,
[class*="back-to-top"],
[class*="scroll-to-top"],
[class*="backtotop"],
[id*="back-to-top"],
[id*="scroll-to-top"] {
  display: none !important;
}

/* ── 8. Grille 4 colonnes ───────────────────────────────────── */
.ms-posts--default {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ms-posts--default .grid-sizer {
  display: none !important;
}

/* ── 9. Cards ───────────────────────────────────────────────── */
article.grid-item {
  flex: none !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #ffffff !important;
  border-top: 3px solid var(--pn-or) !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 14px rgba(28, 28, 28, 0.08) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

article.grid-item:hover {
  box-shadow: 0 6px 28px rgba(28, 28, 28, 0.15) !important;
  transform: translateY(-4px) !important;
}

/* ── 10. Zone texte ─────────────────────────────────────────── */
article.grid-item .post-content {
  padding: 20px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 10px !important;
  background: none !important;
}

/* ── 11. Titre H2 ───────────────────────────────────────────── */
article.grid-item .post-content > a {
  text-decoration: none !important;
}

article.grid-item .post-content > a h2 {
  font-family: var(--pn-font-title) !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  color: var(--pn-anthracite) !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Correction coupure mots */
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  /* Soulignement or au hover */
  background-image: linear-gradient(var(--pn-or), var(--pn-or)) !important;
  background-repeat: no-repeat !important;
  background-size: 0% 1px !important;
  background-position: 0 100% !important;
  transition: background-size 0.3s ease !important;
  display: block !important;
}

article.grid-item:hover .post-content > a h2 {
  background-size: 100% 1px !important;
}

/* ── 12. Extrait ────────────────────────────────────────────── */
p.post-excerpt {
  font-family: var(--pn-font-title) !important;
  font-size: 0.9rem !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
  color: #4a4a4a !important;
  margin: 0 !important;
}

/* ── 13. Footer carte ───────────────────────────────────────── */
article.grid-item .post-footer {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ── 14. Date ───────────────────────────────────────────────── */
span.post-meta__date {
  font-family: var(--pn-font-ui) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #999 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── 15. Masquer avatar auteur vide ─────────────────────────── */
.post-meta-footer > a:first-child {
  display: none !important;
}

/* ── 16. CTA "LIRE L'ARTICLE →" ────────────────────────────── */
.post-footer--link {
  padding-top: 14px !important;
  border-top: 1px solid #ebebeb !important;
}

.post-footer--link a {
  font-size: 0 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: gap 0.2s ease !important;
}

.post-footer--link a::before {
  content: 'LIRE L\2019 ARTICLE' !important;
  font-family: var(--pn-font-ui) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: var(--pn-or) !important;
}

.post-footer--link a::after {
  content: '\2192' !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--pn-or) !important;
  letter-spacing: 0 !important;
  transition: transform 0.2s ease !important;
  display: inline-block !important;
}

.post-footer--link a:hover {
  gap: 10px !important;
}

.post-footer--link a:hover::before {
  color: var(--pn-or-dark) !important;
}

.post-footer--link a:hover::after {
  color: var(--pn-or-dark) !important;
  transform: translateX(3px) !important;
}

/* ── 17. Pagination ─────────────────────────────────────────── */
.pagination,
.nav-links,
.page-numbers,
.ms-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 48px !important;
}

.pagination a,
.pagination span,
.page-numbers a,
.page-numbers span,
.nav-links a,
.nav-links span {
  font-family: var(--pn-font-ui) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  padding: 8px 14px !important;
  border: 1px solid #ddd !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  color: var(--pn-anthracite) !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}

.pagination .current,
.page-numbers .current,
.page-numbers span.current {
  background: var(--pn-or) !important;
  border-color: var(--pn-or) !important;
  color: #ffffff !important;
}

.pagination a:hover,
.page-numbers a:hover,
.nav-links a:hover {
  border-color: var(--pn-or) !important;
  color: var(--pn-or) !important;
}

/* Masquer les "…" (dots) */
.page-numbers.dots {
  border: none !important;
  background: none !important;
  color: #aaa !important;
}

/* ── 18. Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ms-posts--default {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .ms-posts--default {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  article.grid-item .post-content {
    padding: 16px !important;
  }
}