/*
 * Widgets Harmony Sound.
 *
 * Les valeurs viennent des variables du theme (--hs-*), jamais de couleurs
 * ecrites en dur : un acheteur qui change sa couleur d'accent dans Elementor
 * doit voir TOUS les widgets suivre. Les replis apres la virgule servent au
 * cas ou l'extension serait active avec un autre theme -- Envato verifie
 * qu'une extension ne casse pas hors de son theme.
 */

.hb-sec { position: relative; }

.hb-sec__haut {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
}
.hb-sec__entete { max-width: 60ch; }
.hb-sec__surtitre {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hs-muted, #6B6B73);
}
.hb-sec__titre { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.hb-sec__chapo { margin: 10px 0 0; color: var(--hs-muted, #6B6B73); }
.hb-sec__lien {
  white-space: nowrap; text-decoration: none;
  border: 1px solid var(--hs-line, rgba(14,14,18,.1));
  border-radius: var(--hs-pill, 999px); padding: 9px 18px; font-size: 14px;
}
.hb-sec__lien:hover { background: var(--hs-bg-soft, #F5F5F6); }

/* Dans l'editeur seulement : explique pourquoi un widget parait vide. */
.hb-vide {
  border: 1px dashed var(--hs-line, rgba(14,14,18,.1));
  border-radius: var(--hs-radius-sm, 14px);
  padding: 18px; color: var(--hs-muted, #6B6B73); text-align: center; margin: 0;
}

/* ---- grilles ------------------------------------------------------------
   Une seule mecanique pour toutes : --hb-colonnes, pose par le reglage
   responsive d'Elementor. auto-fit evite qu'une rangee incomplete s'etire.
   ------------------------------------------------------------------------- */
.hb-produits, .hb-tuiles, .hb-reassure, .hb-avis, .hb-stats {
  --hb-colonnes: 4;
  display: grid; gap: 24px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(var(--hb-colonnes), minmax(0, 1fr));
}
@media (max-width: 781px) {
  .hb-produits, .hb-tuiles, .hb-reassure, .hb-avis, .hb-stats { gap: 16px; }
}

/* ---- heros --------------------------------------------------------------- */
.hb-hero {
  position: relative; display: grid; align-items: end;
  min-height: 70vh; padding: clamp(24px, 5vw, 64px);
  background-size: cover; background-position: center;
  border-radius: var(--hs-radius-lg, 34px); overflow: hidden; isolation: isolate;
}
.hb-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(14,14,18,.85), rgba(14,14,18,0) 65%);
}
.hb-hero__inner { position: relative; color: #fff; max-width: 34ch; }
.hb-hero__surtitre {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.hb-hero__titre { margin: 0 0 22px; color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); }
.hb-hero__bouton, .hb-bouton {
  display: inline-block; text-decoration: none;
  background: var(--hs-accent, #F59E0B); color: var(--hs-accent-ink, #0E0E12);
  border-radius: var(--hs-pill, 999px); padding: 13px 28px; font-weight: 500;
  transition: transform .15s var(--hs-ease, ease);
}
.hb-hero__bouton:active, .hb-bouton:active { transform: scale(.97); }

/* ---- tuiles de rayons ---------------------------------------------------- */
.hb-tuile a {
  display: block; text-decoration: none;
  border-radius: var(--hs-radius, 22px); overflow: hidden;
  background: var(--hs-surface, #fff); border: 1px solid var(--hs-line, rgba(14,14,18,.1));
}
.hb-tuile__media { display: block; aspect-ratio: 4 / 3; background: var(--hs-bg-soft, #F5F5F6); }
.hb-tuile__media img { width: 100%; height: 100%; object-fit: cover; }
.hb-tuile__nom { display: block; padding: 14px 16px 0; font-weight: 500; }
.hb-tuile__compte { display: block; padding: 2px 16px 16px; font-size: 13px; color: var(--hs-muted, #6B6B73); }

/* ---- reassurance --------------------------------------------------------- */
.hb-reassure { --hb-colonnes: 3; }
.hb-reassure__item {
  background: var(--hs-surface, #fff); border: 1px solid var(--hs-line, rgba(14,14,18,.1));
  border-radius: var(--hs-radius, 22px); padding: 22px;
}
.hb-reassure__icone svg, .hb-reassure__icone i { width: 24px; height: 24px; margin-bottom: 10px; }
.hb-reassure__titre { margin: 0 0 6px; font-size: 1.05rem; }
.hb-reassure__texte { margin: 0; color: var(--hs-muted, #6B6B73); font-size: .95rem; }

/* ---- chiffres ------------------------------------------------------------ */
.hb-stats { --hb-colonnes: 3; }
.hb-stats__item { text-align: center; }
.hb-stats__valeur {
  font-family: var(--hs-font-head, inherit); font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600; letter-spacing: -.03em;
}
.hb-stats__libelle { margin: 4px 0 0; color: var(--hs-muted, #6B6B73); }

/* ---- temoignages --------------------------------------------------------- */
.hb-avis { --hb-colonnes: 3; }
.hb-avis__item {
  background: var(--hs-surface, #fff); border: 1px solid var(--hs-line, rgba(14,14,18,.1));
  border-radius: var(--hs-radius, 22px); padding: 24px;
}
.hb-avis__note { margin: 0 0 10px; color: var(--hs-accent, #F59E0B); letter-spacing: .1em; }
.hb-avis__texte { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.55; }
.hb-avis__auteur { margin: 0; font-weight: 500; }
.hb-avis__detail { display: block; font-weight: 400; font-size: .9rem; color: var(--hs-muted, #6B6B73); }

/* ---- bandeau defilant ---------------------------------------------------- */
.hb-marquee {
  --hb-duree: 28s;
  display: flex; gap: 0; overflow: hidden; user-select: none;
  padding: 14px 0; border-block: 1px solid var(--hs-line, rgba(14,14,18,.1));
}
.hb-marquee__piste {
  display: flex; gap: 48px; margin: 0; padding: 0 24px; list-style: none;
  flex: 0 0 auto; min-width: 100%;
  animation: hb-defile var(--hb-duree) linear infinite;
}
.hb-marquee__item {
  white-space: nowrap; font-family: var(--hs-font-head, inherit);
  font-size: clamp(1rem, 2vw, 1.4rem); letter-spacing: -.01em;
}
@keyframes hb-defile { to { transform: translateX(-100%); } }
/* Le defilement s'arrete pour qui a demande a reduire les animations, et le
   texte reste entierement lisible. */
@media (prefers-reduced-motion: reduce) {
  .hb-marquee { overflow-x: auto; }
  .hb-marquee__piste { animation: none; }
  .hb-marquee__piste[aria-hidden="true"] { display: none; }
}

/* ---- compte a rebours ---------------------------------------------------- */
.hb-compte {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--hs-radius-lg, 34px);
  background: var(--hs-dark, #14141A); background-size: cover; background-position: center;
  padding: clamp(28px, 5vw, 64px); color: #fff; text-align: center;
}
.hb-compte::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(14,14,18,.5);
}
.hb-compte .hb-sec__entete { margin-inline: auto; text-align: center; }
.hb-compte .hb-sec__titre, .hb-compte .hb-sec__chapo, .hb-compte .hb-sec__surtitre { color: #fff; }
.hb-compte__horloge { display: flex; justify-content: center; gap: 18px; margin: 22px 0; }
.hb-compte__bloc {
  min-width: 78px; background: rgba(255,255,255,.10);
  border-radius: var(--hs-radius-sm, 14px); padding: 12px 10px;
}
.hb-compte__valeur {
  display: block; font-family: var(--hs-font-head, inherit);
  font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.hb-compte__libelle { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.hb-compte__fini { margin: 18px 0; font-size: 1.1rem; }

/* ---- image + texte ------------------------------------------------------- */
.hb-imgtxt { --hb-part: 50%; display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; }
@media (min-width: 900px) {
  .hb-imgtxt { grid-template-columns: var(--hb-part) 1fr; }
  .hb-imgtxt--droite .hb-imgtxt__media { order: 2; }
}
.hb-imgtxt__media { margin: 0; }
.hb-imgtxt__media img {
  width: 100%; border-radius: var(--hs-radius-lg, 34px); object-fit: cover;
}
.hb-imgtxt__texte .hb-sec__entete { margin-bottom: 14px; }
.hb-prose > * + * { margin-top: 1em; }

/* ---- comparateur avant / apres ------------------------------------------- */
.hb-compare {
  --hb-pos: 50%;
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--hs-radius-lg, 34px); background: var(--hs-bg-soft, #F5F5F6);
}
.hb-compare img { width: 100%; display: block; }
.hb-compare__apres {
  position: absolute; inset: 0; width: var(--hb-pos); overflow: hidden;
}
/* L'image de la couche du dessus doit avoir la MEME largeur que celle du
   dessous, sinon la glissiere compare deux cadrages differents au lieu du
   meme objet. On la dimensionne donc sur le conteneur, pas sur sa boite. */
.hb-compare__apres img { width: 100cqw; max-width: none; }
.hb-compare { container-type: inline-size; }

.hb-compare__etiq {
  position: absolute; top: 14px; z-index: 3;
  background: rgba(14,14,18,.72); color: #fff;
  border-radius: var(--hs-pill, 999px); padding: 5px 14px; font-size: 12px;
}
.hb-compare__etiq--avant { right: 14px; }
.hb-compare__etiq--apres { left: 14px; }

.hb-compare__poignee {
  position: absolute; top: 0; bottom: 0; left: var(--hb-pos); z-index: 4;
  width: 2px; margin-left: -1px; background: #fff; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(14,14,18,.15);
}
.hb-compare__poignee::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 999px; background: #fff; box-shadow: var(--hs-shadow-sm, 0 4px 18px rgba(0,0,0,.12));
}
/* La glissiere couvre toute l'image : on la rend invisible mais bien presente,
   pour garder le clavier, le tactile et l'annonce vocale. */
.hb-compare__glissiere {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
  background: transparent;
}
.hb-compare__glissiere:focus-visible ~ .hb-compare__poignee::after {
  outline: 3px solid var(--hs-accent, #F59E0B); outline-offset: 3px;
}

/* ---- onglets ------------------------------------------------------------- */
.hb-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.hb-onglets__bouton {
  background: transparent; cursor: pointer; font: inherit;
  border: 1px solid var(--hs-line, rgba(14,14,18,.1));
  border-radius: var(--hs-pill, 999px); padding: 9px 20px;
}
.hb-onglets__bouton[aria-selected="true"] {
  background: var(--hs-text, #0E0E12); color: var(--hs-bg, #F1EFE9); border-color: transparent;
}
/* Sans JavaScript, les panneaux restent tous visibles : rien n'est perdu. */
.no-js .hb-onglets { display: none; }

/* ---- grille d'arguments -------------------------------------------------- */
.hb-cartes {
  --hb-colonnes: 3; display: grid; gap: 24px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(var(--hb-colonnes), minmax(0, 1fr));
}
.hb-carte {
  background: var(--hs-surface, #fff); border: 1px solid var(--hs-line, rgba(14,14,18,.1));
  border-radius: var(--hs-radius, 22px); padding: 20px;
}
.hb-carte__media {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--hs-radius-sm, 14px); margin-bottom: 14px;
}
.hb-carte__titre { margin: 0 0 6px; font-size: 1.1rem; }
.hb-carte__texte { margin: 0; color: var(--hs-muted, #6B6B73); font-size: .95rem; }

/* ---- questions frequentes ------------------------------------------------ */
.hb-faq { border-top: 1px solid var(--hs-line, rgba(14,14,18,.1)); max-width: 74ch; }
.hb-faq__item { border-bottom: 1px solid var(--hs-line, rgba(14,14,18,.1)); }
.hb-faq__question {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-family: var(--hs-font-head, inherit); font-size: 1.05rem; font-weight: 500;
}
.hb-faq__question::-webkit-details-marker { display: none; }
.hb-faq__question::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; line-height: 1; color: var(--hs-muted, #6B6B73);
}
.hb-faq__item[open] .hb-faq__question::after { content: "\2212"; }
.hb-faq__reponse { padding: 0 0 20px; color: var(--hs-muted, #6B6B73); }
.hb-faq__reponse > * { margin-top: 0; }

@media (max-width: 781px) {
  .hb-cartes { --hb-colonnes: 1; }
}

/* ---- shop the look ------------------------------------------------------- */
.hb-look { position: relative; border-radius: var(--hs-radius-lg, 34px); overflow: hidden; }
.hb-look__photo { width: 100%; display: block; }

/* Les points sont poses en POURCENTAGE : l'image est fluide, des coordonnees
   en pixels se decaleraient a chaque largeur d'ecran. */
.hb-look__point { position: absolute; transform: translate(-50%, -50%); }

.hb-look__pastille {
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  border: 2px solid #fff; background: rgba(14,14,18,.55); color: #fff;
  font-size: 18px; line-height: 1; display: grid; place-items: center;
  backdrop-filter: blur(4px);
  transition: transform .15s var(--hs-ease, ease);
}
.hb-look__pastille:hover { transform: scale(1.12); }
.hb-look__pastille[aria-expanded="true"] { background: var(--hs-accent, #F59E0B); color: var(--hs-accent-ink, #0E0E12); }
.hb-look__pastille:focus-visible { outline: 3px solid var(--hs-accent, #F59E0B); outline-offset: 3px; }

.hb-look__bulle {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%); z-index: 3; width: 230px;
  background: var(--hs-surface, #fff); border-radius: var(--hs-radius-sm, 14px);
  box-shadow: var(--hs-shadow, 0 10px 40px rgba(0,0,0,.12)); padding: 10px;
}
.hb-look__lien {
  display: grid; grid-template-columns: 56px 1fr; gap: 10px;
  align-items: center; text-decoration: none;
}
.hb-look__lien img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.hb-look__nom { font-size: .92rem; font-weight: 500; }
.hb-look__prix { grid-column: 2; font-size: .88rem; color: var(--hs-muted, #6B6B73); }

/* Pres du bord, la bulle deborderait : on la ramene dans le cadre. */
.hb-look__point[style*="left:9"] .hb-look__bulle,
.hb-look__point[style*="left:8"] .hb-look__bulle { left: auto; right: 0; transform: none; }
.hb-look__point[style*="left:1"] .hb-look__bulle { left: 0; transform: none; }

/* ---- chronologie -------------------------------------------------------- */
.hb-frise {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 0;
  counter-reset: hb-etape;
}
.hb-frise__etape {
  position: relative; padding: 0 0 32px 34px;
  border-left: 2px solid var(--hs-line, rgba(14,14,18,.1));
}
.hb-frise__etape:last-child { border-left-color: transparent; padding-bottom: 0; }
.hb-frise__etape::before {
  content: ""; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--hs-accent, #F59E0B); box-shadow: 0 0 0 4px var(--hs-bg, #F1EFE9);
}
.hb-frise__repere {
  display: block; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--hs-muted, #6B6B73); margin-bottom: 4px;
}
.hb-frise__titre { margin: 0 0 6px; font-size: 1.15rem; }
.hb-frise__texte { margin: 0; color: var(--hs-muted, #6B6B73); max-width: 62ch; }

/* ---- bandeau de logos --------------------------------------------------- */
.hb-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(24px, 5vw, 64px); margin: 0; padding: 0; list-style: none;
}
.hb-logos__item img { max-height: 34px; width: auto; }

/* ---- composeur de lot --------------------------------------------------- */
.hb-lot { display: grid; gap: clamp(24px, 4vw, 44px); }
@media (min-width: 900px) { .hb-lot { grid-template-columns: 1fr 300px; align-items: start; } }

.hb-lot__choix {
  display: grid; gap: 14px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.hb-lot__item { position: relative; }

/* La case est masquee mais PRESENTE : elle garde le focus clavier et l'etat
   coche/decoche que les lecteurs d'ecran annoncent. La cacher avec
   display:none la retirerait de la navigation. */
.hb-lot__case {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.hb-lot__etiquette {
  display: grid; gap: 8px; cursor: pointer; padding: 12px;
  background: var(--hs-surface, #fff);
  border: 2px solid var(--hs-line, rgba(14,14,18,.1));
  border-radius: var(--hs-radius, 22px);
  transition: border-color .15s var(--hs-ease, ease);
}
.hb-lot__case:checked + .hb-lot__etiquette {
  border-color: var(--hs-accent, #F59E0B);
}
.hb-lot__case:focus-visible + .hb-lot__etiquette {
  outline: 3px solid var(--hs-accent, #F59E0B); outline-offset: 2px;
}
/* Une pastille qui dit ce que la bordure seule ne suffit pas a dire : la
   couleur n'est jamais le seul porteur d'information. */
.hb-lot__etiquette::after {
  content: ""; position: absolute; top: 18px; right: 18px;
  width: 20px; height: 20px; border-radius: 999px;
  border: 2px solid var(--hs-line, rgba(14,14,18,.1)); background: #fff;
}
.hb-lot__case:checked + .hb-lot__etiquette::after {
  content: "\2713"; display: grid; place-items: center;
  font-size: 12px; line-height: 1;
  background: var(--hs-accent, #F59E0B); border-color: transparent;
  color: var(--hs-accent-ink, #0E0E12);
}
.hb-lot__media img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--hs-radius-sm, 14px);
}
.hb-lot__nom { font-size: .95rem; font-weight: 500; }
.hb-lot__prix { font-size: .9rem; color: var(--hs-muted, #6B6B73); }

.hb-lot__resume {
  background: var(--hs-bg-soft, #F5F5F6);
  border-radius: var(--hs-radius, 22px); padding: 22px;
  position: sticky; top: 92px;
}
.hb-lot__total { display: grid; gap: 2px; margin: 0 0 14px; }
.hb-lot__total-label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hs-muted, #6B6B73);
}
.hb-lot__total-valeur {
  font-family: var(--hs-font-head, inherit); font-size: 1.9rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hb-lot__note { margin: 0 0 14px; font-size: .88rem; color: var(--hs-muted, #6B6B73); }
.hb-lot__bouton { width: 100%; text-align: center; border: 0; cursor: pointer; font: inherit; }
.hb-lot__bouton[disabled] {
  background: var(--hs-line, rgba(14,14,18,.1)); color: var(--hs-muted, #6B6B73);
  cursor: not-allowed;
}