/* =========================================================================
   VooX — Pages thématiques (/mode-et-beaute) : le bloc « À la une » au-dessus
   des filtres du fil. Une grande carte à gauche, deux empilées à droite ;
   titre et phrase posés en blanc sur le bas de la photo.
   ========================================================================= */
.th-une{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:160px 160px;gap:24px;
  max-width:1140px;margin:6px auto 40px;
}
.th-une-carte{
  position:relative;display:block;overflow:hidden;border-radius:12px;background:#111;color:#fff;
  text-decoration:none;
}
.th-une-carte:first-child{grid-row:1 / span 2}
.th-une-carte img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.th-une-carte::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,0) 100%),
             linear-gradient(0deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 60%);
}
.th-une-carte:hover img{transform:scale(1.04)}
.th-une-texte{
  position:absolute;left:28px;right:28px;bottom:24px;z-index:1;display:flex;flex-direction:column;gap:8px;
}
.th-une-texte strong{
  font-family:var(--voox-font-title);font-size:26px;line-height:1.25;font-weight:700;color:#fff;
}
.th-une-texte span{font-size:14px;font-weight:600;line-height:1.4;color:#fff}
.th-une-carte:first-child .th-une-texte{bottom:28px}
.th-une-carte:first-child .th-une-texte strong{font-size:30px}
.th-une-carte:not(:first-child) .th-une-texte{top:50%;bottom:auto;transform:translateY(-50%)}

@media (max-width:760px){
  .th-une{grid-template-columns:1fr;grid-template-rows:280px 160px 160px;gap:14px;margin-bottom:28px}
  .th-une-carte:first-child{grid-row:auto}
  .th-une-texte{left:18px;right:18px}
  .th-une-texte strong,.th-une-carte:first-child .th-une-texte strong{font-size:22px}
}

/* Le carrousel (une carte avec « diapos ») : les diapos se superposent et se
   fondent l'une dans l'autre. Le voile passe sur chaque diapo, pour ne pas
   couvrir les liens. */
.th-carrousel::after{content:none}
.th-diapo{
  position:absolute;inset:0;display:block;color:#fff;text-decoration:none;
  opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s;
}
.th-diapo.est-active{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.th-diapo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,0) 100%),
             linear-gradient(0deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 60%);
}
.th-fleche{
  position:absolute;bottom:10px;z-index:2;width:32px;height:32px;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px);
  opacity:0;transition:opacity .2s ease,background .2s ease;
}
.th-fleche--prec{right:50px}
.th-fleche--suiv{right:12px}
.th-carrousel:hover .th-fleche,.th-fleche:focus-visible{opacity:1}
.th-fleche:hover{background:rgba(255,255,255,.32)}
/* Les points, à côté des flèches en bas à droite : le titre et sa phrase
   gardent le bas à gauche. */
.th-points{position:absolute;right:96px;bottom:22px;z-index:2;display:flex;gap:7px}
.th-point{
  width:8px;height:8px;padding:0;border:0;border-radius:4px;cursor:pointer;
  background:rgba(255,255,255,.5);transition:width .3s ease,background .3s ease;
}
.th-point.est-actif{width:22px;background:#fff}
/* Sur un écran tactile, pas de survol : les flèches restent visibles. */
@media (hover:none){.th-fleche{opacity:1}}
/* Le texte d'une diapo s'arrête avant les points et les flèches. */
.th-carrousel .th-une-texte{right:170px}
@media (max-width:760px){
  /* Sur mobile, points et flèches passent en haut : le texte garde toute la largeur. */
  .th-carrousel .th-une-texte{right:18px}
  .th-carrousel .th-fleche,.th-carrousel .th-points{top:12px;bottom:auto}
  .th-carrousel .th-points{top:24px}
}

/* Les visuels détourés (packshots PNG/WebP transparents) se posent sur un gris
   très clair plutôt que sur le blanc de la page. */
.voox-masonry[data-fil-tasser] .voox-tile,
.voox-masonry[data-fil-tasser] .voox-tile img{background-color:#F2F3F5}
/* Certains packshots ont un fond blanc incrusté (JPG, WebP) : sur les
   vignettes produits, l'image se fond dans le gris (multiply) — le blanc
   devient gris, le reste ne bouge presque pas. */
.voox-masonry[data-fil-tasser] .voox-tile[data-cats~="produits"]{isolation:isolate}
.voox-masonry[data-fil-tasser] .voox-tile[data-cats~="produits"] img{mix-blend-mode:multiply;background-color:transparent}