/*
Theme Name: Astra Enfant MAC
Template: astra
Version: 1.0
*/
@import url('../astra/style.css');

/* === COULEURS */
:root { --mac-orange: #768471; --mac-dark: #1a1f1a; }

/* === ARCHIVE Fly V4 === */
.mac-hero { background: #1a1f1a; padding: 0; }
.mac-hero__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 320px; align-items: center; }
.mac-hero__text { padding: 48px 48px 48px 24px; color: #fff; }
.mac-hero__title { font-size: clamp(22px, 3vw, 36px); font-weight: 800; line-height: 1.2; color: #fff; margin: 0 0 16px; }
.mac-hero__desc { font-size: 16px; line-height: 1.6; color: #ccc; margin: 0 0 20px; }
.mac-hero__count span { display: inline-block; background: #768471; color: #fff; font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 4px; }
.mac-hero__img { height: 320px; overflow: hidden; }
.mac-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mac-grid-section { padding: 48px 16px; }
.mac-grid-inner { max-width: 1200px; margin: 0 auto; }
.mac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.mac-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; transition: box-shadow .2s; }
.mac-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.mac-card__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; }
.mac-card__img { width: 100%; height: 100%; object-fit: cover; }
.mac-card__body { padding: 16px; }
.mac-card__title { font-size: 16px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.mac-card__title a { color: #1a1a1a; text-decoration: none; }
.mac-card__title a:hover { color: #768471; }
.mac-card__excerpt { font-size: 13px; color: #666; margin: 0 0 12px; line-height: 1.5; }
.mac-card__btn { display: inline-block; background: #768471; color: #fff; font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 4px; text-decoration: none; }
.mac-card__btn:hover { background: #a83d14; color: #fff; }
.mac-pagination { margin-top: 32px; text-align: center; }
.mac-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 2px; border: 1px solid #ddd; border-radius: 4px; color: #333; text-decoration: none; }
.mac-pagination .page-numbers.current { background: #768471; color: #fff; border-color: #768471; }
.mac-seo-text { background: #f9f9f9; padding: 48px 16px; }
.mac-seo-inner { max-width: 860px; margin: 0 auto; }
.mac-seo-inner h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.mac-seo-inner p { font-size: 15px; line-height: 1.7; color: #444; }
.mac-no-posts { text-align: center; padding: 48px; color: #666; }

/* === SINGLE — NVC === */
.nvc-article { margin: 0; }
.nvc-hero { display: grid; grid-template-columns: 1fr 480px; min-height: 360px; background: #1a1f1a; }
.nvc-hero-content { padding: 48px 40px 48px 24px; display: flex; flex-direction: column; justify-content: center; }
.nvc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #768471; margin-bottom: 12px; }
.nvc-hero-content h1 { font-size: clamp(20px, 2.5vw, 32px); font-weight: 800; color: #fff; margin: 0 0 16px; line-height: 1.2; }
.nvc-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.nvc-stars { color: #f5a623; font-size: 18px; }
.nvc-rating-txt { font-size: 14px; color: #ccc; }
.nvc-badge { background: rgba(255,255,255,.1); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.nvc-price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.nvc-price { font-size: 26px; font-weight: 800; color: #fff; }
.nvc-price-old { font-size: 16px; color: #999; text-decoration: line-through; }
.nvc-save { background: #2d6a2d; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.nvc-cta { display: inline-flex; align-items: center; gap: 8px; background: #768471; color: #fff; font-size: 15px; font-weight: 700; padding: 13px 28px; border-radius: 6px; text-decoration: none; width: fit-content; }
.nvc-cta:hover { background: #a83d14; color: #fff; }
.nvc-hero-img-panel { overflow: hidden; }
.nvc-hero-img-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nvc-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 16px 64px; }
.nvc-breadcrumb { font-size: 13px; color: #888; margin-bottom: 24px; }
.nvc-breadcrumb a { color: #555; text-decoration: none; }
.nvc-breadcrumb a:hover { color: #768471; }
.nvc-breadcrumb-sep { margin: 0 6px; }
.nvc-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; }
.nvc-body { min-width: 0; }
.nvc-body h2 { font-size: 22px; font-weight: 700; margin: 32px 0 12px; }
.nvc-body h3 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; }
.nvc-product-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden; position: sticky; top: 24px; }
.nvc-product-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.nvc-product-card-body { padding: 16px; }
.nvc-card-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.nvc-card-stars { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 12px; color: #f5a623; }
.nvc-card-price { margin-bottom: 12px; }
.nvc-card-price-main { font-size: 22px; font-weight: 800; color: #1a1a1a; }
.nvc-card-price-old { font-size: 14px; color: #999; text-decoration: line-through; margin-left: 6px; }
.nvc-card-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: #768471; color: #fff; font-size: 14px; font-weight: 700; padding: 12px; border-radius: 6px; text-decoration: none; margin-bottom: 8px; }
.nvc-card-btn:hover { background: #a83d14; color: #fff; }
.nvc-card-btn-outline { display: flex; align-items: center; justify-content: center; background: transparent; color: #555; font-size: 13px; padding: 8px; border-radius: 6px; text-decoration: none; border: 1px solid #ddd; }
.nvc-gauges { padding: 16px; border-top: 1px solid #eee; }
.nvc-gauge-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; color: #555; }
.nvc-gauge-track { background: #f0f0f0; border-radius: 4px; height: 6px; margin-bottom: 10px; overflow: hidden; }
.nvc-gauge-fill { height: 100%; background: #768471; border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
.nvc-related-title { font-size: 14px; font-weight: 700; margin: 16px 16px 8px; }
.nvc-related-list { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.nvc-related-card { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 8px; border-radius: 6px; }
.nvc-related-card:hover { background: #f9f9f9; }
.nvc-related-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.nvc-related-name { font-size: 13px; font-weight: 600; color: #1a1a1a; line-height: 1.3; }
.nvc-related-price { font-size: 12px; color: #768471; font-weight: 700; }
.nvc-faq-item { border-bottom: 1px solid #eee; }
.nvc-faq-btn { width: 100%; text-align: left; background: none; border: none; padding: 14px 0; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.nvc-faq-answer { display: none; padding: 0 0 14px; color: #555; font-size: 14px; line-height: 1.6; }
.nvc-faq-item.open .nvc-faq-answer { display: block; }
.nvc-faq-item.open .nvc-faq-icon { transform: rotate(45deg); }
.nvc-faq-icon { transition: transform .2s; font-size: 18px; color: #768471; }

/* Orange checkmark */
.mac-check { color: #768471; font-weight: 700; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .nvc-grid { grid-template-columns: 1fr; }
  .nvc-hero { grid-template-columns: 1fr; }
  .nvc-hero-img-panel { height: 220px; }
}
@media (max-width: 768px) {
  .mac-hero__inner { grid-template-columns: 1fr; }
  .mac-hero__img { height: 200px; }
  .mac-hero__text { padding: 32px 16px; }
}


/* === LAYOUT : contenu 75% centré, blocs full-width à 100% === */
.entry-content {
  padding-left: 12.5%;
  padding-right: 12.5%;
  box-sizing: border-box;
}
.entry-content .alignfull,
.entry-content .alignwide,
.entry-content .wp-block-cover.alignfull,
.entry-content .wp-block-group.alignfull,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-group {
  margin-left: -12.5% !important;
  margin-right: -12.5% !important;
  max-width: none !important;
  width: calc(100% + 25%) !important;
}
@media (max-width: 1024px) {
  .entry-content { padding-left: 3%; padding-right: 3%; }
  .entry-content .alignfull,
  .entry-content .alignwide,
  .entry-content .wp-block-cover.alignfull,
  .entry-content .wp-block-group.alignfull,
  .entry-content > .wp-block-cover,
  .entry-content > .wp-block-group {
    margin-left: -3% !important;
    margin-right: -3% !important;
    width: calc(100% + 6%) !important;
  }
}

/* Hero images sur pages pilier */
.single .entry-content .wp-block-image.alignwide img,
.page .entry-content .wp-block-image.alignwide img {
  max-height: 380px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
/* === HOMEPAGE : layout full width === */

/* 1. Masquer titre de page Astra sur homepage */
.home .entry-header {
  display: none !important;
}

/* 2. Entry-content sans padding horizontal sur homepage
      (les blocs se positionnent d'eux-mêmes) */
.home .entry-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3. Annuler les marges négatives du système général
      (elles compensaient le 12.5% padding — inutiles ici) */
.home .entry-content .alignfull,
.home .entry-content .alignwide,
.home .entry-content .wp-block-cover,
.home .entry-content .wp-block-columns,
.home .entry-content .wp-block-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 4. Hero cover : vraie pleine largeur viewport */
.home .entry-content .wp-block-cover.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
  position: relative !important;
}

/* 5. Titres et paragraphes centrés avec largeur lisible */
.home .entry-content .wp-block-heading,
.home .entry-content .wp-block-paragraph {
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px;
  padding-right: 16px;
  width: auto !important;
}

/* 6. Colonnes avec un max-width raisonnable et centrées */
.home .entry-content .wp-block-columns.alignwide {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* 7. Media-text alignwide (section Nos accessoires en images) */
.home .entry-content .wp-block-media-text.alignwide {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* 8. Groupe FAQ vert : annuler is-layout-constrained */
.home .entry-content .wp-block-group.is-layout-constrained > * {
  max-width: none !important;
}
.home .entry-content .wp-block-group.has-background {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* 9. Heading centré dans le groupe FAQ */
.home .entry-content .wp-block-group .wp-block-heading,
.home .entry-content .wp-block-group .wp-block-paragraph {
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0;
  padding-right: 0;
}

/* 10. Details/FAQ items full width dans le groupe vert */
.home .entry-content .wp-block-group .wp-block-details {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   DESIGN UPDATE v2 — quel-fumoir.fr inspired
   Fraunces serif headings · Instrument Sans body
   #f8f5f2 cream bg · #e85d04 orange CTA · #1c1c1c dark nav
   ============================================================ */

/* Variables mises à jour */
:root {
  --mac-orange: #e85d04;
  --mac-dark:   #1c1c1c;
  --mac-cream:  #f8f5f2;
}

/* Fond crème global */
body, .ast-separate-container .ast-article-post { background-color: var(--mac-cream) !important; }

/* Typographie body */
body, p, li, td, input, textarea, select { font-family: 'Instrument Sans', sans-serif !important; }

/* Titres Fraunces */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .ast-breadcrumbs-wrapper { font-family: 'Fraunces', serif !important; color: #1c1c1c !important; }

/* Header / Nav sombre */
.main-header-bar, .ast-main-header-bar, #masthead, .site-header, .ast-desktop-header { background-color: var(--mac-dark) !important; }
.main-header-bar .ast-nav-menu > li > a,
.main-header-bar .site-title a,
.main-header-bar .ast-primary-menu-disabled .ast-site-identity a,
.site-header a, .ast-header-break-point .ast-mobile-menu-buttons span,
.ast-header-break-point .menu-toggle { color: #fff !important; }
.main-header-bar .ast-nav-menu > li > a:hover,
.site-header a:hover { color: #e85d04 !important; }
.ast-primary-menu-disabled { background: var(--mac-dark) !important; }

/* Logo texte blanc */
.ast-site-identity a, .site-title a { color: #fff !important; }

/* Boutons / CTAs orange */
.nvc-cta, .mac-card__btn, .nvc-card-btn, .nvc-gauge-fill,
.mac-pagination .page-numbers.current,
.wp-block-button__link { background: var(--mac-orange) !important; border-color: var(--mac-orange) !important; color: #fff !important; }
.nvc-cta:hover, .mac-card__btn:hover, .nvc-card-btn:hover,
.wp-block-button__link:hover { background: #c44d00 !important; color: #fff !important; }
.mac-sticky-bar a.msb-btn { background: var(--mac-orange) !important; }

/* Sticky bar fond sombre */
.mac-sticky-bar { background: var(--mac-dark) !important; }

/* Liens */
a { color: #e85d04; }
a:hover { color: #c44d00; }

/* Accents orange */
.nvc-eyebrow, .mac-check, .nvc-faq-icon, .mac-card__btn,
.nvc-related-price, .mac-pagination .page-numbers.current { color: var(--mac-orange) !important; }
.nvc-gauge-fill { background: var(--mac-orange) !important; }

/* Hover cartes */
.mac-card__title a:hover, .nvc-related-card:hover { color: var(--mac-orange) !important; }
.nvc-related-card:hover { background: #f0ece8 !important; }

/* Hero archive fond sombre */
.mac-hero, .nvc-hero { background: var(--mac-dark) !important; }
.mac-hero__count span, .mac-hero__badge { background: var(--mac-orange) !important; }

/* === HOMEPAGE SECTIONS — width 75% + derniers articles + FAQ === */

/* Guide complet (Comment bien choisir) */
.mac-guide-complet { max-width: 75% !important; margin-left: auto !important; margin-right: auto !important; }

/* FAQ section — no outer background, keep bg on details */
.mac-faq-section { background: none !important; max-width: 75%; margin: 0 auto; }
.mac-faq-section .wp-block-heading { color: #1c1c1c !important; }
.mac-faq-section .wp-block-details {
  background: #f5f2ee;
  border: 1px solid #e0dbd4;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 10px;
}
.mac-faq-section .wp-block-details summary {
  font-weight: 600;
  cursor: pointer;
  color: #1c1c1c;
}

/* Sophie sections after FAQ — 75% width */
.mac-faq-section ~ .wp-block-heading,
.mac-faq-section ~ .wp-block-paragraph,
.mac-faq-section ~ .wp-block-list,
.mac-faq-section ~ .wp-block-columns,
.mac-faq-section ~ .wp-block-separator {
  max-width: 75%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Derniers articles shortcode */
.mac-latest-posts { display: flex; gap: 24px; flex-wrap: wrap; max-width: 75%; margin: 0 auto; }
.mac-lp-card { flex: 1; min-width: 260px; background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid #e8e3dd; display: flex; flex-direction: column; }
.mac-lp-img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; }
.mac-lp-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.mac-lp-img-wrap:hover .mac-lp-img { transform: scale(1.03); }
.mac-lp-placeholder { width: 100%; height: 180px; background: #f0ece7; }
.mac-lp-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.mac-lp-date { font-size: 12px; color: #999; }
.mac-lp-title { font-size: 15px; font-weight: 700; margin: 6px 0 8px; line-height: 1.35; }
.mac-lp-title a { color: #1c1c1c; text-decoration: none; }
.mac-lp-title a:hover { color: #e85d04; }
.mac-lp-excerpt { font-size: 13px; color: #666; flex: 1; margin-bottom: 12px; }
.mac-lp-read { font-size: 13px; font-weight: 600; color: #e85d04; text-decoration: none; align-self: flex-start; }
.mac-lp-read:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .mac-guide-complet, .mac-latest-posts, .mac-faq-section,
  .mac-faq-section ~ .wp-block-heading,
  .mac-faq-section ~ .wp-block-paragraph,
  .mac-faq-section ~ .wp-block-columns { max-width: 100% !important; }
  .mac-lp-card { min-width: 100%; }
}

/* Fix FAQ title color (was white on green, now dark on transparent) */
.mac-faq-section .wp-block-heading.has-text-color { color: #1c1c1c !important; }