/* SCS Prestige — surcouche CSS (chargée sur toutes les pages via <link> dans le <head>).
   Modifications demandées hors build Next.js. */

/* ---------- 1. Home : bloc « Notre Innovation » centré (mobile, tablette, desktop) ---------- */
.home-rhythm > section > .container-x > .max-w-4xl.text-start {
  margin-inline: auto;
  text-align: center;
}
.home-rhythm > section > .container-x > .max-w-4xl.text-start .max-w-2xl {
  margin-inline: auto;
}
.home-rhythm > section > .container-x > .max-w-4xl.text-start .flex.flex-wrap {
  justify-content: center;
}

/* ---------- 2. Un seul champ newsletter : on masque le bloc « Entrez dans le monde de SCS Prestige »
   placé juste au-dessus du footer (le footer garde son formulaire). ---------- */
section.section-lg.relative.overflow-hidden:has(> .container-x.z-10 > .mx-auto.max-w-2xl > form.mx-auto.mt-10) {
  display: none;
}

/* ---------- 3. Footer : bloc newsletter dans un rectangle noir, texte blanc ---------- */
footer.relative > .container-x > .grid > div:first-child {
  background: rgb(13 13 13);
  color: #fff;
  padding: 2.25rem 1.5rem 2rem;
}
@media (min-width: 768px) {
  footer.relative > .container-x > .grid > div:first-child { padding: 3rem 2.5rem 2.75rem; }
}
footer.relative > .container-x > .grid > div:first-child h2 { color: #fff; }
footer.relative > .container-x > .grid > div:first-child .text-muted,
footer.relative > .container-x > .grid > div:first-child .eyebrow {
  color: rgb(255 255 255 / 0.72);
}
footer.relative > .container-x > .grid > div:first-child .hover\:text-foreground:hover { color: #fff; }
footer.relative > .container-x > .grid > div:first-child .border-foreground { border-color: #fff; }
footer.relative > .container-x > .grid > div:first-child .border-border { border-color: rgb(255 255 255 / 0.55); }
footer.relative > .container-x > .grid > div:first-child input {
  color: #fff;
  caret-color: #fff;
}
footer.relative > .container-x > .grid > div:first-child input::placeholder { color: rgb(255 255 255 / 0.6); }
footer.relative > .container-x > .grid > div:first-child [role="checkbox"][aria-checked="true"] {
  background: #fff;
  border-color: #fff;
  color: rgb(13 13 13);
}
footer.relative > .container-x > .grid > div:first-child a { color: inherit; }

/* ---------- 4. Home : animations au scroll (même esprit que la page Rituels :
   montée de 120px, 0.5s ease-in-out, décalées) — classes posées par custom.js ---------- */
.scs-rv {
  opacity: 0;
  transform: translateY(120px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  will-change: opacity, transform;
}
.scs-rv.scs-rv-soft { transform: translateY(48px); }
.scs-rv.scs-rv-media { transform: translateX(110px); transition-duration: 0.9s; }
[dir="rtl"] .scs-rv.scs-rv-media { transform: translateX(-110px); }
.scs-rv.scs-rv-left { transform: translateX(-70px); transition-duration: 0.8s; }
[dir="rtl"] .scs-rv.scs-rv-left { transform: translateX(70px); }
.home-rhythm > section { overflow-x: clip; }
.scs-rv.scs-in { opacity: 1; transform: none; }
/* Arabe : les règles de départ [dir="rtl"] ci-dessus sont plus précises ; sans cette ligne les images restaient décalées de 110 px. */
[dir="rtl"] .scs-rv.scs-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .scs-rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- 5. Bannière d'accueil : diaporama (images ajoutées par custom.js) ---------- */
.home-rhythm > section:first-child .absolute.inset-0.overflow-hidden { position: absolute; }
.home-rhythm > section:first-child .absolute.inset-0.overflow-hidden .scs-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s ease-in-out; pointer-events: none;
}
.home-rhythm > section:first-child .absolute.inset-0.overflow-hidden .scs-slide.scs-slide-on { opacity: 1; }

/* ---------- 6. En-tête transparent sur la bannière (mobile / tablette) : logo en blanc ---------- */
/* Logo : toujours doré (couleur de la marque), plus de version blanche ; légère ombre pour rester lisible sur les photos. */
#site-header .bg-transparent.text-background a[href="/"] img { filter: drop-shadow(0 1px 8px rgba(0,0,0,.35)); }

/* ---------- 7. Tablette : bannière plus haute pour que le titre ne passe pas sous le logo ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-rhythm > section:first-child .md\:aspect-\[2\.13\/1\] { aspect-ratio: 4 / 3 !important; }
}

/* ---------- 8. Offre de lancement & code promo (panier / checkout) ---------- */
.scs-offer{display:flex;gap:14px;align-items:flex-start;border:1px solid #dcc99a;background:#f4ecd9;padding:14px 18px;margin:0 0 22px;font-size:14px;line-height:1.5}
.scs-offer-ico{font-size:22px;line-height:1}.scs-offer-sub{display:block;color:#6b6560;font-size:13px}
.scs-promo{margin-top:18px;border-top:1px solid rgb(var(--border));padding-top:14px}
.scs-promo label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--muted));margin-bottom:8px}
.scs-promo-row{display:flex;gap:8px}.scs-promo-row input{flex:1;min-width:0;border:1px solid rgb(var(--border));background:transparent;padding:10px 12px;font:inherit;font-size:14px;text-transform:uppercase}
.scs-promo-row button{border:1px solid rgb(var(--foreground));background:rgb(var(--foreground));color:rgb(var(--background));padding:10px 16px;font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.scs-promo-msg{margin:8px 0 0;font-size:13px;min-height:1em}.scs-promo-msg.ok{color:#2f6b3a}.scs-promo-msg.err{color:#8a2b2b}
.scs-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:rgb(13 13 13);color:#fff;padding:14px 22px;font-size:14px;max-width:min(92vw,560px);z-index:9999;transition:opacity .5s,transform .5s;border:1px solid #a88a4b}
.scs-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 9. Écran de chargement : fond ivoire + logo centré qui respire en opacité (sans zoom) ---------- */
html.scs-splash::before{content:"";position:fixed;inset:0;z-index:99999;background:#f7f3ec;opacity:1;transition:opacity .7s ease}
html.scs-splash::after{content:"";position:fixed;inset:0;z-index:100000;background:url("/asset/image/Web%20Images/logo-or.webp") center/210px auto no-repeat;opacity:1;animation:scs-splash-fade 1.8s ease-in-out infinite;transition:opacity .7s ease}
html.scs-splash.scs-splash-out::before,html.scs-splash.scs-splash-out::after{opacity:0;pointer-events:none;animation:none}
@keyframes scs-splash-fade{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){html.scs-splash::after{animation:none}}

/* ---------- 10. Vidéos de la home en lecture automatique : bouton play masqué ---------- */
main .home-rhythm button[aria-label="Play video"]{display:none !important}

/* ---------- 11. Pop-up newsletter : croix de fermeture toujours dans le coin du cadre ---------- */
.fixed.z-\[95\] .animate-menu-in > div.relative.w-full{position:static}
.fixed.z-\[95\] .animate-menu-in button[aria-label="Close"]{position:absolute;top:12px;right:12px;left:auto;z-index:30;width:36px;height:36px;display:grid;place-items:center;border-radius:999px;background:rgba(247,243,236,.94);box-shadow:0 1px 6px rgba(0,0,0,.18)}
[dir="rtl"] .fixed.z-\[95\] .animate-menu-in button[aria-label="Close"]{right:auto;left:12px}

/* ---------- 12. Footer : logo or centré au-dessus de la ligne légale ---------- */
footer.relative div.container-x.flex.flex-col.py-6.text-xs{flex-wrap:wrap;border-top:1px solid rgb(var(--border));padding-top:26px}
footer.relative div.container-x.flex.flex-col.py-6.text-xs::before{content:"";flex:0 0 100%;order:0;height:88px;background:url("/brand/logo.webp") left center/auto 88px no-repeat;margin-bottom:16px;filter:brightness(.8) saturate(1.25)}
[dir="rtl"] footer.relative div.container-x.flex.flex-col.py-6.text-xs::before{background-position:right center}

/* ---------- 13. Barre du haut : appel à l'action offre de lancement ---------- */
#site-header > div.scs-cta-bar{background:#0d0d0d !important;color:#f3eee4 !important}
#site-header > div.scs-cta-bar .text-foreground{color:#f3eee4 !important}
#site-header > div.scs-cta-bar .border-border{border-color:rgba(255,255,255,.14) !important}
#site-header > div.scs-cta-bar .flex-1.text-center{opacity:1;font-size:13px;letter-spacing:.02em}
.scs-gift{display:inline-block !important;vertical-align:-2px}.scs-cta .scs-gift{margin-right:4px}.scs-offer-ico .scs-gift{width:24px;height:24px;color:#a88a4b}
.scs-cta{color:#e6cf9a;text-decoration:none;display:inline-block;animation:scs-cta-pulse 2.6s ease-in-out infinite}
.scs-cta b{color:#f5e3b5;font-weight:500}.scs-cta u{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:6px}
.scs-cta:hover{color:#fff}
@keyframes scs-cta-pulse{0%,100%{opacity:1}50%{opacity:.78}}
@media (prefers-reduced-motion: reduce){.scs-cta{animation:none}}

/* ---------- 14. Fiche produit (mobile) : titre plus affirmé + note sous le titre ---------- */
main div.mb-5.lg\:hidden > h1{font-size:42px !important;font-weight:600 !important;letter-spacing:-.01em !important;line-height:1.05 !important}
main div.mb-5.lg\:hidden .scs-rating{margin-top:10px;gap:10px}
main div.mb-5.lg\:hidden .scs-rating svg{width:16px;height:16px}
main div.mb-5.lg\:hidden .scs-rating a{font-size:13px}

/* ---------- 15. Espace client (/account) : mise en page propre et élégante ---------- */
html.scs-account main > .container-x{max-width:1120px}
html.scs-account main nav[aria-label="Breadcrumb"]{margin-bottom:4px}
/* Connexion / inscription : carte centrée */
html.scs-account main .mx-auto.mt-10.grid.max-w-4xl,
html.scs-account main .mx-auto.mt-10.max-w-md{background:#fffdf9;border:1px solid rgb(var(--border));padding:48px 44px;box-shadow:0 18px 50px -30px rgba(13,13,13,.25)}
html.scs-account main .mx-auto.mt-10.max-w-md{max-width:520px}
html.scs-account main .mx-auto.mt-10.grid.max-w-4xl{max-width:960px}
html.scs-account main h1.display-2{font-size:40px;line-height:1.05}
html.scs-account main h1.display-2::before,html.scs-account main h1.display-1::before{content:"Mon compte";display:block;font-family:inherit;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#a88a4b;margin-bottom:14px;font-weight:400}
html.scs-account[lang="en"] main h1.display-2::before,html.scs-account main h1.display-1::before{content:"SCS Prestige"}
html.scs-account main .eyebrow{display:none}
html.scs-account main form input,html.scs-account main form select{background:#fff !important;border-color:rgb(var(--border)) !important;padding:13px 16px !important;font-size:15px !important;transition:border-color .2s,box-shadow .2s}
html.scs-account main form input:focus{border-color:#a88a4b !important;box-shadow:0 0 0 3px rgba(168,138,75,.15)}
html.scs-account main form .label-caps{font-size:11px;letter-spacing:.16em}
html.scs-account main form .btn{padding-top:15px;padding-bottom:15px;letter-spacing:.18em}
html.scs-account main form p.text-center.text-xs{display:none} /* note « compte de démonstration » */
html.scs-account main .md\:border-s{border-color:rgb(var(--border))}
html.scs-account main .md\:border-s .btn{padding:13px 26px}
/* Tableau de bord */
html.scs-account main .mt-8.flex.flex-col.justify-between{padding-bottom:22px;border-bottom:1px solid rgb(var(--border))}
html.scs-account main h1.display-1{font-size:46px;line-height:1.05}
html.scs-account main nav[aria-label="Account"]{gap:6px}
html.scs-account main nav[aria-label="Account"] a{padding:10px 14px !important;border-left:2px solid transparent;font-size:11.5px;letter-spacing:.16em;color:rgb(var(--muted))}
html.scs-account main nav[aria-label="Account"] a:hover{color:rgb(var(--foreground));background:#fbf8f2}
html.scs-account main nav[aria-label="Account"] a.text-foreground,html.scs-account main nav[aria-label="Account"] a[aria-current]{color:rgb(var(--foreground));border-left-color:#a88a4b;background:#fbf8f2}
@media (max-width:1023px){html.scs-account main nav[aria-label="Account"] a{border-left:0;border-bottom:2px solid transparent;padding:10px 4px !important}html.scs-account main nav[aria-label="Account"] a.text-foreground{border-bottom-color:#a88a4b;background:transparent}}
html.scs-account main .border.border-border.p-6,html.scs-account main .border.border-border.p-10{background:#fffdf9;padding:28px 28px 26px;box-shadow:0 14px 40px -30px rgba(13,13,13,.22);transition:transform .3s var(--ease-luxe),box-shadow .3s}
html.scs-account main .border.border-border.p-6:hover{transform:translateY(-2px);box-shadow:0 20px 44px -28px rgba(13,13,13,.3)}
html.scs-account main .border.border-border .label-caps.mb-4{color:#a88a4b;font-size:11px;letter-spacing:.2em}
html.scs-account main .border.border-border .link-underline{margin-top:18px !important;font-size:11px}
html.scs-account main form.max-w-lg{background:#fffdf9;border:1px solid rgb(var(--border));padding:32px 32px 28px;max-width:640px;box-shadow:0 14px 40px -30px rgba(13,13,13,.22)}
html.scs-account main button.self-start{font-size:11px;letter-spacing:.18em;border:1px solid rgb(var(--border));padding:9px 14px;text-decoration:none;background:#fff}
html.scs-account main button.self-start:hover{border-color:rgb(var(--foreground))}
@media (max-width:640px){html.scs-account main .mx-auto.mt-10.grid.max-w-4xl,html.scs-account main .mx-auto.mt-10.max-w-md,html.scs-account main form.max-w-lg{padding:28px 20px}html.scs-account main h1.display-1{font-size:36px}}

/* ---------- 16. Club SCS Prestige : carte de membre, onglets Club / Invitations ---------- */
.scs-hide-orig{display:none !important}
.scs-card-wrap{grid-column:1/-1}
.scs-card{position:relative;background:linear-gradient(135deg,#1a1814 0%,#0d0d0d 55%,#2a2419 100%);color:#f3eee4;padding:26px 28px 24px;border:1px solid rgba(168,138,75,.45);box-shadow:0 24px 60px -30px rgba(0,0,0,.6);max-width:460px;aspect-ratio:1.7;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.scs-card::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 10%,rgba(168,138,75,.22),transparent 55%);pointer-events:none}
.scs-card-top{display:flex;align-items:center;justify-content:space-between}
.scs-card-top img{height:34px;width:auto}
.scs-card-top span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#c9a96e}
.scs-card-name{font-family:inherit;font-size:22px;letter-spacing:.04em;margin-top:10px}
.scs-card-row{display:flex;gap:28px}
.scs-card-row small{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,238,228,.55);margin-bottom:4px}
.scs-card-row b{font-weight:400;font-size:14px;letter-spacing:.14em;color:#e6cf9a}
.scs-panel{background:#fffdf9;border:1px solid rgb(var(--border));padding:34px;box-shadow:0 14px 40px -30px rgba(13,13,13,.22)}
.scs-panel-loading{color:rgb(var(--muted))}
.scs-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#a88a4b;margin:0 0 10px}
.scs-panel h3{font-family:var(--font-display,serif);font-size:30px;line-height:1.1;margin:0 0 12px;font-weight:300}
.scs-panel p{color:rgb(var(--muted));font-size:15px;line-height:1.6;margin:0 0 14px}
.scs-club{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.scs-club ul{list-style:none;padding:0;margin:10px 0 20px}
.scs-club li{padding:9px 0;border-bottom:1px solid rgb(var(--border));font-size:14px}
.scs-club li::before{content:"✦";color:#a88a4b;margin-right:10px;font-size:11px}
.scs-stats{display:flex;gap:26px}.scs-stats small{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--muted))}.scs-stats b{font-weight:400;font-size:22px;font-family:var(--font-display,serif)}
.scs-inv{max-width:620px}
.scs-code{border:1px dashed #a88a4b;background:#faf5e9;padding:18px 20px;margin:18px 0}
.scs-code small{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#6f5520;margin-bottom:8px}
.scs-code-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.scs-code-row b{font-size:28px;letter-spacing:.22em;font-weight:400;font-family:var(--font-display,serif)}
.scs-copy{border:1px solid rgb(var(--foreground));background:transparent;padding:9px 16px;font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.scs-copy:hover{background:rgb(var(--foreground));color:rgb(var(--background))}
.scs-used{margin:10px 0 0 !important;font-size:12.5px !important}
.scs-share{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:760px){.scs-club{grid-template-columns:1fr}.scs-panel{padding:22px 18px}.scs-code-row b{font-size:22px}}

/* ---------- 17. Boutique : la vignette éditoriale occupe une seule colonne (3 produits par ligne, plus de produit isolé) ---------- */
main .grid.md\:grid-cols-3 > a.col-span-2{grid-column:span 1 / span 1}
@media (min-width:768px){main .grid.md\:grid-cols-3 > a.col-span-2{aspect-ratio:1/1;height:auto}}

/* ---------- 18. Expérience mobile « maison de luxe » ---------- */
html{-webkit-tap-highlight-color:transparent}
.eyebrow,.overline{color:#a88a4b !important;letter-spacing:.24em}
@media (max-width:767px){
  /* Bannière : image plein écran, titre en surimpression */
  .home-rhythm > section:first-child > .container-x{position:relative}
  .home-rhythm > section:first-child > .container-x > .relative.flex{aspect-ratio:auto !important;height:calc(100svh - 52px);min-height:560px;max-height:860px}
  .home-rhythm > section:first-child > .container-x > .md\:hidden{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:170px 26px 40px !important;background:linear-gradient(to top,rgba(13,13,13,.9) 0%,rgba(13,13,13,.7) 40%,rgba(13,13,13,.25) 75%,rgba(13,13,13,0) 100%);text-align:center !important;text-shadow:0 1px 14px rgba(0,0,0,.45)}
  .home-rhythm > section:first-child > .container-x > .md\:hidden .max-w-2xl{color:#fff;margin:0 auto}
  .home-rhythm > section:first-child > .container-x > .md\:hidden h1{color:#fff !important;font-size:36px !important;letter-spacing:.01em !important;white-space:nowrap}
  .home-rhythm > section:first-child > .container-x > .md\:hidden p{color:rgba(255,255,255,.86) !important;font-size:15px !important;line-height:1.6;max-width:320px;margin-left:auto;margin-right:auto}
  .home-rhythm > section:first-child > .container-x > .md\:hidden .mt-10{margin-top:26px !important;justify-content:center}
  .home-rhythm > section:first-child > .container-x > .md\:hidden .btn{background:#f7f3ec !important;color:#0d0d0d !important;border-color:#f7f3ec !important;min-width:240px;justify-content:center}
  .home-rhythm > section:first-child > .container-x > .md\:hidden::after{content:"";display:block;width:1px;height:34px;margin:26px auto 0;background:linear-gradient(#e6cf9a,transparent);animation:scs-scroll-hint 2.2s ease-in-out infinite}
  @keyframes scs-scroll-hint{0%,100%{opacity:.25;transform:translateY(-4px)}50%{opacity:1;transform:translateY(4px)}}

  /* Titres : tailles maîtrisées, plus d'air */
  .home-rhythm section h2{font-size:34px !important;line-height:1.1 !important;letter-spacing:-.005em !important}
  .home-rhythm section h2 em{font-style:italic}
  .home-rhythm > section{padding-top:max(var(--section-y),56px)}
  main p.text-muted,main .text-muted p{color:#3a3632}
  .home-rhythm section p{font-size:15px;line-height:1.7}
  .home-rhythm .eyebrow{display:inline-flex;align-items:center;gap:10px}
  .home-rhythm .eyebrow::before,.home-rhythm .eyebrow::after{content:"";width:18px;height:1px;background:#a88a4b;opacity:.6}

  /* Chiffres de l’étude côte à côte */
  .home-rhythm .max-w-4xl .mt-10.flex.flex-wrap.gap-y-6{flex-wrap:nowrap;justify-content:center;gap:0}
  .home-rhythm .max-w-4xl .mt-10.flex.flex-wrap.gap-y-6 > div{padding:0 22px !important}
  .home-rhythm .max-w-4xl .mt-10.flex.flex-wrap.gap-y-6 > div + div{border-left:1px solid rgba(168,138,75,.4)}

  /* Carrousels : la carte suivante dépasse, on comprend qu’on peut glisser */
  .home-rhythm .snap-x-mandatory{padding-left:22px !important;scroll-padding-left:22px;gap:14px !important}
  .home-rhythm .snap-x-mandatory > .shrink-0{width:78% !important;padding:0 !important}
  .home-rhythm .snap-x-mandatory + .pointer-events-none{display:none !important}
  .home-rhythm article h3{font-size:21px !important}

  /* Boutons pleine largeur, plus hauts */
  .home-rhythm section .btn:not(.btn-light){width:100%;justify-content:center;padding-top:17px;padding-bottom:17px}
  main .btn{letter-spacing:.2em}

  /* Barre d’annonce sur une ligne */
  #site-header > div.scs-cta-bar .flex-1.text-center{font-size:12px}
}

/* ---------- 19. Bandeau cookies discret (mobile surtout) ---------- */
.fixed.inset-x-0.bottom-0.z-\[80\] > div{gap:14px !important;padding:18px 18px 16px !important;box-shadow:0 -10px 40px -20px rgba(0,0,0,.35) !important}
.fixed.inset-x-0.bottom-0.z-\[80\] p.max-w-3xl{font-size:12px !important;line-height:1.55 !important;color:#3a3632}
.fixed.inset-x-0.bottom-0.z-\[80\] button.rounded-full{border-radius:0 !important;padding:12px 16px !important;font-size:10.5px !important;letter-spacing:.18em !important}
@media (max-width:767px){
  .fixed.inset-x-0.bottom-0.z-\[80\]{padding:0 !important}
  .fixed.inset-x-0.bottom-0.z-\[80\] > div{border-left:0;border-right:0;border-bottom:0}
  .fixed.inset-x-0.bottom-0.z-\[80\] p.max-w-3xl{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .fixed.inset-x-0.bottom-0.z-\[80\] div.flex.flex-col.gap-3{flex-direction:row !important;flex-wrap:wrap;gap:8px !important}
  .fixed.inset-x-0.bottom-0.z-\[80\] div.flex.flex-col.gap-3 > button{flex:1 1 30%;width:auto !important;min-width:0 !important;padding:11px 6px !important}
}

/* ---------- 20. Vraies photos produits : le fond blanc du studio se fond dans l'ivoire du site ---------- */
img[src*="/asset/image/produits/"][src$="/1.jpg"],img[src*="/asset/image/produits/"][src$="/2.jpg"]{mix-blend-mode:multiply}

/* ---------- Admin : fenêtre « Ajouter / modifier un produit » plus compacte ---------- */
/* Ciblée sur la fenêtre qui contient le formulaire produit (2 colonnes), pas sur les autres. */
@media (min-width: 1024px) {
  .fixed.inset-0 > .max-w-3xl:has(> div > form.md\:grid-cols-2) {
    max-width: min(1180px, 100%);
    max-height: calc(100vh - 2rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  .fixed.inset-0 > .max-w-3xl:has(> div > form.md\:grid-cols-2) > div:last-child {
    overflow-y: auto;
    flex: 1 1 auto;
    padding-bottom: 0;
  }
  /* Colonne gauche (champs) un peu plus large que la colonne images */
  .fixed.inset-0 form.md\:grid-cols-2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 2rem; }
  /* Prix par pays : 4 par ligne, libellés sur une ligne */
  .fixed.inset-0 form.md\:grid-cols-2 > .space-y-4 > div > .grid.grid-cols-2.gap-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  .fixed.inset-0 form.md\:grid-cols-2 > .space-y-4 > div > .grid.grid-cols-2.gap-3 label > span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; letter-spacing: .06em;
  }
  /* Images produit : 2 par ligne (place pour les boutons Upload / Retirer) */
  /* Boutons Annuler / Enregistrer toujours visibles en bas */
  .fixed.inset-0 form.md\:grid-cols-2 > .col-span-full:last-child {
    position: sticky; bottom: 0; z-index: 5;
    background: rgb(var(--background)); padding-bottom: 1rem; margin-top: .5rem;
  }
}

/* ---------- Bannière des pages éditoriales / collections / rituels : pleine largeur comme l'accueil ----------
   (même technique que la bannière d'accueil : on étire l'image sur les marges latérales et on retire l'espace du haut,
   pour que l'en-tête transparent — logo et menu blancs — soit toujours posé sur la photo) */
main > section.pt-4.md\:pt-6:first-child { padding-top: 0 !important; }
main > section.pt-4.md\:pt-6:first-child > .container-x > .relative.flex.overflow-hidden {
  margin-inline: calc(var(--gutter) * -1);
  width: calc(100% + var(--gutter) * 2);
}

/* ---------- Navigation : « Notre histoire » et « Contact » mènent directement à leur page (custom.js, simpleNav) ;
   « Boutique » a retrouvé son menu déroulant (demande du 10/11). */

/* Arabe : le bouton « retour en haut » du pied de page passe à gauche (au-dessus des liens), comme en français, au lieu de chevaucher le bloc newsletter. */
[dir="rtl"] footer button[aria-label="Back to top"] { right: auto; left: var(--gutter); }

/* Barre du haut : menus pays / langue — panneau sombre comme la barre, choix actuel en doré (avant : texte clair sur fond clair, la langue choisie était invisible). */
ul[role="listbox"].shadow-xl.min-w-\[9rem\], ul[role="listbox"].shadow-xl.min-w-\[13rem\] { background: #111 !important; border-color: rgba(255,255,255,.14) !important; padding: 6px 0 !important; }
ul[role="listbox"].shadow-xl.min-w-\[9rem\] button, ul[role="listbox"].shadow-xl.min-w-\[13rem\] button { color: rgba(243,238,228,.72) !important; padding-top: 8px; padding-bottom: 8px; }
ul[role="listbox"].shadow-xl.min-w-\[9rem\] button:hover, ul[role="listbox"].shadow-xl.min-w-\[13rem\] button:hover { color: #fff !important; background: rgba(255,255,255,.06); }
ul[role="listbox"].shadow-xl.min-w-\[9rem\] button.text-foreground, ul[role="listbox"].shadow-xl.min-w-\[13rem\] button.text-foreground { color: #c9b68a !important; }

/* En-tête (ordinateur) : menu, loupe et panier descendus comme sur les autres pages (lg:mt-10), aussi sur l'accueil. */
@media (min-width: 1024px) {
  #site-header nav[aria-label="Primary"], #site-header nav[aria-label="Primary"] + button,
  #site-header div.container-x.relative > div.flex.items-center.justify-end.gap-5 { margin-top: 2.5rem; }
}

/* ---------- Fiche produit (ordinateur) : 2 images par ligne ; s'il y en a un nombre impair, la dernière garde la même taille
   que les autres (centrée) au lieu d'être étirée sur toute la largeur. ---------- */
@media (min-width: 1024px) {
  main div.hidden.grid-cols-2.gap-2.lg\:grid > div.col-span-2 { grid-column: 1 / -1; width: calc((100% - 0.5rem) / 2); justify-self: center; }
}

/* Pop-up « Le Cercle Privé » : bandeau de l'offre de lancement (custom.js, popupOffer). */
.scs-pop-offer { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border: 1px solid rgba(176, 141, 87, .55); background: rgba(176, 141, 87, .08); color: #4a3f2c; font-size: 13px; line-height: 1.5; text-decoration: none; }
.scs-pop-offer b { color: #8a6a33; font-weight: 600; }
.scs-pop-offer-ic { flex: 0 0 auto; color: #a8864f; margin-top: 2px; }
.scs-pop-offer-ic svg { width: 18px; height: 18px; }
.scs-pop-offer:hover { background: rgba(176, 141, 87, .14); }

/* Menu « La Maison » : les 4 liens sur une seule ligne, centrés, sans image de mise en avant (repéré par son lien Distributeurs). */
#site-header div.absolute.inset-x-0.top-full:has(a[href^="/distributeurs"]) .max-w-container { padding-top: 22px; padding-bottom: 22px; }
#site-header div.absolute.inset-x-0.top-full:has(a[href^="/distributeurs"]) a.group.relative.hidden { display: none !important; }
#site-header div.absolute.inset-x-0.top-full:has(a[href^="/distributeurs"]) .grid { display: block; }
#site-header div.absolute.inset-x-0.top-full:has(a[href^="/distributeurs"]) ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 56px; }
#site-header div.absolute.inset-x-0.top-full:has(a[href^="/distributeurs"]) ul > li { margin: 0 !important; }
#site-header div.absolute.inset-x-0.top-full:has(a[href^="/distributeurs"]) ul a { font-size: 1.15rem; white-space: nowrap; }

/* Fiche produit : tableau « Informations produit » (libellés en colonne, valeurs alignées, lignes fines). */
dl:has(> div > dt.w-40) { margin: 0; }
dl:has(> div > dt.w-40) > div { display: grid !important; grid-template-columns: 10.5rem 1fr; column-gap: 1.25rem; align-items: baseline; margin: 0 !important; padding: 13px 0 !important; border-bottom: 1px solid #e3dccf; }
dl:has(> div > dt.w-40) > div:first-child { padding-top: 4px !important; }
dl:has(> div > dt.w-40) > div:last-child { border-bottom: 0; padding-bottom: 0 !important; }
dl:has(> div > dt.w-40) dt.w-40 { width: auto; font-size: 10.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: #8a8379; }
dl:has(> div > dt.w-40) dd { font-size: 14px; line-height: 1.6; color: #0d0d0d; }
[dir="rtl"] dl:has(> div > dt.w-40) dt.w-40 { letter-spacing: 0; font-size: 13px; text-transform: none; }
@media (max-width: 640px) { dl:has(> div > dt.w-40) > div { grid-template-columns: 7.5rem 1fr; column-gap: .9rem; } }