/*
Theme Name: Cadeau Pour Elle
Theme URI: https://cadeau-pour-elle.fr
Author: Cadeau Pour Elle
Description: Thème sur mesure pour la boutique Cadeau Pour Elle. Coffrets de bougies, bijoux personnalisés et bien-être. Entièrement modifiable sans code depuis l'éditeur WordPress.
Version: 2.1.0
Requires at least: 6.5
Tested up to: 6.6
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: cadeau-pour-elle
Tags: full-site-editing, block-patterns, e-commerce, one-column, custom-colors, custom-menu
*/

/* ==========================================================================
   Ce fichier ne contient QUE les finitions impossibles à faire dans l'éditeur.
   Les couleurs, polices, tailles et espacements se modifient dans :
   Apparence > Éditeur > Styles
   ========================================================================== */

/* --- Réinitialisation douce --- */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* --- Emblème flamme-rose (logo) --- */
.cpe-logomark {
  width: 20px;
  height: 24px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.cpe-logomark path { fill: var(--wp--preset--color--or); }

/* --- Le logo texte : "Cadeau Pour Elle" avec "Pour" en doré italique --- */
.cpe-logo {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cpe-logo a {
  color: var(--wp--preset--color--creme);
  text-decoration: none;
}
.cpe-logo a:hover { color: var(--wp--preset--color--creme); }

/* Le mot "Pour" en doré italique */
.cpe-accent {
  font-style: italic;
  color: var(--wp--preset--color--or);
  font-weight: 400;
}

/* --- Survol du bouton principal : passe en creme, comme la maquette --- */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--creme) !important;
  color: var(--wp--preset--color--noir) !important;
  transform: translateY(-2px);
}
.wp-block-button .wp-block-button__link {
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

/* --- Boutons contour : styles definis ici pour rester valides dans l'editeur --- */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
}
.cpe-bouton-clair .wp-block-button__link {
  border-color: rgba(243, 234, 225, 0.3);
  color: var(--wp--preset--color--creme);
}
.cpe-bouton-clair .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--or);
  color: var(--wp--preset--color--or);
}
.cpe-bouton-or .wp-block-button__link {
  border-color: var(--wp--preset--color--or);
  color: var(--wp--preset--color--or);
  padding: 9px 20px;
  font-size: 0.8rem;
}
.cpe-bouton-or .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--or);
  color: var(--wp--preset--color--noir);
}

/* --- Bandeau d'annonce collant --- */
/* La pleine largeur est geree par le bloc Groupe "alignfull", pas par du CSS :
   c'est plus fiable et ca evite tout debordement horizontal. */
.cpe-annonce { background: var(--wp--preset--color--bordeaux); }
.cpe-annonce-texte {
  color: var(--wp--preset--color--creme);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
}

/* --- Aucun espace au-dessus de la banderole --- */
body { margin: 0; }
.wp-site-blocks { padding-top: 0 !important; }
.wp-site-blocks > *:first-child,
.wp-site-blocks > header,
.cpe-entete,
.cpe-entete > *:first-child,
.cpe-annonce {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
/* La banderole occupe toute la largeur de l'ecran */
.cpe-annonce {
  width: 100%;
  max-width: none;
  background: var(--wp--preset--color--bordeaux);
}
.cpe-entete { width: 100%; max-width: none; }

/* --- En-tete collante sous le bandeau --- */
.cpe-entete,
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 11, 13, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(198, 161, 91, 0.16);
}
/* Le bandeau d'annonce fait partie de l'en-tete : il defile avec elle */
.cpe-entete .cpe-annonce { position: static; }

/* --- Navigation --- */
.wp-block-navigation a {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
  transition: opacity .2s, color .2s;
}
.wp-block-navigation a:hover { opacity: 1; }

/* --- Mur de roses en arriere-plan --- */
/* Il suffit d'ajouter la classe "cpe-hero" a un bloc Groupe pour l'afficher. */
.cpe-hero { position: relative; overflow: hidden; }
.cpe-hero > * { position: relative; z-index: 1; }
.cpe-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1400 640%22 preserveAspectRatio=%22xMidYMid slice%22><g stroke=%22%23C6A15B%22 stroke-width=%221.2%22 fill=%22none%22 opacity=%220.16%22><path d=%22M-50,420 C120,300 260,520 430,380 C600,240 720,460 880,340 C1040,220 1180,440 1340,320 C1420,260 1460,300 1500,280%22/><g transform=%22translate(90,340) scale(0.85) rotate(0)%22><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(60)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(120)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(180)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(240)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(300)%22/><circle r=%229%22/></g><g transform=%22translate(230,470) scale(0.55) rotate(20)%22><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(60)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(120)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(180)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(240)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(300)%22/><circle r=%229%22/></g><g transform=%22translate(420,360) scale(1.15) rotate(-15)%22><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(60)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(120)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(180)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(240)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(300)%22/><circle r=%229%22/></g><g transform=%22translate(640,470) scale(0.7) rotate(35)%22><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(60)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(120)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(180)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(240)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(300)%22/><circle r=%229%22/></g><g transform=%22translate(870,330) scale(1) rotate(10)%22><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(60)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(120)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(180)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(240)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(300)%22/><circle r=%229%22/></g><g transform=%22translate(1050,460) scale(0.6) rotate(-25)%22><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(60)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(120)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(180)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(240)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(300)%22/><circle r=%229%22/></g><g transform=%22translate(1230,340) scale(1.05) rotate(18)%22><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(60)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(120)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(180)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(240)%22/><path d=%22M0,-6 C-13,-17 -13,-32 0,-40 C13,-32 13,-17 0,-6 Z%22 transform=%22rotate(300)%22/><circle r=%229%22/></g><path d=%22M150,360 Q170,340 200,345%22/><path d=%22M300,430 Q325,415 355,425%22/><path d=%22M500,330 Q525,310 555,320%22/><path d=%22M720,420 Q745,405 775,415%22/><path d=%22M950,310 Q975,295 1005,305%22/><path d=%22M1130,420 Q1155,405 1185,415%22/></g></svg>");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Slogan italique doré --- */
.cpe-slogan {
  font-family: var(--wp--preset--font-family--titres);
  font-style: italic;
  color: var(--wp--preset--color--or);
  text-align: center;
}

/* --- Ligne de réassurance sous le hero --- */
.cpe-confiance {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--creme-attenue);
}
.cpe-confiance span { display: flex; align-items: center; gap: 8px; }
.cpe-confiance span::before { content: "—"; color: var(--wp--preset--color--or); }

/* --- Reassurance sur la fiche produit : empilee et alignee a gauche --- */
.cpe-confiance--produit {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  justify-content: flex-start;
}

/* --- Halo bordeaux en bas de l'appel final --- */
.cpe-final {
  background: linear-gradient(180deg, rgba(124, 31, 46, 0) 0%, rgba(124, 31, 46, 0.24) 50%, rgba(124, 31, 46, 0) 100%);
}

/* --- Listes du pied de page : sans puces --- */
.cpe-liste-pied,
.wp-block-group footer .wp-block-list,
footer .wp-block-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.cpe-liste-pied li,
footer .wp-block-list li {
  margin-bottom: 9px;
}

/* --- Traits colores sous les titres de categorie --- */
/* Le trait se deploie de 0 a 56px quand la section entre a l'ecran */
.cpe-trait {
  width: 56px;
  height: 2px;
  margin: 0 auto 22px;
  border-radius: 2px;
  background: var(--wp--preset--color--or);
}
.cpe-chapitre .cpe-trait {
  width: 0;
  transition: width 1s cubic-bezier(.16, 1, .3, 1) .3s;
}
.cpe-chapitre.cpe-actif .cpe-trait { width: 56px; }
@media (prefers-reduced-motion: reduce) {
  .cpe-chapitre .cpe-trait { width: 56px; transition: none; }
}
.cpe-trait--bordeaux { background: var(--wp--preset--color--bordeaux-vif); }
.cpe-trait--rose { background: var(--wp--preset--color--rose-fumee); }

/* --- Effet projecteur : la catégorie visible s'illumine --- */
/* Fondu simple : pas de zoom, donc aucun retrecissement du bloc
   et aucun recalcul de mise en page -> parfaitement fluide. */
.cpe-chapitre {
  opacity: 0.45;
  transition: opacity .55s ease-out;
  will-change: opacity;
}
.cpe-chapitre.cpe-actif { opacity: 1; }

/* --- Apparition au défilement --- */
.cpe-apparition {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  will-change: opacity, transform;
}
.cpe-apparition.cpe-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .cpe-chapitre, .cpe-apparition {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* ==========================================================================
   MOBILE ET TABLETTE
   ========================================================================== */

/* --- Tablette --- */
@media (max-width: 900px) {
  .cpe-chapitre { opacity: 1; transition: none; }
  .cpe-confiance { gap: 20px; font-size: 0.72rem; }
  .cpe-icone { width: 48px !important; height: 48px !important; margin-left: auto; margin-right: auto; }
}

/* --- Mobile --- */
@media (max-width: 781px) {

  /* Le bandeau peut passer sur 2 lignes : l'en-tete ne doit plus etre colle a 37px */
  .wp-site-blocks > header { position: relative; top: 0; }
  .cpe-annonce { position: relative; font-size: 0.68rem; padding: 8px 14px; line-height: 1.4; }

  /* Barre d'en-tete : titre a gauche, actions a droite, menu en burger */
  .cpe-barre > .wp-block-navigation {
    position: static;
    left: auto;
    transform: none;
  }
  .cpe-barre {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .cpe-rangee, .cpe-grille-produits { padding-left: 20px !important; padding-right: 20px !important; }
  .cpe-actions { gap: 14px; }


  /* Reassurance : une ligne par argument, plus lisible */
  .cpe-confiance {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  /* Le decor de roses est trop charge sur un petit ecran */
  .cpe-hero::before { opacity: 0.5; }

  /* Titres : on evite les titres geants qui debordent */
  .cpe-hero h1 { word-break: break-word; hyphens: auto; }

  /* WooCommerce : tableaux lisibles sur mobile */
  .woocommerce table.shop_table_responsive tr td { text-align: right; }
  .woocommerce-MyAccount-navigation { margin-bottom: 24px; }
  .woocommerce form .form-row { width: 100%; }
}

/* --- Tres petit ecran --- */
@media (max-width: 480px) {
  .cpe-annonce { font-size: 0.64rem; letter-spacing: 0.04em; }
  .cpe-mini-flamme { height: 40px; }
  .cpe-logo { font-size: 1.05rem; }
}

/* --- Zones tactiles : minimum 44px pour les liens d'action --- */
@media (hover: none) {
  .cpe-carte:hover, .cpe-mini-carte:hover { transform: none; }
  .cpe-actions a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .woocommerce-MyAccount-navigation li a { padding: 14px 16px; }
}

/* ==========================================================================
   MOBILE — passe complete
   ========================================================================== */
@media (max-width: 781px) {

  /* --- En-tete : logo a gauche, compte + panier + menu a droite --- */
  .cpe-barre {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 16px !important;
  }
  .cpe-logo {
    font-size: 1rem !important;
    margin-right: auto !important;
    white-space: nowrap;
  }
  /* Le menu redevient un bouton hamburger, place en dernier */
  .cpe-barre > .wp-block-navigation {
    position: static !important;
    transform: none !important;
    order: 5;
  }
  .cpe-barre > .wp-block-woocommerce-customer-account { order: 3; }
  .cpe-barre > .wp-block-woocommerce-mini-cart { order: 4; }
  .cpe-actions { order: 6; }

  /* Zones tactiles confortables */
  .wc-block-customer-account,
  .wc-block-mini-cart__button,
  .wp-block-navigation__responsive-container-open {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Menu deroulant plein ecran, lisible */
  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--noir) !important;
    padding: 70px 24px 40px !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open a {
    font-size: 1.3rem !important;
    letter-spacing: 0.04em;
    padding: 12px 0;
    display: block;
  }

  /* Bouton Decouvrir : conserve, mais compact */
  .cpe-bouton-entete .wp-block-button__link {
    padding: 8px 14px !important;
    font-size: 0.72rem !important;
  }

  /* --- Toutes les rangees de colonnes s empilent --- */
  .cpe-etapes,
  .cpe-promesses,
  .cpe-rangee,
  .cpe-composer .wp-block-columns {
    flex-direction: column !important;
    gap: 18px !important;
  }
  .cpe-etapes .wp-block-column,
  .cpe-promesses .wp-block-column,
  .cpe-rangee .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100%;
  }
  /* Le trait de liaison entre etapes n a plus de sens en pile */
  .cpe-etape::after { display: none !important; }

  /* --- Marges laterales resserrees partout --- */
  .cpe-composer,
  .cpe-chapitre,
  .cpe-apparition,
  .cpe-hero,
  .cpe-final {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .cpe-rangee,
  .cpe-grille-produits {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Respiration verticale reduite --- */
  .cpe-composer,
  .cpe-chapitre,
  .cpe-apparition,
  .cpe-final {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* --- Titres a taille lisible --- */
  .cpe-grand-titre { font-size: 1.85rem !important; }
  .cpe-hero h1 { font-size: 2.1rem !important; line-height: 1.15; }
  .cpe-slogan { font-size: 1rem !important; }

  /* --- Bouton "laissez-vous guider" pleine largeur --- */
  .cpe-guide-bouton {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 16px 18px;
    font-size: 0.82rem;
  }
  .cpe-guide-note { text-align: center; }

  /* --- Cartes d etape --- */
  .cpe-etape { padding: 28px 22px 24px !important; }
  .cpe-etape-num { font-size: 1.8rem; top: 16px; right: 18px; }
  .cpe-etape .cpe-icone { margin-bottom: 16px; }

  /* --- Questionnaire --- */
  .cpe-quiz-panneau { margin-top: 36px; }
  .cpe-quiz { padding: 28px 18px; min-height: 0; }
  .cpe-quiz-question { font-size: 1.25rem; }
  .cpe-quiz-reponse { padding: 16px 16px; font-size: 0.9rem; }
  .cpe-quiz-reponse:hover { transform: none; }
  .cpe-quiz-resultat-titre { font-size: 1.5rem; }
  .cpe-quiz-bouton { display: block; width: 100%; text-align: center; }
  .cpe-quiz-recap li { padding: 14px 0; }

  /* --- Articles centres sur mobile --- */
  .cpe-grille-produits .woocommerce ul.products {
    grid-template-columns: 1fr !important;
    justify-items: center;
    gap: 22px !important;
  }
  .cpe-grille-produits .woocommerce ul.products li.product {
    width: 100% !important;
    max-width: 420px;
    margin: 0 auto !important;
    text-align: center;
  }
  .cpe-grille-produits .woocommerce ul.products li.product a img {
    margin-left: auto;
    margin-right: auto;
  }
  .cpe-grille-produits .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .cpe-grille-produits .woocommerce ul.products li.product .price,
  .cpe-grille-produits .woocommerce ul.products li.product .star-rating,
  .cpe-grille-produits .woocommerce ul.products li.product .button {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    float: none !important;
  }
  .cpe-grille-produits .woocommerce ul.products li.product .button {
    display: block;
    width: calc(100% - 44px);
  }

  /* Cartes des petites bougies : centrees aussi */
  .cpe-mini-carte { max-width: 420px; margin-left: auto !important; margin-right: auto !important; }

  /* Le panier doit rester visible a cote du compte */
  .cpe-barre > .wp-block-woocommerce-mini-cart,
  .wc-block-mini-cart {
    display: flex !important;
    visibility: visible !important;
  }
  .wc-block-mini-cart__button { display: inline-flex !important; }

  /* --- Pied de page en deux colonnes --- */
  footer .wp-block-columns { flex-wrap: wrap !important; gap: 28px !important; }
  footer .wp-block-column { flex-basis: 45% !important; }
  footer .wp-block-column:first-child { flex-basis: 100% !important; }
  .footer-bottom, footer .wp-block-group { text-align: left; }

  /* --- Aucune animation de survol au doigt --- */
  .cpe-carte:hover, .cpe-mini-carte:hover, .cpe-etape:hover { transform: none; }
}

/* --- Tres petit ecran --- */
@media (max-width: 400px) {
  .cpe-logo { font-size: 0.92rem !important; }
  .cpe-barre { gap: 6px; padding: 12px 12px !important; }
  .cpe-hero h1 { font-size: 1.85rem !important; }
  .cpe-grand-titre { font-size: 1.6rem !important; }
  .cpe-quiz { padding: 24px 14px; }
}

/* --- Images toujours fluides --- */
img, svg, video { max-width: 100%; height: auto; }

/* --- Debordement horizontal : securite --- */
.wp-site-blocks { overflow-x: clip; }

/* --- Icones des cartes univers --- */
.cpe-icone,
.wp-block-html .cpe-icone {
  width: 58px;
  height: 58px;
  color: var(--wp--preset--color--or);
  margin-bottom: 16px;
  display: block;
  transition: transform .3s ease, color .3s ease;
}

/* --- Cartes entierement cliquables --- */
/* Le lien "Des 14 EUR" s'etend sur toute la carte grace a un calque invisible.
   Toute la carte devient donc cliquable, sans casser la structure des blocs. */
.cpe-carte { position: relative; }
.wp-block-column.cpe-carte .cpe-lien-carte::after,
.cpe-carte .cpe-lien-carte::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  display: block;
}
.cpe-carte:hover { cursor: pointer; }
.cpe-carte .cpe-lien-carte {
  transition: color .3s ease;
}
.cpe-carte:hover .cpe-lien-carte { color: var(--wp--preset--color--creme); }

/* --- Cartes avec effet de levee au survol --- */
.wp-block-column.cpe-carte,
.cpe-carte {
  transition: transform .3s ease, border-color .3s ease;
}
.wp-block-column.cpe-carte:hover,
.cpe-carte:hover {
  transform: translateY(-6px);
  border-color: rgba(198, 161, 91, 0.45) !important;
}
.cpe-carte:hover .cpe-icone {
  transform: scale(1.08);
  color: var(--wp--preset--color--creme);
}
.cpe-carte:focus-within {
  transform: translateY(-6px);
  border-color: rgba(198, 161, 91, 0.4) !important;
}

/* --- Petite flamme animee (bougies a l unite) --- */
.cpe-mini-flamme {
  width: 2px;
  height: 52px;
  margin: 0 auto 18px;
  background: linear-gradient(to top, rgba(166, 107, 114, 0.9), rgba(166, 107, 114, 0));
  position: relative;
}
.cpe-flamme {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 22px;
}
.cpe-flamme::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 70%, rgba(198, 161, 91, 1) 0%, rgba(158, 42, 59, 1) 55%, rgba(158, 42, 59, 0) 75%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: center bottom;
  animation: cpe-vacille 2.6s ease-in-out infinite;
}
@keyframes cpe-vacille {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  25% { transform: scaleY(1.06) rotate(-2deg); }
  50% { transform: scaleY(0.94) rotate(1deg); }
  75% { transform: scaleY(1.03) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cpe-flamme::before { animation: none; }
}

/* --- Petites cartes (bougies a l unite) : cliquables comme les grandes --- */
.cpe-mini-carte {
  position: relative;
  transition: border-color .3s ease, transform .3s ease;
}
.cpe-mini-carte:hover {
  transform: translateY(-6px);
  border-color: rgba(198, 161, 91, 0.45) !important;
  cursor: pointer;
}
.cpe-mini-carte .cpe-lien-carte { color: var(--wp--preset--color--or); }
.cpe-mini-carte:hover .cpe-lien-carte { color: var(--wp--preset--color--creme); }
/* La flamme s anime un peu plus au survol */
.cpe-mini-carte:hover .cpe-flamme::before { animation-duration: 1.4s; }

/* --- Accessibilité clavier --- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--wp--preset--color--or);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Grille de produits generee par le code court [products] --- */
.cpe-grille-produits .woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cpe-grille-produits .woocommerce ul.products::before,
.cpe-grille-produits .woocommerce ul.products::after { display: none; }

.cpe-grille-produits .woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background: var(--wp--preset--color--noir-2);
  border: 1px solid rgba(198, 161, 91, 0.14);
  border-radius: 4px;
  padding: 0 0 22px;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
  text-align: left;
}
.cpe-grille-produits .woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  border-color: rgba(198, 161, 91, 0.4);
}
.cpe-grille-produits .woocommerce ul.products li.product a img {
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(198, 161, 91, 0.14);
}
.cpe-grille-produits .woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0 22px;
  font-size: 1.15rem !important;
  margin: 0 0 8px;
}
.cpe-grille-produits .woocommerce ul.products li.product .star-rating {
  margin: 0 22px 10px;
  float: none;
}
.cpe-grille-produits .woocommerce ul.products li.product .price {
  display: block;
  margin: 0 22px 4px;
  font-size: 1.3rem;
}
.cpe-grille-produits .woocommerce ul.products li.product .price del { opacity: 0.5; font-size: 0.8em; }
.cpe-grille-produits .woocommerce ul.products li.product .star-rating span::before { color: var(--wp--preset--color--or); }
.cpe-grille-produits .woocommerce ul.products li.product .button {
  margin: 14px 22px 0;
  display: inline-block;
  padding: 12px 22px;
}
.cpe-grille-produits .woocommerce ul.products li.product .added_to_cart {
  display: inline-block;
  margin: 10px 22px 0;
  font-size: 0.82rem;
}

/* --- Message a la place d'une grille vide --- */
.cpe-avis-produits {
  text-align: center;
  color: var(--wp--preset--color--creme-attenue);
  font-size: 0.92rem;
  padding: 34px 20px;
  border: 1px dashed rgba(198, 161, 91, 0.3);
  border-radius: 4px;
  margin: 0;
}

/* --- Badges sur les produits --- */
/* "Coup de coeur" : coche simplement "Mis en avant" (etoile) sur un produit */
.cpe-grille-produits .woocommerce ul.products li.product { position: relative; }
.cpe-grille-produits .woocommerce ul.products li.product.featured::after {
  content: "Coup de cœur";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(18, 11, 13, 0.72);
  color: var(--wp--preset--color--or);
  border: 1px solid rgba(198, 161, 91, 0.4);
  padding: 5px 10px;
  border-radius: 2px;
}
/* Badge promotion natif de WooCommerce, aux couleurs de la boutique */
.woocommerce span.onsale,
.cpe-grille-produits .woocommerce ul.products li.product .onsale {
  background: var(--wp--preset--color--bordeaux);
  color: var(--wp--preset--color--creme);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: 6px 11px;
  top: 14px;
  right: 14px;
  left: auto;
  margin: 0;
}

/* --- Mise en page asymetrique : 1 grand produit + 2 petits --- */
.cpe-asym-grand .woocommerce ul.products { grid-template-columns: 1fr; }
.cpe-asym-grand .woocommerce ul.products li.product a img { min-height: 300px; object-fit: cover; }
.cpe-asym-grand .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.4rem !important; }

.cpe-asym-petits .woocommerce ul.products { grid-template-columns: 1fr; gap: 26px; }
.cpe-asym-petits .woocommerce ul.products li.product a img { min-height: 120px; object-fit: cover; }
.cpe-asym-petits .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.1rem !important; }

@media (max-width: 781px) {
  .cpe-asym .wp-block-column { flex-basis: 100% !important; }
  .cpe-asym-grand .woocommerce ul.products li.product a img { min-height: 200px; }
}

/* Message quand aucun produit n'existe encore */
.cpe-grille-produits .woocommerce-info,
.cpe-grille-produits .woocommerce .woocommerce-no-products-found {
  background: var(--wp--preset--color--noir-2);
  border-top: 2px solid var(--wp--preset--color--or);
  color: var(--wp--preset--color--creme-attenue);
  text-align: center;
}

@media (max-width: 900px) {
  .cpe-grille-produits .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 600px) {
  .cpe-grille-produits .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WOOCOMMERCE — panier, commande, compte client
   Habillage complet aux couleurs de la boutique.
   ========================================================================== */

.woocommerce-cart, .woocommerce-checkout, .woocommerce-account {
  background-color: var(--wp--preset--color--noir);
  color: var(--wp--preset--color--creme-attenue);
}

/* --- Titres de page --- */
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-account .wp-block-post-title,
.woocommerce-account .entry-title {
  font-family: var(--wp--preset--font-family--titres);
  color: var(--wp--preset--color--creme);
}

/* --------------------------------------------------------------------------
   LE PANIER
   -------------------------------------------------------------------------- */

/* Tableau du panier : lignes espacees, sans bordures lourdes */
.woocommerce table.shop_table {
  background-color: transparent;
  border: none;
  border-collapse: collapse;
  border-radius: 0;
  width: 100%;
}
.woocommerce table.shop_table thead th {
  color: var(--wp--preset--color--or);
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-bottom: 1px solid rgba(198, 161, 91, 0.25);
  padding: 0 0 16px;
  text-align: left;
}
.woocommerce table.shop_table tbody td {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(198, 161, 91, 0.12);
  padding: 24px 0;
  vertical-align: middle;
  color: var(--wp--preset--color--creme-attenue);
}
.woocommerce table.shop_table tbody tr:last-child td { border-bottom: none; }

/* Vignette produit */
.woocommerce table.shop_table td.product-thumbnail img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(198, 161, 91, 0.18);
}

/* Nom du produit */
.woocommerce table.shop_table td.product-name a {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.08rem;
  color: var(--wp--preset--color--creme);
}
.woocommerce table.shop_table td.product-name a:hover { color: var(--wp--preset--color--or); }
.woocommerce table.shop_table td.product-name .variation {
  font-size: 0.8rem;
  color: var(--wp--preset--color--creme-attenue);
  margin: 6px 0 0;
}

/* Prix et sous-total en dore */
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.08rem;
  color: var(--wp--preset--color--or);
}

/* Champ quantite */
.woocommerce .quantity .qty {
  background-color: var(--wp--preset--color--noir-2);
  border: 1px solid rgba(198, 161, 91, 0.3);
  color: var(--wp--preset--color--creme);
  border-radius: 2px;
  padding: 10px 8px;
  width: 72px;
  text-align: center;
  font-family: var(--wp--preset--font-family--texte);
}
.woocommerce .quantity .qty:focus {
  border-color: var(--wp--preset--color--or);
  outline: none;
}

/* Croix de suppression : discrete, doree au survol */
.woocommerce a.remove {
  color: var(--wp--preset--color--creme-attenue) !important;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transition: color .2s ease, background-color .2s ease;
}
.woocommerce a.remove:hover {
  color: var(--wp--preset--color--creme) !important;
  background-color: var(--wp--preset--color--bordeaux);
}

/* Ligne du bas : code promo + mise a jour */
.woocommerce table.shop_table td.actions {
  padding: 26px 0 0;
  border-bottom: none;
}
.woocommerce .coupon {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.woocommerce #coupon_code.input-text {
  background-color: var(--wp--preset--color--noir-2);
  border: 1px solid rgba(198, 161, 91, 0.3);
  color: var(--wp--preset--color--creme);
  border-radius: 2px;
  padding: 12px 14px;
  width: auto;
  min-width: 190px;
}

/* --- Encadre des totaux : le bloc premium du panier --- */
.woocommerce .cart-collaterals { width: 100%; }
.woocommerce .cart-collaterals .cart_totals {
  float: right;
  width: 100%;
  max-width: 420px;
  background-color: var(--wp--preset--color--noir-2);
  border: 1px solid rgba(198, 161, 91, 0.22);
  border-radius: 4px;
  padding: 30px 28px;
}
.woocommerce .cart_totals h2 {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.25rem;
  color: var(--wp--preset--color--creme);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(198, 161, 91, 0.18);
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  padding: 13px 0;
  border-bottom: 1px solid rgba(198, 161, 91, 0.1);
  font-size: 0.92rem;
}
.woocommerce .cart_totals table.shop_table th {
  color: var(--wp--preset--color--creme-attenue);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(198, 161, 91, 0.1);
}
.woocommerce .cart_totals table.shop_table td { text-align: right; }
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td {
  border-bottom: none;
  padding-top: 18px;
}
.woocommerce .cart_totals tr.order-total th {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.1rem;
  color: var(--wp--preset--color--creme);
}
.woocommerce .cart_totals tr.order-total .amount {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.55rem;
  color: var(--wp--preset--color--or);
}
.woocommerce .wc-proceed-to-checkout {
  padding: 22px 0 0;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 17px 24px;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}
/* Rappels de reassurance sous le bouton de commande */
.woocommerce .wc-proceed-to-checkout::after {
  content: "Emballage cadeau inclus · Expédié de France sous 48h";
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--creme-attenue);
}

/* --- Panier vide --- */
.woocommerce .cart-empty {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.4rem;
  color: var(--wp--preset--color--creme);
  text-align: center;
  border: none;
  background: none;
  padding: 40px 0 10px;
}
.woocommerce .cart-empty::before { display: none; }
.woocommerce .return-to-shop { text-align: center; padding-bottom: 40px; }

/* --------------------------------------------------------------------------
   COMMANDE (CHECKOUT)
   -------------------------------------------------------------------------- */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.3rem;
  color: var(--wp--preset--color--creme);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(198, 161, 91, 0.18);
  margin-bottom: 22px;
}
.woocommerce form .form-row label {
  color: var(--wp--preset--color--creme-attenue);
  font-size: 0.84rem;
  margin-bottom: 7px;
  display: block;
}
.woocommerce form .form-row .required { color: var(--wp--preset--color--or); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  background-color: var(--wp--preset--color--noir-2);
  border: 1px solid rgba(198, 161, 91, 0.28);
  color: var(--wp--preset--color--creme);
  border-radius: 2px;
  padding: 13px 14px;
  height: auto;
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.94rem;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--wp--preset--color--or);
  outline: none;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--wp--preset--color--creme);
  line-height: 1.6;
}
.woocommerce-checkout #payment {
  background-color: var(--wp--preset--color--noir-2);
  border: 1px solid rgba(198, 161, 91, 0.22);
  border-radius: 4px;
  padding: 24px;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid rgba(198, 161, 91, 0.15);
  padding: 0 0 18px;
}
.woocommerce-checkout #payment div.payment_box {
  background-color: var(--wp--preset--color--noir);
  color: var(--wp--preset--color--creme-attenue);
  border-radius: 2px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment #place_order {
  width: 100%;
  padding: 17px 24px;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   ESPACE CLIENT
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 26%;
  background-color: var(--wp--preset--color--noir-2);
  border: 1px solid rgba(198, 161, 91, 0.2);
  border-radius: 4px;
  padding: 8px 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid rgba(198, 161, 91, 0.1);
  margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 20px;
  color: var(--wp--preset--color--creme-attenue);
  font-size: 0.9rem;
  transition: color .2s ease, background-color .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--wp--preset--color--creme);
  background-color: rgba(198, 161, 91, 0.06);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--wp--preset--color--or);
  border-left: 2px solid var(--wp--preset--color--or);
  background-color: rgba(198, 161, 91, 0.08);
}
.woocommerce-account .woocommerce-MyAccount-content { width: 70%; }

/* Formulaire de connexion */
.woocommerce form.login,
.woocommerce form.register {
  background-color: var(--wp--preset--color--noir-2);
  border: 1px solid rgba(198, 161, 91, 0.2);
  border-radius: 4px;
  padding: 30px 28px;
}

/* --------------------------------------------------------------------------
   BOUTONS ET MESSAGES
   -------------------------------------------------------------------------- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--wp--preset--color--bordeaux);
  color: var(--wp--preset--color--creme);
  border: none;
  border-radius: 2px;
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 26px;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--wp--preset--color--creme);
  color: var(--wp--preset--color--noir);
  transform: translateY(-2px);
}
.woocommerce button.button:disabled,
.woocommerce a.button.disabled {
  background-color: var(--wp--preset--color--noir-2);
  color: var(--wp--preset--color--creme-attenue);
  opacity: 1;
}

/* Messages : succes, info, erreur */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  background-color: var(--wp--preset--color--noir-2);
  color: var(--wp--preset--color--creme-attenue);
  border-top: 2px solid var(--wp--preset--color--or);
  border-radius: 3px;
  padding: 16px 20px 16px 20px;
  list-style: none;
}
.woocommerce .woocommerce-error { border-top-color: var(--wp--preset--color--bordeaux-vif); }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before { display: none; }

/* Liens WooCommerce sans soulignement, comme le reste du site */
.woocommerce a, .woocommerce a.button, .woocommerce button.button { text-decoration: none; }

/* --- Icones WooCommerce dans l'en-tete (compte + mini-panier) --- */
/* WooCommerce insere ses propres blocs : on les habille aux couleurs du site
   et on les place a droite, a la place des anciennes icones du theme. */
.cpe-barre > .wp-block-woocommerce-customer-account,
.cpe-barre > .wp-block-woocommerce-mini-cart {
  margin: 0;
  display: flex;
  align-items: center;
}
.wc-block-customer-account,
.wc-block-mini-cart__button {
  color: var(--wp--preset--color--creme) !important;
  background: none !important;
  border: none;
  padding: 0;
  min-width: 0;
  transition: color .2s ease;
}
.wc-block-customer-account:hover,
.wc-block-mini-cart__button:hover {
  color: var(--wp--preset--color--or) !important;
  background: none !important;
}
.wc-block-customer-account svg,
.wc-block-mini-cart__button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}
/* Pastille du nombre d'articles, aux couleurs de la boutique */
.wc-block-mini-cart__badge {
  background: var(--wp--preset--color--bordeaux) !important;
  color: var(--wp--preset--color--creme) !important;
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.62rem;
  font-weight: 600;
  border: none;
}
/* Securite : l icone du compte doit rester visible en toutes circonstances */
.wp-block-woocommerce-customer-account,
.wc-block-customer-account {
  display: flex !important;
  align-items: center;
  visibility: visible !important;
}
.wc-block-customer-account__account-icon,
.wc-block-customer-account svg {
  display: block !important;
  width: 20px;
  height: 20px;
}

/* Le montant a cote du panier n'apporte rien dans l'en-tete */
.wc-block-mini-cart__amount { display: none; }

/* Tiroir du mini-panier aux couleurs du site */
.wc-block-mini-cart__drawer .wc-block-components-drawer {
  background: var(--wp--preset--color--noir-2);
  color: var(--wp--preset--color--creme-attenue);
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__title,
.wc-block-mini-cart__drawer .wc-block-components-product-name {
  color: var(--wp--preset--color--creme);
  font-family: var(--wp--preset--font-family--titres);
}
.wc-block-mini-cart__drawer .wc-block-components-product-price {
  color: var(--wp--preset--color--or);
}

/* --- Compteur du panier dans l'en-tete --- */
.cpe-panier { position: relative; display: inline-flex; align-items: center; }
.cpe-panier-compte {
  position: absolute;
  top: -7px;
  right: -9px;
  background: var(--wp--preset--color--bordeaux);
  color: var(--wp--preset--color--creme);
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ==========================================================================
   RESPIRATION — chaque section occupe environ un ecran
   ========================================================================== */

/* Les sections de categorie remplissent l ecran : un coup de molette,
   une categorie. Le contenu reste centre verticalement. */
.cpe-chapitre {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cpe-hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
@media (max-width: 900px) {
  .cpe-chapitre, .cpe-hero { min-height: auto; }
}

/* --- Invitation a faire defiler, en bas du hero --- */
.cpe-defiler {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--wp--preset--color--creme-attenue);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity .3s ease, color .3s ease;
  z-index: 2;
}
.cpe-defiler:hover { opacity: 1; color: var(--wp--preset--color--or); }
.cpe-defiler svg {
  width: 22px;
  height: 22px;
  animation: cpe-descend 2.2s ease-in-out infinite;
}
@keyframes cpe-descend {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cpe-defiler svg { animation: none; }
}
@media (max-width: 900px) { .cpe-defiler { display: none; } }

/* --- Separation nette entre deux sections --- */
.cpe-sous-section {
  border-top: 1px solid rgba(198, 161, 91, 0.14);
  padding-top: var(--wp--preset--spacing--50);
  margin-top: var(--wp--preset--spacing--40);
}

/* --- Bougies a l unite : texte plus genereux --- */
.cpe-mini-carte h4 { font-size: 1.25rem !important; margin-bottom: 8px; }
.cpe-mini-carte .cpe-note { font-size: 0.78rem !important; letter-spacing: 0.08em; }
.cpe-mini-carte .cpe-prix { font-size: 1.35rem !important; }
.cpe-mini-carte { padding: 30px 20px !important; }
.cpe-mini-flamme { height: 62px; margin-bottom: 24px; }

/* ==========================================================================
   COMPOSEZ SON CADEAU — les trois etapes
   ========================================================================== */
.cpe-composer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cpe-etapes { align-items: stretch; }
.cpe-etape {
  position: relative;
  background: var(--wp--preset--color--noir-2);
  border: 1px solid rgba(198, 161, 91, 0.14);
  border-radius: 4px;
  padding: 40px 30px 34px !important;
  display: flex;
  flex-direction: column;
}
.cpe-etape-num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--wp--preset--font-family--titres);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--wp--preset--color--or);
  opacity: 0.18;
}
.cpe-etape .cpe-icone { margin-bottom: 22px; }
.cpe-etape p:nth-of-type(1) { flex: 1; }

/* Trait de liaison entre les etapes, facon parcours */
@media (min-width: 782px) {
  .cpe-etape:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -26px;
    width: 26px;
    height: 1px;
    background: rgba(198, 161, 91, 0.25);
  }
}

/* ==========================================================================
   QUESTIONNAIRES — panneau masque, ouvert au clic
   ========================================================================== */

/* --- Bouton "laissez-vous guider", au-dessus des trois etapes --- */
.cpe-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cpe-guide-bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wp--preset--color--bordeaux);
  color: var(--wp--preset--color--creme);
  border: none;
  border-radius: 2px;
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 32px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.cpe-guide-bouton:hover {
  background: var(--wp--preset--color--creme);
  color: var(--wp--preset--color--noir);
  transform: translateY(-2px);
}
.cpe-guide-bouton svg { flex-shrink: 0; }
.cpe-guide-note {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--creme-attenue);
}

/* --- Liens des trois etapes --- */
.cpe-etape-lien {
  color: var(--wp--preset--color--or);
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: auto;
}

/* --- Le panneau : masque par defaut, deplie au clic --- */
.cpe-quiz-panneau {
  position: relative;
  max-width: 660px;
  margin: var(--wp--preset--spacing--50) auto 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
}
.cpe-quiz-panneau[hidden] { display: none; }
.cpe-quiz-panneau.est-ouvert { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .cpe-quiz-panneau { transition: none; transform: none; }
}

.cpe-quiz-fermer {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  background: none;
  border: none;
  color: var(--wp--preset--color--creme-attenue);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color .2s ease;
}
.cpe-quiz-fermer:hover { color: var(--wp--preset--color--or); }

.cpe-quiz {
  background: var(--wp--preset--color--noir-2);
  border: 1px solid rgba(198, 161, 91, 0.22);
  border-radius: 5px;
  padding: 44px 38px;
  text-align: center;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Fil d'Ariane du parcours complet */
.cpe-quiz-fil {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--or);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(198, 161, 91, 0.15);
}

.cpe-quiz-points { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.cpe-quiz-points span {
  width: 26px; height: 2px; border-radius: 2px;
  background: rgba(198, 161, 91, 0.25);
  transition: background .35s ease;
}
.cpe-quiz-points span.est-actif { background: var(--wp--preset--color--or); }

.cpe-quiz-etape {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--rose-fumee); margin: 0 0 14px;
}
.cpe-quiz-question {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.65rem; font-weight: 500; color: var(--wp--preset--color--creme);
  margin: 0 0 28px; line-height: 1.25;
}
.cpe-quiz-reponses { display: flex; flex-direction: column; gap: 12px; }
.cpe-quiz-reponse {
  background: transparent;
  border: 1px solid rgba(198, 161, 91, 0.28);
  border-radius: 3px;
  color: var(--wp--preset--color--creme);
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.94rem;
  padding: 15px 20px;
  cursor: pointer;
  text-align: left;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.cpe-quiz-reponse:hover {
  border-color: var(--wp--preset--color--or);
  background-color: rgba(198, 161, 91, 0.07);
  transform: translateX(4px);
}
.cpe-quiz-retour {
  background: none; border: none; cursor: pointer;
  color: var(--wp--preset--color--creme-attenue);
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.82rem; margin-top: 22px; padding: 6px;
  transition: color .2s ease;
}
.cpe-quiz-retour:hover { color: var(--wp--preset--color--or); }

.cpe-quiz-resultat-titre {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 2rem; font-weight: 500; color: var(--wp--preset--color--creme);
  margin: 0 0 16px;
}
.cpe-quiz-resultat-texte {
  color: var(--wp--preset--color--creme-attenue);
  font-size: 0.96rem; margin: 0 auto 28px; max-width: 480px;
}
.cpe-quiz-bouton {
  display: inline-block;
  background: var(--wp--preset--color--bordeaux);
  color: var(--wp--preset--color--creme) !important;
  padding: 15px 32px; border-radius: 2px;
  font-size: 0.86rem; letter-spacing: 0.05em; text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.cpe-quiz-bouton:hover {
  background: var(--wp--preset--color--creme);
  color: var(--wp--preset--color--noir) !important;
  transform: translateY(-2px);
}

/* --- Recapitulatif du parcours complet --- */
.cpe-quiz-recap {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  text-align: left;
}
.cpe-quiz-recap li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(198, 161, 91, 0.14);
}
.cpe-quiz-recap li:last-child { border-bottom: none; }
.cpe-recap-etape {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--rose-fumee);
  margin-bottom: 5px;
}
.cpe-recap-choix {
  display: block;
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.2rem;
  color: var(--wp--preset--color--or);
  margin-bottom: 6px;
}
.cpe-recap-texte {
  display: block;
  font-size: 0.88rem;
  color: var(--wp--preset--color--creme-attenue);
  line-height: 1.55;
}

@media (max-width: 781px) {
  .cpe-quiz { padding: 32px 22px; }
  .cpe-quiz-question { font-size: 1.35rem; }
  .cpe-etape { padding: 32px 24px 28px !important; }
  .cpe-composer { min-height: auto; }
  .cpe-guide-bouton { font-size: 0.8rem; padding: 14px 22px; text-align: left; }
}

/* --- Icones des promesses --- */
/* --- Les trois promesses : mot-cle, icone, titre, description --- */
/* Chaque colonne est une pile verticale centree : les elements restent
   alignes d une colonne a l autre meme si les textes n ont pas la meme longueur. */
.cpe-promesses { align-items: stretch; }
.cpe-promesse {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cpe-promesse-mot {
  order: 1;
  margin: 0 0 16px !important;
  line-height: 1.2;
}
.cpe-icone-promesse {
  order: 2;
  width: 40px;
  height: 40px;
  color: var(--wp--preset--color--or);
  margin: 0 0 20px;
  display: block;
  flex-shrink: 0;
}
.cpe-promesse-titre {
  order: 3;
  color: var(--wp--preset--color--creme) !important;
  margin: 0 0 10px !important;
  min-height: 2.7rem;          /* garde les descriptions alignees */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cpe-promesse-texte {
  order: 4;
  color: var(--wp--preset--color--creme) !important;
  opacity: 0.82;
  margin: 0 !important;
  max-width: 280px;
}
@media (max-width: 781px) {
  .cpe-promesse { margin-bottom: 40px; }
  .cpe-promesse-titre { min-height: 0; }
}

/* --- Les sections occupent toute la largeur de l'ecran --- */
/* Le conteneur principal ne doit rien brider */
.wp-site-blocks > main,
.wp-site-blocks > main > * {
  max-width: none;
}
.cpe-chapitre,
.cpe-apparition,
.cpe-final,
.cpe-hero,
main > .alignfull,
main > .wp-block-group.alignfull {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* Aucune marge laterale globale : les sections gerent la leur (40px) */
body, .wp-site-blocks {
  padding-left: 0;
  padding-right: 0;
}

/* --- Barre d'en-tete pleine largeur : le logo touche le bord --- */
/* Grille en 3 colonnes : la colonne du milieu est exactement centree sur la
   page, quelle que soit la largeur du logo ou des icones. Le menu tombe donc
   sur le meme axe que le texte centre de la banderole. */
/* Le menu est positionne en absolu, exactement au milieu de la page.
   Sa position ne depend donc plus de la largeur du logo ni des icones :
   il tombe toujours sur le meme axe que le texte centre de la banderole. */
.cpe-barre {
  width: 100%;
  max-width: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.cpe-barre > .wp-block-navigation {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
/* La banderole est centree sur la meme page : les deux coincident. */
.cpe-annonce-texte { text-align: center; }
/* Les rangees de cartes suivent la meme largeur que l'en-tete */
.cpe-rangee, .cpe-grille-produits {
  width: 100%;
  max-width: none;
}

/* --- Grand titre de section --- */
.cpe-grand-titre {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem) !important;
  line-height: 1.12;
}

/* --- Alignement des actions de l'en-tete (compte, panier, bouton) --- */
.cpe-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Les blocs "code court" ajoutent un paragraphe : on l'annule */
.cpe-actions > *,
.cpe-actions > p,
.cpe-actions .wp-block-shortcode {
  margin: 0 !important;
  padding: 0;
  display: flex;
  align-items: center;
  line-height: 1;
}
/* Compte et panier dans un seul groupe : alignement garanti */
.cpe-actions-groupe {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  line-height: 1;
}
.cpe-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--wp--preset--color--creme);
  line-height: 1;
}
.cpe-action:hover { color: var(--wp--preset--color--or); }
.cpe-action svg { display: block; }
.cpe-actions a {
  color: var(--wp--preset--color--creme);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.cpe-actions a:hover { color: var(--wp--preset--color--or); }
.cpe-actions svg { display: block; }
.cpe-actions .wp-block-buttons { margin: 0; }
.cpe-actions .wp-block-button { margin: 0; display: flex; align-items: center; }

/* --- Panier et commande sur mobile --- */
@media (max-width: 781px) {
  /* L'entete du tableau doit disparaitre pour que les lignes s'empilent */
  .woocommerce table.shop_table_responsive thead,
  .woocommerce-page table.shop_table_responsive thead { display: none; }
  .woocommerce table.shop_table_responsive,
  .woocommerce table.shop_table_responsive tbody { display: block; width: 100%; }
  .woocommerce table.shop_table_responsive tbody td,
  .woocommerce-page table.shop_table_responsive tbody td {
    display: block;
    width: 100%;
    text-align: right;
    padding: 12px 0;
    border-bottom: 1px solid rgba(198, 161, 91, 0.1);
  }
  /* Libelle devant chaque valeur (Prix, Quantite, Total) */
  .woocommerce table.shop_table_responsive tbody td::before {
    content: attr(data-title) ": ";
    float: left;
    color: var(--wp--preset--color--creme-attenue);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .woocommerce table.shop_table_responsive tbody td.product-thumbnail::before,
  .woocommerce table.shop_table_responsive tbody td.product-remove::before,
  .woocommerce table.shop_table_responsive tbody td.actions::before { content: ""; }
  .woocommerce table.shop_table_responsive tbody tr {
    display: block;
    background-color: var(--wp--preset--color--noir-2);
    border: 1px solid rgba(198, 161, 91, 0.16);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
  }
  .woocommerce .cart-collaterals .cart_totals { max-width: 100%; float: none; }
  .woocommerce table.shop_table td.product-thumbnail { text-align: center; }
  .woocommerce table.shop_table td.product-thumbnail img { width: 100px; height: 100px; }
  .woocommerce .quantity .qty { width: 100%; max-width: 110px; }
  .woocommerce .coupon { flex-direction: column; align-items: stretch; }
  .woocommerce #coupon_code.input-text { min-width: 0; width: 100%; }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { width: 100%; }
  .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 26px; }
}