/*
 Theme Name:   Bebekadom Child
 Theme URI:    https://bebekadom.com
 Description:  Theme enfant Astra — design Bebekadom creme/rose/sage/mustard fidele a la maquette
 Author:       Bebekadom
 Author URI:   https://bebekadom.com
 Template:     astra
 Version:      3.0.0
 Text Domain:  bebekadom-child
*/

/* ===================================================================
   PALETTE — exactement celle de la maquette bebekadom3.html
   =================================================================== */
:root {
  /* Surfaces */
  --cream:      #FDF8F2;
  --milk:       #FFFCF7;

  /* Texte */
  --ink:        #1E1B16;

  /* Accent rose */
  --rose:       #F4C2C2;
  --rose-deep:  #E89B9B;

  /* Peach (soulignements) */
  --peach:      #FFD4B8;

  /* Sage / vert doux */
  --sage:       #B8CFB1;
  --sage-deep:  #7BA070;

  /* Moutarde / etoiles */
  --mustard:    #E8B84A;

  /* Bleu ciel (accents secondaires) */
  --sky:        #BFD9E8;

  /* Prune (badges premium) */
  --plum:       #5B3A4F;

  /* Lignes & bordures */
  --line:       rgba(30,27,22,.12);

  /* Ombres douces */
  --shadow-sm:  0 4px 20px rgba(30,27,22,.05);
  --shadow-md:  0 16px 40px rgba(30,27,22,.08);
  --shadow-lg:  0 30px 60px rgba(30,27,22,.10);
}

/* ===================================================================
   BASE — body, texte, liens
   =================================================================== */
body {
  font-family: 'Outfit', sans-serif !important;
  background: var(--cream) !important;
  color: var(--ink) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  overflow-x: hidden !important;
}

/* Grain texture subtile (papier) */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1000;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Selection texte */
::selection {
  background: rgba(244,194,194,.35) !important;
  color: var(--ink) !important;
}

/* Liens globaux */
a { color: inherit !important; text-decoration: none !important; }
a:hover { color: var(--rose-deep) !important; }

/* ===================================================================
   TYPOGRAPHIE — Fraunces (display/serif) + Outfit (body/sans)
   =================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.page-title,
.ast-archive-title {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--ink) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}
h1, .entry-title { font-weight: 400 !important; }
h2 { font-weight: 400 !important; }
h3 { font-weight: 500 !important; }
h4, h5, h6 { font-weight: 500 !important; }

/* Italique rose (style editorial) — <em> dans les headings */
h1 em, h2 em, h3 em, h4 em {
  font-style: italic !important;
  color: var(--rose-deep) !important;
  font-weight: 300 !important;
}

/* ===================================================================
   HEADER STICKY — fond creme semi-transparent + blur
   =================================================================== */
.site-title a,
.ast-site-identity .site-title a {
  font-family: 'Fraunces', serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
}
.ast-primary-header-bar,
.ast-header-sticked,
#ast-desktop-header .ast-main-header-wrap {
  background: rgba(253,248,242,.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
/* Navigation links */
.main-header-menu .menu-item > a,
.ast-header-navigation .menu-link,
.ast-nav-menu .menu-item > a {
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  transition: color .2s !important;
}
.main-header-menu .menu-item > a:hover,
.ast-nav-menu .menu-item > a:hover {
  color: var(--rose-deep) !important;
}
/* Bouton CTA header — pilule noire */
.ast-header-button-1 a,
.ast-custom-button,
.ast-header-button a {
  background: var(--ink) !important;
  color: var(--cream) !important;
  padding: 11px 22px !important;
  border-radius: 100px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all .25s !important;
  border: none !important;
}
.ast-header-button-1 a:hover,
.ast-custom-button:hover,
.ast-header-button a:hover {
  background: var(--rose-deep) !important;
  color: var(--cream) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(232,155,155,.35) !important;
}

/* ===================================================================
   BOUTONS GLOBAUX — pilule noire → rose-deep au hover
   =================================================================== */
.wp-block-button__link,
.ast-btn,
input[type="submit"],
a.button,
.elementor-button {
  background: var(--ink) !important;
  color: var(--cream) !important;
  padding: 17px 30px !important;
  border-radius: 100px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border: none !important;
  transition: all .3s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.wp-block-button__link:hover,
.ast-btn:hover,
input[type="submit"]:hover,
a.button:hover,
.elementor-button:hover {
  background: var(--rose-deep) !important;
  color: var(--cream) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(232,155,155,.4) !important;
}
/* Bouton outline / ghost — souligne */
.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--ink) !important;
  border: none !important;
  border-bottom: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 17px 24px !important;
  box-shadow: none !important;
}
.is-style-outline .wp-block-button__link:hover {
  color: var(--rose-deep) !important;
  border-color: var(--rose-deep) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ===================================================================
   CARDS ARTICLES — fond milk, radius 24px, hover lift
   =================================================================== */
.ast-article-post,
.ast-article-single {
  background: var(--milk) !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all .3s !important;
}
.ast-article-post:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}
/* Badge categorie */
.cat-links a,
.entry-meta .cat-links a {
  background: var(--cream) !important;
  color: var(--rose-deep) !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  border: 1px solid var(--line) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.cat-links a:hover {
  background: var(--rose) !important;
  border-color: var(--rose) !important;
  color: var(--ink) !important;
}

/* ===================================================================
   CONTENU ARTICLE — typographie editoriale
   =================================================================== */
.entry-content {
  font-size: 17px !important;
  line-height: 1.75 !important;
}
.entry-content p {
  max-width: 72ch !important;
}
.entry-content h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem) !important;
  margin-top: 3rem !important;
  margin-bottom: 1rem !important;
}
.entry-content h3 {
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  margin-top: 2rem !important;
  margin-bottom: .75rem !important;
}

/* ===================================================================
   TABLES COMPARATIFS — header ink/cream, hover creme, radius
   =================================================================== */
.entry-content table,
.wp-block-table table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.5rem 0 !important;
  background: var(--milk) !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}
.entry-content table thead th,
.wp-block-table table thead th {
  background: var(--ink) !important;
  color: var(--cream) !important;
  padding: 16px 20px !important;
  text-align: left !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-weight: 600 !important;
  font-family: 'Outfit', sans-serif !important;
}
.entry-content table td,
.wp-block-table table td {
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--line) !important;
  vertical-align: top !important;
  font-size: .9rem !important;
}
.entry-content table tr:hover,
.wp-block-table table tr:hover {
  background: var(--cream) !important;
}
.entry-content table tr:last-child td {
  border-bottom: none !important;
}

/* ===================================================================
   BLOCKQUOTES / CONSEILS — trait rose, fond milk
   =================================================================== */
.entry-content blockquote,
.wp-block-quote {
  background: var(--milk) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--rose-deep) !important;
  border-radius: 0 18px 18px 0 !important;
  padding: 24px 28px !important;
  margin: 2rem 0 !important;
  font-size: .95rem !important;
  font-style: normal !important;
  color: var(--ink) !important;
}
.wp-block-quote p { margin: 0 !important; }
.wp-block-quote cite {
  font-size: .8rem !important;
  color: var(--rose-deep) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* ===================================================================
   COLONNES PROS/CONS — cards milk separees
   =================================================================== */
.wp-block-columns { gap: 20px !important; margin: 1.5rem 0 !important; }
.wp-block-column {
  background: var(--milk) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 24px !important;
}

/* ===================================================================
   BADGES COULEURS — rose, sage, mustard, plum
   =================================================================== */
.stars { color: var(--mustard) !important; letter-spacing: 2px !important; }

/* Custom badge classes (pour article Gutenberg) */
.badge-sage,
.comp-badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--sage);
  color: var(--ink);
  font-weight: 600;
}
.badge-mustard, .comp-badge.deal { background: var(--mustard); }
.badge-rose, .comp-badge.rose { background: var(--rose); }
.badge-plum, .comp-badge.premium { background: var(--plum); color: var(--cream); }
.badge-sky { background: var(--sky); color: var(--ink); }

/* ===================================================================
   WIDGETS / SIDEBAR
   =================================================================== */
.widget {
  background: var(--milk) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}
.widget-title {
  font-family: 'Fraunces', serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}

/* ===================================================================
   FOOTER — fond milk, eyebrows rose-deep
   =================================================================== */
.ast-footer,
.site-footer,
.ast-footer-overlay {
  background: var(--milk) !important;
  border-top: 1px solid var(--line) !important;
}
.ast-small-footer {
  background: var(--milk) !important;
  color: #7a766f !important;
  font-size: 12px !important;
}
.ast-small-footer a { color: #4a4640 !important; }
.ast-small-footer a:hover { color: var(--rose-deep) !important; }
.footer-widget-area .widget-title,
.ast-footer .widget-title {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--rose-deep) !important;
  font-weight: 700 !important;
  font-family: 'Outfit', sans-serif !important;
}
.ast-footer ul li a { color: #4a4640 !important; font-size: 13px !important; }
.ast-footer ul li a:hover { color: var(--rose-deep) !important; }

/* ===================================================================
   NEWSLETTER — fond rose, decorations peach + mustard
   =================================================================== */
.newsletter-section,
.wp-block-group.newsletter {
  background: var(--rose) !important;
  border-radius: 32px !important;
  padding: 70px 50px !important;
  text-align: center !important;
  max-width: 1240px !important;
  margin: 0 auto 80px !important;
  position: relative !important;
  overflow: hidden !important;
}
.newsletter-section h2 {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(32px, 4.5vw, 52px) !important;
  font-weight: 400 !important;
}

/* ===================================================================
   EYEBROW LABELS — rose-deep, uppercase, ligne
   =================================================================== */
.eyebrow,
.wp-block-group.eyebrow,
.entry-content .eyebrow {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .15em !important;
  color: var(--rose-deep) !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.eyebrow::before {
  content: "" !important;
  width: 30px !important;
  height: 1px !important;
  background: var(--rose-deep) !important;
}

/* ===================================================================
   FORMS — inputs cohérents
   =================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
  background: var(--milk) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  transition: border-color .2s !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--rose-deep) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(232,155,155,.2) !important;
}
input::placeholder, textarea::placeholder {
  color: #8a857e !important;
}

/* ===================================================================
   BREADCRUMBS Astra
   =================================================================== */
.ast-breadcrumbs,
.ast-breadcrumbs-wrapper {
  font-size: 12px !important;
  color: #7a766f !important;
}
.ast-breadcrumbs a { color: var(--rose-deep) !important; }
.ast-breadcrumbs a:hover { color: var(--ink) !important; }

/* ===================================================================
   PAGINATION
   =================================================================== */
.ast-pagination .page-numbers {
  background: var(--milk) !important;
  border: 1px solid var(--line) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  transition: all .2s !important;
}
.ast-pagination .page-numbers.current,
.ast-pagination .page-numbers:hover {
  background: var(--ink) !important;
  color: var(--cream) !important;
  border-color: var(--ink) !important;
}

/* ===================================================================
   IMAGES — radius doux
   =================================================================== */
.entry-content img,
.wp-block-image img {
  border-radius: 18px !important;
}
.post-thumbnail img,
.attachment-ast-featured-img {
  border-radius: 24px 24px 0 0 !important;
}

/* ===================================================================
   CODE BLOCKS
   =================================================================== */
.entry-content code,
.entry-content pre {
  background: var(--milk) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  font-size: .85rem !important;
  padding: 2px 8px !important;
}
.entry-content pre {
  padding: 20px !important;
  overflow-x: auto !important;
}

/* ===================================================================
   COMMENTS
   =================================================================== */
.comments-area .comment-body {
  background: var(--milk) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
}
.comment-author .fn { font-weight: 600 !important; }
.comment-metadata { font-size: 12px !important; color: #7a766f !important; }

/* ===================================================================
   DISCLOSURE AFFILIE (injecte via functions.php)
   =================================================================== */
.affiliate-disclosure {
  margin-top: 2.5rem !important;
  font-size: 12px !important;
  color: #7a766f !important;
  text-align: center !important;
  font-style: italic !important;
  background: rgba(30,27,22,.03) !important;
  border: 1px solid rgba(30,27,22,.08) !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
}

/* ===================================================================
   TABLE OF CONTENTS (plugin)
   =================================================================== */
#toc_container {
  background: var(--milk) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  margin-bottom: 2rem !important;
}
#toc_container .toc_title {
  font-family: 'Fraunces', serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}
#toc_container a {
  color: var(--ink) !important;
  font-size: 14px !important;
}
#toc_container a:hover { color: var(--rose-deep) !important; }

/* ===================================================================
   MOBILE RESPONSIVE
   =================================================================== */
@media (max-width: 980px) {
  body { font-size: 16px !important; }
  .entry-content h2 { font-size: 1.4rem !important; }
  .wp-block-columns { flex-direction: column !important; }
  .wp-block-table { overflow-x: auto !important; display: block !important; }
  .newsletter-section,
  .wp-block-group.newsletter {
    padding: 40px 24px !important;
    margin: 0 16px 40px !important;
    border-radius: 24px !important;
  }
}
@media (max-width: 544px) {
  .ast-header-button-1 a { padding: 9px 16px !important; font-size: 12px !important; }
  .wp-block-button__link { padding: 14px 24px !important; font-size: 14px !important; }
  .entry-content table td,
  .wp-block-table table td { padding: 12px 14px !important; font-size: .85rem !important; }
}