/*
Theme Name: Yebou Child (E-YEBOU)
Theme URI: https://e-yebou.com/
Description: Thème enfant Astra sur-mesure pour E-YEBOU — la marketplace béninoise. Optimisé conversion, vitesse, SEO, GEO (moteurs IA) et AIO. Couleur de marque #009FE3.
Author: Elimboo
Author URI: https://elimboo.com/
Template: astra
Version: 1.7.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yebou-child
*/

/* =====================================================================
   1. SYSTÈME DE MARQUE (tokens) — dérivé du logo Yebou (#009FE3)
   ===================================================================== */
:root{
  --yb-azur:        #009FE3;   /* couleur principale (logo) */
  --yb-azur-dark:   #0077B0;   /* survol / liens actifs */
  --yb-azur-soft:   #E6F5FD;   /* fonds doux, surlignages */
  --yb-action:      #FF6B00;   /* ORANGE D'ACTION : "Ajouter au panier", "Commander" */
  --yb-action-dark: #E25C00;
  --yb-success:     #12B76A;   /* paiement sécurisé, en stock, livraison */
  --yb-success-soft:#E7F8F0;
  --yb-ink:         #0F2433;   /* texte principal */
  --yb-muted:       #5B6B75;   /* texte secondaire */
  --yb-line:        #E3EBF0;   /* bordures */
  --yb-surface:     #FFFFFF;
  --yb-bg:          #F5F8FB;   /* fond de page bleuté très clair */
  --yb-radius:      14px;
  --yb-radius-sm:   10px;
  --yb-shadow:      0 6px 24px rgba(15,36,51,.08);
  --yb-shadow-hover:0 14px 38px rgba(0,159,227,.18);
  --yb-font-title:  "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --yb-font-body:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* =====================================================================
   2. TYPOGRAPHIE
   ===================================================================== */
body, .ast-container{ font-family: var(--yb-font-body); color: var(--yb-ink); }
h1,h2,h3,h4,h5,h6,.entry-title,.site-title,
.woocommerce-loop-product__title,.product_title{
  font-family: var(--yb-font-title); font-weight: 700; letter-spacing: -.01em; color: var(--yb-ink);
}
a{ color: var(--yb-azur); }
a:hover, a:focus{ color: var(--yb-azur-dark); }

/* Accessibilité : focus visible au clavier */
a:focus-visible, button:focus-visible, input:focus-visible, .button:focus-visible{
  outline: 3px solid var(--yb-azur); outline-offset: 2px;
}

/* =====================================================================
   3. BOUTONS — l'azur pour la navigation, l'ORANGE pour passer à l'action
   ===================================================================== */
.button, button, input[type="submit"],
.wp-block-button__link, .ast-button{
  font-family: var(--yb-font-title); font-weight: 600; border-radius: var(--yb-radius-sm);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover{ transform: translateY(-1px); }

/* Boutons d'achat = orange contrasté (déclencheur d'action) */
.woocommerce a.button.add_to_cart_button,
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.single_add_to_cart_button,
.checkout-button{
  background: var(--yb-action) !important; color:#fff !important; border:0 !important;
  box-shadow: 0 6px 16px rgba(255,107,0,.28);
}
.woocommerce a.button.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background: var(--yb-action-dark) !important;
}

/* =====================================================================
   4. CARTES PRODUIT — claires, prix lisible, photo qui respire
   ===================================================================== */
.woocommerce ul.products li.product{
  background: var(--yb-surface); border:1px solid var(--yb-line);
  border-radius: var(--yb-radius); padding: 12px; box-shadow: var(--yb-shadow);
  transition: box-shadow .2s ease, transform .12s ease; overflow:hidden;
}
.woocommerce ul.products li.product:hover{ box-shadow: var(--yb-shadow-hover); transform: translateY(-3px); }
.woocommerce ul.products li.product img{ border-radius: var(--yb-radius-sm); }
.woocommerce ul.products li.product .price{ color: var(--yb-ink); font-weight:700; font-family: var(--yb-font-title); }
.woocommerce ul.products li.product .price del{ color: var(--yb-muted); font-weight:400; }
.woocommerce ul.products li.product .price ins{ color: var(--yb-action); text-decoration:none; }

/* Badge promo */
.woocommerce span.onsale{
  background: var(--yb-action); color:#fff; border-radius: 999px;
  font-family: var(--yb-font-title); font-weight:600; min-height: auto; padding: 4px 12px; line-height:1.4;
}

/* Étoiles de notation à la couleur de marque */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before{ color: var(--yb-action); }

/* =====================================================================
   5. BANDEAU DE CONFIANCE (réassurance) — généré par inc/woo-conversion.php
   ===================================================================== */
.yb-trust{
  display:flex; flex-wrap:wrap; gap:10px; margin:18px 0;
}
.yb-trust .yb-trust__item{
  display:flex; align-items:center; gap:8px; flex:1 1 180px;
  background: var(--yb-success-soft); border:1px solid #CDEFDD;
  border-radius: var(--yb-radius-sm); padding:10px 12px;
  font-size:14px; font-weight:600; color:#0B6B43; font-family: var(--yb-font-body);
}
.yb-trust .yb-trust__item svg{ flex:0 0 auto; }
.yb-trust--azur .yb-trust__item{ background: var(--yb-azur-soft); border-color:#C5E9FA; color: var(--yb-azur-dark); }

/* Encadré livraison / paiement à la livraison sur la fiche produit */
.yb-deliverybox{
  border:1px dashed var(--yb-azur); background: var(--yb-azur-soft);
  border-radius: var(--yb-radius); padding:14px 16px; margin:16px 0; font-size:14.5px; color: var(--yb-ink);
}
.yb-deliverybox strong{ color: var(--yb-azur-dark); }

/* =====================================================================
   6. BOUTON "COMMANDER SUR WHATSAPP" (fiche produit)
   ===================================================================== */
.yb-wa-order{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:12px; padding:14px 18px;
  background:#25D366; color:#fff !important; font-family: var(--yb-font-title); font-weight:700;
  border-radius: var(--yb-radius-sm); text-decoration:none; box-shadow:0 6px 16px rgba(37,211,102,.30);
}
.yb-wa-order:hover{ background:#1FB855; color:#fff; }

/* Bouton WhatsApp flottant (tout le site) */
.yb-wa-float{
  position:fixed; right:18px; bottom:20px; z-index:9990;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(37,211,102,.45); transition: transform .15s ease;
}
.yb-wa-float:hover{ transform: scale(1.06); }
.yb-wa-float svg{ width:30px; height:30px; }

/* =====================================================================
   7. BARRE D'ACHAT COLLANTE — mobile (fiche produit)
   ===================================================================== */
.yb-sticky-buy{
  position:fixed; left:0; right:0; bottom:0; z-index:9980;
  display:none; gap:10px; padding:10px 12px;
  background:#fff; border-top:1px solid var(--yb-line); box-shadow:0 -6px 20px rgba(15,36,51,.10);
}
.yb-sticky-buy .yb-sticky-price{ font-family:var(--yb-font-title); font-weight:700; align-self:center; white-space:nowrap; }
.yb-sticky-buy a{
  flex:1; text-align:center; padding:13px 10px; border-radius:10px;
  background:var(--yb-action); color:#fff !important; font-family:var(--yb-font-title); font-weight:700; text-decoration:none;
}
@media (max-width: 768px){
  body.single-product .yb-sticky-buy{ display:flex; }
  body.single-product{ padding-bottom:74px; }
  .yb-wa-float{ bottom:84px; }
}

/* =====================================================================
   8. EN-TÊTE / DIVERS
   ===================================================================== */
.site-header{ box-shadow:0 2px 14px rgba(15,36,51,.05); }
.ast-site-identity img{ max-height:48px; width:auto; }
body{ background: var(--yb-bg); }

/* Fil d'Ariane discret (utile SEO + UX) */
.woocommerce-breadcrumb{ color: var(--yb-muted); font-size:13.5px; }

/* Avis / témoignages : carte propre */
.wp-block-quote, blockquote{ border-left:4px solid var(--yb-azur); background:#fff; border-radius:0 var(--yb-radius) var(--yb-radius) 0; }

/* =====================================================================
   10. BARRE D'ANNONCE EN-TÊTE (top bar) + correctif footer Astra
   ===================================================================== */
.yb-topbar{
  background: var(--yb-azur); color:#fff; font-size:13.5px; font-weight:500;
}
.yb-topbar__in{
  max-width:1180px; margin:0 auto; padding:8px 20px;
  display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; text-align:center;
}
.yb-topbar span{ display:inline-flex; align-items:center; gap:6px; }
.yb-topbar a{ color:#fff; text-decoration:none; font-weight:600; }
.yb-topbar a:hover{ text-decoration:underline; }
@media (max-width:600px){ .yb-topbar__in{ gap:12px; font-size:12.5px; } }

/* On masque la barre de copyright Astra par défaut ("Propulsé par Astra") :
   notre pied de page de marque la remplace. */
.site-below-footer-wrap.ast-builder-grid-row-container,
.ast-small-footer{ display:none !important; }

/* Le hero "Yebou" ne déborde plus : limite la hauteur de la première section. */
.yb-eserv__media img{ width:100%; height:100%; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* =====================================================================
   11. PAGES E-YEBOU (gabarit template-yebou-page.php) — design "au top"
   ===================================================================== */
.yb-page{ font-family: var(--yb-font-body); color: var(--yb-ink); }
.yb-page__hero{
  width:100%;
  background:linear-gradient(120deg,#009FE3,#0077B0); color:#fff; padding:60px 20px; text-align:center; margin-bottom:42px;
}
.yb-page__hero-in{ max-width:860px; margin:0 auto; }
.yb-page__eyebrow{ display:inline-block; background:rgba(255,255,255,.16); padding:6px 14px; border-radius:999px; font-weight:600; font-size:13.5px; margin-bottom:14px; }
.yb-page__hero h1{ color:#fff; font-family:var(--yb-font-title); font-weight:700; font-size:clamp(28px,4vw,46px); margin:0; line-height:1.1; }
.yb-page__hero p{ margin:16px auto 0; max-width:62ch; opacity:.95; font-size:17px; }
.yb-page__body{ max-width:920px; margin:0 auto; padding:0 20px 20px; }
.yb-page__body h2{ font-family:var(--yb-font-title); font-weight:700; font-size:clamp(22px,2.6vw,30px); margin:40px 0 14px; }
.yb-page__body h3{ font-family:var(--yb-font-title); font-weight:600; font-size:19px; margin:22px 0 8px; }
.yb-page__body p{ font-size:16.5px; line-height:1.75; color:#33424d; }
.yb-page__body a{ color:var(--yb-azur-dark); }
.yb-lead{ font-size:19px !important; color:var(--yb-ink) !important; }
.yb-note{ border-radius:14px; padding:16px 18px; margin:18px 0; font-size:15.5px; line-height:1.6; }
.yb-note--info{ background:var(--yb-azur-soft); border:1px solid #C5E9FA; }
.yb-note--warn{ background:#FFF6EE; border:1px solid #FFD9B3; }
.yb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:20px 0; }
.yb-grid--2{ grid-template-columns:repeat(2,1fr); }
.yb-card2{ background:#fff; border:1px solid var(--yb-line); border-radius:14px; padding:22px; box-shadow:0 6px 18px rgba(15,36,51,.06); }
.yb-card2 .ic{ width:46px; height:46px; border-radius:12px; background:var(--yb-azur-soft); color:var(--yb-azur); display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:22px; font-weight:700; }
.yb-card2 h3{ margin:0 0 6px; font-size:17px; }
.yb-card2 p{ margin:0; font-size:14.5px; color:var(--yb-muted); }
.yb-steps{ list-style:none; counter-reset:s; padding:0; margin:20px 0; }
.yb-steps li{ counter-increment:s; position:relative; padding:15px 16px 15px 66px; background:#fff; border:1px solid var(--yb-line); border-radius:12px; margin-bottom:12px; font-size:16px; line-height:1.6; }
.yb-steps li::before{ content:counter(s); position:absolute; left:16px; top:14px; width:34px; height:34px; border-radius:50%; background:var(--yb-azur); color:#fff; font-family:var(--yb-font-title); font-weight:700; display:flex; align-items:center; justify-content:center; }
.yb-checks{ list-style:none; padding:0; margin:16px 0; }
.yb-checks li{ position:relative; padding:9px 0 9px 32px; font-size:16px; border-bottom:1px solid #EEF3F6; }
.yb-checks li::before{ content:"✓"; position:absolute; left:0; top:9px; color:var(--yb-success); font-weight:800; }
.yb-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin:28px 0; }
.yb-cta-row a{ display:inline-flex; align-items:center; gap:8px; font-family:var(--yb-font-title); font-weight:600; padding:14px 24px; border-radius:12px; text-decoration:none; transition:transform .12s ease; }
.yb-cta-row a:hover{ transform:translateY(-2px); }
.yb-cta-row a.primary{ background:var(--yb-action); color:#fff; box-shadow:0 8px 20px rgba(255,107,0,.28); }
.yb-cta-row a.secondary{ background:var(--yb-azur); color:#fff; }
.yb-faq{ margin:18px 0; }
.yb-faq details{ background:#fff; border:1px solid var(--yb-line); border-radius:12px; margin-bottom:10px; overflow:hidden; }
.yb-faq summary{ cursor:pointer; padding:16px 18px; font-family:var(--yb-font-title); font-weight:600; list-style:none; position:relative; }
.yb-faq summary::-webkit-details-marker{ display:none; }
.yb-faq summary::after{ content:"+"; position:absolute; right:18px; color:var(--yb-azur); font-size:20px; }
.yb-faq details[open] summary::after{ content:"–"; }
.yb-faq .a{ padding:0 18px 16px; color:#33424d; line-height:1.6; }
.yb-contactgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:18px 0 30px; }
@media (max-width:780px){ .yb-grid,.yb-grid--2,.yb-contactgrid{ grid-template-columns:1fr; } }

/* Blog / archives : cartes propres */
.blog .ast-article-post, .archive .ast-article-post, .search .ast-article-post{
  background:#fff; border:1px solid var(--yb-line); border-radius:14px; box-shadow:0 6px 18px rgba(15,36,51,.06); overflow:hidden;
}
.ast-separate-container .ast-article-post .ast-article-inner{ padding:6px; }
.blog .entry-title a, .archive .entry-title a{ color:var(--yb-ink); }
.blog .entry-title a:hover{ color:var(--yb-azur); }

/* Renfort : masquer la barre "Propulsé par Astra" (plusieurs versions) */
.site-below-footer-wrap, .ast-small-footer, .site-footer .ast-footer-copyright,
[data-section="section-footer-builder"] .site-below-footer-wrap{ display:none !important; }

/* =====================================================================
   12. CORRECTIFS PRO : sticky, menu, compte, blog, lecture d'article
   ===================================================================== */

/* --- 12.1 EN-TÊTE STICKY (le menu reste visible au défilement) --- */
.ast-main-header-wrap, .main-header-bar-wrap{ position:sticky; top:0; z-index:99; background:#fff; }
.ast-main-header-wrap{ box-shadow:0 2px 16px rgba(15,36,51,.08); }

/* --- 12.2 MENU : net, moderne, soulignement animé --- */
@media (min-width:922px){
  .main-header-menu{ align-items:center; }
  .main-header-menu .menu-link, .ast-builder-menu .menu-link{
    font-family:var(--yb-font-title); font-weight:500; letter-spacing:-.01em; transition:color .15s ease;
  }
  .main-header-menu > .menu-item > .menu-link{ position:relative; }
  .main-header-menu > .menu-item > .menu-link::after{
    content:""; position:absolute; left:18px; right:18px; bottom:12px; height:2px;
    background:var(--yb-azur); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
  }
  .main-header-menu > .menu-item:hover > .menu-link::after,
  .main-header-menu > .menu-item.current-menu-item > .menu-link::after{ transform:scaleX(1); }
  .main-header-menu .menu-item.current-menu-item > .menu-link{ color:var(--yb-azur) !important; }
  .main-header-menu .menu-link:hover{ color:var(--yb-azur) !important; }

  /* "Vendre sur E-YEBOU" : pastille orange COMPACTE, centrée dans la barre */
  .main-header-menu .menu-item .menu-link[href*="devenir-vendeur"]{
    background:var(--yb-action); color:#fff !important; border-radius:9px;
    height:38px; line-height:38px !important; padding:0 16px !important;
    display:inline-flex; align-items:center; font-size:14.5px; font-weight:600;
    box-shadow:0 4px 12px rgba(255,107,0,.26);
  }
  .main-header-menu .menu-item .menu-link[href*="devenir-vendeur"]:hover{ background:var(--yb-action-dark); color:#fff !important; }
  .main-header-menu .menu-item .menu-link[href*="devenir-vendeur"]::after{ display:none !important; }

  .main-header-menu .sub-menu{ border-radius:12px; box-shadow:0 14px 36px rgba(15,36,51,.14); border:1px solid var(--yb-line); overflow:hidden; }
}

/* --- 12.3 MON COMPTE : 2 colonnes robustes + cartes de marque --- */
.woocommerce-account .woocommerce{ max-width:1000px; margin:0 auto; }
.woocommerce-account .u-columns, .woocommerce-account #customer_login{
  display:grid !important; grid-template-columns:1fr 1fr; gap:28px; align-items:start; float:none !important;
}
.woocommerce-account .u-columns::before, .woocommerce-account .u-columns::after,
.woocommerce-account #customer_login::before, .woocommerce-account #customer_login::after{ display:none !important; content:none !important; }
.woocommerce-account .u-column1, .woocommerce-account .u-column2,
.woocommerce-account .col-1, .woocommerce-account .col-2{
  width:100% !important; max-width:100% !important; float:none !important; margin:0 !important; padding:0 !important;
}
.woocommerce-account .u-column1 > h2, .woocommerce-account .u-column2 > h2{ font-family:var(--yb-font-title); font-size:22px; margin:0 0 14px; }
.woocommerce form.login, .woocommerce form.register{
  border:1px solid var(--yb-line); border-top:3px solid var(--yb-azur); border-radius:16px; padding:26px; box-shadow:var(--yb-shadow); background:#fff; margin:0;
}
.woocommerce form.register{ border-top-color:var(--yb-action); }
.woocommerce form .form-row label{ font-weight:600; color:var(--yb-ink); margin-bottom:5px; display:inline-block; }
.woocommerce form .input-text,
.woocommerce-account input[type="text"], .woocommerce-account input[type="email"],
.woocommerce-account input[type="password"], .woocommerce input.input-text, .woocommerce select{
  border:1px solid var(--yb-line) !important; border-radius:10px !important; padding:12px 14px !important;
  background:#fff; transition:border-color .15s, box-shadow .15s; width:100%;
}
.woocommerce form .input-text:focus, .woocommerce-account input:focus{
  border-color:var(--yb-azur) !important; box-shadow:0 0 0 3px rgba(0,159,227,.15); outline:none;
}
.woocommerce-account form.login button.button,
.woocommerce-account form.register button.button,
.woocommerce-account button.woocommerce-button{
  background:var(--yb-action) !important; color:#fff !important; border:0 !important; border-radius:10px !important;
  padding:13px 26px !important; font-family:var(--yb-font-title); font-weight:600; box-shadow:0 6px 16px rgba(255,107,0,.28);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border:1px solid var(--yb-line); border-radius:14px; overflow:hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--yb-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block; padding:13px 18px; color:var(--yb-ink); text-decoration:none; font-weight:500; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ background:var(--yb-azur-soft); color:var(--yb-azur-dark); }
@media (max-width:780px){
  .woocommerce-account .u-columns, .woocommerce-account #customer_login{ grid-template-columns:1fr; }
}

/* --- 12.4 BLOG : cartes plus jolies (accent de marque) --- */
.blog #content, .archive #content, .search #content{ background:#F6FAFD; }
.blog .ast-article-post, .archive .ast-article-post{
  background:#fff; border:1px solid var(--yb-line); border-radius:16px; overflow:hidden; position:relative;
  box-shadow:0 6px 18px rgba(15,36,51,.06); transition:transform .14s ease, box-shadow .2s ease; height:100%;
}
.blog .ast-article-post::before, .archive .ast-article-post::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--yb-azur),var(--yb-action)); z-index:1;
}
.blog .ast-article-post:hover, .archive .ast-article-post:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(0,159,227,.18); }
.blog .ast-article-inner, .archive .ast-article-inner{ padding:24px; border:0; }
.blog .ast-terms-link a, .blog .cat-links a, .blog .entry-meta .cat-links a,
.archive .ast-terms-link a, .archive .cat-links a{
  display:inline-block; background:var(--yb-azur-soft); color:var(--yb-azur-dark) !important;
  font-family:var(--yb-font-title); font-weight:600; font-size:12px; letter-spacing:.02em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px; text-decoration:none; margin-bottom:10px;
}
.blog .entry-title, .archive .entry-title{ font-family:var(--yb-font-title); font-size:21px; line-height:1.22; margin:8px 0 12px; }
.blog .entry-title a, .archive .entry-title a{ color:var(--yb-ink); }
.blog .entry-title a:hover, .archive .entry-title a:hover{ color:var(--yb-azur); }
.blog .post-meta, .blog .entry-meta, .blog .posted-on, .archive .posted-on{ color:var(--yb-muted); font-size:13px; }
.blog .ast-excerpt-container p, .blog .entry-content p, .archive .ast-excerpt-container p{ color:#48565f; font-size:15px; line-height:1.65; }
.blog .read-more, .archive .read-more{ margin-top:12px; }
.blog .read-more a, .archive .read-more a{
  display:inline-flex; align-items:center; gap:6px; color:var(--yb-action); font-family:var(--yb-font-title); font-weight:600; text-decoration:none;
}
.blog .read-more a::after, .archive .read-more a::after{ content:"→"; transition:transform .15s; }
.blog .read-more a:hover::after{ transform:translateX(4px); }

/* --- 12.5 LECTURE D'ARTICLE (single.php) --- */
.yb-article-hero{ width:100%; background:linear-gradient(120deg,#009FE3,#0077B0); color:#fff; padding:54px 20px; }
.yb-article-hero-in{ max-width:780px; margin:0 auto; }
.yb-article-cats a{ display:inline-block; background:rgba(255,255,255,.18); color:#fff !important; font-family:var(--yb-font-title); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; padding:4px 13px; border-radius:999px; text-decoration:none; margin-bottom:14px; }
.yb-article-hero h1{ color:#fff; font-family:var(--yb-font-title); font-weight:700; font-size:clamp(26px,3.4vw,40px); line-height:1.15; margin:0; }
.yb-article-meta{ display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; font-size:14.5px; opacity:.95; }
.yb-article-meta span{ display:inline-flex; align-items:center; gap:7px; }
.yb-article-meta svg{ width:16px; height:16px; }
.yb-article{ max-width:760px; margin:40px auto 0; padding:0 20px; }
.yb-article p{ font-size:17px; line-height:1.8; color:#2c3a44; margin:0 0 20px; }
.yb-article h2{ font-family:var(--yb-font-title); font-weight:700; font-size:26px; margin:36px 0 14px; color:var(--yb-ink); }
.yb-article h3{ font-family:var(--yb-font-title); font-weight:600; font-size:20px; margin:26px 0 10px; color:var(--yb-ink); }
.yb-article a{ color:var(--yb-azur-dark); text-decoration:underline; }
.yb-article ul, .yb-article ol{ margin:0 0 20px; padding-left:22px; }
.yb-article li{ font-size:17px; line-height:1.7; color:#2c3a44; margin:6px 0; }
.yb-article blockquote{ border-left:4px solid var(--yb-azur); background:var(--yb-azur-soft); margin:24px 0; padding:14px 20px; border-radius:0 12px 12px 0; }
.yb-article img{ border-radius:14px; max-width:100%; height:auto; }
.yb-article-cta{ max-width:760px; margin:40px auto 10px; padding:28px; border-radius:16px; background:var(--yb-ink); color:#fff; text-align:center; }
.yb-article-cta p{ color:#fff; margin:0 0 16px; font-family:var(--yb-font-title); font-size:18px; }
.yb-article-cta a{ display:inline-flex; align-items:center; gap:8px; font-family:var(--yb-font-title); font-weight:600; padding:13px 22px; border-radius:12px; text-decoration:none; margin:4px; }
.yb-article-cta a.primary{ background:var(--yb-action); color:#fff; }
.yb-article-cta a.secondary{ background:#12B76A; color:#fff; }
.yb-article-back{ max-width:760px; margin:18px auto 54px; padding:0 20px; }
.yb-article-back a{ color:var(--yb-azur-dark); font-weight:600; text-decoration:none; }