/* =====================================================================
   ELEVATE — CALQUE DE REDESIGN (mise en page « MobileX »)
   ---------------------------------------------------------------------
   Objectif : aligner la mise en page sur la maquette de référence
   (Assets/template/maquette.jpg — « MobileX ») tout en conservant la
   charte Elevate (couleurs navy/bleu/cyan/orange, logo, polices
   Poppins/Inter) et les DONNÉES.

   Chargé APRÈS style.css + theme.css : redéfinit uniquement l'APPARENCE.
   Rollback : retirer l'enqueue « elevate-redesign » dans functions.php.
   Aucune structure HTML/Elementor n'est modifiée ici.
   ===================================================================== */

/* =====================================================================
   1) CARTES PRODUIT (accueil, boutique, catégories) — style « MobileX »
      Réf. « Popular Products » : image, titre + accent orange, prix net,
      puis ligne du bas = étoiles (gauche) + bouton panier rond (droite).
   ===================================================================== */

/* Carte plate, bordure fine, hover doux (pas d'ombre bleutée au repos). */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  position:relative;
  border:1px solid var(--bp-line);
  border-radius:14px;
  box-shadow:none;
  background:#fff;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);
  border-color:var(--bp-line);
  box-shadow:0 12px 26px rgba(4,7,79,.10);
}

/* Le lien passe en colonne flex → on peut réordonner et ancrer le bas. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
  display:flex; flex-direction:column; height:100%;
}

/* Image : fond blanc, sans filet de séparation (cadre net). */
.woocommerce ul.products li.product a img{
  order:1; background:#fff; border-bottom:none; height:200px; padding:16px; margin:0;
}

/* Cartes épurées : on masque le badge de statut et le label catégorie. */
.woocommerce ul.products li.product .bp-status-badge{ display:none; }
.woocommerce ul.products li.product .bp-loop-cat{ display:none; }

/* Titre + court accent orange dessous (signature de la réf.). */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  order:2;
  font-family:var(--bp-font-title); font-weight:700; font-size:.98rem;
  color:var(--bp-ink); padding:14px 16px 0; line-height:1.35;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title::after{
  content:""; display:block; width:30px; height:3px; border-radius:2px;
  background:var(--bp-orange); margin:8px 0 0;
}

/* Prix net, juste sous le titre (suppression du « ticket » clip-path). */
.woocommerce ul.products li.product .price{
  order:3; padding:8px 16px 0; gap:10px;
}
.woocommerce ul.products li.product .price .woocommerce-Price-amount{
  background:none; color:var(--bp-navy);
  font-family:var(--bp-font-title); font-weight:800; font-size:1.05rem;
  padding:0; border-radius:0; clip-path:none;
}
.woocommerce ul.products li.product .price ins{ background:none; text-decoration:none; }
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount{ color:var(--bp-navy); }
.woocommerce ul.products li.product .price del .woocommerce-Price-amount{
  background:none; color:var(--bp-mist); font-weight:500; font-size:.82rem; padding:0; clip-path:none;
  text-decoration:line-through;
}

/* Étoiles orange en bas de carte (poussées vers le bas → ligne du bas). */
.woocommerce ul.products li.product .star-rating{
  order:4; color:var(--bp-orange); font-size:.82rem;
  margin:auto 16px 20px; padding:0;
}

/* Bouton panier ROND, aligné à droite sur la ligne des étoiles. */
.woocommerce ul.products li.product .bp-actions{
  position:absolute; right:16px; bottom:4px; top:auto;
  margin:0; padding:0; z-index:4; justify-content:flex-end;
}
.woocommerce ul.products li.product .bp-actions .bp-commander{ display:none; }
.woocommerce ul.products li.product .bp-actions .add_to_cart_button,
.woocommerce ul.products li.product .bp-actions .added_to_cart{
  width:46px; height:46px; border-radius:50%;
  background:#fff!important; color:var(--bp-navy)!important; border:1.5px solid var(--bp-line);
}
.woocommerce ul.products li.product .bp-actions .add_to_cart_button::after,
.woocommerce ul.products li.product .bp-actions .added_to_cart::after{
  content:"\f07a"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:15px; color:var(--bp-navy);
}
.woocommerce ul.products li.product .bp-actions .added_to_cart::after{ content:"\f00c"; }
.woocommerce ul.products li.product:hover .bp-actions .add_to_cart_button{
  background:var(--bp-orange)!important; border-color:var(--bp-orange);
}
.woocommerce ul.products li.product:hover .bp-actions .add_to_cart_button::after{ color:#fff; }

/* Badge promo « -XX% » : pastille orange pleine (haut-droite). */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
  background:var(--bp-warm); color:#fff; font-weight:800; font-size:.72rem;
  padding:5px 10px; border-radius:999px; top:12px; right:12px;
  box-shadow:0 4px 10px rgba(246,113,34,.35);
}

/* =====================================================================
   2) HEADER — barre supérieure SOMBRE pleine largeur (réf. MobileX)
      Bande navy peinte en ::before (pleine largeur, derrière le contenu)
      → pas de décalage de la mise en page, pas de scroll horizontal.
   ===================================================================== */
.bp-topbar-in{ position:relative; color:#fff; }
.bp-topbar-in::before{
  content:""; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); width:100vw;
  background:var(--bp-navy); z-index:0;
}
.bp-topbar-in > *{ position:relative; z-index:1; }
.bp-topbar-in .bp-hotline{ color:#C7D3F5; }
.bp-topbar-in .bp-hotline i{ color:var(--bp-orange); }
.bp-topbar-in .bp-hotline a{ color:#fff; font-weight:700; }
.bp-topbar-in .bp-toplinks a{ color:#D7DEF2; }
.bp-topbar-in .bp-toplinks a:hover{ color:#fff; }
.bp-topbar-in .bp-toplinks i{ color:#8C95B3; }
.bp-topbar-in .bp-toplinks a:not(:last-child)::after{ background:rgba(255,255,255,.18); }

/* =====================================================================
   3) HEADER — recherche plus sobre (réf. MobileX : recherche discrète)
      La grosse bordure orange était une signature du site d'origine ;
      on passe à un cadre neutre + bouton navy. (Composant HTML, pas
      Elementor → restylage sans risque structurel.)
   ===================================================================== */
.bp-search{ border:1.5px solid var(--bp-line); border-radius:12px; }
.bp-search-btn{ background:var(--bp-navy); }
.bp-search-btn:hover{ background:var(--bp-blue); filter:none; }

/* =====================================================================
   4) PRIX FICHE PRODUIT (single) — cohérent avec les cartes
   ===================================================================== */
.woocommerce div.product p.price > .woocommerce-Price-amount,
.woocommerce div.product p.price ins .woocommerce-Price-amount{
  background:none; color:var(--bp-navy);
  font-family:var(--bp-font-title); font-weight:800; font-size:1.5rem;
  padding:0; border-radius:0; clip-path:none;
}
.woocommerce div.product p.price del .woocommerce-Price-amount{
  background:none; color:var(--bp-mist); font-weight:500; font-size:1rem; padding:0; clip-path:none;
  text-decoration:line-through;
}

/* =====================================================================
   5) PAGE D'ACCUEIL CODÉE (front-page.php) — mise en page « MobileX »
      Sections construites en PHP + données réelles, habillées ici.
      <main> est pleine largeur (hello-elementor) → fonds full-bleed
      naturels ; .bp-wrap (max 1120) centre le contenu.
   ===================================================================== */
.bp-home{ overflow:hidden; }

/* Eyebrow + accent partagés */
.bp-eyebrow{ display:inline-block; color:var(--bp-orange); font-family:var(--bp-font-title);
  font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; }
.bp-accent{ color:var(--bp-orange); }

/* En-tête de section (titre + lien « voir tout ») */
.bp-sec{ padding:52px 16px; }
.bp-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.bp-sec-title{ font-family:var(--bp-font-title); font-weight:800; color:var(--bp-navy);
  font-size:1.6rem; text-transform:uppercase; letter-spacing:.01em; margin:0; }
.bp-sec-link{ display:inline-flex; align-items:center; gap:8px; color:var(--bp-navy);
  font-family:var(--bp-font-title); font-weight:700; font-size:.85rem; }
.bp-sec-link i{ transition:transform .15s; }
.bp-sec-link:hover{ color:var(--bp-orange); }
.bp-sec-link:hover i{ transform:translateX(3px); }
.bp-center{ text-align:center; }

/* 1) HERO SPLIT */
.bp-hero2{ background:linear-gradient(135deg,#EEF2FD 0%,#F4F6FC 45%,#FDEEE6 100%); }
.bp-hero2-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
  padding-top:56px; padding-bottom:56px; }
.bp-hero2-title{ font-family:var(--bp-font-title); font-weight:900; color:var(--bp-ink);
  font-size:3rem; line-height:1.08; margin:0 0 18px; }
.bp-hero2-sub{ color:var(--bp-mist); font-size:1.05rem; line-height:1.6; max-width:440px; margin:0 0 26px; }
.bp-hero2-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.bp-hero2-cta .bp-btn{ padding:14px 26px; }
.bp-hero2-cta .bp-btn i{ margin-left:2px; }
.bp-hero2-reassure{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bp-hero2-reassure li{ display:flex; align-items:center; gap:10px; }
.bp-hero2-reassure i{ color:var(--bp-orange); font-size:1.4rem; flex:0 0 auto; }
.bp-hero2-reassure strong{ display:block; font-family:var(--bp-font-title); font-size:.82rem; color:var(--bp-navy); line-height:1.2; }
.bp-hero2-reassure span{ color:var(--bp-mist); font-size:.72rem; }
.bp-hero2-media{ position:relative; display:flex; align-items:center; justify-content:center; min-height:340px; }
.bp-hero2-img{ max-width:100%; max-height:420px; object-fit:contain; filter:drop-shadow(0 30px 50px rgba(4,7,79,.22)); }
.bp-hero2-badge{ position:absolute; top:10px; right:10px; width:104px; height:104px; border-radius:50%;
  background:#fff; box-shadow:var(--bp-shadow); display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; border:2px solid #FCE3D4; }
.bp-hero2-badge small{ font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bp-mist); font-weight:700; }
.bp-hero2-badge strong{ font-family:var(--bp-font-title); font-weight:900; font-size:1.8rem; color:var(--bp-orange); line-height:1; }

/* 2) CARTES CATÉGORIES */
.bp-cat-cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.bp-cat-card{ display:flex; flex-direction:column; align-items:center; gap:12px; background:#fff;
  border:1px solid var(--bp-line); border-radius:14px; padding:18px 10px; text-align:center;
  transition:transform .15s, box-shadow .15s, border-color .15s; }
.bp-cat-card:hover{ transform:translateY(-4px); border-color:var(--bp-blue2); box-shadow:0 12px 26px rgba(4,7,79,.10); }
.bp-cat-card-img{ width:84px; height:84px; display:flex; align-items:center; justify-content:center; }
.bp-cat-card-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.bp-cat-card-name{ font-family:var(--bp-font-title); font-weight:700; font-size:.85rem; color:var(--bp-navy); }

/* 3) BANDEAU OFFRES (sombre, pleine largeur) */
.bp-deals{ background:var(--bp-navy); color:#fff; }
.bp-deals-in{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;
  padding-top:44px; padding-bottom:44px; }
.bp-deals-title{ font-family:var(--bp-font-title); font-weight:900; font-size:2rem; color:#fff; line-height:1.15; margin:0 0 14px; }
.bp-deals-sub{ color:#B9C3E6; font-size:1rem; line-height:1.6; max-width:420px; margin:0 0 24px; }
.bp-deals-media{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap:12px; min-height:150px; }
.bp-deals-media img{ width:22%; max-width:110px; object-fit:contain; filter:drop-shadow(0 14px 24px rgba(0,0,0,.4)); }
.bp-deals-badge{ position:absolute; right:0; top:-6px; width:92px; height:92px; border-radius:50%;
  background:rgba(255,255,255,.04); border:2px solid var(--bp-orange); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; }
.bp-deals-badge small{ font-size:.55rem; text-transform:uppercase; letter-spacing:.06em; color:#B9C3E6; font-weight:700; }
.bp-deals-badge strong{ font-family:var(--bp-font-title); font-weight:900; font-size:1.6rem; color:var(--bp-orange); line-height:1; }

/* 4) PRODUITS POPULAIRES — grille 5 colonnes (shortcode [products]) */
.bp-sec .woocommerce{ width:100%; }
.bp-sec ul.products{ display:grid !important; grid-template-columns:repeat(5,1fr); gap:20px; margin:0 !important; }
.bp-sec ul.products::before, .bp-sec ul.products::after{ display:none !important; }
.bp-sec ul.products li.product{ width:auto !important; margin:0 !important; float:none !important; }

/* 5) POURQUOI NOUS CHOISIR */
.bp-why{ padding:52px 16px 64px; }
.bp-why .bp-sec-title{ margin-bottom:30px; }
.bp-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.bp-why-box{ background:#fff; border:1px solid var(--bp-line); border-radius:16px; padding:26px 22px; text-align:center; }
.bp-why-box i{ font-size:1.9rem; color:var(--bp-orange); margin-bottom:14px; display:block; }
.bp-why-box strong{ display:block; font-family:var(--bp-font-title); font-weight:700; color:var(--bp-navy); font-size:1rem; margin-bottom:6px; }
.bp-why-box span{ color:var(--bp-mist); font-size:.88rem; line-height:1.5; }

/* Responsive home */
@media (max-width:1024px){
  .bp-cat-cards{ grid-template-columns:repeat(3,1fr); }
  .bp-sec ul.products{ grid-template-columns:repeat(3,1fr); }
  .bp-why-grid{ grid-template-columns:repeat(2,1fr); }
  .bp-hero2-title{ font-size:2.5rem; }
}
@media (max-width:768px){
  .bp-hero2-in{ grid-template-columns:1fr; gap:24px; padding-top:36px; padding-bottom:36px; }
  .bp-hero2-title{ font-size:2.1rem; }
  .bp-hero2-reassure{ grid-template-columns:repeat(2,1fr); }
  .bp-hero2-media{ order:-1; min-height:240px; }
  .bp-hero2-img{ max-height:280px; }
  .bp-deals-in{ grid-template-columns:1fr; gap:24px; }
  .bp-sec ul.products{ grid-template-columns:repeat(2,1fr) !important; gap:12px; }
  .bp-cat-cards{ grid-template-columns:repeat(2,1fr); }
  .bp-sec-title{ font-size:1.3rem; }
}