/* ==========================================================================
   Salon Prestige — Refonte 2026
   Feuille de style de la refonte. Scopée sur body.sp-refonte : tant que la
   classe n'est posée que sur la page de preview, rien d'autre n'est touché.
   Chargée par le mu-plugin sp-refonte-preview.php.
   ========================================================================== */

body.sp-refonte{
  --acc:#D71920;          /* rouge CTA */
  --acc-dk:#7E0D12;       /* bordure basse des boutons */
  --neon:#E89C92;         /* rose accent */
  --bg:#0C0A0E;
  --grey:#26252A;
  --grey2:#34323B;
  --tx:#F5F1F4;
  --mu:#9B9099;
  --line:rgba(232,156,146,.34);
  --concrete:
    repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,0) 2px 9px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.018) 0 2px,rgba(0,0,0,0) 2px 9px),
    repeating-linear-gradient(91deg,rgba(0,0,0,.28) 0 2px,rgba(0,0,0,0) 2px 7px);
  --room:
    radial-gradient(120% 90% at 12% 0%,rgba(232,156,146,.20) 0%,rgba(232,156,146,0) 58%),
    radial-gradient(90% 80% at 92% 88%,rgba(215,25,32,.16) 0%,rgba(215,25,32,0) 62%),
    var(--concrete);
  --tube:0 0 6px rgba(232,156,146,.95),0 0 22px rgba(232,156,146,.6),0 0 60px rgba(232,156,146,.3);
}

/* --------------------------------------------------------------- Fond ---- */
body.sp-refonte{
  background-color:var(--bg);
  background-image:var(--room);
  background-attachment:fixed;
  color:var(--tx);
  font-family:'Barlow Condensed',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Le thème peint #wrapper (et html) en gris opaque : ils masqueraient le fond
   béton, et le gris réapparaît en overscroll. */
html:has(body.sp-refonte){background-color:#0C0A0E!important}
body.sp-refonte #wrapper,
body.sp-refonte #main,
body.sp-refonte #content,
body.sp-refonte .page-wrapper,
body.sp-refonte .sp-refonte-page{background:transparent!important}

/* Filet néon en haut de page */
body.sp-refonte #wrapper::before{
  content:"";position:relative;display:block;height:6px;width:100%;
  background:var(--neon);box-shadow:var(--tube);z-index:41;
}

/* ---------------------------------------------------------- Typographie -- */
body.sp-refonte h1,body.sp-refonte h2,body.sp-refonte h3,
body.sp-refonte h4,body.sp-refonte h5,body.sp-refonte h6,
body.sp-refonte .sp-anton{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  color:var(--tx);
  letter-spacing:.01em;
  text-shadow:none;          /* consigne handoff : pas de halo sur les titres */
}
/* line-height 0.94 (valeur du handoff) convient à un titre d'une ligne, mais
   fait chevaucher les accents dès qu'il passe sur deux lignes — « VOTRE
   FIDÉLITÉ, / RÉCOMPENSÉE » en était illisible. 1.02 reste serré sans coller. */
body.sp-refonte h1{font-size:clamp(2.6rem,7vw,6.25rem);line-height:1.02;margin:0 0 .2em}
body.sp-refonte h2{font-size:clamp(2rem,5vw,4rem);line-height:1.04;margin:0 0 .3em}
body.sp-refonte h3{font-size:clamp(1.4rem,3vw,2rem);line-height:1.05}
body.sp-refonte p,body.sp-refonte li,body.sp-refonte span,body.sp-refonte a{
  font-family:'Barlow Condensed',system-ui,sans-serif;
}
body.sp-refonte p{font-size:1.15rem;line-height:1.55;color:#C6BDC4}
body.sp-refonte a{color:var(--neon);text-decoration:none}
body.sp-refonte .sp-kicker{
  display:block;font-size:.9rem;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:var(--neon);margin-bottom:.6em;
}
body.sp-refonte .sp-accent{color:var(--neon)}

/* -------------------------------------------------------------- Header --- */
body.sp-refonte #header .header-top{
  background:#08070A!important;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
body.sp-refonte #header .header-top a,
body.sp-refonte #header .header-top li>a{color:var(--mu)!important}
body.sp-refonte #header .header-top a:hover{color:var(--neon)!important}

body.sp-refonte #header .header-main,
body.sp-refonte #header .header-bg-color{
  background:rgba(12,10,14,.96)!important;
  backdrop-filter:blur(10px);
}
body.sp-refonte #header .header-wrapper.stuck{
  background:rgba(12,10,14,.98)!important;
}
body.sp-refonte #header .nav>li>a{
  font-family:'Anton',sans-serif;font-size:21px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tx)!important;
}
body.sp-refonte #header .nav>li>a:hover,
body.sp-refonte #header .nav>li.active>a{color:var(--neon)!important}
body.sp-refonte #header .header-button .button,
body.sp-refonte #header .button.is-outline{
  background:var(--acc)!important;color:#fff!important;border:0!important;
  border-bottom:4px solid var(--acc-dk)!important;border-radius:0!important;
  font-family:'Anton',sans-serif;font-size:17px;letter-spacing:.05em;
  text-transform:uppercase;
}
body.sp-refonte #header .header-button .button:hover{
  background:var(--neon)!important;color:#1A0F0E!important;
}
body.sp-refonte #header .logo a,
body.sp-refonte #header .header-title{
  font-family:'Anton',sans-serif;font-size:32px;line-height:.95;
  text-transform:uppercase;color:var(--tx);
}

/* ------------------------------------------------------------- Boutons --- */
body.sp-refonte .button,
body.sp-refonte .sp-btn{
  font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.05em;
  text-transform:uppercase;border-radius:0;box-shadow:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
body.sp-refonte .sp-btn{
  display:inline-block;padding:16px 32px;font-size:20px;line-height:1;
}
body.sp-refonte .sp-btn--primary,
body.sp-refonte .button.primary,
body.sp-refonte .button.alert{
  background:var(--acc)!important;color:#fff!important;
  border:0!important;border-bottom:5px solid var(--acc-dk)!important;
}
body.sp-refonte .sp-btn--primary:hover,
body.sp-refonte .button.primary:hover,
body.sp-refonte .button.alert:hover{
  background:var(--neon)!important;color:#1A0F0E!important;
  border-bottom-color:#B4726A!important;
}
body.sp-refonte .sp-btn--ghost,
body.sp-refonte .button.white.is-outline,
body.sp-refonte .button.is-outline{
  background:transparent!important;border:2px solid var(--neon)!important;
  color:var(--tx)!important;box-shadow:var(--tube);
}
body.sp-refonte .sp-btn--ghost:hover,
body.sp-refonte .button.is-outline:hover{
  background:var(--neon)!important;color:#14091F!important;
}

/* ---------------------------------------------------------------- Hero --- */
body.sp-refonte .sp-hero{
  position:relative;min-height:640px;display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.sp-refonte .sp-hero .ux-shape-divider{display:none}
body.sp-refonte .sp-hero h1{font-size:clamp(2.8rem,7.2vw,6.25rem)}
body.sp-refonte .sp-hero .sp-hero-sub{font-size:1.25rem;max-width:34em}
body.sp-refonte .sp-live{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--grey);border-left:4px solid #3ED06A;padding:9px 16px;
  font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx);
}
body.sp-refonte .sp-live::before{
  content:"";width:9px;height:9px;border-radius:50%;background:#3ED06A;
  box-shadow:0 0 0 0 rgba(62,208,106,.7);animation:sp-pulse 2s infinite;
}
@keyframes sp-pulse{
  70%{box-shadow:0 0 0 12px rgba(62,208,106,0)}
  100%{box-shadow:0 0 0 0 rgba(62,208,106,0)}
}
body.sp-refonte .sp-pricetag{
  display:inline-flex;align-items:baseline;gap:12px;
  background:var(--grey);border-left:4px solid var(--neon);padding:14px 22px;
}
body.sp-refonte .sp-pricetag b{
  font-family:'Anton',sans-serif;font-size:2.4rem;line-height:1;color:var(--neon);
}
body.sp-refonte .sp-pricetag span{
  font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);
}


/* ------------------------------------------------------- Bandeau fidélité */
body.sp-refonte .sp-loyalty{
  display:block;border:1px solid var(--line);box-shadow:var(--tube);
  background:rgba(38,37,42,.55);padding:34px 30px;text-align:center;
  transition:background .15s ease,border-color .15s ease;
}
body.sp-refonte .sp-loyalty:hover{background:rgba(38,37,42,.8);border-color:var(--neon)}
body.sp-refonte .sp-loyalty h2{font-size:clamp(1.8rem,4vw,2.4rem);margin:.15em 0}
body.sp-refonte .sp-loyalty .sp-loyalty-note{font-size:1.05rem;color:#C6BDC4;margin:0}
body.sp-refonte .sp-loyalty .sp-loyalty-cta{
  display:inline-block;margin-top:16px;font-family:'Anton',sans-serif;
  font-size:1.2rem;text-transform:uppercase;color:var(--neon);
}

/* -------------------------------------------------------------- Stories -- */
body.sp-refonte .product-photo-stories,
body.sp-refonte .sp-stories{
  display:flex;gap:18px;overflow-x:auto;padding:6px 2px 14px;
  scrollbar-width:thin;
}
body.sp-refonte .product-photo-stories::-webkit-scrollbar{height:6px}
body.sp-refonte .product-photo-stories::-webkit-scrollbar-thumb{background:var(--grey2)}
body.sp-refonte .product-photo-stories img{
  border-radius:50%;width:88px;height:88px;object-fit:cover;
}

/* ------------------------------------------------------- Section Tarifs -- */
/* Restyle le bloc existant 111631 (classes .spx-*) sur la palette refonte.  */
body.sp-refonte .spx-title,
body.sp-refonte .spx-dur,
body.sp-refonte .spx-price{font-family:'Anton',sans-serif;font-weight:400;text-shadow:none}
body.sp-refonte .spx-title{font-size:clamp(2.2rem,5.5vw,4rem);letter-spacing:0}
body.sp-refonte .spx-kicker{letter-spacing:.34em;color:var(--neon)}
body.sp-refonte .spx-card{
  background:rgba(38,37,42,.7);border:1px solid var(--grey2);border-radius:0;
}
body.sp-refonte .spx-card.spx-hot{
  background:rgba(38,37,42,.9);border:1px solid var(--neon);
}
body.sp-refonte .spx-price{font-size:66px}
body.sp-refonte .spx-badge{background:var(--acc);border-radius:0}
body.sp-refonte .spx-cta{font-family:'Anton',sans-serif;color:var(--neon)}
body.sp-refonte .spx-cta:hover{color:var(--tx)}


/* Cartes hôtesses : le rendu est piloté par le mu-plugin sp-card-look.php
   (pastilles, statut, salon, nationalité). Ne rien redéfinir ici — les
   sélecteurs body.sp-refonte étant plus spécifiques, ils l'emporteraient. */

/* --------------------------------------------------------- 3 piliers ----- */
body.sp-refonte .sp-pillar{
  position:relative;min-height:400px;display:flex;flex-direction:column;
  justify-content:flex-end;border:1px solid rgba(255,255,255,.08);
  background-size:cover;background-position:center;overflow:hidden;
  transition:border-color .15s ease;
}
body.sp-refonte .sp-pillar:hover{border-color:var(--neon)}
body.sp-refonte .sp-pillar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,10,14,0) 18%,rgba(12,10,14,.92) 78%);
}
body.sp-refonte .sp-pillar-body{position:relative;z-index:2;padding:26px 24px}
body.sp-refonte .sp-pillar-body h3{margin:.1em 0 .25em}
body.sp-refonte .sp-pillar-body p{font-size:1.05rem;margin:0 0 .5em}
body.sp-refonte .sp-pillar-price{
  font-family:'Anton',sans-serif;font-size:1.4rem;color:var(--neon);
}

/* --------------------------------------------------------- Blocs duo ----- */
body.sp-refonte .sp-duo{
  border:1px solid var(--grey2);background:rgba(38,37,42,.5);padding:0;overflow:hidden;
}
body.sp-refonte .sp-duo:hover{border-color:var(--neon)}

/* ------------------------------------------------------------ Magazine --- */
body.sp-refonte .post-item .box-text{background:transparent;padding:14px 0}
body.sp-refonte .post-item .post-title{
  font-family:'Anton',sans-serif;font-size:1.35rem;line-height:1.05;
  text-transform:uppercase;color:var(--tx);
}
body.sp-refonte .post-item .post-meta{
  font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);
}

/* --------------------------------------------------------------- CTA ----- */
body.sp-refonte .sp-cta-final{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(38,37,42,.45);text-align:center;
}

/* -------------------------------------------------------------- Footer --- */
body.sp-refonte .footer-wrapper,
body.sp-refonte .footer-1,
body.sp-refonte .footer-2,
body.sp-refonte #footer,
body.sp-refonte .footer,
body.sp-refonte .absolute-footer{
  background:transparent!important;background-image:none!important;
}
body.sp-refonte .footer-wrapper{border-top:1px solid rgba(255,255,255,.07)}
body.sp-refonte .footer-wrapper h3,
body.sp-refonte .footer-wrapper .widget-title{
  font-family:'Anton',sans-serif;font-size:1.15rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx);
}
body.sp-refonte .footer-wrapper a{color:var(--mu)}
body.sp-refonte .footer-wrapper a:hover{color:var(--neon)}

/* -------------------------------------------------------------- Mobile --- */
@media(max-width:849px){
  body.sp-refonte .sp-hero{min-height:520px}
  body.sp-refonte #header .logo a,
  body.sp-refonte #header .header-title{font-size:24px}
}

/* ----------------------------------------------------- Bandeau preview --- */
body.sp-refonte .sp-preview-flag{
  position:fixed;left:0;bottom:0;z-index:9999;
  background:var(--acc);color:#fff;padding:6px 14px;
  font-family:'Anton',sans-serif;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;border-top:2px solid var(--acc-dk);
}

/* Barre de nav (header-bottom) : le thème la peint en rose, on la repasse en
   sombre avec le filet rouge de la refonte. */
body.sp-refonte #header .header-bottom,
body.sp-refonte #header .header-bottom .header-bg-color,
body.sp-refonte #header .header-bottom .header-bg-image{
  background-color:rgba(12,10,14,.96)!important;
}
body.sp-refonte #header .header-bottom{border-bottom:3px solid var(--acc)}
body.sp-refonte #header .header-bottom .nav>li>a{color:var(--tx)!important}
body.sp-refonte #header .header-bottom .nav>li>a:hover,
body.sp-refonte #header .header-bottom .nav>li.active>a{color:var(--neon)!important}

/* Stories — mécanique reprise de xoxo-girls.ch, couleurs de Prestige.
   Deux points font tout le rendu : object-fit:cover sur la vignette (sans lui,
   les captures verticales laissent des bandes noires dans le cercle) et
   l'anneau en conic-gradient masqué au centre plutôt qu'une bordure. */
body.sp-refonte #category-video-banner .video-thumbnail{position:relative;overflow:visible}
body.sp-refonte #category-video-banner .video-thumbnail img{
  width:100px!important;height:100px!important;
  object-fit:cover!important;border-radius:50%!important;display:block;
}
body.sp-refonte #category-video-banner .ring{
  position:absolute;inset:-5px;border-radius:50%;border:0!important;
  background:conic-gradient(from 210deg,#E89C92,#D71920,#B4726A,#E89C92);
  -webkit-mask:radial-gradient(circle,rgba(0,0,0,0) 0,rgba(0,0,0,0) 48px,#000 48px);
          mask:radial-gradient(circle,rgba(0,0,0,0) 0,rgba(0,0,0,0) 48px,#000 48px);
}
/* Story déjà vue : anneau éteint, discret. */
body.sp-refonte #category-video-banner .ring:not(.unwatched){
  background:rgba(255,255,255,.22);
}
body.sp-refonte #category-video-banner .product_name{
  display:block;margin:14px 0 0;
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-size:16px;font-weight:700;text-transform:uppercase;
  color:var(--tx);letter-spacing:.04em;
}


/* Badge « Nouveau » des cartes hôtesses, sur la palette refonte. */
body.sp-refonte .nouveau_badg{
  background:var(--acc)!important;color:#fff!important;border-radius:0!important;
  font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}

/* ------------------------------------------------------ Section Actions -- */
body.sp-refonte .sp-offers{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  list-style:none;margin:0;padding:0;
}
@media(max-width:849px){body.sp-refonte .sp-offers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:549px){body.sp-refonte .sp-offers{grid-template-columns:1fr}}
body.sp-refonte .sp-offer{
  display:flex;flex-direction:column;
  background:rgba(38,37,42,.7);border:1px solid var(--grey2);padding:24px 22px;
  transition:border-color .15s ease,background .15s ease;
}
body.sp-refonte .sp-offer:hover{border-color:var(--neon);background:rgba(38,37,42,.9)}
body.sp-refonte .sp-offer .sp-offer-tag{
  align-self:flex-start;background:var(--acc);color:#fff;
  padding:4px 10px;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:14px;
}
body.sp-refonte .sp-offer h3{font-size:1.6rem;line-height:1;margin:0 0 14px}
body.sp-refonte .sp-offer dl{margin:0 0 14px;padding:0}
body.sp-refonte .sp-offer .sp-offer-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid rgba(255,255,255,.08);padding:8px 0;
}
body.sp-refonte .sp-offer .sp-offer-k{
  font-size:.98rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);
}
body.sp-refonte .sp-offer .sp-offer-v{
  font-family:'Anton',sans-serif;font-size:1.5rem;color:var(--neon);line-height:1;
}
body.sp-refonte .sp-offer .sp-offer-note{
  font-size:1rem;color:#C6BDC4;margin:auto 0 0;padding-top:6px;
}

/* Grille hôtesses : 2 colonnes sur mobile (le thème retombe à 1). */
@media(max-width:549px){
  body.sp-refonte .row .product-small.col{
    flex-basis:50%!important;max-width:50%!important;width:50%!important;
  }
}

/* ------------------------------------------------- Sous-menus déroulants -
   Le thème les peint en rose clair avec du texte blanc : illisible. On repasse
   sur le fond sombre de la refonte, texte clair, survol néon. */
body.sp-refonte .nav-dropdown{
  background-color:rgba(12,10,14,.985)!important;
  border:1px solid var(--line)!important;
  border-radius:0!important;
  box-shadow:0 18px 44px rgba(0,0,0,.55)!important;
  padding:6px 0!important;
}
body.sp-refonte .nav-dropdown li a,
body.sp-refonte .nav-dropdown>li>a,
body.sp-refonte .nav-dropdown .nav-dropdown-default>li>a{
  color:var(--tx)!important;
  font-family:'Barlow Condensed',system-ui,sans-serif!important;
  font-size:18px!important;font-weight:600!important;
  letter-spacing:.09em!important;text-transform:uppercase!important;
  padding:11px 20px!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  border-radius:0!important;
}
body.sp-refonte .nav-dropdown li:last-child a{border-bottom:0!important}
body.sp-refonte .nav-dropdown li a:hover,
body.sp-refonte .nav-dropdown li.current-menu-item>a{
  color:var(--neon)!important;background:rgba(232,156,146,.10)!important;
}
/* La flèche du dropdown doit suivre le nouveau fond, sinon elle reste rose. */
body.sp-refonte .nav-dropdown-has-arrow li.has-dropdown:after{
  border-bottom-color:rgba(12,10,14,.985)!important;
}
body.sp-refonte .nav-dropdown-has-arrow li.has-dropdown:before{
  border-bottom-color:var(--line)!important;
}

/* Menu mobile (off-canvas) : même traitement. */
body.sp-refonte .off-canvas .mobile-sidebar,
body.sp-refonte .mfp-content .off-canvas-center{
  background-color:rgba(12,10,14,.985)!important;
}
body.sp-refonte .off-canvas .nav-sidebar>li>a{
  font-family:'Anton',sans-serif!important;font-size:20px!important;
  text-transform:uppercase!important;color:var(--tx)!important;
}
body.sp-refonte .off-canvas .nav-sidebar li a:hover{color:var(--neon)!important}

/* --------------------------------------------- Boutons du header : à plat -
   Le thème leur colle un halo clair (box-shadow) et un relief biseauté. La
   refonte veut du rouge plat : on neutralise ombre, halo et bordure basse sur
   la barre du haut uniquement — les CTA de la page gardent leur bordure. */
body.sp-refonte #header .button,
body.sp-refonte #header .header-button .button,
body.sp-refonte #header .account-item,
body.sp-refonte #header .account-item a,
body.sp-refonte #header .cart-item,
body.sp-refonte #header .cart-item a,
body.sp-refonte #header .header-cart-link,
body.sp-refonte #header .wg-drop,
body.sp-refonte #header .wg-drop a,
body.sp-refonte #header .weglot-container a{
  box-shadow:none!important;
  text-shadow:none!important;
  filter:none!important;
  border-radius:0!important;
}
body.sp-refonte #header .button.is-bevel,
body.sp-refonte #header .header-button .button{
  border:0!important;
  background-image:none!important;
}
body.sp-refonte #header .account-item a,
body.sp-refonte #header .header-cart-link{
  background-color:var(--acc)!important;
  color:#fff!important;
}
body.sp-refonte #header .account-item a:hover,
body.sp-refonte #header .header-cart-link:hover,
body.sp-refonte #header .header-button .button:hover{
  background-color:var(--neon)!important;color:#1A0F0E!important;
}
/* Pastille du panier : plate elle aussi. */
body.sp-refonte #header .cart-item .cart-icon strong,
body.sp-refonte #header .header-cart-link .cart-icon strong{
  box-shadow:none!important;border-radius:0!important;
  background:#1A0F0E!important;color:var(--neon)!important;border:0!important;
}

/* ---------------------------------------------- Titres dans les bannières -
   Les tailles de titres de la refonte sont calées sur la largeur de l'écran
   (clamp en vw). Dans une bannière qui n'occupe qu'un tiers de la page, le
   texte déborde de son cadre. On redescend d'un cran dans tout bloc de
   bannière — sauf le hero de la home, qui doit rester monumental. */
body.sp-refonte .banner:not(.sp-hero) .text-box h1,
body.sp-refonte .banner:not(.sp-hero) .text-box h2,
body.sp-refonte .banner:not(.sp-hero) .banner-layers h1,
body.sp-refonte .banner:not(.sp-hero) .banner-layers h2{
  font-size:clamp(1.5rem,2.9vw,2.6rem)!important;
  line-height:1.02;
  margin-bottom:.25em;
}
body.sp-refonte .banner:not(.sp-hero) .text-box h3,
body.sp-refonte .banner:not(.sp-hero) .text-box h4,
body.sp-refonte .banner:not(.sp-hero) .banner-layers h3{
  font-size:clamp(1.05rem,1.7vw,1.45rem)!important;
  line-height:1.1;
}
body.sp-refonte .banner:not(.sp-hero) .text-box p,
body.sp-refonte .banner:not(.sp-hero) .banner-layers p{
  font-size:clamp(.95rem,1.3vw,1.1rem);
}
/* Le bouton suit : il paraissait minuscule sous des titres démesurés. */
body.sp-refonte .banner:not(.sp-hero) .text-box .button{
  font-size:1rem;padding:11px 22px;
}

/* Colonnes étroites : même principe, un titre de section ne doit pas déborder
   d'une colonne de un tiers. */
body.sp-refonte .col.large-4 h2,
body.sp-refonte .col.large-3 h2{
  font-size:clamp(1.5rem,2.6vw,2.2rem);
}

/* ------------------------------------------------- Titres du pied de page -
   « A propos » / « Newsletter » sont des h2 : ils héritaient de l'échelle des
   titres de section (64px) alors qu'ils annoncent un widget. */
body.sp-refonte .footer-wrapper h1,
body.sp-refonte .footer-wrapper h2,
body.sp-refonte .footer-wrapper h3,
body.sp-refonte .footer-wrapper h4,
body.sp-refonte .footer-wrapper .widget-title,
body.sp-refonte #footer h1,
body.sp-refonte #footer h2,
body.sp-refonte #footer h3,
body.sp-refonte #footer h4{
  font-size:1.3rem!important;line-height:1.15;letter-spacing:.06em;margin-bottom:.5em;
}
body.sp-refonte .footer-wrapper h2 span,
body.sp-refonte #footer h2 span,
body.sp-refonte .footer-wrapper h3 span,
body.sp-refonte #footer h3 span{font-size:inherit!important}

/* Titres de widgets en barre latérale : même logique. */
body.sp-refonte .sidebar-inner h1,
body.sp-refonte .sidebar-inner h2,
body.sp-refonte .sidebar-inner h3,
body.sp-refonte .widget h2,
body.sp-refonte .widget h3{font-size:1.25rem!important;line-height:1.15}

/* ------------------------------------------- Respect des tailles UX Builder
   [ux_text font_size="3.2"] pose la taille sur le conteneur .ux-text et laisse
   le <p> hériter. Notre règle body.sp-refonte p{font-size:1.15rem} l'écrasait :
   les titres réglés dans UX Builder retombaient tous à 18px (cas vu sur
   /donjon-a-geneve-2/, dont le titre principal était illisible).
   La taille choisie dans l'éditeur doit primer — c'est elle qui reste
   modifiable par Nicolas et le client. */
body.sp-refonte .ux-text p,
body.sp-refonte .ux-text span,
body.sp-refonte .ux-text li,
body.sp-refonte .ux-text a{font-size:inherit}

/* --------------------------------------------- Bandeau du fil d'Ariane ----
   Flatsome lui donne un fond gris plein qui coupe le fond béton en deux.
   On le rend transparent : le fil d'Ariane se pose sur la texture. */
body.sp-refonte .shop-page-title,
body.sp-refonte .page-title,
body.sp-refonte .shop-page-title .page-title-inner,
body.sp-refonte .page-title .page-title-inner,
body.sp-refonte .page-title-bg,
body.sp-refonte .archive-page-header{
  background:transparent!important;background-image:none!important;
  border-bottom:1px solid rgba(255,255,255,.07);
}
body.sp-refonte .shop-page-title .breadcrumbs,
body.sp-refonte .page-title .breadcrumbs{
  font-family:'Barlow Condensed',system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mu);
}
body.sp-refonte .breadcrumbs a{color:var(--mu)}
body.sp-refonte .breadcrumbs a:hover{color:var(--neon)}

/* -------------------------------------------------- Player de stories -----
   Le bouton « Voir le profil de … » était resté violet #963BAE (couleur XoXo)
   avec un texte rosé peu lisible dessus. */
body.sp-refonte .btn_voir_produti{
  background:var(--acc)!important;color:#fff!important;
  border:0!important;border-bottom:4px solid var(--acc-dk)!important;
  border-radius:0!important;
  font-family:'Anton',sans-serif;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:none!important;
}
body.sp-refonte .btn_voir_produti:hover{
  background:var(--neon)!important;color:#1A0F0E!important;
}
body.sp-refonte .btn_voir_produti .btn_produit_name{color:inherit!important}
/* Bouton de fermeture : blanc franc sur le fond noir du player. */
body.sp-refonte .modal .close-modal{color:#fff!important;opacity:.9}
body.sp-refonte .modal .close-modal:hover{color:var(--neon)!important;opacity:1}

/* ------------------------------------------- Lightbox galerie (PhotoSwipe)
   Le code de la lightbox est identique à celui de xoxo (même PhotoSwipe, même
   enqueue) : il n'y avait rien à porter. On l'habille en revanche aux couleurs
   de la refonte, là où il gardait le squelette gris par défaut. */
.pswp__bg{background:#0C0A0E!important}
.pswp__scroll-wrap .pswp__caption,
.pswp__top-bar{background:rgba(12,10,14,.86)!important}
.pswp__caption__center{
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-size:1rem;letter-spacing:.06em;color:#C6BDC4;text-align:center;
}
.pswp__counter{
  font-family:'Anton',sans-serif;font-size:1rem;letter-spacing:.08em;
  color:#E89C92;opacity:1;
}
.pswp__button{opacity:.85;transition:opacity .15s,background-color .15s}
.pswp__button:hover{opacity:1;background-color:rgba(232,156,146,.16)!important}
.pswp__button--close:hover{background-color:rgba(215,25,32,.35)!important}
/* Flèches : plus lisibles sur des photos claires. */
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before{
  background-color:rgba(12,10,14,.55)!important;border-radius:0;
}
.pswp__button--arrow--left:hover:before,
.pswp__button--arrow--right:hover:before{background-color:rgba(215,25,32,.7)!important}
.pswp__preloader__cut{background:#E89C92}

/* ------------------------------------------- Tunnel de réservation Bookly -
   Le formulaire est déjà habillé en sombre (champs #1D191B, bordures néon,
   boutons rose) et il est CRITIQUE : un champ illisible ou un bouton qui
   change de sens coûte des rendez-vous. On habille donc la page autour, mais
   on tient nos règles globales à distance de l'intérieur du formulaire. */
body.sp-refonte .bookly-css-root h1,
body.sp-refonte .bookly-css-root h2,
body.sp-refonte .bookly-css-root h3,
body.sp-refonte .bookly-css-root h4,
body.sp-refonte .bookly-css-root h5,
body.sp-refonte .bookly-css-root h6{
  font-family:'Barlow Condensed',system-ui,sans-serif;
  text-transform:none;letter-spacing:normal;font-size:1.25rem;line-height:1.25;
}
body.sp-refonte .bookly-css-root p,
body.sp-refonte .bookly-css-root li,
body.sp-refonte .bookly-css-root span,
body.sp-refonte .bookly-css-root label,
body.sp-refonte .bookly-css-root td,
body.sp-refonte .bookly-css-root th{
  font-size:inherit;color:inherit;line-height:normal;
}
/* Les boutons du tunnel gardent le style Bookly : ni Anton, ni rouge, ni
   bordure basse — la refonte ne doit pas déguiser « Suivant » en CTA. */
body.sp-refonte .bookly-css-root .button,
body.sp-refonte .bookly-css-root button,
body.sp-refonte .bookly-css-root .bookly-btn{
  font-family:inherit!important;letter-spacing:normal!important;
  text-transform:none!important;border-bottom:0!important;
  background-image:none!important;
}
body.sp-refonte .bookly-css-root a{color:inherit}

/* ---------------------------------------------------- Page Fidélité (spf-)
   La page a déjà son design complet ; on aligne seulement ce qui jure avec la
   DA : le CTA, les angles arrondis et les chiffres d'étape. */
body.sp-refonte .spf-title{line-height:1.02}

/* CTA : c'est l'action principale de la page, elle doit ressembler aux autres
   CTA du site (rouge, Anton, bordure basse) et non à un bouton secondaire. */
body.sp-refonte .spf-btn{
  background:var(--acc)!important;color:#fff!important;
  font-family:'Anton',sans-serif!important;font-size:1.25rem!important;
  letter-spacing:.05em;text-transform:uppercase;
  padding:15px 34px!important;border-radius:0!important;
  border:0!important;border-bottom:5px solid var(--acc-dk)!important;
}
body.sp-refonte .spf-btn:hover{background:var(--neon)!important;color:#1A0F0E!important}

/* Angles droits : la refonte n'a pas de coins arrondis hors cartes hôtesses. */
body.sp-refonte .spf-account,
body.sp-refonte .spf-card,
body.sp-refonte .spf-way,
body.sp-refonte .spf-t1,
body.sp-refonte .spf-t2,
body.sp-refonte .spf-t3,
body.sp-refonte .spf-referral,
body.sp-refonte .spf-final{border-radius:0!important}

/* Chiffres d'étape : en Anton, comme les autres chiffres de la refonte. */
body.sp-refonte .spf-num{
  font-family:'Anton',sans-serif!important;font-size:1.4rem!important;
  background:var(--acc)!important;color:#fff!important;
}
body.sp-refonte .spf-kicker{letter-spacing:.34em;color:var(--neon)}

/* -------------------------------------------------------- Listes à puces --
   Les pages internes utilisaient des <li> à bordure #eee : des traits blancs
   sur fond sombre. */
body.sp-refonte .sp-list{list-style:none;margin:0 0 1.2em;padding:0}
body.sp-refonte .sp-list li{
  position:relative;padding:9px 0 9px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:1.08rem;color:#C6BDC4;
}
body.sp-refonte .sp-list li:last-child{border-bottom:0}
body.sp-refonte .sp-list li::before{
  content:"▸";position:absolute;left:0;top:9px;color:var(--neon);
}
body.sp-refonte .sp-legal{
  font-size:.95rem;color:var(--mu);max-width:60em;margin:1.4em auto 0;font-style:italic;
}
/* Colonnes « duo » : le bloc doit se lire comme une carte, pas comme du vide. */
body.sp-refonte .sp-duo .col-inner{height:100%}
body.sp-refonte .sp-duo h3{margin:.15em 0 .5em}

/* ------------------------------------------------------ Numéros d'étape --- */
body.sp-refonte .sp-step{
  display:inline-block;margin-bottom:.35em;
  font-family:'Anton',sans-serif;font-size:3rem;line-height:1;color:var(--neon);
}

/* Accordéon FAQ : le thème le rend en clair sur clair. */
body.sp-refonte #content .accordion-title{
  font-family:'Anton',sans-serif;font-size:1.15rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--tx)!important;
  background:rgba(38,37,42,.55)!important;
  border:1px solid var(--grey2)!important;border-bottom:0!important;
  padding:14px 18px!important;
}
body.sp-refonte #content .accordion-item:last-child .accordion-title{border-bottom:1px solid var(--grey2)!important}
body.sp-refonte #content .accordion-title.active,
body.sp-refonte #content .accordion-title:hover{color:var(--neon)!important;background:rgba(38,37,42,.85)!important}
body.sp-refonte #content .accordion-inner{
  background:rgba(20,18,22,.6);border:1px solid var(--grey2);border-top:0;
  padding:16px 18px!important;
}

/* Formulaire Forminator : champs lisibles sur fond sombre. */
body.sp-refonte .forminator-input,
body.sp-refonte .forminator-textarea,
body.sp-refonte .forminator-select,
body.sp-refonte .forminator-ui input[type="text"],
body.sp-refonte .forminator-ui input[type="email"],
body.sp-refonte .forminator-ui input[type="tel"],
body.sp-refonte .forminator-ui textarea{
  background:#1D191B!important;color:var(--tx)!important;
  border:1px solid var(--grey2)!important;border-radius:0!important;
}
body.sp-refonte .forminator-label,
body.sp-refonte .forminator-ui label{color:#C6BDC4!important}
body.sp-refonte .forminator-button-submit{
  background:var(--acc)!important;color:#fff!important;
  font-family:'Anton',sans-serif!important;letter-spacing:.05em;text-transform:uppercase;
  border:0!important;border-bottom:4px solid var(--acc-dk)!important;border-radius:0!important;
}
body.sp-refonte .forminator-button-submit:hover{background:var(--neon)!important;color:#1A0F0E!important}

/* Bandeau de titre / fil d'Ariane : aucune couche opaque, à aucun niveau. */
body.sp-refonte .shop-page-title .section-bg,
body.sp-refonte .page-title .section-bg,
body.sp-refonte .shop-page-title .page-title-bg,
body.sp-refonte .category-page-title,
body.sp-refonte .category-page-title .page-title-inner{
  background:transparent!important;background-image:none!important;
}

/* Menu accordéon du footer mobile : lignes discrètes, chevron à sa place. */
body.sp-refonte .footer-wrapper .accordion-title,
body.sp-refonte #footer .accordion-title{
  background:transparent!important;border:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  font-family:'Anton',sans-serif;font-size:1.05rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx)!important;
  padding:14px 30px 14px 0!important;position:relative;
}
body.sp-refonte .footer-wrapper .accordion-title .toggle,
body.sp-refonte #footer .accordion-title .toggle{
  left:auto!important;right:0!important;top:50%!important;
  transform:translateY(-50%)!important;margin:0!important;color:var(--neon)!important;
}
body.sp-refonte .footer-wrapper .accordion-inner,
body.sp-refonte #footer .accordion-inner{background:transparent!important;border:0!important}

/* ------------------------------------------------------- Fond sur mobile --
   `background-attachment:fixed` fige le fond sur le viewport : le halo rosé du
   coin haut-gauche reste collé en haut de l'écran et se lit comme un bandeau
   gris clair sous le header, avec une coupure franche là où le dégradé s'arrête.
   Sur mobile on fait défiler le fond avec la page et on atténue le halo.
   (Bonus : `fixed` est coûteux au scroll sur mobile.) */
@media(max-width:849px){
  body.sp-refonte{
    background-attachment:scroll!important;
    background-image:
      radial-gradient(140% 60% at 12% 0%,rgba(232,156,146,.10) 0%,rgba(232,156,146,0) 62%),
      radial-gradient(90% 50% at 92% 92%,rgba(215,25,32,.10) 0%,rgba(215,25,32,0) 64%),
      var(--concrete)!important;
  }
}

/* Flatsome pose un voile gris (.title-overlay, rgba(122,122,122,.3)) sur le
   bandeau de titre des archives : c'est lui qui donnait cette bande claire
   sous le header, avec une coupure franche. Il n'a plus lieu d'être puisque
   le bandeau n'a plus d'image de fond. */
body.sp-refonte .title-overlay{background:transparent!important}

/* Sections du pied de page (« Partenaires » et consorts) : elles portent un
   fond gris posé dans le contenu ; on les laisse voir le fond du site. */
body.sp-refonte .footer-wrapper .section,
body.sp-refonte #footer .section,
body.sp-refonte .footer-wrapper .section .section-bg,
body.sp-refonte #footer .section .section-bg{
  background-color:transparent!important;background-image:none!important;
}

/* ============================================================================
   Player de stories — vidéo native + bouton son
   Le JS porté de xoxo remplace l'iframe embed Infomaniak par une <video>
   pointant sur le MP4 direct : c'est ce qui rend le son pilotable (video.muted),
   l'iframe ne le permettait pas. Mais front_video.css de Prestige ne contient
   AUCUNE règle pour .storie-native-video — sans elles la vidéo tombe à sa
   taille intrinsèque (293×480 observés). On ajoute donc ici le dimensionnement,
   repris de xoxo, et on annule le `display:none` posé sur le bouton son le
   04.07 ("pas de son en haut").
   ========================================================================== */
body.sp-refonte .video-container:has(video.storie-native-video){
  height:85dvh;width:82vw;background:#000;
}
body.sp-refonte .video-container video.storie-native-video{
  display:block;width:100%;height:100%;object-fit:contain;background:#000;
}

/* Bouton son : rond, centré sur la vidéo, verre dépoli — repris à l'identique
   du player xoxo (dernier bloc de son front_video.css, qui écrase la version
   carrée en haut à droite). Volontairement neutre (blanc translucide) et non
   aux couleurs de la marque : il se pose sur des vidéos de toutes teintes. */
body.sp-refonte #modal-storie .storie-sound,
body.sp-refonte #video-modal .storie-sound{
  display:flex!important;align-items:center!important;justify-content:center!important;
  position:fixed!important;
  top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%);
  width:64px!important;height:64px!important;max-height:64px!important;
  min-width:0!important;min-height:0!important;
  padding:0!important;margin:0!important;line-height:1!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.22)!important;color:#fff!important;
  border:1.5px solid rgba(255,255,255,.55)!important;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s,transform .15s,opacity .3s;
  z-index:1006;cursor:pointer;box-sizing:border-box!important;
}
body.sp-refonte #modal-storie .storie-sound svg,
body.sp-refonte #video-modal .storie-sound svg{display:block;width:28px;height:28px}
body.sp-refonte #modal-storie .storie-sound:hover,
body.sp-refonte #video-modal .storie-sound:hover{background:rgba(255,255,255,.38)!important}
body.sp-refonte #modal-storie .storie-sound:active,
body.sp-refonte #video-modal .storie-sound:active{transform:translate(-50%,-50%) scale(.92)}
/* Son activé : le bouton s'efface pour ne plus masquer la vidéo. */
body.sp-refonte #modal-storie .storie-sound.is-on,
body.sp-refonte #video-modal .storie-sound.is-on{
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.35)!important;opacity:.75;
}
body.sp-refonte #modal-storie .storie-sound.is-on:hover,
body.sp-refonte #video-modal .storie-sound.is-on:hover{opacity:1}
/* La barre de progression n'a plus le bouton à éviter à droite. */
body.sp-refonte #modal-storie .storie-progress,
body.sp-refonte #video-modal .storie-progress{right:56px!important}

@media (max-width:700px){
  body.sp-refonte #modal-storie .video-container:has(video.storie-native-video),
  body.sp-refonte #video-modal .video-container:has(video.storie-native-video){
    width:100vw!important;max-width:100vw!important;height:100dvh!important;
  }
  body.sp-refonte #modal-storie video.storie-native-video,
  body.sp-refonte #video-modal video.storie-native-video{
    width:100vw!important;height:100dvh!important;object-fit:cover!important;
  }
}

/* Accordéons du contenu : Flatsome place le chevron en absolu à gauche, il
   passait donc par-dessus la première lettre du titre. On le renvoie à droite
   et on réserve la place correspondante. */
body.sp-refonte #content .accordion-title{
  position:relative;
  padding:14px 46px 14px 18px!important;
}
body.sp-refonte #content .accordion-title .toggle{
  left:auto!important;right:14px!important;top:50%!important;
  transform:translateY(-50%)!important;margin:0!important;
  color:var(--neon)!important;opacity:1!important;
}
body.sp-refonte #content .accordion-title.active .toggle{transform:translateY(-50%) rotate(180deg)!important}

/* Bandeau fidélité : le titre est un <span> et non un <h2>, parce que wpautop
   referme le <a> dès qu'il rencontre un bloc — le bandeau se scindait alors en
   trois cartes. Il faut donc lui rendre à la main l'allure d'un titre. */
body.sp-refonte .sp-loyalty{
  display:block;text-align:center;padding:34px 30px!important;
}
body.sp-refonte .sp-loyalty .sp-kicker{display:block;margin-bottom:.5em}
body.sp-refonte .sp-loyalty-title{
  display:block;font-family:'Anton',sans-serif;
  font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1.05;
  text-transform:uppercase;color:var(--tx);margin:0 0 .3em;
}
body.sp-refonte .sp-loyalty-note{display:block;margin:0 0 1em}
body.sp-refonte .sp-loyalty:hover .sp-loyalty-title{color:var(--neon)}

/* Le thème impose une hauteur calculée aux <span> du bandeau (mesuré : 296px
   pour une ligne de 27px) ; on la laisse suivre le contenu. */
body.sp-refonte .sp-loyalty > span{height:auto!important;min-height:0!important}

/* ------------------------------------------------- Boutons secondaires ----
   Le bouton « outline » était joli mais trop discret à côté du CTA plein :
   filet fin, fond translucide, halo qui bave sur les bords. On lui donne un
   fond opaque, une bordure franche de 2px et le même gabarit que le bouton
   primaire — un secondaire doit rester lisible, pas s'effacer. */
body.sp-refonte .button.is-outline,
body.sp-refonte .button.is-link.is-outline,
body.sp-refonte a.button.is-outline,
body.sp-refonte .ux-menu-link .button.is-outline{
  background-color:rgba(12,10,14,.9)!important;
  border:2px solid var(--neon)!important;
  color:var(--tx)!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-family:'Anton',sans-serif;letter-spacing:.05em;text-transform:uppercase;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
body.sp-refonte .button.is-outline:hover,
body.sp-refonte a.button.is-outline:hover{
  background-color:var(--neon)!important;
  border-color:var(--neon)!important;
  color:#1A0F0E!important;
}
/* Sur fond clair (rare mais existe), on inverse pour garder le contraste. */
body.sp-refonte .light .button.is-outline,
body.sp-refonte .bg-white .button.is-outline{
  background-color:rgba(255,255,255,.92)!important;color:#1A0F0E!important;
}

/* Le thème sort ces boutons en `button white is-outline` : il faut viser cette
   combinaison, sinon son fond transparent l'emporte. On leur donne aussi le
   même pied épais que le bouton plein, pour que les deux aient la même hauteur
   et se lisent comme une paire. */
body.sp-refonte .button.white.is-outline,
body.sp-refonte a.button.white.is-outline,
body.sp-refonte .button.is-outline,
body.sp-refonte a.button.is-outline{
  background-color:rgba(12,10,14,.9)!important;
  border:2px solid var(--neon)!important;
  border-bottom-width:5px!important;
  color:var(--tx)!important;
}
body.sp-refonte .button.white.is-outline:hover,
body.sp-refonte a.button.white.is-outline:hover,
body.sp-refonte .button.is-outline:hover,
body.sp-refonte a.button.is-outline:hover{
  background-color:var(--neon)!important;
  border-color:var(--neon)!important;
  color:#1A0F0E!important;
}