/*
Theme Name: monpetitelectro
Description: Theme monpetitelectro
Author: Eliott Moreau
Author URI: https://eliottmoreau.fr
Template: Divi
Version: 0.0.1
*/

/* ---------------- VARIABLES GLOBALES ---------------- */
:root{
  --magenta:#FF0080;
  --orange:#FF6B00;
  --turquoise:#00D0C5;
  --yellow:#FFDE00;
  --navy:#0E0F17;
  --cream:#FFF6E5;
  --sable: #F3E0BC;
}

/* ---------------- EXEMPLES D’UTILISATION ------------- */
body         { background: var(--cream); color: var(--navy); }

.et_pb_wc_add_to_cart_0_tb_body .single_add_to_cart_button.button.alt{
  background: var(--magenta) !important;
  color:      var(--yellow) !important;
  border-radius:999px !important;
  font-weight:600 !important;
  border:none !important;
}

/* Bouton Divi personnalisé */
.et_pb_button.pop-primary{
  background: var(--magenta);
  color:      var(--yellow);
  border-radius:999px; font-weight:600;
}
.et_pb_button.pop-primary:hover{ background: var(--orange); }

/* Badge promo WooCommerce */
.onsale{
  width:96px;height:96px;
  background:url(../img/starburst.png) no-repeat center/contain var(--magenta);
  color:var(--yellow); font:700 1rem/96px 'Fredoka',sans-serif;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  border:none; box-shadow:none;
}

/* Section à motif wavy (ajoutez la classe "section-wavy" dans Divi) */
.section-wavy{
  background:url(../img/pattern-waves.png) repeat!important;
  background-size:500px!important;
}

/* Hero d’accueil Divi (module Fullwidth Header) */
.hero-pop{
  background:url(/wp-content/themes/monpetitelectro/img/hero-arc-2.png) no-repeat var(--cream)!important;
  color:var(--navy)!important;
  background-size:800px !important;
}

/* Section avec fleurs rétro */
.section-flower{
  background:url(/wp-content/themes/monpetitelectro/img/pattern-flower.png) repeat var(--cream)!important;
  background-size:500px!important;
}


/* Barre d’en‑tête chevron bold */
.header-chevron{
  background:url(../img/pattern-chevron.png) repeat-x!important;
  background-size:500px 120px!important;   /* réduit la hauteur visuelle */
}

/* Bloc FAQ : cibles concentriques très pâles */
.faq-target{
  background:url(../img/pattern-target.png) repeat!important;
  background-size:400px!important;
  opacity:.15 !important ;         /* rend le motif discret */
}

/* Sprite unique */
:root{
  --sprite: url('/wp-content/themes/monpetitelectro/img/icons-appliances.png');
}

/* Générique : donne largeur, hauteur et sprite */
li.mega-menu > ul.sub-menu > li > a::before{
  content:"";
  width:24px;
  height:24px;
  display:inline-block;
  margin-right:8px;
  background-image:var(--sprite);
  background-size:1024px 1024px;   /* 4 colonnes × 256px = 1024 */
  background-repeat:no-repeat;
  vertical-align:middle;
}

/* Positions (colonne × -256px, ligne × -256px) ------------- */

/* Ligne 0 (y=0) */
.icon-kettle       > a::before{ background-position:   0     0; }   /* Bouilloire */
.icon-toaster      > a::before{ background-position:-256px   0; }   /* Grille‑pain */
.icon-airfryer     > a::before{ background-position:-512px   0; }   /* Friteuse air chaud */
.icon-microwave    > a::before{ background-position:-768px   0; }   /* Mini‑four */
/* Ligne 1 (y = -256px) */
.icon-mixer        > a::before{ background-position:   0  -256px; } /* Mixeur plongeant */
.icon-waffle       > a::before{ background-position:-256px -256px; }/* Gaufrier */
.icon-vacuum       > a::before{ background-position:-512px -256px; }/* Aspirateur balai */
.icon-fan          > a::before{ background-position:-768px -256px; }/* Ventilateur */
/* Ligne 2 (y = -512px) */
.icon-iron         > a::before{ background-position:   0  -512px; } /* Fer/défroisseur */
.icon-standmixer   > a::before{ background-position:-256px -512px; }/* Robot pâtissier */
/* …Complète avec tes autres pictos… */

/* ---- Mega‑menu 3 colonnes (largeur 1440 px) --------------- */
li.mega-menu > ul.sub-menu{
  width:1440px;
  padding:40px 32px;
  background:#FFF;
  display:flex; flex-wrap:wrap; gap:12px 0;
}
li.mega-menu > ul.sub-menu > li{
  width:33.333%;                 /* 3 colonnes */
  padding:6px 16px;
  list-style:none;
}
li.mega-menu > ul.sub-menu > li > a{
  display:flex; align-items:center;
  font-weight:500;
}