/*
Theme Name: Elevate — Boutique (Démo)
Description: Thème enfant Hello Elementor de la boutique de démonstration Elevate. Design system, habillage WooCommerce et socle technique. Environnement de démonstration OptiLeads Commerce — données fictives.
Author: Optileads
Author URI: https://optileads.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: elevate-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: e-commerce, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/

/* =====================================================================
   ELEVATE — DESIGN SYSTEM
   Jetons (couleurs, dégradés, rayons, ombres, typo) dérivés du logo Elevate
   (navy #04074F, bleu roi #054DD4, cyan #0C99DD, accent orange #F67122).
   Centralisés ici et réutilisés dans Elementor (variables CSS + classes
   utilitaires .bp-*) : changer une valeur ici rebrande tout le site.
   Les NOMS de variables/classes restent en .bp-* (référencés dans le
   contenu Elementor) ; seules les VALEURS changent.
   ===================================================================== */
:root{
  --bp-navy:#04074F;
  --bp-navy2:#0A1470;
  --bp-blue:#054DD4;
  --bp-blue2:#0C99DD;
  --bp-orange:#F67122;
  --bp-red:#E74A4A;
  --bp-cream:#F4F6FC;
  --bp-ink:#0C1030;
  --bp-mist:#7E86A8;
  --bp-line:#E3E7F3;
  --bp-warm:linear-gradient(135deg,#F67122 0%,#E74A4A 100%);
  --bp-cool:linear-gradient(135deg,#0C99DD 0%,#054DD4 55%,#04074F 100%);
  --bp-shadow:0 4px 18px rgba(4,7,79,.07);
  --bp-shadow-md:0 6px 16px rgba(4,7,79,.25);
  --bp-radius:16px;
  --bp-font-title:'Poppins',sans-serif;
  --bp-font-body:'Inter',sans-serif;
}

/* --------- Base typographique (le layout vient d'Elementor/Hello) --------- */
body{
  font-family:var(--bp-font-body);
  color:var(--bp-ink);
  background:var(--bp-cream);
}
h1,h2,h3,h4,.bp-title{ font-family:var(--bp-font-title); }

/* --------- Conteneur maquette (max 1120px) --------- */
.bp-wrap{ max-width:1120px; margin:0 auto; padding:0 16px; }

/* =====================================================================
   CLASSES UTILITAIRES (à appliquer depuis Elementor : champ "Classes CSS")
   ===================================================================== */
.bp-poppins{ font-family:var(--bp-font-title); }
.bp-navy{ color:var(--bp-navy); }
.bp-muted{ color:var(--bp-mist); }
.bp-bg-cream{ background:var(--bp-cream); }
.bp-bg-navy{ background:var(--bp-navy); color:#fff; }
.bp-bg-cool{ background:var(--bp-cool); color:#fff; }
.bp-bg-warm{ background:var(--bp-warm); color:#fff; }

/* Logo bicolore « BEST PRICE » */
.bp-logo{ font-family:var(--bp-font-title); font-weight:900; font-size:1.4rem; line-height:1; }
.bp-logo .best{ color:var(--bp-navy); }
.bp-logo .price{
  background:var(--bp-warm);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.bp-logo small{ display:block; color:var(--bp-mist); font-size:.62rem; font-weight:600; font-family:var(--bp-font-body); }

/* Boutons (réutilisables sur boutons Elementor via classe) */
.bp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:12px; font-weight:700;
  font-family:var(--bp-font-title); font-size:.9rem;
  transition:transform .1s, filter .15s; cursor:pointer; border:none;
}
.bp-btn:active{ transform:scale(.96); }
.bp-btn-warm{ background:var(--bp-warm); color:#fff; }
.bp-btn-cool{ background:var(--bp-cool); color:#fff; }
.bp-btn-outline{ background:#fff; color:var(--bp-navy); border:1.5px solid var(--bp-navy); }
.bp-btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.4); }

/* Pastille / chip catégorie */
.bp-chip{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:9px 18px; border-radius:999px; font-size:.87rem; font-weight:600;
  background:#fff; color:var(--bp-ink); border:1.5px solid var(--bp-line); transition:.15s;
}
.bp-chip.bp-active,.bp-chip:hover{ background:var(--bp-cool); color:#fff; border-color:transparent; box-shadow:var(--bp-shadow-md); }

/* Badge prix « ticket » (signature de la maquette) */
.bp-pricetag{
  position:relative; display:inline-block; background:var(--bp-warm); color:#fff;
  font-family:var(--bp-font-title); font-weight:800; font-size:.95rem;
  padding:5px 14px 5px 20px; border-radius:4px;
  clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);
}
.bp-pricetag::before{
  content:""; position:absolute; left:7px; top:50%; width:4px; height:4px;
  background:#fff; border-radius:50%; transform:translateY(-50%); opacity:.9;
}

/* Réassurance (icônes + texte) */
.bp-reassure{ display:flex; flex-wrap:wrap; gap:24px; justify-content:center; font-size:.85rem; }
.bp-reassure span{ display:flex; align-items:center; gap:8px; }

/* Motif décoratif du hero (rayures orange discrètes) */
.bp-hero-motif{ position:relative; overflow:hidden; }
.bp-hero-motif::before{
  content:""; position:absolute; inset:0; opacity:.15; pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 40px,var(--bp-orange) 40px 42px);
}