/* ============================================================
   home-nouveautes.css — Bloc "Découvrez" — Dimension'Sono
   v13 (02/10/2026) — dégradé de fond identique à « Nos réalisations » (#232323 → #270C32)
   v12 (02/10/2026) — bleu d'origine #0099ff (Stock B, Démo), titre centré sur desktop
   v11 (01/10/2026) — bandeau « DEMO EN BOUTIQUE »
   v10 (01/10/2026) — étiquette réduite (9px, padding 4px 5px)
   v9 (01/10/2026) — bouton « Ajouter au panier » au survol
   v8 (30/09/2026) — couleurs d'étiquette par catégorie
   v7 (30/09/2026) — contrastes WCAG AA : bandeau #6b6b6b, « Sur commande » #b05e00
   v6 (29/09/2026) — cartes « squelette » pendant le chargement (plus de zone vide)
   v5 (29/09/2026) — plus d'effet de saut au chargement (.dsn-ready)
   v4 (29/09/2026) — suppression du cadre au clic sur onglets/flèches
   v3 (29/09/2026) — "TTC" ne chevauche plus le badge de remise
   v2 (29/09/2026) — alignement sur la charte des miniatures
   produit natives (.product-miniature) :
   - couleurs étiquettes / textes / tailles de police
   - suppression de la ligne grise sous la photo
   - prix alignés d'une carte à l'autre
   - flèches sorties des cartes
   ============================================================ */

/* ── Section wrapper ── */
.dsn-section {
  padding: 40px 0 50px;
  /* Même dégradé que le carrousel « Nos réalisations » (page Installation, CMS #18) */
  background: linear-gradient(#232323 24%, #270C32 100%);
  font-family: Inter, sans-serif;
}

.dsn-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Titre ── */
.dsn-heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
  text-align: left;
}

/* Titre « Découvrez » centré sur ordinateur uniquement */
@media (min-width: 992px) {
  .dsn-heading { text-align: center; }
}

/* ── Onglets ── */
.dsn-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 2px solid rgba(255,255,255,0.15);
}

.dsn-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.dsn-tab:hover { color: #fff; }

/* Aucun cadre au clic / au toucher (orange sur mobile, blanc sur desktop) */
.dsn-tab,
.dsn-nav,
.dsn-card-link,
.dsn-cta-btn {
  -webkit-tap-highlight-color: transparent;
}

.dsn-section .dsn-tab:focus,
.dsn-section .dsn-tab:focus-visible,
.dsn-section .dsn-tab:active,
.dsn-section .dsn-nav:focus,
.dsn-section .dsn-nav:focus-visible,
.dsn-section .dsn-nav:active {
  outline: none !important;
  box-shadow: none !important;
}

.dsn-section .dsn-nav:focus:not(:hover) {
  border-color: #a831af;
}

.dsn-tab--active {
  color: #fff;
  border-bottom-color: #fff;
}

/* ── Panel ── */
.dsn-panel--hidden { display: none; }

/* ── Slider ──
   .dsn-slider  : ne clippe plus (les flèches sont à l'extérieur des cartes)
   .dsn-viewport: créé par le JS autour de .dsn-track, c'est lui qui clippe */
.dsn-slider {
  position: relative;
  overflow: visible;
}

.dsn-viewport {
  overflow: hidden;
  padding: 4px 0 12px;          /* laisse respirer l'ombre des cartes */
}

.dsn-track {
  display: flex;
  transition: transform 0.35s ease;
  align-items: stretch;
}

.dsn-track--loading { min-height: 300px; }

/* ── Messages d'état ── */
.dsn-loading,
.dsn-empty,
.dsn-error {
  padding: 30px 20px;
  text-align: center;
  color: #888;
  font-size: 0.9rem;
  width: 100%;
}

.dsn-error { color: #c0392b; }

/* ── Boutons de navigation (charte : rond blanc, liseré violet) ── */
.dsn-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: #fff;
  border: 1px solid #a831af;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  padding: 0;
  color: #232323;
  font-size: 22px;
  line-height: 1;
}

.dsn-nav:hover:not(:disabled) {
  background: #8f1e8d;
  border-color: #8f1e8d;
  color: #fff;
}

.dsn-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

/* Flèches à l'extérieur des cartes */
.dsn-nav-prev { left: -56px; }
.dsn-nav-next { right: -56px; }

/* ── Anti-"glitch" au chargement ──
   Tant que le JS n'a pas fini (.dsn-ready absent), le contenu du bloc est
   invisible mais sa place est réservée → la page ne saute pas. */
.dsn-section:not(.dsn-ready) .dsn-panel,
.dsn-section:not(.dsn-ready) .dsn-cta {
  visibility: hidden;
}

.dsn-section.dsn-ready .dsn-panel:not(.dsn-panel--hidden) {
  animation: dsnFadeIn 0.3s ease;
}

@keyframes dsnFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Cartes "squelette" pendant le chargement (même taille que les vraies) */
.dsn-skeleton {
  display: flex;
  overflow: hidden;
  padding: 4px 0 12px;
}

.dsn-skel-card {
  flex: 0 0 25%;
  box-sizing: border-box;
  padding: 0 10px;
}

.dsn-skel-card > div {
  background: linear-gradient(90deg, #2c2730 0%, #3a3340 50%, #2c2730 100%);
  background-size: 200% 100%;
  animation: dsnShimmer 1.2s linear infinite;
}

.dsn-skel-img  { aspect-ratio: 1 / 1; }
.dsn-skel-line { height: 14px; margin: 14px 20px 0; }
.dsn-skel-line--short { margin: 10px 60px 0; }
.dsn-skel-foot { height: 30px; margin-top: 136px; }

@keyframes dsnShimmer {
  from { background-position: 200% 0; }
  to   { background-position: 0 0; }
}

@media (max-width: 1199px) { .dsn-skel-card { flex-basis: 33.3333%; } }
@media (max-width: 991px)  { .dsn-skel-card { flex-basis: 50%; } }

@media (min-width: 576px) and (max-width: 1339px) {
  .dsn-skeleton { padding-left: 46px; padding-right: 46px; }
}

@media (max-width: 575px) {
  .dsn-skel-card { flex-basis: 82%; }
  .dsn-skel-img  { aspect-ratio: auto; height: 240px; }
}

/* ── Carte produit ──
   Largeur par défaut définie en CSS (4 / 3 / 2 cartes) : la carte a
   directement la bonne taille, sans attendre le JS */
.dsn-card {
  box-sizing: border-box;
  padding: 0 10px;
  flex: 0 0 25%;
  max-width: 25%;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1199px) {
  .dsn-card { flex-basis: 33.3333%; max-width: 33.3333%; }
}

@media (max-width: 991px) {
  .dsn-card { flex-basis: 50%; max-width: 50%; }
}

.dsn-card-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #fff;
  box-shadow: rgba(0,0,0,0.09) 3px 3px 8px 1px;
}

.dsn-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: #232323;
  background: #fff;
}

.dsn-card-link:hover { text-decoration: none; }

/* ── Image (carré, sans filet gris) ── */
.dsn-card-img-wrap {
  position: relative;
  background: #fff;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}

.dsn-card-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.dsn-no-img {
  width: 80px;
  height: 80px;
  background: #f0f0f0;
  display: block;
}

/* ── Étiquette (charte : violet #8f1e8d, 10px, collée au bord gauche) ── */
.dsn-badge {
  position: absolute;
  top: 10px;
  left: 0;
  background: #8f1e8d;
  color: #fff;
  font-size: 9px;              /* miniatures plus petites que le thème : étiquette réduite */
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 5px;
  border-radius: 0;
  z-index: 2;
}

/* Couleurs d'étiquette par catégorie (reprises du thème, custom.css) */
.dsn-badge--nouveaute    { background: #8f1e8d; }   /* 7,67:1 */
.dsn-badge--soldes       { background: #bc2649; }   /* 5,98:1 */
.dsn-badge--destockage   { background: #e60000; }   /* 4,81:1 (thème : #FF0000 = 4,0:1, corrigé) */
/* Stock B : bleu des fiches produit (charte) */
.dsn-badge--stock-b      { background: #0099ff; }
/* French Days / Black Friday : pas d'étiquette (module d'étiquettes dédié) */

/* ── Référence produit ── */
.dsn-card-ref {
  padding: 0 10px;
  font-size: 9.6px;
  font-weight: 300;
  color: #232323;
  text-align: left;
  line-height: 20px;
}

/* ── Corps de la carte ── */
.dsn-card-body {
  padding: 0 10px 10px;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Marque ── */
.dsn-card-brand {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: #232323;
  text-transform: capitalize;
  margin: 10px 0 5px;
  text-align: center;
}

/* ── Nom produit : hauteur fixe 2 lignes → prix alignés ── */
.dsn-card-title {
  font-size: 12.8px;
  font-weight: 400;
  line-height: 16px;
  color: #666;
  text-transform: capitalize;
  margin: 0 0 8px;
  text-align: center;
  height: 32px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Bandeau « DEMO EN BOUTIQUE » (thème : .product-flag.online-only) ──
   Hauteur réservée même sans bandeau → prix toujours alignés.
   Bleu du thème #0099ff (charte). */
.dsn-demo {
  height: 22px;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsn-demo-flag {
  display: block;
  width: 76%;
  background: #0099ff;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  text-transform: uppercase;
}

/* ── Bloc prix : hauteur réservée (avec ou sans ancien prix) ── */
.dsn-prices {
  min-height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.dsn-price-old-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 25px;
  margin-bottom: 4px;
}

.dsn-price-old {
  font-size: 11px;
  font-weight: 500;
  color: #666;
  text-decoration: line-through;
}

.dsn-reduc-badge {
  background: #bc2649;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Prix TTC ── */
.dsn-price-row {
  text-align: center;
  line-height: 20px;
}

.dsn-price {
  font-size: 17px;
  font-weight: 700;
  color: #232323;
}

/* "TTC" en exposant sans remonter dans la ligne du dessus
   (évitait le chevauchement avec le badge de remise) */
.dsn-ttc {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: #232323;
  margin-left: 4px;
  vertical-align: top;
  position: relative;
  top: 1px;
}

/* ── Disponibilité ── */
.dsn-avail {
  font-size: 12.8px;
  font-weight: 700;
  line-height: 20px;
  margin: 8px 0 0;
  text-align: center;
}

.dsn-avail--ok    { color: #058514; }
.dsn-avail--order { color: #b05e00; }   /* contraste 4,72:1 (ancien #eda30b : 2,13:1) */
.dsn-avail--no    { color: #c0392b; }

/* ── Bouton "Ajouter au panier" (charte : .product-add-to-cart .btn-primary) ──
   Affiché au survol de la carte, par-dessus la ligne de disponibilité,
   comme sur les miniatures du thème. Sur écran tactile : un toucher sur la
   partie basse (prix, disponibilité, bandeau) l'affiche (classe .dsn-card--open,
   posée par le JS) ; la photo et le nom ouvrent la fiche produit. */
.dsn-card-inner { position: relative; }

.dsn-cart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;                 /* juste au-dessus du bandeau gris */
  display: flex;
  justify-content: center;
  padding: 0 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 3;
}

.dsn-cart form { margin: 0; width: 100%; display: flex; justify-content: center; }

.dsn-section .dsn-cart-btn,
.dsn-section a.dsn-cart-btn {
  display: inline-block;
  min-width: 200px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #8f1e8d;
  color: #fff !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dsn-section .dsn-cart-btn:hover { background: #a831af; }
.dsn-section .dsn-cart-btn:focus { outline: none; }
.dsn-section .dsn-cart-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.dsn-card--open .dsn-cart {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (hover: hover) {
  .dsn-card--cart .dsn-card-inner:hover .dsn-cart,
  .dsn-card--cart .dsn-card-inner:focus-within .dsn-cart {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ── Footer livraison (gris #6b6b6b, texte blanc 12.8px — contraste 5,33:1,
      conforme WCAG AA ; ancien #999 : 2,85:1 relevé par l'audit SEO) ── */
.dsn-card-footer {
  background: #6b6b6b;
  padding: 5px;
  text-align: center;
  line-height: 20px;
}

.dsn-deliv-lbl {
  font-size: 12.8px;
  color: #fff;
  font-weight: 400;
}

/* ── CTA ── */
.dsn-cta {
  margin-top: 24px;
  text-align: center;
}

.dsn-cta-btn {
  display: inline-block;
  padding: 10px 28px;
  background: #8f1e8d;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s;
}

.dsn-cta-btn:hover {
  background: #a831af;
  color: #fff;
  text-decoration: none;
}

/* Le thème force la couleur des liens (règle "#header a") :
   on reprend la main sur le bouton */
.dsn-section a.dsn-cta-btn,
.dsn-section a.dsn-cta-btn:visited,
.dsn-section a.dsn-cta-btn:hover,
.dsn-section a.dsn-cta-btn:focus {
  color: #fff !important;
}

/* ── Responsive ── */

/* Écrans où la marge latérale ne suffit pas : on réserve la place des
   flèches de chaque côté du carousel, elles restent hors des cartes */
@media (min-width: 576px) and (max-width: 1339px) {
  .dsn-slider { padding: 0 46px; }
  .dsn-nav-prev { left: 0; }
  .dsn-nav-next { right: 0; }
}

@media (max-width: 575px) {
  /* ── Mobile : scroll tactile natif + format portrait ── */
  .dsn-slider,
  .dsn-viewport {
    overflow: visible;
    padding: 0;
  }

  .dsn-track {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 15%;
    padding-bottom: 12px;
    box-sizing: content-box;
  }

  .dsn-track::-webkit-scrollbar { display: none; }

  .dsn-nav { display: none !important; }

  .dsn-card {
    flex: 0 0 82% !important;
    max-width: 82%;
    scroll-snap-align: start;
  }


  .dsn-card-img-wrap {
    aspect-ratio: auto;
    height: 240px;
  }

  .dsn-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dsn-tab {
    padding: 8px 14px;
    font-size: 0.84rem;
  }
}