/* =========================================================
   BABYGREENEXPERT — CSS GLOBAL FINAL
========================================================= */

:root {
  --taupe: #CDC1B1;
  --taupe-dark: #8A7766;
  --grey: #545454;
  --white: #FFFFFF;
  --ivory: #FFFDFB;
  --line: #E6E0DA;

  --bge-soft: #FFF8F1;
  --bge-green: #F3F7EF;
  --bge-blue: #F4F7F7;
  --bge-pink: #F8F1F4;
  --bge-alert-bg: #FFF3EF;
  --bge-light: #F7F7F7;

  --shadow-soft: 0 10px 30px rgba(84,84,84,.06);
  --shadow-hover: 0 12px 26px rgba(84,84,84,.08);

  --article-width: 820px;
  --hero-width: 900px;

  --font-body: 17px;
  --font-small: 14px;
  --font-meta: 13px;
  --font-h1: 44px;
  --font-hero: 54px;
  --font-h2: 28px;
  --font-h3: 22px;
  --font-share-title: 28px;

  --radius-large: 22px;
  --radius-medium: 18px;
  --space-section: 42px;
  --space-block: 34px;
}

/* =========================================================
   BASE
========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  color: var(--grey);
}

/* =========================================================
   HEADER + MENU
========================================================= */

body:not(.elementor-editor-active) .site-header,
body:not(.elementor-editor-active) .bge-header {
  position: relative;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.04);
}

body:not(.elementor-editor-active) .elementor-nav-menu--main .elementor-item,
body:not(.elementor-editor-active) .elementor-nav-menu--dropdown .elementor-item,
body:not(.elementor-editor-active) .elementor-nav-menu--dropdown .elementor-sub-item {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  color: var(--grey) !important;
  font-weight: 400;
  text-decoration: none;
  background: transparent !important;
  transition: color .2s ease, font-weight .2s ease;
}

body:not(.elementor-editor-active) .elementor-nav-menu--main .elementor-item:hover,
body:not(.elementor-editor-active) .elementor-nav-menu--dropdown .elementor-item:hover,
body:not(.elementor-editor-active) .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--taupe-dark) !important;
  font-weight: 500;
}

body:not(.elementor-editor-active) .elementor-nav-menu--main .elementor-item::before,
body:not(.elementor-editor-active) .elementor-nav-menu--main .elementor-item::after,
body:not(.elementor-editor-active) .elementor-nav-menu--dropdown .elementor-item::before,
body:not(.elementor-editor-active) .elementor-nav-menu--dropdown .elementor-item::after {
  display: none !important;
  content: none !important;
}

body:not(.elementor-editor-active) .elementor-nav-menu--dropdown {
  background: var(--ivory) !important;
  border: none !important;
  box-shadow: 0 12px 28px rgba(84,84,84,.08) !important;
}

/* =========================================================
   HERO ARTICLE
========================================================= */

.bge-category,
body.single-post:not(.elementor-editor-active) .bge-category {
  font-family: 'Raleway', sans-serif;
  font-size: var(--font-meta);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 18px;
}

.bge-hero-title,
body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-title .elementor-heading-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--font-hero);
  font-weight: 700;
  line-height: 1.15;
  color: var(--grey);
  max-width: 820px;
  margin: 0 0 28px;
}

.bge-hero-excerpt {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--grey);
  max-width: 680px;
  margin: 0 0 30px;
}

.bge-hero-meta {
  font-family: 'Raleway', sans-serif;
  font-size: var(--font-small);
  color: rgba(84,84,84,.65);
  margin-bottom: 40px;
}

/* =========================================================
   IMAGE MISE EN AVANT
========================================================= */

.bge-featured-image {
  max-width: 760px;
  margin: 0 auto 50px;
}

.bge-featured-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  object-fit: cover;
}

/* =========================================================
   CONTENU ARTICLE — SANS CADRE TAUPE
========================================================= */

body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content,
.bge-article {
  max-width: var(--article-width);
  margin: 0 auto;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  font-size: var(--font-body);
  line-height: 1.8;
  color: var(--grey);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content p,
.bge-article p {
  margin: 0 0 26px;
}

body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content a,
.bge-article a {
  color: var(--taupe-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content a:hover,
.bge-article a:hover {
  color: var(--grey);
}

/* =========================================================
   TITRES ARTICLE
========================================================= */

.bge-article h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--font-h1);
  font-weight: 700;
  color: var(--grey);
  line-height: 1.18;
  margin: 0 auto 24px;
}

body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content h2,
.bge-article h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: var(--font-h2);
  color: var(--grey);
  line-height: 1.28;
  margin: 76px 0 24px;
  padding: 0;
  border: none;
}

body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content h3,
.bge-article h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: var(--font-h3);
  color: var(--taupe-dark);
  line-height: 1.35;
  margin: 44px 0 16px;
}

/* =========================================================
   PAGES CATÉGORIES
========================================================= */

.bge-category-hero {
  max-width: 900px;
  margin: 40px auto 34px;
  padding: 34px 28px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  text-align: center;
  font-family: 'Raleway', sans-serif;
  color: var(--grey);
}

.bge-category-label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 600;
}

.bge-category-title {
  margin: 0 auto 16px;
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  line-height: 1.15;
  color: var(--grey);
  font-weight: 700;
}

.bge-category-intro {
  margin: 0 auto 14px;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 600;
}

.bge-category-text {
  margin: 0 auto;
  max-width: 650px;
  font-size: 15.5px;
  line-height: 1.7;
}

/* =========================================================
   SOMMAIRE
========================================================= */

.bge-summary,
.article-summary {
  background: var(--bge-soft);
  border: 1px solid var(--line);
  border-left: 5px solid var(--taupe);
  border-radius: var(--radius-large);
  padding: 30px;
  margin: var(--space-section) 0;
  box-shadow: var(--shadow-soft);
}

.bge-summary h2,
.article-summary h2 {
  margin: 0 0 18px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.bge-summary ul,
.article-summary ul {
  list-style: none;
  padding-left: 0 !important;
  margin: 0 !important;
}

.bge-summary li,
.article-summary li {
  margin-bottom: 12px;
}

.bge-summary li:last-child,
.article-summary li:last-child {
  margin-bottom: 0;
}

.bge-summary a,
.article-summary a {
  color: var(--grey);
  text-decoration: none !important;
  font-weight: 500;
}

.bge-summary a:hover,
.article-summary a:hover {
  color: var(--taupe-dark);
  text-decoration: underline !important;
}

/* =========================================================
   ENCADRÉS
========================================================= */

.bge-callout,
.bge-tip,
.bge-info,
.bge-alert,
.bge-parent,
.bge-baby,
.bge-cta,
.bge-recap,
.article-recap {
  padding: 26px 28px;
  border-radius: var(--radius-large);
  margin: var(--space-block) 0;
  box-shadow: var(--shadow-soft);
}

.bge-callout,
.bge-cta {
  background: var(--bge-soft);
  border: 1px solid var(--line);
}

.bge-tip,
.bge-baby {
  background: var(--bge-green);
  border: 1px solid #E1E8DA;
}

.bge-info {
  background: var(--bge-blue);
  border: 1px solid #DDE8E8;
}

.bge-alert {
  background: var(--bge-alert-bg);
  border: 1px solid #EAD4CC;
}

.bge-parent {
  background: var(--bge-pink);
  border: 1px solid #E8D8DE;
}

.bge-recap,
.article-recap {
  background: var(--bge-light);
  border: 1px solid #E2E2E2;
}

.bge-cta {
  text-align: center;
}

.bge-callout strong,
.bge-tip strong,
.bge-info strong,
.bge-alert strong,
.bge-recap strong,
.article-recap strong,
.bge-parent strong,
.bge-baby strong,
.bge-cta strong {
  color: var(--taupe-dark);
}

.bge-callout p:last-child,
.bge-tip p:last-child,
.bge-info p:last-child,
.bge-alert p:last-child,
.bge-parent p:last-child,
.bge-baby p:last-child,
.bge-cta p:last-child,
.bge-recap p:last-child,
.article-recap p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   LISTES
========================================================= */

body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content ul,
body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content ol,
.bge-article ul,
.bge-article ol {
  margin: 0 0 1.5em 1.2em;
  padding-left: 1.2em;
}

body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content li,
.bge-article li {
  margin-bottom: .75em;
}

.bge-steps,
.bge-checklist {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  margin: 30px 0;
}

.bge-steps li,
.bge-checklist li {
  margin-bottom: .85em;
}

.bge-steps li:last-child,
.bge-checklist li:last-child {
  margin-bottom: 0;
}

/* =========================================================
   TABLEAUX
========================================================= */

.bge-table {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
  font-size: 16px;
  line-height: 1.55;
}

.bge-table th,
.bge-table td {
  border: 1px solid var(--line);
  padding: 14px;
  text-align: left;
  vertical-align: top;
}

.bge-table th {
  background: var(--bge-soft);
  font-weight: 700;
  color: var(--grey);
}

/* =========================================================
   FAQ
========================================================= */

.bge-faq h3 {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin-top: 22px;
  color: var(--taupe-dark);
}

.bge-faq p {
  padding: 0 6px;
}

/* =========================================================
   BESOIN D'ALLER PLUS LOIN
========================================================= */

.bge-aller-plus-loin {
  background: linear-gradient(180deg, #FFFDFB 0%, #FAF8F5 100%);
  border: 1px solid var(--line);
  border-left: 5px solid var(--taupe);
  border-radius: var(--radius-large);
  padding: 34px;
  margin: 48px 0;
  box-shadow: var(--shadow-soft);
}

.bge-aller-plus-loin h2 {
  margin: 0 0 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--line) !important;
  font-family: 'Raleway', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--grey);
}

.bge-aller-plus-loin p {
  margin: 0 0 26px;
  font-family: 'Raleway', sans-serif;
  font-size: var(--font-body);
  line-height: 1.8;
  color: var(--grey);
}

.bge-liens {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bge-liens a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--grey) !important;
  text-decoration: none !important;
  transition: all .25s ease;
}

.bge-liens a::after {
  content: "→";
  flex-shrink: 0;
  font-size: 20px;
  color: var(--taupe-dark);
  transition: transform .25s ease;
}

.bge-liens a:hover {
  background: var(--bge-soft);
  border-color: var(--taupe);
  color: var(--taupe-dark) !important;
  transform: translateX(4px);
  box-shadow: 0 8px 18px rgba(84,84,84,.06);
}

.bge-liens a:hover::after {
  transform: translateX(4px);
}

/* =========================================================
   PARTAGE ARTICLE
========================================================= */

.bge-share-section {
  width: 100%;
  max-width: 800px;
  margin: 48px auto 64px;
  padding: 0 20px;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  color: var(--grey);
}

.bge-share-title {
  margin: 0 0 10px;
  font-family: 'Playfair Display', serif;
  font-size: var(--font-share-title);
  line-height: 1.15;
  font-weight: 700;
  color: var(--grey);
}

.bge-share-subtitle {
  max-width: 520px;
  margin: 0 auto 24px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--grey);
}

.bge-share-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.bge-share-icons a {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ivory);
  border: 1px solid var(--line);
  color: #B9A897;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all .25s ease;
}

.bge-share-icons a:hover {
  transform: translateY(-2px);
  border-color: var(--taupe);
  color: var(--grey);
  box-shadow: 0 8px 18px rgba(84,84,84,.08);
}

/* =========================================================
   LOOP ARTICLES
========================================================= */

.loop-item {
  height: 100%;
  min-height: 420px;
  padding: 0 18px 20px;
  border-radius: var(--radius-large);
  background-color: var(--ivory);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0,0,0,.03);
  transition: all .25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.loop-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--taupe);
}

.loop-item img {
  width: 88%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  margin: 0 auto;
}

.loop-title {
  font-family: 'Raleway', sans-serif;
  font-size: 17.5px;
  font-weight: 700;
  color: var(--grey);
  line-height: 1.3;
  margin: 12px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.loop-excerpt {
  font-family: 'Raleway', sans-serif;
  font-size: 13.5px;
  color: var(--grey);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.loop-button {
  margin-top: auto;
}

.loop-button a {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--grey) !important;
  background: var(--taupe);
  padding: 9px 26px;
  border-radius: 80px;
  text-decoration: none !important;
  display: inline-block;
  margin-top: 14px;
  box-shadow: none !important;
  transition: all .25s ease;
}

.loop-button a:hover {
  background: var(--white);
  border: 1px solid var(--taupe);
  color: var(--taupe-dark) !important;
  box-shadow: none !important;
}

/* =========================================================
   BOUTONS
========================================================= */

.bge-button {
  display: inline-block;
  background: var(--taupe);
  color: var(--white) !important;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none !important;
  font-family: 'Raleway', sans-serif;
  font-size: 15.5px;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 12px;
  transition: all .25s ease;
}

.bge-button:hover {
  background: var(--taupe-dark);
  color: var(--white) !important;
  transform: translateY(-1px);
}

/* =========================================================
   SIGNATURE
========================================================= */

.signature-article {
  text-align: right;
  font-weight: 700;
  margin-top: 40px;
  color: var(--grey);
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
}

/* =========================================================
   RESPONSIVE — GRAND ÉCRAN
========================================================= */

@media (min-width: 1440px) {
  :root {
    --article-width: 840px;
    --hero-width: 940px;
    --font-body: 17.5px;
    --font-hero: 58px;
    --font-h1: 46px;
    --font-h2: 30px;
    --font-h3: 23px;
  }

  .bge-featured-image {
    max-width: 780px;
  }

  .bge-hero-excerpt {
    font-size: 19px;
  }
}

/* =========================================================
   RESPONSIVE — ORDINATEUR / PETIT LAPTOP
========================================================= */

@media (max-width: 1200px) {
  :root {
    --article-width: 820px;
    --hero-width: 900px;
    --font-hero: 50px;
    --font-h1: 42px;
    --font-h2: 27px;
    --font-h3: 21px;
  }
}

/* =========================================================
   RESPONSIVE — TABLETTE
========================================================= */

@media (max-width: 1024px) {
  :root {
    --article-width: 88%;
    --hero-width: 92%;
    --font-body: 16px;
    --font-small: 13.5px;
    --font-meta: 12.5px;
    --font-hero: 44px;
    --font-h1: 38px;
    --font-h2: 26px;
    --font-h3: 20.5px;
    --font-share-title: 26px;
    --space-section: 36px;
    --space-block: 30px;
  }

  .bge-featured-image {
    max-width: 86%;
    margin-bottom: 44px;
  }

  .bge-featured-image img {
    border-radius: 18px;
  }

  .bge-hero-title,
  body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-title .elementor-heading-title {
    max-width: 760px;
    margin-bottom: 24px;
  }

  .bge-hero-excerpt {
    font-size: 17px;
    line-height: 1.7;
  }

  .bge-summary,
  .article-summary {
    padding: 26px;
  }

  .bge-callout,
  .bge-tip,
  .bge-info,
  .bge-alert,
  .bge-parent,
  .bge-baby,
  .bge-cta,
  .bge-recap,
  .article-recap {
    padding: 24px;
  }

  .bge-aller-plus-loin {
    padding: 30px;
    margin: 42px 0;
  }

  .bge-aller-plus-loin h2 {
    font-size: 27px;
  }

  .loop-item {
    min-height: 400px;
    padding: 0 16px 18px;
    border-radius: 20px;
  }

  .loop-item img {
    width: 90%;
    height: 200px;
    border-radius: 15px;
  }

  .loop-title {
    font-size: 16px;
  }

  .loop-excerpt {
    font-size: 13px;
  }

  .loop-button a {
    font-size: 13.5px;
    padding: 8px 24px;
    margin-top: 12px;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE LARGE
========================================================= */

@media (max-width: 767px) {
  :root {
    --article-width: 90%;
    --hero-width: 94%;
    --font-body: 15.5px;
    --font-small: 13px;
    --font-meta: 12px;
    --font-hero: 36px;
    --font-h1: 32px;
    --font-h2: 24px;
    --font-h3: 20px;
    --font-share-title: 24px;
    --radius-large: 18px;
    --space-section: 30px;
    --space-block: 26px;
  }

  .bge-featured-image {
    max-width: 90%;
    margin-bottom: 34px;
  }

  .bge-featured-image img {
    border-radius: 16px;
  }

  .bge-category,
  body.single-post:not(.elementor-editor-active) .bge-category {
    letter-spacing: 2px;
    margin-bottom: 14px;
  }

  .bge-hero-title,
  body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-title .elementor-heading-title {
    line-height: 1.18;
    text-align: left;
    margin-bottom: 22px;
  }

  .bge-hero-excerpt {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 24px;
  }

  .bge-hero-meta {
    font-size: 13px;
    margin-bottom: 30px;
  }

  body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content h2,
  .bge-article h2 {
    margin-top: 56px;
  }

  body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content p,
  .bge-article p {
    margin-bottom: 22px;
  }

  body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content ul,
  body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-content ol,
  .bge-article ul,
  .bge-article ol {
    margin-left: .85em;
    padding-left: 1em;
  }

  .bge-category-hero {
    max-width: 92%;
    padding: 28px 22px;
    border-radius: 18px;
  }

  .bge-category-title {
    font-size: 28px;
  }

  .bge-category-intro {
    font-size: 15.5px;
  }

  .bge-category-text {
    font-size: 15px;
  }

  .bge-summary,
  .article-summary,
  .bge-callout,
  .bge-tip,
  .bge-info,
  .bge-alert,
  .bge-parent,
  .bge-baby,
  .bge-cta,
  .bge-recap,
  .article-recap,
  .bge-steps,
  .bge-checklist {
    padding: 20px;
    border-radius: 18px;
  }

  .bge-summary,
  .article-summary {
    border-left-width: 4px;
  }

  .bge-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    font-size: 14px;
    -webkit-overflow-scrolling: touch;
  }

  .bge-table th,
  .bge-table td {
    padding: 10px;
    min-width: 140px;
  }

  .bge-faq h3 {
    font-size: 18px;
    padding: 14px 16px;
  }

  .bge-aller-plus-loin {
    padding: 24px;
    border-radius: 18px;
    margin: 36px 0;
    border-left-width: 4px;
  }

  .bge-aller-plus-loin h2 {
    font-size: 24px;
    margin-bottom: 16px !important;
  }

  .bge-aller-plus-loin p {
    font-size: 15.5px;
    margin-bottom: 22px;
  }

  .bge-liens {
    gap: 12px;
  }

  .bge-liens a {
    padding: 14px 16px;
    font-size: 15px;
    gap: 14px;
  }

  .bge-liens a:hover {
    transform: none;
  }

  .bge-share-section {
    max-width: 600px;
    margin: 42px auto 56px;
    padding: 0 18px;
  }

  .bge-share-subtitle {
    font-size: 14px;
  }

  .loop-item {
    min-height: 360px;
    padding: 0 14px 16px;
    border-radius: 18px;
  }

  .loop-item img {
    width: 94%;
    height: 180px;
    border-radius: 14px;
  }

  .loop-title {
    font-size: 15px;
    margin: 10px 0 6px;
  }

  .loop-excerpt {
    font-size: 12.8px;
    margin-bottom: 4px;
  }

  .loop-button a {
    width: 100%;
    text-align: center;
    font-size: 13px;
    padding: 9px 0;
    margin-top: 8px;
  }

  .bge-button {
    width: 100%;
    text-align: center;
    font-size: 15px;
    padding: 13px 20px;
  }

  .signature-article {
    font-size: 14px;
    margin-top: 32px;
  }
}

/* =========================================================
   RESPONSIVE — PETIT MOBILE
========================================================= */

@media (max-width: 480px) {
  :root {
    --article-width: 90%;
    --hero-width: 94%;
    --font-body: 15px;
    --font-hero: 32px;
    --font-h1: 29px;
    --font-h2: 22px;
    --font-h3: 18.5px;
    --font-share-title: 22px;
  }

  .bge-featured-image {
    max-width: 92%;
    margin-bottom: 30px;
  }

  .bge-hero-title,
  body.single-post:not(.elementor-editor-active) .elementor-widget-theme-post-title .elementor-heading-title {
    margin-bottom: 18px;
  }

  .bge-hero-excerpt {
    font-size: 15.5px;
  }

  .bge-category-hero {
    padding: 24px 18px;
  }

  .bge-category-title {
    font-size: 25px;
  }

  .bge-summary,
  .article-summary,
  .bge-callout,
  .bge-tip,
  .bge-info,
  .bge-alert,
  .bge-parent,
  .bge-baby,
  .bge-cta,
  .bge-recap,
  .article-recap,
  .bge-steps,
  .bge-checklist,
  .bge-aller-plus-loin {
    padding: 18px;
    border-radius: 16px;
  }

  .bge-aller-plus-loin h2 {
    font-size: 22px;
  }

  .bge-liens a {
    font-size: 14.5px;
    padding: 13px 14px;
  }

  .bge-share-section {
    max-width: 90%;
    margin: 36px auto 48px;
    padding: 0 16px;
  }

  .bge-share-title {
    line-height: 1.15;
  }

  .bge-share-subtitle {
    font-size: 13.5px;
    line-height: 1.55;
  }

  .bge-share-icons {
    gap: 12px;
  }

  .bge-share-icons a {
    width: 38px;
    height: 38px;
  }

  .loop-item {
    min-height: 340px;
  }

  .loop-item img {
    height: 155px;
  }
}

/* =========================================================
   DESIGN SYSTEM 1.1 — TYPOGRAPHIE, MENU, BOUTONS ET FOOTER
========================================================= */

:root {
  --bge-ink: #242424;
  --bge-ink-soft: #545454;
  --bge-accent: #cdc1b1;
  --bge-accent-dark: #8a7766;
  --bge-sand: #e6e0da;
  --bge-cream: #fffdfb;
  --bge-cream-deep: #ffffff;
  --bge-white: #ffffff;
  --bge-border: #e8dfd6;
  --bge-focus: #6f5c4b;
  --bge-radius: 18px;
  --bge-pill: 999px;
  --bge-shadow: 0 12px 34px rgba(73, 69, 65, 0.08);
}

/* Titres éditoriaux */
body:not(.elementor-editor-active) h1,
body:not(.elementor-editor-active) h2,
body:not(.elementor-editor-active) h3,
body:not(.elementor-editor-active) .elementor-heading-title,
body:not(.elementor-editor-active) .bge-hero-title,
body:not(.elementor-editor-active) .bge-share-title,
body:not(.elementor-editor-active) .bge-category-title {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--bge-ink);
  text-wrap: balance;
}

body:not(.elementor-editor-active) h1,
body:not(.elementor-editor-active) .bge-hero-title {
  letter-spacing: -0.025em;
}

body:not(.elementor-editor-active) h2,
body:not(.elementor-editor-active) h3 {
  letter-spacing: -0.012em;
}

/* Menu principal */
body:not(.elementor-editor-active) .elementor-location-header,
body:not(.elementor-editor-active) .site-header,
body:not(.elementor-editor-active) .bge-header {
  position: relative;
  z-index: 30;
  border: 0;
  background: var(--bge-white);
  box-shadow: none;
}

body:not(.elementor-editor-active) .elementor-location-header .elementor-nav-menu--main .elementor-item {
  position: relative;
  padding-block: 10px;
  color: var(--bge-ink) !important;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
}

body:not(.elementor-editor-active) .elementor-location-header .elementor-nav-menu--main .elementor-item::after {
  display: block !important;
  right: 50%;
  bottom: 3px;
  left: 50%;
  height: 1px;
  content: "" !important;
  background: var(--bge-accent);
  opacity: 1 !important;
  transition: right 0.22s ease, left 0.22s ease;
}

body:not(.elementor-editor-active) .elementor-location-header .elementor-nav-menu--main .elementor-item:hover::after,
body:not(.elementor-editor-active) .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  right: 18%;
  left: 18%;
}

body:not(.elementor-editor-active) .elementor-location-header .elementor-nav-menu--dropdown {
  overflow: hidden;
  border: 0 !important;
  border-radius: 0;
  background: var(--bge-white) !important;
  box-shadow: 0 10px 24px rgba(36, 36, 36, 0.05) !important;
}

body:not(.elementor-editor-active) .elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
  padding: 13px 17px;
  border: 0;
  color: var(--bge-ink) !important;
}

body:not(.elementor-editor-active) .elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
body:not(.elementor-editor-active) .elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  background: var(--bge-cream) !important;
  color: var(--bge-accent-dark) !important;
}

/* Pied de page */
body:not(.elementor-editor-active) .elementor-location-footer,
body:not(.elementor-editor-active) .site-footer {
  border: 0;
  background: var(--bge-white);
  color: var(--bge-ink-soft);
}

body:not(.elementor-editor-active) .elementor-location-footer h2,
body:not(.elementor-editor-active) .elementor-location-footer h3,
body:not(.elementor-editor-active) .elementor-location-footer .elementor-heading-title {
  color: var(--bge-ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
}

body:not(.elementor-editor-active) .elementor-location-footer p,
body:not(.elementor-editor-active) .elementor-location-footer li,
body:not(.elementor-editor-active) .elementor-location-footer a {
  font-family: "Raleway", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.75;
}

body:not(.elementor-editor-active) .elementor-location-footer a {
  color: var(--bge-ink-soft);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

body:not(.elementor-editor-active) .elementor-location-footer a:hover,
body:not(.elementor-editor-active) .elementor-location-footer a:focus-visible {
  color: var(--bge-accent-dark);
  text-decoration: underline;
}

body:not(.elementor-editor-active) :focus-visible {
  outline: 2px solid var(--bge-focus);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  body:not(.elementor-editor-active) .elementor-location-footer {
    text-align: center;
  }
}

/* =========================================================
   ACCUEIL — HERO GÉNÉRAL BABYGREENEXPERT
   Classe à placer sur le conteneur : bge-home-hero
========================================================= */

.bge-home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
}

.bge-home-hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(30, 27, 24, 0.58) 0%,
    rgba(30, 27, 24, 0.42) 55%,
    rgba(30, 27, 24, 0.28) 100%
  );
}

.bge-home-hero > *,
.bge-home-hero .e-con-inner {
  position: relative;
  z-index: 1;
}

.bge-home-hero .elementor-heading-title,
.bge-home-hero h1,
.bge-home-hero h2,
.bge-home-hero h3,
.bge-home-hero p,
.bge-home-hero .elementor-widget-text-editor,
.bge-home-hero .elementor-widget-text-editor p {
  color: #ffffff !important;
}

.bge-home-hero h1,
.bge-home-hero h2,
.bge-home-hero .elementor-heading-title {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
  .bge-home-hero {
    border-radius: 18px;
  }

  .bge-home-hero::before {
    background: rgba(30, 27, 24, 0.48);
  }
}