/* =============================================================
   Parfum Pyramide Olfactive — CSS CLEAN (500 / 1024 / 1025)
   ============================================================= */

/* ===== Variables (mobile par défaut) ===== */
:root {
  /* Espacements */
  --pyr-gap: 8px;
  --pyr-gap-mobile: 8px;

  /* ====== TAILLES NOTES (modifier ici) ====== */
  --pyr-img-mobile: 70px;
  /* 📱 Mobile */
  --pyr-img-tablet: 80px;
  /* 📲 Tablette */
  --pyr-img-desktop: 90px;
  /* 💻 PC portable */

  /* Densité (col = image * facteur) */
  --pyr-col-factor: 2.00;
  /* desktop/tablette */
  --pyr-col-factor-mobile: 2.10;
  /* mobile */

  /* Décalage visuel desktop (0 si inutile) */
  --pyr-nudge: 0px;

  /* Icônes titres (même dossier que ce CSS) */
  --pyr-icon-tete: url("./pyr_top.png");
  --pyr-icon-coeur: url("./pyr_middle.png");
  --pyr-icon-fond: url("./pyr_base.png");

  /* Fonts — mobile (base) */
  --pyr-fs-title: 1.50rem;
  /* Pyramide Olfactive */
  --pyr-fs-tete: 1.00rem;
  --pyr-fs-coeur: 1.00rem;
  --pyr-fs-fond: 1.00rem;
  --pyr-fs-label: 0.90rem;
}

/* ===== Conteneur & titres ===== */
.pyramide-olfactive-container {
  box-sizing: border-box;
  margin: 12px 0;
  padding: 12px 12px 10px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .015), transparent 40%), #fff;
  box-shadow: 0 4px 10px #B4B4B4;
  text-align: center;
}

.pyramide-olfactive-title {
  font-size: var(--pyr-fs-title);
  font-weight: 600;
  margin: 0 0 8px;
  color: #1f1f1f;
  position: relative;
  padding-bottom: 6px;
}

.pyramide-olfactive-title:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6d4688, transparent 85%);
  opacity: .85;
}

.pyramide-level {
  padding: 8px 0 6px;
  border-top: 1px dashed rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pyramide-level:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* Titres niveaux + icône */
.pyramide-level-title {
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 8px;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px;
  background: linear-gradient(90deg, rgba(109, 70, 136, .08), transparent 70%);
  border-radius: 6px;
}

.pyramide-tete .pyramide-level-title {
  font-size: var(--pyr-fs-tete);
}

.pyramide-coeur .pyramide-level-title {
  font-size: var(--pyr-fs-coeur);
}

.pyramide-fond .pyramide-level-title {
  font-size: var(--pyr-fs-fond);
}

.pyramide-level-title::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.pyramide-tete .pyramide-level-title::before {
  background-image: var(--pyr-icon-tete);
}

.pyramide-coeur .pyramide-level-title::before {
  background-image: var(--pyr-icon-coeur);
}

.pyramide-fond .pyramide-level-title::before {
  background-image: var(--pyr-icon-fond);
}

/* ===== Items notes ===== */
.pyramide-note-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  border-radius: 10px;
  padding: 4px 2px;
}

.pyramide-note-label {
  font-size: var(--pyr-fs-label);
  line-height: 1.25;
  color: #1a1a1a;
  max-width: 100%;
  /* Retour à la ligne si nom trop long */
  white-space: normal;
  word-wrap: break-word;
  text-transform: capitalize;
}

/* Vignettes — NORMALISATION stricte (stop images géantes) */
.pyramide-note-item img,
.pyramide-note-placeholder {
  width: var(--pyr-img-mobile);
  height: var(--pyr-img-mobile);
  aspect-ratio: 1/1;
  object-fit: contain;
  display: block;
  max-width: none !important;
  /* bat les styles thème/srcset */
  max-height: none !important;
  border: none;
  border-radius: 10px;
}

/* ===== Rangée des notes (flex shrink-to-content) ===== */
.pyramide-notes-row {
  display: inline-flex;
  /* shrink-to-content */
  flex-wrap: wrap;
  justify-content: center;
  /* centre la dernière ligne */
  gap: var(--pyr-gap-mobile);
  width: auto;
  margin-left: auto;
  margin-right: auto;
  box-sizing: content-box;
}

/* ===== Toggles d’affichage SUPPRIMÉS pour permettre le choix manuel ===== */
/* (Les règles display:none ont été retirées pour que le shortcode s'affiche toujours) */

/* ===========================
   MOBILE (≤768px) — Pyramide 100% largeur
   =========================== */
/* ===========================
   MOBILE (≤768px) — Pyramide 100% largeur
   =========================== */
/* ===========================
   MOBILE (≤768px) — Pyramide 100% largeur + 3 colonnes
   =========================== */
@media (max-width: 768px) {

  /* 1. Le cadre blanc prend 90% de l'écran mobile */
  .single-product .summary .pyramide-olfactive-container,
  .pyramide-olfactive-container {
    display: block !important;

    /* 90% de la largeur écran */
    width: 90vw !important;
    max-width: 90vw !important;

    /* Centrage par rapport au parent */
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    margin-top: 15px !important;
    margin-bottom: 15px !important;

    padding: 15px 5px !important;
    /* Padding interne réduit pour laisser place aux notes */
    box-sizing: border-box !important;

    /* Style carte */
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-radius: 12px !important;
  }

  /* S'assurer que le parent laisse la place */
  .single-product .summary-inner {
    align-items: stretch !important;
    /* Si c'est du flex, on étire */
    width: 100% !important;
  }

  /* 2. Variables pour mobile */
  :root {
    --pyr-gap-mobile: 10px;
  }

  /* 3. La rangée de notes */
  .pyramide-notes-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--pyr-gap-mobile) !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 4. Les items : 3 par ligne */
  .pyramide-note-item {
    flex: 0 0 calc(33.333% - var(--pyr-gap-mobile)) !important;
    max-width: calc(33.333% - var(--pyr-gap-mobile)) !important;
    width: calc(33.333% - var(--pyr-gap-mobile)) !important;
    min-width: 0 !important;
    margin-bottom: 5px !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Images */
  .pyramide-note-item img {
    width: var(--pyr-img-mobile) !important;
    height: var(--pyr-img-mobile) !important;
    object-fit: contain !important;
  }
}

/* ===============================
   TABLETTE (501–1024px) — 5/ligne
   =============================== */
@media (min-width: 501px) and (max-width: 1024px) {

  /* Fonts tablette */
  :root {
    --pyr-fs-title: 3.00rem;
    --pyr-fs-tete: 2.00rem;
    --pyr-fs-coeur: 2.00rem;
    --pyr-fs-fond: 2.00rem;
    --pyr-fs-label: 1.00rem;
  }

  /* Neutraliser les ordres mobiles */
  .single-product .summary,
  .single-product .summary>.summary-inner {
    display: block !important;
  }

  /* Cadre centré + anti-chevauchement */
  .single-product .pyramide-olfactive-container.pyramide--fullwidth {
    display: table !important;
    clear: both !important;
    margin: 16px auto 28px !important;
    text-align: center;
  }

  /* 5 colonnes fixes + centrage */
  :root {
    --_img: var(--pyr-img-tablet);
    --_col: calc(var(--_img) * var(--pyr-col-factor));
  }

  .pyramide-notes-row {
    display: inline-flex !important;
    gap: var(--pyr-gap) !important;
    max-width: calc((var(--_col) * 5) + (var(--pyr-gap) * 4));
  }

  .pyramide-note-item {
    flex: 0 0 var(--_col);
    max-width: var(--_col);
  }

  .pyramide-note-item img {
    width: var(--_img) !important;
    height: var(--_img) !important;
  }

  .pyramide-level-title::before {
    width: 18px;
    height: 18px;
  }
}

/* ===============================
   DESKTOP (≥1025px) — 6/ligne
   =============================== */
@media (min-width: 1025px) {

  /* Fonts desktop */
  :root {
    --pyr-fs-title: 2.00rem;
    --pyr-fs-tete: 1.30rem;
    --pyr-fs-coeur: 1.30rem;
    --pyr-fs-fond: 1.30rem;
    --pyr-fs-label: 1.15rem;
  }

  .single-product .pyramide-olfactive-container.pyramide--fullwidth {
    display: table !important;
    clear: both !important;
    margin: 24px auto calc(40px + var(--pyr-nudge)) !important;
    text-align: center;
    transform: translateY(calc(-1 * var(--pyr-nudge)));
  }

  /* 6 colonnes fixes + centrage */
  :root {
    --_img: var(--pyr-img-desktop);
    --_col: calc(var(--_img) * var(--pyr-col-factor));
  }

  .pyramide-notes-row {
    display: inline-flex !important;
    gap: var(--pyr-gap) !important;
    max-width: calc((var(--_col) * 6) + (var(--pyr-gap) * 5));
  }

  .pyramide-note-item {
    flex: 0 0 var(--_col);
    max-width: var(--_col);
  }

  .pyramide-note-item img {
    width: var(--_img) !important;
    height: var(--_img) !important;
  }

  .pyramide-level-title::before {
    width: 20px;
    height: 20px;
  }
}

/* Tabs du thème : ceinture & bretelles */
.single-product .woocommerce-tabs,
.single-product .product-tabs-wrapper,
.single-product .wd-tabs {
  clear: both !important;
}

/* XS (≤360px) — petits écrans type iPhone SE, réduire pour que 3 notes tiennent */
@media (max-width: 360px) {
  :root {
    --pyr-img-mobile: 55px;
    /* 📱 Petit mobile (modifier ici) */
    --pyr-gap-mobile: 6px;
  }
}

/* PC uniquement (≥1025px) — monter/descendre + espace sous le bloc */
:root {
  --pyr-shift-d: 30px;
  /* >0 = MONTER, <0 = DESCENDRE */
  --pyr-after-d: 48px;
  /* espace réel sous la pyramide */
}

@media (min-width: 1025px) {
  .single-product .pyramide-olfactive-container.pyramide--fullwidth {
    transform: translateY(calc(-1 * var(--pyr-shift-d))) !important;
    margin-bottom: calc(var(--pyr-after-d) + var(--pyr-shift-d)) !important;
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both !important;
    text-align: center !important;
  }
}

/* supprimer le hover de titre */
.single-product .product_title.entry-title.wd-entities-title,
.single-product .product_title.entry-title.wd-entities-title:hover {
  color: #1f1f1f !important;
  text-decoration: none !important;
  transition: none !important;
}


.insp-label {
  color: #000000 !important;
  font-weight: 700;
}

/* Lien "Inspired by" — Couleur dynamique du thème */
.insp-name {
  color: var(--ppo-theme-primary, #6d4688) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
  border-radius: 2px;
}

.insp-name:hover {
  color: var(--ppo-theme-primary-hover, #8a5aad) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.insp-name:focus {
  outline: 2px solid var(--ppo-theme-primary, #6d4688);
  outline-offset: 2px;
  text-decoration: none;
}

.insp-name:focus:not(:focus-visible) {
  outline: none;
}

.insp-name:focus-visible {
  outline: 2px solid var(--ppo-theme-primary, #6d4688);
  outline-offset: 2px;
}

.insp-name:active {
  color: var(--ppo-theme-primary-active, #5a3a70) !important;
  text-decoration: underline;
}

/* Responsive Font Size pour Inspired By */
.inspired-title {
  font-size: var(--insp-fs-d, 15px) !important;
}

@media (max-width: 768px) {
  .inspired-title {
    font-size: var(--insp-fs-m, var(--insp-fs-d, 15px)) !important;
  }
}

.single-product .product_title.entry-title.wd-entities-title,
.single-product .product_title.entry-title.wd-entities-title:hover {
  color: #1f1f1f !important;
  text-decoration: none !important;
  transition: none !important;
}

/* ===== Accessibilité & SEO ===== */
/* Classe pour texte crawlable mais visuellement caché */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   FIX: "Inspired by" Font Size on Grid/Loop (Mobile)
   User Context: "Quick Shop" view (product card grid)
   ============================================================= */
@media (max-width: 768px) {

  /* Cible les items de grille WoodMart (.product-grid-item) et standard WooCommerce (.product) */
  .product-grid-item .inspired-title,
  .wd-product .inspired-title,
  .products .product .inspired-title,
  .related .product .inspired-title,
  .up-sells .product .inspired-title,
  .cross-sells .product .inspired-title,
  .product-small .inspired-title {
    font-size: 9px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
  }
}