/* =====================================================================
   Des étoiles dans leurs yeux — Page d'accueil « Lutins farceurs »
   Module destoiles_homelutins. Tout est scopé sous .dhl pour ne pas
   polluer le reste du thème. Port fidèle des maquettes (variant-nuit).
   Mise en page FLUIDE (max 1200px) + responsive mobile (<= 768px).
   ===================================================================== */

/* --- Mode immersif : l'en-tête et le pied du thème portent désormais la version
   bespoke (.dhl-chrome / .dhl-footer) — on NE les masque PLUS. On masque seulement
   les colonnes latérales, l'en-tête de listing et le fil d'Ariane natifs. */
.is-dhl-immersive #left-column,
.is-dhl-immersive #right-column,
.is-dhl-immersive #js-product-list-header,
.is-dhl-immersive nav.breadcrumb[data-depth],
body.dhl-immersive #left-column,
body.dhl-immersive #right-column,
body.dhl-immersive #js-product-list-header,
body.dhl-immersive nav.breadcrumb[data-depth] { display: none !important; }
body.dhl-immersive #wrapper,
body.dhl-immersive #content-wrapper,
body.dhl-immersive #main,
body.dhl-immersive .container { max-width: none; padding: 0; margin: 0; width: 100%; }
body.dhl-immersive #content-wrapper { width: 100% !important; }

/* --- Racine + tokens --------------------------------------------------- */
.dhl {
  --ink:#0f0b1e; --night:#1a1130; --night2:#251846; --plum:#2f1f55;
  --gold:#e8c061; --gold-soft:#f3d98c; --aqua:#9fe4e6; --aqua-deep:#5fb8bd;
  --cream:#f7f1e6; --rouge:#cf5a52; --pine:#5a8f6e;
  --text:#ece6f5; --muted:#b6aacb;
  font-family:'Mulish', system-ui, sans-serif; color:var(--text);
  background:var(--ink); position:relative; line-height:1.5;
  /* break-out pleine largeur, quel que soit le container du thème */
  width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); overflow-x:clip;
}
.dhl *{ box-sizing:border-box; }
.dhl img{ max-width:100%; }
.dhl h1,.dhl h2,.dhl h3,.dhl h4,.dhl .serif{ font-family:'Cormorant Garamond', Georgia, serif; }
.dhl .script{ font-family:'Pinyon Script', cursive; display:inline-block; }
/* Majuscule en début de chaque eyebrow/titre script (« la tradition » → « La tradition ») */
.dhl .script::first-letter{ text-transform:uppercase; }
.dhl a{ text-decoration:none; }
.dhl .wrap{ max-width:1200px; margin:0 auto; padding:0 56px; }
.dhl .center{ text-align:center; }

/* --- Étoiles / neige / lune ------------------------------------------- */
@keyframes dhl-twinkle { 0%,100%{opacity:.15; transform:scale(.7)} 50%{opacity:1; transform:scale(1)} }
@keyframes dhl-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes dhl-fall    { 0%{transform:translateY(-8%) translateX(0) rotate(0); opacity:0} 8%{opacity:.9} 100%{transform:translateY(108%) translateX(var(--drift,20px)) rotate(360deg); opacity:.9} }
@keyframes dhl-pulse   { 0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.06); opacity:1} }
@keyframes dhl-pop     { 0%{transform:scale(.92); opacity:.2} 60%{transform:scale(1.02)} 100%{transform:scale(1); opacity:1} }
@keyframes dhl-sparkle-pop { 0%{transform:scale(0) rotate(0); opacity:1} 100%{transform:scale(1) rotate(120deg); opacity:0} }

.dhl .starfield, .dhl .snowfield{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.dhl .starfield span{ position:absolute; border-radius:50%; animation:dhl-twinkle var(--dur,3s) ease-in-out var(--delay,0s) infinite; }
.dhl .snowfield span{ position:absolute; top:0; border-radius:50%; background:#fff; filter:blur(.3px);
  animation:dhl-fall var(--dur,12s) linear var(--delay,0s) infinite; }
.dhl .moon{ position:absolute; top:40px; right:8%; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff 0%,#e9e2f5 40%,#c7bbe6 75%,#a89ad0 100%);
  box-shadow:0 0 80px 10px rgba(232,192,97,.18); opacity:.9; animation:dhl-pulse 9s ease-in-out infinite; pointer-events:none; }

/* --- Placeholder produit (ProductShot) -------------------------------- */
.dhl .shot{ width:100%; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,#241a3d,#241a3d 11px,#2c2247 11px,#2c2247 22px);
  border:1px dashed rgba(232,192,97,.55); }
.dhl .shot .lab{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(232,192,97,.9); background:rgba(0,0,0,.45); padding:5px 10px; border-radius:999px; }
.dhl .shot img{ width:100%; height:100%; object-fit:cover; }

/* --- Boutons ----------------------------------------------------------- */
.dhl .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit;
  font-size:15px; font-weight:700; border-radius:999px; padding:16px 30px; cursor:pointer; border:0;
  transition:transform .18s, box-shadow .18s, border-color .2s, color .2s; letter-spacing:.01em; min-height:44px; }
.dhl .btn-gold{ background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#3a2a08;
  box-shadow:0 10px 30px -8px rgba(232,192,97,.6); }
.dhl .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -8px rgba(232,192,97,.75); color:#3a2a08; }
.dhl .btn-ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.25); }
.dhl .btn-ghost:hover{ border-color:var(--aqua); color:var(--aqua); }
.dhl .btn-aqua{ background:transparent; color:var(--aqua); border:1px solid rgba(159,228,230,.5); width:100%; }
.dhl .btn-aqua:hover{ background:rgba(159,228,230,.1); color:var(--aqua); }

/* --- Navigation -------------------------------------------------------- */
.dhl .nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 56px;
  position:relative; z-index:20; border-bottom:1px solid rgba(232,192,97,.16); }
.dhl .brand{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.dhl .brand img{ width:56px; height:56px; border-radius:50%; filter:drop-shadow(0 0 18px rgba(159,228,230,.35)); }
.dhl .brand .wm{ font-family:'Pinyon Script',cursive; font-size:26px; color:var(--cream); line-height:1; white-space:nowrap; }
.dhl .navlinks{ display:flex; flex:0 0 auto; gap:24px; list-style:none; margin:0; padding:0; font-size:14px; letter-spacing:.04em; white-space:nowrap; }
.dhl .navlinks a{ color:var(--text); opacity:.85; transition:.2s; position:relative; }
.dhl .navlinks a:hover{ opacity:1; color:var(--gold-soft); }
.dhl .navlinks a.active{ opacity:1; color:var(--gold); }
.dhl .navlinks a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--gold); }

/* Formulaire d'ajout au panier inline : ne casse pas le flex de la rangée (le bouton reste positionné comme un simple .addbtn / .btn). */
.dhl .dhl-addform{ display:contents; }
.dhl .navright{ display:flex; align-items:center; gap:12px; }
/* Barre de recherche dans l'en-tête (widget natif ps_searchbar = autocomplétion ajax) */
.dhl .dhl-search{ display:flex; align-items:center; }
.dhl .dhl-search #search_widget, .dhl .dhl-search .search-widgets{ width:auto; margin:0; }
.dhl .dhl-search form{ display:flex; align-items:center; position:relative; background:rgba(255,255,255,.05);
  border:1px solid rgba(232,192,97,.28); border-radius:999px; padding:5px 14px; transition:.2s; }
.dhl .dhl-search form:focus-within{ border-color:var(--gold); background:rgba(255,255,255,.08); }
.dhl .dhl-search input[name="s"]{ border:0; background:transparent; outline:0; color:var(--text);
  font-family:var(--sans,'Mulish'); font-size:13px; width:150px; transition:width .2s; }
.dhl .dhl-search input[name="s"]::placeholder{ color:var(--muted); }
.dhl .dhl-search form:focus-within input[name="s"]{ width:200px; }
.dhl .dhl-search .material-icons{ font-size:18px; color:var(--gold-soft); line-height:1; }
.dhl .dhl-search .material-icons.search{ margin-right:6px; }
.dhl .dhl-search .material-icons.clear{ cursor:pointer; opacity:.55; margin-left:4px; }
.dhl .dhl-search .material-icons.clear:hover{ opacity:1; color:var(--gold); }
/* Prénom + déconnexion */
.dhl .dhl-account-name{ color:var(--cream); font-size:13px; font-weight:600; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dhl .jchip{ display:inline-flex; align-items:center; gap:7px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(232,192,97,.4); border-radius:999px; padding:7px 13px; background:rgba(232,192,97,.06); }
.dhl .iconbtn{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03);
  display:grid; place-items:center; color:var(--text); cursor:pointer; transition:.2s; position:relative; }
.dhl .iconbtn:hover{ border-color:var(--gold); color:var(--gold-soft); }
.dhl .cart-count, .dhl .cart-products-count{ position:absolute; top:-5px; right:-5px; background:var(--rouge); color:#fff; font-size:10px; font-weight:800;
  min-width:18px; height:18px; padding:0 4px; border-radius:999px; display:grid; place-items:center; line-height:1; }
/* Widget panier ps_shoppingcart : ses wrappers deviennent transparents (l'icône flotte dans la nav). */
.dhl #_desktop_cart, .dhl #_desktop_cart .blockcart{ display:contents; }
.dhl .dhl-cart{ text-decoration:none; }
.dhl .cart-products-count.dhl-hidden{ display:none; }
.dhl .burger{ display:none; width:44px; height:44px; border-radius:50%; border:0; background:transparent; color:var(--text);
  cursor:pointer; place-items:center; }
.dhl .mobile-menu{ display:none; }
.dhl .jbar{ display:none; }

/* --- Hero -------------------------------------------------------------- */
.dhl .hero{ position:relative; padding:64px 0 90px;
  background:radial-gradient(120% 90% at 80% 0%,var(--plum) 0%,var(--night) 45%,var(--ink) 100%); }
.dhl .heroGrid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; position:relative; z-index:5; }
.dhl .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--aqua); margin-bottom:22px; }
.dhl .eyebrow::before{ content:''; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--aqua)); }
.dhl h1.title{ font-size:74px; line-height:.98; font-weight:600; margin:0 0 22px; color:#fff; letter-spacing:-.01em; }
.dhl h1.title em{ font-style:italic; color:var(--gold-soft); }
.dhl .lede{ font-size:19px; line-height:1.6; color:var(--muted); max-width:480px; margin:0 0 34px; }
.dhl .ctas{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.dhl .heroArt{ position:relative; }
.dhl .frame{ position:relative; border-radius:24px; padding:14px;
  background:linear-gradient(145deg,rgba(232,192,97,.5),rgba(232,192,97,.08));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8); animation:dhl-float 7s ease-in-out infinite; }
.dhl .frame .inner{ border-radius:14px; overflow:hidden; border:1px solid rgba(232,192,97,.25); }
.dhl .badge-farce{ position:absolute; top:-18px; left:-18px; background:var(--rouge); color:#fff; border-radius:14px;
  padding:10px 16px; font-weight:800; font-size:13px; letter-spacing:.04em; box-shadow:0 12px 24px -8px rgba(0,0,0,.6);
  transform:rotate(-6deg); z-index:3; }
.dhl .badge-farce small{ display:block; font-weight:600; opacity:.85; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.dhl .float-tag{ position:absolute; background:rgba(15,11,30,.85); border:1px solid rgba(159,228,230,.35);
  border-radius:12px; padding:9px 14px; font-size:12px; color:var(--aqua); backdrop-filter:blur(6px); z-index:3;
  display:flex; align-items:center; gap:8px; }

/* --- Bandeau réassurance ---------------------------------------------- */
.dhl .strip{ border-top:1px solid rgba(232,192,97,.16); border-bottom:1px solid rgba(232,192,97,.16); background:rgba(255,255,255,.02); }
.dhl .stripIn{ display:grid; grid-template-columns:repeat(4,1fr); max-width:1200px; margin:0 auto; }
.dhl .stripItem{ padding:26px 24px; display:flex; gap:14px; align-items:center; border-right:1px solid rgba(255,255,255,.06); }
.dhl .stripItem:last-child{ border-right:0; }
.dhl .stripItem b{ display:block; font-size:14px; color:var(--cream); margin-bottom:3px; }
.dhl .stripItem span{ font-size:12.5px; color:var(--muted); line-height:1.4; }
.dhl .si-ico{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(232,192,97,.1); border:1px solid rgba(232,192,97,.3); }

/* --- Sections génériques ---------------------------------------------- */
.dhl .sec{ padding:90px 0; position:relative; }
.dhl .sec.tight{ padding-top:0; }
.dhl .sec.bordered{ background:rgba(255,255,255,.02); border-top:1px solid rgba(232,192,97,.12); border-bottom:1px solid rgba(232,192,97,.12); }
.dhl .sechead{ text-align:center; margin-bottom:50px; }
.dhl .sechead .script{ font-size:30px; color:var(--gold-soft); display:block; line-height:1; margin-bottom:6px; }
.dhl .sechead h2{ font-size:46px; font-weight:600; margin:0; color:#fff; letter-spacing:-.01em; }
.dhl .sechead p{ color:var(--muted); max-width:520px; margin:14px auto 0; font-size:16px; line-height:1.6; }

/* --- Trois univers ----------------------------------------------------- */
.dhl .univers{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.dhl .uni{ position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(232,192,97,.2);
  background:linear-gradient(180deg,rgba(47,31,85,.55),rgba(26,17,48,.7)); transition:transform .25s,border-color .25s,box-shadow .25s; }
.dhl .uni:hover{ transform:translateY(-8px); border-color:rgba(232,192,97,.5); box-shadow:0 34px 64px -30px rgba(0,0,0,.85); }
.dhl .uni .uimg{ position:relative; }
.dhl .uni .uimg .shot{ aspect-ratio:4/3; border-radius:0; border-left:0; border-right:0; border-top:0; }
.dhl .uni .uimg .shot img{ aspect-ratio:4/3; }
.dhl .uni .unum{ position:absolute; top:14px; left:14px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:30px;
  color:var(--gold-soft); background:rgba(15,11,30,.55); backdrop-filter:blur(4px); width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center; border:1px solid rgba(232,192,97,.4); z-index:2; }
.dhl .uni .upill{ position:absolute; top:14px; right:14px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:800;
  padding:5px 11px; border-radius:999px; background:var(--aqua); color:#0c2a2b; z-index:2; }
.dhl .uni .ubody{ padding:22px 22px 24px; }
.dhl .uni h3{ font-size:30px; font-weight:600; color:#fff; margin:0 0 6px; line-height:1.05; }
.dhl .uni .ulede{ font-size:14px; color:var(--muted); line-height:1.55; margin:0 0 16px; min-height:62px; }
.dhl .uni .ulist{ list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:9px; }
.dhl .uni .ulist li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--cream); }
.dhl .uni .ulist a{ color:var(--cream); }
.dhl .uni .ulist a:hover{ color:var(--gold-soft); }
.dhl .uni .ulink{ display:inline-flex; align-items:center; gap:8px; color:var(--gold-soft); font-size:14px; font-weight:700; transition:gap .2s; }
.dhl .uni:hover .ulink{ gap:13px; }

/* --- Grille produits (cartes) ----------------------------------------- */
.dhl .grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.dhl .card{ background:linear-gradient(180deg,rgba(47,31,85,.55),rgba(26,17,48,.55)); border:1px solid rgba(232,192,97,.16);
  border-radius:20px; padding:14px; transition:transform .25s,border-color .25s,box-shadow .25s; position:relative; overflow:hidden;
  display:flex; flex-direction:column; }
.dhl .card:hover{ transform:translateY(-8px); border-color:rgba(232,192,97,.5); box-shadow:0 30px 60px -28px rgba(0,0,0,.8); }
.dhl .card .pwrap{ position:relative; margin-bottom:14px; }
.dhl .card .pwrap .shot,.dhl .card .pwrap > a .shot{ aspect-ratio:1/1; border-radius:14px; }
.dhl .card .qa{ position:absolute; left:10px; right:10px; bottom:10px; background:rgba(15,11,30,.82); backdrop-filter:blur(6px);
  border:1px solid rgba(159,228,230,.3); color:var(--aqua); border-radius:11px; padding:11px; text-align:center; font-size:13px;
  font-weight:700; opacity:0; transform:translateY(8px); transition:.25s; }
.dhl .card:hover .qa{ opacity:1; transform:translateY(0); }
.dhl .ptag{ position:absolute; top:10px; left:10px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:800;
  padding:5px 10px; border-radius:999px; background:var(--gold); color:#3a2a08; z-index:2; }
.dhl .ptag.new{ background:var(--aqua); color:#0c2a2b; }
.dhl .card h3{ font-size:24px; font-weight:600; margin:4px 6px 4px; color:#fff; line-height:1.1; }
.dhl .card h3 a{ color:#fff; }
.dhl .card .pd{ font-size:13px; color:var(--muted); margin:0 6px 12px; line-height:1.45; min-height:36px; }
.dhl .prow{ display:flex; align-items:center; justify-content:space-between; margin:0 6px 6px; }
.dhl .prow.bottom{ margin-top:auto; }
.dhl .price{ font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:700; color:var(--gold-soft); }
.dhl .stars-rev{ display:flex; gap:2px; }
.dhl .card .btn-gold{ padding:10px 18px; font-size:13px; }

/* --- Frise de la tradition (horizontale) ------------------------------ */
.dhl .tl{ position:relative; margin-top:18px; }
.dhl .tl::before{ content:''; position:absolute; left:0; right:0; top:33px; height:2px;
  background:linear-gradient(90deg,transparent,rgba(232,192,97,.5) 12%,rgba(232,192,97,.5) 88%,transparent); }
.dhl .tlrow{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative; z-index:2; }
.dhl .tlstep{ text-align:center; }
.dhl .tldot{ width:66px; height:66px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%,var(--night2),var(--night)); border:2px solid rgba(232,192,97,.5);
  box-shadow:0 0 24px -6px rgba(232,192,97,.4); }
.dhl .tldate{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua); margin-bottom:6px; }
.dhl .tlstep h4{ font-size:22px; font-weight:600; color:#fff; margin:0 0 6px; line-height:1.1; }
.dhl .tlstep p{ font-size:13px; color:var(--muted); line-height:1.5; margin:0; }

/* --- Bandeau émotion --------------------------------------------------- */
.dhl .emo{ position:relative; padding:96px 0; text-align:center;
  background:radial-gradient(100% 120% at 50% 0%,var(--plum),var(--ink) 70%);
  border-top:1px solid rgba(232,192,97,.16); border-bottom:1px solid rgba(232,192,97,.16); }
.dhl .emo .script{ font-size:30px; color:var(--gold-soft); }
.dhl .emo blockquote{ font-family:'Cormorant Garamond',serif; font-size:42px; line-height:1.25; font-style:italic;
  color:#fff; max-width:820px; margin:22px auto 0; font-weight:500; }
.dhl .emo cite{ display:block; margin-top:24px; font-style:normal; font-size:14px; letter-spacing:.04em; color:var(--gold-soft); }

/* --- Boîte à farces (interactif) -------------------------------------- */
.dhl .bf{ display:grid; grid-template-columns:1.45fr .9fr; gap:40px; align-items:start; }
.dhl .boites{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.dhl .boite{ position:relative; aspect-ratio:1; border-radius:14px; cursor:pointer; border:1px solid rgba(232,192,97,.3);
  background:linear-gradient(180deg,rgba(47,31,85,.7),rgba(26,17,48,.7)); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; transition:transform .2s,border-color .2s,box-shadow .2s; overflow:hidden; }
.dhl .boite:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:0 14px 30px -16px rgba(232,192,97,.6); }
.dhl .boite .bn{ font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; color:var(--gold-soft); line-height:1; }
.dhl .boite .bs{ font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.dhl .boite .lid{ position:absolute; inset:0 0 auto 0; height:42%; background:linear-gradient(180deg,rgba(232,192,97,.28),rgba(232,192,97,.05));
  border-bottom:1px solid rgba(232,192,97,.3); transition:transform .35s ease; transform-origin:top; }
.dhl .boite.open{ border-color:rgba(159,228,230,.5); background:linear-gradient(180deg,rgba(95,184,189,.18),rgba(26,17,48,.8)); }
.dhl .boite.open .lid{ transform:rotateX(-115deg); }
.dhl .boite.open .bn{ color:var(--aqua); }
.dhl .boite.sel{ outline:2px solid var(--gold); outline-offset:2px; }
.dhl .boite .prod-dot{ position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); }
.dhl .boite .twinkle{ position:absolute; bottom:6px; }
.dhl .bfside{ display:flex; flex-direction:column; gap:18px; }
.dhl .reveal{ background:linear-gradient(160deg,var(--plum),var(--night2)); border:1px solid rgba(232,192,97,.35);
  border-radius:20px; padding:24px; position:relative; overflow:hidden; min-height:210px; }
.dhl .reveal .rcontent{ position:relative; z-index:2; }
.dhl .reveal .rday{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--aqua); display:flex; align-items:center; gap:8px; }
.dhl .reveal h4{ font-size:30px; font-weight:600; color:#fff; margin:8px 0 8px; line-height:1.05; }
.dhl .reveal p{ font-size:14.5px; color:var(--muted); line-height:1.6; margin:0; }
.dhl .reveal .prodlink{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; color:var(--gold-soft); font-size:13px;
  font-weight:700; border:1px solid rgba(232,192,97,.4); border-radius:999px; padding:8px 14px; transition:.2s; }
.dhl .reveal .prodlink:hover{ background:rgba(232,192,97,.12); }
.dhl .reveal .pop{ animation:dhl-pop .5s ease; }
.dhl .gauge{ background:rgba(255,255,255,.03); border:1px solid rgba(232,192,97,.2); border-radius:20px; padding:22px 24px; }
.dhl .gauge .gh{ display:flex; align-items:center; justify-content:space-between; font-family:'Cormorant Garamond',serif; font-size:22px; color:#fff; }
.dhl .gauge .gsub{ font-size:13px; color:var(--muted); margin:4px 0 14px; }
.dhl .gbar{ height:14px; border-radius:999px; background:rgba(15,11,30,.7); border:1px solid rgba(232,192,97,.25); overflow:hidden; }
.dhl .gfill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--aqua),var(--gold) 60%,var(--rouge));
  transition:width .6s cubic-bezier(.2,.7,.2,1); box-shadow:0 0 16px rgba(232,192,97,.4); width:8%; }
.dhl .glabels{ display:flex; justify-content:space-between; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

/* --- Compte à rebours + newsletter ------------------------------------ */
.dhl .cdsec{ padding:0 0 90px; }
.dhl .cdwrap{ max-width:1200px; margin:0 56px; border-radius:28px; padding:54px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--night2),var(--plum)); border:1px solid rgba(232,192,97,.3); }
@media (min-width:1312px){ .dhl .cdwrap{ margin:0 auto; } }
.dhl .cdGrid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; position:relative; z-index:3; }
.dhl .cdGrid .script{ font-size:28px; color:var(--gold-soft); }
.dhl .cdGrid h2{ font-size:42px; font-weight:600; color:#fff; margin:8px 0 12px; line-height:1.05; }
.dhl .cdGrid p{ color:var(--muted); font-size:15px; line-height:1.6; margin:0 0 24px; }
.dhl .clock{ display:flex; gap:14px; }
.dhl .unit{ background:rgba(15,11,30,.55); border:1px solid rgba(232,192,97,.3); border-radius:16px; padding:16px 10px; text-align:center; min-width:78px; flex:1; }
.dhl .unit b{ font-family:'Mulish',system-ui,sans-serif; font-size:38px; font-weight:800; color:var(--gold-soft); line-height:1; display:block; font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1; }
.dhl .unit span{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.dhl .nl{ display:flex; gap:10px; margin-top:8px; }
.dhl .nl input{ flex:1; background:rgba(15,11,30,.6); border:1px solid rgba(255,255,255,.16); border-radius:999px;
  padding:15px 20px; color:#fff; font-size:14px; font-family:inherit; outline:none; }
.dhl .nl input:focus{ border-color:var(--gold); }
.dhl .nl input::placeholder{ color:var(--muted); }

/* --- Footer ------------------------------------------------------------ */
.dhl .foot{ padding:64px 0 36px; border-top:1px solid rgba(232,192,97,.16); }
.dhl .footGrid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
.dhl .foot .brand .wm{ font-size:22px; }
.dhl .foot h5{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 16px; }
.dhl .foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.dhl .foot a{ color:var(--muted); font-size:14px; transition:.2s; }
.dhl .foot a:hover{ color:var(--gold-soft); }
.dhl .foot .blurb{ color:var(--muted); font-size:14px; line-height:1.6; max-width:280px; margin:14px 0 0; }
.dhl .footbar{ display:flex; justify-content:space-between; align-items:center; margin-top:42px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.07); color:var(--muted); font-size:12.5px; }

/* --- Sparkle cursor ---------------------------------------------------- */
.dhl .sparkle{ position:absolute; pointer-events:none; z-index:60; animation:dhl-sparkle-pop .7s ease-out forwards; }

/* --- CTA collant mobile ------------------------------------------------ */
.dhl .bottomcta{ display:none; }

/* =====================================================================
   RESPONSIVE — bascule mobile (<= 768px)
   ===================================================================== */
/* Laptops ~1280-1366 (fréquent avec la mise à l'échelle Windows) : on réduit
   le wordmark + l'espacement pour que la marque ne déborde jamais sur le menu. */
@media (max-width:1366px){
  .dhl .brand .wm{ font-size:21px; }
  .dhl .navlinks{ gap:16px; }
  .dhl .dhl-search input[type="text"], .dhl .dhl-search input[name="s"]{ width:120px; }
}
/* Desktop intermédiaire : on masque le prénom et on compacte davantage la nav. */
@media (max-width:1180px){
  .dhl .nav{ padding:16px 28px; gap:16px; }
  .dhl .dhl-account-name{ display:none; }
  .dhl .brand .wm{ font-size:19px; }
  .dhl .navlinks{ gap:13px; font-size:13.5px; }
  .dhl .dhl-search input[type="text"], .dhl .dhl-search input[name="s"]{ width:94px; }
  .dhl .dhl-search:focus-within input[type="text"], .dhl .dhl-search:focus-within input[name="s"]{ width:140px; }
}

@media (max-width:991px){
  .dhl .wrap{ padding:0 20px; }

  /* Nav compacte + burger. La nav passe sur 2 lignes : icônes en haut, recherche pleine largeur dessous. */
  .dhl .nav{ padding:10px 14px; position:sticky; top:0; background:rgba(15,11,30,.9); backdrop-filter:blur(12px);
    z-index:40; flex-wrap:wrap; gap:8px 10px; }
  /* On replie les liens dans le burger ; on garde compte + panier + recherche. */
  .dhl .navlinks, .dhl .jchip, .dhl .dhl-logout, .dhl .dhl-account-name{ display:none; }
  .dhl .burger{ display:grid; order:0; flex:0 0 auto; }
  /* La marque rétrécit pour garder compte/panier sur la 1re ligne.
     flex-basis:0 est indispensable : dans un conteneur flex-wrap, le passage
     à la ligne est décidé sur la taille *hypothétique* des éléments, AVANT
     tout rétrécissement. Avec 'auto', la marque comptait pour sa largeur de
     texte (~216px) et poussait le panier à la ligne sous 390px de large. */
  .dhl .brand{ order:1; min-width:0; flex:1 1 0; overflow:hidden; gap:8px; }
  .dhl .brand .wm{ font-size:17px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dhl .brand img{ width:38px; height:38px; flex:0 0 auto; }
  /* navright "transparent" : ses enfants (compte, panier, recherche) deviennent des items de la nav. */
  .dhl .navright{ display:contents; }
  .dhl .navright .iconbtn{ order:2; flex:0 0 auto; width:36px; height:36px; }
  /* Recherche = rangée pleine largeur (2e ligne), widget natif → autocomplétion ajax conservée. */
  .dhl .dhl-search{ display:flex !important; order:5; flex:1 0 100%; margin-top:2px; }
  .dhl .mobile-menu{ display:block; max-height:0; overflow:hidden; transition:max-height .3s ease;
    background:rgba(26,17,48,.98); border-bottom:1px solid rgba(232,192,97,.18); }
  .dhl .mobile-menu.open{ max-height:340px; }
  .dhl .mobile-menu a{ display:block; color:var(--text); padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.06); font-size:16px; }
  .dhl .jbar{ display:flex; align-items:center; justify-content:center; gap:7px; padding:8px;
    background:linear-gradient(90deg,rgba(232,192,97,.14),rgba(159,228,230,.12)); border-bottom:1px solid rgba(232,192,97,.16);
    font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); }

  /* Hero empilé */
  .dhl .hero{ padding:30px 0 40px; }
  .dhl .heroGrid{ grid-template-columns:1fr; gap:26px; }
  .dhl h1.title{ font-size:42px; line-height:1; }
  .dhl .lede{ font-size:15.5px; }
  .dhl .ctas{ flex-direction:column; align-items:stretch; }
  .dhl .ctas .btn{ width:100%; }
  .dhl .moon{ width:90px; height:90px; right:6%; top:20px; }

  /* Réassurance en scroller horizontal */
  /* Réassurance : grille 2×2 (tout visible, plus de défilement horizontal caché). */
  .dhl .stripIn{ display:grid; grid-template-columns:1fr 1fr; }
  .dhl .stripItem{ border-right:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
    padding:18px 14px; gap:10px; }
  .dhl .stripItem:nth-child(2n){ border-right:0; }
  .dhl .stripItem:nth-last-child(-n+2){ border-bottom:0; }

  /* Sections plus compactes */
  .dhl .sec{ padding:44px 0; }
  .dhl .emo{ padding:48px 0; }
  .dhl .emo blockquote{ font-size:25px; }
  .dhl .sechead{ margin-bottom:26px; }
  .dhl .sechead h2{ font-size:32px; }
  .dhl .sechead .script{ font-size:23px; }

  /* Univers en cartes horizontales */
  .dhl .univers{ grid-template-columns:1fr; gap:14px; }
  .dhl .uni{ display:flex; align-items:stretch; border-radius:16px; }
  .dhl .uni .uimg{ flex:0 0 118px; }
  .dhl .uni .uimg .shot, .dhl .uni .uimg .shot img{ aspect-ratio:auto; height:100%; }
  .dhl .uni .unum{ width:34px; height:34px; font-size:20px; top:8px; left:8px; }
  .dhl .uni .ubody{ flex:1; padding:13px 14px; display:flex; flex-direction:column; }
  .dhl .uni h3{ font-size:22px; }
  .dhl .uni .ulede{ font-size:12px; min-height:0; margin-bottom:8px; }
  .dhl .uni .ulist{ display:none; }
  .dhl .uni .ulink{ margin-top:auto; font-size:12.5px; }

  /* Produits 2 colonnes */
  .dhl .grid4{ grid-template-columns:1fr 1fr; gap:14px; }
  .dhl .card{ border-radius:16px; padding:10px; }
  .dhl .card h3{ font-size:18px; }
  .dhl .card .pd{ font-size:11.5px; min-height:32px; }
  .dhl .price{ font-size:22px; }
  .dhl .card .qa{ display:none; }
  /* Prix au-dessus, bouton « Ajouter » dessous, le tout centré. */
  .dhl .card .prow{ flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; margin:6px; }
  .dhl .card .prow .addbtn, .dhl .card .prow .btn{ width:100%; max-width:200px; }

  /* Frise verticale propre : pastille à gauche, date/titre/texte empilés à droite. */
  .dhl .tl{ margin-top:8px; }
  .dhl .tl::before{ display:none; }
  .dhl .tlrow{ grid-template-columns:1fr; gap:0; text-align:left; position:relative; }
  .dhl .tlrow::before{ content:''; position:absolute; left:21px; top:14px; bottom:24px; width:2px; background:linear-gradient(var(--gold),rgba(232,192,97,.15)); }
  .dhl .tlstep{
    display:grid; grid-template-columns:44px 1fr; column-gap:16px; row-gap:3px;
    grid-template-areas:"dot date" "dot title" "dot text";
    text-align:left; padding:0 0 26px; position:relative; align-items:start;
  }
  .dhl .tldot{ grid-area:dot; width:44px; height:44px; margin:0; flex:0 0 auto; z-index:2; align-self:start; }
  .dhl .tldot svg{ width:19px; height:19px; }
  .dhl .tldate{ grid-area:date; margin:4px 0 0; }
  .dhl .tlstep h4{ grid-area:title; font-size:19px; margin:0; }
  .dhl .tlstep p{ grid-area:text; margin:4px 0 0; }
  .dhl .tlstep:last-child{ padding-bottom:0; }

  /* Boîte à farces : 1 colonne, grille 4 col */
  .dhl .bf{ grid-template-columns:1fr; gap:18px; }
  .dhl .boites{ grid-template-columns:repeat(4,1fr); gap:9px; }
  .dhl .boite{ border-radius:12px; }
  .dhl .boite .bn{ font-size:22px; }
  .dhl .reveal h4{ font-size:24px; }

  /* Compte à rebours empilé */
  .dhl .cdsec{ padding:0 0 44px; }
  .dhl .cdwrap{ margin:0 20px; padding:26px 20px; text-align:center; border-radius:22px; }
  .dhl .cdGrid{ grid-template-columns:1fr; gap:22px; }
  .dhl .cdGrid h2{ font-size:28px; }
  .dhl .clock{ gap:8px; }
  .dhl .unit{ min-width:0; padding:12px 4px; }
  .dhl .unit b{ font-size:30px; }
  .dhl .nl{ flex-direction:column; }
  .dhl .nl input{ text-align:center; }
  .dhl .nl .btn{ width:100%; }

  /* Footer empilé centré */
  .dhl .footGrid{ grid-template-columns:1fr; gap:24px; text-align:center; }
  .dhl .foot .brand{ justify-content:center; }
  .dhl .foot ul{ align-items:center; }
  .dhl .foot .blurb{ margin-left:auto; margin-right:auto; }
  .dhl .footbar{ flex-direction:column; gap:10px; text-align:center; }

  /* CTA de fin de section. Volontairement NON collant (02/09/2026) : en
     position:sticky il restait devant les yeux pendant tout le défilement et
     passait par-dessus le contenu. Il reste à sa place dans la page. */
  .dhl .bottomcta{ display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .dhl .bottomcta .btn{ padding:14px 18px; }
}

/* =====================================================================
   ACCESSIBILITÉ — respect de prefers-reduced-motion
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .dhl .starfield, .dhl .snowfield, .dhl .moon{ display:none !important; }
  .dhl *,.dhl *::before,.dhl *::after{ animation:none !important; transition:none !important; }
}

/* =====================================================================
   QUICKVIEW COMPACT — aperçu rapide épuré
   (image + titre + prix + sélecteur de déclinaison + ajout au panier)
   ===================================================================== */
/* Cadre la modale : largeur maîtrisée, hauteur limitée avec scroll interne
   pour qu'elle ne déborde jamais de l'écran. */
.quickview .modal-dialog{ max-width:880px; width:94%; margin:1.75rem auto; }
.quickview .modal-content{ max-height:88vh; }
.quickview .modal-body{ max-height:78vh; overflow-y:auto; padding:1.25rem 1.5rem; }

/* Masque la longue partie éditoriale (résumé) et le partage social :
   le récit complet reste sur la fiche produit. */
.quickview #product-description-short{ display:none !important; }
.quickview .modal-footer{ display:none !important; }

/* Titre plus mesuré dans la modale. */
.quickview .modal-body h1.h1{ font-size:1.5rem; line-height:1.25; margin:0 0 .5rem; }

/* Image de couverture contenue pour garder un aperçu compact et équilibré. */
.quickview .product-cover img,
.quickview .images-container img{ max-height:340px; max-width:100%; width:auto; margin:0 auto; display:block; }

/* =====================================================================
   CHECKOUT — visibilité des cases à cocher (CGV, RGPD…) sur fond sombre
   Le thème masque l'input natif et affiche un faux carré (bordure grise)
   avec un coche quasi noir → invisible sur le fond nuit. On éclaircit le
   carré, on dore la bordure et on assombrit le coche pour qu'il ressorte.
   Scopé au checkout pour ne pas toucher aux filtres produits (.facet).
   ===================================================================== */
#conditions-to-approve .custom-checkbox input[type=checkbox]+span,
#checkout .custom-checkbox input[type=checkbox]+span,
.checkout .custom-checkbox input[type=checkbox]+span,
#js-checkout-process .custom-checkbox input[type=checkbox]+span{
  background:#fbf9f3;
  border:2px solid #e8c061 !important;
  border-radius:3px;
}
#conditions-to-approve .custom-checkbox input[type=checkbox]+span .checkbox-checked,
#checkout .custom-checkbox input[type=checkbox]+span .checkbox-checked,
.checkout .custom-checkbox input[type=checkbox]+span .checkbox-checked,
#js-checkout-process .custom-checkbox input[type=checkbox]+span .checkbox-checked{
  color:#1a1130 !important; /* coche foncé sur carré clair → bien visible */
}
/* État coché : on renforce encore le contraste du carré. */
#conditions-to-approve .custom-checkbox input[type=checkbox]:checked+span,
#checkout .custom-checkbox input[type=checkbox]:checked+span,
.checkout .custom-checkbox input[type=checkbox]:checked+span,
#js-checkout-process .custom-checkbox input[type=checkbox]:checked+span{
  background:#e8c061;
  border-color:#e8c061 !important;
}

/* =====================================================================
   HISTORIQUE COMMANDES — badges de statut harmonisés au thème
   On garde la couleur de l'état (sens métier : bleu = en attente, gris =
   annulé…) et la classe de contraste du texte ; on soigne juste la forme
   du « pill » pour qu'il s'accorde au reste (arrondi, padding, ombre).
   ===================================================================== */
#history .table-labeled .label-pill,
#history .orders .status .label-pill,
#order-detail .label-pill,
.page-customer-account #history .label-pill{
  display:inline-block;
  padding:5px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.45;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  white-space:nowrap;
}
/* Tableau de l'historique : lignes lisibles sur fond sombre. */
#history .table-labeled td,
#history .table-labeled th{ vertical-align:middle; }
/* Fond du tableau historique transparent (sinon bandeau blanc des lignes striped). */
#history .table,
#history .table>tbody>tr,
#history .table>tbody>tr>td,
#history .table>tbody>tr>th,
#history .table>thead>tr>th,
#history .table-striped>tbody>tr:nth-of-type(odd),
#history .table-striped>tbody>tr:nth-of-type(odd)>td,
#history .table-bordered,
#history .table-bordered>tbody>tr>td,
#history .table-bordered>thead>tr>th{
  background:transparent !important;
  color:#ece6f5;
  border-color:rgba(232,192,97,.16) !important;
}
#history .table thead th{ color:#f3d98c !important; }

/* =====================================================================
   DÉTAIL DE COMMANDE — blocs lisibles sur le thème sombre
   La page utilise des `.box` (restées blanches) alors que le texte est en
   clair (var(--text)) → illisible. On rend les .box transparentes + bordure
   dorée (comme les .card du reste du compte) et on neutralise le fond clair
   des tableaux striped pour que le texte clair ressorte.
   ===================================================================== */
#order-detail .box{
  background:transparent !important;
  border:1px solid rgba(232,192,97,.16) !important;
  border-radius:14px !important;
  box-shadow:none !important;
  color:#ece6f5;
}
#order-detail .box a{ color:#f3d98c !important; }
#order-detail .box strong,
#order-detail .box .h3,
#order-detail .box h3{ color:#fff; }

/* Tableaux du détail (suivi, produits, adresses) : fond transparent,
   texte clair, séparateurs dorés. Les badges de statut gardent leur couleur. */
#order-detail .table,
#order-detail .table>tbody>tr,
#order-detail .table>tbody>tr>td,
#order-detail .table>tbody>tr>th,
#order-detail .table>thead>tr>th,
#order-detail .table-striped>tbody>tr:nth-of-type(odd),
#order-detail .table-striped>tbody>tr:nth-of-type(odd)>td{
  background:transparent !important;
  color:#ece6f5;
  border-color:rgba(232,192,97,.16) !important;
}
#order-detail .table th{ color:#f3d98c !important; }

/* =====================================================================
   FORMULAIRES COMPTE / CONNEXION — libellés lisibles sur fond sombre
   (les labels .form-control-label étaient en texte sombre, invisibles)
   ===================================================================== */
.page-authentication .form-control-label,
.page-authentication label,
#authentication .form-control-label,
#authentication label,
#password .form-control-label,
#password label,
.page-customer-account .form-control-label,
.page-customer-account label,
#registration .form-control-label,
#registration label{
  color:#ece6f5 !important;
}
/* Liens et textes d'aide de ces formulaires */
.page-authentication .form-text,
.page-customer-account .form-text{ color:#b6aacb !important; }