/* =====================================================================
   Des étoiles dans leurs yeux — Pages UNIVERS (catégories saisonnières)
   Se charge EN PLUS de homelutins.css (tokens, polices, nav, boîte à
   farces, compte à rebours, footer, étoiles, placeholder sont réutilisés).
   Tout est piloté par la variable --accent posée sur la racine .dhl.
   ===================================================================== */

/* Accent par défaut (or) ; chaque page univers redéfinit --accent inline. */
.dhl[data-univers]{ --accent:#e8c061; --accent-ink:#3a2a08; }

/* Bouton d'accent */
.dhl .btn-accent{ background:var(--accent); color:var(--accent-ink); border:0; }
.dhl .btn-accent:hover{ transform:translateY(-2px); filter:brightness(1.06); color:var(--accent-ink); }

/* Lien de nav actif (univers courant) */
.dhl .navlinks a.active{ opacity:1; color:#fff; border-bottom:2px solid var(--accent); padding-bottom:4px; }

/* ---- Fil d'Ariane ---- */
.dhl .breadcrumb{ font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:22px; position:relative; z-index:4; flex-wrap:wrap; }
.dhl .breadcrumb a{ color:var(--muted); }
.dhl .breadcrumb a:hover{ color:var(--gold-soft); }
.dhl .breadcrumb .cur{ color:var(--accent); }

/* ---- Hero catégorie ---- */
.dhl .chero{ position:relative; padding:30px 0 54px; overflow:hidden;
  background:radial-gradient(120% 90% at 78% 0%,var(--plum) 0%,var(--night) 48%,var(--ink) 100%); }
.dhl .cheroGrid{ display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:center; position:relative; z-index:4; }
.dhl .ueyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.dhl .ueyebrow .unum{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:22px; color:var(--accent);
  border:1px solid color-mix(in oklab,var(--accent),transparent 55%); border-radius:50%; width:36px; height:36px; display:grid; place-items:center; }
.dhl .chero h1{ font-size:62px; line-height:1; font-weight:600; margin:0 0 18px; color:#fff; letter-spacing:-.01em; }
.dhl .chero .intro{ font-size:18px; line-height:1.65; color:var(--muted); max-width:520px; margin:0 0 26px; }
.dhl .chero .meta{ display:flex; gap:22px; align-items:center; font-size:13.5px; color:var(--muted); flex-wrap:wrap; }
.dhl .chero .meta b{ color:var(--cream); }
.dhl .cheroArt{ position:relative; }
.dhl .chero .frame{ background:linear-gradient(145deg,color-mix(in oklab,var(--accent),transparent 35%),rgba(232,192,97,.06)); }
.dhl .chero .frame .inner{ border-color:color-mix(in oklab,var(--accent),transparent 60%); }
.dhl .chero .frame .shot{ aspect-ratio:4/3.3; border:0; }
.dhl .badge{ position:absolute; top:-16px; left:-14px; background:var(--accent); color:var(--accent-ink); border-radius:13px; padding:9px 15px;
  font-weight:800; font-size:12.5px; transform:rotate(-5deg); z-index:3; box-shadow:0 12px 24px -8px rgba(0,0,0,.6); }

/* ---- Toolbar (compteur + tri/filtres) ---- */
.dhl .toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; border-bottom:1px solid rgba(232,192,97,.14); flex-wrap:wrap; }
.dhl .toolbar .cnt{ font-size:14px; color:var(--muted); }
.dhl .toolbar .cnt b{ color:var(--cream); }
.dhl .filters{ display:flex; gap:10px; flex-wrap:wrap; }
.dhl .fchip{ font-size:13px; color:var(--text); border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.03);
  border-radius:999px; padding:8px 15px; cursor:pointer; transition:.2s; }
.dhl .fchip:hover,.dhl .fchip.on{ border-color:var(--accent); color:#fff; background:color-mix(in oklab,var(--accent),transparent 88%); }

/* Tri : bouton unique + menu déroulant (élément natif <details>) */
.dhl .dhl-sort{ position:relative; }
.dhl .dhl-sort > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  font-size:13px; color:var(--text); border:1px solid rgba(232,192,97,.32);
  background:rgba(255,255,255,.04); border-radius:999px; padding:9px 16px; transition:.2s; user-select:none;
}
.dhl .dhl-sort > summary::-webkit-details-marker{ display:none; }
.dhl .dhl-sort > summary:hover{ border-color:var(--accent); }
.dhl .dhl-sort .dhl-sort-label b{ color:var(--gold-soft); font-weight:700; }
.dhl .dhl-sort > summary svg{ transition:transform .2s; color:var(--gold-soft); }
.dhl .dhl-sort[open] > summary svg{ transform:rotate(180deg); }
.dhl .dhl-sort-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:50; min-width:220px; margin:0; padding:6px; list-style:none;
  background:#1a1130; border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 38px rgba(0,0,0,.45);
}
.dhl .dhl-sort-menu li{ margin:0; }
.dhl .dhl-sort-menu a{
  display:block; padding:9px 14px; border-radius:9px; color:var(--text); font-size:13px; text-decoration:none; transition:.15s;
}
.dhl .dhl-sort-menu a:hover{ background:rgba(232,192,97,.12); color:var(--gold-soft); }
.dhl .dhl-sort-menu a.on{ background:rgba(232,192,97,.16); color:var(--gold); font-weight:700; }

/* ---- Grille produits (3 colonnes) ---- */
.dhl .gridP{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:44px 0 10px; }
.dhl .gridP .card{ padding:15px; }
.dhl .gridP .card:hover{ border-color:color-mix(in oklab,var(--accent),transparent 45%); }
.dhl .gridP .card .pwrap .shot{ aspect-ratio:1/1; border-radius:13px; }
.dhl .gridP .ptag{ background:var(--accent); color:var(--accent-ink); }
.dhl .gridP .qa{ border-color:color-mix(in oklab,var(--accent),transparent 60%); color:var(--accent); }
.dhl .gridP .addbtn{ font-family:inherit; font-size:13px; font-weight:700; border-radius:999px; padding:10px 18px; cursor:pointer; border:0;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#3a2a08; transition:.18s; min-height:40px; }
.dhl .gridP .addbtn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(232,192,97,.7); }
.dhl .gridP .addbtn.round{ width:40px; height:40px; border-radius:12px; padding:0; font-size:22px; display:grid; place-items:center; }

/* Pagination native restylée */
.dhl .pagination{ display:flex; justify-content:center; gap:8px; margin:30px 0 0; list-style:none; padding:0; flex-wrap:wrap; }
.dhl .pagination .page-list{ display:flex; gap:8px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.dhl .pagination a,.dhl .pagination span{ display:grid; place-items:center; min-width:40px; height:40px; padding:0 10px; border-radius:999px;
  border:1px solid rgba(232,192,97,.25); color:var(--text); background:rgba(255,255,255,.03); font-size:14px; }
.dhl .pagination .current a,.dhl .pagination .current span{ background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:800; }
.dhl .pagination .disabled span{ opacity:.4; }

/* ---- Récit ---- */
.dhl .recit{ padding:84px 0; margin-top:30px; position:relative;
  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 .recit .sechead .script{ color:var(--accent); }

/* Récit : frise (voyage) */
.dhl .recit .tl{ position:relative; margin-top:10px; }
.dhl .recit .tl::before{ content:''; position:absolute; left:8%; right:8%; top:33px; height:2px;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent),transparent 30%) 15%,color-mix(in oklab,var(--accent),transparent 30%) 85%,transparent); }
.dhl .recit .tlrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; z-index:2; max-width:880px; margin:0 auto; }
.dhl .recit .tldot{ border:2px solid color-mix(in oklab,var(--accent),transparent 40%); box-shadow:0 0 24px -6px color-mix(in oklab,var(--accent),transparent 40%); }
.dhl .recit .tldate{ color:var(--accent); }
.dhl .recit .tlstep p{ margin:0 auto; max-width:260px; }

/* Récit : cartes conseils (maison) */
.dhl .cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.dhl .ccard{ background:linear-gradient(180deg,rgba(47,31,85,.5),rgba(26,17,48,.6)); border:1px solid rgba(232,192,97,.16); border-radius:18px; padding:26px; }
.dhl .ccard .ci{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
  background:color-mix(in oklab,var(--accent),transparent 86%); border:1px solid color-mix(in oklab,var(--accent),transparent 55%);
  font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; color:var(--accent); }
.dhl .ccard h4{ font-size:24px; font-weight:600; color:#fff; margin:0 0 8px; }
.dhl .ccard p{ font-size:14px; color:var(--muted); line-height:1.6; margin:0; }

/* Récit : boîte à farces accentuée (farces) */
.dhl .recit .bf{ max-width:1000px; margin:0 auto; }
.dhl .recit .boite .lid{ background:linear-gradient(180deg,color-mix(in oklab,var(--accent),transparent 68%),color-mix(in oklab,var(--accent),transparent 95%));
  border-bottom-color:color-mix(in oklab,var(--accent),transparent 55%); }
.dhl .recit .boite:hover{ border-color:var(--accent); }
.dhl .recit .boite.open{ border-color:color-mix(in oklab,var(--accent),transparent 45%);
  background:linear-gradient(180deg,color-mix(in oklab,var(--accent),transparent 82%),rgba(26,17,48,.8)); }
.dhl .recit .boite.open .bn{ color:var(--accent); }
.dhl .recit .boite.sel{ outline-color:var(--accent); }
.dhl .recit .reveal{ border-color:color-mix(in oklab,var(--accent),transparent 50%); }
.dhl .recit .reveal .rday{ color:var(--accent); }

/* ---- Cross-sell (les autres univers) ---- */
.dhl .cross{ padding:84px 0; }
.dhl .crossGrid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px; }
.dhl .ucard{ position:relative; border-radius:20px; overflow:hidden; border:1px solid rgba(232,192,97,.2); cursor:pointer;
  transition:transform .25s,border-color .25s; min-height:200px; display:flex; align-items:flex-end; }
.dhl .ucard:hover{ transform:translateY(-6px); border-color:rgba(232,192,97,.5); }
.dhl .ucard .shot{ position:absolute; inset:0; height:100%; border:0; border-radius:0; }
.dhl .ucard .shot img{ transition:transform .5s ease; }
.dhl .ucard:hover .shot img{ transform:scale(1.05); }
/* [DESTOILES 07/09/2026] Voile renforce depuis que les cartes portent une photo :
   garde l'ambiance nocturne et la lisibilite du titre en bas de carte. */
.dhl .ucard .uover{ position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,rgba(11,9,19,.35) 0%,rgba(11,9,19,.22) 35%,rgba(11,9,19,.9) 100%); }
.dhl .ucard .ubody{ position:relative; z-index:3; padding:24px; }
.dhl .ucard h3{ font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:600; color:#fff; margin:0 0 4px; }
.dhl .ucard .ulink{ color:var(--gold-soft); font-size:13.5px; font-weight:700; }

/* ---- Compte à rebours : bouton accent ---- */
.dhl[data-univers] .cdsec .nl .btn,
.dhl[data-univers] .cdwrap .nl .btn{ background:var(--accent); color:var(--accent-ink); }

/* =====================================================================
   RESPONSIVE — pages univers (<= 768px)
   ===================================================================== */
@media (max-width:768px){
  .dhl .chero{ padding:22px 0 34px; }
  .dhl .cheroGrid{ grid-template-columns:1fr; gap:24px; }
  .dhl .chero h1{ font-size:38px; }
  .dhl .chero .intro{ font-size:15px; }

  .dhl .toolbar{ padding:14px 0; }
  .dhl .gridP{ grid-template-columns:1fr 1fr; gap:14px; padding:18px 0 6px; }
  .dhl .gridP .card{ padding:10px; }
  .dhl .gridP .card h3{ font-size:17px; }
  .dhl .gridP .qa{ display:none; }

  .dhl .recit{ padding:38px 0; margin-top:0; }

  /* frise verticale */
  .dhl .recit .tl::before{ display:none; }
  .dhl .recit .tlrow{ grid-template-columns:1fr; gap:0; max-width:none; position:relative; }
  .dhl .recit .tlrow::before{ content:''; position:absolute; left:19px; top:8px; bottom:14px; width:2px;
    background:linear-gradient(var(--accent),color-mix(in oklab,var(--accent),transparent 80%)); }
  .dhl .recit .tlstep{ display:flex; gap:14px; text-align:left; padding-bottom:16px; position:relative; }
  .dhl .recit .tldot{ width:40px; height:40px; margin:0; flex:0 0 auto; z-index:2; }
  .dhl .recit .tlstep p{ margin:0; max-width:none; }

  /* cartes conseils empilées */
  .dhl .cards3{ grid-template-columns:1fr; gap:12px; }
  .dhl .ccard{ padding:18px; display:flex; gap:13px; align-items:flex-start; }
  .dhl .ccard .ci{ width:38px; height:38px; margin:0; flex:0 0 auto; font-size:20px; }

  /* cross-sell empilé */
  .dhl .cross{ padding:38px 0; }
  .dhl .crossGrid{ grid-template-columns:1fr; gap:12px; }
  .dhl .ucard{ min-height:120px; }
}

/* ===================== Pagination (inline, sans dépendance thème) ===================== */
.dhl .dhl-pages{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px; margin:38px 0 4px;
}
.dhl .dhl-pages .pg{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px;
  border:1px solid rgba(232,192,97,.28); border-radius:999px;
  color:var(--text); font-family:var(--sans); font-size:.95rem; text-decoration:none;
  background:rgba(255,255,255,.02); transition:.2s ease;
}
.dhl .dhl-pages .pg:hover{ border-color:var(--accent); color:var(--accent); }
.dhl .dhl-pages .pg.on{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700;
}
.dhl .dhl-pages .pg.nav{ font-size:1.3rem; line-height:1; }
.dhl .dhl-pages .pg.sp{ border:0; background:transparent; min-width:24px; color:var(--muted); }

/* ===== Texte éditorial de la catégorie (ajouté le 06/09/2026) ===== */
.dhl .catseo{padding:56px 0}
.dhl .catseo-body{max-width:760px;margin:0 auto;font-size:17px;line-height:1.75}
.dhl .catseo-body h2{font-size:clamp(22px,3vw,28px);margin:36px 0 14px;line-height:1.25}
.dhl .catseo-body h2:first-child{margin-top:0}
.dhl .catseo-body p{margin:0 0 18px}
.dhl .catseo-body ul{margin:0 0 18px;padding-left:22px}
.dhl .catseo-body li{margin:0 0 10px}
.dhl .catseo-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.dhl .catseo-body a:hover{text-decoration:none}
@media (max-width:640px){.dhl .catseo{padding:36px 0}.dhl .catseo-body{font-size:16px}}